@flamingo-stack/openframe-frontend-core 0.0.486 → 0.0.487

package/src/components/ui/test-run.tsx

@@ -0,0 +1,282 @@
+'use client'
+
+import type { ColumnDef, Row } from '@tanstack/react-table'
+import * as React from 'react'
+import { SearchIcon } from '../icons-v2-generated'
+import { cn } from '../../utils/cn'
+import { formatTime } from '../../utils/format-date'
+import { DataTable } from './data-table'
+import { useDataTable } from './data-table/use-data-table'
+import { NoData } from './no-data'
+import type { QueryResultRow } from './query-report-table'
+import { ScrollShadow } from './scroll-fade'
+
+/*
+ * Live test-run building blocks: the UI (timing stats, one-row skeleton,
+ * results table) and the run state machine for "run a query/script somewhere
+ * and stream tabular results back" flows. The transport is NOT part of this
+ * module — consumers own campaign creation (Fleet live queries, script runs,
+ * ...) and pass a `TestRunCampaignState`-shaped object into
+ * `useTestRunState`.
+ */
+
+export function formatTestRunDuration(ms: number): string {
+  const totalSeconds = Math.floor(ms / 1000)
+  const hours = Math.floor(totalSeconds / 3600)
+  const minutes = Math.floor((totalSeconds % 3600) / 60)
+  const seconds = totalSeconds % 60
+  return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
+}
+
+const RESULT_COLUMN_MIN_WIDTH = 176
+const SKELETON_COLUMNS = 6
+
+/** Column-bar skeleton (header cells + one card row): fixed 160px columns on
+    every breakpoint, scrolling horizontally when they do not fit. Bars use
+    bg-ods-bg-surface like the table skeletons — the bg-ods-skeleton token is
+    the same color as the card background and would be invisible on the row. */
+export function TestResultsSkeleton() {
+  return (
+    <ScrollShadow axis="horizontal">
+      {/* No gap between the header bars and the row card — the real table's
+          header and body sit flush. */}
+      <div className="flex w-max min-w-full flex-col">
+        <div className="flex items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)]">
+          {Array.from({ length: SKELETON_COLUMNS }).map((_, i) => (
+            <div key={`skeleton-header-${i}`} className="flex h-12 w-[160px] shrink-0 items-center">
+              <div className="h-4 w-3/4 rounded-sm bg-ods-bg-surface animate-pulse" />
+            </div>
+          ))}
+        </div>
+        <div className="rounded-[6px] border border-ods-border bg-ods-card overflow-hidden animate-pulse">
+          {/* Same INNER row heights as the DataTable (66/78px + the 1px card
+              border on each side = 68/80px total, per design). */}
+          <div className="flex h-[66px] md:h-[78px] items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)]">
+            {Array.from({ length: SKELETON_COLUMNS }).map((_, i) => (
+              <div key={`skeleton-cell-${i}`} className="w-[160px] shrink-0">
+                <div className="h-5 w-3/4 rounded-sm bg-ods-bg-surface" />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </ScrollShadow>
+  )
+}
+
+/**
+ * Live test results rendered with the core DataTable (identical header,
+ * skeleton, and card-row styling to the standard tables). Columns are derived
+ * from the keys of the returned rows; wide result sets scroll horizontally.
+ * Unlike the default tables, headers stay visible on every breakpoint.
+ */
+export function TestResultsTable({ rows, loading }: { rows: QueryResultRow[]; loading: boolean }) {
+  const columnKeys = React.useMemo(() => (rows.length > 0 ? Object.keys(rows[0]) : []), [rows])
+
+  const columns = React.useMemo<ColumnDef<QueryResultRow>[]>(() => {
+    return columnKeys.map(key => ({
+      id: key,
+      accessorFn: (row: QueryResultRow) => row[key],
+      header: key,
+      enableSorting: false,
+      cell: ({ row }: { row: Row<QueryResultRow> }) => {
+        const value = row.original[key]
+        return (
+          <span className="text-h4 text-ods-text-primary truncate">
+            {value === null || value === undefined ? '-' : String(value)}
+          </span>
+        )
+      },
+      meta: {
+        width: 'flex-1 min-w-[176px]',
+        // Show headers on every breakpoint; headerClassName sizes the cells
+        // below lg where meta.width is not applied.
+        alwaysShowHeader: true,
+        headerClassName: 'flex-1 min-w-[176px]',
+      },
+    }))
+  }, [columnKeys])
+
+  const table = useDataTable<QueryResultRow>({
+    data: rows,
+    columns,
+    getRowId: (_row: QueryResultRow, index: number) => String(index),
+    enableSorting: false,
+  })
+
+  if (loading) {
+    return <TestResultsSkeleton />
+  }
+
+  return (
+    <ScrollShadow axis="horizontal">
+      <div style={{ minWidth: Math.max(1, columnKeys.length) * RESULT_COLUMN_MIN_WIDTH }}>
+        <DataTable table={table}>
+          {/* "flex" overrides the header's default "hidden md:flex" so the
+              headers render on mobile too. */}
+          <DataTable.Header className="flex flex-col" />
+          <DataTable.Body loading={false} />
+        </DataTable>
+      </div>
+    </ScrollShadow>
+  )
+}
+
+export interface TestRunResultsProps {
+  isActive: boolean
+  displayRows: QueryResultRow[]
+  firstError: string | null
+  className?: string
+}
+
+/** Error line + empty state + result table for a finished/running test run. */
+export function TestRunResults({ isActive, displayRows, firstError, className }: TestRunResultsProps) {
+  return (
+    <div className={cn('flex flex-col gap-[var(--spacing-system-xsf)]', className)}>
+      {firstError && (
+        <p role="alert" className="text-h6 text-ods-error">
+          {firstError}
+        </p>
+      )}
+      {!isActive && displayRows.length === 0 ? (
+        // With zero rows the error line alone explains the outcome; a
+        // "No results returned" empty state next to it would mislead.
+        // Otherwise: fixed-height empty state matching the 1-row
+        // skeleton/result height (48px header + 80px row, no gap) so the
+        // block does not jump between loading/result/empty.
+        !firstError && (
+          <NoData icon={<SearchIcon />} title="No results returned" className="h-[128px] justify-center !py-0" />
+        )
+      ) : (
+        <TestResultsTable rows={displayRows} loading={isActive && displayRows.length === 0} />
+      )}
+    </div>
+  )
+}
+
+/** Started / Duration stat cell shown in a test-run controls row. */
+export function TimingStat({ value, label, className }: { value: string; label: string; className?: string }) {
+  return (
+    <div className={cn('flex flex-col justify-center min-w-0', className)}>
+      <span className="text-h4 text-ods-text-secondary truncate">{value}</span>
+      <span className="text-h6 text-ods-text-secondary truncate">{label}</span>
+    </div>
+  )
+}
+
+/**
+ * The transport-side contract `useTestRunState` observes. Matches the shape
+ * of a live-campaign hook (e.g. Fleet live queries in OpenFrame) without
+ * depending on any concrete backend.
+ */
+export interface TestRunCampaignState {
+  isRunning: boolean
+  startedAt: Date | null
+  /** '' before the first run, then 'pending' → 'finished'. */
+  campaignStatus: string
+  results: QueryResultRow[]
+  errors: Array<{ error: string }>
+  stopCampaign: () => void
+}
+
+/**
+ * State machine for one live test run: wraps a campaign-shaped object with
+ * the run/stop/reset flow, elapsed-duration ticking, and the display flags
+ * test panels render from. The consumer starts the actual campaign inside the
+ * `start` callback passed to `run`:
+ *
+ * ```tsx
+ * const campaign = useLiveCampaign()               // app-owned transport
+ * const test = useTestRunState(campaign)
+ * const handleRun = () => test.run(() => campaign.startCampaign(sql, [hostId]))
+ * ```
+ */
+export function useTestRunState(campaign: TestRunCampaignState) {
+  // Sticky "a run has been started" flag: campaignStatus resets to '' for a
+  // moment when a new run starts, which would flash the initial Run button
+  // between "Test Again" clicks without it.
+  const [hasRun, setHasRun] = React.useState(false)
+  // True while the campaign is being created (before isRunning flips) —
+  // without it the button would flash "Test Again" right after a Run click.
+  const [isStarting, setIsStarting] = React.useState(false)
+  const [durationMs, setDurationMs] = React.useState(0)
+
+  React.useEffect(() => {
+    if (!campaign.startedAt || !campaign.isRunning) {
+      if (campaign.startedAt && !campaign.isRunning) {
+        setDurationMs(Date.now() - campaign.startedAt.getTime())
+      }
+      return
+    }
+    setDurationMs(Date.now() - campaign.startedAt.getTime())
+    const interval = setInterval(() => {
+      setDurationMs(Date.now() - campaign.startedAt!.getTime())
+    }, 1000)
+    return () => clearInterval(interval)
+  }, [campaign.startedAt, campaign.isRunning])
+
+  const run = React.useCallback(async (start: () => Promise<unknown>) => {
+    setHasRun(true)
+    setDurationMs(0)
+    setIsStarting(true)
+    try {
+      await start()
+    } finally {
+      setIsStarting(false)
+    }
+  }, [])
+
+  // Stop/reset also drop isStarting so the Stop button doesn't stay "active"
+  // for the moment between the user's click and the pending start promise
+  // settling (its finally clears the flag again — harmless).
+  const stop = React.useCallback(() => {
+    setIsStarting(false)
+    campaign.stopCampaign()
+  }, [campaign.stopCampaign])
+
+  /** Stop anything in flight and clear the run state (panel close/cancel). */
+  const reset = React.useCallback(() => {
+    setIsStarting(false)
+    campaign.stopCampaign()
+    setDurationMs(0)
+    setHasRun(false)
+  }, [campaign.stopCampaign])
+
+  const isActive = campaign.isRunning || isStarting
+  const isFinished = campaign.campaignStatus === 'finished'
+  const showResults = isActive || (hasRun && isFinished)
+
+  const firstError = isFinished && campaign.errors.length > 0 ? campaign.errors[0].error : null
+
+  // Started/Duration show zeros until the current run's timing is real:
+  // hasRun=false after a reset, and campaignStatus resets while the next
+  // run is being created, so stale values never linger on screen.
+  const showTiming = hasRun && campaign.startedAt !== null && (campaign.isRunning || isFinished)
+
+  const startedLabel = showTiming && campaign.startedAt ? formatTime(campaign.startedAt) : '00:00 PM'
+  const durationLabel = showTiming ? formatTestRunDuration(durationMs) : '00:00:00'
+
+  // Humanize raw result keys for the table headers (snake_case -> spaced
+  // words); the row data itself is shown exactly as returned.
+  const displayRows = React.useMemo<QueryResultRow[]>(
+    () =>
+      campaign.results.map(row =>
+        Object.fromEntries(Object.entries(row).map(([key, value]) => [key.replace(/_/g, ' '), value])),
+      ),
+    [campaign.results],
+  )
+
+  return {
+    hasRun,
+    isActive,
+    isFinished,
+    showResults,
+    firstError,
+    startedLabel,
+    durationLabel,
+    displayRows,
+    run,
+    stop,
+    reset,
+  }
+}

package/src/stories/SearchableSelect.stories.tsx

@@ -0,0 +1,139 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { useState } from 'react';
+import { SearchableSelect, type SearchableSelectProps } from '../components/ui/searchable-select';
+import { SquareAvatar } from '../components/ui/square-avatar';
+import { MonitorIcon, UserPlusIcon } from '../components/icons-v2-generated';
+
+const meta = {
+  title: 'UI/SearchableSelect',
+  component: SearchableSelect,
+  argTypes: {
+    align: {
+      control: 'select',
+      options: ['start', 'center', 'end'],
+    },
+    isLoading: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Select-style dropdown whose first item is a search field filtering the option list - ' +
+          'the ticket assignee "Search users..." pattern generalized for any entity. The default ' +
+          'trigger matches SelectTrigger; pass a custom trigger for icon-button use cases ' +
+          '(AssigneeDropdown compact is built on this component).',
+      },
+    },
+  },
+} satisfies Meta<typeof SearchableSelect>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const DEVICES = [
+  { value: '1', label: "John's MacBook Pro" },
+  { value: '2', label: 'Design-Studio-iMac' },
+  { value: '3', label: 'Front-Desk-PC' },
+  { value: '4', label: 'QA-Windows-11' },
+  { value: '5', label: 'Server-Room-Linux' },
+  { value: '6', label: "Olivia's ThinkPad" },
+  { value: '7', label: 'Warehouse-Scanner-01' },
+  { value: '8', label: 'Reception-Tablet' },
+];
+
+function ControlledSelect(props: Partial<SearchableSelectProps>) {
+  const [value, setValue] = useState<string | null>(props.value ?? null);
+  return (
+    <SearchableSelect
+      options={DEVICES}
+      placeholder="Select Device"
+      searchPlaceholder="Search for Device"
+      emptyText="No devices found"
+      {...props}
+      value={value}
+      onValueChange={setValue}
+    />
+  );
+}
+
+/** Default select-like trigger; the search input is the first dropdown item. */
+export const DeviceSelect: Story = {
+  args: {
+    options: DEVICES,
+    onValueChange: () => {},
+    placeholder: 'Select Device',
+    searchPlaceholder: 'Search for Device',
+    emptyText: 'No devices found',
+  },
+  render: args => (
+    <div className="w-[320px] bg-ods-bg p-[var(--spacing-system-mf)]">
+      <ControlledSelect {...args} />
+    </div>
+  ),
+};
+
+/** Options can carry a leading icon/avatar node. */
+export const WithOptionIcons: Story = {
+  args: {
+    options: DEVICES.map(d => ({
+      ...d,
+      icon: <MonitorIcon className="size-5 shrink-0 text-ods-text-secondary" />,
+    })),
+    onValueChange: () => {},
+    placeholder: 'Select Device',
+    searchPlaceholder: 'Search for Device',
+    emptyText: 'No devices found',
+  },
+  render: args => (
+    <div className="w-[320px] bg-ods-bg p-[var(--spacing-system-mf)]">
+      <ControlledSelect {...args} />
+    </div>
+  ),
+};
+
+/** Custom icon-button trigger - the AssigneeDropdown compact use case. */
+export const CustomTrigger: Story = {
+  args: {
+    options: ['Roman Smith', 'Mike Johnson', 'Olivia Chen', 'Ava Martinez'].map((name, i) => ({
+      value: String(i + 1),
+      label: name,
+      icon: <SquareAvatar alt={name} fallback={name} size="sm" variant="round" className="h-6 w-6 shrink-0" />,
+    })),
+    onValueChange: () => {},
+    searchPlaceholder: 'Search users...',
+    emptyText: 'No users found',
+    align: 'end',
+    contentClassName: 'w-72',
+    trigger: (
+      <button
+        type="button"
+        aria-label="Assign user"
+        className="size-8 rounded-full border border-ods-border flex items-center justify-center shrink-0 text-ods-text-secondary hover:text-ods-accent hover:border-ods-accent transition-colors"
+      >
+        <UserPlusIcon className="size-4" />
+      </button>
+    ),
+  },
+  render: args => (
+    <div className="flex w-[320px] justify-end bg-ods-bg p-[var(--spacing-system-mf)]">
+      <ControlledSelect {...args} />
+    </div>
+  ),
+};
+
+/** Loading state shown inside the dropdown. */
+export const Loading: Story = {
+  args: {
+    options: [],
+    onValueChange: () => {},
+    placeholder: 'Select Device',
+    searchPlaceholder: 'Search for Device',
+    isLoading: true,
+  },
+  render: args => (
+    <div className="w-[320px] bg-ods-bg p-[var(--spacing-system-mf)]">
+      <ControlledSelect {...args} />
+    </div>
+  ),
+};

package/src/stories/TestRun.stories.tsx

@@ -0,0 +1,118 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { TestResultsSkeleton, TestRunResults, TimingStat } from '../components/ui/test-run';
+
+const meta = {
+  title: 'UI/TestRun',
+  component: TestRunResults,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Building blocks for live test-run panels ("run a query somewhere, stream tabular results back"): ' +
+          'timing stats, a one-row column skeleton, and a results table with always-visible headers and ' +
+          'horizontal scroll fades. Pair with useTestRunState, which wraps an app-owned campaign ' +
+          '(e.g. a Fleet live query hook) with the run/stop/reset state machine.',
+      },
+    },
+  },
+} satisfies Meta<typeof TestRunResults>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const RESULT_ROWS = [
+  {
+    'host display name': 'workstation-01',
+    pid: '1234',
+    name: 'chrome',
+    path: '/Applications/Google Chrome.app',
+    state: 'R',
+    uid: '501',
+    'resident size': '245760000',
+    threads: '42',
+  },
+  {
+    'host display name': 'workstation-01',
+    pid: '5678',
+    name: 'node',
+    path: '/usr/local/bin/node',
+    state: 'S',
+    uid: '501',
+    'resident size': '98304000',
+    threads: '12',
+  },
+];
+
+/** Finished run with rows: DataTable styling, headers on all breakpoints. */
+export const WithResults: Story = {
+  args: {
+    isActive: false,
+    displayRows: RESULT_ROWS,
+    firstError: null,
+  },
+  render: args => (
+    <div className="max-w-[720px] bg-ods-bg p-[var(--spacing-system-mf)]">
+      <TestRunResults {...args} />
+    </div>
+  ),
+};
+
+/** Running: one-row skeleton with fixed 160px columns. */
+export const Running: Story = {
+  args: {
+    isActive: true,
+    displayRows: [],
+    firstError: null,
+  },
+  render: args => (
+    <div className="max-w-[720px] bg-ods-bg p-[var(--spacing-system-mf)]">
+      <TestRunResults {...args} />
+    </div>
+  ),
+};
+
+/** Finished with zero rows: fixed-height empty state (no layout jump). */
+export const EmptyResult: Story = {
+  args: {
+    isActive: false,
+    displayRows: [],
+    firstError: null,
+  },
+  render: args => (
+    <div className="max-w-[720px] bg-ods-bg p-[var(--spacing-system-mf)]">
+      <TestRunResults {...args} />
+    </div>
+  ),
+};
+
+/** Finished with an error: the alert line replaces the empty state. */
+export const WithError: Story = {
+  args: {
+    isActive: false,
+    displayRows: [],
+    firstError: 'no such table: procesess (near "procesess": syntax error)',
+  },
+  render: args => (
+    <div className="max-w-[720px] bg-ods-bg p-[var(--spacing-system-mf)]">
+      <TestRunResults {...args} />
+    </div>
+  ),
+};
+
+/** Timing cells + standalone skeleton, as composed by app test panels. */
+export const TimingAndSkeleton: Story = {
+  args: {
+    isActive: true,
+    displayRows: [],
+    firstError: null,
+  },
+  render: () => (
+    <div className="flex max-w-[720px] flex-col gap-[var(--spacing-system-m)] bg-ods-bg p-[var(--spacing-system-mf)]">
+      <div className="flex items-center gap-[var(--spacing-system-m)]">
+        <TimingStat value="02:15 PM" label="Started" className="flex-1" />
+        <TimingStat value="00:00:05" label="Duration" className="flex-1" />
+      </div>
+      <TestResultsSkeleton />
+    </div>
+  ),
+};