@flamingo-stack/openframe-frontend-core 0.0.711 → 0.0.712

package/src/components/features/devices/device-selector/device-selector.types.ts

@@ -0,0 +1,138 @@
+import type { ReactNode } from 'react';
+import type { ColumnFiltersState } from '../../../ui';
+import type { DeviceFilters, DeviceRow } from '../types';
+
+export type SubTab = 'available' | 'selected';
+
+/** The two ways a consumer can target devices, the picker's top-level radio. */
+export type DeviceSelectionMode = 'specific' | 'criteria';
+
+/** The narrowing the picker is showing, in the component's own vocabulary. */
+export interface DeviceSelectorNarrowing {
+  /** Column funnels (status / customer / os), TanStack-shaped. */
+  columnFilters: ColumnFiltersState;
+  /** Tag chips in the search bar, `key:value`. */
+  tags: string[];
+}
+
+/**
+ * Hands the picker's state to a parent that answers it from the server.
+ *
+ * Present ⇒ the component stops deriving anything from the `devices` array:
+ * `devices` IS the current tab's page, the Available/Selected split is two
+ * server queries rather than one list partitioned by `selectedIds`, and search,
+ * filters and the bulk actions are questions for the backend. Absent ⇒ every
+ * bit of that stays client-side exactly as before, which is what the other
+ * consumers (Run/Test Script, monitoring) rely on.
+ *
+ * The row action is add-or-remove by tab, not a toggle: with only a page of the
+ * assignment in hand, "is this one selected?" is not a question the client can
+ * answer. Selected always offers remove; on Available the row flips off
+ * `selectedIds`, which the parent fills from the connection's own per-row
+ * "already assigned" flag rather than from the page it holds.
+ */
+export interface DeviceSelectorServer<T extends DeviceRow = DeviceRow> {
+  activeTab: SubTab;
+  onTabChange: (tab: SubTab) => void;
+  /** Search box value. The parent debounces it into its query. */
+  search: string;
+  onSearchChange: (value: string) => void;
+  narrowing: DeviceSelectorNarrowing;
+  onNarrowingChange: (next: DeviceSelectorNarrowing) => void;
+  /**
+   * Options for the column funnels. Rows are paged, so options derived from
+   * them would only ever offer what page one happens to contain.
+   */
+  filterOptions?: DeviceFilters | null;
+  /** Size of the whole assignment, the "Selected Devices (N)" label. */
+  selectedCount: number;
+  /** Server-side count for the list on screen, for the header's row count. */
+  totalCount?: number;
+  /** Row actions. Committed immediately; there is no Save to batch them into. */
+  onAdd: (device: T) => void;
+  onRemove: (device: T) => void;
+  /** Header bulk actions, resolved server-side over the current narrowing. */
+  onAddAll: () => void;
+  onRemoveAll: () => void;
+}
+
+export interface DeviceSelectorInfiniteScroll {
+  hasNextPage: boolean;
+  isFetchingNextPage: boolean;
+  onLoadMore: () => void;
+  skeletonRows: number;
+}
+
+export interface DeviceSelectorProps<T extends DeviceRow = DeviceRow> {
+  /** Devices to display. Consumer controls fetching and pre-filtering. */
+  devices: T[];
+  /** Whether the device list is loading. */
+  loading: boolean;
+  /**
+   * Currently selected device keys. Optional so a skeleton can render the real
+   * picker with nothing selected, the component falls back to an empty set and
+   * a no-op change handler. Every consumer a user can act on passes both.
+   *
+   * In `server` mode this is not the picker's own state, the parent fills it
+   * with the rows the backend reports as already assigned, so the Available tab
+   * pre-checks them instead of offering to add what is already in.
+   */
+  selectedIds?: Set<string>;
+  /** Called when selection changes. Optional for the same reason as `selectedIds`. */
+  onSelectionChange?: (ids: Set<string>) => void;
+  /** Extract the unique string key for selection from a device. Defaults to `d.machineId ?? d.id`. */
+  getDeviceKey?: (device: T) => string | undefined;
+  /** Infinite scroll config for the available tab. */
+  infiniteScroll?: DeviceSelectorInfiniteScroll;
+  /** Disable all interactions (e.g. during save). */
+  disabled?: boolean;
+  /** Show selection mode radio group. Default: true. */
+  showSelectionModeRadio?: boolean;
+  /**
+   * Controls the selection-mode radio. Passing it is what ENABLES the "by
+   * criteria" option, a consumer that leaves it out gets the uncontrolled
+   * radio with criteria disabled and tagged "Coming Soon", which is what the
+   * monitoring and run-script pages still want.
+   */
+  selectionMode?: DeviceSelectionMode;
+  onSelectionModeChange?: (mode: DeviceSelectionMode) => void;
+  /**
+   * The rule editor, rendered in place of the whole picker card while
+   * `selectionMode` is `'criteria'` (design 460:85294 drops the card frame
+   * there, fields and table sit straight on the page).
+   *
+   * The table below it then shows what the rule currently resolves to: no row
+   * actions, no search box, no column funnels, the rule IS the narrowing, and a
+   * second one layered on top would make the row count answer a different
+   * question than the one the user is editing.
+   */
+  criteriaContent?: ReactNode;
+  /** Extra content rendered above the selection radio / tabs (e.g. ScheduleInfoBar). */
+  headerContent?: ReactNode;
+  /** Table rowKey. Default: "id". */
+  rowKey?: string;
+  /** "replace" replaces entire selection on Add All; "merge" adds to existing. Default: "merge". */
+  addAllBehavior?: 'replace' | 'merge';
+  /** Allow only one device to be selected at a time. Default: false. */
+  singleSelect?: boolean;
+  /** Return a tooltip string if the device should be disabled, or undefined if enabled. */
+  isDeviceDisabled?: (device: T) => string | undefined;
+  /**
+   * The search and tag filter row over the table. Default true; a host that
+   * shows a fixed list (nothing to search) passes false.
+   */
+  showToolbar?: boolean;
+  /** Column ids to drop from the table (e.g. `['organization', 'status']` to leave only device + os). */
+  hideColumns?: string[];
+  /**
+   * Server-side size of the list on screen, for the header's row count. Only
+   * needed when the rows are paged but `server` is not in play (the criteria
+   * preview); `server.totalCount` covers the server-driven picker.
+   */
+  totalCount?: number;
+  /**
+   * Switches the picker to server-driven mode, see {@link DeviceSelectorServer}.
+   * Omit for the client-side behaviour every other consumer uses.
+   */
+  server?: DeviceSelectorServer<T>;
+}

