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}
+