From fbd3a5af2ae1b536a15a011e388601f20818a698 Mon Sep 17 00:00:00 2001
From: ervinpiol <rvnpiol14@gmail.com>
Date: Fri, 11 Oct 2024 13:10:31 +0800
Subject: [PATCH] feat: add delete and add data source

---
 web/src/app/ee/admin/teams/Main.tsx           |   8 +-
 .../app/ee/admin/teams/TeamspaceAssistant.tsx |  35 ++-
 .../ee/admin/teams/TeamspaceDataSource.tsx    | 276 +++++++++---------
 .../ee/admin/teams/TeamspaceDocumentSet.tsx   |  35 ++-
 .../app/ee/admin/teams/TeamspaceSidebar.tsx   |   2 +-
 .../admin/teams/TeamspaceSidebarContent.tsx   |   2 +-
 web/src/app/ee/admin/teams/TeamspacesCard.tsx |   5 +-
 web/src/components/Loading.tsx                |   2 +-
 8 files changed, 184 insertions(+), 181 deletions(-)

diff --git a/web/src/app/ee/admin/teams/Main.tsx b/web/src/app/ee/admin/teams/Main.tsx
index bf1bb6a3c67..025e8f335a1 100644
--- a/web/src/app/ee/admin/teams/Main.tsx
+++ b/web/src/app/ee/admin/teams/Main.tsx
@@ -45,6 +45,10 @@ export const Main = ({ assistants }: { assistants: Assistant[] }) => {
     error: documentSetsError,
   } = useDocumentSets();
 
+  if (isLoading || isDocumentSetsLoading || userIsLoading || isCCPairsLoading) {
+    return <ThreeDotsLoader />;
+  }
+
   if (error || !data) {
     return <div className="text-red-600">Error loading teams</div>;
   }
@@ -53,10 +57,6 @@ export const Main = ({ assistants }: { assistants: Assistant[] }) => {
     return <div className="text-red-600">Error loading teams</div>;
   }
 
-  if (isLoading || isDocumentSetsLoading || userIsLoading || isCCPairsLoading) {
-    return <ThreeDotsLoader />;
-  }
-
   if (ccPairsError || !ccPairs) {
     return <div className="text-red-600">Error loading connectors</div>;
   }
