Bug/UI fixes (#369)

* re-enable the move canvas and zoom modules, and try like hell to get the !@#$! display to zoom to fit consistently. As the from_xml does not trigger the "import.done" where the resize is happening. * Clicking on timestamp should reload the page so we are observing the diagram at the correct point in time. * Use a grid rather than a stack for the filter buttons, make them a consistent width, and force the close "x" button to the far right. * Better handling the lots and lots of metadata fields in both the process instance list table, and in the metadata information on the process instance view page. * Using DL rather than Carbon's grid, because my mind was starting to break. * Process instance List Tables are set to optimize their max width for readability. * assure the diagram editor is top aligned - otherwise when the proprties pannel get's super duper long (as with recent additions to multi-instance) we don't end up with weird spaces showing up above a center aligned canvas.
2023-07-03 23:59:46 -04:00 · 2023-07-03 23:59:46 -04:00 · d350ec99c0
parent f440930ef4
commit d350ec99c0
5 changed files with 151 additions and 138 deletions
--- a/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx
+++ b/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>
--- a/spiffworkflow-frontend/src/components/ProcessInstanceLogList.tsx
+++ b/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"
--- a/spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx
+++ b/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;
--- a/spiffworkflow-frontend/src/index.css
+++ b/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;
 }
+
--- a/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx
+++ b/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>
    );
  };