From 0a7052e5d2d8bd884f04fe79317abf00aefb0384 Mon Sep 17 00:00:00 2001
From: jasquat <jasquat@users.noreply.github.com>
Date: Thu, 17 Nov 2022 11:52:57 -0500
Subject: [PATCH] a little cleanup to forms w/ burnettk

---
 spiffworkflow-frontend/package-lock.json      | 68 -----------------
 .../components/ProcessInstanceListTable.tsx   | 43 +++++++----
 .../src/routes/TaskShow.tsx                   | 75 ++++++++++++-------
 .../BaseInputTemplate/BaseInputTemplate.tsx   |  3 +
 4 files changed, 81 insertions(+), 108 deletions(-)

diff --git a/spiffworkflow-frontend/package-lock.json b/spiffworkflow-frontend/package-lock.json
index 4898b19c..0dfe841a 100644
--- a/spiffworkflow-frontend/package-lock.json
+++ b/spiffworkflow-frontend/package-lock.json
@@ -24,7 +24,6 @@
         "@rjsf/mui": "^5.0.0-beta.13",
         "@rjsf/utils": "^5.0.0-beta.13",
         "@rjsf/validator-ajv6": "^5.0.0-beta.13",
-        "@rjsf/validator-ajv8": "^5.0.0-beta.13",
         "@tanstack/react-table": "^8.2.2",
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^13.3.0",
@@ -4950,23 +4949,6 @@
         "@rjsf/utils": "^5.0.0-beta.1"
       }
     },
-    "node_modules/@rjsf/validator-ajv8": {
-      "version": "5.0.0-beta.13",
-      "resolved": "https://registry.npmjs.org/@rjsf/validator-ajv8/-/validator-ajv8-5.0.0-beta.13.tgz",
-      "integrity": "sha512-/hrYbiwgCvEqw1Z7YZTWvd+ZAiX5vSN0WAI2hJTJTqKuCTcIH0fqNDCaOg3FBR38BL7seZrUmibIUcPU66iJ1w==",
-      "dependencies": {
-        "ajv-formats": "^2.1.1",
-        "ajv8": "npm:ajv@^8.11.0",
-        "lodash": "^4.17.15",
-        "lodash-es": "^4.17.15"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "peerDependencies": {
-        "@rjsf/utils": "^5.0.0-beta.12"
-      }
-    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -6840,27 +6822,6 @@
         "ajv": "^6.9.1"
       }
     },
-    "node_modules/ajv8": {
-      "name": "ajv",
-      "version": "8.11.2",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.2.tgz",
-      "integrity": "sha512-E4bfmKAhGiSTvMfL1Myyycaub+cUEU2/IvpylXkUu7CHBkBj1f/ikdzbD7YQ6FKUbixDxeYvB/xY4fvyroDlQg==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/ajv8/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
     "node_modules/ansi-align": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",
@@ -34883,17 +34844,6 @@
         "lodash-es": "^4.17.15"
       }
     },
-    "@rjsf/validator-ajv8": {
-      "version": "5.0.0-beta.13",
-      "resolved": "https://registry.npmjs.org/@rjsf/validator-ajv8/-/validator-ajv8-5.0.0-beta.13.tgz",
-      "integrity": "sha512-/hrYbiwgCvEqw1Z7YZTWvd+ZAiX5vSN0WAI2hJTJTqKuCTcIH0fqNDCaOg3FBR38BL7seZrUmibIUcPU66iJ1w==",
-      "requires": {
-        "ajv-formats": "^2.1.1",
-        "ajv8": "npm:ajv@^8.11.0",
-        "lodash": "^4.17.15",
-        "lodash-es": "^4.17.15"
-      }
-    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -36367,24 +36317,6 @@
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
       "requires": {}
     },
