@adcops/autocore-react 3.3.54 → 3.3.59

package/src/components/tis/TestMethodDialog.tsx

@@ -0,0 +1,147 @@
+/*
+ * Copyright (C) 2026 Automated Design Corp. All Rights Reserved.
+ *
+ * <TestMethodDialog> — picker UI for swapping the active test method.
+ *
+ * The main form displays a single "Test Method: <label>" row with an
+ * edit button. Clicking edit opens this dialog. The dialog shows a
+ * dropdown of every method declared in the current project's
+ * `test_methods` block, plus the long-form description for whichever
+ * method the operator has the dropdown highlighted on. OK commits the
+ * choice via the supplied callback; Cancel discards.
+ *
+ * This pattern scales past three or four methods where a SelectButton
+ * starts wrapping or eating horizontal space, and gives every method
+ * room to ship a description that disambiguates similar names.
+ */
+
+import React, { useEffect, useMemo, useState } from 'react';
+import { Button } from 'primereact/button';
+import { Dialog } from 'primereact/dialog';
+import { Dropdown } from 'primereact/dropdown';
+import type { TestMethod } from './TestSetupForm';
+import { useTisSchemas } from './TisProvider';
+
+export interface TestMethodDialogProps {
+    visible: boolean;
+    onHide: () => void;
+    /** Method ID currently selected on the form. The dropdown opens
+     *  pointing at this value so the dialog reflects current state. */
+    currentMethodId: string;
+    /**
+     * Called with the chosen method_id when the operator clicks OK.
+     * Cancel does not fire this callback. The parent is responsible
+     * for actually applying the new selection (e.g., updating the
+     * provider's selection or local state).
+     */
+    onSelected: (methodId: string) => void;
+}
+
+/** Display name for one method: prefer the schema's `label`, fall
+ *  back to the canonical `method_id` key. */
+const methodLabelOf = (methodId: string, schema: TestMethod | undefined): string =>
+    (schema?.label && schema.label.length > 0) ? schema.label : methodId;
+
+export const TestMethodDialog: React.FC<TestMethodDialogProps> = ({
+    visible, onHide, currentMethodId, onSelected,
+}) => {
+    const schemas = useTisSchemas();
+
+    // Local "draft" selection — the dropdown writes to this; OK
+    // applies it. We deliberately don't update the provider's
+    // selection on every dropdown change, so a Cancel really cancels.
+    const [draftMethodId, setDraftMethodId] = useState<string>(currentMethodId);
+
+    // Re-sync the draft whenever the dialog opens so a stale value
+    // from a previous open doesn't ghost the current selection.
+    useEffect(() => {
+        if (visible) setDraftMethodId(currentMethodId);
+    }, [visible, currentMethodId]);
+
+    const options = useMemo(() => {
+        return Object.keys(schemas).map(methodId => ({
+            label: methodLabelOf(methodId, schemas[methodId]),
+            value: methodId,
+        }));
+    }, [schemas]);
+
+    const draftSchema = schemas[draftMethodId];
+    const draftDescription =
+        (draftSchema?.description && draftSchema.description.length > 0)
+            ? draftSchema.description
+            : null;
+
+    const handleOk = () => {
+        if (draftMethodId && draftMethodId !== currentMethodId) {
+            onSelected(draftMethodId);
+        }
+        onHide();
+    };
+
+    const footer = (
+        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '0.5rem' }}>
+            <Button label="Cancel" icon="pi pi-times" onClick={onHide} text />
+            <Button
+                label="OK"
+                icon="pi pi-check"
+                onClick={handleOk}
+                disabled={!draftMethodId}
+            />
+        </div>
+    );
+
+    return (
+        <Dialog
+            header="Select Test Method"
+            visible={visible}
+            onHide={onHide}
+            footer={footer}
+            modal
+            style={{ width: 'min(560px, 90vw)' }}
+        >
+            {options.length === 0 ? (
+                <p style={{ color: 'var(--text-secondary-color)' }}>
+                    No test methods are declared in this project's <code>test_methods</code> block.
+                </p>
+            ) : (
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+                        <label htmlFor="acTestMethodDropdown" style={{ flexShrink: 0 }}>
+                            Test Method:
+                        </label>
+                        <Dropdown
+                            inputId="acTestMethodDropdown"
+                            value={draftMethodId}
+                            options={options}
+                            onChange={(e) => setDraftMethodId(e.value)}
+                            placeholder="Select a method"
+                            style={{ flex: 1 }}
+                        />
+                    </div>
+                    {/*
+                     * Show the description region whenever we have a
+                     * draft selection — keeps layout stable even when
+                     * the operator picks a method without one (we just
+                     * render a muted placeholder rather than collapsing
+                     * the dialog by ~3rem).
+                     */}
+                    <div
+                        style={{
+                            padding: '0.75rem 1rem',
+                            background: 'var(--surface-100)',
+                            borderRadius: '6px',
+                            minHeight: '4.5rem',
+                            color: draftDescription
+                                ? 'var(--text-color)'
+                                : 'var(--text-secondary-color)',
+                            fontStyle: draftDescription ? 'normal' : 'italic',
+                            whiteSpace: 'pre-wrap',
+                        }}
+                    >
+                        {draftDescription ?? 'No description provided for this test method.'}
+                    </div>
+                </div>
+            )}
+        </Dialog>
+    );
+};