From 3a6c0a07a91b2b0fae5ab30d4fedc139aace78a0 Mon Sep 17 00:00:00 2001 From: dcshzj <27919917+dcshzj@users.noreply.github.com> Date: Mon, 15 Jul 2024 10:59:20 +0800 Subject: [PATCH 1/7] fix: remove duplicate dropdown custom renderer --- .../controls/JsonFormsAnyOfControl.tsx | 38 +++++++++++-------- .../controls/JsonFormsDropdownControl.tsx | 2 +- 2 files changed, 23 insertions(+), 17 deletions(-) diff --git a/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsAnyOfControl.tsx b/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsAnyOfControl.tsx index 559b24aca..c65f23677 100644 --- a/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsAnyOfControl.tsx +++ b/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsAnyOfControl.tsx @@ -35,25 +35,31 @@ export function JsonFormsAnyOfControl({ uischemas, ) - const variants = anyOfRenderInfos.map((anyOfRenderInfo) => ({ - label: anyOfRenderInfo.label, - value: anyOfRenderInfo.label, - })) + const variants = anyOfRenderInfos.map((anyOfRenderInfo) => { + const option = String(anyOfRenderInfo.schema.const || anyOfRenderInfo.label) + + return { + label: option.charAt(0).toUpperCase() + option.slice(1), + value: option, + } + }) const [variant, setVariant] = useState(anyOfRenderInfos[0]?.label || "") return ( - - - Variant - - + <> + + + {label || "Variant"} + + + {anyOfRenderInfos.map( (anyOfRenderInfo) => @@ -68,7 +74,7 @@ export function JsonFormsAnyOfControl({ /> ), )} - + ) } diff --git a/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsDropdownControl.tsx b/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsDropdownControl.tsx index 303a31864..66ff7debd 100644 --- a/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsDropdownControl.tsx +++ b/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsDropdownControl.tsx @@ -28,7 +28,7 @@ export function JsonFormsDropdownControl({ }: ControlProps & OwnPropsOfEnum) { const [dropdownValue, setDropdownValue] = useState(data || "") - if (!options || (options.length === 1 && !!schema.default)) { + if (!options || (options.length === 1 && !!schema.const)) { return null } From 3e8e3e5ef8637b3a2ded20b7e0f1a16ae9848cf8 Mon Sep 17 00:00:00 2001 From: dcshzj <27919917+dcshzj@users.noreply.github.com> Date: Mon, 15 Jul 2024 18:31:31 +0800 Subject: [PATCH 2/7] feat: don't set the first item as default for anyOf --- apps/studio/src/constants/formBuilder.ts | 1 + .../components/form-builder/FormBuilder.tsx | 3 ++ .../controls/JsonFormsAnyOfControl.tsx | 14 ++++++--- .../controls/JsonFormsConstControl.tsx | 29 +++++++++++++++++++ .../controls/JsonFormsDropdownControl.tsx | 7 ++++- .../form-builder/renderers/controls/index.ts | 4 +++ 6 files changed, 53 insertions(+), 5 deletions(-) create mode 100644 apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsConstControl.tsx diff --git a/apps/studio/src/constants/formBuilder.ts b/apps/studio/src/constants/formBuilder.ts index b38aaa31a..3bd988e69 100644 --- a/apps/studio/src/constants/formBuilder.ts +++ b/apps/studio/src/constants/formBuilder.ts @@ -2,6 +2,7 @@ export const JSON_FORMS_RANKING = { ArrayControl: 4, BooleanControl: 2, + ConstControl: 3, DropdownControl: 2, IntegerControl: 4, TextControl: 1, diff --git a/apps/studio/src/features/editing-experience/components/form-builder/FormBuilder.tsx b/apps/studio/src/features/editing-experience/components/form-builder/FormBuilder.tsx index 02cb6cf24..37b3abca9 100644 --- a/apps/studio/src/features/editing-experience/components/form-builder/FormBuilder.tsx +++ b/apps/studio/src/features/editing-experience/components/form-builder/FormBuilder.tsx @@ -14,6 +14,8 @@ import { jsonFormsArrayControlTester, JsonFormsBooleanControl, jsonFormsBooleanControlTester, + JsonFormsConstControl, + jsonFormsConstControlTester, JsonFormsDropdownControl, jsonFormsDropdownControlTester, jsonFormsGroupLayoutRenderer, @@ -36,6 +38,7 @@ const renderers: JsonFormsRendererRegistryEntry[] = [ { tester: jsonFormsObjectControlTester, renderer: JsonFormsObjectControl }, { tester: jsonFormsArrayControlTester, renderer: JsonFormsArrayControl }, { tester: jsonFormsBooleanControlTester, renderer: JsonFormsBooleanControl }, + { tester: jsonFormsConstControlTester, renderer: JsonFormsConstControl }, { tester: jsonFormsDropdownControlTester, renderer: JsonFormsDropdownControl, diff --git a/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsAnyOfControl.tsx b/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsAnyOfControl.tsx index c65f23677..2553b5f33 100644 --- a/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsAnyOfControl.tsx +++ b/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsAnyOfControl.tsx @@ -25,6 +25,7 @@ export function JsonFormsAnyOfControl({ uischema, uischemas, label, + handleChange, }: CombinatorRendererProps) { const anyOfRenderInfos = createCombinatorRenderInfos( schema.anyOf ?? [], @@ -35,7 +36,7 @@ export function JsonFormsAnyOfControl({ uischemas, ) - const variants = anyOfRenderInfos.map((anyOfRenderInfo) => { + const options = anyOfRenderInfos.map((anyOfRenderInfo) => { const option = String(anyOfRenderInfo.schema.const || anyOfRenderInfo.label) return { @@ -44,7 +45,12 @@ export function JsonFormsAnyOfControl({ } }) - const [variant, setVariant] = useState(anyOfRenderInfos[0]?.label || "") + const [variant, setVariant] = useState("") + + const onChange = (value: string) => { + setVariant(value) + handleChange(path, value) + } return ( <> @@ -54,9 +60,9 @@ export function JsonFormsAnyOfControl({ diff --git a/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsConstControl.tsx b/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsConstControl.tsx new file mode 100644 index 000000000..6de23e136 --- /dev/null +++ b/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsConstControl.tsx @@ -0,0 +1,29 @@ +import type { ControlProps, RankedTester } from "@jsonforms/core" +import { useEffect } from "react" +import { and, isStringControl, rankWith, schemaMatches } from "@jsonforms/core" +import { withJsonFormsControlProps } from "@jsonforms/react" + +import { JSON_FORMS_RANKING } from "~/constants/formBuilder" + +export const jsonFormsConstControlTester: RankedTester = rankWith( + JSON_FORMS_RANKING.ConstControl, + and( + isStringControl, + schemaMatches((schema) => schema.const !== undefined), + ), +) + +export function JsonFormsConstControl({ + handleChange, + path, + schema, +}: ControlProps) { + // TODO: Make the default value persist inside JSONForms + useEffect(() => { + handleChange(path, schema.const) + }, [handleChange, path, schema]) + + return null +} + +export default withJsonFormsControlProps(JsonFormsConstControl) diff --git a/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsDropdownControl.tsx b/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsDropdownControl.tsx index 66ff7debd..dab2f3805 100644 --- a/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsDropdownControl.tsx +++ b/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsDropdownControl.tsx @@ -3,7 +3,7 @@ import type { OwnPropsOfEnum, RankedTester, } from "@jsonforms/core" -import { useState } from "react" +import { useEffect, useState } from "react" import { Box, FormControl } from "@chakra-ui/react" import { isEnumControl, rankWith } from "@jsonforms/core" import { withJsonFormsEnumProps } from "@jsonforms/react" @@ -28,6 +28,11 @@ export function JsonFormsDropdownControl({ }: ControlProps & OwnPropsOfEnum) { const [dropdownValue, setDropdownValue] = useState(data || "") + // Use the default value if it exists + useEffect(() => { + handleChange(path, schema.default || schema.const) + }, [path, schema.default, schema.const, handleChange]) + if (!options || (options.length === 1 && !!schema.const)) { return null } diff --git a/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/index.ts b/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/index.ts index b01b7fb55..b6661f6a1 100644 --- a/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/index.ts +++ b/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/index.ts @@ -6,6 +6,10 @@ export { default as JsonFormsBooleanControl, jsonFormsBooleanControlTester, } from "./JsonFormsBooleanControl" +export { + default as JsonFormsConstControl, + jsonFormsConstControlTester, +} from "./JsonFormsConstControl" export { default as JsonFormsDropdownControl, jsonFormsDropdownControlTester, From a37c4b4c4396645891301e8e6a68aac4427fe716 Mon Sep 17 00:00:00 2001 From: dcshzj <27919917+dcshzj@users.noreply.github.com> Date: Wed, 17 Jul 2024 18:07:08 +0800 Subject: [PATCH 3/7] chore: set dropdown value if default/const is available --- .../renderers/controls/JsonFormsDropdownControl.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsDropdownControl.tsx b/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsDropdownControl.tsx index dab2f3805..48f7ef7a0 100644 --- a/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsDropdownControl.tsx +++ b/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsDropdownControl.tsx @@ -30,8 +30,13 @@ export function JsonFormsDropdownControl({ // Use the default value if it exists useEffect(() => { - handleChange(path, schema.default || schema.const) - }, [path, schema.default, schema.const, handleChange]) + if (data !== undefined || data !== "") { + return + } + const value = schema.default || schema.const + setDropdownValue(value) + handleChange(path, value) + }, [path, schema.default, schema.const, handleChange, data]) if (!options || (options.length === 1 && !!schema.const)) { return null From 16364038e5847cdae9e2e16eba842563ced8061f Mon Sep 17 00:00:00 2001 From: dcshzj <27919917+dcshzj@users.noreply.github.com> Date: Wed, 17 Jul 2024 18:09:17 +0800 Subject: [PATCH 4/7] chore: remove const renderer for now --- apps/studio/src/constants/formBuilder.ts | 1 - .../components/form-builder/FormBuilder.tsx | 3 -- .../controls/JsonFormsConstControl.tsx | 29 ------------------- .../form-builder/renderers/controls/index.ts | 4 --- 4 files changed, 37 deletions(-) delete mode 100644 apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsConstControl.tsx diff --git a/apps/studio/src/constants/formBuilder.ts b/apps/studio/src/constants/formBuilder.ts index 3bd988e69..b38aaa31a 100644 --- a/apps/studio/src/constants/formBuilder.ts +++ b/apps/studio/src/constants/formBuilder.ts @@ -2,7 +2,6 @@ export const JSON_FORMS_RANKING = { ArrayControl: 4, BooleanControl: 2, - ConstControl: 3, DropdownControl: 2, IntegerControl: 4, TextControl: 1, diff --git a/apps/studio/src/features/editing-experience/components/form-builder/FormBuilder.tsx b/apps/studio/src/features/editing-experience/components/form-builder/FormBuilder.tsx index 37b3abca9..02cb6cf24 100644 --- a/apps/studio/src/features/editing-experience/components/form-builder/FormBuilder.tsx +++ b/apps/studio/src/features/editing-experience/components/form-builder/FormBuilder.tsx @@ -14,8 +14,6 @@ import { jsonFormsArrayControlTester, JsonFormsBooleanControl, jsonFormsBooleanControlTester, - JsonFormsConstControl, - jsonFormsConstControlTester, JsonFormsDropdownControl, jsonFormsDropdownControlTester, jsonFormsGroupLayoutRenderer, @@ -38,7 +36,6 @@ const renderers: JsonFormsRendererRegistryEntry[] = [ { tester: jsonFormsObjectControlTester, renderer: JsonFormsObjectControl }, { tester: jsonFormsArrayControlTester, renderer: JsonFormsArrayControl }, { tester: jsonFormsBooleanControlTester, renderer: JsonFormsBooleanControl }, - { tester: jsonFormsConstControlTester, renderer: JsonFormsConstControl }, { tester: jsonFormsDropdownControlTester, renderer: JsonFormsDropdownControl, diff --git a/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsConstControl.tsx b/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsConstControl.tsx deleted file mode 100644 index 6de23e136..000000000 --- a/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsConstControl.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import type { ControlProps, RankedTester } from "@jsonforms/core" -import { useEffect } from "react" -import { and, isStringControl, rankWith, schemaMatches } from "@jsonforms/core" -import { withJsonFormsControlProps } from "@jsonforms/react" - -import { JSON_FORMS_RANKING } from "~/constants/formBuilder" - -export const jsonFormsConstControlTester: RankedTester = rankWith( - JSON_FORMS_RANKING.ConstControl, - and( - isStringControl, - schemaMatches((schema) => schema.const !== undefined), - ), -) - -export function JsonFormsConstControl({ - handleChange, - path, - schema, -}: ControlProps) { - // TODO: Make the default value persist inside JSONForms - useEffect(() => { - handleChange(path, schema.const) - }, [handleChange, path, schema]) - - return null -} - -export default withJsonFormsControlProps(JsonFormsConstControl) diff --git a/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/index.ts b/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/index.ts index b6661f6a1..b01b7fb55 100644 --- a/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/index.ts +++ b/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/index.ts @@ -6,10 +6,6 @@ export { default as JsonFormsBooleanControl, jsonFormsBooleanControlTester, } from "./JsonFormsBooleanControl" -export { - default as JsonFormsConstControl, - jsonFormsConstControlTester, -} from "./JsonFormsConstControl" export { default as JsonFormsDropdownControl, jsonFormsDropdownControlTester, From 940df00872301fe241eb5e6317963fd7c09bb38d Mon Sep 17 00:00:00 2001 From: dcshzj <27919917+dcshzj@users.noreply.github.com> Date: Mon, 22 Jul 2024 18:34:21 +0800 Subject: [PATCH 5/7] fix: derive state and fix padding token --- .../renderers/controls/JsonFormsAnyOfControl.tsx | 2 +- .../renderers/controls/JsonFormsDropdownControl.tsx | 8 ++------ 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsAnyOfControl.tsx b/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsAnyOfControl.tsx index 2553b5f33..b3a9b48bd 100644 --- a/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsAnyOfControl.tsx +++ b/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsAnyOfControl.tsx @@ -54,7 +54,7 @@ export function JsonFormsAnyOfControl({ return ( <> - + {label || "Variant"} { if (data !== undefined || data !== "") { return } const value = schema.default || schema.const - setDropdownValue(value) handleChange(path, value) }, [path, schema.default, schema.const, handleChange, data]) @@ -52,12 +49,11 @@ export function JsonFormsDropdownControl({ {label} { - setDropdownValue(value) handleChange(path, value) }} /> From 088f906257e241aea876f542883ad3103aac6498 Mon Sep 17 00:00:00 2001 From: dcshzj <27919917+dcshzj@users.noreply.github.com> Date: Tue, 23 Jul 2024 09:58:02 +0800 Subject: [PATCH 6/7] fix: auto populate the currently selected variant --- .../renderers/controls/JsonFormsAnyOfControl.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsAnyOfControl.tsx b/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsAnyOfControl.tsx index b3a9b48bd..21f3e96f7 100644 --- a/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsAnyOfControl.tsx +++ b/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsAnyOfControl.tsx @@ -1,5 +1,5 @@ import type { CombinatorRendererProps, RankedTester } from "@jsonforms/core" -import { useState } from "react" +import { useEffect, useState } from "react" import { Box, FormControl } from "@chakra-ui/react" import { createCombinatorRenderInfos, @@ -26,6 +26,7 @@ export function JsonFormsAnyOfControl({ uischemas, label, handleChange, + indexOfFittingSchema, }: CombinatorRendererProps) { const anyOfRenderInfos = createCombinatorRenderInfos( schema.anyOf ?? [], @@ -52,6 +53,12 @@ export function JsonFormsAnyOfControl({ handleChange(path, value) } + useEffect(() => { + if (indexOfFittingSchema !== undefined) { + setVariant(options[indexOfFittingSchema]?.label || "") + } + }, [indexOfFittingSchema, options]) + return ( <> From c0fcd6b21e7cb4344b8e9fb87975313a25d7b3a8 Mon Sep 17 00:00:00 2001 From: dcshzj <27919917+dcshzj@users.noreply.github.com> Date: Tue, 23 Jul 2024 10:10:49 +0800 Subject: [PATCH 7/7] chore: only set the variant on the first load --- .../form-builder/renderers/controls/JsonFormsAnyOfControl.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsAnyOfControl.tsx b/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsAnyOfControl.tsx index 21f3e96f7..51c59c0db 100644 --- a/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsAnyOfControl.tsx +++ b/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsAnyOfControl.tsx @@ -57,7 +57,8 @@ export function JsonFormsAnyOfControl({ if (indexOfFittingSchema !== undefined) { setVariant(options[indexOfFittingSchema]?.label || "") } - }, [indexOfFittingSchema, options]) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []) return ( <>