@backstage/plugin-scaffolder 1.30.0-next.1 → 1.30.0

package/CHANGELOG.md

@@ -1,5 +1,109 @@
 # @backstage/plugin-scaffolder
 
+## 1.30.0
+
+### 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',
+  +    },
+  ```
+
+- 5890016: add api to retrieve template extensions info from scaffolder-backend
+
+### 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/plugin-catalog-react@1.17.0
+  - @backstage/frontend-plugin-api@0.10.1
+  - @backstage/integration-react@1.2.6
+  - @backstage/core-compat-api@0.4.1
+  - @backstage/core-components@0.17.1
+  - @backstage/core-plugin-api@1.10.6
+  - @backstage/plugin-permission-react@0.4.33
+  - @backstage/plugin-scaffolder-react@1.15.0
+  - @backstage/integration@1.16.3
+  - @backstage/catalog-client@1.9.1
+  - @backstage/catalog-model@1.7.3
+  - @backstage/errors@1.2.7
+  - @backstage/types@1.2.1
+  - @backstage/plugin-catalog-common@1.1.3
+  - @backstage/plugin-scaffolder-common@1.5.10
+
+## 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

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

@@ -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

@@ -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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"}
+{"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

@@ -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 };