feat: reorganize connectors pages

.vscode/env_template.txt

@@ -65,3 +65,6 @@ S3_ENDPOINT_URL=http://localhost:9004
 S3_FILE_STORE_BUCKET_NAME=onyx-file-store-bucket
 S3_AWS_ACCESS_KEY_ID=minioadmin
 S3_AWS_SECRET_ACCESS_KEY=minioadmin
+
+# Show extra/uncommon connectors
+SHOW_EXTRA_CONNECTORS=True

backend/onyx/configs/app_configs.py

@@ -38,6 +38,9 @@
 # Controls whether users can use User Knowledge (personal documents) in assistants
 DISABLE_USER_KNOWLEDGE = os.environ.get("DISABLE_USER_KNOWLEDGE", "").lower() == "true"
 
+# If set to true, will show extra/uncommon connectors in the "Other" category
+SHOW_EXTRA_CONNECTORS = os.environ.get("SHOW_EXTRA_CONNECTORS", "").lower() == "true"
+
 # Controls whether to allow admin query history reports with:
 # 1. associated user emails
 # 2. anonymized user emails

backend/onyx/configs/constants.py

@@ -219,9 +219,6 @@ class BlobType(str, Enum):
     GOOGLE_CLOUD_STORAGE = "google_cloud_storage"
     OCI_STORAGE = "oci_storage"
 
-    # Special case, for internet search
-    NOT_APPLICABLE = "not_applicable"
-
 
 class DocumentIndexType(str, Enum):
     COMBINED = "combined"  # Vespa

backend/onyx/server/settings/models.py

@@ -62,6 +62,9 @@ class Settings(BaseModel):
     # User Knowledge settings
     user_knowledge_enabled: bool | None = True
 
+    # Connector settings
+    show_extra_connectors: bool | None = True
+
 
 class UserSettings(Settings):
     notifications: list[Notification]

backend/onyx/server/settings/store.py

@@ -1,5 +1,6 @@
 from onyx.configs.app_configs import DISABLE_USER_KNOWLEDGE
 from onyx.configs.app_configs import ONYX_QUERY_HISTORY_TYPE
+from onyx.configs.app_configs import SHOW_EXTRA_CONNECTORS
 from onyx.configs.constants import KV_SETTINGS_KEY
 from onyx.configs.constants import OnyxRedisLocks
 from onyx.key_value_store.factory import get_kv_store
@@ -53,6 +54,7 @@ def load_settings() -> Settings:
     if DISABLE_USER_KNOWLEDGE:
         settings.user_knowledge_enabled = False
 
+    settings.show_extra_connectors = SHOW_EXTRA_CONNECTORS
     return settings
 
 

deployment/docker_compose/docker-compose.dev.yml

@@ -120,6 +120,9 @@ services:
       # Chat Configs
       - HARD_DELETE_CHATS=${HARD_DELETE_CHATS:-}
 
+      # Show extra/uncommon connectors
+      - SHOW_EXTRA_CONNECTORS=${SHOW_EXTRA_CONNECTORS:-true}
+
       # Enables the use of bedrock models or IAM Auth
       - AWS_ACCESS_KEY_ID=${AWS_ACCESS_KEY_ID:-}
       - AWS_SECRET_ACCESS_KEY=${AWS_SECRET_ACCESS_KEY:-}

deployment/docker_compose/docker-compose.gpu-dev.yml

@@ -97,6 +97,9 @@ services:
 
       # Chat Configs
       - HARD_DELETE_CHATS=${HARD_DELETE_CHATS:-}
+
+      # Show extra/uncommon connectors
+      - SHOW_EXTRA_CONNECTORS=${SHOW_EXTRA_CONNECTORS:-true}
 
       # Vespa Language Forcing
       # See: https://docs.vespa.ai/en/linguistics.html 

deployment/docker_compose/docker-compose.multitenant-dev.yml

@@ -106,6 +106,10 @@ services:
       - SENTRY_DSN=${SENTRY_DSN:-}
       # Chat Configs
       - HARD_DELETE_CHATS=${HARD_DELETE_CHATS:-}
+
+      # Show extra/uncommon connectors
+      - SHOW_EXTRA_CONNECTORS=${SHOW_EXTRA_CONNECTORS:-true}
+
       # Enables the use of bedrock models or IAM Auth
       - AWS_ACCESS_KEY_ID=${AWS_ACCESS_KEY_ID:-}
       - AWS_SECRET_ACCESS_KEY=${AWS_SECRET_ACCESS_KEY:-}

deployment/docker_compose/env.prod.template

@@ -65,3 +65,7 @@ DB_READONLY_PASSWORD=password
 # If setting the vespa language is required, set this ('en', 'de', etc.).
 # See: https://docs.vespa.ai/en/linguistics.html 
 #VESPA_LANGUAGE_OVERRIDE=
+
+# Show extra/uncommon connectors
+# See https://docs.onyx.app for a full list of connectors
+SHOW_EXTRA_CONNECTORS=False

web/src/app/admin/add-connector/page.tsx

