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

package/src/components/features/cloud-tenants/tenants-table-columns.ts

@@ -0,0 +1,30 @@
+/** Layout of one column of the tenants list: what the live table and a skeleton of it both read. */
+export interface TenantsTableColumn {
+  id: string;
+  header?: string;
+  /** The column's `meta.width` class. */
+  width: string;
+  hideAt?: 'md' | 'lg' | 'xl' | '2xl';
+  align?: 'right';
+}
+
+/**
+ * Column layout of the tenants list (Figma 1699-8249: Tenant, Customers,
+ * Access, open). Data-only on purpose: the live table and the route skeleton
+ * read the SAME widths, so nothing shifts when the rows arrive, and a skeleton
+ * never imports the table's cell renderers.
+ */
+export const TENANT_COLUMNS = {
+  tenant: { id: 'tenant', header: 'Tenant', width: 'flex-1 min-w-0' },
+  customer: { id: 'customer', header: 'Customers', width: 'w-[220px] content-lg:w-[340px]', hideAt: 'md' },
+  access: { id: 'access', header: 'Access', width: 'w-[200px] content-lg:w-[216px]' },
+  open: { id: 'open', width: 'w-12 shrink-0 flex-none', hideAt: 'md', align: 'right' },
+} satisfies Record<string, TenantsTableColumn>;
+
+/** Render order of the standalone list. */
+export const TENANTS_TABLE_COLUMNS: readonly TenantsTableColumn[] = [
+  TENANT_COLUMNS.tenant,
+  TENANT_COLUMNS.customer,
+  TENANT_COLUMNS.access,
+  TENANT_COLUMNS.open,
+];

package/src/components/features/cloud-tenants/tenants-table-view.tsx

