Deploy to prod

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@apidevtools/json-schema-ref-parser": "^9.1.2",
-    "@rjsf/core": "^5.13.0",
+    "@rjsf/core": "^5.17.1",
     "@rjsf/material-ui": "^5.13.0",
     "@rjsf/utils": "^5.13.0",
     "@rjsf/validator-ajv8": "^5.13.0",
@@ -51,11 +51,17 @@
   "jest": {
     "coverageThreshold": {
       "global": {
-        "statements": 58,
-        "branches": 55,
-        "functions": 68,
-        "lines": 58
+        "statements": 62,
+        "branches": 61,
+        "functions": 70,
+        "lines": 62
       }
+    },
+    "transformIgnorePatterns": [
+      "/node_modules/(?!@rjsf)"
+    ],
+    "moduleNameMapper": {
+      "\\.(css|less|scss|sass)$": "identity-obj-proxy"
     }
   },
   "eslintConfig": {

src/components/Toolbar.js

@@ -10,7 +10,6 @@ function Toolbar (props) {
      * Based on selected schema, renders a dropdown menu for version-selection.
      * Gives user the option to autofill the form with previously input data
      */
-
   const { ParentTypeCallback, ParentVersionCallback, selectedSchemaType, selectedSchemaPath, schemaList, handleRehydrate } = props
 
   const schemaTypes = Array.from(

src/custom-ui/CustomWidgets.js

@@ -3,8 +3,10 @@ import 'react-datetime/css/react-datetime.css'
 import moment from 'moment'
 import RadioWidget from '@rjsf/material-ui/lib/RadioWidget/RadioWidget'
 import CheckboxWidget from '@rjsf/material-ui/lib/CheckboxWidget/CheckboxWidget'
-import React from 'react'
+import TextWidget from '@rjsf/core/lib/components/widgets/TextWidget'
+import React, { useLayoutEffect } from 'react'
 import PropTypes from 'prop-types'
+import { toConstant } from '@rjsf/utils'
 
 const CustomTimeWidget = (props) => {
   const onChange = (selectedDate) => {
@@ -41,4 +43,30 @@ const CustomCheckboxWidget = (props) => {
   }
 }
 
-export const widgets = { checkbox: CustomCheckboxWidget, time: CustomTimeWidget }
+/**
+ * Custom text widget to enable custom behavior for constants.
+ * If const, update formData value to const value using onChange callback, render as readonly (grayed out)
+ * Otherwise, return default text widget
+ * @param {*} props RJSF widget props
+ * @returns A custom text widget
+ */
+const CustomTextWidget = (props) => {
+  // useLayoutEffect to run effect runs before browser repaints screen (reduce flickering)
+  useLayoutEffect(() => {
+    if (props.schema.const !== undefined) {
+      props.onChange(toConstant(props.schema))
+    }
+  }, [props])
+  return <TextWidget {...props}
+    readonly={props.schema.const !== undefined ?? props.readonly}
+    value={props.schema.const !== undefined ? toConstant(props.schema) : props.value}
+  />
+}
+CustomTextWidget.propTypes = {
+  value: PropTypes.any,
+  onChange: PropTypes.func,
+  schema: PropTypes.object,
+  readonly: PropTypes.bool
+}
+
+export const widgets = { checkbox: CustomCheckboxWidget, time: CustomTimeWidget, text: CustomTextWidget }

src/custom-ui/CustomWidgets.test.js

@@ -0,0 +1,38 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import Form from '@rjsf/core'
+import { widgets } from './CustomWidgets'
+import validator from '@rjsf/validator-ajv8'
+
+describe('CustomTextWidget', () => {
+  it('renders a TextWidget', () => {
+    const testSchema = {
+      title: 'Test String Const',
+      type: 'string'
+    }
+    render(<Form schema={testSchema}
+      validator={validator}
+      widgets={ { text: widgets.text } }
+    />)
+    expect(screen.getByLabelText('Test String Const')).toBeInTheDocument()
+  })
+
+  it('adds const value into formData and renders const input as readonly', () => {
+    const testSchema = {
+      title: 'Test String Const',
+      const: 'const example string value',
+      type: 'string'
+    }
+    render(<Form schema={testSchema}
+      validator={validator}
+      widgets={ { text: widgets.text } }
+      onSubmit={({ formData }) => {
+        expect(formData).toEqual('const example string value')
+      }
+    }
+    />)
+    expect(screen.getByDisplayValue('const example string value')).toBeInTheDocument()
+    expect(screen.getByDisplayValue('const example string value')).toHaveAttribute('readonly')
+    fireEvent.click(screen.getByRole('button', { name: /submit/i }))
+  })
+})

src/utilities/schemaHandler.test.js

@@ -9,6 +9,37 @@ const testSchema1 = ({
       const: 'https://github.com/AllenNeuralDynamics/data_schema/blob/main/schemas/subject.json',
       description: 'The URL reference to the schema.',
       title: 'Described by'
+    },
+    schema_version: {
+      const: '1.0.0',
+      default: '1.0.0',
+      description: 'The version of the schema.',
+      title: 'Schema Version'
+    },
+    number_const: {
+      title: 'Number with missing type',
+      const: 1,
+      default: 1
+    },
+    boolean_const: {
+      title: 'Boolean with missing type',
+      const: true,
+      default: true
+    },
+    object_const: {
+      title: 'Object with missing type',
+      const: { key: 'value' },
+      default: { key: 'value' }
+    },
+    array_const: {
+      title: 'Array with missing type',
+      const: [1, 2, 3],
+      default: [1, 2, 3]
+    },
+    null_const: {
+      title: 'Null with missing type',
+      const: null,
+      default: null
     }
   }
 })
@@ -118,10 +149,21 @@ const testSchema4 = ({
   ]
 })
 
-test('Checks preProcessSchema modifies const schema', () => {
+test('Checks preProcessSchema modifies const schema to add missing default or type', () => {
+  const expectedTypes = [
+    { key: 'describedBy', type: 'string' },
+    { key: 'schema_version', type: 'string' },
+    { key: 'number_const', type: 'number' },
+    { key: 'boolean_const', type: 'boolean' },
+    { key: 'object_const', type: 'object' },
+    { key: 'array_const', type: 'array' },
+    { key: 'null_const', type: 'null' }
+  ]
   const processedSchema1 = preProcessSchema(testSchema1)
   expect(processedSchema1.properties.describedBy.default).toBe(testSchema1.properties.describedBy.const)
-  expect(processedSchema1.properties.describedBy.readOnly).toBe(true)
+  for (const expectedType of expectedTypes) {
+    expect(processedSchema1.properties[expectedType.key].type).toBe(expectedType.type)
+  }
 })
 
 test('Checks preProcessSchema modifies dictionary additional properties', () => {
@@ -146,7 +188,6 @@ test('Checks preProcessSchema modifies discriminator property', () => {
 
 test('Checks preProcessSchema recurses through nested schema as expected', () => {
   const processedSchema3 = preProcessSchema(testSchema3)
-  expect(processedSchema3.properties.resume.properties.education.readOnly).toBe(true)
   expect(processedSchema3.properties.resume.properties.education.default).toBe(testSchema3.properties.resume.properties.education.const)
   expect(processedSchema3.definitions.PastExperience.key_points.additionalProperties).toStrictEqual({ type: 'string' })
 })

src/utilities/schemaHandlers.js

@@ -1,4 +1,5 @@
 import { toast } from 'react-toastify'
+import { guessType, deepEquals } from '@rjsf/utils'
 
 export const AJV_OPTIONS = {
   ajvOptionsOverrides: {
@@ -9,7 +10,7 @@ export const AJV_OPTIONS = {
 const preProcessHelper = (obj) => {
   /*
   Recursively iterates through schema for rendering purposes
-    Makes const fields non-fillable
+    Specifies type for consts if missing
     Renders dictionaries
     Displays type selection dropdown with better default text
     Enables validation for discriminator keyword
@@ -18,10 +19,12 @@ const preProcessHelper = (obj) => {
     if (obj[key] !== null) {
       const prop = obj[key]
 
-      // grays out const fields (readOnly) and autofills the field with the const value (default)
+      // Need to explicitly specify missing type for consts (bug in pydantic, may be fixed in next release)
+      // If default is undefined or not matching const value, set to const
+      // Note: We use a custom text widget to autofill the const value and set the field as readonly.
       if (prop.const !== undefined) {
-        prop.readOnly = true
-        prop.default = prop.const
+        if (prop.type === undefined) { prop.type = guessType(prop.const) }
+        if (!deepEquals(prop.default, prop.const)) { prop.default = prop.const }
       }
 
       // if default is {}, expected value is a dictionary of strings