fix(#246): support temporary datatypes on the script form

Also improve numeric field options to distinguish float vs int, integer vs non-neg integer

Author: marisademeglio

src/renderer/components/Fields/CustomField.tsx

@@ -1,9 +1,10 @@
 import { useWindowStore } from 'renderer/store'
 import { CustomFieldDocumentation } from './CustomFieldDocumentation'
 import { ScriptItemBase, TypeChoice, ValueChoice } from 'shared/types'
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useMemo } from 'react'
 import { ControlledInput } from './ControlledInput'
 import { MarkdownDescription } from './MarkdownDescription'
+import { fetchTemporaryDatatype } from 'renderer/utils/temp-datatype'
 
 export function CustomField({
     item,
@@ -21,6 +22,20 @@ export function CustomField({
     const { pipeline } = useWindowStore()
     const [value, setValue] = useState(initialValue)
     const [userInteracted, setUserInteracted] = useState(false) // false if the user started typing
+    const [datatype, setDatatype] = useState(
+        pipeline.datatypes.find((dt) => dt.id == item.type) ?? null
+    )
+
+    useMemo(() => {
+        const fetchData = async () => {
+            let datatypeDetails = await fetchTemporaryDatatype(item.type)
+            // @ts-ignore
+            setDatatype({ ...datatypeDetails })
+        }
+        if (!datatype) {
+            fetchData().catch()
+        }
+    }, [])
 
     useEffect(() => {
         const elem = document.getElementById(controlId) as HTMLInputElement
@@ -38,16 +53,13 @@ export function CustomField({
               'aria-invalid': false,
           }
 
-    // find the datatype in the pipeline.datatypes store
-    let datatype = pipeline.datatypes.find((dt) => dt.id == item.type)
-
     let onChangeValue = (newValue) => {
         setUserInteracted(true)
         setValue(newValue)
         onChange(newValue)
     }
 
-    if (datatype) {
+    if (datatype && datatype.choices) {
         // if there are value choices, make a dropdown select
         let valueChoices = datatype.choices.filter((item) =>
             item.hasOwnProperty('value')

src/renderer/components/Fields/FormField.tsx

@@ -107,6 +107,31 @@ export function FormField({
                     )}
                 </>
             )
+        } else if (
+            ['nonNegativeInteger', 'float', 'number'].includes(inputType)
+        ) {
+            return (
+                <>
+                    <input
+                        type="number"
+                        min={inputType == 'nonNegativeInteger' ? 1 : 'any'}
+                        step={inputType == 'float' ? 0.01 : 1}
+                        required={item.required}
+                        onChange={(e) => onChange(e.target.value, item)}
+                        id={controlId}
+                        defaultValue={initialValue}
+                    ></input>
+                    {error && (
+                        <span
+                            id={controlId + '-error'}
+                            className="field-errors"
+                            aria-live="polite"
+                        >
+                            {error}
+                        </span>
+                    )}
+                </>
+            )
         } else if (inputType == 'custom') {
             return (
                 <CustomField

src/renderer/utils/utils.ts

@@ -28,7 +28,7 @@ export function findValue(
     isStylesheetParameter: boolean
 ) {
     if (!jobRequest) return ''
-    let arr = null;
+    let arr = null
     if (kind == 'input') {
         arr = jobRequest.inputs
     } else {
@@ -65,17 +65,13 @@ export function findInputType(type) {
     } else if (['xsd:string', 'xs:string', 'string'].includes(type)) {
         inputType = 'text'
     } else if (
-        [
-            'xsd:integer',
-            'xsd:float',
-            'xsd:double',
-            'xsd:decimal',
-            'xs:integer',
-            'integer',
-            'number',
-        ].includes(type)
+        ['xsd:integer', 'xs:integer', 'integer', 'number'].includes(type)
     ) {
         inputType = 'number'
+    } else if (type == 'nonNegativeInteger') {
+        inputType = 'nonNegativeInteger'
+    } else if (['xsd:float', 'xsd:double', 'xsd:decimal'].includes(type)) {
+        inputType = 'float'
     } else if (type == '') {
         inputType = 'text'
     } else {