feat:(Console): add search feature (apache#187)

* Console: add search feature

* update icon

* refactored

* Address review comments

Author: vignesh-manel

console/src/components/GlobalSearch.tsx

@@ -0,0 +1,214 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { useEffect, useState } from "react"
+import { useNavigate } from "react-router-dom"
+import { Database, Table2, Eye, FolderOpen, User, Clock, Loader2 } from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+import { Dialog, DialogContent } from "@/components/ui/dialog"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@/components/ui/command"
+import { useSearchData, type SearchResult, type SearchResultType } from "@/hooks/useSearchData"
+import { useRecentlyViewed, type RecentItem } from "@/hooks/useRecentlyViewed"
+
+interface GlobalSearchProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+const TYPE_ICONS: Record<SearchResultType | "recent", React.ReactNode> = {
+  catalog: <Database className="h-4 w-4 shrink-0 text-muted-foreground" />,
+  namespace: <FolderOpen className="h-4 w-4 shrink-0 text-muted-foreground" />,
+  table: <Table2 className="h-4 w-4 shrink-0 text-muted-foreground" />,
+  view: <Eye className="h-4 w-4 shrink-0 text-muted-foreground" />,
+  principal: <User className="h-4 w-4 shrink-0 text-muted-foreground" />,
+  recent: <Clock className="h-4 w-4 shrink-0 text-muted-foreground" />,
+}
+
+const TYPE_LABELS: Record<SearchResultType, string> = {
+  catalog: "Catalog",
+  namespace: "Namespace",
+  table: "Table",
+  view: "View",
+  principal: "Principal",
+}
+
+const TYPE_ORDER: SearchResultType[] = ["catalog", "namespace", "table", "view", "principal"]
+
+/**
+ * Word-prefix match: splits both the query and the text on common delimiters.
+ * Every query word must match the start of at least one text segment.
+ * "on"          → matches "online_store"         ✓  (segment "online" starts with "on")
+ * "sto"         → matches "online_store"         ✓  (segment "store" starts with "sto")
+ * "a"           → does NOT match "online_store"  ✗  (no segment starts with "a")
+ * "on sto"      → matches "online_store"         ✓  ("on" matches "online", "sto" matches "store")
+ * "on xyz"      → does NOT match "online_store"  ✗  (no segment starts with "xyz")
+ */
+function matchesQuery(text: string, query: string): boolean {
+  const segments = text.toLowerCase().split(/[\s_\-./]+/)
+  return query
+    .toLowerCase()
+    .split(/\s+/)
+    .filter(Boolean)
+    .every((qw) => segments.some((seg) => seg.startsWith(qw)))
+}
+
+export function GlobalSearch({ open, onOpenChange }: GlobalSearchProps) {
+  const navigate = useNavigate()
+  const { items: recentItems, trackVisit, clearAll } = useRecentlyViewed()
+  const { results: allResults, isLoading } = useSearchData(open)
+  const [query, setQuery] = useState("")
+
+  useEffect(() => {
+    if (!open) setQuery("")
+  }, [open])
+
+  const filtered =
+    query.trim().length > 0
+      ? allResults.filter((r) => matchesQuery(r.label, query) || matchesQuery(r.sublabel, query))
+      : []
+
+  const grouped = filtered.reduce<Partial<Record<SearchResultType, SearchResult[]>>>((acc, r) => {
+    if (!acc[r.type]) acc[r.type] = []
+    acc[r.type]!.push(r)
+    return acc
+  }, {})
+
+  const handleSelect = (item: SearchResult | RecentItem) => {
+    trackVisit({
+      id: item.id,
+      type: item.type,
+      label: item.label,
+      sublabel: item.sublabel,
+      path: item.path,
+    })
+    navigate(item.path)
+    onOpenChange(false)
+  }
+
+  const hasResults = filtered.length > 0
+  const showRecent = query.trim().length === 0 && recentItems.length > 0
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="overflow-hidden p-0">
+        <Command
+          shouldFilter={false}
+          className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-separator]]:mx-2"
+        >
+          <CommandInput
+            placeholder="Search catalogs, namespaces, tables, views, principals…"
+            value={query}
+            onValueChange={setQuery}
+          />
+          <CommandList>
+            {!hasResults && !showRecent && (
+              <CommandEmpty>
+                {isLoading ? (
+                  <span className="flex items-center justify-center gap-2 text-muted-foreground">
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                    Loading…
+                  </span>
+                ) : query.trim().length > 0 ? (
+                  "No results found."
+                ) : (
+                  "Start typing to search…"
+                )}
+              </CommandEmpty>
+            )}
+
+            {showRecent && (
+              <CommandGroup
+                heading={
+                  <span className="flex items-center justify-between">
+                    <span>Recently Viewed</span>
+                    <button
+                      onClick={clearAll}
+                      className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+                    >
+                      Clear
+                    </button>
+                  </span>
+                }
+              >
+                {recentItems.map((item: RecentItem) => (
+                  <CommandItem
+                    key={item.id}
+                    value={`recent-${item.id}`}
+                    onSelect={() => handleSelect(item)}
+                  >
+                    {TYPE_ICONS.recent}
+                    <span className="flex-1 truncate">{item.label}</span>
+                    {item.sublabel && (
+                      <span className="truncate text-xs text-muted-foreground max-w-[180px]">
+                        {item.sublabel}
+                      </span>
+                    )}
+                    <Badge variant="secondary" className="ml-2 text-xs">
+                      {TYPE_LABELS[item.type]}
+                    </Badge>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            )}
+
+            {(() => {
+              let firstGroup = true
+              return TYPE_ORDER.map((type) => {
+                const results = grouped[type]
+                if (!results?.length) return null
+                const showSep = !firstGroup
+                firstGroup = false
+                return (
+                  <div key={type}>
+                    {showSep && <CommandSeparator />}
+                    <CommandGroup heading={`${TYPE_LABELS[type]}s`}>
+                      {results.map((result) => (
+                        <CommandItem
+                          key={result.id}
+                          value={result.id}
+                          onSelect={() => handleSelect(result)}
+                        >
+                          {TYPE_ICONS[result.type]}
+                          <span className="flex-1 truncate">{result.label}</span>
+                          {result.sublabel && (
+                            <span className="truncate text-xs text-muted-foreground max-w-[200px]">
+                              {result.sublabel}
+                            </span>
+                          )}
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </div>
+                )
+              })
+            })()}
+          </CommandList>
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}

console/src/components/layout/Header.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { LogOut, ChevronDown, Sun, Moon, Monitor } from "lucide-react"
+import { LogOut, ChevronDown, Sun, Moon, Monitor, Search } from "lucide-react"
 import { useAuth } from "@/hooks/useAuth"
 import { useCurrentUser } from "@/hooks/useCurrentUser"
 import { useTheme } from "@/hooks/useTheme"
@@ -32,7 +32,11 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { Button } from "@/components/ui/button"
 
-export function Header() {
+interface HeaderProps {
+  onSearchOpen: () => void
+}
+
+export function Header({ onSearchOpen }: HeaderProps) {
   const { logout } = useAuth()
   const { principal, principalRoles, loading } = useCurrentUser()
   const { theme, setTheme } = useTheme()
@@ -93,6 +97,21 @@ export function Header() {
         </DropdownMenuContent>
       </DropdownMenu>
 
+      {/* Search Trigger - Center */}
+      <Button
+        variant="outline"
+        onClick={onSearchOpen}
+        className="flex h-9 w-72 items-center justify-between gap-2 rounded-md border px-3 text-sm text-muted-foreground shadow-none hover:text-foreground"
+      >
+        <span className="flex items-center gap-2">
+          <Search className="h-4 w-4" />
+          Search…
+        </span>
+        <span className="pointer-events-none hidden select-none rounded border bg-muted px-1.5 py-0.5 text-xs font-mono text-muted-foreground sm:inline-flex">
+          Ctrl+K
+        </span>
+      </Button>
+
       {/* User Profile with Dropdown - Right Side */}
       <DropdownMenu>
         <DropdownMenuTrigger asChild>

console/src/components/layout/Layout.tsx

@@ -17,22 +17,40 @@
  * under the License.
  */
 
+import { useCallback, useEffect, useState } from "react"
 import { Outlet } from "react-router-dom"
 import { Sidebar } from "./Sidebar"
 import { Header } from "./Header"
 import { Footer } from "./Footer"
+import { GlobalSearch } from "@/components/GlobalSearch"
 
 export function Layout() {
+  const [searchOpen, setSearchOpen] = useState(false)
+
+  const openSearch = useCallback(() => setSearchOpen(true), [])
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault()
+        setSearchOpen((prev) => !prev)
+      }
+    }
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [])
+
   return (
     <div className="flex h-screen overflow-hidden">
       <Sidebar />
       <div className="flex flex-1 flex-col overflow-hidden">
-        <Header />
+        <Header onSearchOpen={openSearch} />
         <main className="flex-1 overflow-y-auto">
           <Outlet />
         </main>
         <Footer />
       </div>
+      <GlobalSearch open={searchOpen} onOpenChange={setSearchOpen} />
     </div>
   )
 }