feat: refactor data grid components to utilize DataGridSection for enhanced functionality

Updated multiple components to replace DataGridShell with DataGridSection, integrating search functionality and improved data handling. This change enhances user experience by providing a consistent interface across various grids, including AccessApiKeysGrid, DashboardRecentJobsGrid, and others. Additionally, introduced global filtering capabilities to streamline data retrieval and presentation, ensuring a more efficient user interaction with the data grids.
2026-07-09 12:48:52 +07:00
parent e04fea657c
commit f66d68d1c7
41 changed files with 1392 additions and 275 deletions
@@ -0,0 +1,73 @@
+import type { ReactNode } from 'react'
+
+import { Field } from '@evobgp/ui/components/field'
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from '@evobgp/ui/components/input-group'
+import { ListFilterIcon, SearchIcon, XIcon } from 'lucide-react'
+
+interface DataGridToolbarProps {
+  searchValue: string
+  onSearchChange: (value: string) => void
+  searchPlaceholder?: string
+  filters?: ReactNode
+  actions?: ReactNode
+  className?: string
+}
+
+/** Search row for data grids (ReUI c-input-group-37 pattern). */
+export function DataGridToolbar({
+  searchValue,
+  onSearchChange,
+  searchPlaceholder = 'Поиск…',
+  filters,
+  actions,
+  className,
+}: DataGridToolbarProps) {
+  return (
+    <div className={`flex flex-wrap items-center gap-2 border-b px-3 py-3 ${className ?? ''}`}>
+      <Field className="min-w-[200px] flex-1">
+        <InputGroup>
+          <InputGroupAddon align="inline-start">
+            <SearchIcon aria-hidden="true" />
+          </InputGroupAddon>
+          <InputGroupInput
+            placeholder={searchPlaceholder}
+            value={searchValue}
+            onChange={(event) => onSearchChange(event.target.value)}
+            aria-label={searchPlaceholder}
+          />
+          <InputGroupAddon align="inline-end" className="gap-1">
+            {searchValue.length > 0 ? (
+              <InputGroupButton
+                aria-label="Очистить поиск"
+                size="icon-xs"
+                variant="ghost"
+                onClick={() => onSearchChange('')}
+              >
+                <XIcon aria-hidden="true" />
+              </InputGroupButton>
+            ) : null}
+            {filters ? (
+              filters
+            ) : (
+              <InputGroupButton
+                variant="ghost"
+                size="xs"
+                className="pointer-events-none gap-1.5 opacity-0"
+                aria-hidden="true"
+                tabIndex={-1}
+              >
+                <ListFilterIcon className="size-3.5" />
+              </InputGroupButton>
+            )}
+          </InputGroupAddon>
+        </InputGroup>
+      </Field>
+      {actions ? <div className="flex shrink-0 items-center gap-2">{actions}</div> : null}
+    </div>
+  )
+}