@adcops/autocore-react 3.3.23 → 3.3.25

package/dist/components/TestSetupForm.d.ts

@@ -13,11 +13,12 @@ export interface TestDefinition {
     results_fields: TestFieldDef[];
 }
 export interface TestSetupFormProps {
-    projectId: string;
-    definitionId: string;
     schema: TestDefinition;
-    onStartTest: (config: any) => void;
-    onCancel?: () => void;
+    defaultProjectId?: string;
+    defaultDefinitionId?: string;
+    onProjectChange?: (projectId: string) => void;
+    onDefinitionChange?: (definitionId: string) => void;
+    onValidationChange?: (isValid: boolean, config: any) => void;
 }
 export declare const TestSetupForm: React.FC<TestSetupFormProps>;
 //# sourceMappingURL=TestSetupForm.d.ts.map

package/dist/components/TestSetupForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TestSetupForm.d.ts","sourceRoot":"","sources":["../../src/components/TestSetupForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,MAAM,WAAW,YAAY;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,cAAc;IAC3B,cAAc,EAAE,YAAY,EAAE,CAAC;IAC/B,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,YAAY,EAAE,YAAY,EAAE,CAAC;IAC7B,cAAc,EAAE,YAAY,EAAE,CAAC;CAClC;AAED,MAAM,WAAW,kBAAkB;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,cAAc,CAAC;IACvB,WAAW,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAsEtD,CAAC"}
+{"version":3,"file":"TestSetupForm.d.ts","sourceRoot":"","sources":["../../src/components/TestSetupForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAO/D,MAAM,WAAW,YAAY;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,cAAc;IAC3B,cAAc,EAAE,YAAY,EAAE,CAAC;IAC/B,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,YAAY,EAAE,YAAY,EAAE,CAAC;IAC7B,cAAc,EAAE,YAAY,EAAE,CAAC;CAClC;AAED,MAAM,WAAW,kBAAkB;IAC/B,MAAM,EAAE,cAAc,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,kBAAkB,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;CAChE;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAgKtD,CAAC"}

package/dist/components/TestSetupForm.js

@@ -1 +1 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import React,{useState,useEffect}from"react";import{Button}from"primereact/button";import{InputText}from"primereact/inputtext";export const TestSetupForm=({schema:e,onStartTest:s,onCancel:a})=>{const[t,n]=useState({}),[r,i]=useState(!1);useEffect(()=>{let s=!0;const a=[...e.project_fields,...e.config_fields];for(const e of a)if(e.required&&!e.source&&(void 0===t[e.name]||""===t[e.name])){s=!1;break}i(s)},[t,e]);const o=e=>e.source?_jsxs("div",{className:"ac-form-span p-inputgroup",children:[_jsx("span",{className:"p-inputgroup-addon",children:e.name}),_jsx(InputText,{value:`Auto-fetched from ${e.source}`,disabled:!0}),e.units&&_jsx("span",{className:"p-inputgroup-addon",children:e.units})]},e.name):_jsxs("div",{className:"ac-form-span p-inputgroup",children:[_jsxs("span",{className:"p-inputgroup-addon",children:[e.name," ",e.required?"*":""]}),_jsx(InputText,{value:t[e.name]||"",onChange:s=>n({...t,[e.name]:s.target.value}),placeholder:`Enter ${e.name}`}),e.units&&_jsx("span",{className:"p-inputgroup-addon",children:e.units})]},e.name);return _jsxs("div",{className:"ac-form-grid",style:{padding:"1.25rem"},children:[_jsx("h3",{className:"ac-form-section",children:"Project Information"}),e.project_fields.map(o),_jsx("h3",{className:"ac-form-section",style:{marginTop:"1rem"},children:"Test Configuration"}),e.config_fields.map(o),_jsxs("div",{className:"ac-form-wide",style:{display:"flex",gap:"1rem",marginTop:"2rem"},children:[_jsx(Button,{label:"Start Test",icon:"pi pi-play",severity:"success",disabled:!r,onClick:()=>s(t)}),a&&_jsx(Button,{label:"Cancel",icon:"pi pi-times",severity:"secondary",onClick:a})]})]})};
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import React,{useState,useEffect,useContext}from"react";import{InputText}from"primereact/inputtext";import{AutoComplete}from"primereact/autocomplete";import{EventEmitterContext}from"../core/EventEmitterContext";import{MessageType}from"../hub/CommandMessage";export const TestSetupForm=({schema:e,defaultProjectId:s="",defaultDefinitionId:a="default",onProjectChange:t,onDefinitionChange:n,onValidationChange:r})=>{const[i,o]=useState({}),[c,p]=useState(s),[l,m]=useState(a);useEffect(()=>{t&&t(c)},[c,t]),useEffect(()=>{n&&n(l)},[l,n]);const[u,d]=useState([]),[f,x]=useState([]),[j,g]=useState(!1),{invoke:h}=useContext(EventEmitterContext);useEffect(()=>{(async()=>{try{const e=await h("results.list_projects",MessageType.Request,{});e.success&&e.data&&e.data.projects&&d(e.data.projects)}catch(e){}})()},[h]);useEffect(()=>{let s=!0;c&&""!==c.trim()||(s=!1),l&&""!==l.trim()||(s=!1);const a=[...e.project_fields,...e.config_fields];for(const e of a)if(e.required&&!e.source&&(void 0===i[e.name]||""===i[e.name])){s=!1;break}g(s),r&&r(s,i)},[i,e,c,l,r]);const _=e=>{if(e.source)return _jsxs("div",{className:"ac-form-span p-inputgroup",children:[_jsx("span",{className:"p-inputgroup-addon",children:e.name}),_jsx(InputText,{value:`Auto-fetched from ${e.source}`,disabled:!0}),e.units&&_jsx("span",{className:"p-inputgroup-addon",children:e.units}),_jsx("span",{className:"p-inputgroup-addon",style:{color:"var(--green-500)"},children:_jsx("i",{className:"pi pi-check"})})]},e.name);const s=(e=>!(e.required&&!e.source)||void 0!==i[e.name]&&""!==i[e.name])(e);return _jsxs("div",{className:"ac-form-span p-inputgroup",children:[_jsx("span",{className:"p-inputgroup-addon",children:e.name}),_jsx(InputText,{value:i[e.name]||"",onChange:s=>o({...i,[e.name]:s.target.value}),placeholder:`Enter ${e.name}`,className:s?"":"p-invalid"}),e.units&&_jsx("span",{className:"p-inputgroup-addon",children:e.units}),_jsx("span",{className:"p-inputgroup-addon",style:{color:s?"var(--green-500)":"var(--red-500)"},children:_jsx("i",{className:s?"pi pi-check":"pi pi-times"})})]},e.name)};return _jsxs("div",{className:"ac-form-grid",style:{padding:"1.25rem"},children:[_jsxs("h3",{className:"ac-form-section",style:{display:"flex",alignItems:"center",gap:"10px"},children:["Project & Definition",_jsx("span",{style:{color:j?"var(--green-500)":"var(--red-500)"},children:_jsx("i",{className:j?"pi pi-check-circle":"pi pi-exclamation-circle"})})]}),_jsxs("div",{className:"ac-form-span p-inputgroup",children:[_jsx("span",{className:"p-inputgroup-addon",children:"Project ID"}),_jsx(AutoComplete,{value:c,suggestions:f,completeMethod:e=>{const s=e.query.toLowerCase();x(u.filter(e=>e.toLowerCase().includes(s)))},onChange:e=>(e=>{const s=e.replace(/[^a-zA-Z0-9_]/g,"");p(s)})(e.value),dropdown:!0,placeholder:"Enter or select Project ID",className:c&&""!==c.trim()?"":"p-invalid"}),_jsx("span",{className:"p-inputgroup-addon",style:{color:c&&""!==c.trim()?"var(--green-500)":"var(--red-500)"},children:_jsx("i",{className:c&&""!==c.trim()?"pi pi-check":"pi pi-times"})})]}),_jsxs("div",{className:"ac-form-span p-inputgroup",children:[_jsx("span",{className:"p-inputgroup-addon",children:"Definition ID"}),_jsx(InputText,{value:l,onChange:e=>(e=>{const s=e.replace(/[^a-zA-Z0-9_]/g,"");m(s)})(e.target.value),placeholder:"Enter Definition ID",className:l&&""!==l.trim()?"":"p-invalid"}),_jsx("span",{className:"p-inputgroup-addon",style:{color:l&&""!==l.trim()?"var(--green-500)":"var(--red-500)"},children:_jsx("i",{className:l&&""!==l.trim()?"pi pi-check":"pi pi-times"})})]}),_jsx("h3",{className:"ac-form-section",style:{marginTop:"1rem"},children:"Project Information"}),e.project_fields.map(_),_jsx("h3",{className:"ac-form-section",style:{marginTop:"1rem"},children:"Test Configuration"}),e.config_fields.map(_)]})};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@adcops/autocore-react",
-    "version": "3.3.23",
+    "version": "3.3.25",
     "description": "A React component library for industrial user interfaces.",
     "private": false,
     "type": "module",
@@ -40,7 +40,7 @@
     "homepage": "https://automateddesign.com",
     "peerDependencies": {
         "@types/react": "^18",
-        "primereact": ">=10.6.3",
+        "primereact": ">=10.9.7",
         "react": "^18",
         "react-dom": "^18"
     },

package/src/components/TestSetupForm.tsx

@@ -1,6 +1,9 @@
-import React, { useState, useEffect } from 'react';
-import { Button } from 'primereact/button';
+import React, { useState, useEffect, useContext } from 'react';
 import { InputText } from 'primereact/inputtext';
+import { AutoComplete } from 'primereact/autocomplete';
+import type { AutoCompleteCompleteEvent } from 'primereact/autocomplete';
+import { EventEmitterContext } from '../core/EventEmitterContext';
+import { MessageType } from '../hub/CommandMessage';
 
 export interface TestFieldDef {
     name: string;
@@ -18,19 +21,75 @@ export interface TestDefinition {
 }
 
 export interface TestSetupFormProps {
-    projectId: string;
-    definitionId: string;
     schema: TestDefinition;
-    onStartTest: (config: any) => void;
-    onCancel?: () => void;
+    defaultProjectId?: string;
+    defaultDefinitionId?: string;
+    onProjectChange?: (projectId: string) => void;
+    onDefinitionChange?: (definitionId: string) => void;
+    onValidationChange?: (isValid: boolean, config: any) => void;
 }
 
-export const TestSetupForm: React.FC<TestSetupFormProps> = ({ schema, onStartTest, onCancel }) => {
+export const TestSetupForm: React.FC<TestSetupFormProps> = ({ 
+    schema, 
+    defaultProjectId = "", 
+    defaultDefinitionId = "default", 
+    onProjectChange,
+    onDefinitionChange,
+    onValidationChange
+}) => {
     const [config, setConfig] = useState<any>({});
+    const [projectId, setProjectId] = useState<string>(defaultProjectId);
+    const [definitionId, setDefinitionId] = useState<string>(defaultDefinitionId);
+    
+    // Notify parent when projectId or definitionId changes
+    useEffect(() => {
+        if (onProjectChange) onProjectChange(projectId);
+    }, [projectId, onProjectChange]);
+
+    useEffect(() => {
+        if (onDefinitionChange) onDefinitionChange(definitionId);
+    }, [definitionId, onDefinitionChange]);
+    
+    const [existingProjects, setExistingProjects] = useState<string[]>([]);
+    const [filteredProjects, setFilteredProjects] = useState<string[]>([]);
+    
     const [isValid, setIsValid] = useState(false);
+    const { invoke } = useContext(EventEmitterContext);
+
+    useEffect(() => {
+        const fetchProjects = async () => {
+            try {
+                const resp: any = await invoke('results.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)));
+    };
+
+    const handleProjectIdChange = (value: string) => {
+        const sanitized = value.replace(/[^a-zA-Z0-9_]/g, '');
+        setProjectId(sanitized);
+    };
+
+    const handleDefinitionIdChange = (value: string) => {
+        const sanitized = value.replace(/[^a-zA-Z0-9_]/g, '');
+        setDefinitionId(sanitized);
+    };
 
     useEffect(() => {
         let valid = true;
+        if (!projectId || projectId.trim() === '') valid = false;
+        if (!definitionId || definitionId.trim() === '') valid = false;
+        
         const allFields = [...schema.project_fields, ...schema.config_fields];
         
         for (const field of allFields) {
@@ -42,7 +101,15 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({ schema, onStartTes
             }
         }
         setIsValid(valid);
-    }, [config, schema]);
+        if (onValidationChange) {
+            onValidationChange(valid, config);
+        }
+    }, [config, schema, projectId, definitionId, onValidationChange]);
+
+    const isFieldValid = (field: TestFieldDef) => {
+        if (!field.required || field.source) return true;
+        return config[field.name] !== undefined && config[field.name] !== '';
+    };
 
     const renderField = (field: TestFieldDef) => {
         if (field.source) {
@@ -51,48 +118,75 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({ schema, onStartTes
                     <span className="p-inputgroup-addon">{field.name}</span>
                     <InputText value={`Auto-fetched from ${field.source}`} disabled />
                     {field.units && <span className="p-inputgroup-addon">{field.units}</span>}
+                    <span className="p-inputgroup-addon" style={{ color: 'var(--green-500)' }}>
+                        <i className="pi pi-check"></i>
+                    </span>
                 </div>
             );
         }
 
+        const valid = isFieldValid(field);
+
         return (
             <div key={field.name} className="ac-form-span p-inputgroup">
-                <span className="p-inputgroup-addon">{field.name} {field.required ? '*' : ''}</span>
+                <span className="p-inputgroup-addon">{field.name}</span>
                 <InputText 
                     value={config[field.name] || ''} 
                     onChange={(e) => setConfig({...config, [field.name]: e.target.value})}
                     placeholder={`Enter ${field.name}`}
+                    className={!valid ? 'p-invalid' : ''}
                 />
                 {field.units && <span className="p-inputgroup-addon">{field.units}</span>}
+                <span className="p-inputgroup-addon" style={{ color: valid ? 'var(--green-500)' : 'var(--red-500)' }}>
+                    <i className={valid ? "pi pi-check" : "pi pi-times"}></i>
+                </span>
             </div>
         );
     };
 
     return (
         <div className="ac-form-grid" style={{ padding: '1.25rem' }}>
-            <h3 className="ac-form-section">Project Information</h3>
+            <h3 className="ac-form-section" style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+                Project & Definition 
+                <span style={{ color: isValid ? 'var(--green-500)' : 'var(--red-500)' }}>
+                    <i className={isValid ? "pi pi-check-circle" : "pi pi-exclamation-circle"}></i>
+                </span>
+            </h3>
+            
+            <div className="ac-form-span p-inputgroup">
+                <span className="p-inputgroup-addon">Project ID</span>
+                <AutoComplete 
+                    value={projectId} 
+                    suggestions={filteredProjects} 
+                    completeMethod={searchProjects} 
+                    onChange={(e) => handleProjectIdChange(e.value)} 
+                    dropdown 
+                    placeholder="Enter or select Project ID"
+                    className={!projectId || projectId.trim() === '' ? 'p-invalid' : ''}
+                />
+                <span className="p-inputgroup-addon" style={{ color: projectId && projectId.trim() !== '' ? 'var(--green-500)' : 'var(--red-500)' }}>
+                    <i className={projectId && projectId.trim() !== '' ? "pi pi-check" : "pi pi-times"}></i>
+                </span>
+            </div>
+            
+            <div className="ac-form-span p-inputgroup">
+                <span className="p-inputgroup-addon">Definition ID</span>
+                <InputText 
+                    value={definitionId} 
+                    onChange={(e) => handleDefinitionIdChange(e.target.value)}
+                    placeholder="Enter Definition ID"
+                    className={!definitionId || definitionId.trim() === '' ? 'p-invalid' : ''}
+                />
+                <span className="p-inputgroup-addon" style={{ color: definitionId && definitionId.trim() !== '' ? 'var(--green-500)' : 'var(--red-500)' }}>
+                    <i className={definitionId && definitionId.trim() !== '' ? "pi pi-check" : "pi pi-times"}></i>
+                </span>
+            </div>
+
+            <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 className="ac-form-wide" style={{ display: 'flex', gap: '1rem', marginTop: '2rem' }}>
-                <Button 
-                    label="Start Test" 
-                    icon="pi pi-play" 
-                    severity="success" 
-                    disabled={!isValid} 
-                    onClick={() => onStartTest(config)} 
-                />
-                {onCancel && (
-                    <Button 
-                        label="Cancel" 
-                        icon="pi pi-times" 
-                        severity="secondary" 
-                        onClick={onCancel} 
-                    />
-                )}
-            </div>
         </div>
     );
 };