Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#3059: switch RJSF validator to cfworker/jsonschema #7081

Merged
merged 20 commits into from
Dec 21, 2023
Merged

#3059: switch RJSF validator to cfworker/jsonschema #7081

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
c91a3b3
[WIP]: switch form validator to cfworker
twschiller Dec 9, 2023
250fe42
Default to draft 7
twschiller Dec 9, 2023
011a7cb
merge main
grahamlangford Dec 15, 2023
233aff2
update package-lock
grahamlangford Dec 15, 2023
13633cb
wip
grahamlangford Dec 15, 2023
696aa7b
Merge branch 'main' of github.com:pixiebrix/pixiebrix-extension into …
grahamlangford Dec 15, 2023
9377e4e
wip
grahamlangford Dec 15, 2023
408cd36
wip
grahamlangford Dec 15, 2023
a771c4c
code cleanup
grahamlangford Dec 15, 2023
018c23c
more code cleanup
grahamlangford Dec 15, 2023
addb863
Merge branch 'main' into feature/3059-rjsf-cfworker
grahamlangford Dec 19, 2023
43ad077
unskips remaining tests
grahamlangford Dec 19, 2023
e3d40e7
fixes schema is not extensible issue
grahamlangford Dec 19, 2023
7268b27
Merge branch 'main' into feature/3059-rjsf-cfworker
grahamlangford Dec 20, 2023
84f0541
cloneDeep schema for other RJSF forms
grahamlangford Dec 20, 2023
e07e8da
Update src/bricks/transformers/ephemeralForm/EphemeralForm.tsx
grahamlangford Dec 20, 2023
b870ba2
Update src/components/formBuilder/preview/FormPreview.tsx
grahamlangford Dec 20, 2023
5d4637b
remove unnecessary comments
grahamlangford Dec 20, 2023
19a835e
removes unused method args
grahamlangford Dec 20, 2023
579084f
removes unnecessary comments
grahamlangford Dec 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 9 additions & 20 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,6 @@
"@rjsf/bootstrap-4": "^5.14.1",
"@rjsf/core": "^5.14.1",
"@rjsf/utils": "^5.15.1",
"@rjsf/validator-ajv6": "^5.15.1",
"@types/use-sync-external-store": "^0.0.6",
"@uipath/robot": "1.3.1",
"@vespaiach/axios-fetch-adapter": "^0.3.1",
Expand Down
8 changes: 6 additions & 2 deletions src/bricks/renderers/CustomFormComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import bootstrap from "bootstrap/dist/css/bootstrap.min.css?loadAsUrl";
import bootstrapOverrides from "@/pageEditor/sidebar/sidebarBootstrapOverrides.scss?loadAsUrl";
import custom from "@/bricks/renderers/customForm.css?loadAsUrl";
import JsonSchemaForm from "@rjsf/bootstrap-4";
import validator from "@rjsf/validator-ajv6";
import validator from "@/validators/formValidator";
import { type IChangeEvent } from "@rjsf/core";
import ImageCropWidget from "@/components/formBuilder/ImageCropWidget";
import RjsfSelectWidget from "@/components/formBuilder/RjsfSelectWidget";
Expand All @@ -34,6 +34,7 @@ import TextAreaWidget from "@/components/formBuilder/TextAreaWidget";
import RjsfSubmitContext from "@/components/formBuilder/RjsfSubmitContext";
import { templates } from "@/components/formBuilder/RjsfTemplates";
import { type UnknownObject } from "@/types/objectTypes";
import { cloneDeep } from "lodash";

const fields = {
DescriptionField,
Expand Down Expand Up @@ -98,7 +99,10 @@ const CustomFormComponent: React.FunctionComponent<{
}}
>
<JsonSchemaForm
schema={schema}
// Deep clone the schema because otherwise the schema is not extensible
// This breaks validation when @cfworker/json-schema dereferences the schema
// See https://github.com/cfworker/cfworker/blob/263260ea661b6f8388116db7b8daa859e0d28b25/packages/json-schema/src/dereference.ts#L115
schema={cloneDeep(schema)}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 Does the cloned schema need to be memoized?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I started off doing that, but I haven't had any issues with performance or mounting/unmounting. I know with formik and react-hook-form, the component won't remount/reset unless the key changes. I think we have the same situation here.