package/src/components/features/devices/device-selector/narrowing.ts

@@ -0,0 +1,33 @@
+import type { DeviceFilterInput } from '../types';
+import type { DeviceSelectorNarrowing } from './device-selector.types';
+
+export const EMPTY_NARROWING: DeviceSelectorNarrowing = { columnFilters: [], tags: [] };
+
+/**
+ * Turns the picker's narrowing vocabulary into the backend's.
+ *
+ * The component speaks in table column filters and `key:value` chips because
+ * that is what its controls produce; the owner's device fields take a
+ * `DeviceFilterInput`. A plain-text chip (no colon) stays on screen but carries
+ * no filter, same as the devices page.
+ */
+export function narrowingToFilter(narrowing: DeviceSelectorNarrowing): DeviceFilterInput {
+  const column = (id: string) => narrowing.columnFilters.find(f => f.id === id)?.value as string[] | undefined;
+  const tagPairs = narrowing.tags.flatMap(t => {
+    const i = t.indexOf(':');
+    return i > 0 ? [{ key: t.slice(0, i), value: t.slice(i + 1) }] : [];
+  });
+
+  const filter: DeviceFilterInput = {};
+  const statuses = column('status');
+  const osTypes = column('os');
+  const organizationIds = column('organization');
+  if (statuses?.length) filter.statuses = statuses;
+  if (osTypes?.length) filter.osTypes = osTypes;
+  if (organizationIds?.length) filter.organizationIds = organizationIds;
+  if (tagPairs.length) {
+    filter.tagKeys = tagPairs.map(t => t.key);
+    filter.tagValues = tagPairs.map(t => t.value);
+  }
+  return filter;
+}

package/src/components/features/devices/device-selector/use-device-selector.ts

