@gntik-ai/blocks 0.0.0-stage → 0.6.0

package/src/tables/DataTable/views.tsx

@@ -0,0 +1,193 @@
+import { Bookmark, ChevronDown } from '@gntik-ai/icons';
+import {
+  Button,
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Menu,
+  MenuContent,
+  MenuGroup,
+  MenuGroupLabel,
+  MenuItem,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuSeparator,
+  MenuTrigger,
+} from '@gntik-ai/ui';
+import { useId, useState } from 'react';
+import type { ColumnWidths, PinnedColumns } from './column-sizing';
+import type { DataTableLabels } from './labels';
+import type { SortState } from './data-table-utils';
+
+/** What a saved view captures. Every field is optional: a missing field keeps the table's default. */
+export interface DataTableViewState {
+  /** Opaque filter state of the page's toolbar (see the table's `filters` / `onFiltersChange`). */
+  filters?: unknown;
+  sort?: SortState | null;
+  hiddenColumns?: readonly string[];
+  columnWidths?: ColumnWidths;
+  pinnedColumns?: PinnedColumns;
+  /** A field key, or `null` for no grouping (function `groupBy`s cannot be saved). */
+  groupBy?: string | null;
+}
+
+export interface DataTableView {
+  id: string;
+  name: string;
+  state: DataTableViewState;
+}
+
+const norm = (s: DataTableViewState) =>
+  JSON.stringify({
+    filters: s.filters ?? null,
+    sort: s.sort ?? null,
+    hiddenColumns: [...(s.hiddenColumns ?? [])].sort(),
+    columnWidths: Object.fromEntries(Object.entries(s.columnWidths ?? {}).sort(([a], [b]) => a.localeCompare(b))),
+    pinnedColumns: { left: s.pinnedColumns?.left ?? [], right: s.pinnedColumns?.right ?? [] },
+    groupBy: s.groupBy ?? null,
+  });
+
+/** Whether two view states are equivalent (key order and empty values ignored). */
+export function sameViewState(a: DataTableViewState, b: DataTableViewState): boolean {
+  return norm(a) === norm(b);
+}
+
+/** A new view id that does not collide with `views`. */
+export function newViewId(name: string, views: readonly DataTableView[]): string {
+  const base =
+    name
+      .trim()
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/^-|-$/g, '') || 'view';
+  let id = base;
+  for (let i = 2; views.some((v) => v.id === id); i++) id = `${base}-${i}`;
+  return id;
+}
+
+export interface ViewSwitcherProps {
+  labels?: Partial<DataTableLabels>;
+  views: readonly DataTableView[];
+  activeId: string | null;
+  /** The table differs from the active view (or from the defaults when none is active). */
+  dirty: boolean;
+  onSelect: (id: string | null) => void;
+  onSaveAs: (name: string) => void;
+  onSave: () => void;
+  onRename: (id: string, name: string) => void;
+  onDelete: (id: string) => void;
+  onReset: () => void;
+}
+
+const DEFAULT_VALUE = '__default__';
+
+/** "Views" menu: switch between saved views, save the current table as a view, rename, delete, reset. */
+export function ViewSwitcher({
+  labels,
+  views,
+  activeId,
+  dirty,
+  onSelect,
+  onSaveAs,
+  onSave,
+  onRename,
+  onDelete,
+  onReset,
+}: ViewSwitcherProps) {
+  const inputId = useId();
+  const active = views.find((v) => v.id === activeId) ?? null;
+  const [dialog, setDialog] = useState<'create' | 'rename' | null>(null);
+  const [name, setName] = useState('');
+  const open = (mode: 'create' | 'rename') => {
+    setName(mode === 'rename' && active ? active.name : '');
+    setDialog(mode);
+  };
+  const submit = () => {
+    const trimmed = name.trim();
+    if (!trimmed) return;
+    if (dialog === 'rename' && active) onRename(active.id, trimmed);
+    else onSaveAs(trimmed);
+    setDialog(null);
+  };
+  return (
+    <>
+      <Menu>
+        <MenuTrigger render={<Button variant="secondary" size="sm" icon={Bookmark} trailingIcon={ChevronDown} />}>
+          <span className="max-w-40 truncate">{active ? active.name : (labels?.defaultView ?? 'Default view')}</span>
+          {dirty && (
+            <>
+              {' '}
+              <span aria-hidden className="size-1.5 rounded-full bg-primary" />{' '}
+              <span className="sr-only">{labels?.modified ?? '(modified)'}</span>
+            </>
+          )}
+        </MenuTrigger>
+        <MenuContent align="end" className="min-w-[220px]">
+          <MenuGroup>
+            <MenuGroupLabel>{labels?.views ?? 'Views'}</MenuGroupLabel>
+            <MenuRadioGroup
+              value={activeId ?? DEFAULT_VALUE}
+              onValueChange={(v: unknown) => onSelect(v === DEFAULT_VALUE ? null : String(v))}
+            >
+              <MenuRadioItem value={DEFAULT_VALUE}>{labels?.defaultViewOption ?? 'Default view'}</MenuRadioItem>
+              {views.map((v) => (
+                <MenuRadioItem key={v.id} value={v.id}>
+                  {v.name}
+                </MenuRadioItem>
+              ))}
+            </MenuRadioGroup>
+          </MenuGroup>
+          <MenuSeparator />
+          <MenuItem disabled={!active || !dirty} onClick={onSave}>
+            {labels?.saveChanges ?? 'Save changes'}
+          </MenuItem>
+          <MenuItem onClick={() => open('create')}>{labels?.saveAs ?? 'Save as new view…'}</MenuItem>
+          <MenuItem disabled={!active} onClick={() => open('rename')}>
+            {labels?.renameView ?? 'Rename view…'}
+          </MenuItem>
+          <MenuItem disabled={!active} onClick={() => active && onDelete(active.id)}>
+            {labels?.deleteView ?? 'Delete view'}
+          </MenuItem>
+          <MenuItem disabled={!dirty} onClick={onReset}>
+            {labels?.resetChanges ?? 'Reset changes'}
+          </MenuItem>
+        </MenuContent>
+      </Menu>
+      <Dialog open={dialog != null} onOpenChange={(o) => !o && setDialog(null)}>
+        <DialogContent size="sm" closeLabel={labels?.closeDialog}>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              submit();
+            }}
+          >
+            <DialogHeader>
+              <DialogTitle>
+                {dialog === 'rename'
+                  ? (labels?.renameViewTitle ?? 'Rename view')
+                  : (labels?.saveViewTitle ?? 'Save view')}
+              </DialogTitle>
+            </DialogHeader>
+            <DialogBody>
+              <label htmlFor={inputId} className="mb-1.5 block text-[12.5px] font-medium text-foreground">
+                {labels?.viewName ?? 'View name'}
+              </label>
+              <Input id={inputId} value={name} onChange={(e) => setName(e.target.value)} autoComplete="off" required />
+            </DialogBody>
+            <DialogFooter>
+              <DialogClose render={<Button variant="ghost" />}>{labels?.cancel ?? 'Cancel'}</DialogClose>
+              <Button type="submit" disabled={!name.trim()}>
+                {dialog === 'rename' ? (labels?.rename ?? 'Rename') : (labels?.saveView ?? 'Save view')}
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

