Make filters only display in-use connectors (#87)

web/src/app/page.tsx

@@ -5,14 +5,30 @@ import { redirect } from "next/navigation";
 import { DISABLE_AUTH } from "@/lib/constants";
 import { HealthCheckBanner } from "@/components/health/healthcheck";
 import { ApiKeyModal } from "@/components/openai/ApiKeyModal";
+import { buildUrl } from "@/lib/utilsSS";
+import { User } from "@/lib/types";
 
 export default async function Home() {
-  let user = null;
-  if (!DISABLE_AUTH) {
-    user = await getCurrentUserSS();
-    if (!user && !DISABLE_AUTH) {
-      return redirect("/auth/login");
-    }
+  const tasks = [
+    DISABLE_AUTH ? (async () => null)() : getCurrentUserSS(),
+    fetch(buildUrl("/manage/connector"), {
+      next: { revalidate: 0 },
+    }),
+  ];
+
+  const results = await Promise.all(tasks);
+  const user = results[0] as User | null;
+  const connectorsResponse = results[1] as Response;
+
+  if (!DISABLE_AUTH && !user) {
+    return redirect("/auth/login");
+  }
+
+  let connectors = null;
+  if (connectorsResponse.ok) {
+    connectors = await connectorsResponse.json();
+  } else {
+    console.log(`Failed to fetch connectors - ${connectorsResponse.status}`);
   }
 
   return (
@@ -24,7 +40,7 @@ export default async function Home() {
       <ApiKeyModal />
       <div className="px-24 pt-10 flex flex-col items-center min-h-screen bg-gray-900 text-gray-100">
         <div className="w-full">
-          <SearchSection />
+          <SearchSection connectors={connectors} />
         </div>
       </div>
     </>

web/src/components/search/Filters.tsx

@@ -2,11 +2,7 @@ import React from "react";
 import { Source } from "./interfaces";
 import { getSourceIcon } from "../source";
 import { Funnel } from "@phosphor-icons/react";
-
-interface SourceSelectorProps {
-  selectedSources: Source[];
-  setSelectedSources: React.Dispatch<React.SetStateAction<Source[]>>;
-}
+import { ValidSources } from "@/lib/types";
 
 const sources: Source[] = [
   { displayName: "Google Drive", internalName: "google_drive" },
@@ -16,9 +12,16 @@ const sources: Source[] = [
   { displayName: "Web", internalName: "web" },
 ];
 
+interface SourceSelectorProps {
+  selectedSources: Source[];
+  setSelectedSources: React.Dispatch<React.SetStateAction<Source[]>>;
+  existingSources: ValidSources[];
+}
+
 export function SourceSelector({
   selectedSources,
   setSelectedSources,
+  existingSources,
 }: SourceSelectorProps) {
   const handleSelect = (source: Source) => {
     setSelectedSources((prev: Source[]) => {
@@ -36,24 +39,26 @@ export function SourceSelector({
         <h2 className="font-bold my-auto">Filters</h2>
         <Funnel className="my-auto ml-2" size="20" />
       </div>
-      {sources.map((source) => (
-        <div
-          key={source.internalName}
-          className={
-            "flex cursor-pointer w-full items-center text-white " +
-            "py-1.5 my-1.5 rounded-lg px-2 " +
-            (selectedSources.includes(source)
-              ? "bg-gray-700"
-              : "hover:bg-gray-800")
-          }
-          onClick={() => handleSelect(source)}
-        >
-          {getSourceIcon(source.internalName, "16")}
-          <span className="ml-2 text-sm text-gray-200">
-            {source.displayName}
-          </span>
-        </div>
-      ))}
+      {sources
+        .filter((source) => existingSources.includes(source.internalName))
+        .map((source) => (
+          <div
+            key={source.internalName}
+            className={
+              "flex cursor-pointer w-full items-center text-white " +
+              "py-1.5 my-1.5 rounded-lg px-2 " +
+              (selectedSources.includes(source)
+                ? "bg-gray-700"
+                : "hover:bg-gray-800")
+            }
+            onClick={() => handleSelect(source)}
+          >
+            {getSourceIcon(source.internalName, "16")}
+            <span className="ml-2 text-sm text-gray-200">
+              {source.displayName}
+            </span>
+          </div>
+        ))}
     </div>
   );
 }

web/src/components/search/SearchSection.tsx

@@ -6,6 +6,7 @@ import { SearchResultsDisplay } from "./SearchResultsDisplay";
 import { Quote, Document, SearchResponse } from "./types";
 import { SourceSelector } from "./Filters";
 import { Source } from "./interfaces";
+import { Connector } from "@/lib/types";
 
 const initialSearchResponse: SearchResponse = {
   answer: null,
@@ -160,7 +161,11 @@ const searchRequestStreamed = async ({
   return { answer, quotes, relevantDocuments };
 };
 
-export const SearchSection: React.FC<{}> = () => {
+interface SearchSectionProps {
+  connectors: Connector<any>[];
+}
+
+export const SearchSection: React.FC<SearchSectionProps> = ({ connectors }) => {
   // Search
   const [searchResponse, setSearchResponse] = useState<SearchResponse | null>(
     null
@@ -176,6 +181,7 @@ export const SearchSection: React.FC<{}> = () => {
         <SourceSelector
           selectedSources={sources}
           setSelectedSources={setSources}
+          existingSources={connectors.map((connector) => connector.source)}
         />
       </div>
       <div className="w-[800px] mx-auto">

web/src/lib/userSS.ts

@@ -16,6 +16,7 @@ export const getGoogleOAuthUrlSS = async (): Promise<string> => {
 export const getCurrentUserSS = async (): Promise<User | null> => {
   const response = await fetch(buildUrl("/users/me"), {
     credentials: "include",
+    next: { revalidate: 0 },
     headers: {
       cookie: cookies()
         .getAll()