Merge pull request #215 from sartography/feature/update_carbon_react

updated carbon react to 1.27 for react 18 support and updated all oth…

spiffworkflow-frontend/package.json

@@ -7,11 +7,10 @@
     "@babel/plugin-transform-react-jsx": "^7.18.6",
     "@babel/preset-react": "^7.18.6",
     "@carbon/icons-react": "^11.10.0",
-    "@carbon/react": "^1.16.0",
+    "@carbon/react": "^1.27.0",
     "@carbon/styles": "^1.16.0",
     "@casl/ability": "^6.3.2",
     "@casl/react": "^3.1.0",
-    "@ginkgo-bioworks/react-json-schema-form-builder": "^2.9.0",
     "@monaco-editor/react": "^4.4.5",
     "@mui/material": "^5.10.14",
     "@react-icons/all-files": "^4.1.0",
@@ -64,14 +63,6 @@
   "overrides": {
     "postcss-preset-env": {
       "autoprefixer": "10.4.5"
-    },
-    "@ginkgo-bioworks/react-json-schema-form-builder": {
-      "react": "^18.2.0",
-      "bootstrap": "^5.2.0-beta1"
-    },
-    "@carbon/react": {
-      "react": "^18.2.0",
-      "react-dom": "^18.2.0"
     }
   },
   "scripts": {

spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx

@@ -890,7 +890,7 @@ export default function ProcessModelEditDiagram() {
     const path = generatePath(
       '/admin/process-models/:process_model_id/form/:file_name',
       {
-        process_model_id: params.process_model_id,
+        process_model_id: params.process_model_id || null,
         file_name: fileName,
       }
     );
@@ -902,7 +902,7 @@ export default function ProcessModelEditDiagram() {
       const path = generatePath(
         '/admin/process-models/:process_model_id/files/:file_name',
         {
-          process_model_id: params.process_model_id,
+          process_model_id: params.process_model_id || null,
           file_name: file.name,
         }
       );

spiffworkflow-frontend/src/routes/TaskShow.tsx

@@ -11,7 +11,6 @@ import {
   ComboBox,
   Button,
   ButtonSet,
-  // @ts-ignore
 } from '@carbon/react';
 
 import MDEditor from '@uiw/react-md-editor';

spiffworkflow-frontend/src/themes/carbon/BaseInputTemplate/BaseInputTemplate.tsx

@@ -143,7 +143,6 @@ export default function BaseInputTemplate<
       <>
         <TextInput
           id={id}
-          name={id}
           className="text-input"
           helperText={helperText}
           invalid={invalid}

spiffworkflow-frontend/src/themes/carbon/SelectWidget/SelectWidget.tsx

@@ -1,59 +1,92 @@
 // @ts-ignore
 import { Select, SelectItem } from '@carbon/react';
-import { WidgetProps, processSelectValue } from '@rjsf/utils';
+import { ChangeEvent, FocusEvent, SyntheticEvent, useCallback } from 'react';
+import {
+  enumOptionsValueForIndex,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from '@rjsf/utils';
 
-function SelectWidget({
+function getValue(event: SyntheticEvent<HTMLSelectElement>, multiple: boolean) {
+  if (multiple) {
+    return Array.from((event.target as HTMLSelectElement).options)
+      .slice()
+      .filter((o) => o.selected)
+      .map((o) => o.value);
+  }
+  return (event.target as HTMLSelectElement).value;
+}
+
+/** The `SelectWidget` is a widget for rendering dropdowns.
+ *  It is typically used with string properties constrained with enum options.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+function SelectWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>({
   schema,
+  uiSchema,
   id,
   options,
-  label,
+  value,
-  required,
   disabled,
   readonly,
-  value,
+  multiple = false,
-  multiple,
+  autofocus = false,
-  autofocus,
   onChange,
   onBlur,
   onFocus,
-  uiSchema,
-  placeholder,
   rawErrors = [],
-}: WidgetProps) {
+}: WidgetProps<T, S, F>) {
-  const { enumOptions, enumDisabled } = options;
+  const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
-
   const emptyValue = multiple ? [] : '';
 
-  const _onChange = ({
+  const handleFocus = useCallback(
-    target: { value },
+    (event: FocusEvent<HTMLSelectElement>) => {
-  }: React.ChangeEvent<{ name?: string; value: unknown }>) =>
+      const newValue = getValue(event, multiple);
-    onChange(processSelectValue(schema, value, options));
+      return onFocus(
-  const _onBlur = ({ target: { value } }: React.FocusEvent<HTMLInputElement>) =>
+        id,
-    onBlur(id, processSelectValue(schema, value, options));
+        enumOptionsValueForIndex<S>(newValue, enumOptions, optEmptyVal)
-  const _onFocus = ({
+      );
-    target: { value },
+    },
-  }: React.FocusEvent<HTMLInputElement>) =>
+    [onFocus, id, schema, multiple, options]
-    onFocus(id, processSelectValue(schema, value, options));
+  );
+
+  const handleBlur = useCallback(
+    (event: FocusEvent<HTMLSelectElement>) => {
+      const newValue = getValue(event, multiple);
+      return onBlur(
+        id,
+        enumOptionsValueForIndex<S>(newValue, enumOptions, optEmptyVal)
+      );
+    },
+    [onBlur, id, schema, multiple, options]
+  );
+
+  const handleChange = useCallback(
+    (event: ChangeEvent<HTMLSelectElement>) => {
+      const newValue = getValue(event, multiple);
+      return onChange(
+        enumOptionsValueForIndex<S>(newValue, enumOptions, optEmptyVal)
+      );
+    },
+    [onChange, schema, multiple, options]
+  );
 
-  let labelToUse = label;
-  if (uiSchema && uiSchema['ui:title']) {
-    labelToUse = uiSchema['ui:title'];
-  } else if (schema && schema.title) {
-    labelToUse = schema.title;
-  }
   let helperText = null;
   if (uiSchema && uiSchema['ui:help']) {
     helperText = uiSchema['ui:help'];
   }
-  if (required) {
-    labelToUse = `${labelToUse}*`;
-  }
 
   let invalid = false;
   let errorMessageForField = null;
   if (rawErrors && rawErrors.length > 0) {
     invalid = true;
-    // errorMessageForField = `${labelToUse.replace(/\*$/, '')} ${rawErrors[0]}`;
     errorMessageForField = rawErrors[0];
   }
 
@@ -71,9 +104,9 @@ function SelectWidget({
       disabled={disabled || readonly}
       autoFocus={autofocus}
       error={rawErrors.length > 0}
-      onChange={_onChange}
+      onChange={handleChange}
-      onBlur={_onBlur}
+      onBlur={handleBlur}
-      onFocus={_onFocus}
+      onFocus={handleFocus}
       invalid={invalid}
       invalidText={errorMessageForField}
       InputLabelProps={{

spiffworkflow-frontend/src/types/definitions.d.ts

@@ -0,0 +1,2 @@
+// carbon/react is not very typescript safe so ignore it
+declare module '@carbon/react';