feat: change search bar and badge selection to combobox

enMedD · Oct 7, 2024 · 98bc644 · 98bc644
1 parent 46247c6
commit 98bc644
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 104 deletions.
diff --git a/web/src/app/admin/assistants/AssistantEditor.tsx b/web/src/app/admin/assistants/AssistantEditor.tsx
@@ -47,6 +47,7 @@ import { useToast } from "@/hooks/use-toast";
 import { Label } from "@/components/ui/label";
 import { CustomTooltip } from "@/components/CustomTooltip";
 import { Divider } from "@/components/Divider";
+import { Combobox } from "@/components/Combobox";
 
 function findSearchTool(tools: ToolSnapshot[]) {
   return tools.find((tool) => tool.in_code_tool_id === "SearchTool");
@@ -871,45 +872,26 @@ export function AssistantEditor({
                             teamspaces.length > 0 &&
                             !values.is_public && (
                               <div>
-                                <p className="text-subtle text-sm">
+                                <h3 className="mb-1 text-sm">
                                   Select which Teamspaces should have access to
                                   this Assistant.
-                                </p>
-                                <div className="flex flex-wrap gap-2 mt-2">
-                                  {teamspaces.map((teamspace) => {
-                                    const isSelected = values.groups.includes(
-                                      teamspace.id
-                                    );
-                                    return (
-                                      <Bubble
-                                        key={teamspace.id}
-                                        isSelected={isSelected}
-                                        onClick={() => {
-                                          if (isSelected) {
-                                            setFieldValue(
-                                              "groups",
-                                              values.groups.filter(
-                                                (id) => id !== teamspace.id
-                                              )
-                                            );
-                                          } else {
-                                            setFieldValue("groups", [
-                                              ...values.groups,
-                                              teamspace.id,
-                                            ]);
-                                          }
-                                        }}
-                                      >
-                                        <div className="flex">
-                                          <GroupsIcon />
-                                          <div className="ml-1">
-                                            {teamspace.name}
-                                          </div>
-                                        </div>
-                                      </Bubble>
-                                    );
-                                  })}
-                                </div>
+                                </h3>
+
+                                <Combobox
+                                  items={teamspaces.map((teamspace) => ({
+                                    value: teamspace.id.toString(),
+                                    label: teamspace.name,
+                                  }))}
+                                  onSelect={(selectedTeamspaceIds) => {
+                                    const selectedIds =
+                                      selectedTeamspaceIds.map((val) =>
+                                        parseInt(val, 10)
+                                      );
+                                    setFieldValue("groups", selectedIds);
+                                  }}
+                                  placeholder="Select teamspaces"
+                                  label="Teamspaces"
+                                />
                               </div>
                             )}
                         </>

diff --git a/web/src/app/admin/documents/sets/DocumentSetCreationForm.tsx b/web/src/app/admin/documents/sets/DocumentSetCreationForm.tsx
@@ -17,6 +17,7 @@ import { useState } from "react";
 import { Input } from "@/components/ui/input";
 import { Users } from "lucide-react";
 import { Divider } from "@/components/Divider";
+import { Combobox } from "@/components/Combobox";
 
 interface SetCreationPopupProps {
   ccPairs: ConnectorIndexingStatus<any, any>[];
@@ -42,6 +43,11 @@ export const DocumentSetCreationForm = ({
     ccPair.name!.toLowerCase().includes(searchTerm.toLowerCase())
   );
 
+  const connectorItems = filteredCcPairs.map((ccPair) => ({
+    value: ccPair.cc_pair_id.toString(),
+    label: ccPair.name || `Connector ${ccPair.cc_pair_id}`,
+  }));
+
   return (
     <div>
       <Formik
@@ -111,7 +117,7 @@ export const DocumentSetCreationForm = ({
           }
         }}
       >
-        {({ isSubmitting, values }) => (
+        {({ isSubmitting, values, setFieldValue }) => (
           <Form>
             <TextFormField
               name="name"
@@ -131,53 +137,16 @@ export const DocumentSetCreationForm = ({
 
             <div>
               <h3 className="mb-1 text-sm">Pick your connectors:</h3>
-              <p className="mb-3 text-xs text-subtle">
-                All documents indexed by the selected connectors will be a part
-                of this document set.
-              </p>
-              <Input
-                type="text"
-                placeholder="Search connectors..."
-                className="mb-3"
-                value={searchTerm}
-                onChange={(e) => setSearchTerm(e.target.value)}
-              />
-
-              <FieldArray
-                name="cc_pair_ids"
-                render={(arrayHelpers: ArrayHelpers) => (
-                  <div className="mb-3 flex gap-2 flex-wrap">
-                    {filteredCcPairs.map((ccPair) => {
-                      const ind = values.cc_pair_ids.indexOf(ccPair.cc_pair_id);
-                      const isSelected = ind !== -1;
-
-                      return (
-                        <Badge
-                          key={`${ccPair.connector.id}-${ccPair.credential.id}`}
-                          variant={isSelected ? "default" : "outline"}
-                          className="cursor-pointer hover:bg-opacity-75"
-                          onClick={() => {
-                            if (isSelected) {
-                              arrayHelpers.remove(ind);
-                            } else {
-                              arrayHelpers.push(ccPair.cc_pair_id);
-                            }
-                          }}
-                        >
-                          <div className="my-auto truncate">
-                            <ConnectorTitle
-                              connector={ccPair.connector}
-                              ccPairId={ccPair.cc_pair_id}
-                              ccPairName={ccPair.name}
-                              isLink={false}
-                              showMetadata={false}
-                            />
-                          </div>
-                        </Badge>
-                      );
-                    })}
-                  </div>
-                )}
+              <Combobox
+                items={connectorItems}
+                onSelect={(selectedValues) => {
+                  const selectedIds = selectedValues.map((val) =>
+                    parseInt(val, 10)
+                  );
+                  setFieldValue("cc_pair_ids", selectedIds);
+                }}
+                placeholder="Search connectors"
+                label="Select connectors"
               />
             </div>
 

diff --git a/web/src/app/admin/documents/sets/page.tsx b/web/src/app/admin/documents/sets/page.tsx
@@ -61,9 +61,9 @@ const EditRow = ({ documentSet }: { documentSet: DocumentSet }) => {
         }
         asChild
       >
-        <div className="flex gap-1">
-          <InfoIcon /> Cannot update while syncing! Wait for the sync to finish,
-          then try again.
+        <div className="flex gap-1.5">
+          <InfoIcon className="mb-auto shrink-0 mt-[3px]" /> Cannot update while
+          syncing! Wait for the sync to finish, then try again.
         </div>
       </CustomTooltip>
     </div>

diff --git a/web/src/app/ee/admin/teams/TeamspaceSidebarContent.tsx b/web/src/app/ee/admin/teams/TeamspaceSidebarContent.tsx
@@ -51,7 +51,7 @@ export const TeamspaceSidebarContent = ({
               ? `${tokenRate.token_budget} Token Rate`
               : "No Token Rate"}
           </span>
-          <p className="text-center text-subtle pt-4 text-sm">
+          <p className="text-center text-subtle pt-4 text-sm line-clamp">
             Lorem ipsum dolor, sit amet consectetur adipisicing elit.
             Perferendis omnis nesciunt est saepe sequi nam cum ratione
             aspernatur reprehenderit, ducimus illo eveniet et quidem itaque

diff --git a/web/src/app/globals.css b/web/src/app/globals.css
@@ -119,5 +119,5 @@ h3 {
 }
 
 .container {
-  @apply mx-auto max-w-[1400px] px-6 lg:px-14 xl:px-10 2xl:px-24 py-24 md:py-32 lg:pt-16;
+  @apply mx-auto max-w-[1400px] px-6 lg:px-14 xl:px-10 2xl:px-24 py-24 md:py-32 lg:pt-16 bg-background;
 }
diff --git a/web/src/components/Combobox.tsx b/web/src/components/Combobox.tsx
@@ -71,7 +71,7 @@ export function Combobox({
             variant="outline"
             role="combobox"
             aria-expanded={open}
-            className="w-full justify-between"
+            className="w-full justify-between text-subtle border border-input"
           >
             {selectedItems.length > 0
               ? `${selectedItems.length} selected`

diff --git a/web/src/components/ui/badge.tsx b/web/src/components/ui/badge.tsx
@@ -9,7 +9,7 @@ const badgeVariants = cva(
     variants: {
       variant: {
         default: "border-transparent bg-primary text-inverted",
-        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        secondary: "border-transparent bg-secondary text-default",
         warning: "border-transparent bg-warning",
         destructive: "border-transparent bg-destructive text-dark-900",
         outline: "text-foreground",

diff --git a/web/tsconfig.json b/web/tsconfig.json
@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -16,17 +12,15 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
         "name": "next"
       }
     ],
     "paths": {
-      "@/*": [
-        "./src/*"
-      ]
+      "@/*": ["./src/*"]
     }
   },
   "include": [
@@ -36,7 +30,5 @@
     ".next/types/**/*.ts",
     "tailwind-themes/tailwind.config.ts"
   ],
-  "exclude": [
-    "node_modules"
-  ]
+  "exclude": ["node_modules"]
 }