fix a couple tests

cypress/e2e/process_models.cy.js

@@ -144,10 +144,11 @@ describe('process-models', () => {
 
     cy.getBySel('process-instance-list-link').click();
     cy.getBySel('process-instance-show-link').click();
-    cy.contains('Delete').click();
+    cy.getBySel('process-instance-delete').click();
     cy.contains('Are you sure');
     cy.getBySel('modal-confirmation-dialog').find('.cds--btn--danger').click();
-    cy.contains(`Process Instances for: ${groupId}/${modelId}`);
+
+    // in breadcrumb
     cy.contains(modelId).click();
 
     cy.contains('Edit process model').click();

src/components/ButtonWithConfirmation.tsx

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import { Button, Modal } from '@carbon/react';
 
 type OwnProps = {
+  'data-qa'?: string;
   description?: string;
   buttonLabel?: string;
   onConfirmation: (..._args: any[]) => any;
@@ -18,6 +19,7 @@ export default function ButtonWithConfirmation({
   description,
   buttonLabel,
   onConfirmation,
+  'data-qa': dataQa,
   title = 'Are you sure?',
   confirmButtonLabel = 'OK',
   kind = 'danger',
@@ -58,6 +60,7 @@ export default function ButtonWithConfirmation({
   return (
     <>
       <Button
+        data-qa={dataQa}
         onClick={handleShowConfirmationPrompt}
         kind={kind}
         renderIcon={renderIcon}

src/routes/ProcessGroupShow.tsx

@@ -10,7 +10,7 @@ import {
   modifyProcessModelPath,
   unModifyProcessModelPath,
 } from '../helpers';
-import { ProcessGroup, ProcessModel } from '../interfaces';
+import { PaginationObject, ProcessGroup, ProcessModel } from '../interfaces';
 
 export default function ProcessGroupShow() {
   const params = useParams();
@@ -19,8 +19,10 @@ export default function ProcessGroupShow() {
   const [processGroup, setProcessGroup] = useState<ProcessGroup | null>(null);
   const [processModels, setProcessModels] = useState([]);
   const [processGroups, setProcessGroups] = useState([]);
-  const [modelPagination, setModelPagination] = useState(null);
-  const [groupPagination, setGroupPagination] = useState(null);
+  const [modelPagination, setModelPagination] =
+    useState<PaginationObject | null>(null);
+  const [groupPagination, setGroupPagination] =
+    useState<PaginationObject | null>(null);
 
   useEffect(() => {
     const { page, perPage } = getPageInfoFromSearchParams(searchParams);
@@ -138,6 +140,7 @@ export default function ProcessGroupShow() {
             ['', `process_group:${processGroup.id}`],
           ]}
         />
+        <h1>Process Group: {processGroup.display_name}</h1>
         <ul>
           <Stack orientation="horizontal" gap={3}>
             <Button
@@ -160,6 +163,7 @@ export default function ProcessGroupShow() {
           </Stack>
           <br />
           <br />
+          {modelPagination && modelPagination.total > 0 && (
             <PaginationForTable
               page={page}
               perPage={perPage}
@@ -167,8 +171,10 @@ export default function ProcessGroupShow() {
               tableToDisplay={buildModelTable()}
               path={`/admin/process-groups/${processGroup.id}`}
             />
+          )}
           <br />
           <br />
+          {groupPagination && groupPagination.total > 0 && (
             <PaginationForTable
               page={page}
               perPage={perPage}
@@ -176,6 +182,7 @@ export default function ProcessGroupShow() {
               tableToDisplay={buildGroupTable()}
               path={`/admin/process-groups/${processGroup.id}`}
             />
+          )}
         </ul>
       </>
     );

src/routes/ProcessInstanceShow.tsx

@@ -521,6 +521,7 @@ export default function ProcessInstanceShow() {
     elements.push(resumeButton(processInstanceToUse));
     elements.push(
       <ButtonWithConfirmation
+        data-qa="process-instance-delete"
         kind="ghost"
         renderIcon={TrashCan}
         iconDescription="Delete"