npm - @backstage/plugin-scaffolder - Versions diffs - 1.30.0-next.0 → 1.30.0-next.2 - Mend

@backstage/plugin-scaffolder 1.30.0-next.0 → 1.30.0-next.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (139) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,77 @@
 # @backstage/plugin-scaffolder
+## 1.30.0-next.2
+### Minor Changes
+- 76681a5: **BREAKING ALPHA**: Extract out schema rendering components into their own Component. This means that the translation keys have changed for `actionsPage.content.tableCell.*`. They have moved to their own root key `renderSchema.*` instead.
+  ```diff
+  ...
+  -        tableCell: {
+  -          name: 'Name',
+  -          title: 'Title',
+  -          description: 'Description',
+  -          type: 'Type',
+  -        },
+  -        noRowsDescription: 'No schema defined',
+  ...
+  +    renderSchema: {
+  +      tableCell: {
+  +        name: 'Name',
+  +        title: 'Title',
+  +        description: 'Description',
+  +        type: 'Type',
+  +      },
+  +      undefined: 'No schema defined',
+  +    },
+  ```
+### Patch Changes
+- a47fd39: Removes instances of default React imports, a necessary update for the upcoming React 19 migration.
+  <https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html>
+- 407eba1: Tweaked template editor tooltip to mention HTTPS requirement.
+- Updated dependencies
+  - @backstage/frontend-plugin-api@0.10.1-next.1
+  - @backstage/integration-react@1.2.6-next.1
+  - @backstage/core-compat-api@0.4.1-next.2
+  - @backstage/core-components@0.17.1-next.1
+  - @backstage/core-plugin-api@1.10.6-next.0
+  - @backstage/plugin-permission-react@0.4.33-next.0
+  - @backstage/plugin-scaffolder-react@1.15.0-next.2
+  - @backstage/plugin-catalog-react@1.17.0-next.2
+  - @backstage/catalog-client@1.9.1
+  - @backstage/catalog-model@1.7.3
+  - @backstage/errors@1.2.7
+  - @backstage/integration@1.16.3-next.0
+  - @backstage/types@1.2.1
+  - @backstage/plugin-catalog-common@1.1.3
+  - @backstage/plugin-scaffolder-common@1.5.10
+## 1.30.0-next.1
+### Patch Changes
+- Updated dependencies
+  - @backstage/core-components@0.17.1-next.0
+  - @backstage/integration-react@1.2.6-next.0
+  - @backstage/integration@1.16.3-next.0
+  - @backstage/frontend-plugin-api@0.10.1-next.0
+  - @backstage/plugin-catalog-react@1.16.1-next.1
+  - @backstage/plugin-scaffolder-react@1.15.0-next.1
+  - @backstage/core-compat-api@0.4.1-next.1
+  - @backstage/catalog-client@1.9.1
+  - @backstage/catalog-model@1.7.3
+  - @backstage/core-plugin-api@1.10.5
+  - @backstage/errors@1.2.7
+  - @backstage/types@1.2.1
+  - @backstage/plugin-catalog-common@1.1.3
+  - @backstage/plugin-permission-react@0.4.32
+  - @backstage/plugin-scaffolder-common@1.5.10
 ## 1.30.0-next.0
 ### Minor Changes

package/dist/alpha/components/TemplateEditorPage/CustomFieldExplorer.esm.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { StreamLanguage } from '@codemirror/language';
 import { yaml as yaml$1 } from '@codemirror/legacy-modes/mode/yaml';
 import Button from '@material-ui/core/Button';
@@ -6,7 +7,7 @@ import CardContent from '@material-ui/core/CardContent';
 import CardHeader from '@material-ui/core/CardHeader';
 import { makeStyles } from '@material-ui/core/styles';
 import CodeMirror from '@uiw/react-codemirror';
-import React, { useState, useMemo, useCallback } from 'react';
+import { useState, useMemo, useCallback } from 'react';
 import yaml from 'yaml';
 import { Form } from '@backstage/plugin-scaffolder-react/alpha';
 import { TemplateEditorForm } from './TemplateEditorForm.esm.js';
@@ -103,94 +104,107 @@ const CustomFieldExplorer = ({
     },
     [setFieldFormState, setRefreshKey]
   );