@@ -0,0 +1,51 @@
+import { useCallback, useMemo, useState } from 'react';
+import { matchesDeviceName } from '../device-name';
+import type { DeviceRow } from '../types';
+import type { SubTab } from './device-selector.types';
+
+interface UseDeviceSelectorParams<T extends DeviceRow> {
+  devices: T[];
+  selectedIds: Set<string>;
+  getDeviceKey: (device: T) => string | undefined;
+}
+
+export function useDeviceSelector<T extends DeviceRow>({
+  devices,
+  selectedIds,
+  getDeviceKey,
+}: UseDeviceSelectorParams<T>) {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [activeSubTab, setActiveSubTab] = useState<SubTab>('available');
+
+  const filteredDevices = useMemo(() => {
+    const needle = searchTerm.trim().toLowerCase();
+    if (!needle) return devices;
+    return devices.filter(
+      d => matchesDeviceName(d, needle) || (d.osType || d.operating_system || '').toLowerCase().includes(needle),
+    );
+  }, [devices, searchTerm]);
+
+  const displayDevices = useMemo(() => {
+    if (activeSubTab === 'selected') {
+      return filteredDevices.filter(d => {
+        const key = getDeviceKey(d);
+        return key !== undefined && selectedIds.has(key);
+      });
+    }
+    return filteredDevices;
+  }, [filteredDevices, activeSubTab, selectedIds, getDeviceKey]);
+
+  const handleTabChange = useCallback((tabId: string) => {
+    setSearchTerm('');
+    setActiveSubTab(tabId as SubTab);
+  }, []);
+
+  return {
+    searchTerm,
+    setSearchTerm,
+    activeSubTab,
+    handleTabChange,
+    filteredDevices,
+    displayDevices,
+  };
+}

package/src/components/features/devices/device-status.ts

@@ -0,0 +1,102 @@
+/**
+ * Device status configuration utilities
+ * Provides consistent status mapping across the application
+ */
+
+import type { OSPlatformId } from '../../../utils/os-platforms';
+import { getOSPlatformId } from '../../../utils/os-utils';
+
+export type DeviceStatusVariant = 'success' | 'error' | 'warning' | 'grey' | 'critical';
+export type DeviceCardStatus = 'active' | 'inactive' | 'offline' | 'warning' | 'error';
+
+export interface DeviceStatusConfig {
+  label: string;
+  variant: DeviceStatusVariant;
+  cardStatus: DeviceCardStatus;
+}
+
+/**
+ * Get status configuration for display
+ * Used by both table and grid views for consistent status representation
+ */
+export function getDeviceStatusConfig(status: string | null | undefined): DeviceStatusConfig {
+  // A device may carry no status yet: it reads as the unknown one, never a crash.
+  const known = (status ?? '').toUpperCase();
+  switch (known) {
+    case 'ONLINE':
+      return {
+        label: 'ONLINE',
+        variant: 'success',
+        cardStatus: 'active',
+      };
+    // ACTIVE reads as PENDING because the product app maps it so: this is its
+    // mapping, carried into the lib unchanged. What a status reads as is a
+    // product decision, not this module's.
+    case 'PENDING':
+    case 'ACTIVE':
+      return {
+        label: 'PENDING',
+        variant: 'warning',
+        cardStatus: 'warning',
+      };
+    case 'OFFLINE':
+      return {
+        label: 'OFFLINE',
+        variant: 'error',
+        cardStatus: 'offline',
+      };
+    case 'DECOMMISSIONED':
+      return {
+        label: 'DECOMMISSIONED',
+        variant: 'error',
+        cardStatus: 'offline',
+      };
+    case 'IDLE':
+    case 'INACTIVE':
+      return {
+        label: 'INACTIVE',
+        variant: 'grey',
+        cardStatus: 'inactive',
+      };
+    case 'MAINTENANCE':
+      return {
+        label: 'MAINTENANCE',
+        variant: 'warning',
+        cardStatus: 'warning',
+      };
+    case 'PENDING_DELETION':
+      return {
+        label: 'PENDING DELETION',
+        variant: 'error',
+        cardStatus: 'error',
+      };
+    case 'ARCHIVED':
+      return {
+        label: 'ARCHIVED',
+        variant: 'grey',
+        cardStatus: 'inactive',
+      };
+    case 'DELETED':
+      return {
+        label: 'DELETED',
+        variant: 'error',
+        cardStatus: 'offline',
+      };
+    default:
+      return {
+        label: known,
+        variant: 'grey',
+        cardStatus: 'inactive',
+      };
+  }
+}
+
+/**
+ * Get operating system type for DeviceCard component
+ * Uses centralized OS type system from ui-kit
+ */
+export function getDeviceOperatingSystem(osType?: string): OSPlatformId | undefined {
+  // Uses centralized getOSPlatformId from ui-kit
+  // Returns: 'darwin' | 'windows' | 'linux' | undefined
+  return getOSPlatformId(osType);
+}

