@adcops/autocore-react 3.3.48 → 3.3.54

package/src/components/tis/TestSetupForm.tsx

@@ -0,0 +1,314 @@
+import React, { useState, useEffect, useContext, useMemo } from 'react';
+import { AutoComplete } from 'primereact/autocomplete';
+import type { AutoCompleteCompleteEvent } from 'primereact/autocomplete';
+import { SelectButton } from 'primereact/selectbutton';
+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';
+
+export interface TestFieldDef {
+    name: string;
+    type: string;
+    units?: string;
+    required?: boolean;
+    source?: string;
+}
+
+export interface TestMethod {
+    project_fields: TestFieldDef[];
+    config_fields: TestFieldDef[];
+    cycle_fields: TestFieldDef[];
+    results_fields: TestFieldDef[];
+}
+
+/**
+ * Props are all optional overrides — by default the form drives itself
+ * from the surrounding `<TisProvider>`. Pass any of these to lock that
+ * particular axis.
+ *
+ * - `schema`: bypass `useTisSchemas()` for the selected method.
+ * - `defaultProjectId` / `defaultMethodId`: seed the form's local
+ *    state when the corresponding TIS-context fields are blank.
+ * - `onProjectChange` / `onMethodChange` / `onValidationChange`:
+ *    receive callbacks in addition to the provider's selection state.
+ */
+export interface TestSetupFormProps {
+    schema?: TestMethod;
+    defaultProjectId?: string;
+    defaultMethodId?: string;
+    onProjectChange?: (projectId: string) => void;
+    onMethodChange?: (methodId: string) => void;
+    onValidationChange?: (isValid: boolean, config: any) => void;
+}
+
+export const TestSetupForm: React.FC<TestSetupFormProps> = ({
+    schema: schemaOverride,
+    defaultProjectId,
+    defaultMethodId,
+    onProjectChange,
+    onMethodChange,
+    onValidationChange,
+}) => {
+    const tis = useTis();
+    const { invoke, write } = useContext(EventEmitterContext);
+    const { rawValues, findTagByFqdn } = useContext(AutoCoreTagContext);
+
+    const methodIds = useMemo(() => Object.keys(tis.schemas), [tis.schemas]);
+
+    // Seed the form's local project/method state from the provider's
+    // selection. Direct edits update the provider via setSelection so
+    // the History tab and Data tab follow along.
+    const [projectId, setProjectIdLocal] = useState<string>(
+        tis.selection.projectId || defaultProjectId || ''
+    );
+    const [methodId, setMethodIdLocal] = useState<string>(
+        tis.selection.methodId || defaultMethodId || tis.defaultMethodId || ''
+    );
+    const [sampleId, setSampleIdLocal] = useState<string>('');
+    const [config, setConfig] = useState<any>({});
+
+    // Resolve the schema for the active method. The override beats the
+    // registry; if neither is available, render the empty state.
+    const schema = schemaOverride ?? (methodId ? tis.schemas[methodId] : undefined);
+
+    // Push local edits back into the provider's selection so other
+    // components react. Only push when the value actually differs to
+    // avoid feedback loops.
+    useEffect(() => {
+        if (tis.selection.projectId !== projectId) {
+            tis.setSelection({ projectId });
+        }
+        if (onProjectChange) onProjectChange(projectId);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [projectId]);
+
+    useEffect(() => {
+        if (tis.selection.methodId !== methodId && methodId) {
+            tis.setSelection({ methodId });
+        }
+        if (onMethodChange) onMethodChange(methodId);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [methodId]);
+
+    useEffect(() => {
+        if (tis.selection.sampleId !== sampleId) {
+            tis.setSelection({ sampleId });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sampleId]);
+
+    // Track the live broadcast scalars — when the form is staged for
+    // a different sample externally (e.g., the operator types in
+    // another tab), reflect that here. Only react on a true change
+    // to avoid stomping local edits.
+    useEffect(() => {
+        if (tis.state.stagedSampleId && tis.state.stagedSampleId !== sampleId) {
+            setSampleIdLocal(tis.state.stagedSampleId);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [tis.state.stagedSampleId]);
+
+    const [existingProjects, setExistingProjects] = useState<string[]>([]);
+    const [filteredProjects, setFilteredProjects] = useState<string[]>([]);
+    const [isValid, setIsValid] = useState(false);
+
+    // Seed and live-update fields that declare a `source` (FQDN).
+    useEffect(() => {
+        if (!schema) return;
+        const allFields = [...schema.project_fields, ...schema.config_fields];
+        setConfig((prev: any) => {
+            let next = prev;
+            for (const field of allFields) {
+                if (field.name === 'sample_id') continue; // sample_id is top-level now
+                if (!field.source) continue;
+                const tag = findTagByFqdn(field.source);
+                if (!tag) continue;
+                const rawVal = rawValues[tag.tagName];
+                if (rawVal === undefined || rawVal === null) continue;
+                if (next[field.name] === rawVal) continue;
+                if (next === prev) next = { ...prev };
+                next[field.name] = rawVal;
+            }
+            return next;
+        });
+    }, [schema, rawValues, findTagByFqdn]);
+
+    useEffect(() => {
+        const fetchProjects = async () => {
+            try {
+                const resp: any = await invoke('tis.list_projects' as any, MessageType.Request as any, {} as any);
+                if (resp.success && resp.data && resp.data.projects) {
+                    setExistingProjects(resp.data.projects);
+                }
+            } catch (err) {
+                console.error('Failed to list projects', err);
+            }
+        };
+        fetchProjects();
+    }, [invoke]);
+
+    const searchProjects = (event: AutoCompleteCompleteEvent) => {
+        const query = event.query.toLowerCase();
+        setFilteredProjects(existingProjects.filter(p => p.toLowerCase().includes(query)));
+    };
+
+    // Validation drives both the local UI and the auto-stage. We only
+    // call `tis.stage_test` when every required piece is present —
+    // otherwise the operator's edge-triggered Start button could fire
+    // a half-baked stage.
+    useEffect(() => {
+        if (!schema) { setIsValid(false); return; }
+        let valid = true;
+        if (!projectId.trim()) valid = false;
+        if (!methodId.trim()) valid = false;
+        if (!sampleId.trim()) valid = false;
+
+        const allFields = [...schema.project_fields, ...schema.config_fields];
+        for (const field of allFields) {
+            if (field.name === 'sample_id') continue; // tracked separately
+            if (field.required) {
+                const v = config[field.name];
+                if (v === undefined || v === '' || v === null) { valid = false; break; }
+            }
+        }
+        setIsValid(valid);
+        if (onValidationChange) onValidationChange(valid, config);
+
+        // Auto-stage when everything is valid. Stripping sample_id from
+        // config (it's a top-level peer of project_id/method_id now;
+        // the legacy nested form is server-side hoisted with a
+        // deprecation warning, but new code shouldn't rely on it).
+        if (valid) {
+            const { sample_id: _drop, ...rest } = (config ?? {}) as any;
+            void invoke('tis.stage_test' as any, MessageType.Request, {
+                project_id: projectId,
+                method_id:  methodId,
+                sample_id:  sampleId,
+                config:     rest,
+            } as any).catch(e => console.error('[TestSetupForm] stage_test failed:', e));
+        }
+    }, [config, schema, projectId, methodId, sampleId, onValidationChange, invoke]);
+
+    const isFieldValid = (field: TestFieldDef) => {
+        if (!field.required) return true;
+        const v = config[field.name];
+        return v !== undefined && v !== '' && v !== null;
+    };
+
+    const handleProjectIdChange = (value: string | null | undefined) => {
+        const sanitized = (value || '').replace(/[^a-zA-Z0-9_]/g, '');
+        setProjectIdLocal(sanitized);
+    };
+
+    const handleSampleIdChange = (value: string) => {
+        setSampleIdLocal(value);
+    };
+
+    const handleFieldChange = async (field: TestFieldDef, val: any) => {
+        setConfig({ ...config, [field.name]: val });
+        if (field.source) {
+            try { await write(field.source, val); }
+            catch (e) { console.error('Failed to write to source:', e); }
+        }
+    };
+
+    const renderField = (field: TestFieldDef) => {
+        if (field.name === 'sample_id') return null;
+        const valid = isFieldValid(field);
+        const isNum = field.type !== 'string' && field.type !== 'bool';
+        return (
+            <React.Fragment key={field.name}>
+                <span className="ac-form-label">{field.name}</span>
+                {isNum ? (
+                    <ValueInput
+                        label={undefined}
+                        value={config[field.name] != null ? Number(config[field.name]) : null}
+                        onValueChanged={(val) => handleFieldChange(field, val)}
+                        className={!valid ? 'p-invalid' : ''}
+                    />
+                ) : (
+                    <TextInput
+                        label={undefined}
+                        value={config[field.name] != null ? String(config[field.name]) : ''}
+                        onValueChanged={(val) => handleFieldChange(field, val)}
+                        className={!valid ? 'p-invalid' : ''}
+                    />
+                )}
+                <span className="ac-form-units">{field.units ?? ''}</span>
+                <span style={{ color: valid ? 'var(--green-500)' : 'var(--red-500)', display: 'flex', alignItems: 'center' }}>
+                    <i className={valid ? 'pi pi-check' : 'pi pi-times'} />
+                </span>
+            </React.Fragment>
+        );
+    };
+
+    if (!schema) {
+        return (
+            <div className="ac-form-grid" style={{ padding: '1.25rem' }}>
+                <h3 className="ac-form-section">
+                    {tis.schemasLoaded ? 'No Test Method Selected' : 'Loading test methods…'}
+                </h3>
+            </div>
+        );
+    }
+
+    return (
+        <div className="ac-form-grid" style={{ padding: '1.25rem' }}>
+            <h3 className="ac-form-section" style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+                Project &amp; Method
+                <span style={{ color: isValid ? 'var(--green-500)' : 'var(--red-500)' }}>
+                    <i className={isValid ? 'pi pi-check-circle' : 'pi pi-exclamation-circle'} />
+                </span>
+            </h3>
+
+            <span className="ac-form-label">Project ID</span>
+            <AutoComplete
+                value={projectId}
+                suggestions={filteredProjects}
+                completeMethod={searchProjects}
+                onChange={(e) => handleProjectIdChange(e.value)}
+                dropdown
+                placeholder="Enter or select Project ID"
+                className={!projectId.trim() ? 'p-invalid' : ''}
+            />
+            <span />
+            <span style={{ color: projectId.trim() ? 'var(--green-500)' : 'var(--red-500)', display: 'flex', alignItems: 'center' }}>
+                <i className={projectId.trim() ? 'pi pi-check' : 'pi pi-times'} />
+            </span>
+
+            <span className="ac-form-label">Sample ID</span>
+            <TextInput
+                label={undefined}
+                value={sampleId}
+                onValueChanged={handleSampleIdChange}
+                className={!sampleId.trim() ? 'p-invalid' : ''}
+            />
+            <span />
+            <span style={{ color: sampleId.trim() ? 'var(--green-500)' : 'var(--red-500)', display: 'flex', alignItems: 'center' }}>
+                <i className={sampleId.trim() ? 'pi pi-check' : 'pi pi-times'} />
+            </span>
+
+            {methodIds.length > 1 && (
+                <>
+                    <span className="ac-form-label">Test Method</span>
+                    <SelectButton
+                        value={methodId}
+                        options={methodIds.map(id => ({ label: id, value: id }))}
+                        onChange={(e) => e.value && setMethodIdLocal(e.value)}
+                    />
+                    <span />
+                    <span />
+                </>
+            )}
+
+            <h3 className="ac-form-section" style={{ marginTop: '1rem' }}>Project Information</h3>
+            {schema.project_fields.map(renderField)}
+
+            <h3 className="ac-form-section" style={{ marginTop: '1rem' }}>Test Configuration</h3>
+            {schema.config_fields.map(renderField)}
+        </div>
+    );
+};