Further implementation of script testing (e.g.,record-type scripts working); add logs to test script output

src/qqq/components/scripts/ScriptEditor.tsx

@@ -192,7 +192,7 @@ function ScriptEditor({title, scriptId, contents, closeCallback, tableName, fiel
                openTool &&
                <Box sx={{height: "45%"}} pt={2}>
                   {
-                     openTool == "test" && <ScriptTestForm scriptDefinition={scriptDefinition} tableName={tableName} fieldName={fieldName} recordId={recordId} code={updatedCode} />
+                     openTool == "test" && <ScriptTestForm scriptId={scriptId} scriptDefinition={scriptDefinition} tableName={tableName} fieldName={fieldName} recordId={recordId} code={updatedCode} />
                   }
                   {
                      openTool == "docs" && <ScriptDocsForm helpText={scriptTypeRecord?.values.get("helpText")} exampleCode={scriptTypeRecord?.values.get("sampleCode")} aceEditorHeight="100%" />

src/qqq/components/scripts/ScriptLogsView.tsx

@@ -63,7 +63,6 @@ function ScriptLogsView({logs}: Props): JSX.Element
                      {
                         for (let i = 0; i < logRecord.values.get("scriptLogLine").length; i++)
                         {
-                           console.log(" += " + i);
                            logs += (logRecord.values.get("scriptLogLine")[i].values.text + "\n");
                         }
                      }

src/qqq/components/scripts/ScriptTestForm.tsx

@@ -19,15 +19,26 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+import {QException} from "@kingsrook/qqq-frontend-core/lib/exceptions/QException";
 import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
+import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
+import {QJobComplete} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobComplete";
+import {QJobError} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobError";
 import {Typography} from "@mui/material";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Card from "@mui/material/Card";
 import Grid from "@mui/material/Grid";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableContainer from "@mui/material/TableContainer";
+import TableRow from "@mui/material/TableRow";
 import TextField from "@mui/material/TextField";
+import FormData from "form-data";
 import React, {useState} from "react";
 import MDTypography from "qqq/components/legacy/MDTypography";
+import DataTableBodyCell from "qqq/components/widgets/tables/cells/DataTableBodyCell";
+import DataTableHeadCell from "qqq/components/widgets/tables/cells/DataTableHeadCell";
 import Client from "qqq/utils/qqq/Client";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
 
@@ -39,6 +50,7 @@ interface AssociatedScriptDefinition
 
 interface Props
 {
+   scriptId: number;
    scriptDefinition: AssociatedScriptDefinition;
    tableName: string;
    fieldName: string;
@@ -52,10 +64,11 @@ ScriptTestForm.defaultProps = {
 
 const qController = Client.getInstance();
 
-function ScriptTestForm({scriptDefinition, tableName, fieldName, recordId, code}: Props): JSX.Element
+function ScriptTestForm({scriptId, scriptDefinition, tableName, fieldName, recordId, code}: Props): JSX.Element
 {
    const [testInputValues, setTestInputValues] = useState({} as any);
    const [testOutputValues, setTestOutputValues] = useState({} as any);
+   const [logLines, setLogLines] = useState([] as any[])
    const [testException, setTestException] = useState(null as string)
    const [firstRender, setFirstRender] = useState(true);
 
@@ -68,7 +81,7 @@ function ScriptTestForm({scriptDefinition, tableName, fieldName, recordId, code}
    {
       scriptDefinition.testInputFields.forEach((field: QFieldMetaData) =>
       {
-         testInputValues[field.name] = "";
+         testInputValues[field.name] = field.defaultValue ?? "";
       });
    }
 
@@ -84,27 +97,81 @@ function ScriptTestForm({scriptDefinition, tableName, fieldName, recordId, code}
       }
 
       setTestOutputValues({});
+      setLogLines([]);
       setTestException(null);
 
       (async () =>
       {
-         const output = await qController.testScript(tableName, recordId, fieldName, code, inputValues);
+         try
-         console.log("got output:")
-         console.log(output);
-         console.log(Object.keys(output));
-         setTestOutputValues(output.outputObject);
-         if(output.exception)
          {
-            setTestException(output.exception.message)
+            let output;
-            console.log(`set test exception to ${output.exception.message}`);
+            if(tableName && recordId && fieldName)
+            {
+               /////////////////////////////////////////////////////////////////
+               // associated record scripts - run this way (at least for now) //
+               /////////////////////////////////////////////////////////////////
+               output = await qController.testScript(tableName, recordId, fieldName, code, inputValues);
+            }
+            else
+            {
+               const formData = new FormData();
+               formData.append("scriptId", scriptId);
+               formData.append("code", code);
+
+               for(let fieldName of inputValues.keys())
+               {
+                  formData.append(fieldName, inputValues.get(fieldName));
+               }
+
+               const processResult = await qController.processRun("testScript", formData, null, true);
+
+               if (processResult instanceof QJobError)
+               {
+                  const jobError = processResult as QJobError
+                  setTestException(jobError.userFacingError ?? jobError.error)
+                  return;
+               }
+
+               const jobComplete = processResult as QJobComplete
+               output = jobComplete.values;
+            }
+
+            console.log("got output:")
+            console.log(output);
+            console.log(Object.keys(output));
+            setTestOutputValues(output.outputObject ?? {});
+            if(output.exception)
+            {
+               setTestException(output.exception.message)
+               console.log(`set test exception to ${output.exception.message}`);
+            }
+
+            if(output.scriptLogLines && output.scriptLogLines.length)
+            {
+               const scriptLogLines = [];
+               for(var i = 0; i<output.scriptLogLines.length; i++)
+               {
+                  scriptLogLines.push(output.scriptLogLines[i].values);
+               }
+               setLogLines(scriptLogLines);
+            }
+         }
+         catch(e)
+         {
+            console.warn(e);
+            if(e instanceof QException)
+            {
+               const qe = e as QException;
+               setTestException(qe.code + ": " + qe.message);
+            }
+            else
+            {
+               setTestException(`${e}`);
+            }
          }
       })();
    };
 
-   // console.log("Rendering vvv");
-   // console.log(`${testOutputValues}`);
-   // console.log("Rendering ^^^");
-
    const handleInputChange = (fieldName: string, newValue: string) =>
    {
       testInputValues[fieldName] = newValue;
@@ -112,10 +179,8 @@ function ScriptTestForm({scriptDefinition, tableName, fieldName, recordId, code}
       setTestInputValues(JSON.parse(JSON.stringify(testInputValues)));
    }
 
-   // console.log(testInputValues);
-
    return (
-      <Grid container spacing={2} height="100%">
+      <Grid container spacing={2} height="100%" className="scriptTestForm">
          <Grid item xs={6} height="100%">
             <Box gap={2} pb={1} pr={2} height="100%">
                <Card sx={{width: "100%", height: "100%", overflow: "auto"}}>
@@ -135,6 +200,8 @@ function ScriptTestForm({scriptDefinition, tableName, fieldName, recordId, code}
                                  {
                                     handleInputChange(field.name, event.target.value);
                                  }}
+                                 multiline={field.type == QFieldType.TEXT}
+                                 maxRows={field.type == QFieldType.TEXT ? 5 : 1}
                                  fullWidth
                                  sx={{mb: 2}}
                               />);
@@ -160,11 +227,9 @@ function ScriptTestForm({scriptDefinition, tableName, fieldName, recordId, code}
                         </Typography>
                      }
                      {
-                        scriptDefinition.testOutputFields && testOutputValues && scriptDefinition.testOutputFields.map((f: any) =>
+                        scriptDefinition.testOutputFields && scriptDefinition.testOutputFields.map((f: any) =>
                         {
                            const field = new QFieldMetaData(f);
-                           console.log(field.name);
-                           console.log(testOutputValues[field.name]);
                            return (
                               <Box key={field.name} flexDirection="row" pr={2}>
                                  <Typography variant="button" fontWeight="bold" pr={1}>
@@ -177,6 +242,33 @@ function ScriptTestForm({scriptDefinition, tableName, fieldName, recordId, code}
                            );
                         })
                      }
+                     {
+                        logLines && logLines.length ?
+                           <>
+                              <Typography variant="h6" p={2} pl={0} pb={1}>Test Log Lines</Typography>
+                              <TableContainer sx={{boxShadow: "none"}} className="scriptLogLines">
+                                 <Table>
+                                    <Box component="thead">
+                                       <TableRow key="header">
+                                          <DataTableHeadCell sorted={false} width="140px">Timestamp</DataTableHeadCell>
+                                          <DataTableHeadCell sorted={false}>Log Line</DataTableHeadCell>
+                                       </TableRow>
+                                    </Box>
+                                    <TableBody>
+                                       {
+                                          logLines.map((logLine: any, i: number) =>
+                                             (
+                                                <TableRow key={i}>
+                                                   <DataTableBodyCell><span style={{whiteSpace: "nowrap", paddingRight: "1rem"}}>{ValueUtils.formatTime(logLine["timestamp"])}</span></DataTableBodyCell>
+                                                   <DataTableBodyCell>{logLine["text"]}</DataTableBodyCell>
+                                                </TableRow>
+                                             ))
+                                       }
+                                    </TableBody>
+                                 </Table>
+                              </TableContainer>
+                           </> : <></>
+                     }
                   </Box>
                </Card>
             </Box>

src/qqq/components/widgets/misc/DataBagViewer.tsx

@@ -289,7 +289,7 @@ export default function DataBagViewer({dataBagId}: Props): JSX.Element
                                  <Box display="flex" alignItems="center" justifyContent="space-between" gap={2} mt={-6}>
                                     <Typography variant="h5" p={2}></Typography>
                                     <Tabs
-                                       sx={{mr: 1}}
+                                       sx={{m: 1}}
                                        value={selectedTab}
                                        onChange={(event, newValue) => changeTab(newValue)}
                                        variant="standard"

src/qqq/components/widgets/misc/ScriptViewer.tsx

@@ -458,7 +458,7 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
 
                                  <TabPanel index={2} value={selectedTab}>
                                     <Box sx={{height: "455px"}} px={2} pb={1}>
-                                       <ScriptTestForm scriptDefinition={testScriptDefinitionObject} tableName={associatedScriptTableName} fieldName={associatedScriptFieldName} recordId={associatedScriptRecordId} code={selectedVersionRecord?.values.get("contents")} />
+                                       <ScriptTestForm scriptId={scriptId} scriptDefinition={testScriptDefinitionObject} tableName={associatedScriptTableName} fieldName={associatedScriptFieldName} recordId={associatedScriptRecordId} code={selectedVersionRecord?.values.get("contents")} />
                                     </Box>
                                  </TabPanel>
 

src/qqq/pages/records/view/RecordDeveloperView.tsx

@@ -183,7 +183,6 @@ function RecordDeveloperView({table}: Props): JSX.Element
                                     {
                                        associatedScripts && associatedScripts.map((object) =>
                                        {
-                                          console.log(object);
                                           let fieldName = object.associatedScript?.fieldName;
                                           let field = tableMetaData.fields.get(fieldName);
                                           let scriptId = record?.values.get(fieldName);

src/qqq/styles/qqq-override-styles.css

@@ -366,4 +366,16 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
    top: 30px !important;
    height: calc(100vh - 60px) !important;
    z-index: 1300 !important;
-}
+}
+
+.scriptTestForm TEXTAREA
+{
+   resize: vertical !important;
+}
+
+.scriptTestForm .scriptLogLines TD,
+.scriptTestForm .scriptLogLines TH
+{
+   padding-left: 0;
+   padding-right: 0;
+}

src/qqq/utils/qqq/ValueUtils.tsx

@@ -253,6 +253,16 @@ class ValueUtils
       return (`${date.toString("yyyy-MM-dd hh:mm:ss")} ${date.getHours() < 12 ? "AM" : "PM"} ${date.getTimezone()}`);
    }
 
+   public static formatTime(date: Date)
+   {
+      if(!(date instanceof Date))
+      {
+         date = new Date(date)
+      }
+      // @ts-ignore
+      return (`${date.toString("hh:mm:ss")} ${date.getHours() < 12 ? "AM" : "PM"} ${date.getTimezone()}`);
+   }
+
    public static formatDateTimeISO8601(date: Date)
    {
       if(!(date instanceof Date))