chore: remove old rjsf

Signed-off-by: blam <ben@blam.sh>

plugins/home/package.json

@@ -46,8 +46,8 @@
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.61",
-    "@rjsf/core-v5": "npm:@rjsf/core@5.13.0",
-    "@rjsf/material-ui-v5": "npm:@rjsf/material-ui@5.13.0",
+    "@rjsf/core": "5.13.0",
+    "@rjsf/material-ui": "5.13.0",
     "@rjsf/utils": "5.13.0",
     "@rjsf/validator-ajv8": "5.13.0",
     "@types/react": "^16.13.1 || ^17.0.0",

plugins/home/src/components/CustomHomepage/WidgetSettingsOverlay.tsx

@@ -27,10 +27,11 @@ import SettingsIcon from '@material-ui/icons/Settings';
 import DeleteIcon from '@material-ui/icons/Delete';
 import React from 'react';
 import { Widget } from './types';
-import { withTheme } from '@rjsf/core-v5';
+import { withTheme } from '@rjsf/core';
+import { Theme as MuiTheme } from '@rjsf/material-ui';
 import validator from '@rjsf/validator-ajv8';
 
-const Form = withTheme(require('@rjsf/material-ui-v5').Theme);
+const Form = withTheme(MuiTheme);
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

plugins/scaffolder-react/alpha-api-report.md

@@ -13,9 +13,7 @@ import { Dispatch } from 'react';
 import { Extension } from '@backstage/core-plugin-api';
 import { FieldExtensionComponent } from '@backstage/plugin-scaffolder-react';
 import { FieldExtensionOptions } from '@backstage/plugin-scaffolder-react';
-import { FieldProps } from '@rjsf/core';
 import { FieldValidation } from '@rjsf/utils';
-import { FieldValidation as FieldValidation_2 } from '@rjsf/core';
 import { FormProps } from '@backstage/plugin-scaffolder-react';
 import { IconComponent } from '@backstage/core-plugin-api';
 import { JsonObject } from '@backstage/types';
@@ -26,6 +24,7 @@ import { default as React_2 } from 'react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { ReviewStepProps } from '@backstage/plugin-scaffolder-react';
+import { ScaffolderRJSFFieldProps } from '@backstage/plugin-scaffolder-react';
 import { ScaffolderRJSFFormProps } from '@backstage/plugin-scaffolder-react';
 import { ScaffolderStep } from '@backstage/plugin-scaffolder-react';
 import { ScaffolderTaskOutput } from '@backstage/plugin-scaffolder-react';
