allow disabling the permission check for the Create New Instance page to improve performance.

src/components/ProcessInstanceRun.tsx

@@ -68,12 +68,14 @@ type OwnProps = {
   processModel: ProcessModel;
   onSuccessCallback: Function;
   className?: string;
+  checkPermissions?: boolean;
 };
 
 export default function ProcessInstanceRun({
   processModel,
   onSuccessCallback,
   className,
+  checkPermissions = true,
 }: OwnProps) {
   const navigate = useNavigate();
   const setErrorMessage = (useContext as any)(ErrorContext)[1];
@@ -82,9 +84,14 @@ export default function ProcessInstanceRun({
   );
 
   const processInstanceActionPath = `/v1.0/process-models/${modifiedProcessModelId}/process-instances`;
-  const permissionRequestData: PermissionsToCheck = {
+  let permissionRequestData: PermissionsToCheck = {
     [processInstanceActionPath]: ['POST'],
   };
+
+  if (!checkPermissions) {
+    permissionRequestData = {};
+  }
+
   const { ability } = usePermissionFetcher(permissionRequestData);
 
   const onProcessInstanceRun = (processInstance: any) => {
@@ -115,12 +122,18 @@ export default function ProcessInstanceRun({
       httpMethod: 'POST',
     });
   };
-
+  if (checkPermissions) {
+    return (
+      <Can I="POST" a={processInstanceActionPath} ability={ability}>
+        <Button onClick={processInstanceCreateAndRun} className={className}>
+          Start
+        </Button>
+      </Can>
+    );
+  }
   return (
-    <Can I="POST" a={processInstanceActionPath} ability={ability}>
+    <Button onClick={processInstanceCreateAndRun} className={className}>
-      <Button onClick={processInstanceCreateAndRun} className={className}>
+      Start
-        Start
+    </Button>
-      </Button>
-    </Can>
   );
 }

src/components/ProcessModelListTiles.tsx

@@ -15,11 +15,13 @@ import ProcessInstanceRun from './ProcessInstanceRun';
 type OwnProps = {
   headerElement?: ReactElement;
   processGroup?: ProcessGroup;
+  checkPermissions?: boolean;
 };
 
 export default function ProcessModelListTiles({
   headerElement,
   processGroup,
+  checkPermissions = true,
 }: OwnProps) {
   const [searchParams] = useSearchParams();
   const [processModels, setProcessModels] = useState<ProcessModel[] | null>(
@@ -94,6 +96,7 @@ export default function ProcessModelListTiles({
                 processModel={row}
                 onSuccessCallback={setProcessInstance}
                 className="tile-pin-bottom"
+                checkPermissions={checkPermissions}
               />
             </div>
           </Tile>

src/hooks/PermissionService.tsx

@@ -37,13 +37,14 @@ export const usePermissionFetcher = (
       ability.update(rules);
       setPermissionsLoaded(true);
     };
-
+    if (Object.keys(permissionsToCheck).length !== 0) {
-    HttpService.makeCallToBackend({
+      HttpService.makeCallToBackend({
-      path: `/permissions-check`,
+        path: `/permissions-check`,
-      httpMethod: 'POST',
+        httpMethod: 'POST',
-      successCallback: processPermissionResult,
+        successCallback: processPermissionResult,
-      postBody: { requests_to_check: permissionsToCheck },
+        postBody: { requests_to_check: permissionsToCheck },
-    });
+      });
+    }
   });
 
   return { ability, permissionsLoaded };

src/routes/CreateNewInstance.tsx

@@ -2,6 +2,9 @@ import ProcessModelListTiles from '../components/ProcessModelListTiles';
 
 export default function CreateNewInstance() {
   return (
-    <ProcessModelListTiles headerElement={<h2>Processes I can start</h2>} />
+    <ProcessModelListTiles
+      headerElement={<h2>Processes I can start</h2>}
+      checkPermissions={false}
+    />
   );
 }