package/src/components/features/devices/device-statuses.ts

@@ -0,0 +1,88 @@
+import type { DeviceFilterInput } from './types';
+
+/**
+ * Default visible device statuses (excludes ARCHIVED and DELETED).
+ * Deleted devices live on the dedicated /devices/archive page as read-only
+ * records. Use this constant for all device queries that should show "active"
+ * devices only.
+ *
+ * NOTE: If new statuses are added to the backend, they must be added here
+ * to appear in default views.
+ */
+
+export const DEVICE_STATUS = {
+  ONLINE: 'ONLINE',
+  OFFLINE: 'OFFLINE',
+  ACTIVE: 'ACTIVE',
+  INACTIVE: 'INACTIVE',
+  MAINTENANCE: 'MAINTENANCE',
+  DECOMMISSIONED: 'DECOMMISSIONED',
+  PENDING: 'PENDING',
+  // Filter values are sanitized against the generated `DeviceStatus` enum
+  // (`toRelayDeviceFilter`) before hitting GraphQL, so PENDING_DELETION is
+  // silently dropped from queries until the backend adds it to the schema and
+  // `schema.graphql` / schema-enums are refreshed. Safe to ship ahead of BE.
+  PENDING_DELETION: 'PENDING_DELETION',
+  // No archive action exists anymore, ARCHIVED survives only as a legacy
+  // status on devices archived before the delete/archive rework.
+  ARCHIVED: 'ARCHIVED',
+  DELETED: 'DELETED',
+} as const;
+
+export type DeviceStatus = (typeof DEVICE_STATUS)[keyof typeof DEVICE_STATUS];
+
+export const DEFAULT_VISIBLE_STATUSES = [
+  DEVICE_STATUS.ONLINE,
+  DEVICE_STATUS.OFFLINE,
+  DEVICE_STATUS.PENDING,
+  DEVICE_STATUS.PENDING_DELETION,
+] as const satisfies string[];
+
+// DELETED + legacy ARCHIVED both feed the dashboard's "Archived Devices" card,
+// mirroring what the /devices/archive page lists.
+export const DEFAULT_DASHBOARD_STATUSES = [
+  DEVICE_STATUS.ONLINE,
+  DEVICE_STATUS.OFFLINE,
+  DEVICE_STATUS.PENDING,
+  DEVICE_STATUS.PENDING_DELETION,
+  DEVICE_STATUS.ARCHIVED,
+  DEVICE_STATUS.DELETED,
+] as const satisfies string[];
+
+// PENDING is intentionally not part of the default list view, pending
+// (still-enrolling) devices appear only when the user explicitly checks the
+// PENDING status filter. The option itself stays in DEFAULT_VISIBLE_STATUSES.
+// PENDING_DELETION stays in the default view: a device scheduled for uninstall
+// must remain visible until the uninstall actually completes.
+export const DEFAULT_DEVICES_LIST_STATUSES = [
+  DEVICE_STATUS.ONLINE,
+  DEVICE_STATUS.OFFLINE,
+  DEVICE_STATUS.PENDING_DELETION,
+] as const satisfies string[];
+
+// Statuses fetched when the device list is used as an enrichment registry
+// (e.g. monitoring query/policy tables mapping fleet hosts → device metadata).
+// Includes DELETED (and legacy ARCHIVED) so archived-but-monitored hosts keep
+// their org/OS/image instead of degrading to bare host rows.
+export const DEVICE_ENRICHMENT_STATUSES = [
+  DEVICE_STATUS.ONLINE,
+  DEVICE_STATUS.OFFLINE,
+  DEVICE_STATUS.ARCHIVED,
+  DEVICE_STATUS.DELETED,
+] as const satisfies string[];
+
+/**
+ * The device-registry filter the monitoring tables read: the enrichment statuses
+ * as a ready `DeviceFilterInput`. Shared so the policy and query tables ask for
+ * the same fleet and therefore share one cached fetch.
+ */
+export const DEVICE_ENRICHMENT_FILTER: DeviceFilterInput = { statuses: [...DEVICE_ENRICHMENT_STATUSES] };
+
+export type DefaultVisibleStatus = (typeof DEFAULT_VISIBLE_STATUSES)[number];
+
+/**
+ * Statuses that are hidden by default (for documentation/reference)
+ */
+export const HIDDEN_DEVICE_STATUSES = [DEVICE_STATUS.ARCHIVED, DEVICE_STATUS.DELETED] as const;
+
+export type HiddenDeviceStatus = (typeof HIDDEN_DEVICE_STATUSES)[number];