-  return /* @__PURE__ */ React.createElement("main", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.controls }, /* @__PURE__ */ React.createElement(
-    Autocomplete,
-    {
-      id: "custom-fields-autocomplete",
-      value: selectedField,
-      options: fieldOptions,
-      getOptionLabel: (option) => option.name,
-      renderInput: (params) => /* @__PURE__ */ React.createElement(
-        TextField,
-        {
-          ...params,
-          "aria-label": t(
-            "templateEditorPage.customFieldExplorer.selectFieldLabel"
-          ),
-          placeholder: t(
-            "templateEditorPage.customFieldExplorer.selectFieldLabel"
-          ),
-          variant: "outlined",
-          InputProps: {
-            ...params.InputProps,
-            startAdornment: /* @__PURE__ */ React.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React.createElement(SearchIcon, null))
+  return /* @__PURE__ */ jsxs("main", { className: classes.root, children: [
+    /* @__PURE__ */ jsx("div", { className: classes.controls, children: /* @__PURE__ */ jsx(
+      Autocomplete,
+      {
+        id: "custom-fields-autocomplete",
+        value: selectedField,
+        options: fieldOptions,
+        getOptionLabel: (option) => option.name,
+        renderInput: (params) => /* @__PURE__ */ jsx(
+          TextField,
+          {
+            ...params,
+            "aria-label": t(
+              "templateEditorPage.customFieldExplorer.selectFieldLabel"
+            ),
+            placeholder: t(
+              "templateEditorPage.customFieldExplorer.selectFieldLabel"
+            ),
+            variant: "outlined",
+            InputProps: {
+              ...params.InputProps,
+              startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(SearchIcon, {}) })
+            }
           }
+        ),
+        onChange: (_event, option) => {
+          if (option) {
+            handleSelectionChange(option);
+          }
+        },
+        disableClearable: true,
+        fullWidth: true
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: classes.fieldForm, children: /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsx(
+        CardHeader,
+        {
+          title: t("templateEditorPage.customFieldExplorer.fieldForm.title")
         }
       ),
-      onChange: (_event, option) => {
-        if (option) {
-          handleSelectionChange(option);
+      /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(
+        Form,
+        {
+          showErrorList: false,
+          fields: { ...fieldComponents },
+          noHtml5Validate: true,
+          formData: fieldFormState,
+          formContext: { fieldFormState },
+          onSubmit: (e) => handleFieldConfigChange(e.formData),
+          validator,
+          schema: selectedField?.schema?.uiOptions || {},
+          experimental_defaultFormStateBehavior: {
+            allOf: "populateDefaults"
+          },
+          children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "contained",
+              color: "primary",
+              type: "submit",
+              disabled: !selectedField?.schema?.uiOptions,
+              children: t(
+                "templateEditorPage.customFieldExplorer.fieldForm.applyButtonTitle"
+              )
+            }
+          )
         }
-      },
-      disableClearable: true,
-      fullWidth: true
-    }
-  )), /* @__PURE__ */ React.createElement("div", { className: classes.fieldForm }, /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(
-    CardHeader,
-    {
-      title: t("templateEditorPage.customFieldExplorer.fieldForm.title")
-    }
-  ), /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(
-    Form,
-    {
-      showErrorList: false,
-      fields: { ...fieldComponents },
-      noHtml5Validate: true,
-      formData: fieldFormState,
-      formContext: { fieldFormState },
-      onSubmit: (e) => handleFieldConfigChange(e.formData),
-      validator,
-      schema: selectedField?.schema?.uiOptions || {},
-      experimental_defaultFormStateBehavior: {
-        allOf: "populateDefaults"
-      }
-    },
-    /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        variant: "contained",
-        color: "primary",
-        type: "submit",
-        disabled: !selectedField?.schema?.uiOptions
-      },
-      t(
-        "templateEditorPage.customFieldExplorer.fieldForm.applyButtonTitle"
+      ) })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: classes.preview, children: [
+      /* @__PURE__ */ jsxs(Card, { children: [
+        /* @__PURE__ */ jsx(
+          CardHeader,
+          {
+            title: t("templateEditorPage.customFieldExplorer.preview.title")
+          }
+        ),
+        /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(
+          CodeMirror,
+          {
+            readOnly: true,
+            theme: "dark",
+            height: "100%",
+            extensions: [StreamLanguage.define(yaml$1)],
+            value: sampleFieldTemplate
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsx(
+        TemplateEditorForm,
+        {
+          content: sampleFieldTemplate,
+          contentIsSpec: true,
+          fieldExtensions: customFieldExtensions,
+          setErrorText: () => null
+        },
+        refreshKey
       )
-    )
-  )))), /* @__PURE__ */ React.createElement("div", { className: classes.preview }, /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(
-    CardHeader,
-    {
-      title: t("templateEditorPage.customFieldExplorer.preview.title")
-    }
-  ), /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(
-    CodeMirror,
-    {
-      readOnly: true,
-      theme: "dark",
-      height: "100%",
-      extensions: [StreamLanguage.define(yaml$1)],
-      value: sampleFieldTemplate
-    }
-  ))), /* @__PURE__ */ React.createElement(
-    TemplateEditorForm,
-    {
-      key: refreshKey,
-      content: sampleFieldTemplate,
-      contentIsSpec: true,
-      fieldExtensions: customFieldExtensions,
-      setErrorText: () => null
-    }
-  )));
+    ] })
+  ] });
 };
 export { CustomFieldExplorer };

