[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
dust-tt · Nov 23, 2024 · 0503ded · 0503ded
1 parent 2cd9a60
commit 0503ded
Show file tree

Hide file tree

Showing 16 changed files with 31 additions and 34 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -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"