@@ -0,0 +1,142 @@
+'use client';
+
+import { useMemo } from 'react';
+import { cn } from '../../../utils/cn';
+import { openInNewTab } from '../../../utils/open-in-new-tab';
+import { ArrowRightUpIcon } from '../../icons-v2-generated/arrows/arrow-right-up-icon';
+import { Button } from '../../ui/button';
+import { type ColumnDef, DataTable, type Row, useDataTable } from '../../ui/data-table';
+import { TenantAccessCell } from './tenant-access-cell';
+import { TenantCell } from './tenant-cell';
+import { TenantCustomerCell } from './tenant-customer-cell';
+import type { TenantRow } from './tenant-row';
+import { TENANT_COLUMNS, type TenantsTableColumn } from './tenants-table-columns';
+
+const getRowId = (row: TenantRow) => row.id;
+
+const columnMeta = ({ width, hideAt, align }: TenantsTableColumn) => ({ width, hideAt, align });
+
+/**
+ * Click handler that opens `href` in a new tab. The row is itself the details
+ * link and an `<a>` cannot be nested in an `<a>`, so the button opens it by script.
+ */
+export interface TenantsTableViewProps {
+  rows: TenantRow[];
+  /** Where a row leads: the row is a link to it, and its last cell opens it in a new tab. */
+  getHref: (row: TenantRow) => string;
+  /** The search the rows answer; named by the "no match" message. */
+  search?: string;
+  /** The rows on screen are the previous result of a search still loading: they dim. */
+  isPending?: boolean;
+  /** All matching tenants, loaded or not. Default: the rows given. */
+  totalCount?: number;
+  stickyHeaderOffset?: string;
+  skeletonRows?: number;
+  hasNextPage?: boolean;
+  isFetchingNextPage?: boolean;
+  onLoadMore?: () => void;
+  /** The clock "Last read" is relative to. Default: the moment of the render. */
+  now?: Date;
+}
+
+/** The tenants list: tenant, customer, access state and a way into each tenant's details. */
+export function TenantsTableView({
+  rows,
+  getHref,
+  search = '',
+  isPending = false,
+  totalCount,
+  stickyHeaderOffset,
+  skeletonRows = 20,
+  hasNextPage = false,
+  isFetchingNextPage = false,
+  onLoadMore,
+  now,
+}: TenantsTableViewProps) {
+  const columns = useMemo<ColumnDef<TenantRow>[]>(
+    () => [
+      {
+        id: TENANT_COLUMNS.tenant.id,
+        header: TENANT_COLUMNS.tenant.header,
+        cell: ({ row }: { row: Row<TenantRow> }) => (
+          <TenantCell provider={row.original.provider} name={row.original.name} domain={row.original.domain} />
+        ),
+        enableSorting: false,
+        meta: columnMeta(TENANT_COLUMNS.tenant),
+      },
+      {
+        id: TENANT_COLUMNS.customer.id,
+        header: TENANT_COLUMNS.customer.header,
+        cell: ({ row }: { row: Row<TenantRow> }) => (
+          <TenantCustomerCell
+            name={row.original.customer.name}
+            imageUrl={row.original.customer.imageUrl}
+            userCount={row.original.userCount}
+          />
+        ),
+        enableSorting: false,
+        meta: columnMeta(TENANT_COLUMNS.customer),
+      },
+      {
+        id: TENANT_COLUMNS.access.id,
+        header: TENANT_COLUMNS.access.header,
+        cell: ({ row }: { row: Row<TenantRow> }) => (
+          <TenantAccessCell accessState={row.original.accessState} lastReadAt={row.original.lastReadAt} now={now} />
+        ),
+        enableSorting: false,
+        meta: columnMeta(TENANT_COLUMNS.access),
+      },
+      {
+        id: TENANT_COLUMNS.open.id,
+        cell: ({ row }: { row: Row<TenantRow> }) => (
+          // The row itself is the details link; a nested `<a>` is invalid, so this opens the same href.
+          <div data-no-row-click className="pointer-events-auto flex items-center justify-end">
+            <Button
+              onClick={openInNewTab(getHref(row.original))}
+              variant="outline"
+              size="icon"
+              leftIcon={<ArrowRightUpIcon className="h-5 w-5" />}
+              aria-label={`Open ${row.original.name} in new tab`}
+              className="bg-ods-card"
+            />
+          </div>
+        ),
+        enableSorting: false,
+        meta: columnMeta(TENANT_COLUMNS.open),
+      },
+    ],
+    [getHref, now],
+  );
+
+  const table = useDataTable<TenantRow>({ data: rows, columns, getRowId, enableSorting: false });
+
+  return (
+    // Dim, don't unmount, the stale rows while a deferred search refetches.
+    <div className={cn('transition-opacity duration-200', isPending && 'opacity-60')}>
+      <DataTable table={table}>
+        <DataTable.Header
+          stickyHeader={stickyHeaderOffset !== undefined}
+          stickyHeaderOffset={stickyHeaderOffset}
+          rightSlot={<DataTable.RowCount itemName="result" totalCount={totalCount ?? rows.length} />}
+        />
+        <DataTable.Body
+          skeletonRows={skeletonRows}
+          emptyState={{
+            title: 'No tenants match',
+            description: `Nothing matches "${search}". Try a different name, domain or customer.`,
+          }}
+          rowClassName="mb-[var(--spacing-system-xxs)]"
+          rowHref={getHref}
+        />
+        {rows.length > 0 && onLoadMore && (
+          <DataTable.InfiniteFooter
+            hasNextPage={hasNextPage}
+            isFetchingNextPage={isFetchingNextPage}
+            onLoadMore={onLoadMore}
+            skeletonRows={2}
+          />
+        )}
+      </DataTable>
+    </div>
+  );
+}

package/src/components/features/devices/device-last-online.ts

@@ -0,0 +1,6 @@
+import { formatRelativeTime } from '../../../utils/date-utils';
+
+/** "Last Online: 5m ago": the line under a device's name wherever a row names a device; "Last Online: , " when never seen. */
+export function formatLastOnline(lastSeen: string | Date | null | undefined): string {
+  return `Last Online: ${lastSeen ? formatRelativeTime(lastSeen) : '—'}`;
+}

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

