@adcops/autocore-react 3.3.59 → 3.3.63

package/src/components/tis/TestSetupForm.tsx

@@ -1,6 +1,4 @@
-import React, { useState, useEffect, useContext, useMemo, useRef } from 'react';
-import { AutoComplete } from 'primereact/autocomplete';
-import type { AutoCompleteCompleteEvent } from 'primereact/autocomplete';
+import React, { useState, useEffect, useContext, useMemo } from 'react';
 import { Button } from 'primereact/button';
 import { InputText } from 'primereact/inputtext';
 import { Tooltip } from 'primereact/tooltip';
@@ -10,7 +8,6 @@ import { MessageType } from '../../hub/CommandMessage';
 import { ValueInput } from '../ValueInput';
 import { TextInput } from '../TextInput';
 import { useTis } from './TisProvider';
-import { ProjectInfoDialog } from './ProjectInfoDialog';
 import { TestMethodDialog } from './TestMethodDialog';
 
 export interface TestFieldDef {
@@ -41,14 +38,18 @@ export interface TestMethod {
 }
 
 /**
- * Props are all optional overrides — by default the form drives itself
- * from the surrounding `<TisProvider>`.
+ * Test-setup form. Renders Sample ID, Test Method picker, and Test
+ * Configuration. Project ID lives in `<ProjectSelector>` on its own
+ * tab — this form reads the selected project from `<TisProvider>`
+ * and gates staging on it being a known project (created via the
+ * Project tab's `+` button).
+ *
+ * All props are optional overrides — by default the form drives
+ * itself from the surrounding `<TisProvider>`.
  */
 export interface TestSetupFormProps {
     schema?: TestMethod;
-    defaultProjectId?: string;
     defaultMethodId?: string;
-    onProjectChange?: (projectId: string) => void;
     onMethodChange?: (methodId: string) => void;
     onValidationChange?: (isValid: boolean, config: any) => void;
 }
@@ -65,25 +66,14 @@ const labelOf = (f: TestFieldDef): string => {
 const hasDescription = (f: TestFieldDef): boolean =>
     typeof f.description === 'string' && f.description.length > 0;
 
-/** Display name for one method: prefer schema's `label`, fall back
- *  to the canonical method_id. Mirrors the helper in TestMethodDialog
- *  so the row label stays in sync with what the dialog shows. */
 const methodLabelOf = (methodId: string, schema: TestMethod | undefined): string =>
     (schema?.label && schema.label.length > 0) ? schema.label : methodId;
 
-// Project IDs follow the same character class as the server's
-// `tis.create_project` validator. Keep these in sync — see
-// `src/tis_servelet.rs::create_project`.
-const PROJECT_ID_RE = /^[A-Za-z0-9_-]+$/;
-const isValidProjectIdFormat = (id: string) => PROJECT_ID_RE.test(id);
-
 // -------------------------------------------------------------------------
 
 export const TestSetupForm: React.FC<TestSetupFormProps> = ({
     schema: schemaOverride,
-    defaultProjectId,
     defaultMethodId,
-    onProjectChange,
     onMethodChange,
     onValidationChange,
 }) => {
@@ -93,9 +83,12 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
 
     const methodIds = useMemo(() => Object.keys(tis.schemas), [tis.schemas]);
 
-    const [projectId, setProjectIdLocal] = useState<string>(
-        tis.selection.projectId || defaultProjectId || ''
-    );
+    // The form owns Sample ID, Method, and per-test config_fields
+    // values. Project ID is sourced from the provider's selection
+    // (set by <ProjectSelector> on the Project tab).
+    const projectId = tis.selection.projectId;
+    const projectExists = projectId.trim() !== '' && tis.projectKnown(projectId.trim());
+
     const [methodId, setMethodIdLocal] = useState<string>(
         tis.selection.methodId || defaultMethodId || tis.defaultMethodId || ''
     );
@@ -104,14 +97,6 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
 
     const schema = schemaOverride ?? (methodId ? tis.schemas[methodId] : undefined);
 
-    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 });
@@ -134,84 +119,18 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [tis.state.stagedSampleId]);
 
