@adcops/autocore-react 3.3.67 → 3.3.70

package/src/components/tis/TestSetupForm.tsx

@@ -1,15 +1,31 @@
 import React, { useState, useEffect, useContext, useMemo } from 'react';
 import { Button } from 'primereact/button';
 import { InputText } from 'primereact/inputtext';
-import { Tooltip } from 'primereact/tooltip';
+import { Dropdown } from 'primereact/dropdown';
+import { Dialog } from 'primereact/dialog';
 import { EventEmitterContext } from '../../core/EventEmitterContext';
 import { AutoCoreTagContext } from '../../core/AutoCoreTagContext';
 import { MessageType } from '../../hub/CommandMessage';
 import { ValueInput } from '../ValueInput';
 import { TextInput } from '../TextInput';
 import { useTis } from './TisProvider';
+import { useAmsAssets, useAmsRoles, type AmsAssetEntry } from '../ams/AmsProvider';
 import { TestMethodDialog } from './TestMethodDialog';
 
+/**
+ * One asset_ref declared on a test method. We only consume the subset
+ * the form cares about — `field`, `asset_type`, `select`, `from`,
+ * `location`. Other fields (calibration_required, label, description)
+ * exist on the wire but aren't form-relevant.
+ */
+interface TisAssetRef {
+    field: string;
+    asset_type: string;
+    select: 'by_location' | 'by_id_field';
+    from?: string;
+    location?: string;
+}
+
 export interface TestFieldDef {
     /** Canonical key — wire format, generated code, on-disk JSON. */
     name: string;
@@ -29,12 +45,30 @@ export interface TestMethod {
     config_fields: TestFieldDef[];
     cycle_fields: TestFieldDef[];
     results_fields: TestFieldDef[];
+    /**
+     * AMS asset references resolved at start_test. The form scans these
+     * for `select=by_id_field` entries pointing at a config field
+     * (`from: "config.<name>"`) and renders that field as a Dropdown of
+     * matching AMS assets instead of a free-form text input. No
+     * project.json change required — the form derives this from the
+     * existing schema.
+     */
+    asset_refs?: TisAssetRef[];
     /** Optional pretty label for the Test Method picker. Falls back
      *  to the canonical method_id key. */
     label?: string;
     /** Optional long-form description shown in the picker dialog
      *  when this method is highlighted. */
     description?: string;
+    /** Optional post-cycle analysis dispatch (`{ script, function }`).
+     *  Consumed server-side by the codegen; the form doesn't render
+     *  anything based on it but accepts it so generated schema
+     *  literals from `acctl codegen-tags` typecheck cleanly. */
+    analysis?: any;
+    /** Free-form view declarations for chart components. Same rationale
+     *  as `analysis` — the form ignores them; the type just has to
+     *  accept them so generated schemas typecheck. */
+    views?: Record<string, any>;
 }
 
 /**
@@ -69,6 +103,60 @@ const hasDescription = (f: TestFieldDef): boolean =>
 const methodLabelOf = (methodId: string, schema: TestMethod | undefined): string =>
     (schema?.label && schema.label.length > 0) ? schema.label : methodId;
 
+/**
+ * Dropdown over the active subset of AMS assets of a given type. Used
+ * for config fields that an `asset_ref` resolves via
+ * `select=by_id_field` — the operator picks an asset by ID from the
+ * registry rather than typing it. The dropdown's option labels
+ * include the asset's role (when the asset has a known role) and
+ * serial so the operator can identify "the right one" without leaving
+ * the form.
+ *
+ * Falls back to a graceful empty state when the AMS provider isn't
+ * mounted (no assets) — reads as "No matching assets registered" so
+ * the operator knows the gap and can go register one in Settings.
+ */
+const AssetIdPicker: React.FC<{
+    assetType: string;
+    value: string;
+    onChange: (val: string) => void;
+    invalid?: boolean;
+}> = ({ assetType, value, onChange, invalid }) => {
+    const assets = useAmsAssets();
+    const roles = useAmsRoles();
+
+    const options = useMemo(() => {
+        const filtered = (assets as AmsAssetEntry[])
+            .filter(a => a.asset_type === assetType && a.status === 'active');
+        return filtered.map(a => {
+            const roleLabel = roles[a.asset_type]
+                ?.find(r => r.location === a.location)?.label;
+            const labelParts = [a.asset_id];
+            if (roleLabel) labelParts.push(`— ${roleLabel}`);
+            else if (a.location) labelParts.push(`— ${a.location}`);
+            if (a.serial) labelParts.push(`(s/n ${a.serial})`);
+            return { label: labelParts.join(' '), value: a.asset_id };
+        });
+    }, [assets, roles, assetType]);
+
+    return (
+        <Dropdown
+            value={value}
+            options={options}
+            onChange={(e) => onChange(e.value ?? '')}
+            placeholder={
+                options.length === 0
+                    ? `No active ${assetType} assets registered — add one in Settings → Assets`
+                    : `Select ${assetType}…`
+            }
+            className={invalid ? 'p-invalid' : ''}
+            filter
+            showClear
+            disabled={options.length === 0}
+        />
+    );
+};
+
 // -------------------------------------------------------------------------
 
 export const TestSetupForm: React.FC<TestSetupFormProps> = ({
@@ -92,8 +180,18 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
     const [methodId, setMethodIdLocal] = useState<string>(
         tis.selection.methodId || defaultMethodId || tis.defaultMethodId || ''
     );
-    const [sampleId, setSampleIdLocal] = useState<string>('');
-    const [config, setConfig] = useState<any>({});
+    // Sample ID + config_field values come from the TisProvider rather
+    // than local React state so they survive form unmount when the
+    // operator switches tabs. Initial value reads from selection /
+    // stagedConfig; subsequent edits write back to the provider.
+    const [sampleId, setSampleIdLocal] = useState<string>(tis.selection.sampleId || '');
+    const config = tis.stagedConfig;
+    const setConfig = (updater: any) => {
+        const next = typeof updater === 'function' ? updater(tis.stagedConfig) : updater;
+        if (next !== tis.stagedConfig) {
+            tis.setStagedConfig(next);
+        }
+    };
 
     const schema = schemaOverride ?? (methodId ? tis.schemas[methodId] : undefined);
 
@@ -132,6 +230,16 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
     const [isValid, setIsValid] = useState(false);
     const [methodPickerOpen, setMethodPickerOpen] = useState(false);
 
+    // Single shared "info" dialog used by:
+    //   - the Test Setup status button (shows what's wrong, including
+    //     server-side last_start_error)
+    //   - the per-field info buttons (touch-friendly replacement for
+    //     the old hover-tooltip)
+    const [infoDialog, setInfoDialog] = useState<{ open: boolean; title: string; body: React.ReactNode }>(
+        { open: false, title: '', body: null },
+    );
+    const closeInfoDialog = () => setInfoDialog({ open: false, title: '', body: null });
+
     // Seed and live-update config_fields that declare a `source`.
     useEffect(() => {
         if (!schema) return;
@@ -218,15 +326,38 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
         }
     };
 
+    /**
+     * If the test method has an `asset_ref` whose `select=by_id_field`
+     * pulls from this config field, return the asset_type the field
+     * should pick from. The form renders that field as a dropdown of
+     * AMS assets instead of a free-form text input.
+     *
+     * The schema already encodes the relationship via `from:
+     * "config.<field_name>"` — no project.json change required.
+     */
+    const assetTypeForField = (field: TestFieldDef): string | null => {
+        const refs = (schema?.asset_refs ?? []) as TisAssetRef[];
+        const expectedFrom = `config.${field.name}`;
+        const hit = refs.find(r => r.select === 'by_id_field' && r.from === expectedFrom);
+        return hit ? hit.asset_type : null;
+    };
+
     const renderConfigField = (field: TestFieldDef) => {
         if (field.name === 'sample_id') return null;
         const valid = isFieldValid(field);
-        const isNum = field.type !== 'string' && field.type !== 'bool';
-        const tooltipId = `acFormInfo_${field.name}`;
+        const assetType = assetTypeForField(field);
+        const isNum = !assetType && field.type !== 'string' && field.type !== 'bool';
         return (
             <React.Fragment key={field.name}>
                 <span className="ac-form-label">{labelOf(field)}</span>
-                {isNum ? (
+                {assetType ? (
+                    <AssetIdPicker
+                        assetType={assetType}
+                        value={config[field.name] != null ? String(config[field.name]) : ''}
+                        onChange={(val) => handleFieldChange(field, val)}
+                        invalid={!valid}
+                    />
+                ) : isNum ? (
                     <ValueInput
                         label={undefined}
                         value={config[field.name] != null ? Number(config[field.name]) : null}
@@ -242,16 +373,19 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
                     />
                 )}
                 {hasDescription(field) ? (
-                    <>
-                        <Tooltip target={`#${tooltipId}`} position="left" />
-                        <span
-                            id={tooltipId}
-                            data-pr-tooltip={field.description}
-                            style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'help' }}
-                        >
-                            <i className="pi pi-info-circle" style={{ color: 'var(--text-secondary-color)' }} />
-                        </span>
-                    </>
+                    <Button
+                        icon="pi pi-info-circle"
+                        text
+                        rounded
+                        aria-label={`About ${labelOf(field)}`}
+                        onClick={() => setInfoDialog({
+                            open: true,
+                            title: labelOf(field),
+                            body: <p style={{ margin: 0, whiteSpace: 'pre-wrap' }}>{field.description}</p>,
+                        })}
+                        // Replaces a hover Tooltip — touch-friendly. The
+                        // description is shown in the shared info dialog.
+                    />
                 ) : (
                     <span aria-hidden="true" />
                 )}
@@ -295,13 +429,97 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
         gridTemplateColumns: 'auto 1fr 1.75rem 1.75rem',
     };
 
+    // Build the list of reasons the form is invalid. Used by the
+    // status button to show actionable diagnostics, not just a red icon.
+    const validationIssues = (): string[] => {
+        const issues: string[] = [];
+        if (!projectExists) {
+            issues.push('No project is selected. Pick or create one on the Project tab.');
+        }
+        if (!tis.projectFieldsLoaded) {
+            issues.push('Project fields are still loading.');
+        }
+        if (!methodId.trim()) {
+            issues.push('No test method selected.');
+        }
+        if (!sampleId.trim()) {
+            issues.push('Sample ID is required.');
+        }
+        if (schema) {
+            for (const field of schema.config_fields) {
+                if (field.name === 'sample_id') continue;
+                if (!field.required) continue;
+                const v = config[field.name];
+                if (v === undefined || v === '' || v === null) {
+                    issues.push(`Required field "${labelOf(field)}" is empty.`);
+                }
+            }
+        }
+        return issues;
+    };
+
+    const openStatusDialog = () => {
+        const issues = validationIssues();
+        const serverErr = tis.state.lastStartError?.trim() ?? '';
+        let body: React.ReactNode;
+        if (issues.length === 0 && !serverErr) {
+            body = (
+                <p style={{ margin: 0 }}>
+                    All required fields are complete. The test is staged and ready to start.
+                </p>
+            );
+        } else {
+            body = (
+                <div>
+                    {issues.length > 0 && (
+                        <>
+                            <p style={{ margin: '0 0 0.5rem 0' }}>
+                                The form is incomplete:
+                            </p>
+                            <ul style={{ margin: '0 0 1rem 1.25rem' }}>
+                                {issues.map((m, i) => <li key={i}>{m}</li>)}
+                            </ul>
+                        </>
+                    )}
+                    {serverErr && (
+                        <>
+                            <p style={{ margin: '0 0 0.25rem 0', fontWeight: 600 }}>
+                                Last start_test error from the server:
+                            </p>
+                            <pre style={{
+                                margin: 0,
+                                padding: '0.5rem',
+                                background: 'rgba(0,0,0,0.25)',
+                                borderRadius: '4px',
+                                whiteSpace: 'pre-wrap',
+                                fontSize: '0.875rem',
+                            }}>{serverErr}</pre>
+                        </>
+                    )}
+                </div>
+            );
+        }
+        setInfoDialog({ open: true, title: 'Test Setup Status', body });
+    };
+
+    // The icon doubles as a button so the operator can drill into the
+    // *reason* the form isn't ready, including server-side errors that
+    // don't have a corresponding red field (most importantly, AMS
+    // resolution failures from the last Start attempt).
+    const statusValid = isValid && !tis.state.lastStartError;
+
     return (
         <div className="ac-form-grid" style={gridStyle}>
             <h3 className="ac-form-section" style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                 Test Setup
-                <span style={{ color: isValid ? 'var(--green-500)' : 'var(--red-500)' }}>
-                    <i className={isValid ? 'pi pi-check-circle' : 'pi pi-exclamation-circle'} />
-                </span>
+                <Button
+                    icon={statusValid ? 'pi pi-check-circle' : 'pi pi-exclamation-circle'}
+                    severity={statusValid ? 'success' : 'danger'}
+                    text
+                    rounded
+                    aria-label="Test Setup status"
+                    onClick={openStatusDialog}
+                />
                 <span style={{
                     fontSize: '0.85em',
                     color: 'var(--text-secondary-color)',
@@ -360,6 +578,21 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
                 currentMethodId={methodId}
                 onSelected={(picked) => setMethodIdLocal(picked)}
             />
+
+            {/* Shared info dialog. Driven by the Test Setup status
+                button (validation + server errors) and by per-field
+                info buttons (replaces the old hover Tooltip). One
+                Dialog instance keeps the surface stack shallow. */}
+            <Dialog
+                header={infoDialog.title}
+                visible={infoDialog.open}
+                onHide={closeInfoDialog}
+                style={{ width: '32rem', maxWidth: '90vw' }}
+                modal
+                dismissableMask
+            >
+                {infoDialog.body}
+            </Dialog>
         </div>
     );
 };

package/src/components/tis/TisProvider.tsx

@@ -55,6 +55,17 @@ export interface TisLiveState {
     activeMethodId: string;
     activeSampleId: string;
     activeRunId: string;
+
+    /**
+     * Most recent `tis.start_test` failure message broadcast by the
+     * server, or empty string when the last start succeeded (or none
+     * has been attempted). Used by `<TestSetupForm>` to surface AMS
+     * resolution errors and other server-side rejections inline,
+     * instead of leaving the operator staring at a non-responsive
+     * Start button. Cleared by the server on the next successful
+     * start_test.
+     */
+    lastStartError: string;
 }
 
 export interface TisSelection {
@@ -129,6 +140,22 @@ export interface TisContextValue {
      *  by the create / edit dialogs after a successful submit. */
     setProjectFields: (id: string, fields: Record<string, any>) => void;
 
+    /**
+     * In-progress test draft — the operator's pending Sample ID and
+     * config_field values for the active method. Held on the provider
+     * (not in `<TestSetupForm>`'s local React state) so the values
+     * survive remount when the operator switches tabs. Wiped via
+     * `clearStagedConfig()` after a successful start_test or when the
+     * operator cancels the staged record.
+     */
+    stagedConfig: Record<string, any>;
+    /** Merge a partial patch into `stagedConfig`. Existing fields not
+     *  mentioned in the patch are preserved. */
+    setStagedConfig: (patch: Record<string, any>) => void;
+    /** Reset `stagedConfig` to `{}`. Called by the form on a fresh
+     *  method selection or after a run completes. */
+    clearStagedConfig: () => void;
+
     /** Fetch the run list for a (project, method?) pair. Method may be
      *  omitted to aggregate runs across every method in the project —
      *  the History tab uses this. */
@@ -146,6 +173,7 @@ export interface TisContextValue {
 const EMPTY_STATE: TisLiveState = {
     staged: false, stagedProjectId: '', stagedMethodId: '', stagedSampleId: '',
     active: false, activeProjectId: '', activeMethodId: '', activeSampleId: '', activeRunId: '',
+    lastStartError: '',
 };
 
 const EMPTY_SELECTION: TisSelection = {
@@ -167,6 +195,9 @@ const TisContext = createContext<TisContextValue>({
     projectFieldsLoaded: false,
     loadProjectFields: async () => null,
     setProjectFields: () => {},
+    stagedConfig: {},
+    setStagedConfig: () => {},
+    clearStagedConfig: () => {},
     fetchRuns: async () => [],
     fetchRun: async () => null,
     runCache: {},
@@ -185,7 +216,8 @@ type StateAction =
     | { kind: 'active_project_id'; value: string }
     | { kind: 'active_method_id'; value: string }
     | { kind: 'active_sample_id'; value: string }
-    | { kind: 'active_run_id'; value: string };
+    | { kind: 'active_run_id'; value: string }
+    | { kind: 'last_start_error'; value: string };
 
 function liveReducer(s: TisLiveState, a: StateAction): TisLiveState {
     switch (a.kind) {
@@ -198,6 +230,7 @@ function liveReducer(s: TisLiveState, a: StateAction): TisLiveState {
         case 'active_method_id':    return { ...s, activeMethodId: a.value };
         case 'active_sample_id':    return { ...s, activeSampleId: a.value };
         case 'active_run_id':       return { ...s, activeRunId: a.value };
+        case 'last_start_error':    return { ...s, lastStartError: a.value };
     }
 }
 
@@ -279,6 +312,7 @@ export const TisProvider: React.FC<TisProviderProps> = ({ children, defaultMetho
             subscribe('tis.active_method_id',    (v: any) => dispatch({ kind: 'active_method_id',    value: String(v ?? '') })),
             subscribe('tis.active_sample_id',    (v: any) => dispatch({ kind: 'active_sample_id',    value: String(v ?? '') })),
             subscribe('tis.active_run_id',       (v: any) => dispatch({ kind: 'active_run_id',       value: String(v ?? '') })),
+            subscribe('tis.last_start_error',    (v: any) => dispatch({ kind: 'last_start_error',    value: String(v ?? '') })),
         ];
         return () => { subs.forEach(unsubscribe); };
     }, [subscribe, unsubscribe]);
@@ -506,17 +540,32 @@ export const TisProvider: React.FC<TisProviderProps> = ({ children, defaultMetho
     const projectFields = projectFieldsCache[selection.projectId] ?? {};
     const projectFieldsLoaded = projectFieldsCache[selection.projectId] !== undefined;
 
+    // Operator's pending Sample ID and config_field values live here
+    // (rather than as local state in <TestSetupForm>) so they survive
+    // the form unmounting when the user switches to another tab. The
+    // form re-hydrates from this on remount, so leaving the Test tab
+    // and coming back is transparent.
+    const [stagedConfig, setStagedConfigState] = useState<Record<string, any>>({});
+    const setStagedConfig = useCallback((patch: Record<string, any>) => {
+        setStagedConfigState(prev => ({ ...prev, ...patch }));
+    }, []);
+    const clearStagedConfig = useCallback(() => {
+        setStagedConfigState({});
+    }, []);
+
     const value: TisContextValue = useMemo(() => ({
         schemas, defaultMethodId, schemasLoaded,
         state, selection, setSelection,
         existingProjects, projectKnown, refreshProjects, markProjectJustCreated,
         projectFields, projectFieldsLoaded, loadProjectFields, setProjectFields,
+        stagedConfig, setStagedConfig, clearStagedConfig,
         fetchRuns, fetchRun, runCache,
     }), [
         schemas, defaultMethodId, schemasLoaded,
         state, selection, setSelection,
         existingProjects, projectKnown, refreshProjects, markProjectJustCreated,
         projectFields, projectFieldsLoaded, loadProjectFields, setProjectFields,
+        stagedConfig, setStagedConfig, clearStagedConfig,
         fetchRuns, fetchRun, runCache,
     ]);
 

package/src/themes/adc-dark/_extensions.scss

@@ -156,8 +156,8 @@
     }
 
     .ac-toolbar-icon-btn {
-        width: 40px;
-        height: 40px;
+        width: 19mm;
+        height: 12.7mm;
         padding: 0;
         display: inline-flex;
         align-items: center;
@@ -170,8 +170,8 @@
     }
 
     .ac-toolbar-icon-lg {
-        width: 48px;
-        height: 48px;
+        width: 25.4mm;
+        height: 19mm;
         padding: 0;
         display: inline-flex;
         align-items: center;
@@ -184,8 +184,8 @@
     }
 
     .ac-toolbar-icon-panic {
-        width: 48px;
-        height: 48px;
+        width: 25.4mm;
+        height: 25.4mm;
         padding: 0;
         display: inline-flex;
         align-items: center;
@@ -208,6 +208,18 @@
         padding: 2mm;
     }
 
+    /* ---- Dialog: comfortable interior padding ----
+     *
+     * Same problem the OverlayPanel had — PrimeReact's `.p-dialog-content`
+     * lands with near-zero padding so dialog bodies feel squished
+     * against the title bar and side borders. Adding 2mm here gives
+     * dialogs a consistent inner gutter without each consumer having
+     * to wrap their content in their own padded container.
+     */
+    .p-dialog-content {
+        padding: 2mm;
+    }
+
     .ac-toolbar-group {
         display: flex;
         flex-direction: row;