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

package/src/components/features/remote-session/remote-desktop-view.tsx

@@ -0,0 +1,209 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import {
+  ChatOffIcon,
+  ChatTextIcon,
+  Collapse02Icon,
+  Expand02Icon,
+  MonitorIcon,
+  Settings01Icon,
+} from '../../icons-v2-generated';
+import { PageLayout } from '../../layout/page-layout';
+import { ActionsMenuDropdown, type ActionsMenuGroup } from '../../ui/actions-menu';
+import { Button } from '../../ui/button/button';
+import { Skeleton } from '../../ui/skeleton';
+import { TruncateText } from '../../ui/truncate-text';
+import { RemoteDesktopFullscreenToolbar } from './remote-desktop-fullscreen-toolbar';
+
+/** The page chrome both the view and its skeleton render in. */
+const PAGE_CLASS = 'h-full overflow-hidden px-[var(--spacing-system-l)] pb-[var(--spacing-system-l)]';
+
+const CONTROLS_BAR_CLASS =
+  'flex flex-shrink-0 items-center justify-between gap-[var(--spacing-system-mf)] rounded-md border border-ods-border bg-ods-card px-[var(--spacing-system-mf)] py-[var(--spacing-system-xs)]';
+
+export interface RemoteDesktopViewProps {
+  /** First line of the device header. */
+  deviceName: string;
+  /** The device's customer, on the second line of the header; "Unknown Customer" when absent. */
+  organizationName?: string | null;
+  /** The "Back" control over the header; left out, the page has none (a picture of the page has nowhere to go back to). */
+  onBack?: () => void;
+  /**
+   * The compact chrome over a window-filling screen. The host owns the browser's
+   * fullscreen state and passes it here.
+   */
+  fullscreen?: boolean;
+  onEnterFullscreen: () => void;
+  onExitFullscreen: () => void;
+  /** The display switcher's menu; the switcher is hidden while this is empty (a single display). */
+  displayMenuGroups?: ActionsMenuGroup[];
+  /** The switcher's label, e.g. "Display All" or "Display 2". */
+  currentDisplayLabel: string;
+  actionsMenuGroups: ActionsMenuGroup[];
+  onOpenSettings: () => void;
+  /** Session chat toggle - both omitted when the session has no chat. */
+  chatOpen?: boolean;
+  onToggleChat?: () => void;
+  /**
+   * What fills the screen box: the host's live canvas with its status overlays.
+   * The box is `relative`, so the content positions itself against it, and it
+   * keeps its place in the tree across `fullscreen`, so a canvas a stream is
+   * attached to is never remounted.
+   */
+  screen: ReactNode;
+  /**
+   * The open chat panel, or nothing while it is closed. Rendered beside the
+   * screen, and over it in fullscreen: the host passes the panel in the matching
+   * variant (`side` or `overlay`).
+   */
+  chat?: ReactNode;
+  /** Dialogs the page owns (settings, shortcuts), rendered after the session. */
+  children?: ReactNode;
+}
+
+/**
+ * The remote desktop page: the device header with the session controls, the
+ * screen and the session chat. Everything that talks to the device (the
+ * connection, the stream, input) is the host's, passed in through `screen`.
+ */
+export function RemoteDesktopView({
+  deviceName,
+  organizationName,
+  onBack,
+  fullscreen = false,
+  onEnterFullscreen,
+  onExitFullscreen,
+  displayMenuGroups = [],
+  currentDisplayLabel,
+  actionsMenuGroups,
+  onOpenSettings,
+  chatOpen = false,
+  onToggleChat,
+  screen,
+  chat,
+  children,
+}: RemoteDesktopViewProps) {
+  const controlsBar = (
+    <div className={CONTROLS_BAR_CLASS}>
+      <div className="flex min-w-0 items-center gap-[var(--spacing-system-mf)]">
+        <div className="flex-shrink-0 rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-xsf)]">
+          <MonitorIcon className="h-4 w-4 text-ods-text-primary" />
+        </div>
+        <div className="flex min-w-0 flex-col">
+          <TruncateText>{deviceName}</TruncateText>
+          <TruncateText
+            variant="h6"
+            tone="secondary"
+          >{`Desktop • ${organizationName || 'Unknown Customer'}`}</TruncateText>
+        </div>
+      </div>
+      <div className="flex flex-shrink-0 items-center gap-[var(--spacing-system-xs)]">
+        {displayMenuGroups.length > 0 && (
+          <ActionsMenuDropdown
+            groups={displayMenuGroups}
+            customTrigger={
+              <Button variant="outline" leftIcon={<MonitorIcon className="h-4 w-4 md:h-6 md:w-6" />}>
+                {/* A narrow page keeps the icon and drops the words: the bar never pushes the device's name out. */}
+                <span className="sr-only content-md:not-sr-only">{currentDisplayLabel}</span>
+              </Button>
+            }
+          />
+        )}
+        {onToggleChat && (
+          <Button
+            variant="outline"
+            onClick={onToggleChat}
+            leftIcon={
+              chatOpen ? (
+                <ChatOffIcon className="h-4 w-4 md:h-6 md:w-6" />
+              ) : (
+                <ChatTextIcon className="h-4 w-4 md:h-6 md:w-6" />
+              )
+            }
+          >
+            <span className="sr-only content-md:not-sr-only">{chatOpen ? 'Close Chat' : 'Open Chat'}</span>
+          </Button>
+        )}
+        <ActionsMenuDropdown groups={actionsMenuGroups} triggerAriaLabel="Actions" />
+        <Button
+          variant="outline"
+          size="icon"
+          aria-label="Settings"
+          onClick={onOpenSettings}
+          leftIcon={<Settings01Icon />}
+        />
+        <Button
+          variant="outline"
+          size="icon"
+          aria-label={fullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
+          onClick={fullscreen ? onExitFullscreen : onEnterFullscreen}
+          leftIcon={fullscreen ? <Collapse02Icon /> : <Expand02Icon />}
+        />
+      </div>
+    </div>
+  );
+
+  return (
+    <PageLayout
+      className={PAGE_CLASS}
+      backButton={onBack ? { label: 'Back', onClick: onBack } : undefined}
+      showHeader={!fullscreen}
+    >
+      <div className={fullscreen ? 'fixed inset-0 z-50 flex flex-col bg-black' : 'contents'}>
+        {fullscreen ? (
+          <RemoteDesktopFullscreenToolbar
+            deviceName={deviceName}
+            displayMenuGroups={displayMenuGroups}
+            currentDisplayLabel={currentDisplayLabel}
+            actionsMenuGroups={actionsMenuGroups}
+            onOpenSettings={onOpenSettings}
+            onExitFullscreen={onExitFullscreen}
+            chatOpen={onToggleChat ? chatOpen : undefined}
+            onToggleChat={onToggleChat}
+          />
+        ) : (
+          controlsBar
+        )}
+        {/* One wrapper in both modes: the screen must keep its DOM node across
+            the fullscreen toggle (the host attaches a stream to its canvas once),
+            so the tree shape never changes. The chat keeps ONE place in the tree
+            too, so its draft and scroll survive the toggle: beside the screen as
+            the `side` panel, and in fullscreen the `overlay` panel positions
+            itself over the screen against this wrapper (the screen fills it). */}
+        <div className={`relative flex min-h-0 min-w-0 flex-1 ${fullscreen ? '' : 'gap-[var(--spacing-system-mf)]'}`}>
+          <div className={`relative min-h-0 min-w-0 flex-1 overflow-hidden bg-black ${fullscreen ? '' : 'rounded-lg'}`}>
+            {screen}
+          </div>
+          {chat}
+        </div>
+      </div>
+
+      {children}
+    </PageLayout>
+  );
+}
+
+/** The page while the device is still loading: the header bar as placeholders over an empty screen. */
+export function RemoteDesktopViewSkeleton({ onBack }: Pick<RemoteDesktopViewProps, 'onBack'>) {
+  return (
+    <PageLayout className={PAGE_CLASS} backButton={onBack ? { label: 'Back', onClick: onBack } : undefined}>
+      <div className={CONTROLS_BAR_CLASS}>
+        <div className="flex min-w-0 items-center gap-[var(--spacing-system-mf)]">
+          <Skeleton className="h-9 w-9 flex-shrink-0 rounded-md" />
+          <div className="flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]">
+            <Skeleton className="h-5 w-48" />
+            <Skeleton className="h-4 w-36" />
+          </div>
+        </div>
+        <div className="flex flex-shrink-0 items-center gap-[var(--spacing-system-xs)]">
+          <Skeleton className="h-11 w-11 rounded-lg md:h-12 md:w-12" />
+          <Skeleton className="h-11 w-11 rounded-lg md:h-12 md:w-12" />
+          <Skeleton className="h-11 w-11 rounded-lg md:h-12 md:w-12" />
+        </div>
+      </div>
+
+      <div className="min-h-0 min-w-0 flex-1 rounded-lg bg-black" />
+    </PageLayout>
+  );
+}

package/src/components/features/software/index.ts

@@ -0,0 +1,39 @@
+'use client';
+
+export {
+  PACKAGE_MANAGER_ICON,
+  PACKAGE_MANAGER_LABEL,
+  PACKAGE_MANAGER_OS,
+  PACKAGE_MANAGERS,
+  packageManagerLabel,
+  SOFTWARE_SOURCE_LABEL,
+  type SoftwareSourceKind,
+  type SupportedPackageManager,
+} from './package-managers';
+export {
+  PACKAGE_SEARCH_LABEL,
+  PACKAGE_SEARCH_PLACEHOLDER,
+  PackageSearchFieldPlaceholder,
+} from './package-search-field-placeholder';
+export {
+  SoftwareScheduleFields,
+  type SoftwareScheduleFieldsProps,
+  type SoftwareScheduleOption,
+  type SoftwareScheduleTiming,
+} from './schedule-fields';
+export {
+  SOFTWARE_ACTION_COPY,
+  SOFTWARE_ACTION_DETAIL_TITLE,
+  type SoftwareActionCopy,
+  softwareActionCopy,
+  type SoftwareActionKind,
+} from './software-action-copy';
+export {
+  SoftwareActionForm,
+  type SoftwareActionFormProps,
+  type SoftwareActionFormValues,
+  type SoftwareDeviceScope,
+  type SoftwareRunMode,
+} from './software-action-form';
+export { newSoftwareRow, type SelectedPackage, type SoftwareRow } from './software-row';
+export { type PackageSearchSlotProps, SoftwareRowFields, type SoftwareRowFieldsProps } from './software-row-fields';

package/src/components/features/software/package-managers.ts

@@ -0,0 +1,54 @@
+import type { ComponentType } from 'react';
+import { HomebrewLogoGreyIcon, WingetLogoGreyIcon } from '../../icons-v2-generated';
+
+/**
+ * The package managers the UI offers. Chocolatey is deliberately left out:
+ * the backend still lists `CHOCO`, but the product ships Brew and WinGet only,
+ * so no form offers it.
+ */
+export const PACKAGE_MANAGERS = ['BREW', 'WINGET'] as const;
+
+export type SupportedPackageManager = (typeof PACKAGE_MANAGERS)[number];
+
+export const PACKAGE_MANAGER_LABEL: Record<SupportedPackageManager, string> = {
+  BREW: 'Brew',
+  WINGET: 'WinGet',
+};
+
+/**
+ * Each catalog's brand mark, in the grey (`currentColor`) cut the tool badges use,
+ * so it takes whatever text colour the row it sits in gives it.
+ */
+export const PACKAGE_MANAGER_ICON: Record<
+  SupportedPackageManager,
+  ComponentType<{ size?: number; className?: string }>
+> = {
+  BREW: HomebrewLogoGreyIcon,
+  WINGET: WingetLogoGreyIcon,
+};
+
+/** The OS each catalog installs on: what narrows the device picker. */
+export const PACKAGE_MANAGER_OS: Record<SupportedPackageManager, 'MAC_OS' | 'WINDOWS'> = {
+  BREW: 'MAC_OS',
+  WINGET: 'WINDOWS',
+};
+
+/** A run's package manager as the UI names it; the raw value for one no form offers. */
+export function packageManagerLabel(value: string): string {
+  return value in PACKAGE_MANAGER_LABEL ? PACKAGE_MANAGER_LABEL[value as SupportedPackageManager] : value;
+}
+
+/** Where the inventory can find a title. */
+export type SoftwareSourceKind = 'WINGET' | 'CHOCOLATEY' | 'BREW' | 'UNMANAGED';
+
+/**
+ * Where the inventory found a title. The catalogs the UI offers read as they do
+ * in the forms; Chocolatey still gets a name, because the inventory reports what
+ * a device has regardless of what the product installs.
+ */
+export const SOFTWARE_SOURCE_LABEL: Record<SoftwareSourceKind, string> = {
+  BREW: PACKAGE_MANAGER_LABEL.BREW,
+  WINGET: PACKAGE_MANAGER_LABEL.WINGET,
+  CHOCOLATEY: 'Chocolatey',
+  UNMANAGED: 'Unmanaged',
+};

package/src/components/features/software/package-search-field-placeholder.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { Autocomplete } from '../../ui';
+
+export const PACKAGE_SEARCH_LABEL = 'Software Name';
+export const PACKAGE_SEARCH_PLACEHOLDER = 'Search for Software';
+
+/** The "Software Name" field while it cannot search: the search failed, or a read outside the field's own deferral. */
+export function PackageSearchFieldPlaceholder({ error }: { error?: string }) {
+  return (
+    <Autocomplete
+      label={PACKAGE_SEARCH_LABEL}
+      labelVariant="large"
+      options={[]}
+      value={null}
+      onChange={() => {}}
+      placeholder={PACKAGE_SEARCH_PLACEHOLDER}
+      disabled
+      error={error}
+      invalid={!!error}
+    />
+  );
+}

package/src/components/features/software/schedule-fields.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import { cn } from '../../../utils/cn';
+import { DatePickerInputSimple, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../ui';
+
+export interface SoftwareScheduleOption<V extends string = string> {
+  value: V;
+  label: string;
+}
+
+/**
+ * How a schedule's start is read: the timezone choices, the time slots a day
+ * offers, the first day that can be picked and whether a start has gone by.
+ * The host owns these rules (the product shares them with script schedules).
+ */
+export interface SoftwareScheduleTiming<TRef extends string = string> {
+  timeReferenceOptions: ReadonlyArray<SoftwareScheduleOption<TRef>>;
+  getTimeOptions: (date: Date | null, timeReference: TRef) => SoftwareScheduleOption[];
+  getEarliestDay: (timeReference: TRef) => Date | undefined;
+  /** The message for a start that cannot be scheduled; undefined when it can. */
+  getStartError: (date: Date | null, time: string, timeReference: TRef) => string | undefined;
+}
+
+export interface SoftwareScheduleFieldsProps<TRef extends string = string> {
+  date: Date | null;
+  time: string;
+  timeReference: TRef;
+  timing: SoftwareScheduleTiming<TRef>;
+  onDateChange: (date: Date | null) => void;
+  onTimeChange: (time: string) => void;
+  onTimeReferenceChange: (reference: TRef) => void;
+  /**
+   * `page` (default): the script schedule's four-column grid, the three fields
+   * in its first three columns. `fill`: the three fields share the whole width
+   * (the fields beside something else on the row).
+   */
+  columns?: 'page' | 'fill';
+}
+
+/** Date / Time / Timezone: the same grid and readings as a script schedule's start. */
+export function SoftwareScheduleFields<TRef extends string = string>({
+  date,
+  time,
+  timeReference,
+  timing,
+  onDateChange,
+  onTimeChange,
+  onTimeReferenceChange,
+  columns = 'page',
+}: SoftwareScheduleFieldsProps<TRef>) {
+  const timeOptions = timing.getTimeOptions(date, timeReference);
+  const startError = timing.getStartError(date, time, timeReference);
+
+  return (
+    <div
+      className={cn(
+        'grid grid-cols-1 gap-[var(--spacing-system-lf)] content-md:items-start',
+        columns === 'fill' ? 'content-md:grid-cols-3' : 'content-md:grid-cols-4',
+      )}
+    >
+      <div className="flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]">
+        <Label className="text-h4">Date</Label>
+        <DatePickerInputSimple
+          placeholder="Select date"
+          value={date ?? undefined}
+          onChange={next => onDateChange(next ?? null)}
+          fromDate={timing.getEarliestDay(timeReference)}
+          className="w-full"
+          error={startError}
+          invalid={!!startError}
+        />
+      </div>
+      <div className="flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]">
+        <Label className="text-h4">Time</Label>
+        <Select value={time} onValueChange={onTimeChange}>
+          <SelectTrigger>
+            <SelectValue placeholder="Select time" />
+          </SelectTrigger>
+          <SelectContent>
+            {timeOptions.map(option => (
+              <SelectItem key={option.value} value={option.value}>
+                {option.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]">
+        <Label className="text-h4">Timezone</Label>
+        <Select value={timeReference} onValueChange={value => onTimeReferenceChange(value as TRef)}>
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {timing.timeReferenceOptions.map(option => (
+              <SelectItem key={option.value} value={option.value}>
+                {option.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  );
+}

package/src/components/features/software/software-action-copy.ts

@@ -0,0 +1,70 @@
+import type { RadioGroupBlockOption } from '../../ui';
+
+/** What a software run does to its packages. */
+export type SoftwareActionKind = 'INSTALL' | 'UPDATE';
+
+export interface SoftwareActionCopy {
+  /** The ACTION column, the first word of a log's STATUS, the start of a schedule's name. */
+  verb: string;
+  /** The Install / Update Software form. */
+  formTitle: string;
+  runLabel: string;
+  scheduleLabel: string;
+  modes: RadioGroupBlockOption[];
+  started: string;
+  scheduled: string;
+  failed: string;
+  /** One run's page, and the heading over its per-device logs. */
+  detailTitle: string;
+  logsHeading: string;
+}
+
+/** Everything the install and update flows word differently, on every page that shows one. */
+export const SOFTWARE_ACTION_COPY: Record<SoftwareActionKind, SoftwareActionCopy> = {
+  INSTALL: {
+    verb: 'Install',
+    formTitle: 'Install Software',
+    runLabel: 'Run Installation',
+    scheduleLabel: 'Schedule Install',
+    modes: [
+      { value: 'now', label: 'Install Now', description: 'The install starts immediately.' },
+      {
+        value: 'schedule',
+        label: 'Schedule Install',
+        description: 'The install runs automatically at the scheduled time.',
+      },
+    ],
+    started: 'Installation started',
+    scheduled: 'Installation scheduled',
+    failed: 'Failed to start the installation',
+    detailTitle: 'Software Install Details',
+    logsHeading: 'Install Logs',
+  },
+  UPDATE: {
+    verb: 'Update',
+    formTitle: 'Update Software',
+    runLabel: 'Run Update',
+    scheduleLabel: 'Schedule Update',
+    modes: [
+      { value: 'now', label: 'Update Now', description: 'The update starts immediately.' },
+      {
+        value: 'schedule',
+        label: 'Schedule Update',
+        description: 'The update runs automatically at the scheduled time.',
+      },
+    ],
+    started: 'Update started',
+    scheduled: 'Update scheduled',
+    failed: 'Failed to start the update',
+    detailTitle: 'Software Update Details',
+    logsHeading: 'Update Logs',
+  },
+};
+
+/** A run's page title while the record has not said which action it is, or names one this build does not know. */
+export const SOFTWARE_ACTION_DETAIL_TITLE = 'Software Action Details';
+
+/** The copy for a run's `action` as the payload types it; undefined for an action this build does not know. */
+export function softwareActionCopy(action: string): SoftwareActionCopy | undefined {
+  return action in SOFTWARE_ACTION_COPY ? SOFTWARE_ACTION_COPY[action as SoftwareActionKind] : undefined;
+}