Upgrade to rjsf-v5

Tests still failing.

package.json

@@ -23,9 +23,10 @@
     "@popperjs/core": "^2.10.2",
     "@react-google-maps/api": "^2.13.1",
     "@react-hook/resize-observer": "^1.2.6",
-    "@rjsf/core": "^4.2.3",
+    "@rjsf/core": "^5.0.0-beta.11",
+    "@rjsf/utils": "^5.0.0-beta.11",
+    "@rjsf/validator-ajv6": "^5.0.0-beta.11",
     "@sage-bionetworks/react-base-table": "^1.13.2",
-    "@sage-bionetworks/rjsf-core": "^3.1.4",
     "@types/ua-parser-js": "^0.7.36",
     "@upsetjs/react": "^1.6.2",
     "animate.css": "^4.1.1",

src/__tests__/lib/containers/entity/annotations/AdditionalPropertiesSchemaField.test.tsx

@@ -1,4 +1,4 @@
-import { utils } from '@sage-bionetworks/rjsf-core'
+import { getDefaultRegistry } from '@rjsf/core'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import React from 'react'
@@ -8,7 +8,7 @@ import {
   guessPropertyType,
   PropertyType,
   transformDataFromPropertyType,
-} from '../../../../../lib/containers/entity/annotations/AdditionalPropertiesSchemaField'
+} from '../../../../../lib/containers/entity/SchemaDrivenAnnotationEditor/field/AdditionalPropertiesSchemaField'
 
 describe('AdditionalPropertiesSchemaField unit tests', () => {
   describe('guessPropertyType tests', () => {
@@ -126,7 +126,7 @@ describe('AdditionalPropertiesSchemaField unit tests', () => {
           uiSchema={{}}
           idSchema={{ $id: 'root' }}
           formData={initialData}
-          registry={utils.getDefaultRegistry()}
+          registry={getDefaultRegistry()}
           onChange={jest.fn()}
         />,
       )
@@ -161,7 +161,7 @@ describe('AdditionalPropertiesSchemaField unit tests', () => {
           uiSchema={{}}
           idSchema={{ $id: 'root' }}
           formData={initialData}
-          registry={utils.getDefaultRegistry()}
+          registry={getDefaultRegistry()}
           onChange={jest.fn()}
         />,
       )
@@ -209,7 +209,7 @@ describe('AdditionalPropertiesSchemaField unit tests', () => {
           uiSchema={{}}
           idSchema={{ $id: 'root' }}
           formData={initialData}
-          registry={utils.getDefaultRegistry()}
+          registry={getDefaultRegistry()}
           onChange={jest.fn()}
         />,
       )

src/__tests__/lib/containers/entity/annotations/AnnotationEditorUtils.test.ts

@@ -1,9 +1,9 @@
-import { AjvError } from '@rjsf/core'
+import { RJSFValidationError } from '@rjsf/utils'
 import {
   dropNullishArrayValues,
   getFriendlyPropertyName,
   transformErrors,
-} from '../../../../../lib/containers/entity/annotations/AnnotationEditorUtils'
+} from '../../../../../lib/containers/entity/SchemaDrivenAnnotationEditor/AnnotationEditorUtils'
 
 describe('AnnotationEditorUtils tests', () => {
   describe('dropNullishArrayValues', () => {
@@ -53,7 +53,7 @@ describe('AnnotationEditorUtils tests', () => {
 
   describe('transformErrors', () => {
     it('combines errors caused by an enumeration defined using anyOf', () => {
-      const errors: AjvError[] = [
+      const errors: RJSFValidationError[] = [
         {
           name: 'type',
           property: '.study[0]',
@@ -100,7 +100,7 @@ describe('AnnotationEditorUtils tests', () => {
     })
 
     it('returns a custom message when using a key that collides with a reserved property', () => {
-      const errors: AjvError[] = [
+      const errors: RJSFValidationError[] = [
         {
           name: 'not',
           property: "['name']",

src/__tests__/lib/containers/entity/annotations/SchemaDrivenAnnotationsEditor.test.tsx

@@ -1,4 +1,5 @@
 import {
+  act,
   queryByAttribute,
   render,
   screen,
@@ -10,10 +11,11 @@ import selectEvent from 'react-select-event'
 import {
   SchemaDrivenAnnotationEditor,
   SchemaDrivenAnnotationEditorProps,
-} from '../../../../../lib/containers/entity/annotations/SchemaDrivenAnnotationEditor'
+} from '../../../../../lib/containers/entity/SchemaDrivenAnnotationEditor/SchemaDrivenAnnotationEditor'
 import { displayToast } from '../../../../../lib/containers/ToastMessage'
 import { createWrapper } from '../../../../../lib/testutils/TestingLibraryUtils'
 import {
+  ASYNCHRONOUS_JOB_TOKEN,
   ENTITY_JSON,
   ENTITY_SCHEMA_BINDING,
   SCHEMA_VALIDATION_GET,
@@ -24,6 +26,7 @@ import {
   getEndpoint,
 } from '../../../../../lib/utils/functions/getEndpoint'
 import { SynapseContextType } from '../../../../../lib/utils/SynapseContext'
+import { AsynchronousJobStatus } from '../../../../../lib/utils/synapseTypes'
 import mockFileEntity from '../../../../../mocks/entity/mockFileEntity'
 import {
   mockSchemaBinding,
@@ -81,7 +84,7 @@ async function clickSaveAndConfirm() {
 
 // These tests are unstable, so we'll skip them until we can fix them
 // The component is in experimental mode only, so not a big deal for now
-describe.skip('SchemaDrivenAnnotationEditor tests', () => {
+describe('SchemaDrivenAnnotationEditor tests', () => {
   // Handle the msw lifecycle:
   beforeAll(() => server.listen())
   afterEach(() => {
@@ -191,6 +194,17 @@ describe.skip('SchemaDrivenAnnotationEditor tests', () => {
         return res(ctx.status(201), ctx.json({ token: mockAsyncTokenId }))
       },
     ),
+    rest.get(
+      `${getEndpoint(
+        BackendDestinationEnum.REPO_ENDPOINT,
+      )}${ASYNCHRONOUS_JOB_TOKEN(mockAsyncTokenId)}`,
+      async (req, res, ctx) => {
+        const response: AsynchronousJobStatus = {
+          responseBody: { validationSchema: mockValidationSchema },
+        }
+        return res(ctx.status(200), ctx.json(response))
+      },
+    ),
     rest.get(
       `${getEndpoint(
         BackendDestinationEnum.REPO_ENDPOINT,
@@ -256,7 +270,10 @@ describe.skip('SchemaDrivenAnnotationEditor tests', () => {
     expect(screen.queryByLabelText('state*')).not.toBeInTheDocument()
 
     // Behavior under test: select "USA" and "state" field appears
-    await selectEvent.select(countryField, 'USA')
+    await userEvent.click(countryField)
+    await act(async () => {
+      await selectEvent.select(countryField, 'USA')
+    })
     await screen.findByLabelText('state*')
   })
 
@@ -432,9 +449,8 @@ describe.skip('SchemaDrivenAnnotationEditor tests', () => {
     )
   })
 
-  // Skipped due to unstable execution on TravisCI.
   // Next two tests are the same as the previous two tests, but with an array.
-  it.skip('Converts data in a schema-defined array to an additionalProperty array when removed from the schema', async () => {
+  it('Converts data in a schema-defined array to an additionalProperty array when removed from the schema', async () => {
     // Converting an array of strings to an additional property array shouldn't change the data, because they are both arrays.
     server.use(
       stringArrayAnnotationsHandler,
@@ -568,9 +584,11 @@ describe.skip('SchemaDrivenAnnotationEditor tests', () => {
     expect(showStringArrayField.value).toBe('true')
 
     // Verify that the field for the first value in the array is visible
-    expect(
-      queryByAttribute('id', component.container, 'root_stringArray_0'),
-    ).not.toBeNull()
+    await waitFor(() => {
+      expect(
+        queryByAttribute('id', component.container, 'root_stringArray_0'),
+      ).not.toBeNull()
+    })
 
     // Save the form
     await clickSaveAndConfirm()

src/lib/containers/EntityForm.tsx

@@ -4,6 +4,7 @@
 // Will give you the Synapse ID of the FileEntity that contains the user form data.
 import * as React from 'react'
 import Form from '@rjsf/core'
+import validator from '@rjsf/validator-ajv8'
 import { SynapseClient } from '../utils'
 import {
   EntityId,
@@ -323,6 +324,7 @@ export default class EntityForm extends React.Component<
           this.state.formUiSchema &&
           !this.state.error && (
             <Form
+              validator={validator}
               formData={this.state.formData}
               schema={this.state.formSchema}
               uiSchema={this.state.formUiSchema}

src/lib/containers/ModalDownload.FormSchema.ts

@@ -1,4 +1,4 @@
-import { UiSchema } from '@rjsf/core'
+import { UiSchema } from '@rjsf/utils'
 import { JSONSchema7 } from 'json-schema'
 
 export const writeHeaderOption = 'First line is the columns names.'

src/lib/containers/ModalDownload.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import validator from '@rjsf/validator-ajv6'
 import { Button, Modal } from 'react-bootstrap'
 import Form, { IChangeEvent } from '@rjsf/core'
 import { SynapseClient } from '../utils'
@@ -24,7 +25,7 @@ export type ModalDownloadState = {
   isLoading: boolean
   step: number
   data?: DownloadFromTableResult
-  formData: {}
+  formData: Record<string, unknown>
 }
 
 export type ModalDownloadProps = {
@@ -149,6 +150,7 @@ export default class ModalDownload extends React.Component<
             <IconSvg options={{ icon: 'close' }} />
           </button>
           <Form
+            validator={validator}
             schema={formSchemaArray[this.state.step]}
             uiSchema={formSchemaUIArray[this.state.step]}
             onChange={this.handleChange}

src/lib/containers/QuerySortSelector.tsx

@@ -9,7 +9,7 @@ import {
   EnumOption,
   findValueOption,
   Control,
-} from './entity/annotations/CustomSelectWidget'
+} from './entity/SchemaDrivenAnnotationEditor/widget/SelectWidget'
 
 export type QuerySortSelectorProps = {
   sortConfig: SortConfiguration

src/lib/containers/entity/annotations/AnnotationEditorUtils.ts → src/lib/containers/entity/SchemaDrivenAnnotationEditor/AnnotationEditorUtils.ts

@@ -1,4 +1,4 @@
-import { AjvError } from '@sage-bionetworks/rjsf-core'
+import { RJSFValidationError } from '@rjsf/utils'
 import { flatMap, groupBy, isEmpty } from 'lodash-es'
 import { entityJsonKeys } from '../../../utils/synapseTypes'
 
@@ -31,18 +31,20 @@ export function dropNullishArrayValues(
  * @param error
  * @returns
  */
-export function getFriendlyPropertyName(error: AjvError) {
-  if (error.property.startsWith('[')) {
+export function getFriendlyPropertyName(error: RJSFValidationError) {
+  if (error.property?.startsWith('[')) {
     // Additional properties are surrounded by brackets and quotations, so let's remove them
     return error.property.substring(2, error.property.length - 2)
-  } else if (error.property.startsWith('.')) {
+  } else if (error.property?.startsWith('.')) {
     return error.property.substring(1)
   } else {
     return error.property
   }
 }
 
-export function transformErrors(errors: AjvError[]): AjvError[] {
+export function transformErrors(
+  errors: RJSFValidationError[],
+): RJSFValidationError[] {
   // Transform the errors in the following ways:
   // - Simplify the set of errors when failing to select an enumeration defined with an anyOf (SWC-5724)
   // - Show a custom error message when using a property that collides with an internal entity property (SWC-5678)
@@ -86,7 +88,7 @@ export function transformErrors(errors: AjvError[]): AjvError[] {
   // Custom error message if the custom annotation key collides with an internal entity property
   errors = errors.map(error => {
     const propertyName = getFriendlyPropertyName(error)
-    if (entityJsonKeys.includes(propertyName)) {
+    if (propertyName && entityJsonKeys.includes(propertyName)) {
       error.message = `"${propertyName}" is a reserved internal key and cannot be used.`
     }
     return error

src/lib/containers/entity/annotations/SchemaDrivenAnnotationEditor.stories.tsx → src/lib/containers/entity/SchemaDrivenAnnotationEditor/SchemaDrivenAnnotationEditor.stories.tsx

@@ -18,6 +18,11 @@ const Template: ComponentStory<typeof SchemaDrivenAnnotationEditor> = args => (
   </div>
 )
 
+export const NoSchema = Template.bind({})
+NoSchema.args = {
+  entityId: 'syn28579706',
+}
+
 export const ComplexSchema = Template.bind({})
 ComplexSchema.args = {
   schemaId: 'nkauer-ad.main',