@@ -0,0 +1,51 @@
+/**
+ * The name fields a device source hands to `getDeviceName`.
+ *
+ * `nickname` is a required key on purpose. The two agent-reported names were
+ * selected by every device operation long before the user-defined one existed,
+ * so the field an operation forgets is `nickname`, and with an optional key
+ * that operation would compile and quietly render the hostname. That is the
+ * silent-fallback trap the fragment ladder in `src/graphql/devices/` was built
+ * to close, so the sink closes it too: a source may say its nickname is null or
+ * undefined, but it has to say so.
+ */
+export interface DeviceNameSource {
+  nickname: string | null | undefined;
+  displayName?: string | null;
+  hostname?: string | null;
+}
+
+/**
+ * Single source of truth for a device's display name.
+ *
+ * The name comes from GraphQL only: the user-defined `nickname` when set,
+ * then `displayName`, then `hostname`. Nothing else stands in for a registry
+ * device's name (description, machineId, deviceId, Fleet display_name, …) ,
+ * those diverge across screens. A caller that renders something which is not
+ * a registry device (a Fleet host with no device record, a log row whose device
+ * is gone) appends its own identifier after the empty string it gets back.
+ */
+export function getDeviceName(device?: DeviceNameSource | null): string {
+  return device?.nickname || device?.displayName || device?.hostname || '';
+}
+
+/**
+ * Whether a client-side device list finds `device` by `search`: through the
+ * name it renders under, or through its hostname.
+ *
+ * Hostname stays a match even when a nickname is set, on purpose. The server's
+ * `devices(search:)` matches hostname regardless of nickname (alongside ip,
+ * serial, manufacturer, model), and a list that filters what it already
+ * loaded must not be stricter than the page it stands in for, a device an
+ * admin knows by hostname from Fleet or MeshCentral stays findable after
+ * someone gives it a nickname.
+ *
+ * Case-insensitive substring, like the server. Blank search matches everything.
+ */
+export function matchesDeviceName(device?: DeviceNameSource | null, search = ''): boolean {
+  const needle = search.trim().toLowerCase();
+  if (!needle) return true;
+  return (
+    getDeviceName(device).toLowerCase().includes(needle) || (device?.hostname ?? '').toLowerCase().includes(needle)
+  );
+}

