From fb5671fa9a57c104d8ed07226a40e7a17e65104c Mon Sep 17 00:00:00 2001 From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com> Date: Thu, 23 Jul 2026 23:37:55 +0530 Subject: [PATCH] refactor(all-connectors): flatten catalog and drop category/deprecated sections --- .../tabs/all-connectors-tab.tsx | 140 ++++-------------- 1 file changed, 30 insertions(+), 110 deletions(-) diff --git a/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx b/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx index ea98f258f..8c82ecfb9 100644 --- a/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx +++ b/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx @@ -9,12 +9,8 @@ import { usePlatform } from "@/hooks/use-platform"; import { ConnectorCard } from "../components/connector-card"; import { COMPOSIO_CONNECTORS, - CONNECTOR_CATEGORY_LABELS, - type ConnectorCategory, CRAWLERS, DEPRECATED_CONNECTOR_TYPES, - getConnectorCategory, - IMPORT_CONNECTOR_TYPES, OAUTH_CONNECTORS, OTHER_CONNECTORS, } from "../constants/connector-constants"; @@ -83,63 +79,39 @@ export const AllConnectorsTab: FC = ({ const passesDeploymentFilter = (c: DeploymentFilterableConnector) => (!c.selfHostedOnly || selfHosted) && (!c.desktopOnly || isDesktop); - // Import connectors (Drive/OneDrive/Dropbox) are managed via the Documents - // sidebar "Import" menu, so they never appear in the MCP connector catalog. - const notImport = (c: { connectorType?: string }) => - !c.connectorType || !IMPORT_CONNECTOR_TYPES.has(c.connectorType); - - // Filter connectors based on search, deployment mode, and import exclusion + // Filter connectors based on search and deployment mode const filteredOAuth = OAUTH_CONNECTORS.filter( - (c) => matchesSearch(c.title, c.description) && passesDeploymentFilter(c) && notImport(c) + (c) => matchesSearch(c.title, c.description) && passesDeploymentFilter(c) ); const filteredCrawlers = CRAWLERS.filter( - (c) => matchesSearch(c.title, c.description) && passesDeploymentFilter(c) && notImport(c) + (c) => matchesSearch(c.title, c.description) && passesDeploymentFilter(c) ); const filteredOther = OTHER_CONNECTORS.filter( - (c) => matchesSearch(c.title, c.description) && passesDeploymentFilter(c) && notImport(c) + (c) => matchesSearch(c.title, c.description) && passesDeploymentFilter(c) ); // Filter Composio connectors const filteredComposio = COMPOSIO_CONNECTORS.filter( (c) => - (c.title.toLowerCase().includes(searchQuery.toLowerCase()) || - c.description.toLowerCase().includes(searchQuery.toLowerCase())) && - notImport(c) + c.title.toLowerCase().includes(searchQuery.toLowerCase()) || + c.description.toLowerCase().includes(searchQuery.toLowerCase()) ); - const isDeprecated = (c: { connectorType?: string }) => - !!c.connectorType && DEPRECATED_CONNECTOR_TYPES.has(c.connectorType); - - const inCategory = - (category: ConnectorCategory) => - (connector: T): boolean => - !isDeprecated(connector) && - !!connector.connectorType && - getConnectorCategory(connector.connectorType) === category; - - const knowledgeBase = { - oauth: filteredOAuth.filter(inCategory("knowledge_base")), - composio: filteredComposio.filter(inCategory("knowledge_base")), - other: filteredOther.filter(inCategory("knowledge_base")), - crawlers: filteredCrawlers.filter(inCategory("knowledge_base")), - }; - const toolsLive = { - oauth: filteredOAuth.filter(inCategory("tools_live")), - composio: filteredComposio.filter(inCategory("tools_live")), - other: filteredOther.filter(inCategory("tools_live")), - crawlers: filteredCrawlers.filter(inCategory("tools_live")), - }; - - // Deprecated cards render in a single section at the very bottom. Discord and - // Teams come from OAUTH_CONNECTORS; Luma, Tavily, Linkup, Baidu, Elasticsearch - // from OTHER_CONNECTORS (SearXNG has no catalog card); YouTube and Web Pages - // from CRAWLERS. - const deprecated = { - oauth: filteredOAuth.filter(isDeprecated), - other: filteredOther.filter(isDeprecated), - crawlers: filteredCrawlers.filter(isDeprecated), + // One flat grid, no separate "Deprecated" section. A deprecated connector is + // shown only if the user already connected it (before deprecation), so it + // stays manageable/disconnectable; never-connected deprecated connectors are + // hidden entirely. See DEPRECATED_CONNECTOR_TYPES for the full list. + const isVisible = (c: T) => + !c.connectorType || + !DEPRECATED_CONNECTOR_TYPES.has(c.connectorType) || + connectedTypes.has(c.connectorType); + const available = { + oauth: filteredOAuth.filter(isVisible), + composio: filteredComposio.filter(isVisible), + other: filteredOther.filter(isVisible), + crawlers: filteredCrawlers.filter(isVisible), }; const renderOAuthCard = (connector: OAuthConnector | ComposioConnector) => { @@ -169,7 +141,6 @@ export const AllConnectorsTab: FC = ({ documentCount={documentCount} accountCount={accountCount} isIndexing={isIndexing} - deprecated={DEPRECATED_CONNECTOR_TYPES.has(connector.connectorType)} onConnect={() => onConnectOAuth(connector)} onManage={ isConnected && onViewAccountsList @@ -218,7 +189,6 @@ export const AllConnectorsTab: FC = ({ documentCount={documentCount} connectorCount={mcpConnectorCount} isIndexing={isIndexing} - deprecated={DEPRECATED_CONNECTOR_TYPES.has(connector.connectorType)} onConnect={handleConnect} onManage={actualConnector && onManage ? () => onManage(actualConnector) : undefined} /> @@ -267,29 +237,17 @@ export const AllConnectorsTab: FC = ({ isConnecting={isConnecting} documentCount={documentCount} isIndexing={isIndexing} - deprecated={ - !!crawler.connectorType && DEPRECATED_CONNECTOR_TYPES.has(crawler.connectorType) - } onConnect={handleConnect} onManage={actualConnector && onManage ? () => onManage(actualConnector) : undefined} /> ); }; - const hasKnowledgeBase = - knowledgeBase.oauth.length > 0 || - knowledgeBase.composio.length > 0 || - knowledgeBase.other.length > 0 || - knowledgeBase.crawlers.length > 0; - const hasToolsLive = - toolsLive.oauth.length > 0 || - toolsLive.composio.length > 0 || - toolsLive.other.length > 0 || - toolsLive.crawlers.length > 0; - const hasDeprecated = - deprecated.oauth.length > 0 || deprecated.other.length > 0 || deprecated.crawlers.length > 0; - - const hasAnyResults = hasKnowledgeBase || hasToolsLive || hasDeprecated; + const hasAnyResults = + available.oauth.length > 0 || + available.composio.length > 0 || + available.other.length > 0 || + available.crawlers.length > 0; if (!hasAnyResults && searchQuery) { return ( @@ -303,50 +261,12 @@ export const AllConnectorsTab: FC = ({ return (
- {hasKnowledgeBase && ( -
-
-

- {CONNECTOR_CATEGORY_LABELS.knowledge_base} -

-
-
- {knowledgeBase.oauth.map(renderOAuthCard)} - {knowledgeBase.composio.map(renderOAuthCard)} - {knowledgeBase.crawlers.map(renderCrawlerCard)} - {knowledgeBase.other.map(renderOtherCard)} -
-
- )} - - {hasToolsLive && ( -
-
-

- {CONNECTOR_CATEGORY_LABELS.tools_live} -

-
-
- {toolsLive.oauth.map(renderOAuthCard)} - {toolsLive.composio.map(renderOAuthCard)} - {toolsLive.crawlers.map(renderCrawlerCard)} - {toolsLive.other.map(renderOtherCard)} -
-
- )} - - {hasDeprecated && ( -
-
-

Deprecated

-
-
- {deprecated.oauth.map(renderOAuthCard)} - {deprecated.crawlers.map(renderCrawlerCard)} - {deprecated.other.map(renderOtherCard)} -
-
- )} +
+ {available.oauth.map(renderOAuthCard)} + {available.composio.map(renderOAuthCard)} + {available.crawlers.map(renderCrawlerCard)} + {available.other.map(renderOtherCard)} +
); };