Merge branch 'main' into deploy-app-dev

spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx

@@ -1166,11 +1166,12 @@ export default function ProcessInstanceListTable({
           reportColumnLabel = `${reportColumnLabel}=${reportColumnForEditing.filter_field_value}`;
         }
         tags.push(
-          <Tag type={tagType} size="sm">
+          <Column md={2} lg={2} sm={2}>
+            <Tag type={tagType} size="sm" className="filter-tag">
               <Button
                 kind="ghost"
                 size="sm"
-              className={`button-tag-icon ${tagTypeClass}`}
+                className={`button-tag ${tagTypeClass}`}
                 title={`Edit ${reportColumnForEditing.accessor} column`}
                 onClick={() => {
                   setReportColumnToOperateOn(reportColumnForEditing);
@@ -1191,11 +1192,13 @@ export default function ProcessInstanceListTable({
                 onClick={() => removeColumn(reportColumnForEditing)}
               />
             </Tag>
+          </Column>
         );
       });
       return (
-        <Stack orientation="horizontal">
+        <Grid fullWidth>
           {tags}
+          <Column md={1} lg={1} sm={1}>
             <Button
               data-qa="add-column-button"
               renderIcon={AddAlt}
@@ -1209,7 +1212,8 @@ export default function ProcessInstanceListTable({
                 setReportColumnFormMode('new');
               }}
             />
-        </Stack>
+          </Column>
+        </Grid>
       );
     }
     return null;
@@ -1655,7 +1659,7 @@ export default function ProcessInstanceListTable({
 
     return (
       // eslint-disable-next-line react/jsx-props-no-spreading
-      <Table {...tableProps}>
+      <Table {...tableProps} className="process-instance-list">
         <TableHead>
           <TableRow>
             {headers.map((header: any) => (
@@ -1781,7 +1785,7 @@ export default function ProcessInstanceListTable({
       {processInstanceReportSaveTag()}
       <Grid fullWidth condensed>
         {tableTitleLine()}
-        <Column sm={{ span: 4 }} md={{ span: 8 }} lg={{ span: 16 }}>
+        <Column sm={{ span: 4 }} md={{ span: 8 }} lg={{ span: 16 }} style={{maxWidth:'fit-content'}}>
           <Filters
             filterOptions={filterOptions}
             showFilterOptions={showFilterOptions}
@@ -1790,7 +1794,7 @@ export default function ProcessInstanceListTable({
             filtersEnabled={filtersEnabled}
           />
         </Column>
-        <Column sm={{ span: 4 }} md={{ span: 8 }} lg={{ span: 16 }}>
+        <Column sm={{ span: 4 }} md={{ span: 8 }} lg={{ span: 16 }} style={{maxWidth:'fit-content', margin:'auto'}}>
           {resultsTable}
         </Column>
       </Grid>

spiffworkflow-frontend/src/components/ProcessInstanceLogList.tsx

@@ -285,6 +285,7 @@ export default function ProcessInstanceLogList({
       timestampComponent = (
         <td>
           <Link
+            reloadDocument
             data-qa="process-instance-show-link"
             to={`${processInstanceShowPageBaseUrl}/${logEntry.process_instance_id}/${logEntry.spiff_task_guid}`}
             title="View state when task was completed"

spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx

@@ -43,6 +43,11 @@ import spiffModdleExtension from 'bpmn-js-spiffworkflow/app/spiffworkflow/moddle
 
 // @ts-expect-error TS(7016) FIXME
 import KeyboardMoveModule from 'diagram-js/lib/navigation/keyboard-move';
+// @ts-expect-error TS(7016) FIXME
+import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';
+// @ts-expect-error TS(7016) FIXME
+import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll';
+
 // @ts-expect-error TS(7016) FIXME
 import TouchModule from 'diagram-js/lib/navigation/touch';
 
@@ -212,7 +217,12 @@ export default function ReactDiagramEditor({
 
         // taken from the non-modeling components at
         //  bpmn-js/lib/Modeler.js
-        additionalModules: [KeyboardMoveModule, TouchModule],
+        additionalModules: [
+          KeyboardMoveModule,
+          MoveCanvasModule,
+          TouchModule,
+          ZoomScrollModule,
+        ],
       });
     }
 
@@ -485,6 +495,7 @@ export default function ReactDiagramEditor({
               ref.element.set(ref.property, elem);
             });
             diagramModelerToUse.importDefinitions(result.rootElement);
+            diagramModelerToUse.get('canvas').zoom('fit-viewport');
           });
       } else {
         diagramModelerToUse.importXML(diagramXMLToDisplay);
@@ -514,7 +525,6 @@ export default function ReactDiagramEditor({
         successCallback: setDiagramXMLStringFromResponseJson,
       });
     }
-
     (diagramModelerState as any).on('import.done', onImportDone);
 
     const diagramXMLToUse = diagramXML || diagramXMLString;

spiffworkflow-frontend/src/index.css

@@ -179,18 +179,20 @@ h1.with-icons {
   margin-top: 5px;
 }
 
-.grid-list-title {
+dl {
+  display: grid;
+  line-height: 1.2em;
+  grid-template-columns: 25% 75%;
+}
+
+dt {
   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;
 }
@@ -199,7 +201,7 @@ h1.with-icons {
   border:1px solid #000000;
   height:70vh;
   width:90vw;
-  margin:auto;
+  margin: 0 auto;
 }
 
 .with-bottom-margin {
@@ -444,6 +446,27 @@ svg.notification-icon {
   color: red;
 }
 
+.filter-tag {
+  justify-content: left;
+  width: 100%;
+}
+.filter-tag > span {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+}
+
+.filter-tag > span > span {
+  margin-right: 0.5px;
+}
+
+.cds--btn--ghost.cds--btn--sm.button-tag {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+  flex-grow: 1;
+}
+
 .cds--btn--ghost.cds--btn--sm.button-tag-icon {
   padding-left: 0;
   padding-right: 0;
@@ -615,3 +638,4 @@ hr {
 #hidden-form-for-autosave {
   display: none;
 }
+

spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx

@@ -312,14 +312,10 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
       lastUpdatedTime = processInstance.end_in_seconds;
     }
     const lastUpdatedTimeTag = (
-      <Grid condensed fullWidth>
-        <Column sm={2} md={2} lg={3} className="grid-list-title">
-          {lastUpdatedTimeLabel}:{' '}
-        </Column>
-        <Column sm={3} md={6} lg={8} className="grid-date">
-          {convertSecondsToFormattedDateTime(lastUpdatedTime || 0) || 'N/A'}
-        </Column>
-      </Grid>
+      <dl>
+        <dt>{lastUpdatedTimeLabel}:</dt>
+        <dd>{convertSecondsToFormattedDateTime(lastUpdatedTime || 0) || 'N/A'}</dd>
+      </dl>
     );
 
     let statusIcon = <InProgress />;
@@ -337,31 +333,24 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
     }
 
     return (
-      <>
       <Grid condensed fullWidth>
-          <Column sm={2} md={2} lg={3} className="grid-list-title">
-            Status:{' '}
-          </Column>
-          <Column sm={3} md={6} lg={8}>
+        <Column sm={4} md={4} lg={8}>
+          <dl>
+            <dt>Status:</dt>
+            <dd>
               <Tag type={statusColor} size="sm" className="span-tag">
                 {processInstance.status} {statusIcon}
               </Tag>
-          </Column>
-        </Grid>
-        <Grid condensed fullWidth>
-          <Column sm={2} md={2} lg={3} className="grid-list-title">
-            Started By:{' '}
-          </Column>
-          <Column sm={3} md={6} lg={8} className="grid-date">
-            {processInstance.process_initiator_username}
-          </Column>
-        </Grid>
+            </dd>
+          </dl>
+          <dl>
+            <dt>Started By:</dt>
+            <dd> {processInstance.process_initiator_username}</dd>
+          </dl>
           {processInstance.process_model_with_diagram_identifier ? (
-          <Grid condensed fullWidth>
-            <Column sm={2} md={2} lg={3} className="grid-list-title">
-              Current Diagram:{' '}
-            </Column>
-            <Column sm={4} md={6} lg={8} className="grid-date">
+            <dl>
+              <dt>Current Diagram: </dt>
+              <dd>
                 <Link
                   data-qa="go-to-current-diagram-process-model"
                   to={`/admin/process-models/${modifyProcessIdentifierForPathParam(
@@ -370,50 +359,35 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
                 >
                   {processInstance.process_model_with_diagram_identifier}
                 </Link>
-            </Column>
-          </Grid>
+              </dd>
+            </dl>
           ) : null}
-        <Grid condensed fullWidth>
-          <Column sm={2} md={2} lg={3} className="grid-list-title">
-            Started:{' '}
-          </Column>
-          <Column
-            sm={3}
-            md={3}
-            lg={3}
-            className="grid-date"
-            title={`Created At: ${convertSecondsToFormattedDateTime(
-              processInstance.created_at_in_seconds
-            )}`}
-          >
+          <dl>
+            <dt>Started:</dt>
+            <dd>
               {convertSecondsToFormattedDateTime(
                 processInstance.start_in_seconds || 0
               )}
-          </Column>
-        </Grid>
+            </dd>
+          </dl>
           {lastUpdatedTimeTag}
-        <Grid condensed fullWidth>
-          <Column sm={2} md={2} lg={3} className="grid-list-title">
-            Process model revision:{' '}
+          <dl>
+            <dt>Revision:</dt>
+            <dd>{processInstance.bpmn_version_control_identifier} (
+              {processInstance.bpmn_version_control_type})</dd>
+          </dl>
         </Column>
-          <Column sm={3} md={6} lg={8} className="grid-date">
-            {processInstance.bpmn_version_control_identifier} (
-            {processInstance.bpmn_version_control_type})
-          </Column>
-        </Grid>
+        <Column sm={4} md={4} lg={8}>
           {(processInstance.process_metadata || []).map(
             (processInstanceMetadata) => (
-            <Grid condensed fullWidth>
-              <Column sm={2} md={2} lg={3} className="grid-list-title">
-                {processInstanceMetadata.key}:
-              </Column>
-              <Column sm={3} md={6} lg={8} className="grid-date">
-                {processInstanceMetadata.value}
-              </Column>
-            </Grid>
+              <dl>
+                <dt>{processInstanceMetadata.key} :</dt>
+                <dd>{processInstanceMetadata.value}</dd>
+              </dl>
             )
           )}
-      </>
+        </Column>
+      </Grid>
     );
   };