feat: don't set the first item as default for anyOf

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,

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,

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({
           <SingleSelect
             value={variant}
             name={label}
-            items={variants}
+            items={options}
             isClearable={false}
-            onChange={setVariant}
+            onChange={onChange}
           />
         </FormControl>
       </Box>

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)

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
   }

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,