uiSchema={uiSchema}
formData={formData}
fields={fields}
Expand Down
2 changes: 1 addition & 1 deletion src/bricks/renderers/customForm.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import { render, screen } from "@testing-library/react";
import ImageCropWidget from "@/components/formBuilder/ImageCropWidget";
import DescriptionField from "@/components/formBuilder/DescriptionField";
import JsonSchemaForm from "@rjsf/bootstrap-4";
import validator from "@rjsf/validator-ajv6";
import validator from "@/validators/formValidator";
import {
CustomFormRenderer,
normalizeIncomingFormData,
Expand Down
8 changes: 6 additions & 2 deletions src/bricks/transformers/ephemeralForm/EphemeralForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
*/

import React, { useEffect } from "react";
import validator from "@rjsf/validator-ajv6";
import validator from "@/validators/formValidator";
import { Theme } from "@rjsf/bootstrap-4";
import { withTheme, getDefaultRegistry } from "@rjsf/core";
import { useAsyncState } from "@/hooks/common";
Expand All @@ -36,6 +36,7 @@ import ErrorBoundary from "@/components/ErrorBoundary";
import RjsfSelectWidget from "@/components/formBuilder/RjsfSelectWidget";
import { TOP_LEVEL_FRAME_ID } from "@/domConstants";
import { templates } from "@/components/formBuilder/RjsfTemplates";
import { cloneDeep } from "lodash";

const fields = {
DescriptionField,
Expand Down Expand Up @@ -132,7 +133,10 @@ const EphemeralForm: React.FC = () => {
<FormContainer>
<ErrorBoundary>
<JsonSchemaForm
schema={definition.schema}
// Deep clone the schema because otherwise the schema is not extensible, which
// breaks validation when @cfworker/json-schema dereferences the schema
// See https://github.com/cfworker/cfworker/blob/263260ea661b6f8388116db7b8daa859e0d28b25/packages/json-schema/src/dereference.ts#L115
schema={cloneDeep(definition.schema)}
uiSchema={definition.uiSchema}
fields={fields}
widgets={uiWidgets}
Expand Down
8 changes: 6 additions & 2 deletions src/components/formBuilder/preview/FormPreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
/* eslint-disable security/detect-object-injection */
import React, { useCallback, useEffect, useMemo, useState } from "react";
import JsonSchemaForm from "@rjsf/bootstrap-4";
import validator from "@rjsf/validator-ajv6";
import validator from "@/validators/formValidator";
import { type FieldTemplateProps } from "@rjsf/utils";
import { type IChangeEvent } from "@rjsf/core";
import {
Expand All @@ -41,6 +41,7 @@ import { type Draft } from "immer";
import { KEYS_OF_UI_SCHEMA, type Schema } from "@/types/schemaTypes";
import { templates } from "@/components/formBuilder/RjsfTemplates";
import FieldTemplate from "@/components/formBuilder/FieldTemplate";
import { cloneDeep } from "lodash";

export type FormPreviewProps = {
rjsfSchema: RJSFSchema;
Expand Down Expand Up @@ -194,7 +195,10 @@ const FormPreview: React.FC<FormPreviewProps> = ({
formData={data}
fields={fields}
widgets={widgets}
schema={previewSchema}
// Deep clone the schema because otherwise the schema is not extensible, which
// breaks validation when @cfworker/json-schema dereferences the schema
// See https://github.com/cfworker/cfworker/blob/263260ea661b6f8388116db7b8daa859e0d28b25/packages/json-schema/src/dereference.ts#L115
schema={cloneDeep(previewSchema)}
uiSchema={{
...previewUiSchema,
"ui:submitButtonOptions": { norender: true },
Expand Down
Loading
Loading