From 0503ded1579b7ac52a4c32728e2e6a221f0d985e Mon Sep 17 00:00:00 2001
From: Jules Belveze <32683010+JulesBelveze@users.noreply.github.com>
Date: Sat, 23 Nov 2024 14:41:48 +0100
Subject: [PATCH] [front] - refactor: replace `Searchbar` with `SearchInput`
 (#8863)

* [front] - refactor: replace Searchbar with SearchInput across components

 - Updated all instances of Searchbar component to the newer SearchInput for consistency and better UX
 - Adjusted SearchInput usage to remove size prop where applicable, as it's likely handled by the component's internal styling now

[front] - refactor: update @dust-tt/sparkle dependency version

 - Bumped the @dust-tt/sparkle version to "^0.2.324-rc-1" to align with the latest component API changes

[front] - refactor: remove size prop from SearchInput in AssistantBrowser

 - Removed the now-unnecessary size prop from the SearchInput component in AssistantBrowser after library update

* [front] - refactor: remove size prop from AssistantPicker search input

 - The search bar in the AssistantPicker component no longer has a fixed small size to improve UI flexibility

* [front] - fix: upgrade @dust-tt/sparkle to stable version

 - Moved from release candidate version 0.2.324-rc-1 to stable version 0.2.324 in package dependencies
 - Updated package-lock.json to reflect the new version's resolved URL and integrity sha
---
 front/components/ContentNodeTree.tsx                      | 4 ++--
 front/components/assistant/AssistantBrowser.tsx           | 5 ++---
 front/components/assistant/AssistantPicker.tsx            | 1 -
 front/components/data_source/DataSourcePicker.tsx         | 4 ++--
 front/components/poke/templates/TemplatesDataTable.tsx    | 4 ++--
 front/components/spaces/SearchMembersPopover.tsx          | 4 ++--
 front/components/spaces/SpaceAppsList.tsx                 | 4 ++--
 front/components/spaces/SpaceCategoriesList.tsx           | 4 ++--
 .../components/spaces/SpaceDataSourceViewContentList.tsx  | 4 ++--
 front/components/spaces/SpaceResourcesList.tsx            | 4 ++--
 front/components/tables/TablePicker.tsx                   | 4 ++--
 front/package-lock.json                                   | 8 ++++----
 front/package.json                                        | 2 +-
 front/pages/w/[wId]/builder/assistants/create.tsx         | 5 ++---
 front/pages/w/[wId]/builder/assistants/index.tsx          | 4 ++--
 front/pages/w/[wId]/members/index.tsx                     | 4 ++--
 16 files changed, 31 insertions(+), 34 deletions(-)

diff --git a/front/components/ContentNodeTree.tsx b/front/components/ContentNodeTree.tsx
index b8211229e2c5..d82a6ffaec6f 100644
--- a/front/components/ContentNodeTree.tsx
+++ b/front/components/ContentNodeTree.tsx
@@ -4,7 +4,7 @@ import {
   ExternalLinkIcon,
   IconButton,
   ListCheckIcon,
-  Searchbar,
+  SearchInput,
   Tooltip,
   Tree,
 } from "@dust-tt/sparkle";
@@ -282,7 +282,7 @@ function ContentNodeTreeChildren({
         <>
           <div className="flex w-full flex-row items-center">
             <div className="flex-grow p-1">
-              <Searchbar
+              <SearchInput
                 name="search"
                 placeholder="Search..."
                 value={search}
diff --git a/front/components/assistant/AssistantBrowser.tsx b/front/components/assistant/AssistantBrowser.tsx
index 8ee3a532e0e3..d49e918422b6 100644
--- a/front/components/assistant/AssistantBrowser.tsx
+++ b/front/components/assistant/AssistantBrowser.tsx
@@ -10,7 +10,7 @@ import {
   RocketIcon,
   ScrollArea,
   ScrollBar,
-  Searchbar,
+  SearchInput,
   StarIcon,
   Tabs,
   TabsList,
@@ -139,9 +139,8 @@ export function AssistantBrowser({
         id="search-container"
         className="flex w-full flex-row items-center justify-center gap-2 px-4 align-middle"
       >
-        <Searchbar
+        <SearchInput
           name="search"
-          size="sm"
           placeholder="Search (Name)"
           value={assistantSearch}
           onChange={setAssistantSearch}
diff --git a/front/components/assistant/AssistantPicker.tsx b/front/components/assistant/AssistantPicker.tsx
index 23a23d66407f..9f20314e7ea9 100644
--- a/front/components/assistant/AssistantPicker.tsx
+++ b/front/components/assistant/AssistantPicker.tsx
@@ -70,7 +70,6 @@ export function AssistantPicker({
           ref={searchbarRef}
           placeholder="Search"
           name="input"
-          size="xs"
           value={searchText}
           onChange={setSearchText}
           onKeyDown={(e) => {
diff --git a/front/components/data_source/DataSourcePicker.tsx b/front/components/data_source/DataSourcePicker.tsx
index 906c71baf41c..5b3f7fc212ed 100644
--- a/front/components/data_source/DataSourcePicker.tsx
+++ b/front/components/data_source/DataSourcePicker.tsx
@@ -4,7 +4,7 @@ import {
   PopoverRoot,
   PopoverTrigger,
   ScrollArea,
-  Searchbar,
+  SearchInput,
 } from "@dust-tt/sparkle";
 import type {
   DataSourceViewType,
@@ -151,7 +151,7 @@ export default function DataSourcePicker({
 
             {(spaceDataSourceViews || []).length > 0 && (
               <PopoverContent className="mr-2 p-4">
-                <Searchbar
+                <SearchInput
                   name="search"
                   placeholder="Search"
                   value={searchFilter}
diff --git a/front/components/poke/templates/TemplatesDataTable.tsx b/front/components/poke/templates/TemplatesDataTable.tsx
index 913a33560656..0cb8bc5b68f2 100644
--- a/front/components/poke/templates/TemplatesDataTable.tsx
+++ b/front/components/poke/templates/TemplatesDataTable.tsx
@@ -1,4 +1,4 @@
-import { Chip, DataTable, Searchbar, Spinner } from "@dust-tt/sparkle";
+import { Chip, DataTable, SearchInput, Spinner } from "@dust-tt/sparkle";
 import type { TemplateTagCodeType, TemplateVisibility } from "@dust-tt/types";
 import { TEMPLATES_TAGS_CONFIG } from "@dust-tt/types";
 import type { CellContext } from "@tanstack/react-table";
@@ -105,7 +105,7 @@ export function TemplatesDataTable() {
           <Link href="/poke/templates/new">Create template</Link>
         </PokeButton>
       </div>
-      <Searchbar
+      <SearchInput
         name="search"
         placeholder="Search (Name)"
         value={templateSearch}
diff --git a/front/components/spaces/SearchMembersPopover.tsx b/front/components/spaces/SearchMembersPopover.tsx
index 803e8e5fceb0..dfb42c9c1d72 100644
--- a/front/components/spaces/SearchMembersPopover.tsx
+++ b/front/components/spaces/SearchMembersPopover.tsx
@@ -5,7 +5,7 @@ import {
   PopoverRoot,
   PopoverTrigger,
   ScrollArea,
-  Searchbar,
+  SearchInput,
   Separator,
   UserIcon,
 } from "@dust-tt/sparkle";
@@ -89,7 +89,7 @@ export function SearchMembersPopover({
           <Button label="Add members" icon={UserIcon} size="sm" />
         </PopoverTrigger>
         <PopoverContent className="mr-2 p-4">
-          <Searchbar
+          <SearchInput
             name="search"
             placeholder="Search members (email)"
             value={searchTerm}
diff --git a/front/components/spaces/SpaceAppsList.tsx b/front/components/spaces/SpaceAppsList.tsx
index d27aaa590098..d1683f51b5e1 100644
--- a/front/components/spaces/SpaceAppsList.tsx
+++ b/front/components/spaces/SpaceAppsList.tsx
@@ -4,7 +4,7 @@ import {
   CommandLineIcon,
   DataTable,
   PlusIcon,
-  Searchbar,
+  SearchInput,
   Spinner,
   usePaginationFromUrl,
 } from "@dust-tt/sparkle";
@@ -106,7 +106,7 @@ export const SpaceAppsList = ({
       ) : (
         <>
           <div className="flex gap-2">
-            <Searchbar
+            <SearchInput
               name="search"
               ref={searchBarRef}
               placeholder="Search (Name)"
diff --git a/front/components/spaces/SpaceCategoriesList.tsx b/front/components/spaces/SpaceCategoriesList.tsx
index c02b3fe9ee79..c147799eb7b8 100644
--- a/front/components/spaces/SpaceCategoriesList.tsx
+++ b/front/components/spaces/SpaceCategoriesList.tsx
@@ -13,7 +13,7 @@ import {
   GlobeAltIcon,
   PlusIcon,
   RobotIcon,
-  Searchbar,
+  SearchInput,
   Spinner,
 } from "@dust-tt/sparkle";
 import type {
@@ -157,7 +157,7 @@ export const SpaceCategoriesList = ({
       >
         {rows.length > 0 && (
           <div className="flex w-full gap-2">
-            <Searchbar
+            <SearchInput
               name="search"
               placeholder="Search (Name)"
               value={dataSourceSearch}
diff --git a/front/components/spaces/SpaceDataSourceViewContentList.tsx b/front/components/spaces/SpaceDataSourceViewContentList.tsx
index 9ae5be9be379..efb4121e8966 100644
--- a/front/components/spaces/SpaceDataSourceViewContentList.tsx
+++ b/front/components/spaces/SpaceDataSourceViewContentList.tsx
@@ -6,7 +6,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-  Searchbar,
+  SearchInput,
   Spinner,
   useHashParam,
   usePaginationFromUrl,
@@ -379,7 +379,7 @@ export const SpaceDataSourceViewContentList = ({
       >
         {!isEmpty && (
           <>
-            <Searchbar
+            <SearchInput
               name="search"
               placeholder="Search (Name)"
               value={dataSourceSearch}
diff --git a/front/components/spaces/SpaceResourcesList.tsx b/front/components/spaces/SpaceResourcesList.tsx
index f0c617bab4ba..cadf8d00918d 100644
--- a/front/components/spaces/SpaceResourcesList.tsx
+++ b/front/components/spaces/SpaceResourcesList.tsx
@@ -8,7 +8,7 @@ import {
   FolderIcon,
   PencilSquareIcon,
   RobotIcon,
-  Searchbar,
+  SearchInput,
   Spinner,
   TrashIcon,
   usePaginationFromUrl,
@@ -409,7 +409,7 @@ export const SpaceResourcesList = ({
         )}
       >
         {rows.length > 0 && (
-          <Searchbar
+          <SearchInput
             name="search"
             ref={searchBarRef}
             placeholder="Search (Name)"
diff --git a/front/components/tables/TablePicker.tsx b/front/components/tables/TablePicker.tsx
index 73305650ab30..2162ad3fef5b 100644
--- a/front/components/tables/TablePicker.tsx
+++ b/front/components/tables/TablePicker.tsx
@@ -3,7 +3,7 @@ import {
   PopoverRoot,
   PopoverTrigger,
   ScrollArea,
-  Searchbar,
+  SearchInput,
   Separator,
 } from "@dust-tt/sparkle";
 import type {
@@ -115,7 +115,7 @@ export default function TablePicker({
 
             {(tables || []).length > 0 && (
               <PopoverContent className="mr-2 p-4">
-                <Searchbar
+                <SearchInput
                   name="search"
                   placeholder="Search"
                   value={searchFilter}
diff --git a/front/package-lock.json b/front/package-lock.json
index 36965c872628..ea41ddfc1e75 100644
--- a/front/package-lock.json
+++ b/front/package-lock.json
@@ -7,7 +7,7 @@
       "dependencies": {
         "@auth0/nextjs-auth0": "^3.5.0",
         "@dust-tt/client": "file:../sdks/js",
-        "@dust-tt/sparkle": "^0.2.322",
+        "@dust-tt/sparkle": "^0.2.324",
         "@dust-tt/types": "file:../types",
         "@headlessui/react": "^1.7.7",
         "@heroicons/react": "^2.0.11",
@@ -11486,9 +11486,9 @@
       "link": true
     },
     "node_modules/@dust-tt/sparkle": {
-      "version": "0.2.322",
-      "resolved": "https://registry.npmjs.org/@dust-tt/sparkle/-/sparkle-0.2.322.tgz",
-      "integrity": "sha512-byLE0sA3rz2xAPvZBW9l7VfcVdopHtm7lSMhFmU8OpKw7W1pnp0DyBdeziM3jZ3h8Cp40NPwlwpe8UOgj+dKxA==",
+      "version": "0.2.324",
+      "resolved": "https://registry.npmjs.org/@dust-tt/sparkle/-/sparkle-0.2.324.tgz",
+      "integrity": "sha512-lzUbYBgGDfcwcWUKLFKdKCoRvNP1xRpA70pzct4pOK7LSWKTbO8X6YbmPeTVXqdOe/pcXyu7dxqCCZ/GuK6yqw==",
       "dependencies": {
         "@emoji-mart/data": "^1.1.2",
         "@emoji-mart/react": "^1.1.1",
diff --git a/front/package.json b/front/package.json
index 52e8214bdd6f..39c808eedec8 100644
--- a/front/package.json
+++ b/front/package.json
@@ -20,7 +20,7 @@
   "dependencies": {
     "@auth0/nextjs-auth0": "^3.5.0",
     "@dust-tt/client": "file:../sdks/js",
-    "@dust-tt/sparkle": "^0.2.322",
+    "@dust-tt/sparkle": "^0.2.324",
     "@dust-tt/types": "file:../types",
     "@headlessui/react": "^1.7.7",
     "@heroicons/react": "^2.0.11",
diff --git a/front/pages/w/[wId]/builder/assistants/create.tsx b/front/pages/w/[wId]/builder/assistants/create.tsx
index 586a1c4a8824..123678a007ff 100644
--- a/front/pages/w/[wId]/builder/assistants/create.tsx
+++ b/front/pages/w/[wId]/builder/assistants/create.tsx
@@ -5,7 +5,7 @@ import {
   MagicIcon,
   Page,
   PencilSquareIcon,
-  Searchbar,
+  SearchInput,
 } from "@dust-tt/sparkle";
 import type {
   SubscriptionType,
@@ -219,12 +219,11 @@ export default function CreateAssistant({
 
             <Page.Header title="Start from a template" icon={MagicIcon} />
             <div className="flex flex-col gap-6">
-              <Searchbar
+              <SearchInput
                 placeholder="Search templates"
                 name="input"
                 value={templateSearchTerm}
                 onChange={handleSearch}
-                size="md"
               />
               <div className="flex flex-row flex-wrap gap-2">
                 {filteredTemplates.tags
diff --git a/front/pages/w/[wId]/builder/assistants/index.tsx b/front/pages/w/[wId]/builder/assistants/index.tsx
index 1a1f9810e3ce..1e6f1a1355ba 100644
--- a/front/pages/w/[wId]/builder/assistants/index.tsx
+++ b/front/pages/w/[wId]/builder/assistants/index.tsx
@@ -7,7 +7,7 @@ import {
   PlusIcon,
   Popup,
   RobotIcon,
-  Searchbar,
+  SearchInput,
   SliderToggle,
   Tabs,
   TabsList,
@@ -240,7 +240,7 @@ export default function WorkspaceAssistants({
         <Page.Header title="Manage Assistants" icon={RobotIcon} />
         <Page.Vertical gap="md" align="stretch">
           <div className="flex flex-row gap-2">
-            <Searchbar
+            <SearchInput
               ref={searchBarRef}
               name="search"
               placeholder="Search (Name)"
diff --git a/front/pages/w/[wId]/members/index.tsx b/front/pages/w/[wId]/members/index.tsx
index 068c4cf52a96..fc098b081889 100644
--- a/front/pages/w/[wId]/members/index.tsx
+++ b/front/pages/w/[wId]/members/index.tsx
@@ -4,7 +4,7 @@ import {
   Page,
   PlusIcon,
   Popup,
-  Searchbar,
+  SearchInput,
 } from "@dust-tt/sparkle";
 import { useSendNotification } from "@dust-tt/sparkle";
 import type {
@@ -216,7 +216,7 @@ export default function WorkspaceAdmin({
           workspaceVerifiedDomain={workspaceVerifiedDomain}
         />
         <div className="flex flex-row gap-2">
-          <Searchbar
+          <SearchInput
             placeholder="Search members (email)"
             value={searchTerm}
             name="search"