Merge branch 'main' into deploy-app-dev

spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx

@@ -1166,50 +1166,54 @@ export default function ProcessInstanceListTable({
           reportColumnLabel = `${reportColumnLabel}=${reportColumnForEditing.filter_field_value}`;
         }
         tags.push(
-          <Tag type={tagType} size="sm">
-            <Button
-              kind="ghost"
-              size="sm"
-              className={`button-tag-icon ${tagTypeClass}`}
-              title={`Edit ${reportColumnForEditing.accessor} column`}
-              onClick={() => {
-                setReportColumnToOperateOn(reportColumnForEditing);
-                setShowReportColumnForm(true);
-                setReportColumnFormMode('edit');
-              }}
-            >
-              {reportColumnLabel}
-            </Button>
-            <Button
-              data-qa="remove-report-column"
-              renderIcon={Close}
-              iconDescription="Remove Column"
-              className={`button-tag-icon ${tagTypeClass}`}
-              hasIconOnly
-              size="sm"
-              kind="ghost"
-              onClick={() => removeColumn(reportColumnForEditing)}
-            />
-          </Tag>
+          <Column md={2} lg={2} sm={2}>
+            <Tag type={tagType} size="sm" className="filter-tag">
+              <Button
+                kind="ghost"
+                size="sm"
+                className={`button-tag ${tagTypeClass}`}
+                title={`Edit ${reportColumnForEditing.accessor} column`}
+                onClick={() => {
+                  setReportColumnToOperateOn(reportColumnForEditing);
+                  setShowReportColumnForm(true);
+                  setReportColumnFormMode('edit');
+                }}
+              >
+                {reportColumnLabel}
+              </Button>
+              <Button
+                data-qa="remove-report-column"
+                renderIcon={Close}
+                iconDescription="Remove Column"
+                className={`button-tag-icon ${tagTypeClass}`}
+                hasIconOnly
+                size="sm"
+                kind="ghost"
+                onClick={() => removeColumn(reportColumnForEditing)}
+              />
+            </Tag>
+          </Column>
         );
       });
       return (
-        <Stack orientation="horizontal">
+        <Grid fullWidth>
           {tags}
-          <Button
-            data-qa="add-column-button"
-            renderIcon={AddAlt}
-            iconDescription="Column options"
-            className="with-tiny-top-margin"
-            kind="ghost"
-            hasIconOnly
-            size="sm"
-            onClick={() => {
-              setShowReportColumnForm(true);
-              setReportColumnFormMode('new');
-            }}
-          />
-        </Stack>
+          <Column md={1} lg={1} sm={1}>
+            <Button
+              data-qa="add-column-button"
+              renderIcon={AddAlt}
+              iconDescription="Column options"
+              className="with-tiny-top-margin"
+              kind="ghost"
+              hasIconOnly
+              size="sm"
+              onClick={() => {
+                setShowReportColumnForm(true);
+                setReportColumnFormMode('new');
+              }}
+            />
+          </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,83 +333,61 @@ 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}>
-            <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>
-        {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">
-              <Link
-                data-qa="go-to-current-diagram-process-model"
-                to={`/admin/process-models/${modifyProcessIdentifierForPathParam(
-                  processInstance.process_model_with_diagram_identifier || ''
-                )}`}
-              >
-                {processInstance.process_model_with_diagram_identifier}
-              </Link>
-            </Column>
-          </Grid>
-        ) : 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
-            )}`}
-          >
-            {convertSecondsToFormattedDateTime(
-              processInstance.start_in_seconds || 0
-            )}
-          </Column>
-        </Grid>
-        {lastUpdatedTimeTag}
-        <Grid condensed fullWidth>
-          <Column sm={2} md={2} lg={3} className="grid-list-title">
-            Process model revision:{' '}
-          </Column>
-          <Column sm={3} md={6} lg={8} className="grid-date">
-            {processInstance.bpmn_version_control_identifier} (
-            {processInstance.bpmn_version_control_type})
-          </Column>
-        </Grid>
-        {(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>
-          )
-        )}
-      </>
+      <Grid condensed fullWidth>
+        <Column sm={4} md={4} lg={8}>
+          <dl>
+            <dt>Status:</dt>
+            <dd>
+              <Tag type={statusColor} size="sm" className="span-tag">
+                {processInstance.status} {statusIcon}
+              </Tag>
+            </dd>
+          </dl>
+          <dl>
+            <dt>Started By:</dt>
+            <dd> {processInstance.process_initiator_username}</dd>
+          </dl>
+          {processInstance.process_model_with_diagram_identifier ? (
+            <dl>
+              <dt>Current Diagram: </dt>
+              <dd>
+                <Link
+                  data-qa="go-to-current-diagram-process-model"
+                  to={`/admin/process-models/${modifyProcessIdentifierForPathParam(
+                    processInstance.process_model_with_diagram_identifier || ''
+                  )}`}
+                >
+                  {processInstance.process_model_with_diagram_identifier}
+                </Link>
+              </dd>
+            </dl>
+          ) : null}
+          <dl>
+            <dt>Started:</dt>
+            <dd>
+              {convertSecondsToFormattedDateTime(
+                processInstance.start_in_seconds || 0
+              )}
+            </dd>
+          </dl>
+          {lastUpdatedTimeTag}
+          <dl>
+            <dt>Revision:</dt>
+            <dd>{processInstance.bpmn_version_control_identifier} (
+              {processInstance.bpmn_version_control_type})</dd>
+          </dl>
+        </Column>
+        <Column sm={4} md={4} lg={8}>
+          {(processInstance.process_metadata || []).map(
+            (processInstanceMetadata) => (
+              <dl>
+                <dt>{processInstanceMetadata.key} :</dt>
+                <dd>{processInstanceMetadata.value}</dd>
+              </dl>
+            )
+          )}
+        </Column>
+      </Grid>
     );
   };