a little cleanup to forms w/ burnettk

2022-11-17 11:52:57 -05:00 · 2022-11-17 11:52:57 -05:00 · 0a7052e5d2
parent 70f839116e
commit 0a7052e5d2
4 changed files with 81 additions and 108 deletions
--- 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",
--- 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;
--- 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') {
--- 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;