mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-17 21:00:45 +00:00
Updating to support multi-file scripts
This commit is contained in:
@ -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",
|
||||
|
||||
@ -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")
|
||||
setUpdatedCode(value);
|
||||
fileContents[openEditorFileNames[index]] = 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,29 +424,67 @@ 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>
|
||||
<AceEditor
|
||||
mode="javascript"
|
||||
theme="github"
|
||||
name="editor"
|
||||
editorProps={{$blockScrolling: true}}
|
||||
setOptions={{
|
||||
useWorker: false,
|
||||
enableBasicAutocompletion: true,
|
||||
enableLiveAutocompletion: true,
|
||||
}}
|
||||
onChange={updateCode}
|
||||
width="100%"
|
||||
height="calc(100% - 58px)"
|
||||
value={updatedCode}
|
||||
style={{border: "1px solid gray"}}
|
||||
/>
|
||||
<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"
|
||||
name="editor"
|
||||
editorProps={{$blockScrolling: true}}
|
||||
setOptions={{
|
||||
useWorker: false,
|
||||
enableBasicAutocompletion: true,
|
||||
enableLiveAutocompletion: true,
|
||||
}}
|
||||
onChange={(value, event) => updateCode(value, event, index)}
|
||||
width="100%"
|
||||
height="calc(100% - 88px)"
|
||||
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%" />
|
||||
|
||||
@ -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: [
|
||||
new QFieldMetaData({name: "recordPrimaryKeyList", label: "Record Primary Key List"})
|
||||
], testOutputFields: []})
|
||||
const filter = new QQueryFilter([new QFilterCriteria("scriptTypeId", QCriteriaOperator.EQUALS, [scriptRecord.values.get("scriptTypeId")])], [new QFilterOrderBy("id")])
|
||||
scriptTypeFileSchemaList = await qController.query("scriptTypeFileSchema", filter);
|
||||
}
|
||||
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"));
|
||||
const latestVersion = await qController.get("scriptRevision", versions[0].values.get("id"));
|
||||
console.log("Fetched latestVersion:");
|
||||
console.log(latestVersion);
|
||||
setSelectedVersionRecord(latestVersion);
|
||||
loadingSelectedVersion.setNotLoading();
|
||||
forceUpdate();
|
||||
selectVersion(versions[0]);
|
||||
}
|
||||
}
|
||||
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>
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>) =>
|
||||
|
||||
Reference in New Issue
Block a user