-    "ajv8": {
-      "version": "npm:ajv@8.11.2",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.2.tgz",
-      "integrity": "sha512-E4bfmKAhGiSTvMfL1Myyycaub+cUEU2/IvpylXkUu7CHBkBj1f/ikdzbD7YQ6FKUbixDxeYvB/xY4fvyroDlQg==",
-      "requires": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "dependencies": {
-        "json-schema-traverse": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-        }
-      }
-    },
     "ansi-align": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",
diff --git a/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx b/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx
index 5c7786c0..407ac307 100644
--- a/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx
+++ b/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx
@@ -20,12 +20,16 @@ import {
   TableHeader,
   TableHead,
   TableRow,
+  TimePicker,
+  TimePickerSelect,
+  SelectItem,
   // @ts-ignore
 } from '@carbon/react';
 import { PROCESS_STATUSES, DATE_FORMAT, DATE_FORMAT_CARBON } from '../config';
 import {
   convertDateStringToSeconds,
   convertSecondsToFormattedDate,
+  convertSecondsToFormattedDateTime,
   getPageInfoFromSearchParams,
   getProcessModelFullIdentifierFromSearchParams,
   modifyProcessModelPath,
@@ -345,21 +349,32 @@ export default function ProcessInstanceListTable({
     onChangeFunction: any
   ) => {
     return (
-      <DatePicker dateFormat={DATE_FORMAT_CARBON} datePickerType="single">
-        <DatePickerInput
-          id={`date-picker-${name}`}
-          placeholder={DATE_FORMAT}
-          labelText={labelString}
-          type="text"
-          size="md"
-          autocomplete="off"
-          allowInput={false}
-          onChange={(dateChangeEvent: any) => {
-            onChangeFunction(dateChangeEvent.srcElement.value);
+      <>
+        <DatePicker dateFormat={DATE_FORMAT_CARBON} datePickerType="single">
+          <DatePickerInput
+            id={`date-picker-${name}`}
+            placeholder={DATE_FORMAT}
+            labelText={labelString}
+            type="text"
+            size="md"
+            autocomplete="off"
+            allowInput={false}
+            onChange={(dateChangeEvent: any) => {
+              onChangeFunction(dateChangeEvent.srcElement.value);
+            }}
+            value={initialDate}
+          />
+        </DatePicker>
+        <TimePicker
+          invalid
+          id="time-picker"
+          labelText="Select a time"
+          pattern="^([01]\d|2[0-3]):?([0-5]\d)$"
+          onChange={(event: any) => {
+            console.log('event', event);
           }}
-          value={initialDate}
         />
-      </DatePicker>
+      </>
     );
   };
 
@@ -493,7 +508,7 @@ export default function ProcessInstanceListTable({
       );
     };
     const formatSecondsForDisplay = (_row: any, seconds: any) => {
-      return convertSecondsToFormattedDate(seconds) || '-';
+      return convertSecondsToFormattedDateTime(seconds) || '-';
     };
     const defaultFormatter = (_row: any, value: any) => {
       return value;
diff --git a/spiffworkflow-frontend/src/routes/TaskShow.tsx b/spiffworkflow-frontend/src/routes/TaskShow.tsx
index 9da0e30a..1309b8f3 100644
--- a/spiffworkflow-frontend/src/routes/TaskShow.tsx
+++ b/spiffworkflow-frontend/src/routes/TaskShow.tsx
@@ -1,5 +1,5 @@
 import { useContext, useEffect, useState } from 'react';
-import { Link, useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 
 // FIXME: npm install @rjsf/validator-ajv8 and use it as soon as
 // rawErrors is fixed.
@@ -9,8 +9,14 @@ import { Link, useNavigate, useParams } from 'react-router-dom';
 // https://github.com/rjsf-team/react-jsonschema-form/blob/main/docs/api-reference/uiSchema.md talks about rawErrors
 import validator from '@rjsf/validator-ajv6';
 
-// @ts-ignore
-import { Button, Stack } from '@carbon/react';
+import {
+  TabList,
+  Tab,
+  Tabs,
+  Grid,
+  Column,
+  // @ts-ignore
+} from '@carbon/react';
 
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
@@ -73,39 +79,52 @@ export default function TaskShow() {
 
   const buildTaskNavigation = () => {
     let userTasksElement;
+    let selectedTabIndex = 0;
     if (userTasks) {
       userTasksElement = (userTasks as any).map(function getUserTasksElement(
-        userTask: any
+        userTask: any,
+        index: number
       ) {
         const taskUrl = `/tasks/${params.process_instance_id}/${userTask.id}`;
         if (userTask.id === params.task_id) {
-          return <span>{userTask.name}</span>;
+          selectedTabIndex = index;
+          return <Tab selected>{userTask.title}</Tab>;
         }
         if (userTask.state === 'COMPLETED') {
           return (
-            <Link to={taskUrl} data-qa={`form-nav-${userTask.name}`}>
-              {userTask.name}
-            </Link>
+            <Tab
+              onClick={() => navigate(taskUrl)}
+              data-qa={`form-nav-${userTask.name}`}
+            >
+              {userTask.title}
+            </Tab>
           );
         }
         if (userTask.state === 'FUTURE') {
-          return <span style={{ color: 'red' }}>{userTask.name}</span>;
+          return <Tab disabled>{userTask.title}</Tab>;
         }
         if (userTask.state === 'READY') {
           return (
-            <Link to={taskUrl} data-qa={`form-nav-${userTask.name}`}>
-              {userTask.name} - Current
-            </Link>
+            <Tab
+              onClick={() => navigate(taskUrl)}
+              data-qa={`form-nav-${userTask.name}`}
+            >
+              {userTask.title}
+            </Tab>
           );
         }
         return null;
       });
     }
     return (
-      <Stack orientation="horizontal" gap={3}>
-        <Button href="/tasks">Go Back To List</Button>
-        {userTasksElement}
-      </Stack>
+      <Tabs
+        title="Steps in this process instance involving people"
+        selectedIndex={selectedTabIndex}
+      >
+        <TabList aria-label="List of tabs" contained>
+          {userTasksElement}
+        </TabList>
+      </Tabs>
     );
   };
 
@@ -149,15 +168,19 @@ export default function TaskShow() {
     }
 
     return (
-      <Form
-        formData={taskData}
-        onSubmit={handleFormSubmit}
-        schema={jsonSchema}
-        uiSchema={formUiSchema}
-        validator={validator}
-      >
-        {reactFragmentToHideSubmitButton}
-      </Form>
+      <Grid fullWidth condensed>
+        <Column md={5} lg={8} sm={4}>
+          <Form
+            formData={taskData}
+            onSubmit={handleFormSubmit}
+            schema={jsonSchema}
+            uiSchema={formUiSchema}
+            validator={validator}
+          >
+            {reactFragmentToHideSubmitButton}
+          </Form>
+        </Column>
+      </Grid>
     );
   };
 
@@ -175,7 +198,7 @@ export default function TaskShow() {
     );
   };
 
-  if (task) {
+  if (task && userTasks) {
     const taskToUse = task as any;
     let statusString = '';
     if (taskToUse.state !== 'READY') {
diff --git a/spiffworkflow-frontend/src/themes/carbon/BaseInputTemplate/BaseInputTemplate.tsx b/spiffworkflow-frontend/src/themes/carbon/BaseInputTemplate/BaseInputTemplate.tsx
index 90cc3f0f..0670c69d 100644
--- a/spiffworkflow-frontend/src/themes/carbon/BaseInputTemplate/BaseInputTemplate.tsx
+++ b/spiffworkflow-frontend/src/themes/carbon/BaseInputTemplate/BaseInputTemplate.tsx
@@ -82,6 +82,9 @@ export default function BaseInputTemplate<
   } else if (schema && schema.title) {
     labelToUse = schema.title;
   }
+  if (required) {
+    labelToUse = `${labelToUse}*`;
+  }
 
   let invalid = false;
   let errorMessageForField = null;