feat: change the +Key button with +Index when it's search mode

Author: ytkimirti

src/components/databrowser/components/header/index.tsx

@@ -1,11 +1,19 @@
 import { useState } from "react"
 import { useTab } from "@/tab-provider"
-import { IconChevronDown, IconCircleCheck, IconCirclePlus, IconSearch } from "@tabler/icons-react"
+import {
+  IconChevronDown,
+  IconCircleCheck,
+  IconCirclePlus,
+  IconPlus,
+  IconSearch,
+} from "@tabler/icons-react"
 
 import { queryClient } from "@/lib/clients"
 import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
 import { Segmented } from "@/components/ui/segmented"
+import { SimpleTooltip } from "@/components/ui/tooltip"
 
 import type { TabType } from "../.."
 import { ReloadButton } from "../../../common/reload-button"
@@ -61,7 +69,7 @@ export const Header = ({ tabType }: { tabType: TabType }) => {
           <IndexSelector />
         ) : (
           <>
-            <DataTypeSelector hideSearchTab={hideSearchTab} />
+            <DataTypeSelector />
             <SearchInput />
           </>
         )}
@@ -70,7 +78,7 @@ export const Header = ({ tabType }: { tabType: TabType }) => {
       {/* Actions */}
       <div className="flex items-center gap-1.5">
         <RefreshButton />
-        <AddKeyModal />
+        {isValuesSearchSelected ? <AddIndexButton /> : <AddKeyModal />}
       </div>
     </div>
   )
@@ -202,6 +210,26 @@ const CreateIndexButton = () => {
   )
 }
 
+const AddIndexButton = () => {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <SimpleTooltip content="Add index">
+        <Button
+          variant="primary"
+          onClick={() => setOpen(true)}
+          className="flex h-8 items-center gap-1 rounded-lg pl-2 pr-3 text-sm font-medium"
+        >
+          <IconPlus className="size-5" />
+          Index
+        </Button>
+      </SimpleTooltip>
+      <CreateIndexModal open={open} onOpenChange={setOpen} />
+    </>
+  )
+}
+
 const RefreshButton = () => {
   const { query } = useKeys()
 

src/components/databrowser/components/sidebar/type-selector.tsx

@@ -12,7 +12,7 @@ import {
 
 const ALL_TYPES_KEY = "all"
 
-export function DataTypeSelector({ hideSearchTab }: { hideSearchTab?: boolean }) {
+export function DataTypeSelector() {
   const { search, setSearchType } = useTab()
 
   return (
@@ -26,18 +26,17 @@ export function DataTypeSelector({ hideSearchTab }: { hideSearchTab?: boolean })
       }}
       value={search.type === undefined ? ALL_TYPES_KEY : search.type}
     >
-      <SelectTrigger className="!w-auto select-none whitespace-nowrap border-zinc-300 pr-8">
+      <SelectTrigger className="!w-auto shrink-0 select-none whitespace-nowrap border-zinc-300 pr-8">
         <SelectValue />
       </SelectTrigger>
 
       <SelectContent>
         <SelectGroup>
           {(() => {
-            let entries: Array<[string, string]> = [
+            const entries: Array<[string, string]> = [
               [ALL_TYPES_KEY, "All Types"],
               ...Object.entries(DATA_TYPE_NAMES),
             ]
-            if (hideSearchTab) entries = entries.filter(([key]) => key !== "search")
             return entries.map(([key, value]) => (
               <SelectItem value={key} key={key}>
                 {value}

src/playground/index.tsx

@@ -73,7 +73,6 @@ const App = () => {
         <div style={{ height: "640px" }}>
           {credentials ? (
             <RedisBrowser
-              hideSearchTab
               onFullScreenClick={() => {
                 // eslint-disable-next-line no-console
                 console.log("Fullscreen button clicked")