-    const [existingProjects, setExistingProjects] = useState<string[]>([]);
-    const [filteredProjects, setFilteredProjects] = useState<string[]>([]);
-    const justCreatedRef = useRef<Set<string>>(new Set());
-    const [justCreatedTick, setJustCreatedTick] = useState(0);
-    const [isValid, setIsValid] = useState(false);
-
-    // Cache of `project_fields` for the currently-selected project,
-    // fetched once on project selection. Folded into every
-    // `tis.stage_test` payload so the recorded test.json carries the
-    // project-level metadata even though the operator no longer sees
-    // those fields in the main form. Keyed by projectId so switching
-    // projects mid-session refetches cleanly.
-    const [projectFieldsCache, setProjectFieldsCache] = useState<Record<string, any>>({});
-    const projectFieldsForCurrent = projectFieldsCache[projectId] ?? {};
-
-    // Dialog state for create + edit + method-picker.
-    const [newProjectOpen, setNewProjectOpen] = useState(false);
-    const [editProjectOpen, setEditProjectOpen] = useState(false);
-    const [methodPickerOpen, setMethodPickerOpen] = useState(false);
-
-    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);
-        }
-    };
-
+    // If the provider's selected method changes elsewhere (e.g., the
+    // operator picks a different method via the dialog), reflect it
+    // here so the schema we render stays in sync.
     useEffect(() => {
-        fetchProjects();
+        if (tis.selection.methodId && tis.selection.methodId !== methodId) {
+            setMethodIdLocal(tis.selection.methodId);
+        }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [invoke]);
+    }, [tis.selection.methodId]);
 
-    const knownProjects = useMemo(() => {
-        const s = new Set<string>(existingProjects);
-        for (const id of justCreatedRef.current) s.add(id);
-        return s;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [existingProjects, justCreatedTick]);
-
-    const projectExists = projectId.trim() !== '' && knownProjects.has(projectId.trim());
-    const projectIdFormatValid = isValidProjectIdFormat(projectId.trim());
-    const canCreateProject =
-        projectId.trim() !== ''
-        && projectIdFormatValid
-        && !knownProjects.has(projectId.trim());
-
-    // Whenever the user selects a known project (or the project
-    // gets created in-session), pull its persisted project_fields
-    // so we can fold them into stage_test. We don't refetch on
-    // every keystroke — only when projectId actually lands on an
-    // existing project we don't yet have cached.
-    useEffect(() => {
-        const pid = projectId.trim();
-        if (!pid || !projectExists) return;
-        if (projectFieldsCache[pid] !== undefined) return; // already cached
-        let cancelled = false;
-        (async () => {
-            try {
-                const resp: any = await invoke(
-                    'tis.read_project' as any, MessageType.Request,
-                    { project_id: pid } as any,
-                );
-                if (cancelled) return;
-                if (resp?.success) {
-                    const pf = (resp.data?.project_fields ?? {}) as Record<string, any>;
-                    setProjectFieldsCache(prev => ({ ...prev, [pid]: pf }));
-                }
-            } catch (e) {
-                console.warn('[TestSetupForm] read_project failed:', e);
-            }
-        })();
-        return () => { cancelled = true; };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [projectId, projectExists]);
+    const [isValid, setIsValid] = useState(false);
+    const [methodPickerOpen, setMethodPickerOpen] = useState(false);
 
     // Seed and live-update config_fields that declare a `source`.
     useEffect(() => {
@@ -233,22 +152,18 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
         });
     }, [schema, rawValues, findTagByFqdn]);
 
