From e533afdce85ca5dd0327963974cba51a5708eee0 Mon Sep 17 00:00:00 2001
From: jasquat <jasquat@users.noreply.github.com>
Date: Fri, 13 Jan 2023 16:55:34 -0500
Subject: [PATCH] added ability to add in custom validation error messages for
 text input fields w/ burnettk

---
 spiffworkflow-frontend/src/index.css          |  4 ++
 .../BaseInputTemplate/BaseInputTemplate.tsx   |  7 +++-
 .../DescriptionField/DescriptionField.tsx     | 37 ++++++++++++++-----
 .../src/themes/carbon/README.md               |  9 +++++
 .../themes/carbon/TitleField/TitleField.tsx   | 33 +++++++++++------
 .../src/themes/carbon/index.css               | 19 ++++++++++
 6 files changed, 87 insertions(+), 22 deletions(-)
 create mode 100644 spiffworkflow-frontend/src/themes/carbon/README.md

diff --git a/spiffworkflow-frontend/src/index.css b/spiffworkflow-frontend/src/index.css
index 08e8341cf..614bbf739 100644
--- a/spiffworkflow-frontend/src/index.css
+++ b/spiffworkflow-frontend/src/index.css
@@ -228,6 +228,10 @@ h1.with-icons {
   background: rgba(0,0,0,.05);
 }
 
+.form-instructions {
+  margin-bottom: 10em;
+}
+
 /* Json Web Form CSS Fix - Bootstrap now requries that each li have a "list-inline-item." Also have a PR
 in on this with the react-jsonschema-form repo. This is just a patch fix to allow date inputs to layout a little more cleanly */
 .list-inline>li {
diff --git a/spiffworkflow-frontend/src/themes/carbon/BaseInputTemplate/BaseInputTemplate.tsx b/spiffworkflow-frontend/src/themes/carbon/BaseInputTemplate/BaseInputTemplate.tsx
index aa1c6451c..7954a0ace 100644
--- a/spiffworkflow-frontend/src/themes/carbon/BaseInputTemplate/BaseInputTemplate.tsx
+++ b/spiffworkflow-frontend/src/themes/carbon/BaseInputTemplate/BaseInputTemplate.tsx
@@ -89,7 +89,11 @@ export default function BaseInputTemplate<
   let errorMessageForField = null;
   if (rawErrors && rawErrors.length > 0) {
     invalid = true;
-    errorMessageForField = `${labelToUse.replace(/\*$/, '')} ${rawErrors[0]}`;
+    if ('validationErrorMessage' in schema) {
+      errorMessageForField = (schema as any).validationErrorMessage;
+    } else {
+      errorMessageForField = `${labelToUse.replace(/\*$/, '')} ${rawErrors[0]}`;
+    }
   }
 
   return (
@@ -97,6 +101,7 @@ export default function BaseInputTemplate<
       <TextInput
         id={id}
         name={id}
+        className="input"
         labelText={labelToUse}
         invalid={invalid}
         invalidText={errorMessageForField}
diff --git a/spiffworkflow-frontend/src/themes/carbon/DescriptionField/DescriptionField.tsx b/spiffworkflow-frontend/src/themes/carbon/DescriptionField/DescriptionField.tsx
index a54657643..eb8abebc8 100644
--- a/spiffworkflow-frontend/src/themes/carbon/DescriptionField/DescriptionField.tsx
+++ b/spiffworkflow-frontend/src/themes/carbon/DescriptionField/DescriptionField.tsx
@@ -1,17 +1,34 @@
 import React from 'react';
-import Typography from '@mui/material/Typography';
-import { DescriptionFieldProps } from '@rjsf/utils';
+import {
+  DescriptionFieldProps,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
 
-function DescriptionField({ description, id }: DescriptionFieldProps) {
-  if (description) {
+/** The `DescriptionField` is the template to use to render the description of a field
+ *
+ * @param props - The `DescriptionFieldProps` for this component
+ */
+export default function DescriptionField<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: DescriptionFieldProps<T, S, F>) {
+  const { id, description } = props;
+  if (!description) {
+    return null;
+  }
+  if (typeof description === 'string') {
     return (
-      <Typography id={id} variant="subtitle2" style={{ marginTop: '5px' }}>
+      <p id={id} className="field-description">
         {description}
-      </Typography>
+      </p>
     );
   }
-
-  return null;
+  return (
+    <div id={id} className="field-description">
+      {description}
+    </div>
+  );
 }
-
-export default DescriptionField;
diff --git a/spiffworkflow-frontend/src/themes/carbon/README.md b/spiffworkflow-frontend/src/themes/carbon/README.md
new file mode 100644
index 000000000..de9169d25
--- /dev/null
+++ b/spiffworkflow-frontend/src/themes/carbon/README.md
@@ -0,0 +1,9 @@
+### Custom Validation Error Message for String Inputs
+
+If you have a property in your json schema like:
+
+    "user_generated_number_1": {"type": "string", "title": "User Generated Number", "default": "0", "minLength": 3}
+
+it will generate this error message by default: "User Generated Number must NOT have fewer than 3 characters."
+
+If you add the `validationErrorMessage` key to the property json it will print that message instead.
diff --git a/spiffworkflow-frontend/src/themes/carbon/TitleField/TitleField.tsx b/spiffworkflow-frontend/src/themes/carbon/TitleField/TitleField.tsx
index 8f0d3ae0b..f5254a672 100644
--- a/spiffworkflow-frontend/src/themes/carbon/TitleField/TitleField.tsx
+++ b/spiffworkflow-frontend/src/themes/carbon/TitleField/TitleField.tsx
@@ -1,16 +1,27 @@
 import React from 'react';
-import Box from '@mui/material/Box';
-import Divider from '@mui/material/Divider';
-import Typography from '@mui/material/Typography';
-import { TitleFieldProps } from '@rjsf/utils';
+import {
+  FormContextType,
+  TitleFieldProps,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
 
-function TitleField({ id, title }: TitleFieldProps) {
+const REQUIRED_FIELD_SYMBOL = '*';
+
+/** The `TitleField` is the template to use to render the title of a field
+ *
+ * @param props - The `TitleFieldProps` for this component
+ */
+export default function TitleField<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: TitleFieldProps<T, S, F>) {
+  const { id, title, required } = props;
   return (
-    <Box id={id} mb={1} mt={1}>
-      <Typography variant="h5">{title}</Typography>
-      <Divider />
-    </Box>
+    <legend id={id} className="header">
+      {title}
+      {required && <span className="required">{REQUIRED_FIELD_SYMBOL}</span>}
+    </legend>
   );
 }
-
-export default TitleField;
diff --git a/spiffworkflow-frontend/src/themes/carbon/index.css b/spiffworkflow-frontend/src/themes/carbon/index.css
index d44ae7e5d..329bc33fd 100644
--- a/spiffworkflow-frontend/src/themes/carbon/index.css
+++ b/spiffworkflow-frontend/src/themes/carbon/index.css
@@ -1,3 +1,22 @@
 button.react-json-schema-form-submit-button {
   margin-top: 1.5em;
 }
+
+.rjsf .header {
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 28px;
+  color: #161616;
+}
+
+.rjsf .field-description {
+  font-size: 14px;
+  line-height: 18px;
+  letter-spacing: 0.16px;
+  color: #525252;
+  margin-bottom: 1em;
+}
+
+.rjsf .input {
+  margin-bottom: 2em;
+}