package/src/tables/FilterBar/FilterBar.labels.test.tsx

@@ -0,0 +1,69 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { I18nProvider } from '@gntik-ai/ui';
+import { FilterBar, type FilterBarLabels } from './FilterBar';
+
+it('replaces filter chrome including removed chips, saved views and the live result count', async () => {
+  const user = userEvent.setup();
+  const removeFilter = vi.fn((field: string, value: string) => `Quitar ${field}|${value}`);
+  const resultCount = vi.fn((count: number) => `Encontrados: ${count}`);
+  const labels: FilterBarLabels = {
+    searchLandmark: 'Filtrar',
+    searchLabel: 'Buscar registros',
+    searchPlaceholder: 'Escriba…',
+    savedViewLabel: 'Vista guardada',
+    savedViewPlaceholder: 'Vistas guardadas',
+    addFilter: 'Añadir filtro',
+    activeFilters: 'Filtros activos',
+    filters: 'Filtros',
+    clearAll: 'Borrar todo',
+    removeFilter,
+    resultCount,
+  };
+  const { container } = render(<FilterBar labels={labels} resultCount={1200} />);
+  expect(screen.getByRole('search', { name: 'Filtrar' })).toBeVisible();
+  expect(screen.getByRole('searchbox', { name: 'Buscar registros' })).toHaveAttribute('placeholder', 'Escriba…');
+  expect(screen.getByRole('combobox', { name: 'Vista guardada' })).toHaveTextContent('Vistas guardadas');
+  expect(screen.getByRole('list', { name: 'Filtros activos' })).toBeVisible();
+  expect(screen.getByText('Filtros', { exact: true })).toBeVisible();
+  expect(container.querySelector('[aria-live]')?.textContent).toBe('Encontrados: 1200');
+  expect(resultCount).toHaveBeenCalledWith(1200);
+  expect(removeFilter).toHaveBeenCalledWith('Status', 'Running');
+  const remove = screen.getByRole('button', { name: 'Quitar Status|Running' });
+  remove.focus();
+  expect(remove).toHaveFocus();
+  await user.keyboard('{Delete}');
+  expect(screen.queryByRole('button', { name: 'Quitar Status|Running' })).toBeNull();
+  await user.click(screen.getByRole('button', { name: 'Añadir filtro' }));
+  await user.click(await screen.findByRole('menuitemcheckbox', { name: 'Failed' }));
+  await user.keyboard('{Escape}');
+  expect(screen.getByRole('button', { name: 'Quitar Status|Failed' })).toBeVisible();
+  await user.click(screen.getByRole('button', { name: 'Borrar todo' }));
+  expect(screen.queryByRole('list', { name: 'Filtros activos' })).toBeNull();
+  await user.click(screen.getByRole('combobox', { name: 'Vista guardada' }));
+  expect(await screen.findByRole('option', { name: 'Needs attention' })).toBeVisible();
+});
+
+it('retains legacy props, default markup and provider fallbacks for keys that are omitted', () => {
+  const { container, rerender } = render(
+    <I18nProvider locale="es">
+      <FilterBar resultCount={1200} searchLabel="Find" placeholder="Type" />
+    </I18nProvider>,
+  );
+  const original = container.querySelector('[aria-live]')?.outerHTML;
+  const landmark = screen.getByRole('search').getAttribute('aria-label');
+  rerender(
+    <I18nProvider locale="es">
+      <FilterBar
+        resultCount={1200}
+        searchLabel="Find"
+        placeholder="Type"
+        labels={{ clearAll: 'Clear', searchLabel: 'Override', searchPlaceholder: 'Override type' }}
+      />
+    </I18nProvider>,
+  );
+  expect(screen.getByRole('searchbox', { name: 'Override' })).toHaveAttribute('placeholder', 'Override type');
+  expect(screen.getByRole('search')).toHaveAttribute('aria-label', landmark);
+  expect(container.querySelector('[aria-live]')?.outerHTML).toBe(original);
+  expect(screen.getByRole('button', { name: 'Clear' })).toBeVisible();
+});

