filter process models based on user permissions on the backend if specified w/ burnettk

src/components/ProcessInstanceRun.tsx

@@ -4,10 +4,16 @@ import {
   Button,
   // @ts-ignore
 } from '@carbon/react';
-import { ProcessModel, RecentProcessModel } from '../interfaces';
+import { Can } from '@casl/react';
+import {
+  PermissionsToCheck,
+  ProcessModel,
+  RecentProcessModel,
+} from '../interfaces';
 import HttpService from '../services/HttpService';
 import ErrorContext from '../contexts/ErrorContext';
 import { modifyProcessIdentifierForPathParam } from '../helpers';
+import { usePermissionFetcher } from '../hooks/PermissionService';
 
 const storeRecentProcessModelInLocalStorage = (
   processModelForStorage: ProcessModel
@@ -75,6 +81,12 @@ export default function ProcessInstanceRun({
     processModel.id
   );
 
+  const processInstanceActionPath = `/v1.0/process-models/${modifiedProcessModelId}/process-instances`;
+  const permissionRequestData: PermissionsToCheck = {
+    [processInstanceActionPath]: ['POST'],
+  };
+  const { ability } = usePermissionFetcher(permissionRequestData);
+
   const onProcessInstanceRun = (processInstance: any) => {
     // FIXME: ensure that the task is actually for the current user as well
     const processInstanceId = (processInstance as any).id;
@@ -98,15 +110,17 @@ export default function ProcessInstanceRun({
 
   const processInstanceCreateAndRun = () => {
     HttpService.makeCallToBackend({
-      path: `/process-models/${modifiedProcessModelId}/process-instances`,
+      path: processInstanceActionPath,
       successCallback: processModelRun,
       httpMethod: 'POST',
     });
   };
 
   return (
-    <Button onClick={processInstanceCreateAndRun} className={className}>
-      Run
-    </Button>
+    <Can I="POST" a={processInstanceActionPath} ability={ability}>
+      <Button onClick={processInstanceCreateAndRun} className={className}>
+        Run
+      </Button>
+    </Can>
   );
 }

src/components/ProcessModelListTiles.tsx

@@ -33,11 +33,11 @@ export default function ProcessModelListTiles({
       setProcessModels(result.results);
     };
     // only allow 10 for now until we get the backend only returning certain models for user execution
-    let queryParams = '?per_page=1000';
+    let queryParams = '?per_page=20';
     if (processGroup) {
       queryParams = `${queryParams}&process_group_identifier=${processGroup.id}`;
     } else {
-      queryParams = `${queryParams}&recursive=true`;
+      queryParams = `${queryParams}&recursive=true&filter_runnable_by_user=true`;
     }
     HttpService.makeCallToBackend({
       path: `/process-models${queryParams}`,

src/index.css

@@ -256,3 +256,7 @@ in on this with the react-jsonschema-form repo. This is just a patch fix to allo
 .clear-left {
   clear: left;
 }
+
+td.actions-cell {
+  width: 1em;
+}

src/routes/MyTasks.tsx

@@ -18,7 +18,7 @@ import {
 import ProcessInstanceRun from '../components/ProcessInstanceRun';
 
 const PER_PAGE_FOR_TASKS_ON_HOME_PAGE = 5;
-const REFRESH_INTERVAL = 10;
+const REFRESH_INTERVAL = 5;
 const REFRESH_TIMEOUT = 600;
 
 export default function MyTasks() {
@@ -158,7 +158,7 @@ export default function MyTasks() {
               {row.processModelDisplayName}
             </Link>
           </td>
-          <td>
+          <td className="actions-cell">
             <ProcessInstanceRun
               processModel={processModel}
               onSuccessCallback={setProcessInstance}

src/routes/ProcessGroupShow.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import {
-  Link,
+  // Link,
   useSearchParams,
   useParams,
   useNavigate,
@@ -11,10 +11,9 @@ import {
   // @ts-ignore
 } from '@carbon/icons-react';
 // @ts-ignore
-import { Button, Table, Stack } from '@carbon/react';
+import { Button, Stack } from '@carbon/react';
 import { Can } from '@casl/react';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
-import PaginationForTable from '../components/PaginationForTable';
 import HttpService from '../services/HttpService';
 import {
   getPageInfoFromSearchParams,
@@ -25,7 +24,7 @@ import {
   PaginationObject,
   PermissionsToCheck,
   ProcessGroup,
-  ProcessModel,
+  // ProcessModel,
 } from '../interfaces';
 import { useUriListForPermissions } from '../hooks/UriListForPermissions';
 import { usePermissionFetcher } from '../hooks/PermissionService';
@@ -39,7 +38,7 @@ export default function ProcessGroupShow() {
   const navigate = useNavigate();
 
   const [processGroup, setProcessGroup] = useState<ProcessGroup | null>(null);
-  const [processModels, setProcessModels] = useState([]);
+  // const [processModels, setProcessModels] = useState([]);
   const [modelPagination, setModelPagination] =
     useState<PaginationObject | null>(null);
 
@@ -55,7 +54,7 @@ export default function ProcessGroupShow() {
     const { page, perPage } = getPageInfoFromSearchParams(searchParams);
 
     const setProcessModelFromResult = (result: any) => {
-      setProcessModels(result.results);
+      // setProcessModels(result.results);
       setModelPagination(result.pagination);
     };
     const processResult = (result: any) => {
@@ -74,42 +73,42 @@ export default function ProcessGroupShow() {
     });
   }, [params, searchParams]);
 
-  const buildModelTable = () => {
-    if (processGroup === null) {
-      return null;
-    }
-    const rows = processModels.map((row: ProcessModel) => {
-      const modifiedProcessModelId: String =
-        modifyProcessIdentifierForPathParam((row as any).id);
-      return (
-        <tr key={row.id}>
-          <td>
-            <Link
-              to={`/admin/process-models/${modifiedProcessModelId}`}
-              data-qa="process-model-show-link"
-            >
-              {row.id}
-            </Link>
-          </td>
-          <td>{row.display_name}</td>
-        </tr>
-      );
-    });
-    return (
-      <div>
-        <h2>Process Models</h2>
-        <Table striped bordered>
-          <thead>
-            <tr>
-              <th>Process Model Id</th>
-              <th>Display Name</th>
-            </tr>
-          </thead>
-          <tbody>{rows}</tbody>
-        </Table>
-      </div>
-    );
-  };
+  // const buildModelTable = () => {
+  //   if (processGroup === null) {
+  //     return null;
+  //   }
+  //   const rows = processModels.map((row: ProcessModel) => {
+  //     const modifiedProcessModelId: String =
+  //       modifyProcessIdentifierForPathParam((row as any).id);
+  //     return (
+  //       <tr key={row.id}>
+  //         <td>
+  //           <Link
+  //             to={`/admin/process-models/${modifiedProcessModelId}`}
+  //             data-qa="process-model-show-link"
+  //           >
+  //             {row.id}
+  //           </Link>
+  //         </td>
+  //         <td>{row.display_name}</td>
+  //       </tr>
+  //     );
+  //   });
+  //   return (
+  //     <div>
+  //       <h2>Process Models</h2>
+  //       <Table striped bordered>
+  //         <thead>
+  //           <tr>
+  //             <th>Process Model Id</th>
+  //             <th>Display Name</th>
+  //           </tr>
+  //         </thead>
+  //         <tbody>{rows}</tbody>
+  //       </Table>
+  //     </div>
+  //   );
+  // };
 
   const navigateToProcessGroups = (_result: any) => {
     navigate(`/admin/process-groups`);
@@ -128,7 +127,7 @@ export default function ProcessGroupShow() {
   };
 
   if (processGroup && modelPagination) {
-    const { page, perPage } = getPageInfoFromSearchParams(searchParams);
+    // const { page, perPage } = getPageInfoFromSearchParams(searchParams);
     const modifiedProcessGroupId = modifyProcessIdentifierForPathParam(
       processGroup.id
     );

src/services/HttpService.ts

@@ -66,9 +66,11 @@ backendCallProps) => {
     method: httpMethod,
   });
 
+  const updatedPath = path.replace(/^\/v1\.0/, '');
+
   let isSuccessful = true;
   let is403 = false;
-  fetch(`${BACKEND_BASE_URL}${path}`, httpArgs)
+  fetch(`${BACKEND_BASE_URL}${updatedPath}`, httpArgs)
     .then((response) => {
       if (response.status === 401) {
         UserService.doLogin();