Merge branch 'main' of github.com:sartography/spiff-arena into main

.gitignore

@@ -0,0 +1 @@
+pyrightconfig.json

spiffworkflow-backend/src/spiffworkflow_backend/api.yml

@@ -413,7 +413,7 @@ paths:
       - name: process_status
         in: query
         required: false
-        description: For filtering - not_started, user_input_required, waiting, complete, faulted, or suspended
+        description: For filtering - not_started, user_input_required, waiting, complete, error, or suspended
         schema:
           type: string
     # process_instance_list

spiffworkflow-backend/src/spiffworkflow_backend/models/process_instance.py

@@ -61,10 +61,9 @@ class ProcessInstanceStatus(SpiffEnum):
     user_input_required = "user_input_required"
     waiting = "waiting"
     complete = "complete"
-    faulted = "faulted"
+    error = "error"
     suspended = "suspended"
     terminated = "terminated"
-    erroring = "erroring"
 
 
 class ProcessInstanceModel(SpiffworkflowBaseDBModel):

spiffworkflow-backend/src/spiffworkflow_backend/models/process_instance_report.py

@@ -83,10 +83,6 @@ class ProcessInstanceReportModel(SpiffworkflowBaseDBModel):
             report_metadata = {
                 "columns": [
                     {"Header": "id", "accessor": "id"},
-                    {
-                        "Header": "process_group_identifier",
-                        "accessor": "process_group_identifier",
-                    },
                     {
                         "Header": "process_model_identifier",
                         "accessor": "process_model_identifier",

spiffworkflow-backend/src/spiffworkflow_backend/services/acceptance_test_fixtures.py

@@ -24,7 +24,7 @@ def load_acceptance_test_fixtures() -> list[ProcessInstanceModel]:
     # user_input_required - 2 hours ago
     # waiting - 3 hourse ago
     # complete - 4 hours ago
-    # faulted - 5 hours ago
+    # error - 5 hours ago
     # suspended - 6 hours ago
     process_instances = []
     for i in range(len(statuses)):

spiffworkflow-backend/src/spiffworkflow_backend/services/error_handling_service.py

@@ -46,7 +46,7 @@ class ErrorHandlingService:
             # fault is the default
             self.set_instance_status(
                 _processor.process_instance_model.id,
-                ProcessInstanceStatus.faulted.value,
+                ProcessInstanceStatus.error.value,
             )
 
         if len(process_model.exception_notification_addresses) > 0:

spiffworkflow-backend/src/spiffworkflow_backend/services/process_instance_service.py

@@ -64,7 +64,7 @@ class ProcessInstanceService:
                 processor.do_engine_steps(save=True)
             except Exception as e:
                 db.session.rollback()  # in case the above left the database with a bad transaction
-                process_instance.status = ProcessInstanceStatus.erroring.value
+                process_instance.status = ProcessInstanceStatus.error.value
                 db.session.add(process_instance)
                 db.session.commit()
                 error_message = (

spiffworkflow-backend/tests/spiffworkflow_backend/integration/test_process_api.py

@@ -1716,7 +1716,7 @@ class TestProcessApi(BaseTest):
             .first()
         )
         assert process is not None
-        assert process.status == "faulted"
+        assert process.status == "error"
 
     def test_error_handler_suspend(
         self,
@@ -1827,7 +1827,7 @@ class TestProcessApi(BaseTest):
             .first()
         )
         assert process is not None
-        assert process.status == "faulted"
+        assert process.status == "error"
 
     def test_process_model_file_create(
         self,

spiffworkflow-frontend/src/config.tsx

@@ -12,10 +12,11 @@ export const PROCESS_STATUSES = [
   'user_input_required',
   'waiting',
   'complete',
-  'faulted',
+  'error',
   'suspended',
 ];
 
 // with time: yyyy-MM-dd HH:mm:ss
+export const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';
 export const DATE_FORMAT = 'yyyy-MM-dd';
 export const DATE_FORMAT_CARBON = 'Y-m-d';

spiffworkflow-frontend/src/helpers.tsx

@@ -1,5 +1,5 @@
 import { format } from 'date-fns';
-import { DATE_FORMAT } from './config';
+import { DATE_TIME_FORMAT, DATE_FORMAT } from './config';
 import {
   DEFAULT_PER_PAGE,
   DEFAULT_PAGE,
@@ -51,6 +51,14 @@ export const convertStringToDate = (dateString: string) => {
   return null;
 };
 
+export const convertSecondsToFormattedDateTime = (seconds: number) => {
+  if (seconds) {
+    const dateObject = new Date(seconds * 1000);
+    return format(dateObject, DATE_TIME_FORMAT);
+  }
+  return null;
+};
+
 export const convertSecondsToFormattedDate = (seconds: number) => {
   if (seconds) {
     const dateObject = new Date(seconds * 1000);

spiffworkflow-frontend/src/index.css

@@ -1,24 +1,79 @@
-body {
+/* site is mainly using white theme. */
-  margin: 0;
+/* header is mainly using g100 */
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+/* mockup wanted white, not grey, text */
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+.cds--header, a.cds--header__menu-item {
-    sans-serif;
+  color: white;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 }
 
+h1{
+  height: 36px;
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 28px;
+  line-height: 36px;
+  color: #161616;
+  flex: none;
+  order: 0;
+  align-self: stretch;
+  flex-grow: 0;
+  margin-bottom: 1em
+}
+
+.span-tag {
+  color: black;
+}
+
+.cds--btn.button-white-background {
+  color: #393939;
+  background: #FFFFFF;
+  background-blend-mode: multiply;
+  border: 1px solid #393939;
+}
+.cds--btn.button-white-background:hover {
+  background: #525252;
+}
+
+.cds--breadcrumb-item a.cds--link:hover {
+  color: #525252;
+}
+.cds--breadcrumb-item a.cds--link:visited {
+  color: #525252;
+}
+.cds--breadcrumb-item a.cds--link:visited:hover {
+  color: #525252;
+}
+.cds--breadcrumb-item a.cds--link {
+  color: #525252;
+}
+
+.cds--btn--ghost {
+  color: black;
+}
+.cds--btn--ghost:visited {
+  color: black;
+}
+.cds--btn--ghost:hover {
+  color: black;
+}
+.cds--btn--ghost:visited:hover {
+  color: black;
+}
+
+.cds--header__global .cds--btn--primary {
+  background-color: #161616
+}
+.cds--btn--primary {
+  background-color: #393939;
+}
+.cds--btn--primary:hover {
+  background-color: #474747;
+}
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
 
-span.bjs-crumb {
-  color: #0000ff;
-}
-.bjs-breadcrumbs li:last-of-type span.bjs-crumb a {
-  color: black;
-}
-
 .app-logo {
   height: 85%;
   width: 85%;
@@ -52,6 +107,26 @@ span.bjs-crumb {
   margin-bottom: 2em;
 }
 
+h1.with-icons {
+  margin-top: 5px;
+}
+
+.grid-list-title {
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 18px;
+  color: #161616;
+}
+.grid-date {
+  font-size: 14px;
+  line-height: 18px;
+  letter-spacing: 0.16px;
+  color: #525252;
+}
+.smaller-text {
+  font-size: 14px;
+}
+
 .diagram-editor-canvas {
   border:1px solid #000000;
   height:70vh;
@@ -59,13 +134,6 @@ span.bjs-crumb {
   margin:auto;
 }
 
-.cds--btn.button-white-background {
-  color: #393939;
-  background: #FFFFFF;
-  background-blend-mode: multiply;
-  border: 1px solid #393939;
-}
-
 .with-bottom-margin {
   margin-bottom: 1em;
 }

spiffworkflow-frontend/src/index.scss

@@ -15,85 +15,3 @@
 @use '@carbon/colors';
 // @use '@carbon/react/scss/colors';
 @use '@carbon/react/scss/themes';
-
-// var(--cds-link-text-color, var(--cds-link-primary, #0f62fe))
-
-// site is mainly using white theme.
-// header is mainly using g100
-// mockup wanted white, not grey, text
-.cds--header, a.cds--header__menu-item {
-  // background-color: colors.$gray-100;
-  color: white;
-}
-h1{
-  height: 36px;
-  font-family: 'IBM Plex Sans';
-  font-style: normal;
-  font-weight: 400;
-  font-size: 28px;
-  line-height: 36px;
-  color: #161616;
-  flex: none;
-  order: 0;
-  align-self: stretch;
-  flex-grow: 0;
-  margin-bottom: 1em
-}
-
-
-.cds--breadcrumb-item a.cds--link:hover {
-  color: #525252;
-}
-.cds--breadcrumb-item a.cds--link:visited {
-  color: #525252;
-}
-.cds--breadcrumb-item a.cds--link:visited:hover {
-  color: #525252;
-}
-.cds--breadcrumb-item a.cds--link {
-  color: #525252;
-}
-
-.cds--btn--ghost {
-  color: black;
-}
-.cds--btn--ghost:visited {
-  color: black;
-}
-.cds--btn--ghost:hover {
-  color: black;
-}
-.cds--btn--ghost:visited:hover {
-  color: black;
-}
-
-$slightly-lighter-gray: #474747;
-$spiff-header-background-color: #161616;
-
-.cds--header__global .cds--btn--primary {
-  background-color: $spiff-header-background-color;
-}
-.cds--btn--primary {
-  background-color: #393939;
-}
-.cds--btn--primary:hover {
-  background-color: $slightly-lighter-gray;
-}
-// .cds--btn--ghost:visited {
-//   color: black;
-// }
-// .cds--btn--ghost:hover {
-//   color: black;
-// }
-// .cds--btn--ghost:visited:hover {
-//   color: black;
-// }
-
-
-// :root {
-//   --cds-link-primary: #525252;
-// }
-// .card {
-//   background: var(--orange);
-//   --orange: hsl(255, 72%, var(--lightness));
-// }

spiffworkflow-frontend/src/index.tsx

@@ -3,8 +3,8 @@ import * as ReactDOMClient from 'react-dom/client';
 import App from './App';
 
 import 'bootstrap/dist/css/bootstrap.css';
-import './index.css';
 import './index.scss';
+import './index.css';
 
 import reportWebVitals from './reportWebVitals';
 import UserService from './services/UserService';

spiffworkflow-frontend/src/routes/HomePage.tsx

@@ -122,7 +122,7 @@ export default function HomePage() {
     });
     return (
       <>
-        <h2>Processes I can start</h2>
+        <h1>Processes I can start</h1>
         <Table striped bordered>
           <thead>
             <tr>
@@ -145,7 +145,7 @@ export default function HomePage() {
     );
     return (
       <>
-        <h2>Tasks waiting for me</h2>
+        <h1>Tasks waiting for me</h1>
         <PaginationForTable
           page={page}
           perPage={perPage}

spiffworkflow-frontend/src/routes/MessageInstanceList.tsx

@@ -113,11 +113,12 @@ export default function MessageInstanceList() {
               )}:link`,
             ],
             [
-              `${searchParams.get('process_instance_id')}`,
+              `Process Instance: ${searchParams.get('process_instance_id')}`,
               `/admin/process-models/${searchParams.get(
                 'process_model_id'
               )}/process-instances/${searchParams.get('process_instance_id')}`,
             ],
+            ['Messages'],
           ]}
         />
       );
@@ -125,7 +126,7 @@ export default function MessageInstanceList() {
     return (
       <>
         {breadcrumbElement}
-        <h2>Messages</h2>
+        <h1>Messages</h1>
         <PaginationForTable
           page={page}
           perPage={perPage}

spiffworkflow-frontend/src/routes/ProcessGroupEdit.tsx

@@ -33,7 +33,7 @@ export default function ProcessGroupEdit() {
             ],
           ]}
         />
-        <h2>Edit Process Group: {(processGroup as any).id}</h2>
+        <h1>Edit Process Group: {(processGroup as any).id}</h1>
         <ProcessGroupForm
           mode="edit"
           processGroup={processGroup}

spiffworkflow-frontend/src/routes/ProcessGroupNew.tsx

@@ -20,7 +20,7 @@ export default function ProcessGroupNew() {
   return (
     <>
       <ProcessBreadcrumb hotCrumbs={hotCrumbs} />
-      <h2>Add Process Group</h2>
+      <h1>Add Process Group</h1>
       <ProcessGroupForm
         mode="new"
         processGroup={processGroup}

spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx

@@ -494,7 +494,7 @@ export default function ProcessInstanceList() {
   };
 
   const processInstanceTitleElement = () => {
-    return <h2>Process Instances</h2>;
+    return <h1>Process Instances</h1>;
   };
 
   const toggleShowFilterOptions = () => {

spiffworkflow-frontend/src/routes/ProcessInstanceLogList.tsx

@@ -88,9 +88,10 @@ export default function ProcessInstanceLogList() {
               )}:link`,
             ],
             [
-              `${params.process_instance_id}`,
+              `Process Instance: ${params.process_instance_id}`,
               `/admin/process-models/${params.process_model_id}/process-instances/${params.process_instance_id}`,
             ],
+            ['Logs'],
           ]}
         />
         <PaginationForTable

spiffworkflow-frontend/src/routes/ProcessInstanceReportEdit.tsx

@@ -112,7 +112,7 @@ export default function ProcessInstanceReportEdit() {
   return (
     <>
       <ProcessBreadcrumb />
-      <h2>Edit Process Instance Report: {params.report_identifier}</h2>
+      <h1>Edit Process Instance Report: {params.report_identifier}</h1>
       <ButtonWithConfirmation
         description={`Delete Report ${params.report_identifier}?`}
         onConfirmation={deleteProcessInstanceReport}

spiffworkflow-frontend/src/routes/ProcessInstanceReportList.tsx

@@ -54,7 +54,7 @@ export default function ProcessInstanceReportList() {
         processModelId={params.process_model_id}
         linkProcessModel
       />
-      <h2>Reports for Process Model: {params.process_model_id}</h2>
+      <h1>Reports for Process Model: {params.process_model_id}</h1>
       <Button
         href={`/admin/process-models/${modifiedProcessModelId}/process-instances/reports/new`}
       >

spiffworkflow-frontend/src/routes/ProcessInstanceReportNew.tsx

@@ -59,7 +59,7 @@ export default function ProcessInstanceReportNew() {
   return (
     <>
       <ProcessBreadcrumb />
-      <h2>Add Process Model</h2>
+      <h1>Add Process Model</h1>
       <form onSubmit={addProcessInstanceReport}>
         <label htmlFor="identifier">
           identifier:

spiffworkflow-frontend/src/routes/ProcessInstanceReportShow.tsx

@@ -80,7 +80,7 @@ export default function ProcessInstanceReport() {
           processGroupId={params.process_group_id}
           linkProcessModel
         />
-        <h2>Process Instance Report: {params.report_identifier}</h2>
+        <h1>Process Instance Report: {params.report_identifier}</h1>
         <Button
           href={`/admin/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/reports/${params.report_identifier}/edit`}
         >

spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx

@@ -1,20 +1,33 @@
 import { useContext, useEffect, useState } from 'react';
 import Editor from '@monaco-editor/react';
 import { useParams, useNavigate, Link } from 'react-router-dom';
+import {
+  TrashCan,
+  StopOutline,
+  PauseOutline,
+  PlayOutline,
+  CaretLeft,
+  CaretRight,
+  InProgress,
+  Checkmark,
+  Warning,
+  // @ts-ignore
+} from '@carbon/icons-react';
 import {
   Grid,
   Column,
   Button,
+  ButtonSet,
+  Tag,
   Modal,
   Stack,
-  UnorderedList,
   // @ts-ignore
 } from '@carbon/react';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import HttpService from '../services/HttpService';
 import ReactDiagramEditor from '../components/ReactDiagramEditor';
 import {
-  convertSecondsToFormattedDate,
+  convertSecondsToFormattedDateTime,
   unModifyProcessModelPath,
 } from '../helpers';
 import ButtonWithConfirmation from '../components/ButtonWithConfirmation';
@@ -132,7 +145,7 @@ export default function ProcessInstanceShow() {
 
   const spiffStepLink = (
     processInstanceToUse: any,
-    label: string,
+    label: any,
     distance: number
   ) => {
     return (
@@ -155,7 +168,7 @@ export default function ProcessInstanceShow() {
       return null;
     }
 
-    return spiffStepLink(processInstanceToUse, '<<', -1);
+    return spiffStepLink(processInstanceToUse, <CaretLeft />, -1);
   };
 
   const nextStepLink = (processInstanceToUse: any) => {
@@ -163,62 +176,106 @@ export default function ProcessInstanceShow() {
       return null;
     }
 
-    return spiffStepLink(processInstanceToUse, '>>', 1);
+    return spiffStepLink(processInstanceToUse, <CaretRight />, 1);
   };
 
   const getInfoTag = (processInstanceToUse: any) => {
-    const currentEndDate = convertSecondsToFormattedDate(
+    const currentEndDate = convertSecondsToFormattedDateTime(
       processInstanceToUse.end_in_seconds
     );
     let currentEndDateTag;
     if (currentEndDate) {
       currentEndDateTag = (
-        <li>
+        <Grid condensed fullWidth>
-          Completed:{' '}
+          <Column sm={1} md={1} lg={1} className="grid-list-title">
-          {convertSecondsToFormattedDate(processInstanceToUse.end_in_seconds) ||
+            Completed:{' '}
-            'N/A'}
+          </Column>
-        </li>
+          <Column sm={3} md={3} lg={3} className="grid-date">
+            {convertSecondsToFormattedDateTime(
+              processInstanceToUse.end_in_seconds
+            ) || 'N/A'}
+          </Column>
+        </Grid>
       );
     }
 
+    let statusIcon = <InProgress />;
+    if (processInstanceToUse.status === 'suspended') {
+      statusIcon = <PauseOutline />;
+    } else if (processInstanceToUse.status === 'complete') {
+      statusIcon = <Checkmark />;
+    } else if (processInstanceToUse.status === 'terminated') {
+      statusIcon = <StopOutline />;
+    } else if (processInstanceToUse.status === 'error') {
+      statusIcon = <Warning />;
+    }
+
     return (
-      <UnorderedList>
+      <>
-        <li>
+        <Grid condensed fullWidth>
-          Started:{' '}
+          <Column sm={1} md={1} lg={1} className="grid-list-title">
-          {convertSecondsToFormattedDate(processInstanceToUse.start_in_seconds)}
+            Started:{' '}
-        </li>
+          </Column>
+          <Column sm={3} md={3} lg={3} className="grid-date">
+            {convertSecondsToFormattedDateTime(
+              processInstanceToUse.start_in_seconds
+            )}
+          </Column>
+        </Grid>
         {currentEndDateTag}
-        <li>Status: {processInstanceToUse.status}</li>
+        <Grid condensed fullWidth>
-        <li>
+          <Column sm={1} md={1} lg={1} className="grid-list-title">
-          <Link
+            Status:{' '}
-            data-qa="process-instance-log-list-link"
+          </Column>
-            to={`/admin/process-models/${modifiedProcessModelId}/process-instances/${params.process_instance_id}/logs`}
+          <Column sm={3} md={3} lg={3}>
-          >
+            <Tag type="gray" size="sm" className="span-tag">
-            Logs
+              {processInstanceToUse.status} {statusIcon}
-          </Link>
+            </Tag>
-        </li>
+          </Column>
-        <li>
+        </Grid>
-          <Link
+        <br />
-            data-qa="process-instance-message-instance-list-link"
+        <Grid condensed fullWidth>
-            to={`/admin/messages?process_model_id=${params.process_model_id}&process_instance_id=${params.process_instance_id}`}
+          <Column sm={2} md={2} lg={2}>
-          >
+            <ButtonSet>
-            Messages
+              <Button
-          </Link>
+                size="sm"
-        </li>
+                className="button-white-background"
-      </UnorderedList>
+                data-qa="process-instance-log-list-link"
+                href={`/admin/process-models/${modifiedProcessModelId}/process-instances/${params.process_instance_id}/logs`}
+              >
+                Logs
+              </Button>
+              <Button
+                size="sm"
+                className="button-white-background"
+                data-qa="process-instance-message-instance-list-link"
+                href={`/admin/messages?process_model_id=${params.process_model_id}&process_instance_id=${params.process_instance_id}`}
+              >
+                Messages
+              </Button>
+            </ButtonSet>
+          </Column>
+        </Grid>
+      </>
     );
   };
 
   const terminateButton = (processInstanceToUse: any) => {
     if (
-      ['complete', 'terminated', 'faulted'].indexOf(
+      ['complete', 'terminated', 'error'].indexOf(
         processInstanceToUse.status
       ) === -1
     ) {
       return (
-        <Button onClick={terminateProcessInstance} variant="warning">
+        <ButtonWithConfirmation
-          Terminate
+          kind="ghost"
-        </Button>
+          renderIcon={StopOutline}
+          iconDescription="Terminate"
+          hasIconOnly
+          description={`Terminate Process Instance: ${processInstanceToUse.id}`}
+          onConfirmation={terminateProcessInstance}
+          confirmButtonLabel="Terminate"
+        />
       );
     }
     return <div />;
@@ -226,14 +283,19 @@ export default function ProcessInstanceShow() {
 
   const suspendButton = (processInstanceToUse: any) => {
     if (
-      ['complete', 'terminated', 'faulted', 'suspended'].indexOf(
+      ['complete', 'terminated', 'error', 'suspended'].indexOf(
         processInstanceToUse.status
       ) === -1
     ) {
       return (
-        <Button onClick={suspendProcessInstance} variant="warning">
+        <Button
-          Suspend
+          onClick={suspendProcessInstance}
-        </Button>
+          kind="ghost"
+          renderIcon={PauseOutline}
+          iconDescription="Suspend"
+          hasIconOnly
+          size="lg"
+        />
       );
     }
     return <div />;
@@ -242,9 +304,14 @@ export default function ProcessInstanceShow() {
   const resumeButton = (processInstanceToUse: any) => {
     if (processInstanceToUse.status === 'suspended') {
       return (
-        <Button onClick={resumeProcessInstance} variant="warning">
+        <Button
-          Resume
+          onClick={resumeProcessInstance}
-        </Button>
+          kind="ghost"
+          renderIcon={PlayOutline}
+          iconDescription="Resume"
+          hasIconOnly
+          size="lg"
+        />
       );
     }
     return <div />;
@@ -434,9 +501,9 @@ export default function ProcessInstanceShow() {
 
   const stepsElement = (processInstanceToUse: any) => {
     return (
-      <Grid fullWidth>
+      <Grid condensed fullWidth>
         <Column sm={3} md={3} lg={3}>
-          <Stack orientation="horizontal" gap={3}>
+          <Stack orientation="horizontal" gap={3} className="smaller-text">
             {previousStepLink(processInstanceToUse)}
             Step {currentSpiffStep(processInstanceToUse)} of{' '}
             {processInstanceToUse.spiff_step}
@@ -447,6 +514,25 @@ export default function ProcessInstanceShow() {
     );
   };
 
+  const buttonIcons = (processInstanceToUse: any) => {
+    const elements = [];
+    elements.push(terminateButton(processInstanceToUse));
+    elements.push(suspendButton(processInstanceToUse));
+    elements.push(resumeButton(processInstanceToUse));
+    elements.push(
+      <ButtonWithConfirmation
+        kind="ghost"
+        renderIcon={TrashCan}
+        iconDescription="Delete"
+        hasIconOnly
+        description={`Delete Process Instance: ${processInstanceToUse.id}`}
+        onConfirmation={deleteProcessInstance}
+        confirmButtonLabel="Delete"
+      />
+    );
+    return elements;
+  };
+
   if (processInstance && tasks) {
     const processInstanceToUse = processInstance as any;
     const taskIds = getTaskIds();
@@ -463,20 +549,14 @@ export default function ProcessInstanceShow() {
               `Process Model: ${processModelId}`,
               `process_model:${processModelId}:link`,
             ],
-            [`${processInstanceToUse.id}`],
+            [`Process Instance Id: ${processInstanceToUse.id}`],
           ]}
         />
-        <h1>Process Instance Id: {processInstanceToUse.id}</h1>
+        <Stack orientation="horizontal" gap={1}>
-        <Stack orientation="horizontal" gap={3}>
+          <h1 className="with-icons">
-          <ButtonWithConfirmation
+            Process Instance Id: {processInstanceToUse.id}
-            description="Delete Process Instance?"
+          </h1>
-            onConfirmation={deleteProcessInstance}
+          {buttonIcons(processInstanceToUse)}
-            buttonLabel="Delete"
-            confirmButtonLabel="Delete"
-          />
-          {terminateButton(processInstanceToUse)}
-          {suspendButton(processInstanceToUse)}
-          {resumeButton(processInstanceToUse)}
         </Stack>
         <br />
         <br />

spiffworkflow-frontend/src/routes/ProcessModelEdit.tsx

@@ -30,7 +30,7 @@ export default function ProcessModelEdit() {
             ],
           ]}
         />
-        <h2>Edit Process Model: {(processModel as any).id}</h2>
+        <h1>Edit Process Model: {(processModel as any).id}</h1>
         <ProcessModelForm
           mode="edit"
           processGroupId={params.process_group_id}

spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx

@@ -641,12 +641,17 @@ export default function ProcessModelEditDiagram() {
     return (
       <Modal
         open={showMarkdownEditor}
-        modalHeading={`Edit Markdown`}
+        modalHeading="Edit Markdown"
         primaryButtonText="Close"
         onRequestSubmit={handleMarkdownEditorClose}
         size="lg"
       >
-        <MDEditor height={500} highlightEnable={false} value={markdownText} onChange={setMarkdownText} />
+        <MDEditor
+          height={500}
+          highlightEnable={false}
+          value={markdownText}
+          onChange={setMarkdownText}
+        />
       </Modal>
     );
   };
@@ -676,8 +681,6 @@ export default function ProcessModelEditDiagram() {
    * @param processId
    */
 
-
-
   const onLaunchBpmnEditor = (processId: string) => {
     const file = findFileNameForReferenceId(processId, 'bpmn');
     if (file) {
@@ -779,10 +782,10 @@ export default function ProcessModelEditDiagram() {
             [processModelFileName],
           ]}
         />
-        <h2>
+        <h1>
           Process Model File{processModelFile ? ': ' : ''}
           {processModelFileName}
-        </h2>
+        </h1>
         {appropriateEditor()}
         {newFileNameBox()}
         {scriptEditor()}

spiffworkflow-frontend/src/routes/ProcessModelNew.tsx

@@ -25,7 +25,7 @@ export default function ProcessModelNew() {
           ],
         ]}
       />
-      <h2>Add Process Model</h2>
+      <h1>Add Process Model</h1>
       <ProcessModelForm
         mode="new"
         processGroupId={params.process_group_id}

spiffworkflow-frontend/src/routes/ReactFormEditor.tsx

@@ -166,10 +166,10 @@ export default function ReactFormEditor() {
             [processModelFileName],
           ]}
         />
-        <h2>
+        <h1>
           Process Model File{processModelFile ? ': ' : ''}
           {processModelFileName}
-        </h2>
+        </h1>
         {newFileNameBox()}
         <Button onClick={saveFile} variant="danger" data-qa="file-save-button">
           Save

spiffworkflow-frontend/src/routes/SecretList.tsx

@@ -95,7 +95,7 @@ export default function SecretList() {
   if (pagination) {
     return (
       <div>
-        <h2>Secrets</h2>
+        <h1>Secrets</h1>
         {SecretsDisplayArea()}
         <Button href="/admin/secrets/new">Add a secret</Button>
       </div>

spiffworkflow-frontend/src/routes/SecretNew.tsx

@@ -46,7 +46,7 @@ export default function SecretNew() {
 
   return (
     <main style={{ padding: '1rem 0' }}>
-      <h2>Add Secret</h2>
+      <h1>Add Secret</h1>
       <Form onSubmit={addSecret}>
         <Form.Group className="mb-3" controlId="formDisplayName">
           <Form.Label>

spiffworkflow-frontend/src/routes/SecretShow.tsx

@@ -65,7 +65,7 @@ export default function SecretShow() {
   if (secret) {
     return (
       <>
-        <h2>Secret Key: {secret.key}</h2>
+        <h1>Secret Key: {secret.key}</h1>
         <Stack orientation="horizontal" gap={3}>
           <ButtonWithConfirmation
             description="Delete Secret?"