status-im
/
spiff-arena
mirror of https://github.com/status-im/spiff-arena.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' of github.com:sartography/spiff-arena into main

This commit is contained in:
Dan 2022-12-21 12:53:03 -05:00
parent e05c374034 36ee83fe5e
commit 2409bd710e
2 changed files with 111 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
spiffworkflow-backend/src/spiffworkflow_backend/routes/process_api_blueprint.py
View File

@ -1669,7 +1669,7 @@ def script_unit_test_create(
extension_elements = None
extension_elements_array = script_task_element.xpath(
"//bpmn:extensionElements",
".//bpmn:extensionElements",
namespaces={"bpmn": "http://www.omg.org/spec/BPMN/20100524/MODEL"},
)
if len(extension_elements_array) == 0:

164
spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx
View File

@ -6,11 +6,20 @@ import {
useSearchParams,
} from 'react-router-dom';
// @ts-ignore
import { Button, Modal, Stack, Content } from '@carbon/react';
import {
Button,
Modal,
Content,
Tabs,
TabList,
Tab,
TabPanels,
TabPanel,
} from '@carbon/react';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Editor from '@monaco-editor/react';
import Editor, { DiffEditor } from '@monaco-editor/react';
import MDEditor from '@uiw/react-md-editor';
import ReactDiagramEditor from '../components/ReactDiagramEditor';
@ -401,6 +410,13 @@ export default function ProcessModelEditDiagram() {
};
};
const jsonEditorOptions = () => {
return Object.assign(generalEditorOptions(), {
minimap: { enabled: false },
folding: true,
});
};
const setPreviousScriptUnitTest = () => {
resetUnitTextResult();
const newScriptIndex = currentScriptUnitTestIndex - 1;
@ -495,11 +511,32 @@ export default function ProcessModelEditDiagram() {
}
let errorContextElement = null;
if (scriptUnitTestResult.context) {
errorStringElement = (
<span>Unexpected result. Please see the comparison below.</span>
);
let outputJson = '{}';
if (currentScriptUnitTest) {
outputJson = JSON.stringify(
JSON.parse(currentScriptUnitTest.expectedOutputJson.value),
null,
' '
);
}
const contextJson = JSON.stringify(
scriptUnitTestResult.context,
null,
' '
);
errorContextElement = (
<span>
Received unexpected output:{' '}
{JSON.stringify(scriptUnitTestResult.context)}
</span>
<DiffEditor
height={200}
width="auto"
originalLanguage="json"
modifiedLanguage="json"
options={Object.assign(jsonEditorOptions(), {})}
original={outputJson}
modified={contextJson}
/>
);
}
return (
@ -543,19 +580,29 @@ export default function ProcessModelEditDiagram() {
</Col>
);
}
const inputJson = JSON.stringify(
JSON.parse(currentScriptUnitTest.inputJson.value),
null,
' '
);
const outputJson = JSON.stringify(
JSON.parse(currentScriptUnitTest.expectedOutputJson.value),
null,
' '
);
return (
<main>
<Content>
<Row>
<Col xs={8}>
<Button variant="link" disabled style={{ fontSize: '1.5em' }}>
<Button variant="link" disabled>
Unit Test: {currentScriptUnitTest.id}
</Button>
</Col>
<Col xs={1}>
<Button
data-qa="unit-test-previous-button"
style={{ fontSize: '1.5em' }}
onClick={setPreviousScriptUnitTest}
variant="link"
disabled={previousButtonDisable}
@ -586,52 +633,61 @@ export default function ProcessModelEditDiagram() {
</Col>
<Col xs={1}>{scriptUnitTestResultBoolElement}</Col>
</Row>
<Row>
<Col>{unitTestFailureElement()}</Col>
</Row>
<Row>
<Col>
<div>Input Json:</div>
<div>
<Editor
height={500}
width="auto"
defaultLanguage="json"
options={Object.assign(jsonEditorOptions(), {})}
value={inputJson}
onChange={handleEditorScriptTestUnitInputChange}
/>
</div>
</Col>
<Col>
<div>Expected Output Json:</div>
<div>
<Editor
height={500}
width="auto"
defaultLanguage="json"
options={Object.assign(jsonEditorOptions(), {})}
value={outputJson}
onChange={handleEditorScriptTestUnitOutputChange}
/>
</div>
</Col>
</Row>
</Content>
<Stack orientation="horizontal" gap={3}>
{unitTestFailureElement()}
</Stack>
<Stack orientation="horizontal" gap={3}>
<Stack>
<div>Input Json:</div>
<div>
<Editor
height={200}
defaultLanguage="json"
options={Object.assign(generalEditorOptions(), {
minimap: { enabled: false },
})}
value={currentScriptUnitTest.inputJson.value}
onChange={handleEditorScriptTestUnitInputChange}
/>
</div>
</Stack>
<Stack>
<div>Expected Output Json:</div>
<div>
<Editor
height={200}
defaultLanguage="json"
options={Object.assign(generalEditorOptions(), {
minimap: { enabled: false },
})}
value={currentScriptUnitTest.expectedOutputJson.value}
onChange={handleEditorScriptTestUnitOutputChange}
/>
</div>
</Stack>
</Stack>
</main>
);
}
return null;
};
const scriptEditor = () => {
return (
<Editor
height={500}
width="auto"
options={generalEditorOptions()}
defaultLanguage="python"
value={scriptText}
onChange={handleEditorScriptChange}
onMount={handleEditorDidMount}
/>
);
};
const scriptEditorAndTests = () => {
let scriptName = '';
if (scriptElement) {
scriptName = (scriptElement as any).di.bpmnElement.name;
}
return (
<Modal
open={showScriptEditor}
@ -641,16 +697,16 @@ export default function ProcessModelEditDiagram() {
size="lg"
onRequestClose={handleScriptEditorClose}
>
<Editor
height={500}
width="auto"
options={generalEditorOptions()}
defaultLanguage="python"
value={scriptText}
onChange={handleEditorScriptChange}
onMount={handleEditorDidMount}
/>
{scriptUnitTestEditorElement()}
<Tabs>
<TabList aria-label="List of tabs" activation="manual">
<Tab>Script Editor</Tab>
<Tab>Unit Tests</Tab>
</TabList>
<TabPanels>
<TabPanel>{scriptEditor()}</TabPanel>
<TabPanel>{scriptUnitTestEditorElement()}</TabPanel>
</TabPanels>
</Tabs>
</Modal>
);
};
@ -878,7 +934,7 @@ export default function ProcessModelEditDiagram() {
{saveFileMessage()}
{appropriateEditor()}
{newFileNameBox()}
{scriptEditor()}
{scriptEditorAndTests()}
{markdownEditor()}
{processModelSelector()}
<div id="diagram-container" />