package/src/components/features/devices/device-tags-filter-button.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { Filter02Icon } from '../../icons-v2-generated';
+import { Button } from '../../ui';
+
+/**
+ * The "Device Tags" filter trigger: labelled from md, icon-only below it.
+ *
+ * Breakpoint decided in CSS, and that is the point. Both call sites used to branch
+ * on a `useMdUp()` value threaded down as a prop, and that hook answers `undefined`
+ * until an effect has run, so `isMdUp ? labelled : iconOnly` took the icon-only
+ * arm on the FIRST render at every width, server included. On desktop the button
+ * appeared as a bare square and grew its label a frame later, which also nudged the
+ * search input beside it.
+ *
+ * Two buttons rather than one with a hidden label: `size="icon"` is not just "no
+ * text", it is a square box (`w-11 content-md:w-12`), uniform padding and a smaller glyph
+ * below md. Reproducing that on a `size="default"` button would mean four
+ * `max-md:` overrides fighting the lib's cva variants; letting each variant render
+ * itself and hiding one in CSS keeps both exactly as the design system defines them.
+ * Only one is ever visible, and neither is interactive while hidden (`display: none`
+ * removes it from the tab order).
+ */
+export function DeviceTagsFilterButton({ onClick }: { onClick: () => void }) {
+  return (
+    <>
+      <Button
+        variant="outline"
+        onClick={onClick}
+        leftIcon={<Filter02Icon className="text-ods-text-secondary" />}
+        className="hidden shrink-0 content-md:inline-flex"
+      >
+        Device Tags
+      </Button>
+      <Button
+        variant="outline"
+        size="icon"
+        aria-label="Device Tags"
+        onClick={onClick}
+        // Primary, not secondary: below md the funnel IS the button, there is no
+        // label beside it to carry the meaning, so it reads as the control itself
+        // rather than as decoration next to one. Same as every other mobile filter
+        // trigger in the app.
+        leftIcon={<Filter02Icon className="text-ods-text-primary" />}
+        className="shrink-0 content-md:hidden"
+      />
+    </>
+  );
+}

package/src/components/features/devices/device-type-icon.tsx

@@ -0,0 +1,29 @@
+import type React from 'react';
+import { HardDrivesIcon, LaptopIcon, MobilePhoneIcon, MonitorIcon, TabletIcon } from '../../icons-v2-generated';
+
+const DEFAULT_CLASS_NAME = 'w-6 h-6 text-ods-text-secondary';
+
+/**
+ * Returns the icon for a device type (desktop / laptop / server / mobile / tablet),
+ * using the current icons-v2 set. Replaces the deprecated `getDeviceTypeIcon` from
+ * the core library.
+ *
+ * Returns `undefined` for unknown / missing types so the caller can skip rendering.
+ * A row that names a device draws it through `DeviceTypeTile`.
+ */
+export function renderDeviceTypeIcon(type?: string, className: string = DEFAULT_CLASS_NAME): React.ReactNode {
+  switch (type?.toLowerCase()) {
+    case 'desktop':
+      return <MonitorIcon className={className} />;
+    case 'laptop':
+      return <LaptopIcon className={className} />;
+    case 'server':
+      return <HardDrivesIcon className={className} />;
+    case 'mobile':
+      return <MobilePhoneIcon className={className} />;
+    case 'tablet':
+      return <TabletIcon className={className} />;
+    default:
+      return undefined;
+  }
+}

package/src/components/features/devices/device-type-tile.tsx

@@ -0,0 +1,17 @@
+import { MonitorIcon } from '../../icons-v2-generated';
+import { renderDeviceTypeIcon } from './device-type-icon';
+
+const ICON_CLASS = 'size-4 text-ods-text-secondary';
+
+/**
+ * A device's type icon in its 32px tile, the leading mark of every row that
+ * names a device. Card-filled, so it keeps its edge on any row ground; an
+ * unknown type draws the monitor rather than an empty tile.
+ */
+export function DeviceTypeTile({ type }: { type: string | null | undefined }) {
+  return (
+    <span className="flex size-8 shrink-0 items-center justify-center rounded-[6px] border border-ods-border bg-ods-card">
+      {renderDeviceTypeIcon(type ?? undefined, ICON_CLASS) ?? <MonitorIcon className={ICON_CLASS} />}
+    </span>
+  );
+}

