diff --git a/surfsense_web/components/assistant-ui/connector-popup.tsx b/surfsense_web/components/assistant-ui/connector-popup.tsx index 0f8d341c2..1df18a425 100644 --- a/surfsense_web/components/assistant-ui/connector-popup.tsx +++ b/surfsense_web/components/assistant-ui/connector-popup.tsx @@ -316,19 +316,19 @@ export const ConnectorIndicator: FC = () => { /> - + {/* Bottom fade shadow */} diff --git a/surfsense_web/components/assistant-ui/connector-popup/components/connector-card.tsx b/surfsense_web/components/assistant-ui/connector-popup/components/connector-card.tsx index 3b1c41cdf..e8fe6da33 100644 --- a/surfsense_web/components/assistant-ui/connector-popup/components/connector-card.tsx +++ b/surfsense_web/components/assistant-ui/connector-popup/components/connector-card.tsx @@ -161,7 +161,9 @@ export const ConnectorCard: FC = ({ {accountCount !== undefined && accountCount > 0 && ( <> - {accountCount} {accountCount === 1 ? "Account" : "Accounts"} + + {accountCount} {accountCount === 1 ? "Account" : "Accounts"} + )}

diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-edit-view.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-edit-view.tsx index e09bdea90..bdfe9af77 100644 --- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-edit-view.tsx +++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-edit-view.tsx @@ -148,7 +148,9 @@ export const ConnectorEditView: FC = ({ {getConnectorIcon(connector.connector_type, "size-7")}
-

{connector.name}

+

+ {connector.name} +

Manage your connector settings and sync configuration

diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/indexing-configuration-view.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/indexing-configuration-view.tsx index 2dcadf459..8f4a29e61 100644 --- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/indexing-configuration-view.tsx +++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/indexing-configuration-view.tsx @@ -1,17 +1,17 @@ "use client"; import { ArrowLeft, Check, Info, Loader2 } from "lucide-react"; -import { type FC, useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useSearchParams } from "next/navigation"; +import { type FC, useCallback, useEffect, useMemo, useRef, useState } from "react"; import { Button } from "@/components/ui/button"; import type { SearchSourceConnector } from "@/contracts/types/connector.types"; +import { getConnectorTypeDisplay } from "@/lib/connectors/utils"; import { cn } from "@/lib/utils"; import { DateRangeSelector } from "../../components/date-range-selector"; import { PeriodicSyncConfig } from "../../components/periodic-sync-config"; -import { OAUTH_CONNECTORS, type IndexingConfigState } from "../../constants/connector-constants"; -import { getConnectorConfigComponent } from "../index"; -import { getConnectorTypeDisplay } from "@/lib/connectors/utils"; +import { type IndexingConfigState, OAUTH_CONNECTORS } from "../../constants/connector-constants"; import { getConnectorDisplayName } from "../../tabs/all-connectors-tab"; +import { getConnectorConfigComponent } from "../index"; interface IndexingConfigurationViewProps { config: IndexingConfigState; @@ -121,7 +121,12 @@ export const IndexingConfigurationView: FC = ({
- {getConnectorTypeDisplay(connector?.connector_type || "")} Connected ! {getConnectorDisplayName(connector?.name || "")} + + {getConnectorTypeDisplay(connector?.connector_type || "")} Connected ! + {" "} + + {getConnectorDisplayName(connector?.name || "")} +

Configure when to start syncing your data diff --git a/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts b/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts index 1bfef9c43..2c8248255 100644 --- a/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts +++ b/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts @@ -243,7 +243,14 @@ export const useConnectorDialog = () => { console.warn("Invalid connector popup query params:", error); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [searchParams, allConnectors, editingConnector, indexingConfig, connectingConnectorType, viewingAccountsType]); + }, [ + searchParams, + allConnectors, + editingConnector, + indexingConfig, + connectingConnectorType, + viewingAccountsType, + ]); // Detect OAuth success / Failure and transition to config view useEffect(() => { @@ -292,9 +299,7 @@ export const useConnectorDialog = () => { let newConnector: SearchSourceConnector | undefined; if (params.connectorId) { const connectorId = parseInt(params.connectorId, 10); - newConnector = result.data.find( - (c: SearchSourceConnector) => c.id === connectorId - ); + newConnector = result.data.find((c: SearchSourceConnector) => c.id === connectorId); } else { newConnector = result.data.find( (c: SearchSourceConnector) => c.connector_type === oauthConnector.connectorType @@ -737,7 +742,6 @@ export const useConnectorDialog = () => { router.replace(url.pathname + url.search, { scroll: false }); }, [router]); - // Handle starting indexing const handleStartIndexing = useCallback( async (refreshConnectors: () => void) => { diff --git a/surfsense_web/components/assistant-ui/connector-popup/tabs/active-connectors-tab.tsx b/surfsense_web/components/assistant-ui/connector-popup/tabs/active-connectors-tab.tsx index 2f0e31106..7f1bd28f0 100644 --- a/surfsense_web/components/assistant-ui/connector-popup/tabs/active-connectors-tab.tsx +++ b/surfsense_web/components/assistant-ui/connector-popup/tabs/active-connectors-tab.tsx @@ -83,7 +83,9 @@ export const ActiveConnectorsTab: FC = ({ }; // Get most recent last indexed date from a list of connectors - const getMostRecentLastIndexed = (connectorsList: SearchSourceConnector[]): string | undefined => { + const getMostRecentLastIndexed = ( + connectorsList: SearchSourceConnector[] + ): string | undefined => { return connectorsList.reduce((latest, c) => { if (!c.last_indexed_at) return latest; if (!latest) return c.last_indexed_at; @@ -131,20 +133,27 @@ export const ActiveConnectorsTab: FC = ({ const getOAuthConnectorTypeInfo = (connectorType: string) => { const oauthConnector = OAUTH_CONNECTORS.find((c) => c.connectorType === connectorType); return { - title: oauthConnector?.title || connectorType.replace(/_/g, " ").replace(/connector/gi, "").trim(), + title: + oauthConnector?.title || + connectorType + .replace(/_/g, " ") + .replace(/connector/gi, "") + .trim(), }; }; // Filter OAuth connector types based on search query - const filteredOAuthConnectorTypes = Object.entries(oauthConnectorsByType).filter(([connectorType]) => { - if (!searchQuery) return true; - const searchLower = searchQuery.toLowerCase(); - const { title } = getOAuthConnectorTypeInfo(connectorType); - return ( - title.toLowerCase().includes(searchLower) || - connectorType.toLowerCase().includes(searchLower) - ); - }); + const filteredOAuthConnectorTypes = Object.entries(oauthConnectorsByType).filter( + ([connectorType]) => { + if (!searchQuery) return true; + const searchLower = searchQuery.toLowerCase(); + const { title } = getOAuthConnectorTypeInfo(connectorType); + return ( + title.toLowerCase().includes(searchLower) || + connectorType.toLowerCase().includes(searchLower) + ); + } + ); // Filter non-OAuth connectors based on search query const filteredNonOAuthConnectors = nonOauthConnectors.filter((connector) => { @@ -156,7 +165,8 @@ export const ActiveConnectorsTab: FC = ({ ); }); - const hasActiveConnectors = filteredOAuthConnectorTypes.length > 0 || filteredNonOAuthConnectors.length > 0; + const hasActiveConnectors = + filteredOAuthConnectorTypes.length > 0 || filteredNonOAuthConnectors.length > 0; return ( @@ -172,8 +182,8 @@ export const ActiveConnectorsTab: FC = ({ {/* OAuth Connectors - Grouped by Type */} {filteredOAuthConnectorTypes.map(([connectorType, typeConnectors]) => { const { title } = getOAuthConnectorTypeInfo(connectorType); - const isAnyIndexing = typeConnectors.some( - (c: SearchSourceConnector) => indexingConnectorIds.has(c.id) + const isAnyIndexing = typeConnectors.some((c: SearchSourceConnector) => + indexingConnectorIds.has(c.id) ); const documentCount = getDocumentCountForConnector( connectorType, @@ -211,9 +221,7 @@ export const ActiveConnectorsTab: FC = ({ {getConnectorIcon(connectorType, "size-6")}

-

- {title} -

+

{title}

{isAnyIndexing ? (

@@ -229,7 +237,9 @@ export const ActiveConnectorsTab: FC = ({

{formatDocumentCount(documentCount)} - {accountCount} {accountCount === 1 ? "Account" : "Accounts"} + + {accountCount} {accountCount === 1 ? "Account" : "Accounts"} +