Updating to support multi-file scripts

package.json

@@ -6,7 +6,7 @@
       "@auth0/auth0-react": "1.10.2",
       "@emotion/react": "11.7.1",
       "@emotion/styled": "11.6.0",
-      "@kingsrook/qqq-frontend-core": "1.0.68",
+      "@kingsrook/qqq-frontend-core": "1.0.71",
       "@mui/icons-material": "5.4.1",
       "@mui/material": "5.11.1",
       "@mui/styles": "5.11.1",

src/qqq/components/scripts/ScriptEditor.tsx

@@ -23,7 +23,7 @@ import {QController} from "@kingsrook/qqq-frontend-core/lib/controllers/QControl
 import {QJobError} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobError";
 import {QPossibleValue} from "@kingsrook/qqq-frontend-core/lib/model/QPossibleValue";
 import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
-import {ToggleButton, ToggleButtonGroup, Typography} from "@mui/material";
+import {IconButton, SelectChangeEvent, ToggleButton, ToggleButtonGroup, Typography} from "@mui/material";
 import Alert from "@mui/material/Alert";
 import Box from "@mui/material/Box";
 import Card from "@mui/material/Card";
@@ -31,9 +31,14 @@ import Dialog from "@mui/material/Dialog";
 import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
 import DialogTitle from "@mui/material/DialogTitle";
+import FormControl from "@mui/material/FormControl/FormControl";
 import Grid from "@mui/material/Grid";
+import Icon from "@mui/material/Icon";
+import MenuItem from "@mui/material/MenuItem";
+import Select from "@mui/material/Select/Select";
 import Snackbar from "@mui/material/Snackbar";
 import TextField from "@mui/material/TextField";
+import Tooltip from "@mui/material/Tooltip";
 import FormData from "form-data";
 import React, {useEffect, useReducer, useRef, useState} from "react";
 import AceEditor from "react-ace";
@@ -56,22 +61,60 @@ export interface ScriptEditorProps
    tableName: string;
    fieldName: string;
    recordId: any;
-   scriptDefinition: any;
    scriptTypeRecord: QRecord;
+   scriptTypeFileSchemaList: QRecord[];
 }
 
 const qController = Client.getInstance();
 
