Upgrade react-jsonschema-form to latest version

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 7.1.0
+
+* Upgrade react-jsonschema-form to 4.2.0
+
 ## 7.0.0
 
 * Use CI to deploy google sheets lambda scripts by @epicfaace in https://github.com/Chinmayamission/CFF/pull/288

package.json

@@ -92,6 +92,7 @@
     "@aws-amplify/core": "^1.0.29",
     "@google/maps": "^0.5.5",
     "@redux-beacon/google-analytics-gtag": "^1.0.5",
+    "@rjsf/core": "^4.1.0",
     "@types/immutability-helper": "^2.6.3",
     "aws-sdk": "^2.814.0",
     "babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
@@ -135,7 +136,6 @@
     "react-edit-inline": "https://github.com/chukitow/ReactInlineEdit/tarball/feature/deprecated-protypes",
     "react-google-font-loader": "^1.0.5",
     "react-json-view": "^1.15.2",
-    "react-jsonschema-form": "git+https://github.com/mozilla-services/react-jsonschema-form.git#ad2bd6841b9218622a2a4bc92a07f4e8b88ce636",
     "react-loading": "^1.0.3",
     "react-modal": "^3.8.1",
     "react-monaco-editor": "^0.26.2",

scripts/src/admin/util/Headers.tsx

@@ -3,7 +3,7 @@ import { filter, assign, get, cloneDeep, find, isArray } from "lodash";
 import { IDataOptionView, IGroupOption } from "../FormEdit/FormEdit.d";
 import { Schema } from "../../form/interfaces";
 import { Object } from "core-js";
-import Form from "react-jsonschema-form";
+import Form from "@rjsf/core";
 import { filterCaseInsensitive } from "../ResponseTable/filters";
 import { dataToSchemaPath } from "../util/SchemaUtil";
 import ExpressionParser from "../../common/ExpressionParser";
@@ -316,14 +316,16 @@ export namespace Headers {
         const enumNames = schemaProperty.enumNames || schemaProperty.enum;
         headerObj.Filter = ({ filter, onChange }) => (
           <Form
-            schema={{
-              enum: [
-                "CFF_FILTER_NONE",
-                "CFF_FILTER_DEFINED",
-                ...schemaProperty.enum
-              ],
-              enumNames: ["None", "Defined", ...enumNames]
-            }}
+            schema={
+              {
+                enum: [
+                  "CFF_FILTER_NONE",
+                  "CFF_FILTER_DEFINED",
+                  ...schemaProperty.enum
+                ],
+                enumNames: ["None", "Defined", ...enumNames]
+              } as any
+            } // https://github.com/rjsf-team/react-jsonschema-form/issues/2761
             uiSchema={{ "ui:placeholder": "All", "ui:widget": "select" }}
             formData={filter && filter.value}
             onChange={e => onChange(e.formData)}

scripts/src/form/CustomForm.tsx

@@ -1,6 +1,6 @@
 import React, { Suspense, lazy, useState } from "react";
 import sanitize from "../sanitize";
-import Form from "react-jsonschema-form";
+import Form from "@rjsf/core";
 import "./form.scss";
 import ArrayFieldTemplate from "./form_templates/ArrayFieldTemplate";
 import ObjectFieldTemplate from "./form_templates/ObjectFieldTemplate";
@@ -141,7 +141,7 @@ interface ICustomFormProps {
   className?: string;
   children?: any;
   omitExtraData?: boolean;
-  tagName?: string;
+  tagName?: keyof JSX.IntrinsicElements;
   responseMetadata?: IResponseMetadata;
   showSubmitOptions?: boolean;
 }
@@ -177,12 +177,12 @@ function CustomForm(props: ICustomFormProps) {
         schema={props.schema}
         uiSchema={props.uiSchema}
         formData={props.formData}
-        widgets={widgets}
-        fields={fields}
+        widgets={widgets as any}
+        fields={fields as any}
         autocomplete={props.uiSchema["ui:cff:autocomplete"] ? "true" : "false"}
         noHtml5Validate={false}
         // FieldTemplate={CustomFieldTemplate}
-        ArrayFieldTemplate={ArrayFieldTemplate}
+        ArrayFieldTemplate={ArrayFieldTemplate as any}
         ObjectFieldTemplate={ObjectFieldTemplate}
         transformErrors={transformErrors}
         onChange={e => {

scripts/src/form/form_widgets/CheckboxWidget.tsx

@@ -1,7 +1,5 @@
 import * as React from "react";
-import PropTypes from "prop-types";
 import sanitize from "../../sanitize";
-import TitleField from "react-jsonschema-form";
 
 function CheckboxWidget(props) {
   const {

scripts/src/form/form_widgets/FileInputAndPreviewWidget.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import FileWidget from "react-jsonschema-form/lib/components/widgets/FileWidget";
 
 /*
 From https://github.com/TreeHacks/application-portal-frontend/blob/4d5c542498499c18bba1d0e3cfded0ff50964464/src/FormPage/FormPage.tsx#L64
@@ -40,6 +39,7 @@ const FilePreviewWidget = props => {
 
 const FileInputAndPreviewWidget = props => {
   const output = [];
+  const { FileWidget } = props.registry;
 
   if (props.value) {
     output.push(

scripts/src/form/form_widgets/InfoboxSelectWidget.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 import PropTypes from "prop-types";
 // From RJSF -- todo: add a patch to RJSF which allows us to customize this, rather than using a custom widget
-import { asNumber, guessType } from "react-jsonschema-form/lib/utils";
+import { utils } from "@rjsf/core";
 import Infobox from "../components/Infobox";
 import { get } from "lodash";
 
+const { asNumber, guessType } = utils;
 const nums = new Set(["number", "integer"]);
 
 /**

scripts/src/form/form_widgets/SameAsField.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import ObjectField from "react-jsonschema-form/lib/components/fields/ObjectField";
 import { get } from "lodash";
 
 class SameAsField extends React.Component<any, any> {

scripts/src/form/form_widgets/SmallTextboxWidget.tsx

@@ -24,6 +24,7 @@ function BaseInput(props) {
     onFocus,
     options,
     schema,
+    uiSchema,
     formContext,
     registry,
     ...inputProps

scripts/src/form/form_widgets/SubmitInputGroupWidget.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import Form from "react-jsonschema-form";
+import Form from "@rjsf/core";
 import "./SubmitInputGroupWidget.scss";
 
 export default ({ schema, uiSchema, value, onChange, id }) => {