@@ -86,7 +85,7 @@ export type FormValidation = {
 // @alpha
 export type LegacyCustomFieldValidator<TFieldReturnValue> = (
   data: TFieldReturnValue,
-  field: FieldValidation_2,
+  field: FieldValidation,
   context: {
     apiHolder: ApiHolder;
   },
@@ -96,9 +95,9 @@ export type LegacyCustomFieldValidator<TFieldReturnValue> = (
 export interface LegacyFieldExtensionComponentProps<
   TFieldReturnValue,
   TUiOptions = unknown,
-> extends FieldProps<TFieldReturnValue> {
+> extends ScaffolderRJSFFieldProps<TFieldReturnValue> {
   // (undocumented)
-  uiSchema: FieldProps['uiSchema'] & {
+  uiSchema: ScaffolderRJSFFieldProps['uiSchema'] & {
     'ui:options'?: TUiOptions;
   };
 }

plugins/scaffolder-react/api-report.md

@@ -15,13 +15,13 @@ import { ErrorTransformer } from '@rjsf/utils';
 import { Experimental_DefaultFormStateBehavior } from '@rjsf/utils';
 import { Extension } from '@backstage/core-plugin-api';
 import { FieldValidation } from '@rjsf/utils';
-import Form from '@rjsf/core-v5';
+import Form from '@rjsf/core';
 import { FormContextType } from '@rjsf/utils';
 import { FormEvent } from 'react';
-import type { FormProps as FormProps_2 } from '@rjsf/core-v5';
+import type { FormProps as FormProps_2 } from '@rjsf/core';
 import { GenericObjectType } from '@rjsf/utils';
 import { HTMLAttributes } from 'react';
-import { IChangeEvent } from '@rjsf/core-v5';
+import { IChangeEvent } from '@rjsf/core';
 import { IdSchema } from '@rjsf/utils';
 import { JsonObject } from '@backstage/types';
 import { JSONSchema7 } from 'json-schema';

plugins/scaffolder-react/package.json

@@ -60,10 +60,8 @@
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.61",
     "@react-hookz/web": "^20.0.0",
-    "@rjsf/core": "^3.2.1",
-    "@rjsf/core-v5": "npm:@rjsf/core@5.13.0",
-    "@rjsf/material-ui": "^3.2.1",
-    "@rjsf/material-ui-v5": "npm:@rjsf/material-ui@5.13.0",
+    "@rjsf/core": "5.13.0",
+    "@rjsf/material-ui": "5.13.0",
     "@rjsf/utils": "5.13.0",
     "@rjsf/validator-ajv8": "5.13.0",
     "@types/json-schema": "^7.0.9",

plugins/scaffolder-react/src/components/types.ts

@@ -15,7 +15,7 @@
  */
 
 import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
-import type { FormProps as SchemaFormProps } from '@rjsf/core-v5';
+import type { FormProps as SchemaFormProps } from '@rjsf/core';
 import { UiSchema } from '@rjsf/utils';
 import { JsonObject } from '@backstage/types';
 

plugins/scaffolder-react/src/extensions/rjsf.ts

@@ -33,7 +33,7 @@ import {
   ErrorTransformer,
 } from '@rjsf/utils';
 import { HTMLAttributes } from 'react';
-import Form, { IChangeEvent } from '@rjsf/core-v5';
+import Form, { IChangeEvent } from '@rjsf/core';
 
 /**
  * The props for the `Field` components

plugins/scaffolder-react/src/layouts/createScaffolderLayout.ts

@@ -16,7 +16,7 @@
 
 import { LAYOUTS_KEY, LAYOUTS_WRAPPER_KEY } from './keys';
 import { attachComponentData, Extension } from '@backstage/core-plugin-api';
-import type { FormProps as SchemaFormProps } from '@rjsf/core-v5';
+import type { FormProps as SchemaFormProps } from '@rjsf/core';
 import React from 'react';
 
 /**

plugins/scaffolder-react/src/legacy/extensions/types.ts

@@ -14,8 +14,11 @@
  * limitations under the License.
  */
 import { ApiHolder } from '@backstage/core-plugin-api';
-import { FieldValidation, FieldProps } from '@rjsf/core';
-import { CustomFieldExtensionSchema } from '@backstage/plugin-scaffolder-react';
+import { FieldValidation } from '@rjsf/utils';
+import {
+  CustomFieldExtensionSchema,
+  ScaffolderRJSFFieldProps,
+} from '@backstage/plugin-scaffolder-react';
 
 /**
  * Field validation type for Custom Field Extensions.
@@ -55,8 +58,8 @@ export type LegacyFieldExtensionOptions<
 export interface LegacyFieldExtensionComponentProps<
   TFieldReturnValue,
   TUiOptions = unknown,
-> extends FieldProps<TFieldReturnValue> {
-  uiSchema: FieldProps['uiSchema'] & {
+> extends ScaffolderRJSFFieldProps<TFieldReturnValue> {
+  uiSchema: ScaffolderRJSFFieldProps['uiSchema'] & {
     'ui:options'?: TUiOptions;
   };
 }

plugins/scaffolder-react/src/next/components/Form/Form.tsx

@@ -14,18 +14,16 @@
  * limitations under the License.
  */
 
-import { withTheme } from '@rjsf/core-v5';
+import { withTheme } from '@rjsf/core';
 import React from 'react';
 import { PropsWithChildren } from 'react';
 import { FieldTemplate } from './FieldTemplate';
 import { DescriptionFieldTemplate } from './DescriptionFieldTemplate';
 import { FieldProps } from '@rjsf/utils';
 import { ScaffolderRJSFFormProps } from '@backstage/plugin-scaffolder-react';
+import { Theme as MuiTheme } from '@rjsf/material-ui';
 
-// TODO(blam): We require here, as the types in this package depend on @rjsf/core explicitly
-// which is what we're using here as the default types, it needs to depend on @rjsf/core-v5 because
-// of the re-writing we're doing. Once we've migrated, we can import this the exact same as before.
-const WrappedForm = withTheme(require('@rjsf/material-ui-v5').Theme);
+const WrappedForm = withTheme(MuiTheme);
 
 /**
  * The Form component

plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx

@@ -23,7 +23,7 @@ import {
   makeStyles,
   LinearProgress,
 } from '@material-ui/core';
-import { type IChangeEvent } from '@rjsf/core-v5';
+import { type IChangeEvent } from '@rjsf/core';
 import { ErrorSchema } from '@rjsf/utils';
 import React, {
   useCallback,

plugins/scaffolder/alpha-api-report.md

@@ -8,7 +8,7 @@
 import { ComponentType } from 'react';
 import { Entity } from '@backstage/catalog-model';
 import { FieldExtensionOptions } from '@backstage/plugin-scaffolder-react';
-import type { FormProps as FormProps_2 } from '@rjsf/core-v5';
+import type { FormProps as FormProps_2 } from '@rjsf/core';
 import { FormProps as FormProps_3 } from '@backstage/plugin-scaffolder-react';
 import { JSX as JSX_2 } from 'react';
 import { LayoutOptions } from '@backstage/plugin-scaffolder-react';

plugins/scaffolder/package.json

@@ -68,8 +68,8 @@
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.61",
     "@react-hookz/web": "^20.0.0",
-    "@rjsf/core": "^3.2.1",
-    "@rjsf/material-ui": "^3.2.1",
+    "@rjsf/core": "5.13.0",
+    "@rjsf/material-ui": "5.13.0",
     "@rjsf/utils": "5.13.0",
     "@rjsf/validator-ajv8": "5.13.0",
     "@types/react": "^16.13.1 || ^17.0.0",

plugins/scaffolder/src/components/fields/EntityNamePicker/validation.test.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { FieldValidation } from '@rjsf/core';
+import { FieldValidation } from '@rjsf/utils';
 import { KubernetesValidatorFunctions } from '@backstage/catalog-model';
 import { entityNamePickerValidation } from './validation';
 

plugins/scaffolder/src/components/fields/RepoUrlPicker/validation.test.ts

@@ -15,7 +15,7 @@
  */
 
 import { repoPickerValidation } from './validation';
-import { FieldValidation } from '@rjsf/core';
+import { FieldValidation } from '@rjsf/utils';
 import { ScmIntegrations } from '@backstage/integration';
 import { ConfigReader } from '@backstage/core-app-api';
 import { ApiHolder } from '@backstage/core-plugin-api';

plugins/scaffolder/src/legacy/MultistepJsonForm/FieldOverrides/DescriptionField.tsx

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import { MarkdownContent } from '@backstage/core-components';
-import { FieldProps } from '@rjsf/core';
+import { FieldProps } from '@rjsf/utils';
 
 export const DescriptionField = ({ description }: FieldProps) =>
   description && <MarkdownContent content={description} linkTarget="_blank" />;

plugins/scaffolder/src/legacy/MultistepJsonForm/MultistepJsonForm.tsx

@@ -36,6 +36,7 @@ import { transformSchemaToProps } from './schema';
 import cloneDeep from 'lodash/cloneDeep';
 import * as fieldOverrides from './FieldOverrides';
 import { ReviewStep } from './ReviewStep';
+import validator from '@rjsf/validator-ajv8';
 import { extractSchemaFromStep } from '@backstage/plugin-scaffolder-react/alpha';
 import { selectedTemplateRouteRef } from '../../routes';
 import {
@@ -180,6 +181,7 @@ export const MultistepJsonForm = (props: MultistepJsonFormProps) => {
               </StepLabel>
               <StepContent key={title}>
                 <Form
+                  validator={validator}
                   showErrorList={false}
                   fields={{ ...fieldOverrides, ...fields }}
                   widgets={widgets}

plugins/scaffolder/src/legacy/MultistepJsonForm/ReviewStep.tsx

@@ -16,7 +16,7 @@
 import { Box, Button, Paper, Typography } from '@material-ui/core';
 import React from 'react';
 import { Content, StructuredMetadataTable } from '@backstage/core-components';
-import { UiSchema } from '@rjsf/core';
+import { UiSchema } from '@rjsf/utils';
 import { JsonObject } from '@backstage/types';
 import { ReviewStepProps } from '@backstage/plugin-scaffolder-react';
 

plugins/scaffolder/src/legacy/MultistepJsonForm/schema.ts

@@ -15,8 +15,9 @@
  */
 
 import { JsonObject } from '@backstage/types';
-import { FormProps, UiSchema } from '@rjsf/core';
+import { UiSchema } from '@rjsf/utils';
 import type { LayoutOptions } from '@backstage/plugin-scaffolder-react';
+import { FormProps } from '@rjsf/core';
 
 function isObject(value: unknown): value is JsonObject {
   return typeof value === 'object' && value !== null && !Array.isArray(value);
@@ -120,8 +121,7 @@ export function transformSchemaToProps(
     )?.component;
 
     if (Layout) {
-      uiSchema['ui:ObjectFieldTemplate'] =
-        Layout as unknown as FormProps<any>['ObjectFieldTemplate'];
+      uiSchema['ui:ObjectFieldTemplate'] = Layout;
     }
   }
 

plugins/scaffolder/src/legacy/TemplateEditorPage/TemplateEditorForm.tsx

@@ -192,7 +192,7 @@ export function TemplateEditorForm(props: TemplateEditorFormProps) {
         <ErrorBoundary invalidator={steps} setErrorText={setErrorText}>
           <MultistepJsonForm
             steps={steps}
-            fields={fields}
+            fields={fields as any}
             formData={data}
             onChange={e => onUpdate(e.formData)}
             onReset={() => onUpdate({})}

plugins/scaffolder/src/legacy/TemplatePage/TemplatePage.tsx

@@ -162,7 +162,7 @@ export const TemplatePage = ({
               <MultistepJsonForm
                 ReviewStepComponent={ReviewStepComponent}
                 formData={formState}
-                fields={customFieldComponents}
+                fields={customFieldComponents as any}
                 onChange={handleChange}
                 onReset={handleFormReset}
                 onFinish={handleCreate}

plugins/scaffolder/src/legacy/TemplatePage/createValidator.test.ts

@@ -17,7 +17,7 @@
 import { createValidator } from './createValidator';
 import { LegacyCustomFieldValidator } from '@backstage/plugin-scaffolder-react/alpha';
 import { ApiHolder } from '@backstage/core-plugin-api';
-import { FieldValidation, FormValidation } from '@rjsf/core';
+import { FieldValidation, FormValidation } from '@rjsf/utils';
 
 type CustomLinkType = {
   url: string;
@@ -111,7 +111,7 @@ describe('createValidator', () => {
 
     /* THEN */
     expect(result).not.toBeNull();
-    expect(result.p1.addError).toHaveBeenCalledTimes(1);
+    expect(result.p1?.addError).toHaveBeenCalledTimes(1);
   });
 
   it('should call validator for array property from a custom field extension', () => {
@@ -146,7 +146,7 @@ describe('createValidator', () => {
 
     /* THEN */
     expect(result).not.toBeNull();
-    expect(result.tags.addError).toHaveBeenCalledTimes(1);
+    expect(result.tags?.addError).toHaveBeenCalledTimes(1);
   });
 
   it('should call validator for array object property from a custom field extension', () => {
@@ -195,6 +195,6 @@ describe('createValidator', () => {
 
     /* THEN */
     expect(result).not.toBeNull();
-    expect(result.links.addError).toHaveBeenCalledTimes(1);
+    expect(result.links?.addError).toHaveBeenCalledTimes(1);
   });
 });

plugins/scaffolder/src/legacy/TemplatePage/createValidator.ts

@@ -15,7 +15,7 @@
  */
 
 import { LegacyCustomFieldValidator } from '@backstage/plugin-scaffolder-react/alpha';
-import { FormValidation } from '@rjsf/core';
+import { FieldValidation, FormValidation } from '@rjsf/utils';
 import { JsonObject, JsonValue } from '@backstage/types';
 import { ApiHolder } from '@backstage/core-plugin-api';
 
@@ -56,7 +56,7 @@ export const createValidator = (
             if (fieldName && typeof validators[fieldName] === 'function') {
               validators[fieldName]!(
                 propData as JsonObject[],
-                propValidation,
+                propValidation as FieldValidation,
                 context,
               );
             }

plugins/scaffolder/src/next/types.ts

@@ -20,7 +20,7 @@
  * It exists already in the `scaffolder-react` plugin, so you may have to update both files.
  */
 
-import type { FormProps as SchemaFormProps } from '@rjsf/core-v5';
+import type { FormProps as SchemaFormProps } from '@rjsf/core';
 
 /**
  * Any `@rjsf/core` form properties that are publicly exposed to the `NextScaffolderPage`