@adcops/autocore-react 3.3.39 → 3.3.42

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

@@ -1 +1 @@
-{"version":3,"file":"ResultHistoryTable.d.ts","sourceRoot":"","sources":["../../src/components/ResultHistoryTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAM/D,MAAM,WAAW,uBAAuB;IACpC,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAiDhE,CAAC"}
+{"version":3,"file":"ResultHistoryTable.d.ts","sourceRoot":"","sources":["../../src/components/ResultHistoryTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAO/D,MAAM,WAAW,uBAAuB;IACpC,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAiDhE,CAAC"}

package/dist/components/ResultHistoryTable.js

@@ -1 +1 @@
-import{jsxs as _jsxs,jsx as _jsx}from"react/jsx-runtime";import React,{useState,useEffect,useContext}from"react";import{DataTable}from"primereact/datatable";import{Column}from"primereact/column";import{Button}from"primereact/button";import{EventEmitterContext}from"../core/EventEmitterContext";export const ResultHistoryTable=({projectId:t,definitionId:e})=>{const[s,r]=useState([]),[i,o]=useState(!1),{invoke:n}=useContext(EventEmitterContext),a=async()=>{o(!0);try{const s=await n("results.list_tests",{project_id:t,definition_id:e});s.success&&s.data&&s.data.tests&&r(s.data.tests)}catch(t){}o(!1)};useEffect(()=>{a()},[t,e]);return _jsxs("div",{children:[_jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:"1rem"},children:[_jsxs("h3",{children:["Test History: ",e]}),_jsx(Button,{icon:"pi pi-refresh",label:"Refresh",onClick:a,disabled:i})]}),_jsxs(DataTable,{value:s,loading:i,paginator:!0,rows:10,emptyMessage:"No tests found.",children:[_jsx(Column,{field:"run_id",header:"Run ID",sortable:!0}),_jsx(Column,{field:"start_time",header:"Date/Time",body:t=>{return(e=t.start_time)?new Date(e).toLocaleString():"";var e},sortable:!0}),_jsx(Column,{header:"Config / Results",body:t=>_jsxs("div",{style:{fontSize:"0.85em",color:"var(--text-secondary-color)"},children:[_jsxs("div",{children:[_jsx("strong",{children:"Config:"})," ",JSON.stringify(t.config)]}),_jsxs("div",{children:[_jsx("strong",{children:"Results:"})," ",JSON.stringify(t.results)]})]})})]})]})};
+import{jsxs as _jsxs,jsx as _jsx}from"react/jsx-runtime";import React,{useState,useEffect,useContext}from"react";import{DataTable}from"primereact/datatable";import{Column}from"primereact/column";import{Button}from"primereact/button";import{EventEmitterContext}from"../core/EventEmitterContext";import{MessageType}from"../hub/CommandMessage";export const ResultHistoryTable=({projectId:e,definitionId:t})=>{const[s,r]=useState([]),[i,o]=useState(!1),{invoke:n}=useContext(EventEmitterContext),a=async()=>{o(!0);try{const s=await n("results.list_tests",MessageType.Request,{project_id:e,definition_id:t});s.success&&s.data&&s.data.tests&&r(s.data.tests)}catch(e){}o(!1)};useEffect(()=>{a()},[e,t]);return _jsxs("div",{children:[_jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:"1rem"},children:[_jsxs("h3",{children:["Test History: ",t]}),_jsx(Button,{icon:"pi pi-refresh",label:"Refresh",onClick:a,disabled:i})]}),_jsxs(DataTable,{value:s,loading:i,paginator:!0,rows:10,emptyMessage:"No tests found.",children:[_jsx(Column,{field:"run_id",header:"Run ID",sortable:!0}),_jsx(Column,{field:"start_time",header:"Date/Time",body:e=>{return(t=e.start_time)?new Date(t).toLocaleString():"";var t},sortable:!0}),_jsx(Column,{header:"Config / Results",body:e=>_jsxs("div",{style:{fontSize:"0.85em",color:"var(--text-secondary-color)"},children:[_jsxs("div",{children:[_jsx("strong",{children:"Config:"})," ",JSON.stringify(e.config)]}),_jsxs("div",{children:[_jsx("strong",{children:"Results:"})," ",JSON.stringify(e.results)]})]})})]})]})};

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,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"}
+{"version":3,"file":"TestSetupForm.d.ts","sourceRoot":"","sources":["../../src/components/TestSetupForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAS/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,CA4MtD,CAAC"}

package/dist/components/TestSetupForm.js

@@ -1 +1 @@
-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(_)]})};
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import React,{useState,useEffect,useContext}from"react";import{AutoComplete}from"primereact/autocomplete";import{EventEmitterContext}from"../core/EventEmitterContext";import{MessageType}from"../hub/CommandMessage";import{ValueInput}from"./ValueInput";import{TextInput}from"./TextInput";import{InputText}from"primereact/inputtext";export const TestSetupForm=({schema:e,defaultProjectId:t="",defaultDefinitionId:s="default",onProjectChange:a,onDefinitionChange:n,onValidationChange:i})=>{const[r,o]=useState({}),[c,l]=useState(t),[m,p]=useState(s);useEffect(()=>{a&&a(c)},[c,a]),useEffect(()=>{n&&n(m)},[m,n]);const[u,f]=useState([]),[d,x]=useState([]),[j,g]=useState(!1),{invoke:h,write:_,subscribe:v,unsubscribe:y}=useContext(EventEmitterContext);useEffect(()=>{if(!e)return;const t=[...e.project_fields,...e.config_fields],s=[];for(const e of t)if(e.source){const t=v(e.source,t=>{o(s=>s[e.name]!==t?{...s,[e.name]:t}:s)});s.push(t)}return()=>{for(const e of s)y(e)}},[e,v,y]),useEffect(()=>{(async()=>{try{const e=await h("results.list_projects",MessageType.Request,{});e.success&&e.data&&e.data.projects&&f(e.data.projects)}catch(e){}})()},[h]);useEffect(()=>{if(!e)return;let t=!0;c&&""!==c.trim()||(t=!1),m&&""!==m.trim()||(t=!1);const s=[...e.project_fields,...e.config_fields];for(const e of s)if(e.required&&(void 0===r[e.name]||""===r[e.name]||null===r[e.name])){t=!1;break}g(t),i&&i(t,r)},[r,e,c,m,i]);const I=async(e,t)=>{if(o({...r,[e.name]:t}),e.source)try{await _(e.source,t)}catch(e){}},N=e=>{const t=(e=>!e.required||void 0!==r[e.name]&&""!==r[e.name]&&null!==r[e.name])(e),s="string"!==e.type&&"bool"!==e.type;return _jsxs(React.Fragment,{children:[_jsx("span",{className:"ac-form-label",children:e.name}),s?_jsx(ValueInput,{label:void 0,value:null!=r[e.name]?Number(r[e.name]):null,suffix:e.units?` ${e.units}`:void 0,onValueChanged:t=>I(e,t),className:t?"":"p-invalid"}):_jsx(TextInput,{label:void 0,value:null!=r[e.name]?String(r[e.name]):"",suffix:e.units?` ${e.units}`:void 0,onValueChanged:t=>I(e,t),className:t?"":"p-invalid"}),_jsx("span",{style:{color:t?"var(--green-500)":"var(--red-500)",display:"flex",alignItems:"center"},children:_jsx("i",{className:t?"pi pi-check":"pi pi-times"})})]},e.name)};return e?_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"})})]}),_jsx("span",{className:"ac-form-label",children:"Project ID"}),_jsx(AutoComplete,{value:c,suggestions:d,completeMethod:e=>{const t=e.query.toLowerCase();x(u.filter(e=>e.toLowerCase().includes(t)))},onChange:e=>(e=>{const t=(e||"").replace(/[^a-zA-Z0-9_]/g,"");l(t)})(e.value),dropdown:!0,placeholder:"Enter or select Project ID",className:c&&""!==c.trim()?"":"p-invalid"}),_jsx("span",{style:{color:c&&""!==c.trim()?"var(--green-500)":"var(--red-500)",display:"flex",alignItems:"center"},children:_jsx("i",{className:c&&""!==c.trim()?"pi pi-check":"pi pi-times"})}),_jsx("span",{className:"ac-form-label",children:"Definition ID"}),_jsx(InputText,{value:m,onChange:e=>(e=>{const t=e.replace(/[^a-zA-Z0-9_]/g,"");p(t)})(e.target.value),placeholder:"Enter Definition ID",className:m&&""!==m.trim()?"":"p-invalid"}),_jsx("span",{style:{color:m&&""!==m.trim()?"var(--green-500)":"var(--red-500)",display:"flex",alignItems:"center"},children:_jsx("i",{className:m&&""!==m.trim()?"pi pi-check":"pi pi-times"})}),_jsx("h3",{className:"ac-form-section",style:{marginTop:"1rem"},children:"Project Information"}),e.project_fields.map(N),_jsx("h3",{className:"ac-form-section",style:{marginTop:"1rem"},children:"Test Configuration"}),e.config_fields.map(N)]}):_jsx("div",{className:"ac-form-grid",style:{padding:"1.25rem"},children:_jsx("h3",{className:"ac-form-section",children:"No Test Definition Selected"})})};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@adcops/autocore-react",
-    "version": "3.3.39",
+    "version": "3.3.42",
     "description": "A React component library for industrial user interfaces.",
     "private": false,
     "type": "module",

package/src/components/ResultHistoryTable.tsx

@@ -3,6 +3,7 @@ import { DataTable } from 'primereact/datatable';
 import { Column } from 'primereact/column';
 import { Button } from 'primereact/button';
 import { EventEmitterContext } from '../core/EventEmitterContext';
+import { MessageType } from '../hub/CommandMessage';
 
 export interface ResultHistoryTableProps {
     projectId: string;
@@ -17,7 +18,7 @@ export const ResultHistoryTable: React.FC<ResultHistoryTableProps> = ({ projectI
     const loadTests = async () => {
         setLoading(true);
         try {
-            const resp: any = await invoke('results.list_tests' as any, {
+            const resp: any = await invoke('results.list_tests' as any, MessageType.Request, {
                 project_id: projectId,
                 definition_id: definitionId
             } as any);

package/src/components/TestSetupForm.tsx

@@ -1,9 +1,11 @@
 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';
+import { ValueInput } from './ValueInput';
+import { TextInput } from './TextInput';
+import { InputText } from 'primereact/inputtext';
 
 export interface TestFieldDef {
     name: string;
@@ -54,7 +56,36 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
     const [filteredProjects, setFilteredProjects] = useState<string[]>([]);
     
     const [isValid, setIsValid] = useState(false);
-    const { invoke } = useContext(EventEmitterContext);
+    const { invoke, write, subscribe, unsubscribe } = useContext(EventEmitterContext);
+
+    // Subscribe to external tags if a field defines a source
+    useEffect(() => {
+        if (!schema) return;
+        
+        const allFields = [...schema.project_fields, ...schema.config_fields];
+        const subs: any[] = [];
+        
+        for (const field of allFields) {
+            if (field.source) {
+                const subId = subscribe(field.source, (newVal: any) => {
+                    setConfig((prev: any) => {
+                        // Only update if it actually changed to prevent infinite loops
+                        if (prev[field.name] !== newVal) {
+                            return { ...prev, [field.name]: newVal };
+                        }
+                        return prev;
+                    });
+                });
+                subs.push(subId);
+            }
+        }
+        
+        return () => {
+            for (const subId of subs) {
+                unsubscribe(subId);
+            }
+        };
+    }, [schema, subscribe, unsubscribe]);
 
     useEffect(() => {
         const fetchProjects = async () => {
@@ -75,17 +106,13 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
         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(() => {
+        if (!schema) return;
         let valid = true;
         if (!projectId || projectId.trim() === '') valid = false;
         if (!definitionId || definitionId.trim() === '') valid = false;
@@ -93,8 +120,8 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
         const allFields = [...schema.project_fields, ...schema.config_fields];
         
         for (const field of allFields) {
-            if (field.required && !field.source) {
-                if (config[field.name] === undefined || config[field.name] === '') {
+            if (field.required) {
+                if (config[field.name] === undefined || config[field.name] === '' || config[field.name] === null) {
                     valid = false;
                     break;
                 }
@@ -107,43 +134,66 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
     }, [config, schema, projectId, definitionId, onValidationChange]);
 
     const isFieldValid = (field: TestFieldDef) => {
-        if (!field.required || field.source) return true;
-        return config[field.name] !== undefined && config[field.name] !== '';
+        if (!field.required) return true;
+        return config[field.name] !== undefined && config[field.name] !== '' && config[field.name] !== null;
     };
 
-    const renderField = (field: TestFieldDef) => {
+    const handleProjectIdChange = (value: string | null | undefined) => {
+        const val = value || '';
+        const sanitized = val.replace(/[^a-zA-Z0-9_]/g, '');
+        setProjectId(sanitized);
+    };
+
+    const handleFieldChange = async (field: TestFieldDef, val: any) => {
+        setConfig({...config, [field.name]: val});
         if (field.source) {
-            return (
-                <div key={field.name} className="ac-form-span p-inputgroup">
-                    <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>
-            );
+            try {
+                await write(field.source, val);
+            } catch(e) {
+                console.error("Failed to write to source:", e);
+            }
         }
+    };
 
+    const renderField = (field: TestFieldDef) => {
         const valid = isFieldValid(field);
+        const isNum = field.type !== 'string' && field.type !== 'bool';
 
         return (
-            <div key={field.name} className="ac-form-span p-inputgroup">
-                <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)' }}>
+            <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}
+                        suffix={field.units ? ` ${field.units}` : undefined}
+                        onValueChanged={(val) => handleFieldChange(field, val)}
+                        className={!valid ? 'p-invalid' : ''}
+                    />
+                ) : (
+                    <TextInput
+                        label={undefined}
+                        value={config[field.name] != null ? String(config[field.name]) : ''}
+                        suffix={field.units ? ` ${field.units}` : undefined}
+                        onValueChanged={(val) => handleFieldChange(field, val)}
+                        className={!valid ? 'p-invalid' : ''}
+                    />
+                )}
+                <span style={{ color: valid ? 'var(--green-500)' : 'var(--red-500)', display: 'flex', alignItems: 'center' }}>
                     <i className={valid ? "pi pi-check" : "pi pi-times"}></i>
                 </span>
-            </div>
+            </React.Fragment>
         );
     };
 
+    if (!schema) {
+        return (
+            <div className="ac-form-grid" style={{ padding: '1.25rem' }}>
+                <h3 className="ac-form-section">No Test Definition Selected</h3>
+            </div>
+        );
+    }
+
     return (
         <div className="ac-form-grid" style={{ padding: '1.25rem' }}>
             <h3 className="ac-form-section" style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
@@ -153,34 +203,30 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
                 </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>
+            <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 || projectId.trim() === '' ? 'p-invalid' : ''}
+            />
+            <span style={{ color: projectId && projectId.trim() !== '' ? 'var(--green-500)' : 'var(--red-500)', display: 'flex', alignItems: 'center' }}>
+                <i className={projectId && projectId.trim() !== '' ? "pi pi-check" : "pi pi-times"}></i>
+            </span>
             
-            <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>
+            <span className="ac-form-label">Definition ID</span>
+            <InputText 
+                value={definitionId} 
+                onChange={(e) => handleDefinitionIdChange(e.target.value)}
+                placeholder="Enter Definition ID"
+                className={!definitionId || definitionId.trim() === '' ? 'p-invalid' : ''}
+            />
+            <span style={{ color: definitionId && definitionId.trim() !== '' ? 'var(--green-500)' : 'var(--red-500)', display: 'flex', alignItems: 'center' }}>
+                <i className={definitionId && definitionId.trim() !== '' ? "pi pi-check" : "pi pi-times"}></i>
+            </span>
 
             <h3 className="ac-form-section" style={{ marginTop: '1rem' }}>Project Information</h3>
             {schema.project_fields.map(renderField)}