-    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. Project
-    // ID must be a known project — typing an unknown name is invalid
-    // until the operator goes through the New Project dialog. Each
-    // required *config_field* must also be filled in; project_fields
-    // are validated by the dialog at create/edit time, not here.
+    // Validation: project must be known (set on Project tab + + button),
+    // sample_id non-empty, and every required config_field present. We
+    // also require the provider's projectFieldsCache for the selected
+    // project to be loaded before we stage — otherwise the recorded
+    // test.json would be missing project-level metadata.
     useEffect(() => {
         if (!schema) { setIsValid(false); return; }
         let valid = true;
         if (!projectExists) valid = false;
         if (!methodId.trim()) valid = false;
         if (!sampleId.trim()) valid = false;
+        if (valid && !tis.projectFieldsLoaded) valid = false;
 
         for (const field of schema.config_fields) {
             if (field.name === 'sample_id') continue;
@@ -258,28 +173,17 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
             }
         }
 
-        // We also gate validity on having loaded the project_fields
-        // for the selected project — staging *without* them would
-        // record a test.json that's missing project-level metadata
-        // for the lifetime of the run. The fetch happens automatically
-        // when the project is selected, so this is a tight transient
-        // window in practice.
-        if (valid && projectExists && projectFieldsCache[projectId.trim()] === undefined) {
-            valid = false;
-        }
-
         setIsValid(valid);
         if (onValidationChange) onValidationChange(valid, config);
 
         if (valid) {
             const { sample_id: _drop, ...configRest } = (config ?? {}) as any;
             // Combine persisted project_fields (managerial setup) with
-            // the per-test config_fields the operator just filled in.
-            // Keys collide in pathological project.json, in which case
-            // the per-test value wins — operators are closer to the
-            // run than the project metadata.
+            // per-test config_fields. If keys collide the per-test
+            // value wins — operators are closer to the run than the
+            // project metadata.
             const mergedConfig = {
-                ...projectFieldsForCurrent,
+                ...tis.projectFields,
                 ...configRest,
             };
             void invoke('tis.stage_test' as any, MessageType.Request, {
@@ -290,7 +194,11 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
             } as any).catch(e => console.error('[TestSetupForm] stage_test failed:', e));
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [config, schema, projectId, methodId, sampleId, projectExists, projectFieldsCache, onValidationChange, invoke]);
+    }, [
+        config, schema, projectId, methodId, sampleId,
+        projectExists, tis.projectFields, tis.projectFieldsLoaded,
+        onValidationChange, invoke,
+    ]);
 
     const isFieldValid = (field: TestFieldDef) => {
         if (!field.required) return true;
@@ -298,11 +206,6 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
         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);
     };
@@ -315,26 +218,6 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
         }
     };
 
-    // Called by ProjectInfoDialog after a successful create/update.
-    // Populates the local cache + known-projects set so the main form
-    // is immediately valid without requiring a refresh.
-    const handleProjectInfoSubmitted = (pid: string, projectFields: Record<string, any>) => {
-        justCreatedRef.current.add(pid);
-        setJustCreatedTick(t => t + 1);
-        setProjectFieldsCache(prev => ({ ...prev, [pid]: projectFields }));
-        // Refresh the dropdown so the new project shows up for any
-        // future searches in this session.
-        void fetchProjects();
-        // If the dialog created a brand-new project, also surface it
-        // as the current selection — the operator's intent is clearly
-        // "set up this project and start working on it."
-        if (projectId.trim() !== pid) setProjectIdLocal(pid);
-    };
-
-    // -----------------------------------------------------------------
-    // Per-config-field row renderer — same four-column layout as before:
-    //   label[units]  |  input  |  info-icon  |  validity-icon
-    // -----------------------------------------------------------------
     const renderConfigField = (field: TestFieldDef) => {
         if (field.name === 'sample_id') return null;
         const valid = isFieldValid(field);
@@ -389,81 +272,46 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
         );
     }
 
+    // Cross-tab guard: if no project is selected (or the typed name
+    // hasn't been created yet on the Project tab), the form is
+    // effectively useless because every staging path needs a real
+    // project_id. Render an explicit empty-state pointing the user
+    // back to the Project tab so they don't sit confused in front of
+    // a half-functional form.
+    if (!projectExists) {
+        return (
+            <div style={{ padding: '1.25rem', maxWidth: '600px' }}>
+                <h3 className="ac-form-section">No project selected</h3>
+                <p style={{ color: 'var(--text-secondary-color)', marginTop: '0.5rem' }}>
+                    Pick a project on the <strong>Project</strong> tab first
+                    {projectId.trim() !== '' && ` (or click + there to create "${projectId.trim()}")`}.
+                </p>
+            </div>
+        );
+    }
+
     const gridStyle: React.CSSProperties = {
         padding: '1.25rem',
         gridTemplateColumns: 'auto 1fr 1.75rem 1.75rem',
     };
 