@@ -6,8 +6,14 @@ import { listSourceMetadata } from "@/lib/sources";
 import Title from "@/components/ui/title";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import {
   Tooltip,
   TooltipContent,
@@ -24,6 +30,7 @@ import useSWR from "swr";
 import { errorHandlingFetcher } from "@/lib/fetcher";
 import { buildSimilarCredentialInfoURL } from "@/app/admin/connector/[ccPairId]/lib";
 import { Credential } from "@/lib/connectors/credentials";
+import { SettingsContext } from "@/components/settings/SettingsProvider";
 import SourceTile from "@/components/SourceTile";
 
 function SourceTileTooltipWrapper({
@@ -140,6 +147,7 @@ export default function Page() {
 
   const [searchTerm, setSearchTerm] = useState("");
   const { data: federatedConnectors } = useFederatedConnectors();
+  const settings = useContext(SettingsContext);
 
   // Fetch Slack credentials to determine navigation behavior
   const { data: slackCredentials } = useSWR<Credential<any>[]>(
@@ -167,9 +175,19 @@ export default function Page() {
     [searchTerm]
   );
 
+  const popularSources = useMemo(() => {
+    const filtered = filterSources(sources);
+    return sources.filter(
+      (source) =>
+        source.isPopular &&
+        (filtered.includes(source) ||
+          source.displayName.toLowerCase().includes(searchTerm.toLowerCase()))
+    );
+  }, [sources, filterSources, searchTerm]);
+
   const categorizedSources = useMemo(() => {
     const filtered = filterSources(sources);
-    return Object.values(SourceCategory).reduce(
+    const categories = Object.values(SourceCategory).reduce(
       (acc, category) => {
         acc[category] = sources.filter(
           (source) =>
@@ -181,7 +199,23 @@ export default function Page() {
       },
       {} as Record<SourceCategory, SourceMetadata[]>
     );
-  }, [sources, filterSources, searchTerm]);
+    // Filter out the "Other" category if show_extra_connectors is false
+    if (settings?.settings?.show_extra_connectors === false) {
+      const filteredCategories = Object.entries(categories).filter(
+        ([category]) => category !== SourceCategory.Other
+      );
+      return Object.fromEntries(filteredCategories) as Record<
+        SourceCategory,
+        SourceMetadata[]
+      >;
+    }
+    return categories;
+  }, [
+    sources,
+    filterSources,
+    searchTerm,
+    settings?.settings?.show_extra_connectors,
+  ]);
 
   const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === "Enter") {
@@ -236,14 +270,32 @@ export default function Page() {
         className="ml-1 w-96 h-9  flex-none rounded-md border border-border bg-background-50 px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
       />
 
+      {popularSources.length > 0 && !searchTerm && (
+        <div className="mb-8">
+          <div className="flex mt-8">
+            <Title>Popular</Title>
+          </div>
+          <div className="flex flex-wrap gap-4 p-4">
+            {popularSources.map((source, sourceInd) => (
+              <SourceTileTooltipWrapper
+                preSelect={false}
+                key={source.internalName}
+                sourceMetadata={source}
+                federatedConnectors={federatedConnectors}
+                slackCredentials={slackCredentials}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
       {Object.entries(categorizedSources)
         .filter(([_, sources]) => sources.length > 0)
         .map(([category, sources], categoryInd) => (
           <div key={category} className="mb-8">
             <div className="flex mt-8">
               <Title>{category}</Title>
             </div>
-            <p>{getCategoryDescription(category as SourceCategory)}</p>
             <div className="flex flex-wrap gap-4 p-4">
               {sources.map((source, sourceInd) => (
                 <SourceTileTooltipWrapper
@@ -262,26 +314,3 @@ export default function Page() {
     </div>
   );
 }
-
-function getCategoryDescription(category: SourceCategory): string {
-  switch (category) {
-    case SourceCategory.Messaging:
-      return "Integrate with messaging and communication platforms.";
-    case SourceCategory.ProjectManagement:
-      return "Link to project management and task tracking tools.";
-    case SourceCategory.CustomerSupport:
-      return "Connect to customer support and helpdesk systems.";
-    case SourceCategory.CustomerRelationshipManagement:
-      return "Integrate with customer relationship management platforms.";
-    case SourceCategory.CodeRepository:
-      return "Integrate with code repositories and version control systems.";
-    case SourceCategory.Storage:
-      return "Connect to cloud storage and file hosting services.";
-    case SourceCategory.Wiki:
-      return "Link to wiki and knowledge base platforms.";
-    case SourceCategory.Other:
-      return "Connect to other miscellaneous knowledge sources.";
-    default:
-      return "Connect to various knowledge sources.";
-  }
-}

web/src/app/admin/settings/interfaces.ts

@@ -30,6 +30,9 @@ export interface Settings {
 
   // User Knowledge settings
   user_knowledge_enabled?: boolean;
+
+  // Connector settings
+  show_extra_connectors?: boolean;
 }
 
 export enum NotificationType {

web/src/lib/search/interfaces.ts

@@ -162,10 +162,10 @@ export interface SearchResponse {
 }
 
 export enum SourceCategory {
-  Storage = "Storage",
-  Wiki = "Wiki",
+  Storage = "Cloud Storage",
+  Wiki = "Knowledge Base & Wiki",
   CustomerSupport = "Customer Support",
-  CustomerRelationshipManagement = "Customer Relationship Management",
+  SalesAndMarketing = "Sales & Marketing",
   Messaging = "Messaging",
   ProjectManagement = "Project Management",
   CodeRepository = "Code Repository",
@@ -179,6 +179,7 @@ export interface SourceMetadata {
   shortDescription?: string;
   internalName: ValidSources;
   adminUrl: string;
+  isPopular?: boolean;
   oauthSupported?: boolean;
   federated?: boolean;
   federatedTooltip?: string;