-function ScriptEditor({title, scriptId, scriptRevisionRecord, closeCallback, tableName, fieldName, recordId, scriptDefinition, scriptTypeRecord}: ScriptEditorProps): JSX.Element
+function buildInitialFileContentsMap(scriptRevisionRecord: QRecord, scriptTypeFileSchemaList: QRecord[]): { [name: string]: string }
+{
+   const rs: {[name: string]: string} = {};
+
+   if(!scriptTypeFileSchemaList)
+   {
+      console.log("Missing scriptTypeFileSchemaList");
+   }
+   else
+   {
+      let files = scriptRevisionRecord?.associatedRecords?.get("files")
+
+      for (let i = 0; i < scriptTypeFileSchemaList.length; i++)
+      {
+         let scriptTypeFileSchema = scriptTypeFileSchemaList[i];
+         let name = scriptTypeFileSchema.values.get("name");
+         let contents = "";
+
+         for (let j = 0; j < files?.length; j++)
+         {
+            let file = files[j];
+            if(file.values.get("fileName") == name)
+            {
+               contents = file.values.get("contents");
+            }
+         }
+
+         rs[name] = contents;
+      }
+   }
+
+   return (rs);
+}
+
+function ScriptEditor({title, scriptId, scriptRevisionRecord, closeCallback, tableName, fieldName, recordId, scriptTypeRecord, scriptTypeFileSchemaList}: ScriptEditorProps): JSX.Element
 {
    const [closing, setClosing] = useState(false);
 
-   const [updatedCode, setUpdatedCode] = useState(scriptRevisionRecord ? scriptRevisionRecord.values.get("contents") : "");
    const [apiName, setApiName] = useState(scriptRevisionRecord ? scriptRevisionRecord.values.get("apiName") : null)
    const [apiNameLabel, setApiNameLabel] = useState(scriptRevisionRecord ? scriptRevisionRecord.displayValues.get("apiName") : null)
    const [apiVersion, setApiVersion] = useState(scriptRevisionRecord ? scriptRevisionRecord.values.get("apiVersion") : null)
    const [apiVersionLabel, setApiVersionLabel] = useState(scriptRevisionRecord ? scriptRevisionRecord.displayValues.get("apiVersion") : null)
 
+   const fileNamesFromSchema = scriptTypeFileSchemaList.map((schemaRecord) => schemaRecord.values.get("name"))
+   const [availableFileNames, setAvailableFileNames] = useState(fileNamesFromSchema);
+   const [openEditorFileNames, setOpenEditorFileNames] = useState([fileNamesFromSchema[0]])
+   const [fileContents, setFileContents] = useState(buildInitialFileContentsMap(scriptRevisionRecord, scriptTypeFileSchemaList))
+
    const [commitMessage, setCommitMessage] = useState("")
    const [openTool, setOpenTool] = useState(null);
    const [errorAlert, setErrorAlert] = useState("")
@@ -200,7 +243,6 @@ function ScriptEditor({title, scriptId, scriptRevisionRecord, closeCallback, tab
       {
          const formData = new FormData();
          formData.append("scriptId", scriptId);
-         formData.append("contents", updatedCode);
          formData.append("commitMessage", overrideCommitMessage ?? commitMessage);
 
          if(apiName)
@@ -213,6 +255,15 @@ function ScriptEditor({title, scriptId, scriptRevisionRecord, closeCallback, tab
             formData.append("apiVersion", apiVersion);
          }
 
+
+         const fileNamesFromSchema = scriptTypeFileSchemaList.map((schemaRecord) => schemaRecord.values.get("name"))
+         formData.append("fileNames", fileNamesFromSchema.join(","));
+
+         for (let fileName in fileContents)
+         {
+            formData.append("fileContents:" + fileName, fileContents[fileName]);
+         }
+
          //////////////////////////////////////////////////////////////////
          // we don't want this job to go async, so, pass a large timeout //
          //////////////////////////////////////////////////////////////////
@@ -249,10 +300,9 @@ function ScriptEditor({title, scriptId, scriptRevisionRecord, closeCallback, tab
       closeCallback(null, "cancelled");
    }
 
-   const updateCode = (value: string, event: any) =>
+   const updateCode = (value: string, event: any, index: number) =>
    {
-      console.log("Updating code")
+      fileContents[openEditorFileNames[index]] = value;
-      setUpdatedCode(value);
       forceUpdate();
    }
 
@@ -300,8 +350,34 @@ function ScriptEditor({title, scriptId, scriptRevisionRecord, closeCallback, tab
       }
    }
 
+   const handleSelectingFile = (event: SelectChangeEvent, index: number) =>
+   {
+      openEditorFileNames[index] = event.target.value
+      setOpenEditorFileNames(openEditorFileNames);
+      forceUpdate();
+   }
+
+   const splitEditorClicked = () =>
+   {
+      openEditorFileNames.push(availableFileNames[0])
+      setOpenEditorFileNames(openEditorFileNames);
+      forceUpdate();
+   }
+
+   const closeEditorClicked = (index: number) =>
+   {
+      openEditorFileNames.splice(index, 1)
+      setOpenEditorFileNames(openEditorFileNames);
+      forceUpdate();
+   }
+
+   const computeEditorWidth = (): string =>
+   {
+      return (100 / openEditorFileNames.length) + "%"
+   }
+
    return (
-      <Box sx={{position: "absolute", overflowY: "auto", height: "100%", width: "100%"}} p={6}>
+      <Box className="scriptEditor" sx={{position: "absolute", overflowY: "auto", height: "100%", width: "100%"}} p={6}>
          <Card sx={{height: "100%", p: 3}}>
 
             <Snackbar open={errorAlert !== null && errorAlert !== ""} onClose={(event?: React.SyntheticEvent | Event, reason?: string) =>
@@ -348,6 +424,40 @@ function ScriptEditor({title, scriptId, scriptRevisionRecord, closeCallback, tab
                      <DynamicSelect fieldName={"apiVersion"} initialValue={apiVersion} initialDisplayValue={apiVersionLabel} fieldLabel={"API Version *"} tableName={"scriptRevision"} inForm={false} onChange={changeApiVersion} />
                   </Box>
                </Grid>
+               <Box display="flex" sx={{height: "100%"}}>
+                  {openEditorFileNames.map((fileName, index) =>
+                  {
+                     return (
+                        <Box key={`${fileName}-${index}`} sx={{height: "100%", width: computeEditorWidth()}}>
+                           <Box sx={{borderBottom: 1, borderColor: "divider"}} display="flex" justifyContent="space-between" alignItems="flex-end">
+                              <FormControl className="selectedFileTab" variant="standard" sx={{verticalAlign: "bottom"}}>
+                                 <Select value={openEditorFileNames[index]} onChange={(event) => handleSelectingFile(event, index)}>
+                                    {
+                                       availableFileNames.map((name) => (
+                                          <MenuItem key={name} value={name}>{name}</MenuItem>
+                                       ))
+                                    }
+                                 </Select>
+                              </FormControl>
+                              <Box>
+                                 {
+                                    openEditorFileNames.length > 1 &&
+                                       <Tooltip title="Close this editor split" enterDelay={500}>
+                                          <IconButton size="small" onClick={() => closeEditorClicked(index)}>
+                                             <Icon>close</Icon>
+                                          </IconButton>
+                                       </Tooltip>
+                                 }
+                                 {
+                                    index == openEditorFileNames.length - 1 &&
+                                       <Tooltip title="Open a new editor split" enterDelay={500}>
+                                          <IconButton size="small" onClick={splitEditorClicked}>
+                                             <Icon>vertical_split</Icon>
+                                          </IconButton>
+                                       </Tooltip>
+                                 }
+                              </Box>
+                           </Box>
                            <AceEditor
                               mode="javascript"
                               theme="github"
@@ -358,19 +468,23 @@ function ScriptEditor({title, scriptId, scriptRevisionRecord, closeCallback, tab
                                  enableBasicAutocompletion: true,
                                  enableLiveAutocompletion: true,
                               }}
-                  onChange={updateCode}
+                              onChange={(value, event) => updateCode(value, event, index)}
                               width="100%"
-                  height="calc(100% - 58px)"
+                              height="calc(100% - 88px)"
-                  value={updatedCode}
+                              value={fileContents[openEditorFileNames[index]]}
                               style={{border: "1px solid gray"}}
                            />
                         </Box>
+                     );
+                  })}
+               </Box>
+            </Box>
 
             {
                openTool &&
                <Box sx={{height: "45%"}} pt={2}>
                   {
-                     openTool == "test" && <ScriptTestForm scriptId={scriptId} scriptDefinition={scriptDefinition} tableName={tableName} fieldName={fieldName} recordId={recordId} code={updatedCode} apiName={apiName} apiVersion={apiVersion} />
+                     openTool == "test" && <ScriptTestForm scriptId={scriptId} scriptType={scriptTypeRecord} tableName={tableName} fieldName={fieldName} recordId={recordId} fileContents={fileContents} apiName={apiName} apiVersion={apiVersion} />
                   }
                   {
                      openTool == "docs" && <ScriptDocsForm helpText={scriptTypeRecord?.values.get("helpText")} exampleCode={scriptTypeRecord?.values.get("sampleCode")} aceEditorHeight="100%" />

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

@@ -27,18 +27,22 @@ import {QCriteriaOperator} from "@kingsrook/qqq-frontend-core/lib/model/query/QC
 import {QFilterCriteria} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterCriteria";
 import {QFilterOrderBy} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterOrderBy";
 import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
+import {SelectChangeEvent} from "@mui/material";
 import Alert from "@mui/material/Alert";
 import Avatar from "@mui/material/Avatar";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Chip from "@mui/material/Chip";
 import Divider from "@mui/material/Divider";
+import FormControl from "@mui/material/FormControl/FormControl";
 import Grid from "@mui/material/Grid";
 import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import ListItemAvatar from "@mui/material/ListItemAvatar";
 import ListItemText from "@mui/material/ListItemText";
+import MenuItem from "@mui/material/MenuItem";
 import Modal from "@mui/material/Modal";
+import Select from "@mui/material/Select/Select";
 import Snackbar from "@mui/material/Snackbar";
 import Tab from "@mui/material/Tab";
 import Tabs from "@mui/material/Tabs";
@@ -94,7 +98,9 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
    const [selectedVersionRecord, setSelectedVersionRecord] = useState(null as QRecord);
    const [scriptLogs, setScriptLogs] = useState({} as any);
    const [scriptTypeRecord, setScriptTypeRecord] = useState(null as QRecord)
-   const [testScriptDefinitionObject, setTestScriptDefinitionObject] = useState({} as any)
+   const [scriptTypeFileSchemaList, setScriptTypeFileSchemaList] = useState(null as QRecord[])
+   const [availableFileNames, setAvailableFileNames] = useState([] as string[]);
+   const [selectedFileName, setSelectedFileName] = useState("");
    const [currentVersionId , setCurrentVersionId] = useState(null as number);
    const [notFoundMessage, setNotFoundMessage] = useState(null);
    const [selectedTab, setSelectedTab] = useState(0);
@@ -118,17 +124,32 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
             const scriptRecord = await qController.get("script", scriptId);
             setScriptRecord(scriptRecord);
 
-            setScriptTypeRecord(await qController.get("scriptType", scriptRecord.values.get("scriptTypeId")));
+            const scriptTypeRecord = await qController.get("scriptType", scriptRecord.values.get("scriptTypeId"));
+            setScriptTypeRecord(scriptTypeRecord);
 
-            if(testInputFields !== null || testOutputFields !== null)
+            let fileMode = scriptTypeRecord.values.get("fileMode");
+            let scriptTypeFileSchemaList: QRecord[] = null;
+            if(fileMode == 1) // SINGLE
             {
-               setTestScriptDefinitionObject({testInputFields: testInputFields, testOutputFields: testOutputFields});
+               scriptTypeFileSchemaList = [new QRecord({values: {name: "Script.js", fileType: "javascript"}})];
             }
-            else
+            else if(fileMode == 2) // MULTI_PRE_DEFINED
             {
-               setTestScriptDefinitionObject({testInputFields: [
+               const filter = new QQueryFilter([new QFilterCriteria("scriptTypeId", QCriteriaOperator.EQUALS, [scriptRecord.values.get("scriptTypeId")])], [new QFilterOrderBy("id")])
-                  new QFieldMetaData({name: "recordPrimaryKeyList", label: "Record Primary Key List"})
+               scriptTypeFileSchemaList = await qController.query("scriptTypeFileSchema", filter);
-               ], testOutputFields: []})
+            }
+            else // MULTI AD_HOC
+            {
+               // todo - not yet supported
+               console.log(`Script Type File Mode of ${fileMode} is not yet supportred.`);
+            }
+
+            setScriptTypeFileSchemaList(scriptTypeFileSchemaList);
+            if(scriptTypeFileSchemaList)
+            {
+               const availableFileNames = scriptTypeFileSchemaList.map((fileSchemaRecord) => fileSchemaRecord.values.get("name"))
+               setAvailableFileNames(availableFileNames);
+               setSelectedFileName(availableFileNames[0])
             }
 
             const criteria = [new QFilterCriteria("scriptId", QCriteriaOperator.EQUALS, [scriptId])];
@@ -141,13 +162,7 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
 
             if(versions && versions.length > 0)
             {
-               setCurrentVersionId(versions[0].values.get("id"));
+               selectVersion(versions[0]);
-               const latestVersion = await qController.get("scriptRevision", versions[0].values.get("id"));
-               console.log("Fetched latestVersion:");
-               console.log(latestVersion);
-               setSelectedVersionRecord(latestVersion);
-               loadingSelectedVersion.setNotLoading();
-               forceUpdate();
             }
          }
          catch (e)
@@ -174,8 +189,8 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
       editorProps.tableName = associatedScriptTableName;
       editorProps.fieldName = associatedScriptFieldName;
       editorProps.recordId = associatedScriptRecordId;
-      editorProps.scriptDefinition = testScriptDefinitionObject;
       editorProps.scriptTypeRecord = scriptTypeRecord;
+      editorProps.scriptTypeFileSchemaList = scriptTypeFileSchemaList;
       setEditorProps(editorProps);
    };
 
@@ -223,8 +238,10 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
          setCurrentVersionId(version.values.get("id"));
          loadingSelectedVersion.setLoading();
 
-         // fetch the full version
+         //////////////////////////////////////////////////////////////////////////////////////
-         const selectedVersion = await qController.get("scriptRevision", version.values.get("id"));
+         // fetch the full version - including its associated scriptRevisionFile sub-records //
+         //////////////////////////////////////////////////////////////////////////////////////
+         const selectedVersion = await qController.get("scriptRevision", version.values.get("id"), true);
          console.log("Fetched selectedVersion:");
          console.log(selectedVersion);
          setSelectedVersionRecord(selectedVersion);
@@ -233,6 +250,30 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
       })();
    };
 
+   const handleSelectFile = (event: SelectChangeEvent) =>
+   {
+      setSelectedFileName(event.target.value);
+   }
+
+   const getSelectedFileCode = (): string =>
+   {
+      return (getSelectedVersionCode()[selectedFileName] ?? "");
+   }
+
+   const getSelectedVersionCode = (): {[name: string]: string} =>
+   {
+      let rs: {[name: string]: string} = {}
+      let files = selectedVersionRecord?.associatedRecords?.get("files")
+
+      for (let j = 0; j < files?.length; j++)
+      {
+         let file = files[j];
+         rs[file.values.get("fileName")] = file.values.get("contents");
+      }
+
+      return (rs);
+   }
+
    function getVersionsList(versionRecordList: QRecord[], selectedVersionRecord: QRecord)
    {
       return <List sx={{pl: 3, height: "400px", overflow: "auto"}}>
@@ -344,7 +385,7 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
    */
 
    return (
-      <Grid container>
+      <Grid container className="scriptViewer">
          <Grid item xs={12}>
             <Box>
                {
@@ -420,8 +461,20 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
                                              </CustomWidthTooltip>
                                           </Box>
                                           {
-                                             loadingSelectedVersion.isNotLoading() && selectedVersionRecord && selectedVersionRecord.values.get("contents") ? (
+                                             loadingSelectedVersion.isNotLoading() && selectedVersionRecord ? (
                                                 <>
+                                                   {
+                                                      availableFileNames && availableFileNames.length > 1 &&
+                                                      <FormControl className="selectedFileTab" variant="standard" sx={{verticalAlign: "bottom", pl: "4px"}}>
+                                                         <Select value={selectedFileName} onChange={(event) => handleSelectFile(event)}>
+                                                            {
+                                                               availableFileNames.map((name) => (
+                                                                  <MenuItem key={name} value={name}>{name}</MenuItem>
+                                                               ))
+                                                            }
+                                                         </Select>
+                                                      </FormControl>
+                                                   }
                                                    <AceEditor
                                                       mode="javascript"
                                                       theme="github"
@@ -432,7 +485,8 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
                                                       setOptions={{useWorker: false}}
                                                       width="100%"
                                                       height="400px"
-                                                      value={selectedVersionRecord?.values?.get("contents")}
+                                                      value={getSelectedFileCode()}
+                                                      style={{borderTop: "1px solid lightgray", borderBottomRightRadius: "1rem"}}
                                                    />
                                                 </>
                                              ) : null
@@ -473,11 +527,11 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
                                  <TabPanel index={2} value={selectedTab}>
                                     <Box sx={{height: "455px"}} px={2} pb={1}>
                                        <ScriptTestForm scriptId={scriptId}
-                                          scriptDefinition={testScriptDefinitionObject}
+                                          scriptType={scriptTypeRecord}
                                           tableName={associatedScriptTableName}
                                           fieldName={associatedScriptFieldName}
                                           recordId={associatedScriptRecordId}
-                                          code={selectedVersionRecord?.values.get("contents")}
+                                          fileContents={getSelectedVersionCode()}
                                           apiName={selectedVersionRecord?.values.get("apiName")}
                                           apiVersion={selectedVersionRecord?.values.get("apiVersion")} />
                                     </Box>

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

@@ -523,3 +523,25 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
    padding-right: 0.25rem;
 }
 
+/* file-select box in script editor & viewer - make it look tabby */
+.scriptEditor .selectedFileTab div.MuiSelect-select,
+.scriptViewer .selectedFileTab div.MuiSelect-select
+{
+   padding: 0.25rem 1.5rem 0.25rem 1rem !important;
+   border: 1px solid lightgray;
+   border-radius: 0.375rem 0.375rem 0 0;
+}
+
+.scriptEditor .selectedFileTab,
+.scriptViewer .selectedFileTab
+{
+   margin-bottom: -1px;
+}
+
+/* show the down-arrow in the file-select box in script editor & viewer */
+.scriptEditor .selectedFileTab .MuiSelect-iconStandard,
+.scriptViewer .selectedFileTab .MuiSelect-iconStandard
+{
+   display: inline;
+   right: .5rem
+}

src/qqq/utils/HtmlUtils.ts

@@ -62,10 +62,21 @@ export default class HtmlUtils
    };
 
    /*******************************************************************************
-    ** Download a server-side generated file.
+    ** Download a server-side generated file (or the contents of a data: url)
     *******************************************************************************/
-   static downloadUrlViaIFrame = (url: string) =>
+   static downloadUrlViaIFrame = (url: string, filename: string) =>
    {
+      if(url.startsWith("data:"))
+      {
+         const link = document.createElement("a");
+         link.download = filename;
+         link.href = url;
+         document.body.appendChild(link);
+         link.click();
+         document.body.removeChild(link);
+         return;
+      }
+
       if (document.getElementById("downloadIframe"))
       {
          document.body.removeChild(document.getElementById("downloadIframe"));
@@ -101,10 +112,21 @@ export default class HtmlUtils
    };
 
    /*******************************************************************************
-    ** Open a server-side generated file from a url in a new window.
+    ** Open a server-side generated file from a url in a new window (or a data: url)
     *******************************************************************************/
    static openInNewWindow = (url: string, filename: string) =>
    {
+      if(url.startsWith("data:"))
+      {
+         const openInWindow = window.open("", "_blank");
+         openInWindow.document.write(`<html lang="en">
+            <body style="margin: 0">
+               <iframe src="${url}" width="100%" height="100%" style="border: 0">
+            </body>
+         `);
+         return;
+      }
+
       const openInWindow = window.open("", "_blank");
       openInWindow.document.write(`<html lang="en">
             <head>

src/qqq/utils/qqq/ValueUtils.tsx

@@ -39,6 +39,7 @@ import HtmlUtils from "qqq/utils/HtmlUtils";
 import Client from "qqq/utils/qqq/Client";
 
 import "ace-builds/src-noconflict/mode-sql";
+import "ace-builds/src-noconflict/mode-velocity";
 
 /*******************************************************************************
  ** Utility class for working with QQQ Values
@@ -637,7 +638,7 @@ function BlobComponent({field, url, filename, usage}: BlobComponentProps): JSX.E
    const download = (event: React.MouseEvent<HTMLSpanElement>) =>
    {
       event.stopPropagation();
-      HtmlUtils.downloadUrlViaIFrame(url);
+      HtmlUtils.downloadUrlViaIFrame(url, filename);
    };
 
    const open = (event: React.MouseEvent<HTMLSpanElement>) =>