package/src/components/features/devices/device-selector/device-selection-mode-radio.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import { RadioGroupBlock, type RadioGroupBlockOption, Tag } from '../../../ui';
+import { useDevicesViewConfig } from '../devices-view-config';
+import type { DeviceSelectionMode } from './device-selector.types';
+
+/**
+ * The two assignment modes (design 460:71430).
+ *
+ * The copy stays generic ("this selection") rather than the design's "this
+ * script schedule": this block also renders on the monitoring query and policy
+ * pages, where naming a schedule would simply be wrong.
+ */
+const SPECIFIC_MODE_OPTION: RadioGroupBlockOption = {
+  value: 'specific',
+  label: 'Select Specific Devices',
+  description: 'Choose individual devices to include in this selection',
+};
+
+const CRITERIA_MODE_DESCRIPTION =
+  'Automatically include all devices (current and future) that match your defined criteria';
+
+/**
+ * "By criteria" is only offered where a consumer can actually store a rule ,
+ * i.e. where `value` / `onChange` are wired up. Everywhere else it keeps the
+ * design's "Coming Soon" treatment: a tag rather than a dimmed row is how the
+ * design says so, and `disabled` is what keeps it unselectable and out of the
+ * tab order. In the mobile shell that row is dropped entirely, which leaves
+ * this list with a single option and the block renders nothing at all.
+ */
+const SELECTION_MODE_OPTIONS: RadioGroupBlockOption[] = [
+  SPECIFIC_MODE_OPTION,
+  {
+    value: 'criteria',
+    label: 'Select Devices by Criteria',
+    description: CRITERIA_MODE_DESCRIPTION,
+    disabled: true,
+    trailing: <Tag label="Coming Soon" variant="grey" />,
+  },
+];
+
+const SELECTION_MODE_OPTIONS_ENABLED: RadioGroupBlockOption[] = [
+  SPECIFIC_MODE_OPTION,
+  {
+    value: 'criteria',
+    label: 'Select Devices by Criteria',
+    description: CRITERIA_MODE_DESCRIPTION,
+  },
+];
+
+export interface DeviceSelectionModeRadioProps {
+  /**
+   * The chosen mode. `''` is a real value here: the block with NOTHING marked,
+   * for a page whose stored mode has not arrived yet, marking one would be a
+   * guess at the answer being loaded. Omit the prop entirely for the
+   * uncontrolled, criteria-disabled block.
+   */
+  value?: DeviceSelectionMode | '';
+  onChange?: (mode: DeviceSelectionMode) => void;
+  disabled?: boolean;
+}
+
+/**
+ * The mode block above a device picker.
+ *
+ * Its own component, and not just markup inside `DeviceSelector`, because a
+ * page whose two modes are separate data islands has to keep it OUTSIDE the
+ * subtree that swaps: mounted inside, the radio unmounts and remounts with the
+ * content, restarting its own transitions, the switch you just clicked blinks.
+ * Such a page renders this directly and passes `showSelectionModeRadio={false}`.
+ *
+ * Renders nothing when fewer than two modes survive, which is the mobile
+ * shell's uncontrolled case, where the only other mode is "Coming Soon".
+ */
+export function DeviceSelectionModeRadio({ value, onChange, disabled }: DeviceSelectionModeRadioProps) {
+  // Controlled whenever the consumer PASSES a value, including `''`, which is a
+  // consumer that owns the answer but is still waiting for it. Only an omitted
+  // prop means "decorative", which is what keeps the old criteria-disabled
+  // block for the pages that cannot store a rule.
+  const isControlled = value !== undefined;
+  const { isMobileShell: isMobile = false } = useDevicesViewConfig();
+
+  const allOptions = isControlled ? SELECTION_MODE_OPTIONS_ENABLED : SELECTION_MODE_OPTIONS;
+  // A disabled option is one nobody can pick, on a phone it is a row of screen
+  // spent announcing a feature. Dropping it costs nothing there, and it leaves
+  // the controlled block (where criteria IS selectable) untouched.
+  const options = isMobile ? allOptions.filter(option => !option.disabled) : allOptions;
+
+  // One option is not a choice. The mode that survived is what the picker below
+  // already does, so the group would only be asking a question with a single
+  // answer.
+  if (options.length < 2) return null;
+
+  return (
+    <RadioGroupBlock
+      name="selectionMode"
+      variant="grouped"
+      {...(isControlled ? { value, onValueChange: onChange } : { defaultValue: 'specific' })}
+      disabled={disabled}
+      options={options}
+      // Design 460:71430 rows are 68px, a 24px title over a 20px description
+      // with 12px above and below. The grouped variant pads `py-xs` (8px on
+      // desktop) by default, which would come out 8px short.
+      itemClassName="py-[var(--spacing-system-sf)]"
+    />
+  );
+}

package/src/components/features/devices/device-selector/device-selector-skeleton.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { DeviceSelector } from './device-selector';
+import type { DeviceSelectorProps } from './device-selector.types';
+
+const NO_DEVICES: never[] = [];
+
+/**
+ * The props that decide the picker's SHAPE. They are forwarded, not hardcoded:
+ * whichever the caller hands its real `DeviceSelector` it must hand this one too,
+ * or the two disagree on how tall the block is.
+ */
+type DeviceSelectorSkeletonProps = Pick<DeviceSelectorProps, 'showSelectionModeRadio' | 'singleSelect' | 'hideColumns'>;
+
+/**
+ * Suspense fallback for a `DeviceSelector` whose devices come from a suspending
+ * Relay query.
+ *
+ * Renders the REAL selector in `loading` mode rather than an approximation, so
+ * the column set, row height and empty frame come from the actual component and
+ * can't drift from what replaces it. Same approach as `DevicesPanelSkeleton`.
+ *
+ * Locked with `disabled`, the same rule `SchedulePickerSkeleton` states, and for
+ * the same reason: `disabled` blocks every interaction and leaves the picker's
+ * SHAPE alone. A lock that also hid the selection-mode radio and the Available /
+ * Selected tab strip left this fallback two blocks shorter than the picker it
+ * stands in for, and everything below it jumped down the moment the devices
+ * landed.
+ */
+export function DeviceSelectorSkeleton(props: DeviceSelectorSkeletonProps) {
+  return <DeviceSelector {...props} devices={NO_DEVICES} loading disabled />;
+}