package/src/components/features/devices/devices-filter-toolbar.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import type { ComponentProps, Ref } from 'react';
+import { cn } from '../../../utils/cn';
+import { FilterModal, TagSearchInput, type TagSearchOption } from '../../ui';
+import { DeviceTagsFilterButton } from './device-tags-filter-button';
+
+type FilterModalProps = ComponentProps<typeof FilterModal>;
+
+export interface DevicesFilterToolbarProps {
+  /** Search input, current value (debounce/URL sync owned by the parent). */
+  searchValue: string;
+  onSearchChange: (value: string) => void;
+  /** Already-selected tag chips rendered inside the search input. */
+  tags: TagSearchOption<string>[];
+  onTagRemove: (value: string) => void;
+  onClearAll: () => void;
+  onSubmit: (value: string) => void;
+
+  /** Open the Device Tags modal. */
+  onOpenFilterModal: () => void;
+
+  /** FilterModal state, proxied straight through. */
+  isFilterModalOpen: boolean;
+  onCloseFilterModal: () => void;
+  filterGroups: FilterModalProps['filterGroups'];
+  onFilterChange: FilterModalProps['onFilterChange'];
+  currentFilters?: FilterModalProps['currentFilters'];
+  tagFilterKeys: FilterModalProps['tagFilterKeys'];
+  selectedTags: FilterModalProps['selectedTags'];
+  onTagsChange: FilterModalProps['onTagsChange'];
+  isLoading?: boolean;
+
+  /**
+   * When true (default), pins the toolbar at the top with the same negative-margin
+   * bleed used by `DevicesPanel` (so the search row's background covers the
+   * `PageLayout` padding). Pass `false` when mounting inside a container that
+   * shouldn't bleed (e.g. a modal).
+   */
+  sticky?: boolean;
+
+  /**
+   * Attach to the pinned row so a caller can measure it, its height is what the
+   * sticky table header parks below, and it CHANGES as the tag-chip row appears
+   * and collapses. See `useStickyToolbar`.
+   */
+  toolbarRef?: Ref<HTMLDivElement>;
+}
+
+/**
+ * Search bar + "Device Tags" button + FilterModal. Pure presentation ,
+ * all state (search value, modal open/close, filter options) is owned by
+ * the parent. Reused by `DevicesPanel` and (eventually) `DeviceSelector`.
+ */
+export function DevicesFilterToolbar({
+  searchValue,
+  onSearchChange,
+  tags,
+  onTagRemove,
+  onClearAll,
+  onSubmit,
+  onOpenFilterModal,
+  isFilterModalOpen,
+  onCloseFilterModal,
+  filterGroups,
+  onFilterChange,
+  currentFilters,
+  tagFilterKeys,
+  selectedTags,
+  onTagsChange,
+  isLoading,
+  sticky = true,
+  toolbarRef,
+}: DevicesFilterToolbarProps) {
+  return (
+    <>
+      <div
+        ref={toolbarRef}
+        className={cn(
+          'flex items-center gap-[var(--spacing-system-m)]',
+          sticky &&
+            'sticky top-0 z-20 -mx-[var(--spacing-system-l)] -mt-[var(--spacing-system-l)] bg-ods-bg p-[var(--spacing-system-l)]',
+        )}
+      >
+        <div className="min-w-0 flex-1">
+          <TagSearchInput
+            tags={tags}
+            searchValue={searchValue}
+            onSearchChange={onSearchChange}
+            onTagRemove={onTagRemove}
+            onClearAll={onClearAll}
+            onSubmit={onSubmit}
+            placeholder="Search for Devices"
+            addMorePlaceholder="Add More..."
+          />
+        </div>
+        <DeviceTagsFilterButton onClick={onOpenFilterModal} />
+      </div>
+
+      <FilterModal
+        isOpen={isFilterModalOpen}
+        onClose={onCloseFilterModal}
+        filterGroups={filterGroups}
+        onFilterChange={onFilterChange}
+        currentFilters={currentFilters}
+        tagFilterKeys={tagFilterKeys}
+        selectedTags={selectedTags}
+        onTagsChange={onTagsChange}
+        isLoading={isLoading}
+        className="max-w-[600px]"
+      />
+    </>
+  );
+}