From 746a41c524871faf693df51b6310cb5e3f891061 Mon Sep 17 00:00:00 2001
From: Dan Funk <daniel.h.funk@gmail.com>
Date: Thu, 6 Jul 2023 16:38:44 -0400
Subject: [PATCH] Feature/never ending UI tweaks 2 (#377)

* Using a rem based measurement rather than pixels, to better handle 4k displays and their adjusted font sizes - and setting relatively large breakpoints and page width limits that should result in a better view of the tables on the home page.

* Here is the latest:

    * Improved metadata display on the process instance page, with better widths, grayed out text (which I lost at some point).
    * Reduced the End Task "instructions for end user" size, and added a fade out on the bottom.
    * Improved the "chicken buttons" for custom columns on the process instance list filters, which can now accommodate very long names for the columns.
    * Removed the "show-page" which is more consistently handled by the content wrappers for the different routers.
---
 .../src/components/InstructionsForEndUser.tsx |  17 +--
 .../components/ProcessInstanceListTable.tsx   |   2 +-
 spiffworkflow-frontend/src/index.css          |  22 ++--
 spiffworkflow-frontend/src/index.scss         |  28 +++--
 .../src/routes/ProcessInstanceShow.tsx        | 106 +++++++++---------
 .../src/routes/ProcessInterstitialPage.tsx    |   4 +-
 .../src/routes/ProcessModelShow.tsx           |   4 +-
 .../src/routes/TaskShow.tsx                   |   4 +-
 8 files changed, 99 insertions(+), 88 deletions(-)

diff --git a/spiffworkflow-frontend/src/components/InstructionsForEndUser.tsx b/spiffworkflow-frontend/src/components/InstructionsForEndUser.tsx
index ef4e243b..52a7102d 100644
--- a/spiffworkflow-frontend/src/components/InstructionsForEndUser.tsx
+++ b/spiffworkflow-frontend/src/components/InstructionsForEndUser.tsx
@@ -73,29 +73,20 @@ export default function InstructionsForEndUser({
     return null;
   };
 
-  let instructionsShown = instructions;
+  let className = 'markdown';
   if (collapsed) {
-    if (wordCount(instructions) > maxWordCount) {
-      instructionsShown = instructions
-        .split(' ')
-        .slice(0, maxWordCount)
-        .join(' ');
-      instructionsShown += '...';
-    } else if (lineCount(instructions) > maxLineCount) {
-      instructionsShown = instructions.split('\n').slice(0, 5).join(' ');
-      instructionsShown += '...';
-    }
+    className += ' markdown-collapsed';
   }
 
   return (
     <div style={{ margin: '20px 0 20px 0' }}>
-      <div className="markdown">
+      <div className={className}>
         {/*
           https://www.npmjs.com/package/@uiw/react-md-editor switches to dark mode by default by respecting @media (prefers-color-scheme: dark)
           This makes it look like our site is broken, so until the rest of the site supports dark mode, turn off dark mode for this component.
         */}
         <div data-color-mode="light">
-          <MDEditor.Markdown linkTarget="_blank" source={instructionsShown} />
+          <MDEditor.Markdown linkTarget="_blank" source={instructions} />
         </div>
       </div>
       {showCollapseToggle()}
diff --git a/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx b/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx
index 4a3f471e..a6809240 100644
--- a/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx
+++ b/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx
@@ -1195,7 +1195,7 @@ export default function ProcessInstanceListTable({
         );
       });
       return (
-        <Grid fullWidth>
+        <Grid narrow fullWidth className="filter-buttons">
           {tags}
           <Column md={1} lg={1} sm={1}>
             <Button
diff --git a/spiffworkflow-frontend/src/index.css b/spiffworkflow-frontend/src/index.css
index f6a0b3eb..0e172529 100644
--- a/spiffworkflow-frontend/src/index.css
+++ b/spiffworkflow-frontend/src/index.css
@@ -180,17 +180,23 @@ h1.with-icons {
 }
 
 dl {
-  display: grid;
-  line-height: 1.2em;
-  grid-template-columns: 25% 75%;
+  display: block;
+  grid-template-columns: 35% 65%;
+  font-size: .8rem;
+  line-height: 1.2rem;
 }
 
-dt {
+dl dt {
+  display: inline-block;
   font-weight: 600;
-  font-size: 14px;
-  line-height: 18px;
+  min-width: 5rem;
   color: #161616;
+}
 
+dl dd {
+  display: inline-block;
+  padding-left: 1rem;
+  color: #525252;
 }
 
 .smaller-text {
@@ -398,9 +404,11 @@ td.actions-cell {
 .process-instance-list-table {
   margin: 0;
   padding: 0;
-  width: fit-content;
 }
 
+.process-instance-list-table button.button-tag {
+  max-width: calc(100% - 1rem);
+}
 
 .process-instance-table-header {
   margin-bottom: 1em;
diff --git a/spiffworkflow-frontend/src/index.scss b/spiffworkflow-frontend/src/index.scss
index d7b05535..0235b66a 100644
--- a/spiffworkflow-frontend/src/index.scss
+++ b/spiffworkflow-frontend/src/index.scss
@@ -23,20 +23,20 @@ main {
 }
 
 .fixed-width-container {
-  padding-left: 0px;
+  padding-left: 0;
   overflow: visible;
 }
 
-@media (min-width: 1400px) {
+@media (min-width: 99rem) {
   .fixed-width-container {
-    max-width: 1280px;
+    max-width: 99rem;
     padding-right: 0;
   }
 }
 
-@media (min-width: 1056px) {
+@media (min-width: 80rem) {
   .fixed-width-container {
-    padding-left: 180px;
+    padding-left: 10rem;
     padding-right: 2rem;
   }
 }
@@ -48,13 +48,27 @@ li.cds--accordion__item {
   max-width: 100%;
 }
 
-div.show-page, div.markdown, div.markdown-collapsed, div.markdown-collapsable {
-  margin: 0 auto;
+div.markdown {
   max-width: 1000px;
   padding: 15px 0 15px 0;
   overflow: visible;
 }
 
+div.markdown-collapsed {
+  max-height: 200px;
+  overflow: hidden;
+
+  --mask: linear-gradient(to bottom,
+          rgba(0,0,0, 1) 0,   rgba(0,0,0, 1) 40%,
+          rgba(0,0,0, 0) 95%, rgba(0,0,0, 0) 0
+  ) 100% 50% / 100% 100% repeat-x;
+
+  font: 2em/1.6em Arial;
+  -webkit-mask: var(--mask);
+  mask: var(--mask);
+}
+
+
 .cds--data-table-content {
   width: fit-content;
   min-width: 100%;
diff --git a/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx b/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx
index c6dfc0a0..5b68e369 100644
--- a/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx
@@ -336,7 +336,7 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
 
     return (
       <Grid condensed fullWidth>
-        <Column sm={4} md={4} lg={8}>
+        <Column sm={4} md={4} lg={5}>
           <dl>
             <dt>Status:</dt>
             <dd>
@@ -1070,59 +1070,57 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
 
     return (
       <>
-        <div className="show-page">
-          <ProcessBreadcrumb
-            hotCrumbs={[
-              ['Process Groups', '/admin'],
-              {
-                entityToExplode: processModelId,
-                entityType: 'process-model-id',
-                linkLastItem: true,
-              },
-              [`Process Instance Id: ${processInstance.id}`],
-            ]}
-          />
-          <Stack orientation="horizontal" gap={1}>
-            <h1 className="with-icons">
-              Process Instance Id: {processInstance.id}
-            </h1>
-            {buttonIcons()}
-          </Stack>
-          {getInfoTag()}
-          <ProcessInterstitial
-            processInstanceId={processInstance.id}
-            processInstanceShowPageUrl={processInstanceShowPageBaseUrl}
-            allowRedirect={false}
-            smallSpinner
-            collapsableInstructions
-            executeTasks={false}
-          />
-          <Grid condensed fullWidth>
-            <Column md={6} lg={8} sm={4}>
-              <TaskListTable
-                apiPath="/tasks"
-                additionalParams={`process_instance_id=${processInstance.id}`}
-                tableTitle="Tasks I can complete"
-                tableDescription="These are tasks that can be completed by you, either because they were assigned to a group you are in, or because they were assigned directly to you."
-                paginationClassName="with-large-bottom-margin"
-                textToShowIfEmpty="There are no tasks you can complete for this process instance."
-                shouldPaginateTable={false}
-                showProcessModelIdentifier={false}
-                showProcessId={false}
-                showStartedBy={false}
-                showTableDescriptionAsTooltip
-                showDateStarted={false}
-                showLastUpdated={false}
-                hideIfNoTasks
-                canCompleteAllTasks
-              />
-            </Column>
-          </Grid>
-          {taskUpdateDisplayArea()}
-          {processDataDisplayArea()}
-          <br />
-          {viewMostRecentStateComponent()}
-        </div>
+        <ProcessBreadcrumb
+          hotCrumbs={[
+            ['Process Groups', '/admin'],
+            {
+              entityToExplode: processModelId,
+              entityType: 'process-model-id',
+              linkLastItem: true,
+            },
+            [`Process Instance Id: ${processInstance.id}`],
+          ]}
+        />
+        <Stack orientation="horizontal" gap={1}>
+          <h1 className="with-icons">
+            Process Instance Id: {processInstance.id}
+          </h1>
+          {buttonIcons()}
+        </Stack>
+        {getInfoTag()}
+        <ProcessInterstitial
+          processInstanceId={processInstance.id}
+          processInstanceShowPageUrl={processInstanceShowPageBaseUrl}
+          allowRedirect={false}
+          smallSpinner
+          collapsableInstructions
+          executeTasks={false}
+        />
+        <Grid condensed fullWidth>
+          <Column md={6} lg={8} sm={4}>
+            <TaskListTable
+              apiPath="/tasks"
+              additionalParams={`process_instance_id=${processInstance.id}`}
+              tableTitle="Tasks I can complete"
+              tableDescription="These are tasks that can be completed by you, either because they were assigned to a group you are in, or because they were assigned directly to you."
+              paginationClassName="with-large-bottom-margin"
+              textToShowIfEmpty="There are no tasks you can complete for this process instance."
+              shouldPaginateTable={false}
+              showProcessModelIdentifier={false}
+              showProcessId={false}
+              showStartedBy={false}
+              showTableDescriptionAsTooltip
+              showDateStarted={false}
+              showLastUpdated={false}
+              hideIfNoTasks
+              canCompleteAllTasks
+            />
+          </Column>
+        </Grid>
+        {taskUpdateDisplayArea()}
+        {processDataDisplayArea()}
+        <br />
+        {viewMostRecentStateComponent()}
         {getTabs()}
       </>
     );
diff --git a/spiffworkflow-frontend/src/routes/ProcessInterstitialPage.tsx b/spiffworkflow-frontend/src/routes/ProcessInterstitialPage.tsx
index 7cd9b1ac..7d633103 100644
--- a/spiffworkflow-frontend/src/routes/ProcessInterstitialPage.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessInterstitialPage.tsx
@@ -16,7 +16,7 @@ export default function ProcessInterstitialPage({ variant }: OwnProps) {
   }
 
   return (
-    <div className="show-page">
+    <>
       <ProcessBreadcrumb
         hotCrumbs={[
           ['Process Groups', '/admin'],
@@ -36,6 +36,6 @@ export default function ProcessInterstitialPage({ variant }: OwnProps) {
         processInstanceShowPageUrl={processInstanceShowPageUrl}
         allowRedirect
       />
-    </div>
+    </>
   );
 }
diff --git a/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx b/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx
index 80129b36..5d4e7666 100644
--- a/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx
@@ -616,7 +616,7 @@ export default function ProcessModelShow() {
 
   if (processModel) {
     return (
-      <div className="show-page">
+      <>
         {fileUploadModal()}
         {confirmOverwriteFileDialog()}
         <ProcessBreadcrumb
@@ -718,7 +718,7 @@ export default function ProcessModelShow() {
           />
           <span data-qa="process-model-show-permissions-loaded" />
         </Can>
-      </div>
+      </>
     );
   }
   return null;
diff --git a/spiffworkflow-frontend/src/routes/TaskShow.tsx b/spiffworkflow-frontend/src/routes/TaskShow.tsx
index 999162db..395c04da 100644
--- a/spiffworkflow-frontend/src/routes/TaskShow.tsx
+++ b/spiffworkflow-frontend/src/routes/TaskShow.tsx
@@ -502,7 +502,7 @@ export default function TaskShow() {
     }
 
     return (
-      <div className="show-page">
+      <>
         <ProcessBreadcrumb
           hotCrumbs={[
             [
@@ -521,7 +521,7 @@ export default function TaskShow() {
         </h3>
         <InstructionsForEndUser task={task} />
         {formElement()}
-      </div>
+      </>
     );
   }