refactor(ui): rewrite NamespaceSelector to Combobox pattern (#416)

Co-authored-by: Danila Epishev <depishev@alfabank.ru>

Author: DuraCHYo

.gitignore

@@ -5,6 +5,9 @@
 *.so
 *.dylib
 
+#SQLite dev.db
+dev.db
+
 # Test binary, built with `go test -c`
 *.test
 

ui/src/components/selector/namespace-selector.tsx

@@ -1,13 +1,23 @@
+import { useMemo, useState } from 'react'
+import { Check, ChevronsUpDown, Loader2 } from 'lucide-react'
 import { Namespace } from 'kubernetes-types/core/v1'
 
 import { useResources } from '@/lib/api'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
 
 export function NamespaceSelector({
   selectedNamespace,
@@ -18,36 +28,87 @@ export function NamespaceSelector({
   handleNamespaceChange: (namespace: string) => void
   showAll?: boolean
 }) {
+  const [open, setOpen] = useState(false)
   const { data, isLoading } = useResources('namespaces')
 
-  const sortedNamespaces = data?.sort((a, b) => {
-    const nameA = a.metadata?.name?.toLowerCase() || ''
-    const nameB = b.metadata?.name?.toLowerCase() || ''
-    return nameA.localeCompare(nameB)
-  }) || [{ metadata: { name: 'default' } }]
+  const sortedNamespaces = useMemo(() => {
+    if (!data) return []
+    return [...data].sort((a, b) => {
+      const nameA = a.metadata?.name?.toLowerCase() || ''
+      const nameB = b.metadata?.name?.toLowerCase() || ''
+      return nameA.localeCompare(nameB)
+    })
+  }, [data])
 
   return (
-    <Select value={selectedNamespace} onValueChange={handleNamespaceChange}>
-      <SelectTrigger className="max-w-48">
-        <SelectValue placeholder="Select a namespace" />
-      </SelectTrigger>
-      <SelectContent>
-        {isLoading && (
-          <SelectItem disabled value="_loading">
-            Loading namespaces...
-          </SelectItem>
-        )}
-        {showAll && (
-          <SelectItem key="all" value="_all">
-            All Namespaces
-          </SelectItem>
-        )}
-        {sortedNamespaces?.map((ns: Namespace) => (
-          <SelectItem key={ns.metadata!.name} value={ns.metadata!.name!}>
-            {ns.metadata!.name}
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-[200px] justify-between shadow-sm"
+        >
+          <span className="truncate">
+            {selectedNamespace === '_all'
+              ? 'All Namespaces'
+              : (selectedNamespace || "Select namespace...")}
+          </span>
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+
+      <PopoverContent className="w-[200px] p-0" align="start">
+        <Command>
+          <CommandInput placeholder="Search..." className="h-9" />
+          <CommandList className="max-h-[300px] overflow-x-hidden overflow-y-auto [ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+            {isLoading ? (
+              <div className="flex items-center justify-center p-6 text-sm">
+                <Loader2 className="h-4 w-4 animate-spin mr-2" />
+                Loading...
+              </div>
+            ) : (
+              <>
+                <CommandEmpty>No results.</CommandEmpty>
+                <CommandGroup>
+                  {showAll && (
+                    <CommandItem
+                      value="_all"
+                      onSelect={() => {
+                        handleNamespaceChange('_all')
+                        setOpen(false)
+                      }}
+                    >
+                      <Check className={cn("mr-2 h-4 w-4 shrink-0", selectedNamespace === '_all' ? "opacity-100" : "opacity-0")} />
+                      <span className="truncate">All Namespaces</span>
+                    </CommandItem>
+                  )}
+
+                  {sortedNamespaces.map((ns: Namespace) => {
+                    const name = ns.metadata?.name || ''
+                    return (
+                      <CommandItem
+                        key={name}
+                        value={name}
+                        onSelect={(val) => {
+                          handleNamespaceChange(val)
+                          setOpen(false)
+                        }}
+                        className="flex items-center"
+                      >
+                        <Check className={cn("mr-2 h-4 w-4 shrink-0", selectedNamespace === name ? "opacity-100" : "opacity-0")} />
+                        <span className="truncate flex-1 min-w-0" title={name}>
+                          {name}
+                        </span>
+                      </CommandItem>
+                    )
+                  })}
+                </CommandGroup>
+              </>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
   )
-}
+}