diff --git a/spiffworkflow-frontend/src/routes/ReactFormEditor.tsx b/spiffworkflow-frontend/src/routes/ReactFormEditor.tsx index d1cb3201..f9e83f35 100644 --- a/spiffworkflow-frontend/src/routes/ReactFormEditor.tsx +++ b/spiffworkflow-frontend/src/routes/ReactFormEditor.tsx @@ -1,18 +1,24 @@ +/* eslint-disable sonarjs/cognitive-complexity */ + import { useEffect, useState } from 'react'; import Editor from '@monaco-editor/react'; import { useNavigate, useParams, useSearchParams } from 'react-router-dom'; // @ts-ignore import { Button, Modal } from '@carbon/react'; +import { Can } from '@casl/react'; import ProcessBreadcrumb from '../components/ProcessBreadcrumb'; import HttpService from '../services/HttpService'; import ButtonWithConfirmation from '../components/ButtonWithConfirmation'; import { modifyProcessIdentifierForPathParam } from '../helpers'; -import { ProcessFile } from '../interfaces'; +import { ProcessFile, PermissionsToCheck } from '../interfaces'; import { Notification } from '../components/Notification'; import useAPIError from '../hooks/UseApiError'; +import { usePermissionFetcher } from '../hooks/PermissionService'; +import { useUriListForPermissions } from '../hooks/UriListForPermissions'; // NOTE: This is mostly the same as ProcessModelEditDiagram and if we go this route could // possibly be merged into it. I'm leaving as a separate file now in case it does // end up diverging greatly + export default function ReactFormEditor() { const params = useParams(); const { addError, removeError } = useAPIError(); @@ -20,6 +26,12 @@ export default function ReactFormEditor() { const [newFileName, setNewFileName] = useState(''); const searchParams = useSearchParams()[0]; const handleShowFileNameEditor = () => setShowFileNameEditor(true); + const { targetUris } = useUriListForPermissions(); + const permissionRequestData: PermissionsToCheck = { + [targetUris.processModelShowPath]: ['PUT'], + [targetUris.processModelFileShowPath]: ['POST', 'GET', 'PUT', 'DELETE'], + }; + const { ability } = usePermissionFetcher(permissionRequestData); const navigate = useNavigate(); const [displaySaveFileMessage, setDisplaySaveFileMessage] = @@ -42,6 +54,7 @@ export default function ReactFormEditor() { })(); const hasDiagram = fileExtension === 'bpmn' || fileExtension === 'dmn'; + const hasFormBuilder = fileExtension === 'json'; const editorDefaultLanguage = (() => { if (fileExtension === 'json') { @@ -210,42 +223,60 @@ export default function ReactFormEditor() { {newFileNameBox()} {saveFileMessage()} - - {params.file_name ? ( - - ) : null} - - {hasDiagram ? ( + - ) : null} + + + {params.file_name ? ( + + ) : null} + + + {hasFormBuilder ? ( + + ) : null} + + + {hasDiagram ? ( + + ) : null} +