@adcops/autocore-react 3.3.54 → 3.3.59

package/src/components/tis/TestSetupForm.tsx

@@ -1,20 +1,30 @@
-import React, { useState, useEffect, useContext, useMemo } from 'react';
+import React, { useState, useEffect, useContext, useMemo, useRef } from 'react';
 import { AutoComplete } from 'primereact/autocomplete';
 import type { AutoCompleteCompleteEvent } from 'primereact/autocomplete';
-import { SelectButton } from 'primereact/selectbutton';
+import { Button } from 'primereact/button';
+import { InputText } from 'primereact/inputtext';
+import { Tooltip } from 'primereact/tooltip';
 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 { ProjectInfoDialog } from './ProjectInfoDialog';
+import { TestMethodDialog } from './TestMethodDialog';
 
 export interface TestFieldDef {
+    /** Canonical key — wire format, generated code, on-disk JSON. */
     name: string;
     type: string;
     units?: string;
     required?: boolean;
     source?: string;
+    /** Pretty label rendered by the form. Falls back to `name`. Units
+     *  are appended automatically; don't pre-format `[mm]` into label. */
+    label?: string;
+    /** Long-form guidance surfaced as a hover tooltip on an info icon. */
+    description?: string;
 }
 
 export interface TestMethod {
@@ -22,18 +32,17 @@ export interface TestMethod {
     config_fields: TestFieldDef[];
     cycle_fields: TestFieldDef[];
     results_fields: TestFieldDef[];
+    /** 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;
 }
 
 /**
  * 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.
+ * from the surrounding `<TisProvider>`.
  */
 export interface TestSetupFormProps {
     schema?: TestMethod;
@@ -44,6 +53,32 @@ export interface TestSetupFormProps {
     onValidationChange?: (isValid: boolean, config: any) => void;
 }
 
+// -------------------------------------------------------------------------
+// Helpers
+// -------------------------------------------------------------------------
+
+const labelOf = (f: TestFieldDef): string => {
+    const base = f.label && f.label.length > 0 ? f.label : f.name;
+    return f.units ? `${base} [${f.units}]` : base;
+};
+
+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,
@@ -58,9 +93,6 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
 
     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 || ''
     );
@@ -70,13 +102,8 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
     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 });
@@ -100,10 +127,6 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
         // 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);
@@ -113,16 +136,90 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
 
     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);
 
-    // Seed and live-update fields that declare a `source` (FQDN).
+    // 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);
+        }
+    };
+
+    useEffect(() => {
+        fetchProjects();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [invoke]);
+
+    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]);
+
+    // Seed and live-update config_fields that declare a `source`.
     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
+            for (const field of schema.config_fields) {
+                if (field.name === 'sample_id') continue;
                 if (!field.source) continue;
                 const tag = findTagByFqdn(field.source);
                 if (!tag) continue;
@@ -136,61 +233,64 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
         });
     }, [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.
+    // 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.
     useEffect(() => {
         if (!schema) { setIsValid(false); return; }
         let valid = true;
-        if (!projectId.trim()) valid = false;
+        if (!projectExists) 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
+        for (const field of schema.config_fields) {
+            if (field.name === 'sample_id') continue;
             if (field.required) {
                 const v = config[field.name];
                 if (v === undefined || v === '' || v === null) { valid = false; break; }
             }
         }
+
+        // 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);
 
-        // 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;
+            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.
+            const mergedConfig = {
+                ...projectFieldsForCurrent,
+                ...configRest,
+            };
             void invoke('tis.stage_test' as any, MessageType.Request, {
                 project_id: projectId,
                 method_id:  methodId,
                 sample_id:  sampleId,
-                config:     rest,
+                config:     mergedConfig,
             } as any).catch(e => console.error('[TestSetupForm] stage_test failed:', e));
         }
-    }, [config, schema, projectId, methodId, sampleId, onValidationChange, invoke]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [config, schema, projectId, methodId, sampleId, projectExists, projectFieldsCache, onValidationChange, invoke]);
 
     const isFieldValid = (field: TestFieldDef) => {
         if (!field.required) return true;
@@ -199,7 +299,7 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
     };
 
     const handleProjectIdChange = (value: string | null | undefined) => {
-        const sanitized = (value || '').replace(/[^a-zA-Z0-9_]/g, '');
+        const sanitized = (value || '').replace(/[^a-zA-Z0-9_-]/g, '');
         setProjectIdLocal(sanitized);
     };
 