diff --git a/web/src/app/ee/admin/teams/TeamspaceAssistant.tsx b/web/src/app/ee/admin/teams/TeamspaceAssistant.tsx
index a8b0f586c2d..d2095903691 100644
--- a/web/src/app/ee/admin/teams/TeamspaceAssistant.tsx
+++ b/web/src/app/ee/admin/teams/TeamspaceAssistant.tsx
@@ -218,21 +218,26 @@ export const TeamspaceAssistant = ({
               <Pencil size={16} />
             </Button>
           </div>
-          <div className="pt-8 flex flex-wrap -space-x-3 pointer-events-none">
-            {currentAssistants.slice(0, 8).map((assistant) => (
-              <div
-                key={assistant.id}
-                className="bg-primary w-10 h-10 rounded-full flex items-center justify-center font-semibold text-inverted text-lg uppercase"
-              >
-                {assistant.name!.charAt(0)}
-              </div>
-            ))}
-            {currentAssistants.length > 8 && (
-              <div className="bg-background w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold">
-                +{currentAssistants.length - 8}
-              </div>
-            )}
-          </div>
+
+          {teamspace.assistants.length > 0 ? (
+            <div className="pt-8 flex flex-wrap -space-x-3 pointer-events-none">
+              {currentAssistants.slice(0, 8).map((assistant) => (
+                <div
+                  key={assistant.id}
+                  className="bg-primary w-10 h-10 rounded-full flex items-center justify-center font-semibold text-inverted text-lg uppercase"
+                >
+                  {assistant.name!.charAt(0)}
+                </div>
+              ))}
+              {currentAssistants.length > 8 && (
+                <div className="bg-background w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold">
+                  +{currentAssistants.length - 8}
+                </div>
+              )}
+            </div>
+          ) : (
+            <p>There are no assistant.</p>
+          )}
         </div>
       }
       title="Assistants"
diff --git a/web/src/app/ee/admin/teams/TeamspaceDataSource.tsx b/web/src/app/ee/admin/teams/TeamspaceDataSource.tsx
index e9126dfb321..8af3f4818fd 100644
--- a/web/src/app/ee/admin/teams/TeamspaceDataSource.tsx
+++ b/web/src/app/ee/admin/teams/TeamspaceDataSource.tsx
@@ -1,101 +1,70 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import { CustomModal } from "@/components/CustomModal";
 import { SearchInput } from "@/components/SearchInput";
 import { Button } from "@/components/ui/button";
-import {
-  CCPairDescriptor,
-  ConnectorIndexingStatus,
-  Teamspace,
-} from "@/lib/types";
 import { Globe, Pencil } from "lucide-react";
-import { useEffect, useState } from "react";
 import { useToast } from "@/hooks/use-toast";
+import { ConnectorIndexingStatus, Teamspace } from "@/lib/types";
+
+interface SimplifiedDataSource {
+  id: number;
+  name: string | null;
+}
 
 interface TeamspaceDataSourceProps {
   teamspace: Teamspace & { gradient: string };
-  ccPairs: ConnectorIndexingStatus<any, any>[] | undefined;
+  ccPairs: ConnectorIndexingStatus<any, any>[];
   refreshTeamspaces: () => void;
 }
 
-interface DataSourceContentProps {
-  searchTerm: string;
-  setSearchTerm: (term: string) => void;
-  filteredCurrentDataSources?: CCPairDescriptor<any, any>[];
-  filteredGlobalDataSources?: ConnectorIndexingStatus<any, any>[] | undefined;
-  isGlobal?: boolean;
-  onSelect?: (cc_pair: ConnectorIndexingStatus<any, any>) => void;
-  selectedDataSources?: ConnectorIndexingStatus<any, any>[] | undefined;
-}
-
-function isConnectorIndexingStatus(
-  dataSource: ConnectorIndexingStatus<any, any> | CCPairDescriptor<any, any>
-): dataSource is ConnectorIndexingStatus<any, any> {
-  return (
-    (dataSource as ConnectorIndexingStatus<any, any>).cc_pair_id !== undefined
-  );
-}
-
 const DataSourceContent = ({
   searchTerm,
   setSearchTerm,
-  filteredCurrentDataSources,
-  filteredGlobalDataSources,
+  filteredDataSources,
   isGlobal,
   onSelect,
-  selectedDataSources,
-}: DataSourceContentProps) => {
-  const dataSources = isGlobal
-    ? filteredGlobalDataSources
-    : filteredCurrentDataSources;
-
-  const getDataSourceId = (
-    dataSource: ConnectorIndexingStatus<any, any> | CCPairDescriptor<any, any>
-  ) => {
-    if (isConnectorIndexingStatus(dataSource)) {
-      return dataSource.cc_pair_id;
-    } else {
-      return dataSource.id;
-    }
-  };
-
+  hasDataSource,
+}: {
+  searchTerm: string;
+  setSearchTerm: (term: string) => void;
+  filteredDataSources?: SimplifiedDataSource[];
+  isGlobal?: boolean;
+  onSelect?: (dataSource: SimplifiedDataSource) => void;
+  hasDataSource?: boolean;
+}) => {
   return (
     <div className={isGlobal ? "cursor-pointer" : ""}>
       <div className="flex items-center justify-between mb-6">
         <h2 className="text-lg leading-none tracking-tight lg:text-xl font-semibold">
-          {isGlobal ? "Available" : "Current"} Document Sets
+          {isGlobal ? "Available" : "Current"} Data Source
         </h2>
         <div className="w-1/2">
           <SearchInput
-            placeholder="Search document sets..."
+            placeholder="Search data source..."
             value={searchTerm}
             onChange={setSearchTerm}
           />
         </div>
       </div>
-      <div className="grid gap-4 md:grid-cols-2">
-        {dataSources?.map((dataSource) => (
-          <div
-            key={getDataSourceId(dataSource)}
-            className={`border rounded-md flex items-center p-4 gap-4 ${
-              selectedDataSources?.some(
-                (selected) =>
-                  getDataSourceId(selected) === getDataSourceId(dataSource)
-              )
-                ? "bg-primary-300 border-input-colored"
-                : ""
-            }`}
-            onClick={() =>
-              onSelect &&
-              isConnectorIndexingStatus(dataSource) &&
-              onSelect(dataSource)
-            }
-          >
-            <Globe className="shrink-0 my-auto" />
-            <h3 className="truncate">{dataSource.name}</h3>
-          </div>
-        ))}
-      </div>
+
+      {hasDataSource ? (
+        <div className="grid gap-4 md:grid-cols-2">
+          {filteredDataSources?.map((dataSource) => (
+            <div
+              key={dataSource.id}
+              className="border rounded-md flex items-start gap-4 p-4"
+              onClick={() => onSelect && onSelect(dataSource)}
+            >
+              <Globe className="shrink-0 my-auto" />
+              <h3 className="truncate">{dataSource.name}</h3>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <p>There are no {isGlobal ? "Available" : "Current"} Data Sources.</p>
+      )}
     </div>
   );
 };
@@ -107,47 +76,64 @@ export const TeamspaceDataSource = ({
 }: TeamspaceDataSourceProps) => {
   const { toast } = useToast();
   const [isDataSourceModalOpen, setIsDataSourceModalOpen] = useState(false);
-  const [selectedDataSources, setSelectedDataSources] = useState<
-    ConnectorIndexingStatus<any, any>[]
-  >([]);
   const [searchTermCurrent, setSearchTermCurrent] = useState("");
   const [searchTermGlobal, setSearchTermGlobal] = useState("");
+  const [currentDataSources, setCurrentDataSources] = useState<
+    SimplifiedDataSource[]
+  >(teamspace.cc_pairs);
 
-  const filterDataSources = (
-    ccPairs: ConnectorIndexingStatus<any, any>[] | undefined,
-    searchTerm: string
-  ) =>
-    ccPairs?.filter(
-      (ccPair) =>
-        ccPair.public_doc &&
-        !teamspace.cc_pairs.some(
-          (currentCCPair) => currentCCPair.id === ccPair.cc_pair_id
-        ) &&
-        ccPair.name?.toLowerCase().includes(searchTerm.toLowerCase())
-    );
+  useEffect(() => {
+    setCurrentDataSources(teamspace.cc_pairs);
+  }, [teamspace]);
 
-  const filteredCurrentDataSources = teamspace.cc_pairs.filter((ccPair) =>
-    ccPair.name?.toLowerCase().includes(searchTermCurrent.toLowerCase())
+  const [globalDataSources, setGlobalDataSources] = useState<
+    SimplifiedDataSource[]
+  >(() =>
+    ccPairs
+      .filter(
+        (ccPair) =>
+          ccPair.public_doc &&
+          !teamspace.cc_pairs.some(
+            (currentCCPair) => currentCCPair.id === ccPair.cc_pair_id
+          )
+      )
+      .map((ccPair) => ({ id: ccPair.cc_pair_id, name: ccPair.name }))
   );
 
-  const [filteredGlobalDataSources, setFilteredGlobalDataSources] = useState(
-    () => filterDataSources(ccPairs, searchTermGlobal)
-  );
+  const [tempCurrentDataSources, setTempCurrentDataSources] =
+    useState<SimplifiedDataSource[]>(currentDataSources);
+  const [tempGlobalDataSources, setTempGlobalDataSources] =
+    useState<SimplifiedDataSource[]>(globalDataSources);
 
   useEffect(() => {
-    setFilteredGlobalDataSources(filterDataSources(ccPairs, searchTermGlobal));
-  }, [ccPairs, teamspace.cc_pairs, searchTermGlobal]);
-
-  const handleSelectDataSource = (
-    ccPair: ConnectorIndexingStatus<any, any>
-  ) => {
-    setSelectedDataSources((prevSelected) =>
-      prevSelected.some((selected) => selected.cc_pair_id === ccPair.cc_pair_id)
-        ? prevSelected.filter(
-            (selected) => selected.cc_pair_id !== ccPair.cc_pair_id
+    setTempCurrentDataSources(currentDataSources);
+    const updatedGlobalDataSources = ccPairs
+      .filter(
+        (ccPair) =>
+          ccPair.public_doc &&
+          !currentDataSources.some(
+            (dataSource) => dataSource.id === ccPair.cc_pair_id
           )
-        : [...prevSelected, ccPair]
-    );
+      )
+      .map((ccPair) => ({ id: ccPair.cc_pair_id, name: ccPair.name }));
+    setGlobalDataSources(updatedGlobalDataSources);
+    setTempGlobalDataSources(updatedGlobalDataSources);
+  }, [currentDataSources, ccPairs]);
+
+  const handleSelectDataSource = (ccPair: SimplifiedDataSource) => {
+    if (
+      tempCurrentDataSources.some((dataSource) => dataSource.id === ccPair.id)
+    ) {
+      setTempCurrentDataSources((prev) =>
+        prev.filter((dataSource) => dataSource.id !== ccPair.id)
+      );
+      setTempGlobalDataSources((prev) => [...prev, ccPair]);
+    } else {
+      setTempCurrentDataSources((prev) => [...prev, ccPair]);
+      setTempGlobalDataSources((prev) =>
+        prev.filter((dataSource) => dataSource.id !== ccPair.id)
+      );
+    }
   };
 
   const handleSaveChanges = async () => {
@@ -162,8 +148,12 @@ export const TeamspaceDataSource = ({
             assistant_ids: teamspace.assistants.map(
               (assistant) => assistant.id
             ),
-            document_set_ids: teamspace.cc_pairs.map((ccPair) => ccPair.id),
-            cc_pair_ids: selectedDataSources.map((ccPair) => ccPair.cc_pair_id),
+            document_set_ids: teamspace.document_sets.map(
+              (docSet) => docSet.id
+            ),
+            cc_pair_ids: tempCurrentDataSources.map(
+              (dataSource) => dataSource.id
+            ),
           }),
         }
       );
@@ -173,29 +163,36 @@ export const TeamspaceDataSource = ({
       if (!response.ok) {
         toast({
           title: "Update Failed",
-          description: `Unable to update document sets: ${responseJson.detail || "Unknown error."}`,
+          description: `Unable to update data source: ${responseJson.detail || "Unknown error."}`,
           variant: "destructive",
         });
         return;
-      } else {
-        toast({
-          title: "Data Source Updated",
-          description:
-            "Data Source have been successfully updated in the teamspace.",
-          variant: "success",
-        });
-        refreshTeamspaces();
-        setFilteredGlobalDataSources(
-          filterDataSources(ccPairs, searchTermGlobal)
-        );
       }
+
+      setCurrentDataSources(tempCurrentDataSources);
+      setGlobalDataSources(tempGlobalDataSources);
+      toast({
+        title: "Data Source Updated",
+        description:
+          "Data Source have been successfully updated in the teamspace.",
+        variant: "success",
+      });
+      refreshTeamspaces();
     } catch (error) {
       toast({
         title: "Update Failed",
-        description: "An error occurred while updating document sets.",
+        description: "An error occurred while updating data source.",
         variant: "destructive",
       });
     }
+
+    handleCloseModal();
+  };
+
+  const handleCloseModal = () => {
+    setIsDataSourceModalOpen(false);
+    setTempCurrentDataSources(currentDataSources);
+    setTempGlobalDataSources(globalDataSources);
   };
 
   return (
@@ -219,7 +216,7 @@ export const TeamspaceDataSource = ({
               {teamspace.cc_pairs.slice(0, 8).map((teamspaceDataSource) => (
                 <div
                   key={teamspaceDataSource.id}
-                  className={`bg-primary w-10 h-10 rounded-full flex items-center justify-center font-semibold text-inverted text-lg uppercase`}
+                  className="bg-primary w-10 h-10 rounded-full flex items-center justify-center font-semibold text-inverted text-lg uppercase"
                 >
                   {teamspaceDataSource.name!.charAt(0)}
                 </div>
@@ -231,44 +228,43 @@ export const TeamspaceDataSource = ({
               )}
             </div>
           ) : (
-            <p>There are no document sets.</p>
+            <p>There are no data sourceg.</p>
           )}
         </div>
       }
       title="Data Source"
       open={isDataSourceModalOpen}
-      onClose={() => {
-        setIsDataSourceModalOpen(false);
-        setSelectedDataSources([]);
-      }}
+      onClose={handleCloseModal}
     >
       <div className="space-y-12">
-        {teamspace.cc_pairs.length > 0 ? (
-          <DataSourceContent
-            searchTerm={searchTermCurrent}
-            setSearchTerm={setSearchTermCurrent}
-            filteredCurrentDataSources={filteredCurrentDataSources}
-          />
-        ) : (
-          <p>There are no current document sets.</p>
-        )}
+        <DataSourceContent
+          searchTerm={searchTermCurrent}
+          setSearchTerm={setSearchTermCurrent}
+          filteredDataSources={tempCurrentDataSources.filter((dataSource) =>
+            dataSource.name
+              ?.toLowerCase()
+              .includes(searchTermCurrent.toLowerCase())
+          )}
+          isGlobal={false}
+          onSelect={handleSelectDataSource}
+          hasDataSource={tempCurrentDataSources.length > 0}
+        />
         <DataSourceContent
           searchTerm={searchTermGlobal}
           setSearchTerm={setSearchTermGlobal}
-          filteredGlobalDataSources={filteredGlobalDataSources}
-          isGlobal
+          filteredDataSources={tempGlobalDataSources.filter((dataSource) =>
+            dataSource.name
+              ?.toLowerCase()
+              .includes(searchTermGlobal.toLowerCase())
+          )}
+          isGlobal={true}
           onSelect={handleSelectDataSource}
-          selectedDataSources={selectedDataSources}
+          hasDataSource={tempGlobalDataSources.length > 0}
         />
       </div>
 
-      <div className="pt-10 ml-auto">
-        <Button
-          onClick={handleSaveChanges}
-          disabled={!teamspace.is_up_to_date || teamspace.is_up_for_deletion}
-        >
-          Save changes
-        </Button>
+      <div className="flex justify-end mt-10">
+        <Button onClick={handleSaveChanges}>Save changes</Button>
       </div>
     </CustomModal>
   );
diff --git a/web/src/app/ee/admin/teams/TeamspaceDocumentSet.tsx b/web/src/app/ee/admin/teams/TeamspaceDocumentSet.tsx
index 609ccf93857..5f9a6af3181 100644
--- a/web/src/app/ee/admin/teams/TeamspaceDocumentSet.tsx
+++ b/web/src/app/ee/admin/teams/TeamspaceDocumentSet.tsx
@@ -207,21 +207,26 @@ export const TeamspaceDocumentSet = ({
               <Pencil size={16} />
             </Button>
           </div>
-          <div className="pt-8 flex flex-wrap -space-x-3 pointer-events-none">
-            {currentDocumentSets.slice(0, 8).map((documentSet) => (
-              <div
-                key={documentSet.id}
-                className="bg-primary w-10 h-10 rounded-full flex items-center justify-center font-semibold text-inverted text-lg uppercase"
-              >
-                {documentSet.name!.charAt(0)}
-              </div>
-            ))}
-            {currentDocumentSets.length > 8 && (
-              <div className="bg-background w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold">
-                +{currentDocumentSets.length - 8}
-              </div>
-            )}
-          </div>
+
+          {teamspace.document_sets.length > 0 ? (
+            <div className="pt-8 flex flex-wrap -space-x-3 pointer-events-none">
+              {currentDocumentSets.slice(0, 8).map((documentSet) => (
+                <div
+                  key={documentSet.id}
+                  className="bg-primary w-10 h-10 rounded-full flex items-center justify-center font-semibold text-inverted text-lg uppercase"
+                >
+                  {documentSet.name!.charAt(0)}
+                </div>
+              ))}
+              {currentDocumentSets.length > 8 && (
+                <div className="bg-background w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold">
+                  +{currentDocumentSets.length - 8}
+                </div>
+              )}
+            </div>
+          ) : (
+            <p>There are no document set.</p>
+          )}
         </div>
       }
       title="Document Sets"
diff --git a/web/src/app/ee/admin/teams/TeamspaceSidebar.tsx b/web/src/app/ee/admin/teams/TeamspaceSidebar.tsx
index 086bf51054b..571bc09839c 100644
--- a/web/src/app/ee/admin/teams/TeamspaceSidebar.tsx
+++ b/web/src/app/ee/admin/teams/TeamspaceSidebar.tsx
@@ -12,7 +12,7 @@ interface TeamspaceSidebarProps {
   onClose: () => void;
   isExpanded: boolean;
   assistants: Assistant[];
-  ccPairs: ConnectorIndexingStatus<any, any>[] | undefined;
+  ccPairs: ConnectorIndexingStatus<any, any>[];
   documentSets: DocumentSet[];
   refreshTeamspaces: () => void;
 }
diff --git a/web/src/app/ee/admin/teams/TeamspaceSidebarContent.tsx b/web/src/app/ee/admin/teams/TeamspaceSidebarContent.tsx
index 03922441c28..b00690541fa 100644
--- a/web/src/app/ee/admin/teams/TeamspaceSidebarContent.tsx
+++ b/web/src/app/ee/admin/teams/TeamspaceSidebarContent.tsx
@@ -12,7 +12,7 @@ interface TeamspaceSidebarContentProps {
   teamspace: Teamspace & { gradient: string };
   selectedTeamspaceId?: number;
   assistants: Assistant[];
-  ccPairs: ConnectorIndexingStatus<any, any>[] | undefined;
+  ccPairs: ConnectorIndexingStatus<any, any>[];
   documentSets: DocumentSet[];
   refreshTeamspaces: () => void;
 }
diff --git a/web/src/app/ee/admin/teams/TeamspacesCard.tsx b/web/src/app/ee/admin/teams/TeamspacesCard.tsx
index 0565f6543ef..1506f214e12 100644
--- a/web/src/app/ee/admin/teams/TeamspacesCard.tsx
+++ b/web/src/app/ee/admin/teams/TeamspacesCard.tsx
@@ -208,10 +208,7 @@ export const TeamspacesCard = ({
             <div className="flex items-center gap-2">
               <Shield size={16} className="shrink-0" />
               <span className="whitespace-nowrap">
-                {" "}
-                {tokenRate
-                  ? `${tokenRate.token_budget} Token Rate`
-                  : "No Token Rate"}
+                {teamspace.cc_pairs.length} Data Source
               </span>
             </div>
           </div>
diff --git a/web/src/components/Loading.tsx b/web/src/components/Loading.tsx
index 7cdcb5a9887..e3b449fe270 100644
--- a/web/src/components/Loading.tsx
+++ b/web/src/components/Loading.tsx
@@ -44,7 +44,7 @@ export const LoadingAnimation: React.FC<LoadingAnimationProps> = ({
 
 export const ThreeDotsLoader = () => {
   return (
-    <div className="flex my-auto">
+    <div className="flex my-auto w-full">
       <div className="mx-auto">
         <ThreeDots
           height="30"