moved delete and edit model and group buttons to icons on show pages w/ burnettk cullerton

spiffworkflow-frontend/src/components/ProcessGroupForm.tsx

@@ -5,7 +5,6 @@ import { Button, ButtonSet, Form, Stack, TextInput } from '@carbon/react';
 import { modifyProcessIdentifierForPathParam, slugifyString } from '../helpers';
 import HttpService from '../services/HttpService';
 import { ProcessGroup } from '../interfaces';
-import ButtonWithConfirmation from './ButtonWithConfirmation';
 
 type OwnProps = {
   mode: string;
@@ -35,24 +34,10 @@ export default function ProcessGroupForm({
     }
   };
 
-  const navigateToProcessGroups = (_result: any) => {
-    navigate(`/admin/process-groups`);
-  };
-
   const hasValidIdentifier = (identifierToCheck: string) => {
     return identifierToCheck.match(/^[a-z0-9][0-9a-z-]+[a-z0-9]$/);
   };
 
-  const deleteProcessGroup = () => {
-    HttpService.makeCallToBackend({
-      path: `/process-groups/${modifyProcessIdentifierForPathParam(
-        processGroup.id
-      )}`,
-      successCallback: navigateToProcessGroups,
-      httpMethod: 'DELETE',
-    });
-  };
-
   const handleFormSubmission = (event: any) => {
     const searchParams = new URLSearchParams(document.location.search);
     const parentGroupId = searchParams.get('parentGroupId');
@@ -172,17 +157,6 @@ export default function ProcessGroupForm({
 
   const formButtons = () => {
     const buttons = [<Button type="submit">Submit</Button>];
-    if (mode === 'edit') {
-      buttons.push(
-        <ButtonWithConfirmation
-          data-qa="delete-process-group-button"
-          description={`Delete Process Group ${processGroup.id}?`}
-          onConfirmation={deleteProcessGroup}
-          buttonLabel="Delete"
-          confirmButtonLabel="Delete"
-        />
-      );
-    }
     return <ButtonSet>{buttons}</ButtonSet>;
   };
 

spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx

@@ -56,6 +56,7 @@ type OwnProps = {
   processModelFullIdentifier?: string;
   paginationQueryParamPrefix?: string;
   perPageOptions?: number[];
+  showReports?: boolean;
 };
 
 interface dateParameters {
@@ -67,6 +68,7 @@ export default function ProcessInstanceListTable({
   processModelFullIdentifier,
   paginationQueryParamPrefix,
   perPageOptions,
+  showReports = true,
 }: OwnProps) {
   const params = useParams();
   const [searchParams] = useSearchParams();
@@ -704,12 +706,15 @@ export default function ProcessInstanceListTable({
   };
 
   const reportSearchComponent = () => {
+    if (showReports) {
       return (
         <ProcessInstanceReportSearch
           onChange={processInstanceReportDidChange}
           selectedItem={processInstanceReportSelection}
         />
       );
+    }
+    return null;
   };
 
   const filterComponent = () => {

spiffworkflow-frontend/src/routes/ProcessGroupShow.tsx

@@ -1,5 +1,15 @@
 import { useEffect, useState } from 'react';
-import { Link, useSearchParams, useParams } from 'react-router-dom';
+import {
+  Link,
+  useSearchParams,
+  useParams,
+  useNavigate,
+} from 'react-router-dom';
+import {
+  TrashCan,
+  Edit,
+  // @ts-ignore
+} from '@carbon/icons-react';
 // @ts-ignore
 import { Button, Table, Stack } from '@carbon/react';
 import { Can } from '@casl/react';
@@ -20,11 +30,13 @@ import {
 import { useUriListForPermissions } from '../hooks/UriListForPermissions';
 import { usePermissionFetcher } from '../hooks/PermissionService';
 import ProcessGroupListTiles from '../components/ProcessGroupListTiles';
+import ButtonWithConfirmation from '../components/ButtonWithConfirmation';
 // import ProcessModelListTiles from '../components/ProcessModelListTiles';
 
 export default function ProcessGroupShow() {
   const params = useParams();
   const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
 
   const [processGroup, setProcessGroup] = useState<ProcessGroup | null>(null);
   const [processModels, setProcessModels] = useState([]);
@@ -34,7 +46,7 @@ export default function ProcessGroupShow() {
   const { targetUris } = useUriListForPermissions();
   const permissionRequestData: PermissionsToCheck = {
     [targetUris.processGroupListPath]: ['POST'],
-    [targetUris.processGroupShowPath]: ['PUT'],
+    [targetUris.processGroupShowPath]: ['PUT', 'DELETE'],
     [targetUris.processModelCreatePath]: ['POST'],
   };
   const { ability } = usePermissionFetcher(permissionRequestData);
@@ -99,6 +111,22 @@ export default function ProcessGroupShow() {
     );
   };
 
+  const navigateToProcessGroups = (_result: any) => {
+    navigate(`/admin/process-groups`);
+  };
+
+  const deleteProcessGroup = () => {
+    if (processGroup) {
+      HttpService.makeCallToBackend({
+        path: `/process-groups/${modifyProcessIdentifierForPathParam(
+          processGroup.id
+        )}`,
+        successCallback: navigateToProcessGroups,
+        httpMethod: 'DELETE',
+      });
+    }
+  };
+
   if (processGroup && modelPagination) {
     const { page, perPage } = getPageInfoFromSearchParams(searchParams);
     const modifiedProcessGroupId = modifyProcessIdentifierForPathParam(
@@ -112,7 +140,35 @@ export default function ProcessGroupShow() {
             ['', `process_group:${processGroup.id}`],
           ]}
         />
-        <h1>Process Group: {processGroup.display_name}</h1>
+        <Stack orientation="horizontal" gap={1}>
+          <h1 className="with-icons">
+            Process Group: {processGroup.display_name}
+          </h1>
+          <Can I="PUT" a={targetUris.processGroupShowPath} ability={ability}>
+            <Button
+              kind="ghost"
+              data-qa="edit-process-group-button"
+              renderIcon={Edit}
+              iconDescription="Edit Process Group"
+              hasIconOnly
+              href={`/admin/process-groups/${modifiedProcessGroupId}/edit`}
+            >
+              Edit process group
+            </Button>
+          </Can>
+          <Can I="DELETE" a={targetUris.processGroupShowPath} ability={ability}>
+            <ButtonWithConfirmation
+              kind="ghost"
+              data-qa="delete-process-group-button"
+              renderIcon={TrashCan}
+              iconDescription="Delete Process Group"
+              hasIconOnly
+              description={`Delete process group: ${processGroup.display_name}`}
+              onConfirmation={deleteProcessGroup}
+              confirmButtonLabel="Delete"
+            />
+          </Can>
+        </Stack>
         <p className="process-description">{processGroup.description}</p>
         <ul>
           <Stack orientation="horizontal" gap={3}>
@@ -134,13 +190,6 @@ export default function ProcessGroupShow() {
                 Add a process model
               </Button>
             </Can>
-            <Can I="PUT" a={targetUris.processGroupShowPath} ability={ability}>
-              <Button
-                href={`/admin/process-groups/${modifiedProcessGroupId}/edit`}
-              >
-                Edit process group
-              </Button>
-            </Can>
           </Stack>
           <br />
           <br />

spiffworkflow-frontend/src/routes/ProcessModelShow.tsx

@@ -563,7 +563,18 @@ export default function ProcessModelShow() {
           <h1 className="with-icons">
             Process Model: {processModel.display_name}
           </h1>
-
+          <Can I="PUT" a={targetUris.processModelShowPath} ability={ability}>
+            <Button
+              kind="ghost"
+              data-qa="edit-process-model-button"
+              renderIcon={Edit}
+              iconDescription="Edit Process Model"
+              hasIconOnly
+              href={`/admin/process-models/${modifiedProcessModelId}/edit`}
+            >
+              Edit process model
+            </Button>
+          </Can>
           <Can I="DELETE" a={targetUris.processModelShowPath} ability={ability}>
             <ButtonWithConfirmation
               kind="ghost"
@@ -589,14 +600,6 @@ export default function ProcessModelShow() {
               onSuccessCallback={setProcessInstance}
             />
           </Can>
-          <Can I="PUT" a={targetUris.processModelShowPath} ability={ability}>
-            <Button
-              href={`/admin/process-models/${modifiedProcessModelId}/edit`}
-              variant="secondary"
-            >
-              Edit process model
-            </Button>
-          </Can>
         </Stack>
         <br />
         <br />
@@ -608,6 +611,7 @@ export default function ProcessModelShow() {
             filtersEnabled={false}
             processModelFullIdentifier={processModel.id}
             perPageOptions={[2, 5, 25]}
+            showReports={false}
           />
           <br />
         </Can>