package/dist/alpha/components/TemplateEditorPage/CustomFieldExplorer.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CustomFieldExplorer.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/CustomFieldExplorer.tsx"],"sourcesContent":["/\n Copyright 2022 The Backstage Authors\n \n Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n /\nimport { StreamLanguage } from '@codemirror/language';\nimport { yaml as yamlSupport } from '@codemirror/legacy-modes/mode/yaml';\nimport Button from '@material-ui/core/Button';\nimport Card from '@material-ui/core/Card';\nimport CardContent from '@material-ui/core/CardContent';\nimport CardHeader from '@material-ui/core/CardHeader';\nimport { makeStyles } from '@material-ui/core/styles';\nimport CodeMirror from '@uiw/react-codemirror';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport yaml from 'yaml';\nimport { Form } from '@backstage/plugin-scaffolder-react/alpha';\nimport { TemplateEditorForm } from './TemplateEditorForm';\nimport validator from '@rjsf/validator-ajv8';\nimport { FieldExtensionOptions } from '@backstage/plugin-scaffolder-react';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\nimport InputAdornment from '@material-ui/core/InputAdornment';\nimport TextField from '@material-ui/core/TextField';\nimport SearchIcon from '@material-ui/icons/Search';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\n\n/* @public */\nexport type ScaffolderCustomFieldExplorerClassKey =\n \| 'root'\n \| 'controls'\n \| 'fieldForm'\n \| 'preview';\n\nconst useStyles = makeStyles(\n theme => ({\n root: {\n gridArea: 'pageContent',\n display: 'grid',\n gridGap: theme.spacing(2),\n gridTemplateAreas: `\n \"controls\"\n \"fieldForm\"\n \"preview\"\n `,\n [theme.breakpoints.up('md')]: {\n gridTemplateAreas: `\n \"controls controls\"\n \"fieldForm preview\"\n `,\n gridTemplateRows: 'auto 1fr',\n gridTemplateColumns: '1fr 1fr',\n },\n },\n controls: {\n gridArea: 'controls',\n display: 'flex',\n flexFlow: 'row nowrap',\n alignItems: 'center',\n },\n fieldForm: {\n gridArea: 'fieldForm',\n },\n preview: {\n gridArea: 'preview',\n display: 'grid',\n gridGap: theme.spacing(2),\n alignContent: 'start',\n },\n }),\n { name: 'ScaffolderCustomFieldExplorer' },\n);\n\nexport const CustomFieldExplorer = ({\n customFieldExtensions = [],\n}: {\n customFieldExtensions?: FieldExtensionOptions<any, any>[];\n}) => {\n const classes = useStyles();\n const { t } = useTranslationRef(scaffolderTranslationRef);\n const fieldOptions = customFieldExtensions.filter(field => !!field.schema);\n const [selectedField, setSelectedField] = useState(fieldOptions?.[0]);\n const [fieldFormState, setFieldFormState] = useState({});\n const [refreshKey, setRefreshKey] = useState(Date.now());\n const sampleFieldTemplate = useMemo(() => {\n if (!selectedField) {\n return '';\n }\n return yaml.stringify({\n parameters: [\n {\n title: `${selectedField.name} Example`,\n properties: {\n [selectedField.name]: {\n type: selectedField.schema?.returnValue?.type,\n 'ui:field': selectedField.name,\n 'ui:options': fieldFormState,\n },\n },\n },\n ],\n });\n }, [fieldFormState, selectedField]);\n\n const fieldComponents = useMemo(() => {\n return Object.fromEntries(\n customFieldExtensions.map(({ name, component }) => [name, component]),\n );\n }, [customFieldExtensions]);\n\n const handleSelectionChange = useCallback(\n (selection: FieldExtensionOptions) => {\n setSelectedField(selection);\n setFieldFormState({});\n },\n [setFieldFormState, setSelectedField],\n );\n\n const handleFieldConfigChange = useCallback(\n (state: {}) => {\n setFieldFormState(state);\n // Force TemplateEditorForm to re-render since some fields\n // may not be responsive to ui:option changes\n setRefreshKey(Date.now());\n },\n [setFieldFormState, setRefreshKey],\n );\n\n return (\n <main className={classes.root}>\n <div className={classes.controls}>\n <Autocomplete\n id=\"custom-fields-autocomplete\"\n value={selectedField}\n options={fieldOptions}\n getOptionLabel={option => option.name}\n renderInput={params => (\n <TextField\n {...params}\n aria-label={t(\n 'templateEditorPage.customFieldExplorer.selectFieldLabel',\n )}\n placeholder={t(\n 'templateEditorPage.customFieldExplorer.selectFieldLabel',\n )}\n variant=\"outlined\"\n InputProps={{\n ...params.InputProps,\n startAdornment: (\n <InputAdornment position=\"start\">\n <SearchIcon />\n </InputAdornment>\n ),\n }}\n />\n )}\n onChange={(_event, option) => {\n if (option) {\n handleSelectionChange(option);\n }\n }}\n disableClearable\n fullWidth\n />\n </div>\n <div className={classes.fieldForm}>\n <Card>\n <CardHeader\n title={t('templateEditorPage.customFieldExplorer.fieldForm.title')}\n />\n <CardContent>\n <Form\n showErrorList={false}\n fields={{ ...fieldComponents }}\n noHtml5Validate\n formData={fieldFormState}\n formContext={{ fieldFormState }}\n onSubmit={e => handleFieldConfigChange(e.formData)}\n validator={validator}\n schema={selectedField?.schema?.uiOptions \|\| {}}\n experimental_defaultFormStateBehavior={{\n allOf: 'populateDefaults',\n }}\n >\n <Button\n variant=\"contained\"\n color=\"primary\"\n type=\"submit\"\n disabled={!selectedField?.schema?.uiOptions}\n >\n {t(\n 'templateEditorPage.customFieldExplorer.fieldForm.applyButtonTitle',\n )}\n </Button>\n </Form>\n </CardContent>\n </Card>\n </div>\n <div className={classes.preview}>\n <Card>\n <CardHeader\n title={t('templateEditorPage.customFieldExplorer.preview.title')}\n />\n <CardContent>\n <CodeMirror\n readOnly\n theme=\"dark\"\n height=\"100%\"\n extensions={[StreamLanguage.define(yamlSupport)]}\n value={sampleFieldTemplate}\n />\n </CardContent>\n </Card>\n <TemplateEditorForm\n key={refreshKey}\n content={sampleFieldTemplate}\n contentIsSpec\n fieldExtensions={customFieldExtensions}\n setErrorText={() => null}\n />\n </div>\n </main>\n );\n};\n"],"names":["yamlSupport"],"mappings":"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"}
1	+ {"version":3,"file":"CustomFieldExplorer.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/CustomFieldExplorer.tsx"],"sourcesContent":["/\n Copyright 2022 The Backstage Authors\n \n Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n /\nimport { StreamLanguage } from '@codemirror/language';\nimport { yaml as yamlSupport } from '@codemirror/legacy-modes/mode/yaml';\nimport Button from '@material-ui/core/Button';\nimport Card from '@material-ui/core/Card';\nimport CardContent from '@material-ui/core/CardContent';\nimport CardHeader from '@material-ui/core/CardHeader';\nimport { makeStyles } from '@material-ui/core/styles';\nimport CodeMirror from '@uiw/react-codemirror';\nimport { useCallback, useMemo, useState } from 'react';\nimport yaml from 'yaml';\nimport { Form } from '@backstage/plugin-scaffolder-react/alpha';\nimport { TemplateEditorForm } from './TemplateEditorForm';\nimport validator from '@rjsf/validator-ajv8';\nimport { FieldExtensionOptions } from '@backstage/plugin-scaffolder-react';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\nimport InputAdornment from '@material-ui/core/InputAdornment';\nimport TextField from '@material-ui/core/TextField';\nimport SearchIcon from '@material-ui/icons/Search';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\n\n/* @public */\nexport type ScaffolderCustomFieldExplorerClassKey =\n \| 'root'\n \| 'controls'\n \| 'fieldForm'\n \| 'preview';\n\nconst useStyles = makeStyles(\n theme => ({\n root: {\n gridArea: 'pageContent',\n display: 'grid',\n gridGap: theme.spacing(2),\n gridTemplateAreas: `\n \"controls\"\n \"fieldForm\"\n \"preview\"\n `,\n [theme.breakpoints.up('md')]: {\n gridTemplateAreas: `\n \"controls controls\"\n \"fieldForm preview\"\n `,\n gridTemplateRows: 'auto 1fr',\n gridTemplateColumns: '1fr 1fr',\n },\n },\n controls: {\n gridArea: 'controls',\n display: 'flex',\n flexFlow: 'row nowrap',\n alignItems: 'center',\n },\n fieldForm: {\n gridArea: 'fieldForm',\n },\n preview: {\n gridArea: 'preview',\n display: 'grid',\n gridGap: theme.spacing(2),\n alignContent: 'start',\n },\n }),\n { name: 'ScaffolderCustomFieldExplorer' },\n);\n\nexport const CustomFieldExplorer = ({\n customFieldExtensions = [],\n}: {\n customFieldExtensions?: FieldExtensionOptions<any, any>[];\n}) => {\n const classes = useStyles();\n const { t } = useTranslationRef(scaffolderTranslationRef);\n const fieldOptions = customFieldExtensions.filter(field => !!field.schema);\n const [selectedField, setSelectedField] = useState(fieldOptions?.[0]);\n const [fieldFormState, setFieldFormState] = useState({});\n const [refreshKey, setRefreshKey] = useState(Date.now());\n const sampleFieldTemplate = useMemo(() => {\n if (!selectedField) {\n return '';\n }\n return yaml.stringify({\n parameters: [\n {\n title: `${selectedField.name} Example`,\n properties: {\n [selectedField.name]: {\n type: selectedField.schema?.returnValue?.type,\n 'ui:field': selectedField.name,\n 'ui:options': fieldFormState,\n },\n },\n },\n ],\n });\n }, [fieldFormState, selectedField]);\n\n const fieldComponents = useMemo(() => {\n return Object.fromEntries(\n customFieldExtensions.map(({ name, component }) => [name, component]),\n );\n }, [customFieldExtensions]);\n\n const handleSelectionChange = useCallback(\n (selection: FieldExtensionOptions) => {\n setSelectedField(selection);\n setFieldFormState({});\n },\n [setFieldFormState, setSelectedField],\n );\n\n const handleFieldConfigChange = useCallback(\n (state: {}) => {\n setFieldFormState(state);\n // Force TemplateEditorForm to re-render since some fields\n // may not be responsive to ui:option changes\n setRefreshKey(Date.now());\n },\n [setFieldFormState, setRefreshKey],\n );\n\n return (\n <main className={classes.root}>\n <div className={classes.controls}>\n <Autocomplete\n id=\"custom-fields-autocomplete\"\n value={selectedField}\n options={fieldOptions}\n getOptionLabel={option => option.name}\n renderInput={params => (\n <TextField\n {...params}\n aria-label={t(\n 'templateEditorPage.customFieldExplorer.selectFieldLabel',\n )}\n placeholder={t(\n 'templateEditorPage.customFieldExplorer.selectFieldLabel',\n )}\n variant=\"outlined\"\n InputProps={{\n ...params.InputProps,\n startAdornment: (\n <InputAdornment position=\"start\">\n <SearchIcon />\n </InputAdornment>\n ),\n }}\n />\n )}\n onChange={(_event, option) => {\n if (option) {\n handleSelectionChange(option);\n }\n }}\n disableClearable\n fullWidth\n />\n </div>\n <div className={classes.fieldForm}>\n <Card>\n <CardHeader\n title={t('templateEditorPage.customFieldExplorer.fieldForm.title')}\n />\n <CardContent>\n <Form\n showErrorList={false}\n fields={{ ...fieldComponents }}\n noHtml5Validate\n formData={fieldFormState}\n formContext={{ fieldFormState }}\n onSubmit={e => handleFieldConfigChange(e.formData)}\n validator={validator}\n schema={selectedField?.schema?.uiOptions \|\| {}}\n experimental_defaultFormStateBehavior={{\n allOf: 'populateDefaults',\n }}\n >\n <Button\n variant=\"contained\"\n color=\"primary\"\n type=\"submit\"\n disabled={!selectedField?.schema?.uiOptions}\n >\n {t(\n 'templateEditorPage.customFieldExplorer.fieldForm.applyButtonTitle',\n )}\n </Button>\n </Form>\n </CardContent>\n </Card>\n </div>\n <div className={classes.preview}>\n <Card>\n <CardHeader\n title={t('templateEditorPage.customFieldExplorer.preview.title')}\n />\n <CardContent>\n <CodeMirror\n readOnly\n theme=\"dark\"\n height=\"100%\"\n extensions={[StreamLanguage.define(yamlSupport)]}\n value={sampleFieldTemplate}\n />\n </CardContent>\n </Card>\n <TemplateEditorForm\n key={refreshKey}\n content={sampleFieldTemplate}\n contentIsSpec\n fieldExtensions={customFieldExtensions}\n setErrorText={() => null}\n />\n </div>\n </main>\n );\n};\n"],"names":["yamlSupport"],"mappings":"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"}

package/dist/alpha/components/TemplateEditorPage/CustomFieldPlaygroud.esm.js CHANGED Viewed

@@ -1,4 +1,5 @@
-import React, { useState, useMemo, useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useMemo, useCallback } from 'react';
 import yaml from 'yaml';
 import validator from '@rjsf/validator-ajv8';
 import CodeMirror from '@uiw/react-codemirror';
@@ -81,109 +82,125 @@ const CustomFieldPlaygroud = ({
     },
     [setFieldFormState, setRefreshKey]
   );
-  return /* @__PURE__ */ React.createElement("main", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.controls }, /* @__PURE__ */ React.createElement(
-    Autocomplete,
-    {
-      id: "custom-fields-autocomplete",
-      value: selectedField,
-      options: fieldOptions,
-      getOptionLabel: (option) => option.name,
-      renderInput: (params) => /* @__PURE__ */ React.createElement(
-        TextField,
-        {
-          ...params,
-          "aria-label": t(
-            "templateEditorPage.customFieldExplorer.selectFieldLabel"
-          ),
-          placeholder: t(
-            "templateEditorPage.customFieldExplorer.selectFieldLabel"
-          ),
-          variant: "outlined",
-          InputProps: {
-            ...params.InputProps,
-            startAdornment: /* @__PURE__ */ React.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React.createElement(SearchIcon, null))
+  return /* @__PURE__ */ jsxs("main", { className: classes.root, children: [
+    /* @__PURE__ */ jsx("div", { className: classes.controls, children: /* @__PURE__ */ jsx(
+      Autocomplete,
+      {
+        id: "custom-fields-autocomplete",
+        value: selectedField,
+        options: fieldOptions,
+        getOptionLabel: (option) => option.name,
+        renderInput: (params) => /* @__PURE__ */ jsx(
+          TextField,
+          {
+            ...params,
+            "aria-label": t(
+              "templateEditorPage.customFieldExplorer.selectFieldLabel"
+            ),
+            placeholder: t(
+              "templateEditorPage.customFieldExplorer.selectFieldLabel"
+            ),
+            variant: "outlined",
+            InputProps: {
+              ...params.InputProps,
+              startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(SearchIcon, {}) })
+            }
           }
-        }
-      ),
-      onChange: (_event, option) => {
-        if (option) {
-          handleSelectionChange(option);
-        }
-      },
-      disableClearable: true,
-      fullWidth: true
-    }
-  )), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Accordion, { defaultExpanded: true }, /* @__PURE__ */ React.createElement(
-    AccordionSummary,
-    {
-      expandIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, null),
-      "aria-controls": "panel-code-content",
-      id: "panel-code-header"
-    },
-    /* @__PURE__ */ React.createElement(Typography, { variant: "h6" }, t("templateEditorPage.customFieldExplorer.preview.title"))
-  ), /* @__PURE__ */ React.createElement(AccordionDetails, null, /* @__PURE__ */ React.createElement("div", { className: classes.code }, /* @__PURE__ */ React.createElement(
-    CodeMirror,
-    {
-      readOnly: true,
-      theme: "dark",
-      height: "100%",
-      width: "100%",
-      extensions: [StreamLanguage.define(yaml$1)],
-      value: sampleFieldTemplate
-    }
-  )))), /* @__PURE__ */ React.createElement(Accordion, { defaultExpanded: true }, /* @__PURE__ */ React.createElement(
-    AccordionSummary,
-    {
-      expandIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, null),
-      "aria-controls": "panel-preview-content",
-      id: "panel-preview-header"
-    },
-    /* @__PURE__ */ React.createElement(Typography, { variant: "h6" }, t("templateEditorPage.customFieldExplorer.fieldPreview.title"))
-  ), /* @__PURE__ */ React.createElement(AccordionDetails, null, /* @__PURE__ */ React.createElement(
-    TemplateEditorForm,
-    {
-      key: refreshKey,
-      content: sampleFieldTemplate,
-      contentIsSpec: true,
-      fieldExtensions,
-      setErrorText: () => null
-    }
-  ))), /* @__PURE__ */ React.createElement(Accordion, { defaultExpanded: true }, /* @__PURE__ */ React.createElement(
-    AccordionSummary,
-    {
-      expandIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, null),
-      "aria-controls": "panel-options-content",
-      id: "panel-options-header"
-    },
-    /* @__PURE__ */ React.createElement(Typography, { variant: "h6" }, t("templateEditorPage.customFieldExplorer.fieldForm.title"))
-  ), /* @__PURE__ */ React.createElement(AccordionDetails, null, /* @__PURE__ */ React.createElement(
-    Form,
-    {
-      showErrorList: false,
-      fields: { ...fieldComponents },
-      noHtml5Validate: true,
-      formData: fieldFormState,
-      formContext: { fieldFormState },
-      onSubmit: (e) => handleFieldConfigChange(e.formData),
-      validator,
-      schema: selectedField.schema?.uiOptions || {},
-      experimental_defaultFormStateBehavior: {
-        allOf: "populateDefaults"
+        ),
+        onChange: (_event, option) => {
+          if (option) {
+            handleSelectionChange(option);
+          }
+        },
+        disableClearable: true,
+        fullWidth: true
       }
-    },
-    /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        variant: "contained",
-        color: "primary",
-        type: "submit",
-        disabled: !selectedField.schema?.uiOptions
-      },
-      t(
-        "templateEditorPage.customFieldExplorer.fieldForm.applyButtonTitle"
-      )
-    )
-  )))));
+    ) }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs(Accordion, { defaultExpanded: true, children: [
+        /* @__PURE__ */ jsx(
+          AccordionSummary,
+          {
+            expandIcon: /* @__PURE__ */ jsx(ExpandMoreIcon, {}),
+            "aria-controls": "panel-code-content",
+            id: "panel-code-header",
+            children: /* @__PURE__ */ jsx(Typography, { variant: "h6", children: t("templateEditorPage.customFieldExplorer.preview.title") })
+          }
+        ),
+        /* @__PURE__ */ jsx(AccordionDetails, { children: /* @__PURE__ */ jsx("div", { className: classes.code, children: /* @__PURE__ */ jsx(
+          CodeMirror,
+          {
+            readOnly: true,
+            theme: "dark",
+            height: "100%",
+            width: "100%",
+            extensions: [StreamLanguage.define(yaml$1)],
+            value: sampleFieldTemplate
+          }
+        ) }) })
+      ] }),
+      /* @__PURE__ */ jsxs(Accordion, { defaultExpanded: true, children: [
+        /* @__PURE__ */ jsx(
+          AccordionSummary,
+          {
+            expandIcon: /* @__PURE__ */ jsx(ExpandMoreIcon, {}),
+            "aria-controls": "panel-preview-content",
+            id: "panel-preview-header",
+            children: /* @__PURE__ */ jsx(Typography, { variant: "h6", children: t("templateEditorPage.customFieldExplorer.fieldPreview.title") })
+          }
+        ),
+        /* @__PURE__ */ jsx(AccordionDetails, { children: /* @__PURE__ */ jsx(
+          TemplateEditorForm,
+          {
+            content: sampleFieldTemplate,
+            contentIsSpec: true,
+            fieldExtensions,
+            setErrorText: () => null
+          },
+          refreshKey
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs(Accordion, { defaultExpanded: true, children: [
+        /* @__PURE__ */ jsx(
+          AccordionSummary,
+          {
+            expandIcon: /* @__PURE__ */ jsx(ExpandMoreIcon, {}),
+            "aria-controls": "panel-options-content",
+            id: "panel-options-header",
+            children: /* @__PURE__ */ jsx(Typography, { variant: "h6", children: t("templateEditorPage.customFieldExplorer.fieldForm.title") })
+          }
+        ),
+        /* @__PURE__ */ jsx(AccordionDetails, { children: /* @__PURE__ */ jsx(
+          Form,
+          {
+            showErrorList: false,
+            fields: { ...fieldComponents },
+            noHtml5Validate: true,
+            formData: fieldFormState,
+            formContext: { fieldFormState },
+            onSubmit: (e) => handleFieldConfigChange(e.formData),
+            validator,
+            schema: selectedField.schema?.uiOptions || {},
+            experimental_defaultFormStateBehavior: {
+              allOf: "populateDefaults"
+            },
+            children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "contained",
+                color: "primary",
+                type: "submit",
+                disabled: !selectedField.schema?.uiOptions,
+                children: t(
+                  "templateEditorPage.customFieldExplorer.fieldForm.applyButtonTitle"
+                )
+              }
+            )
+          }
+        ) })
+      ] })
+    ] })
+  ] });
 };
 export { CustomFieldPlaygroud };