package/src/tables/FilterBar/FilterBar.test.tsx

@@ -0,0 +1,43 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { FilterBar } from './FilterBar';
+
+describe('FilterBar', () => {
+  it('renders search, controls and the default chips', async () => {
+    const { container } = render(<FilterBar resultCount={12} />);
+    expect(screen.getByRole('search', { name: 'Filters' })).toBeInTheDocument();
+    expect(screen.getByRole('searchbox', { name: 'Search' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Remove filter Status: Running' })).toBeInTheDocument();
+    await expectNoAxeViolations(container);
+  });
+
+  it('adds, removes and clears filters', async () => {
+    const user = userEvent.setup();
+    const onFiltersChange = vi.fn();
+    const onQueryChange = vi.fn();
+    render(<FilterBar onFiltersChange={onFiltersChange} onQueryChange={onQueryChange} />);
+    await user.click(screen.getByRole('button', { name: 'Remove filter Region: eu-west-1' }));
+    expect(onFiltersChange).toHaveBeenLastCalledWith([{ field: 'status', value: 'Running' }]);
+    await user.click(screen.getByRole('button', { name: 'Add filter' }));
+    await user.click(await screen.findByRole('menuitemcheckbox', { name: 'Failed' }));
+    await user.keyboard('{Escape}');
+    expect(screen.getByRole('button', { name: 'Remove filter Status: Failed' })).toBeInTheDocument();
+    await user.type(screen.getByRole('searchbox', { name: 'Search' }), 'api');
+    expect(onQueryChange).toHaveBeenLastCalledWith('api');
+    await user.click(screen.getByRole('button', { name: 'Clear all' }));
+    expect(onFiltersChange).toHaveBeenLastCalledWith([]);
+    expect(screen.queryByRole('list', { name: 'Active filters' })).toBeNull();
+  });
+
+  it('applies a saved view', async () => {
+    const user = userEvent.setup();
+    const onViewChange = vi.fn();
+    render(<FilterBar onViewChange={onViewChange} />);
+    await user.click(screen.getByRole('combobox', { name: 'Saved view' }));
+    await user.click(await screen.findByRole('option', { name: 'Needs attention' }));
+    expect(onViewChange).toHaveBeenCalledWith(expect.objectContaining({ value: 'attention' }));
+    expect(screen.getByRole('button', { name: 'Remove filter Status: Degraded' })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Remove filter Status: Running' })).toBeNull();
+  });
+});

package/src/tables/FilterBar/FilterBar.tsx

@@ -0,0 +1,232 @@
+import { ListFilter, Plus, Search } from '@gntik-ai/icons';
+import {
+  Button,
+  cn,
+  Input,
+  Menu,
+  MenuCheckboxItem,
+  MenuContent,
+  MenuGroup,
+  MenuGroupLabel,
+  MenuSeparator,
+  MenuTrigger,
+  SimpleSelect,
+  Token,
+  useI18n,
+} from '@gntik-ai/ui';
+import { Fragment, useState } from 'react';
+import { DEPLOYMENT_DEFAULT_FILTERS, DEPLOYMENT_FILTER_FIELDS, DEPLOYMENT_SAVED_VIEWS } from './fixtures';
+
+export interface FilterField {
+  id: string;
+  label: string;
+  options: readonly string[];
+}
+
+export interface ActiveFilter {
+  field: string;
+  value: string;
+}
+
+export interface SavedView {
+  value: string;
+  label: string;
+  query?: string;
+  filters: readonly ActiveFilter[];
+}
+
+export interface FilterBarLabels {
+  searchLandmark: string;
+  searchLabel: string;
+  searchPlaceholder: string;
+  savedViewLabel: string;
+  savedViewPlaceholder: string;
+  addFilter: string;
+  activeFilters: string;
+  filters: string;
+  clearAll: string;
+  removeFilter: (field: string, value: string) => string;
+  resultCount: (count: number) => string;
+}
+
+export interface FilterBarProps {
+  /** Per-key overrides take precedence over the legacy search props and provider catalog. */
+  labels?: Partial<FilterBarLabels>;
+  fields?: readonly FilterField[];
+  /** Search text (controlled). */
+  query?: string;
+  defaultQuery?: string;
+  onQueryChange?: (query: string) => void;
+  /** Active filters (controlled). */
+  filters?: readonly ActiveFilter[];
+  defaultFilters?: readonly ActiveFilter[];
+  onFiltersChange?: (filters: ActiveFilter[]) => void;
+  /** Saved views; picking one applies its query and filters. Empty hides the Select. */
+  views?: readonly SavedView[];
+  defaultView?: string | null;
+  onViewChange?: (view: SavedView) => void;
+  searchLabel?: string;
+  placeholder?: string;
+  /** Optional result count shown at the end ("12 results"). */
+  resultCount?: number;
+  className?: string;
+}
+
+const same = (a: ActiveFilter, b: ActiveFilter) => a.field === b.field && a.value === b.value;
+
+/**
+ * Filter bar: search Input, saved views Select, an "Add filter" Menu (multi-select per field),
+ * removable filter chips (Token) and Clear all.
+ */
+export function FilterBar({
+  fields = DEPLOYMENT_FILTER_FIELDS,
+  query: queryProp,
+  defaultQuery = '',
+  onQueryChange,
+  filters: filtersProp,
+  defaultFilters = DEPLOYMENT_DEFAULT_FILTERS,
+  onFiltersChange,
+  views = DEPLOYMENT_SAVED_VIEWS,
+  defaultView = null,
+  onViewChange,
+  searchLabel: searchLabelProp,
+  placeholder: placeholderProp,
+  resultCount,
+  className,
+  labels,
+}: FilterBarProps) {
+  const { t } = useI18n();
+  const searchLabel = labels?.searchLabel ?? searchLabelProp ?? t('common.search');
+  const placeholder = labels?.searchPlaceholder ?? placeholderProp ?? 'Search by name…';
+  const [innerQuery, setInnerQuery] = useState(defaultQuery);
+  const [innerFilters, setInnerFilters] = useState<readonly ActiveFilter[]>(defaultFilters);
+  const [view, setView] = useState<string | null>(defaultView);
+  const query = queryProp ?? innerQuery;
+  const filters = filtersProp ?? innerFilters;
+
+  const setQuery = (next: string) => {
+    setInnerQuery(next);
+    onQueryChange?.(next);
+  };
+  const setFilters = (next: ActiveFilter[], keepView = false) => {
+    setInnerFilters(next);
+    onFiltersChange?.(next);
+    if (!keepView) setView(null);
+  };
+  const toggle = (filter: ActiveFilter, on: boolean) =>
+    setFilters(on ? [...filters.filter((f) => !same(f, filter)), filter] : filters.filter((f) => !same(f, filter)));
+  const applyView = (value: string | null) => {
+    const picked = views.find((v) => v.value === value);
+    if (!picked) return;
+    setView(picked.value);
+    setFilters([...picked.filters], true);
+    if (picked.query !== undefined) setQuery(picked.query);
+    onViewChange?.(picked);
+  };
+  const clearAll = () => {
+    setFilters([]);
+    setQuery('');
+  };
+  const labelOf = (id: string) => fields.find((f) => f.id === id)?.label ?? id;
+  const hasAny = filters.length > 0 || query !== '';
+
+  return (
+    <div
+      role="search"
+      aria-label={labels?.searchLandmark ?? t('filters.label')}
+      className={cn('flex flex-col gap-3', className)}
+    >
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
+        <Input
+          aria-label={searchLabel}
+          type="search"
+          size="sm"
+          leadingIcon={Search}
+          placeholder={placeholder}
+          value={query}
+          onValueChange={(v) => setQuery(String(v))}
+          className="w-full sm:max-w-xs"
+        />
+        <div className="flex flex-wrap items-center gap-2">
+          {views.length > 0 && (
+            <SimpleSelect
+              aria-label={labels?.savedViewLabel ?? t('filters.savedView')}
+              size="sm"
+              placeholder={labels?.savedViewPlaceholder ?? t('filters.savedViews')}
+              value={view}
+              onValueChange={applyView}
+              items={views.map((v) => ({ value: v.value, label: v.label }))}
+              className="min-w-[160px]"
+            />
+          )}
+          <Menu>
+            <MenuTrigger render={<Button variant="secondary" size="sm" icon={Plus} />}>
+              {labels?.addFilter ?? t('filters.add')}
+            </MenuTrigger>
+            <MenuContent className="max-h-80 min-w-[220px] overflow-y-auto">
+              {fields.map((field, i) => (
+                <Fragment key={field.id}>
+                  {i > 0 && <MenuSeparator />}
+                  <MenuGroup>
+                    <MenuGroupLabel>{field.label}</MenuGroupLabel>
+                    {field.options.map((option) => {
+                      const filter = { field: field.id, value: option };
+                      return (
+                        <MenuCheckboxItem
+                          key={option}
+                          checked={filters.some((f) => same(f, filter))}
+                          onCheckedChange={(on) => toggle(filter, on)}
+                        >
+                          {option}
+                        </MenuCheckboxItem>
+                      );
+                    })}
+                  </MenuGroup>
+                </Fragment>
+              ))}
+            </MenuContent>
+          </Menu>
+        </div>
+        {resultCount !== undefined && (
+          <p className="text-[12.5px] text-muted-foreground sm:ms-auto" aria-live="polite">
+            {labels?.resultCount ? (
+              labels.resultCount(resultCount)
+            ) : (
+              <>
+                <span className="font-mono text-foreground tabular-nums">{resultCount.toLocaleString('en-US')}</span>{' '}
+                {resultCount === 1 ? 'result' : 'results'}
+              </>
+            )}
+          </p>
+        )}
+      </div>
+      {hasAny && (
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="inline-flex items-center gap-1.5 font-mono text-[10px] tracking-[0.14em] text-muted-foreground uppercase">
+            <ListFilter size={12} aria-hidden />
+            {labels?.filters ?? 'Filters'}
+          </span>
+          <ul aria-label={labels?.activeFilters ?? t('filters.active')} className="flex flex-wrap items-center gap-2">
+            {filters.map((f) => (
+              <li key={`${f.field}:${f.value}`} className="flex">
+                <Token
+                  size="sm"
+                  prefix={`${labelOf(f.field)}:`}
+                  label={f.value}
+                  removeLabel={
+                    labels?.removeFilter?.(labelOf(f.field), f.value) ??
+                    t('filters.remove', { field: labelOf(f.field), value: f.value })
+                  }
+                  onRemove={() => toggle(f, false)}
+                />
+              </li>
+            ))}
+          </ul>
+          <Button variant="ghost" size="sm" className="h-7 px-2 hover:text-destructive-text" onClick={clearAll}>
+            {labels?.clearAll ?? 'Clear all'}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/tables/FilterBar/block.meta.ts

@@ -0,0 +1,32 @@
+import type { BlockMeta } from '../../meta';
+import type { FilterBarLabels } from './FilterBar';
+
+export const meta: BlockMeta = {
+  name: 'Filter bar',
+  family: 'tables',
+  status: 'beta',
+  description:
+    'Search Input, saved views Select, an Add filter Menu with multi-select per field, removable filter chips and Clear all.',
+  labels: [
+    { key: 'searchLandmark', type: 'string', state: 'Always: search landmark name' },
+    { key: 'searchLabel', type: 'string', state: 'Always: search input accessible name' },
+    { key: 'searchPlaceholder', type: 'string', state: 'Always: search input placeholder' },
+    { key: 'savedViewLabel', type: 'string', state: 'When views exist: Select accessible name' },
+    { key: 'savedViewPlaceholder', type: 'string', state: 'When no view selected: Select placeholder' },
+    { key: 'addFilter', type: 'string', state: 'Always: Add filter trigger text and name' },
+    { key: 'activeFilters', type: 'string', state: 'When filters or search exist: active-filters list name' },
+    { key: 'filters', type: 'string', state: 'When filters or search exist: chip section heading' },
+    { key: 'clearAll', type: 'string', state: 'When filters or search exist: clear button text and name' },
+    {
+      key: 'removeFilter',
+      type: '(field: string, value: string) => string',
+      state: 'When chip exists: remove button name; field and value are caller content',
+    },
+    {
+      key: 'resultCount',
+      type: '(count: number) => string',
+      state: 'When resultCount supplied: visible count and polite live region',
+    },
+  ] satisfies Array<{ key: keyof FilterBarLabels; type: string; state: string }>,
+  uses: ['Input', 'SimpleSelect', 'Menu', 'MenuCheckboxItem', 'Token', 'Button'],
+};

package/src/tables/FilterBar/fixtures.ts

@@ -0,0 +1,32 @@
+import type { ActiveFilter, FilterField, SavedView } from './FilterBar';
+
+export const DEPLOYMENT_FILTER_FIELDS: FilterField[] = [
+  { id: 'status', label: 'Status', options: ['Running', 'Queued', 'Paused', 'Degraded', 'Failed'] },
+  { id: 'region', label: 'Region', options: ['eu-west-1', 'us-east-1', 'ap-south-1', 'eu-central-1'] },
+  { id: 'owner', label: 'Owner', options: ['Platform team', 'Payments team', 'Data team'] },
+];
+
+export const DEPLOYMENT_DEFAULT_FILTERS: ActiveFilter[] = [
+  { field: 'status', value: 'Running' },
+  { field: 'region', value: 'eu-west-1' },
+];
+
+export const DEPLOYMENT_SAVED_VIEWS: SavedView[] = [
+  { value: 'all', label: 'All deployments', filters: [] },
+  {
+    value: 'attention',
+    label: 'Needs attention',
+    filters: [
+      { field: 'status', value: 'Degraded' },
+      { field: 'status', value: 'Failed' },
+    ],
+  },
+  {
+    value: 'eu',
+    label: 'EU regions',
+    filters: [
+      { field: 'region', value: 'eu-west-1' },
+      { field: 'region', value: 'eu-central-1' },
+    ],
+  },
+];

package/src/tables/InlineEditRow/InlineEditRow.test.tsx

@@ -0,0 +1,41 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { InlineEditTable } from './InlineEditRow';
+
+describe('InlineEditRow', () => {
+  it('renders the editable table in read mode', async () => {
+    const { container } = render(<InlineEditTable />);
+    expect(screen.getByRole('table', { name: 'Members' })).toBeInTheDocument();
+    expect(screen.getAllByRole('button', { name: /^Edit / })).toHaveLength(3);
+    await expectNoAxeViolations(container);
+  });
+
+  it('edits, saves with Enter and returns focus', async () => {
+    const user = userEvent.setup();
+    const onRowSave = vi.fn();
+    const { container } = render(<InlineEditTable onRowSave={onRowSave} />);
+    await user.click(screen.getByRole('button', { name: 'Edit Sam Carter' }));
+    const name = screen.getByRole('textbox', { name: 'Name' });
+    expect(name).toHaveFocus();
+    await expectNoAxeViolations(container);
+    await user.clear(name);
+    await user.type(name, 'Sam Rivera{Enter}');
+    expect(onRowSave).toHaveBeenCalledWith(expect.objectContaining({ id: 'm2', name: 'Sam Rivera', seats: 2 }));
+    expect(screen.getByRole('cell', { name: 'Sam Rivera' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Edit Sam Rivera' })).toHaveFocus();
+  });
+
+  it('cancels with Escape and blocks empty required fields', async () => {
+    const user = userEvent.setup();
+    render(<InlineEditTable />);
+    await user.click(screen.getByRole('button', { name: 'Edit Ana Lopez' }));
+    const row = screen.getByRole('textbox', { name: 'Name' }).closest('tr')!;
+    await user.clear(screen.getByRole('textbox', { name: 'Name' }));
+    expect(within(row).getByRole('button', { name: 'Save' })).toBeDisabled();
+    await user.keyboard('{Escape}');
+    expect(screen.queryByRole('textbox')).toBeNull();
+    expect(screen.getByRole('cell', { name: 'Ana Lopez' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Edit Ana Lopez' })).toHaveFocus();
+  });
+});