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

This commit is contained in:
jasquat 2022-12-15 12:52:56 -05:00
commit 390226a9ae
2 changed files with 49 additions and 1 deletions

View File

@ -52,6 +52,8 @@ import TouchModule from 'diagram-js/lib/navigation/touch';
// @ts-expect-error TS(7016) FIXME // @ts-expect-error TS(7016) FIXME
import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll'; import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll';
import { useNavigate } from 'react-router-dom';
import { Can } from '@casl/react'; import { Can } from '@casl/react';
import HttpService from '../services/HttpService'; import HttpService from '../services/HttpService';
@ -119,6 +121,7 @@ export default function ReactDiagramEditor({
[targetUris.processModelFileShowPath]: ['POST', 'GET', 'PUT', 'DELETE'], [targetUris.processModelFileShowPath]: ['POST', 'GET', 'PUT', 'DELETE'],
}; };
const { ability } = usePermissionFetcher(permissionRequestData); const { ability } = usePermissionFetcher(permissionRequestData);
const navigate = useNavigate();
useEffect(() => { useEffect(() => {
if (diagramModelerState) { if (diagramModelerState) {
@ -542,6 +545,8 @@ export default function ReactDiagramEditor({
}); });
}; };
const canViewXml = fileName !== undefined;
const userActionOptions = () => { const userActionOptions = () => {
if (diagramType !== 'readonly') { if (diagramType !== 'readonly') {
return ( return (
@ -580,6 +585,23 @@ export default function ReactDiagramEditor({
> >
<Button onClick={downloadXmlFile}>Download</Button> <Button onClick={downloadXmlFile}>Download</Button>
</Can> </Can>
<Can
I="GET"
a={targetUris.processModelFileShowPath}
ability={ability}
>
{canViewXml && (
<Button
onClick={() => {
navigate(
`/admin/process-models/${processModelId}/form/${fileName}`
);
}}
>
View XML
</Button>
)}
</Can>
</> </>
); );
} }

View File

@ -36,7 +36,20 @@ export default function ReactFormEditor() {
return searchParams.get('file_ext') ?? 'json'; return searchParams.get('file_ext') ?? 'json';
})(); })();
const editorDefaultLanguage = fileExtension === 'md' ? 'markdown' : 'json'; const hasDiagram = fileExtension === 'bpmn' || fileExtension === 'dmn';
const editorDefaultLanguage = (() => {
if (fileExtension === 'json') {
return 'json';
}
if (hasDiagram) {
return 'xml';
}
if (fileExtension === 'md') {
return 'markdown';
}
return 'text';
})();
const modifiedProcessModelId = modifyProcessIdentifierForPathParam( const modifiedProcessModelId = modifyProcessIdentifierForPathParam(
`${params.process_model_id}` `${params.process_model_id}`
@ -193,6 +206,19 @@ export default function ReactFormEditor() {
buttonLabel="Delete" buttonLabel="Delete"
/> />
) : null} ) : null}
{hasDiagram ? (
<Button
onClick={() =>
navigate(
`/admin/process-models/${modifiedProcessModelId}/files/${params.file_name}`
)
}
variant="danger"
data-qa="view-diagram-button"
>
View Diagram
</Button>
) : null}
<Editor <Editor
height={600} height={600}
width="auto" width="auto"