package/dist/alpha/components/TemplateEditorPage/CustomFieldPlaygroud.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CustomFieldPlaygroud.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/CustomFieldPlaygroud.tsx"],"sourcesContent":["/\n Copyright 2022 The Backstage Authors\n \n Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useCallback, useMemo, useState } from 'react';\nimport yaml from 'yaml';\nimport validator from '@rjsf/validator-ajv8';\nimport CodeMirror from '@uiw/react-codemirror';\nimport { StreamLanguage } from '@codemirror/language';\nimport { yaml as yamlSupport } from '@codemirror/legacy-modes/mode/yaml';\n\nimport { makeStyles } from '@material-ui/core/styles';\nimport Accordion from '@material-ui/core/Accordion';\nimport AccordionSummary from '@material-ui/core/AccordionSummary';\nimport AccordionDetails from '@material-ui/core/AccordionDetails';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport TextField from '@material-ui/core/TextField';\nimport Button from '@material-ui/core/Button';\nimport InputAdornment from '@material-ui/core/InputAdornment';\nimport Typography from '@material-ui/core/Typography';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport SearchIcon from '@material-ui/icons/Search';\n\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { Form } from '@backstage/plugin-scaffolder-react/alpha';\nimport { FieldExtensionOptions } from '@backstage/plugin-scaffolder-react';\n\nimport { scaffolderTranslationRef } from '../../../translation';\nimport { TemplateEditorForm } from './TemplateEditorForm';\n\nconst useStyles = makeStyles(\n theme => ({\n root: {\n gridArea: 'pageContent',\n display: 'grid',\n gridTemplateRows: 'auto 1fr',\n },\n controls: {\n marginBottom: theme.spacing(3),\n },\n code: {\n width: '100%',\n },\n }),\n { name: 'ScaffolderCustomFieldExtensionsPlaygroud' },\n);\n\nexport const CustomFieldPlaygroud = ({\n fieldExtensions = [],\n}: {\n fieldExtensions?: FieldExtensionOptions<any, any>[];\n}) => {\n const classes = useStyles();\n const { t } = useTranslationRef(scaffolderTranslationRef);\n const fieldOptions = fieldExtensions.filter(field => !!field.schema);\n const [refreshKey, setRefreshKey] = useState(Date.now());\n const [fieldFormState, setFieldFormState] = useState({});\n const [selectedField, setSelectedField] = useState(fieldOptions[0]);\n const sampleFieldTemplate = useMemo(\n () =>\n yaml.stringify({\n parameters: [\n {\n title: `${selectedField.name} Example`,\n properties: {\n [selectedField.name]: {\n type: selectedField.schema?.returnValue?.type,\n 'ui:field': selectedField.name,\n 'ui:options': fieldFormState,\n },\n },\n },\n ],\n }),\n [fieldFormState, selectedField],\n );\n\n const fieldComponents = useMemo(() => {\n return Object.fromEntries(\n fieldExtensions.map(({ name, component }) => [name, component]),\n );\n }, [fieldExtensions]);\n\n const handleSelectionChange = useCallback(\n (selection: FieldExtensionOptions) => {\n setSelectedField(selection);\n setFieldFormState({});\n },\n [setFieldFormState, setSelectedField],\n );\n\n const handleFieldConfigChange = useCallback(\n (state: {}) => {\n setFieldFormState(state);\n // Force TemplateEditorForm to re-render since some fields\n // may not be responsive to ui:option changes\n setRefreshKey(Date.now());\n },\n [setFieldFormState, setRefreshKey],\n );\n\n return (\n <main className={classes.root}>\n <div className={classes.controls}>\n <Autocomplete\n id=\"custom-fields-autocomplete\"\n value={selectedField}\n options={fieldOptions}\n getOptionLabel={option => option.name}\n renderInput={params => (\n <TextField\n {...params}\n aria-label={t(\n 'templateEditorPage.customFieldExplorer.selectFieldLabel',\n )}\n placeholder={t(\n 'templateEditorPage.customFieldExplorer.selectFieldLabel',\n )}\n variant=\"outlined\"\n InputProps={{\n ...params.InputProps,\n startAdornment: (\n <InputAdornment position=\"start\">\n <SearchIcon />\n </InputAdornment>\n ),\n }}\n />\n )}\n onChange={(_event, option) => {\n if (option) {\n handleSelectionChange(option);\n }\n }}\n disableClearable\n fullWidth\n />\n </div>\n <div>\n <Accordion defaultExpanded>\n <AccordionSummary\n expandIcon={<ExpandMoreIcon />}\n aria-controls=\"panel-code-content\"\n id=\"panel-code-header\"\n >\n <Typography variant=\"h6\">\n {t('templateEditorPage.customFieldExplorer.preview.title')}\n </Typography>\n </AccordionSummary>\n <AccordionDetails>\n <div className={classes.code}>\n <CodeMirror\n readOnly\n theme=\"dark\"\n height=\"100%\"\n width=\"100%\"\n extensions={[StreamLanguage.define(yamlSupport)]}\n value={sampleFieldTemplate}\n />\n </div>\n </AccordionDetails>\n </Accordion>\n <Accordion defaultExpanded>\n <AccordionSummary\n expandIcon={<ExpandMoreIcon />}\n aria-controls=\"panel-preview-content\"\n id=\"panel-preview-header\"\n >\n <Typography variant=\"h6\">\n {t('templateEditorPage.customFieldExplorer.fieldPreview.title')}\n </Typography>\n </AccordionSummary>\n <AccordionDetails>\n <TemplateEditorForm\n key={refreshKey}\n content={sampleFieldTemplate}\n contentIsSpec\n fieldExtensions={fieldExtensions}\n setErrorText={() => null}\n />\n </AccordionDetails>\n </Accordion>\n <Accordion defaultExpanded>\n <AccordionSummary\n expandIcon={<ExpandMoreIcon />}\n aria-controls=\"panel-options-content\"\n id=\"panel-options-header\"\n >\n <Typography variant=\"h6\">\n {t('templateEditorPage.customFieldExplorer.fieldForm.title')}\n </Typography>\n </AccordionSummary>\n <AccordionDetails>\n <Form\n showErrorList={false}\n fields={{ ...fieldComponents }}\n noHtml5Validate\n formData={fieldFormState}\n formContext={{ fieldFormState }}\n onSubmit={e => handleFieldConfigChange(e.formData)}\n validator={validator}\n schema={selectedField.schema?.uiOptions \|\| {}}\n experimental_defaultFormStateBehavior={{\n allOf: 'populateDefaults',\n }}\n >\n <Button\n variant=\"contained\"\n color=\"primary\"\n type=\"submit\"\n disabled={!selectedField.schema?.uiOptions}\n >\n {t(\n 'templateEditorPage.customFieldExplorer.fieldForm.applyButtonTitle',\n )}\n </Button>\n </Form>\n </AccordionDetails>\n </Accordion>\n </div>\n </main>\n );\n};\n"],"names":["yamlSupport"],"mappings":"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"}
1	+ {"version":3,"file":"CustomFieldPlaygroud.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/CustomFieldPlaygroud.tsx"],"sourcesContent":["/\n Copyright 2022 The Backstage Authors\n \n Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useCallback, useMemo, useState } from 'react';\nimport yaml from 'yaml';\nimport validator from '@rjsf/validator-ajv8';\nimport CodeMirror from '@uiw/react-codemirror';\nimport { StreamLanguage } from '@codemirror/language';\nimport { yaml as yamlSupport } from '@codemirror/legacy-modes/mode/yaml';\n\nimport { makeStyles } from '@material-ui/core/styles';\nimport Accordion from '@material-ui/core/Accordion';\nimport AccordionSummary from '@material-ui/core/AccordionSummary';\nimport AccordionDetails from '@material-ui/core/AccordionDetails';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport TextField from '@material-ui/core/TextField';\nimport Button from '@material-ui/core/Button';\nimport InputAdornment from '@material-ui/core/InputAdornment';\nimport Typography from '@material-ui/core/Typography';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport SearchIcon from '@material-ui/icons/Search';\n\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { Form } from '@backstage/plugin-scaffolder-react/alpha';\nimport { FieldExtensionOptions } from '@backstage/plugin-scaffolder-react';\n\nimport { scaffolderTranslationRef } from '../../../translation';\nimport { TemplateEditorForm } from './TemplateEditorForm';\n\nconst useStyles = makeStyles(\n theme => ({\n root: {\n gridArea: 'pageContent',\n display: 'grid',\n gridTemplateRows: 'auto 1fr',\n },\n controls: {\n marginBottom: theme.spacing(3),\n },\n code: {\n width: '100%',\n },\n }),\n { name: 'ScaffolderCustomFieldExtensionsPlaygroud' },\n);\n\nexport const CustomFieldPlaygroud = ({\n fieldExtensions = [],\n}: {\n fieldExtensions?: FieldExtensionOptions<any, any>[];\n}) => {\n const classes = useStyles();\n const { t } = useTranslationRef(scaffolderTranslationRef);\n const fieldOptions = fieldExtensions.filter(field => !!field.schema);\n const [refreshKey, setRefreshKey] = useState(Date.now());\n const [fieldFormState, setFieldFormState] = useState({});\n const [selectedField, setSelectedField] = useState(fieldOptions[0]);\n const sampleFieldTemplate = useMemo(\n () =>\n yaml.stringify({\n parameters: [\n {\n title: `${selectedField.name} Example`,\n properties: {\n [selectedField.name]: {\n type: selectedField.schema?.returnValue?.type,\n 'ui:field': selectedField.name,\n 'ui:options': fieldFormState,\n },\n },\n },\n ],\n }),\n [fieldFormState, selectedField],\n );\n\n const fieldComponents = useMemo(() => {\n return Object.fromEntries(\n fieldExtensions.map(({ name, component }) => [name, component]),\n );\n }, [fieldExtensions]);\n\n const handleSelectionChange = useCallback(\n (selection: FieldExtensionOptions) => {\n setSelectedField(selection);\n setFieldFormState({});\n },\n [setFieldFormState, setSelectedField],\n );\n\n const handleFieldConfigChange = useCallback(\n (state: {}) => {\n setFieldFormState(state);\n // Force TemplateEditorForm to re-render since some fields\n // may not be responsive to ui:option changes\n setRefreshKey(Date.now());\n },\n [setFieldFormState, setRefreshKey],\n );\n\n return (\n <main className={classes.root}>\n <div className={classes.controls}>\n <Autocomplete\n id=\"custom-fields-autocomplete\"\n value={selectedField}\n options={fieldOptions}\n getOptionLabel={option => option.name}\n renderInput={params => (\n <TextField\n {...params}\n aria-label={t(\n 'templateEditorPage.customFieldExplorer.selectFieldLabel',\n )}\n placeholder={t(\n 'templateEditorPage.customFieldExplorer.selectFieldLabel',\n )}\n variant=\"outlined\"\n InputProps={{\n ...params.InputProps,\n startAdornment: (\n <InputAdornment position=\"start\">\n <SearchIcon />\n </InputAdornment>\n ),\n }}\n />\n )}\n onChange={(_event, option) => {\n if (option) {\n handleSelectionChange(option);\n }\n }}\n disableClearable\n fullWidth\n />\n </div>\n <div>\n <Accordion defaultExpanded>\n <AccordionSummary\n expandIcon={<ExpandMoreIcon />}\n aria-controls=\"panel-code-content\"\n id=\"panel-code-header\"\n >\n <Typography variant=\"h6\">\n {t('templateEditorPage.customFieldExplorer.preview.title')}\n </Typography>\n </AccordionSummary>\n <AccordionDetails>\n <div className={classes.code}>\n <CodeMirror\n readOnly\n theme=\"dark\"\n height=\"100%\"\n width=\"100%\"\n extensions={[StreamLanguage.define(yamlSupport)]}\n value={sampleFieldTemplate}\n />\n </div>\n </AccordionDetails>\n </Accordion>\n <Accordion defaultExpanded>\n <AccordionSummary\n expandIcon={<ExpandMoreIcon />}\n aria-controls=\"panel-preview-content\"\n id=\"panel-preview-header\"\n >\n <Typography variant=\"h6\">\n {t('templateEditorPage.customFieldExplorer.fieldPreview.title')}\n </Typography>\n </AccordionSummary>\n <AccordionDetails>\n <TemplateEditorForm\n key={refreshKey}\n content={sampleFieldTemplate}\n contentIsSpec\n fieldExtensions={fieldExtensions}\n setErrorText={() => null}\n />\n </AccordionDetails>\n </Accordion>\n <Accordion defaultExpanded>\n <AccordionSummary\n expandIcon={<ExpandMoreIcon />}\n aria-controls=\"panel-options-content\"\n id=\"panel-options-header\"\n >\n <Typography variant=\"h6\">\n {t('templateEditorPage.customFieldExplorer.fieldForm.title')}\n </Typography>\n </AccordionSummary>\n <AccordionDetails>\n <Form\n showErrorList={false}\n fields={{ ...fieldComponents }}\n noHtml5Validate\n formData={fieldFormState}\n formContext={{ fieldFormState }}\n onSubmit={e => handleFieldConfigChange(e.formData)}\n validator={validator}\n schema={selectedField.schema?.uiOptions \|\| {}}\n experimental_defaultFormStateBehavior={{\n allOf: 'populateDefaults',\n }}\n >\n <Button\n variant=\"contained\"\n color=\"primary\"\n type=\"submit\"\n disabled={!selectedField.schema?.uiOptions}\n >\n {t(\n 'templateEditorPage.customFieldExplorer.fieldForm.applyButtonTitle',\n )}\n </Button>\n </Form>\n </AccordionDetails>\n </Accordion>\n </div>\n </main>\n );\n};\n"],"names":["yamlSupport"],"mappings":"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"}