@@ -215,13 +315,34 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
         }
     };
 
-    const renderField = (field: TestFieldDef) => {
+    // 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);
         const isNum = field.type !== 'string' && field.type !== 'bool';
+        const tooltipId = `acFormInfo_${field.name}`;
         return (
             <React.Fragment key={field.name}>
-                <span className="ac-form-label">{field.name}</span>
+                <span className="ac-form-label">{labelOf(field)}</span>
                 {isNum ? (
                     <ValueInput
                         label={undefined}
@@ -237,7 +358,20 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
                         className={!valid ? 'p-invalid' : ''}
                     />
                 )}
-                <span className="ac-form-units">{field.units ?? ''}</span>
+                {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>
+                    </>
+                ) : (
+                    <span aria-hidden="true" />
+                )}
                 <span style={{ color: valid ? 'var(--green-500)' : 'var(--red-500)', display: 'flex', alignItems: 'center' }}>
                     <i className={valid ? 'pi pi-check' : 'pi pi-times'} />
                 </span>
@@ -255,8 +389,15 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
         );
     }
 
+    const gridStyle: React.CSSProperties = {
+        padding: '1.25rem',
+        gridTemplateColumns: 'auto 1fr 1.75rem 1.75rem',
+    };
+
+    const projectRowValid = projectExists;
+
     return (
-        <div className="ac-form-grid" style={{ padding: '1.25rem' }}>
+        <div className="ac-form-grid" style={gridStyle}>
             <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)' }}>
@@ -265,18 +406,62 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
             </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'} />
+            <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>
@@ -286,29 +471,82 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
                 onValueChanged={handleSampleIdChange}
                 className={!sampleId.trim() ? 'p-invalid' : ''}
             />
-            <span />
+            <span aria-hidden="true" />
             <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 && (
+            {/*
+             * 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>
-                    <SelectButton
-                        value={methodId}
-                        options={methodIds.map(id => ({ label: id, value: id }))}
-                        onChange={(e) => e.value && setMethodIdLocal(e.value)}
-                    />
-                    <span />
-                    <span />
+                    <div className="p-inputgroup" style={{ flex: 1 }}>
+                        <InputText
+                            value={methodLabelOf(methodId, schema)}
+                            readOnly
+                            style={{ flex: 1 }}
+                            tabIndex={-1}
+                        />
+                        <Button
+                            icon="pi pi-pencil"
+                            type="button"
+                            onClick={() => setMethodPickerOpen(true)}
+                            tooltip={methodIds.length > 1
+                                ? 'Change test method'
+                                : 'View test method details'}
+                            tooltipOptions={{ position: 'top' }}
+                        />
+                    </div>
+                    <span aria-hidden="true" />
+                    <span style={{ color: methodId ? 'var(--green-500)' : 'var(--red-500)', display: 'flex', alignItems: 'center' }}>
+                        <i className={methodId ? 'pi pi-check' : 'pi pi-times'} />
+                    </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)}
+            {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)}
+                currentMethodId={methodId}
+                onSelected={(picked) => setMethodIdLocal(picked)}
+            />
         </div>
     );
 };

package/src/components/tis/TisProvider.tsx

@@ -191,7 +191,9 @@ export const TisProvider: React.FC<TisProviderProps> = ({ children, defaultMetho
     });
 
     // -----------------------------------------------------------------
-    // Schema load — once on mount
+    // Schema load — once on mount. The Hub's `invoke()` queues sends
+    // while the WS is still CONNECTING and flushes them on `onopen`,
+    // so this works whether or not the handshake has finished yet.
     // -----------------------------------------------------------------
     useEffect(() => {
         let cancelled = false;
@@ -213,7 +215,6 @@ export const TisProvider: React.FC<TisProviderProps> = ({ children, defaultMetho
             }
         })();
         return () => { cancelled = true; };
-        // We intentionally only run once on mount — schemas are stable.
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);