-    const projectRowValid = projectExists;
-
     return (
         <div className="ac-form-grid" style={gridStyle}>
             <h3 className="ac-form-section" style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-                Project &amp; Method
+                Test Setup
                 <span style={{ color: isValid ? 'var(--green-500)' : 'var(--red-500)' }}>
                     <i className={isValid ? 'pi pi-check-circle' : 'pi pi-exclamation-circle'} />
                 </span>
+                <span style={{
+                    fontSize: '0.85em',
+                    color: 'var(--text-secondary-color)',
+                    fontWeight: 'normal',
+                    marginLeft: '0.25rem',
+                }}>
+                    project: <strong>{projectId}</strong>
+                </span>
             </h3>
 
-            <span className="ac-form-label">Project ID</span>
-            <div className="p-inputgroup" style={{ flex: 1 }}>
-                <AutoComplete
-                    value={projectId}
-                    suggestions={filteredProjects}
-                    completeMethod={searchProjects}
-                    onChange={(e) => handleProjectIdChange(e.value)}
-                    dropdown
-                    placeholder="Select an existing Project ID, or type a new one and click +"
-                    className={!projectRowValid ? 'p-invalid' : ''}
-                    style={{ flex: 1 }}
-                />
-                {/*
-                 * + button → opens the New Project dialog where the
-                 * operator (or manager) fills in project_fields.
-                 * Enabled only when the typed ID is a fresh, valid
-                 * candidate. Once the dialog completes, the project
-                 * is created on the server and added to our local
-                 * known-projects set so the main form becomes valid
-                 * immediately.
-                 */}
-                <Button
-                    icon="pi pi-plus"
-                    type="button"
-                    onClick={() => setNewProjectOpen(true)}
-                    disabled={!canCreateProject}
-                    tooltip={
-                        !projectId.trim() ? 'Type a project ID first' :
-                        !projectIdFormatValid ? 'Letters, digits, _ and - only' :
-                        knownProjects.has(projectId.trim()) ? 'Project already exists' :
-                        `Create project "${projectId.trim()}"`
-                    }
-                    tooltipOptions={{ position: 'top' }}
-                />
-                {/*
-                 * ✏️ button → opens the Edit Project Information
-                 * dialog. Enabled only when the selected project
-                 * actually exists. This is the only way to mutate
-                 * project_fields after creation; the operator can't
-                 * stumble into editing project metadata while running
-                 * a sample, which keeps the future per-user permission
-                 * gate (manager vs operator) clean.
-                 */}
-                <Button
-                    icon="pi pi-pencil"
-                    type="button"
-                    onClick={() => setEditProjectOpen(true)}
-                    disabled={!projectExists}
-                    tooltip={projectExists
-                        ? `Edit information for "${projectId.trim()}"`
-                        : 'Select an existing project to edit'}
-                    tooltipOptions={{ position: 'top' }}
-                />
-            </div>
-            <span aria-hidden="true" />
-            <span style={{ color: projectRowValid ? 'var(--green-500)' : 'var(--red-500)', display: 'flex', alignItems: 'center' }}>
-                <i className={projectRowValid ? 'pi pi-check' : 'pi pi-times'} />
-            </span>
-
             <span className="ac-form-label">Sample ID</span>
             <TextInput
                 label={undefined}
@@ -476,18 +324,6 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
                 <i className={sampleId.trim() ? 'pi pi-check' : 'pi pi-times'} />
             </span>
 
-            {/*
-             * Test Method row. Shows the current method's pretty
-             * label (or its canonical method_id when no label is
-             * declared) read-only, with an edit button that opens
-             * the picker dialog. The dialog scales past three or
-             * four methods where a SelectButton would wrap, and
-             * surfaces the per-method description so the operator
-             * can disambiguate similarly-named methods at the
-             * point of choice. The row is rendered even when only
-             * one method is declared so the operator can still open
-             * the picker and read its description.
-             */}
             {methodIds.length > 0 && (
                 <>
                     <span className="ac-form-label">Test Method</span>
@@ -518,29 +354,6 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
             <h3 className="ac-form-section" style={{ marginTop: '1rem' }}>Test Configuration</h3>
             {schema.config_fields.map(renderConfigField)}
 
-            {/*
-             * Project Information no longer renders inline. Use the
-             * + and ✏️ buttons in the Project ID row above to create
-             * or edit it. The dialogs persist project_fields on the
-             * server and the form folds them into stage_test
-             * automatically.
-             */}
-            <ProjectInfoDialog
-                visible={newProjectOpen}
-                onHide={() => setNewProjectOpen(false)}
-                mode="create"
-                projectId={projectId.trim()}
-                projectFields={schema.project_fields}
-                onSubmitted={handleProjectInfoSubmitted}
-            />
-            <ProjectInfoDialog
-                visible={editProjectOpen}
-                onHide={() => setEditProjectOpen(false)}
-                mode="edit"
-                projectId={projectId.trim()}
-                projectFields={schema.project_fields}
-                onSubmitted={handleProjectInfoSubmitted}
-            />
             <TestMethodDialog
                 visible={methodPickerOpen}
                 onHide={() => setMethodPickerOpen(false)}