@backstage/plugin-scaffolder 1.26.0-next.1 → 1.26.0-next.2

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

@@ -1,23 +1,17 @@
-import { useApi, alertApiRef } from '@backstage/core-plugin-api';
-import { catalogApiRef, humanizeEntityRef } from '@backstage/plugin-catalog-react';
-import LinearProgress from '@material-ui/core/LinearProgress';
-import Paper from '@material-ui/core/Paper';
-import FormControl from '@material-ui/core/FormControl';
-import Input from '@material-ui/core/Input';
-import Select from '@material-ui/core/Select';
-import Tooltip from '@material-ui/core/Tooltip';
-import IconButton from '@material-ui/core/IconButton';
-import MenuItem from '@material-ui/core/MenuItem';
-import { makeStyles } from '@material-ui/core/styles';
-import CloseIcon from '@material-ui/icons/Close';
+import yaml from 'yaml';
 import React, { useState, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
 import useAsync from 'react-use/esm/useAsync';
-import yaml from 'yaml';
+import { makeStyles } from '@material-ui/core/styles';
+import { useApi, alertApiRef, useRouteRef } from '@backstage/core-plugin-api';
+import { catalogApiRef, humanizeEntityRef } from '@backstage/plugin-catalog-react';
+import { editRouteRef } from '../../../routes.esm.js';
+import { TemplateEditorLayout, TemplateEditorLayoutToolbar, TemplateEditorLayoutFiles, TemplateEditorLayoutPreview } from './TemplateEditorLayout.esm.js';
 import { TemplateEditorToolbar } from './TemplateEditorToolbar.esm.js';
+import { TemplateEditorToolbarFileMenu } from './TemplateEditorToolbarFileMenu.esm.js';
+import { TemplateEditorToolbarTemplatesMenu } from './TemplateEditorToolbarTemplatesMenu.esm.js';
 import { TemplateEditorForm } from './TemplateEditorForm.esm.js';
 import { TemplateEditorTextArea } from './TemplateEditorTextArea.esm.js';
-import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
-import { scaffolderTranslationRef } from '../../../translation.esm.js';
 
 const EXAMPLE_TEMPLATE_PARAMS_YAML = `# Edit the template parameters below to see how they will render in the scaffolder form UI
 parameters:
@@ -64,36 +58,21 @@ const useStyles = makeStyles(
       gridArea: "pageContent",
       display: "grid",
       gridTemplateAreas: `
+      "toolbar"
+      "textArea"
+      "preview"
+    `,
+      [theme.breakpoints.up("md")]: {
+        gridTemplateAreas: `
       "toolbar toolbar"
       "textArea preview"
     `,
-      gridTemplateRows: "auto 1fr",
-      gridTemplateColumns: "1fr 1fr"
-    },
-    toolbar: {
-      gridArea: "toolbar"
-    },
-    textArea: {
-      gridArea: "textArea",
-      height: "100%"
-    },
-    preview: {
-      gridArea: "preview",
-      position: "relative",
-      borderLeft: `1px solid ${theme.palette.divider}`,
-      backgroundColor: theme.palette.background.default
-    },
-    scroll: {
-      position: "absolute",
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      padding: theme.spacing(1)
+        gridTemplateRows: "auto 1fr",
+        gridTemplateColumns: "1fr 1fr"
+      }
     },
-    formControl: {
-      minWidth: 120,
-      maxWidth: 300
+    files: {
+      gridArea: "textArea"
     }
   }),
   { name: "ScaffolderTemplateFormPreviewer" }
@@ -101,19 +80,22 @@ const useStyles = makeStyles(
 const TemplateFormPreviewer = ({
   defaultPreviewTemplate = EXAMPLE_TEMPLATE_PARAMS_YAML,
   customFieldExtensions = [],
-  onClose,
   layouts = [],
   formProps
 }) => {
   const classes = useStyles();
-  const { t } = useTranslationRef(scaffolderTranslationRef);
   const alertApi = useApi(alertApiRef);
   const catalogApi = useApi(catalogApiRef);
+  const navigate = useNavigate();
+  const editLink = useRouteRef(editRouteRef);
   const [errorText, setErrorText] = useState();
-  const [selectedTemplate, setSelectedTemplate] = useState(null);
+  const [selectedTemplate, setSelectedTemplate] = useState();
   const [templateOptions, setTemplateOptions] = useState([]);
   const [templateYaml, setTemplateYaml] = useState(defaultPreviewTemplate);
-  const { loading } = useAsync(
+  const handleCloseDirectory = useCallback(() => {
+    navigate(editLink());
+  }, [navigate, editLink]);
+  useAsync(
     () => catalogApi.getEntities({
       filter: { kind: "template" },
       fields: [
@@ -144,59 +126,40 @@ const TemplateFormPreviewer = ({
     // TODO(Rugvip): Afaik this should be Entity, but didn't want to make runtime changes while fixing types
     (selected) => {
       setSelectedTemplate(selected);
-      setTemplateYaml(yaml.stringify(selected.spec));
+      setTemplateYaml(yaml.stringify(selected.value.spec));
     },
-    [setTemplateYaml]
+    [setSelectedTemplate, setTemplateYaml]
   );
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, loading && /* @__PURE__ */ React.createElement(LinearProgress, null), /* @__PURE__ */ React.createElement(
-    Paper,
+  return /* @__PURE__ */ React.createElement(TemplateEditorLayout, { classes: { root: classes.root } }, /* @__PURE__ */ React.createElement(TemplateEditorLayoutToolbar, null, /* @__PURE__ */ React.createElement(TemplateEditorToolbar, { fieldExtensions: customFieldExtensions }, /* @__PURE__ */ React.createElement(
+    TemplateEditorToolbarFileMenu,
     {
-      className: classes.root,
-      component: "main",
-      variant: "outlined",
-      square: true
-    },
-    /* @__PURE__ */ React.createElement("div", { className: classes.toolbar }, /* @__PURE__ */ React.createElement(TemplateEditorToolbar, { fieldExtensions: customFieldExtensions }, /* @__PURE__ */ React.createElement(Tooltip, { title: "Close editor" }, /* @__PURE__ */ React.createElement(IconButton, { onClick: onClose }, /* @__PURE__ */ React.createElement(CloseIcon, null))), /* @__PURE__ */ React.createElement(FormControl, { className: classes.formControl }, /* @__PURE__ */ React.createElement(
-      Select,
-      {
-        displayEmpty: true,
-        value: selectedTemplate,
-        onChange: (e) => handleSelectChange(e.target.value),
-        input: /* @__PURE__ */ React.createElement(Input, null),
-        renderValue: (selected) => {
-          if (!selected) {
-            return t("templateEditorPage.templateFormPreviewer.title");
-          }
-          return selected.metadata.title;
-        },
-        inputProps: {
-          "aria-label": t(
-            "templateEditorPage.templateFormPreviewer.title"
-          )
-        }
-      },
-      templateOptions.map((option, index) => /* @__PURE__ */ React.createElement(MenuItem, { key: index, value: option.value }, option.label))
-    )))),
-    /* @__PURE__ */ React.createElement("div", { className: classes.textArea }, /* @__PURE__ */ React.createElement(
-      TemplateEditorTextArea,
-      {
-        content: templateYaml,
-        onUpdate: setTemplateYaml,
-        errorText
-      }
-    )),
-    /* @__PURE__ */ React.createElement("div", { className: classes.preview }, /* @__PURE__ */ React.createElement("div", { className: classes.scroll }, /* @__PURE__ */ React.createElement(
-      TemplateEditorForm,
-      {
-        content: templateYaml,
-        contentIsSpec: true,
-        fieldExtensions: customFieldExtensions,
-        setErrorText,
-        layouts,
-        formProps
-      }
-    )))
-  ));
+      onCloseDirectory: handleCloseDirectory
+    }
+  ), /* @__PURE__ */ React.createElement(
+    TemplateEditorToolbarTemplatesMenu,
+    {
+      options: templateOptions,
+      selectedOption: selectedTemplate,
+      onSelectOption: handleSelectChange
+    }
+  ))), /* @__PURE__ */ React.createElement(TemplateEditorLayoutFiles, { classes: { root: classes.files } }, /* @__PURE__ */ React.createElement(
+    TemplateEditorTextArea,
+    {
+      content: templateYaml,
+      onUpdate: setTemplateYaml,
+      errorText
+    }
+  )), /* @__PURE__ */ React.createElement(TemplateEditorLayoutPreview, null, /* @__PURE__ */ React.createElement(
+    TemplateEditorForm,
+    {
+      content: templateYaml,
+      contentIsSpec: true,
+      fieldExtensions: customFieldExtensions,
+      setErrorText,
+      layouts,
+      formProps
+    }
+  )));
 };
 
 export { TemplateFormPreviewer };

package/dist/alpha/components/TemplateEditorPage/TemplateFormPreviewer.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateFormPreviewer.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateFormPreviewer.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 { Entity } from '@backstage/catalog-model';\nimport { alertApiRef, useApi } from '@backstage/core-plugin-api';\nimport {\n  catalogApiRef,\n  humanizeEntityRef,\n} from '@backstage/plugin-catalog-react';\nimport LinearProgress from '@material-ui/core/LinearProgress';\nimport Paper from '@material-ui/core/Paper';\nimport FormControl from '@material-ui/core/FormControl';\nimport Input from '@material-ui/core/Input';\nimport Select from '@material-ui/core/Select';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport IconButton from '@material-ui/core/IconButton';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport { makeStyles } from '@material-ui/core/styles';\nimport CloseIcon from '@material-ui/icons/Close';\nimport React, { useCallback, useState } from 'react';\nimport useAsync from 'react-use/esm/useAsync';\nimport yaml from 'yaml';\nimport {\n  LayoutOptions,\n  FieldExtensionOptions,\n  FormProps,\n} from '@backstage/plugin-scaffolder-react';\nimport { TemplateEditorToolbar } from './TemplateEditorToolbar';\nimport { TemplateEditorForm } from './TemplateEditorForm';\nimport { TemplateEditorTextArea } from './TemplateEditorTextArea';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\n\nconst EXAMPLE_TEMPLATE_PARAMS_YAML = `# Edit the template parameters below to see how they will render in the scaffolder form UI\nparameters:\n  - title: Fill in some steps\n    required:\n      - name\n    properties:\n      name:\n        title: Name\n        type: string\n        description: Unique name of the component\n      owner:\n        title: Owner\n        type: string\n        description: Owner of the component\n        ui:field: OwnerPicker\n        ui:options:\n          catalogFilter:\n            kind: Group\n  - title: Choose a location\n    required:\n      - repoUrl\n    properties:\n      repoUrl:\n        title: Repository Location\n        type: string\n        ui:field: RepoUrlPicker\n        ui:options:\n          allowedHosts:\n            - github.com\nsteps:\n  - id: fetch-base\n    name: Fetch Base\n    action: fetch:template\n    input:\n      url: ./template\n      values:\n        name: \\${{parameters.name}}\n`;\n\ntype TemplateOption = {\n  label: string;\n  value: Entity;\n};\n\n/** @public */\nexport type ScaffolderTemplateFormPreviewerClassKey =\n  | 'root'\n  | 'controls'\n  | 'textArea'\n  | 'preview';\n\nconst useStyles = makeStyles(\n  theme => ({\n    root: {\n      height: '100%',\n      gridArea: 'pageContent',\n      display: 'grid',\n      gridTemplateAreas: `\n      \"toolbar toolbar\"\n      \"textArea preview\"\n    `,\n      gridTemplateRows: 'auto 1fr',\n      gridTemplateColumns: '1fr 1fr',\n    },\n    toolbar: {\n      gridArea: 'toolbar',\n    },\n    textArea: {\n      gridArea: 'textArea',\n      height: '100%',\n    },\n    preview: {\n      gridArea: 'preview',\n      position: 'relative',\n      borderLeft: `1px solid ${theme.palette.divider}`,\n      backgroundColor: theme.palette.background.default,\n    },\n    scroll: {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      right: 0,\n      bottom: 0,\n      padding: theme.spacing(1),\n    },\n    formControl: {\n      minWidth: 120,\n      maxWidth: 300,\n    },\n  }),\n  { name: 'ScaffolderTemplateFormPreviewer' },\n);\n\nexport const TemplateFormPreviewer = ({\n  defaultPreviewTemplate = EXAMPLE_TEMPLATE_PARAMS_YAML,\n  customFieldExtensions = [],\n  onClose,\n  layouts = [],\n  formProps,\n}: {\n  defaultPreviewTemplate?: string;\n  customFieldExtensions?: FieldExtensionOptions<any, any>[];\n  onClose?: () => void;\n  layouts?: LayoutOptions[];\n  formProps?: FormProps;\n}) => {\n  const classes = useStyles();\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n  const alertApi = useApi(alertApiRef);\n  const catalogApi = useApi(catalogApiRef);\n  const [errorText, setErrorText] = useState<string>();\n  const [selectedTemplate, setSelectedTemplate] =\n    useState<TemplateOption | null>(null);\n  const [templateOptions, setTemplateOptions] = useState<TemplateOption[]>([]);\n  const [templateYaml, setTemplateYaml] = useState(defaultPreviewTemplate);\n\n  const { loading } = useAsync(\n    () =>\n      catalogApi\n        .getEntities({\n          filter: { kind: 'template' },\n          fields: [\n            'kind',\n            'metadata.namespace',\n            'metadata.name',\n            'metadata.title',\n            'spec.parameters',\n            'spec.steps',\n            'spec.output',\n          ],\n        })\n        .then(({ items }) =>\n          setTemplateOptions(\n            items.map(template => ({\n              label:\n                template.metadata.title ??\n                humanizeEntityRef(template, { defaultKind: 'template' }),\n              value: template,\n            })),\n          ),\n        )\n        .catch(e =>\n          alertApi.post({\n            message: `Error loading exisiting templates: ${e.message}`,\n            severity: 'error',\n          }),\n        ),\n    [catalogApi],\n  );\n\n  const handleSelectChange = useCallback(\n    // TODO(Rugvip): Afaik this should be Entity, but didn't want to make runtime changes while fixing types\n    (selected: any) => {\n      setSelectedTemplate(selected);\n      setTemplateYaml(yaml.stringify(selected.spec));\n    },\n    [setTemplateYaml],\n  );\n\n  return (\n    <>\n      {loading && <LinearProgress />}\n      <Paper\n        className={classes.root}\n        component=\"main\"\n        variant=\"outlined\"\n        square\n      >\n        <div className={classes.toolbar}>\n          <TemplateEditorToolbar fieldExtensions={customFieldExtensions}>\n            <Tooltip title=\"Close editor\">\n              <IconButton onClick={onClose}>\n                <CloseIcon />\n              </IconButton>\n            </Tooltip>\n            <FormControl className={classes.formControl}>\n              <Select\n                displayEmpty\n                value={selectedTemplate}\n                onChange={e => handleSelectChange(e.target.value)}\n                input={<Input />}\n                renderValue={selected => {\n                  if (!selected) {\n                    return t('templateEditorPage.templateFormPreviewer.title');\n                  }\n                  return (selected as Entity).metadata.title;\n                }}\n                inputProps={{\n                  'aria-label': t(\n                    'templateEditorPage.templateFormPreviewer.title',\n                  ),\n                }}\n              >\n                {templateOptions.map((option, index) => (\n                  <MenuItem key={index} value={option.value as any}>\n                    {option.label}\n                  </MenuItem>\n                ))}\n              </Select>\n            </FormControl>\n          </TemplateEditorToolbar>\n        </div>\n        <div className={classes.textArea}>\n          <TemplateEditorTextArea\n            content={templateYaml}\n            onUpdate={setTemplateYaml}\n            errorText={errorText}\n          />\n        </div>\n        <div className={classes.preview}>\n          <div className={classes.scroll}>\n            <TemplateEditorForm\n              content={templateYaml}\n              contentIsSpec\n              fieldExtensions={customFieldExtensions}\n              setErrorText={setErrorText}\n              layouts={layouts}\n              formProps={formProps}\n            />\n          </div>\n        </div>\n      </Paper>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TemplateFormPreviewer.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateFormPreviewer.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 yaml from 'yaml';\nimport React, { useCallback, useState } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport useAsync from 'react-use/esm/useAsync';\n\nimport { makeStyles } from '@material-ui/core/styles';\n\nimport { alertApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';\nimport {\n  catalogApiRef,\n  humanizeEntityRef,\n} from '@backstage/plugin-catalog-react';\nimport {\n  LayoutOptions,\n  FieldExtensionOptions,\n  FormProps,\n} from '@backstage/plugin-scaffolder-react';\n\nimport { editRouteRef } from '../../../routes';\n\nimport {\n  TemplateEditorLayout,\n  TemplateEditorLayoutToolbar,\n  TemplateEditorLayoutFiles,\n  TemplateEditorLayoutPreview,\n} from './TemplateEditorLayout';\nimport { TemplateEditorToolbar } from './TemplateEditorToolbar';\nimport { TemplateEditorToolbarFileMenu } from './TemplateEditorToolbarFileMenu';\nimport {\n  TemplateOption,\n  TemplateEditorToolbarTemplatesMenu,\n} from './TemplateEditorToolbarTemplatesMenu';\nimport { TemplateEditorForm } from './TemplateEditorForm';\nimport { TemplateEditorTextArea } from './TemplateEditorTextArea';\n\nconst EXAMPLE_TEMPLATE_PARAMS_YAML = `# Edit the template parameters below to see how they will render in the scaffolder form UI\nparameters:\n  - title: Fill in some steps\n    required:\n      - name\n    properties:\n      name:\n        title: Name\n        type: string\n        description: Unique name of the component\n      owner:\n        title: Owner\n        type: string\n        description: Owner of the component\n        ui:field: OwnerPicker\n        ui:options:\n          catalogFilter:\n            kind: Group\n  - title: Choose a location\n    required:\n      - repoUrl\n    properties:\n      repoUrl:\n        title: Repository Location\n        type: string\n        ui:field: RepoUrlPicker\n        ui:options:\n          allowedHosts:\n            - github.com\nsteps:\n  - id: fetch-base\n    name: Fetch Base\n    action: fetch:template\n    input:\n      url: ./template\n      values:\n        name: \\${{parameters.name}}\n`;\n\n/** @public */\nexport type ScaffolderTemplateFormPreviewerClassKey =\n  | 'root'\n  | 'toolbar'\n  | 'controls'\n  | 'textArea'\n  | 'preview';\n\nconst useStyles = makeStyles(\n  theme => ({\n    root: {\n      height: '100%',\n      gridArea: 'pageContent',\n      display: 'grid',\n      gridTemplateAreas: `\n      \"toolbar\"\n      \"textArea\"\n      \"preview\"\n    `,\n      [theme.breakpoints.up('md')]: {\n        gridTemplateAreas: `\n      \"toolbar toolbar\"\n      \"textArea preview\"\n    `,\n        gridTemplateRows: 'auto 1fr',\n        gridTemplateColumns: '1fr 1fr',\n      },\n    },\n    files: {\n      gridArea: 'textArea',\n    },\n  }),\n  { name: 'ScaffolderTemplateFormPreviewer' },\n);\n\nexport const TemplateFormPreviewer = ({\n  defaultPreviewTemplate = EXAMPLE_TEMPLATE_PARAMS_YAML,\n  customFieldExtensions = [],\n  layouts = [],\n  formProps,\n}: {\n  defaultPreviewTemplate?: string;\n  customFieldExtensions?: FieldExtensionOptions<any, any>[];\n  onClose?: () => void;\n  layouts?: LayoutOptions[];\n  formProps?: FormProps;\n}) => {\n  const classes = useStyles();\n  const alertApi = useApi(alertApiRef);\n  const catalogApi = useApi(catalogApiRef);\n  const navigate = useNavigate();\n  const editLink = useRouteRef(editRouteRef);\n\n  const [errorText, setErrorText] = useState<string>();\n  const [selectedTemplate, setSelectedTemplate] = useState<TemplateOption>();\n  const [templateOptions, setTemplateOptions] = useState<TemplateOption[]>([]);\n  const [templateYaml, setTemplateYaml] = useState(defaultPreviewTemplate);\n\n  const handleCloseDirectory = useCallback(() => {\n    navigate(editLink());\n  }, [navigate, editLink]);\n\n  useAsync(\n    () =>\n      catalogApi\n        .getEntities({\n          filter: { kind: 'template' },\n          fields: [\n            'kind',\n            'metadata.namespace',\n            'metadata.name',\n            'metadata.title',\n            'spec.parameters',\n            'spec.steps',\n            'spec.output',\n          ],\n        })\n        .then(({ items }) =>\n          setTemplateOptions(\n            items.map(template => ({\n              label:\n                template.metadata.title ??\n                humanizeEntityRef(template, { defaultKind: 'template' }),\n              value: template,\n            })),\n          ),\n        )\n        .catch(e =>\n          alertApi.post({\n            message: `Error loading exisiting templates: ${e.message}`,\n            severity: 'error',\n          }),\n        ),\n    [catalogApi],\n  );\n\n  const handleSelectChange = useCallback(\n    // TODO(Rugvip): Afaik this should be Entity, but didn't want to make runtime changes while fixing types\n    (selected: TemplateOption) => {\n      setSelectedTemplate(selected);\n      setTemplateYaml(yaml.stringify(selected.value.spec));\n    },\n    [setSelectedTemplate, setTemplateYaml],\n  );\n\n  return (\n    <TemplateEditorLayout classes={{ root: classes.root }}>\n      <TemplateEditorLayoutToolbar>\n        <TemplateEditorToolbar fieldExtensions={customFieldExtensions}>\n          <TemplateEditorToolbarFileMenu\n            onCloseDirectory={handleCloseDirectory}\n          />\n          <TemplateEditorToolbarTemplatesMenu\n            options={templateOptions}\n            selectedOption={selectedTemplate}\n            onSelectOption={handleSelectChange}\n          />\n        </TemplateEditorToolbar>\n      </TemplateEditorLayoutToolbar>\n      <TemplateEditorLayoutFiles classes={{ root: classes.files }}>\n        <TemplateEditorTextArea\n          content={templateYaml}\n          onUpdate={setTemplateYaml}\n          errorText={errorText}\n        />\n      </TemplateEditorLayoutFiles>\n      <TemplateEditorLayoutPreview>\n        <TemplateEditorForm\n          content={templateYaml}\n          contentIsSpec\n          fieldExtensions={customFieldExtensions}\n          setErrorText={setErrorText}\n          layouts={layouts}\n          formProps={formProps}\n        />\n      </TemplateEditorLayoutPreview>\n    </TemplateEditorLayout>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,54 @@
+import React, { useCallback } from 'react';
+import { Page, Header, Content } from '@backstage/core-components';
+import { TemplateEditorIntro } from './TemplateEditorIntro.esm.js';
+import { useNavigate } from 'react-router-dom';
+import { useRouteRef } from '@backstage/core-plugin-api';
+import { rootRouteRef, editorRouteRef, templateFormRouteRef, customFieldsRouteRef } from '../../../routes.esm.js';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { scaffolderTranslationRef } from '../../../translation.esm.js';
+import { useTemplateDirectory } from './useTemplateDirectory.esm.js';
+
+function TemplateIntroPage() {
+  const navigate = useNavigate();
+  const createLink = useRouteRef(rootRouteRef);
+  const editorLink = useRouteRef(editorRouteRef);
+  const templateFormLink = useRouteRef(templateFormRouteRef);
+  const customFieldsLink = useRouteRef(customFieldsRouteRef);
+  const { t } = useTranslationRef(scaffolderTranslationRef);
+  const { openDirectory, createDirectory } = useTemplateDirectory();
+  const handleSelect = useCallback(
+    (option) => {
+      if (option === "local") {
+        openDirectory().then(() => navigate(editorLink())).catch(() => {
+        });
+      } else if (option === "create-template") {
+        createDirectory().then(() => navigate(editorLink())).catch(() => {
+        });
+      } else if (option === "form") {
+        navigate(templateFormLink());
+      } else if (option === "field-explorer") {
+        navigate(customFieldsLink());
+      }
+    },
+    [
+      openDirectory,
+      createDirectory,
+      navigate,
+      editorLink,
+      templateFormLink,
+      customFieldsLink
+    ]
+  );
+  return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(
+    Header,
+    {
+      title: t("templateIntroPage.title"),
+      type: "Scaffolder",
+      typeLink: createLink(),
+      subtitle: t("templateIntroPage.subtitle")
+    }
+  ), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(TemplateEditorIntro, { onSelect: handleSelect })));
+}
+
+export { TemplateIntroPage };
+//# sourceMappingURL=TemplateIntroPage.esm.js.map

package/dist/alpha/components/TemplateEditorPage/TemplateIntroPage.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateIntroPage.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateIntroPage.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 React, { useCallback } from 'react';\nimport { Content, Header, Page } from '@backstage/core-components';\n\nimport { TemplateEditorIntro } from './TemplateEditorIntro';\nimport { useNavigate } from 'react-router-dom';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport {\n  rootRouteRef,\n  editorRouteRef,\n  templateFormRouteRef,\n  customFieldsRouteRef,\n} from '../../../routes';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\nimport { useTemplateDirectory } from './useTemplateDirectory';\n\nexport function TemplateIntroPage() {\n  const navigate = useNavigate();\n  const createLink = useRouteRef(rootRouteRef);\n  const editorLink = useRouteRef(editorRouteRef);\n  const templateFormLink = useRouteRef(templateFormRouteRef);\n  const customFieldsLink = useRouteRef(customFieldsRouteRef);\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n  const { openDirectory, createDirectory } = useTemplateDirectory();\n\n  const handleSelect = useCallback(\n    (option: 'create-template' | 'local' | 'form' | 'field-explorer') => {\n      if (option === 'local') {\n        openDirectory()\n          .then(() => navigate(editorLink()))\n          .catch(() => {});\n      } else if (option === 'create-template') {\n        createDirectory()\n          .then(() => navigate(editorLink()))\n          .catch(() => {});\n      } else if (option === 'form') {\n        navigate(templateFormLink());\n      } else if (option === 'field-explorer') {\n        navigate(customFieldsLink());\n      }\n    },\n    [\n      openDirectory,\n      createDirectory,\n      navigate,\n      editorLink,\n      templateFormLink,\n      customFieldsLink,\n    ],\n  );\n\n  return (\n    <Page themeId=\"home\">\n      <Header\n        title={t('templateIntroPage.title')}\n        type=\"Scaffolder\"\n        typeLink={createLink()}\n        subtitle={t('templateIntroPage.subtitle')}\n      />\n      <Content>\n        <TemplateEditorIntro onSelect={handleSelect} />\n      </Content>\n    </Page>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;AA+BO,SAAS,iBAAoB,GAAA;AAClC,EAAA,MAAM,WAAW,WAAY,EAAA,CAAA;AAC7B,EAAM,MAAA,UAAA,GAAa,YAAY,YAAY,CAAA,CAAA;AAC3C,EAAM,MAAA,UAAA,GAAa,YAAY,cAAc,CAAA,CAAA;AAC7C,EAAM,MAAA,gBAAA,GAAmB,YAAY,oBAAoB,CAAA,CAAA;AACzD,EAAM,MAAA,gBAAA,GAAmB,YAAY,oBAAoB,CAAA,CAAA;AACzD,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,wBAAwB,CAAA,CAAA;AACxD,EAAA,MAAM,EAAE,aAAA,EAAe,eAAgB,EAAA,GAAI,oBAAqB,EAAA,CAAA;AAEhE,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,MAAoE,KAAA;AACnE,MAAA,IAAI,WAAW,OAAS,EAAA;AACtB,QAAc,aAAA,EAAA,CACX,KAAK,MAAM,QAAA,CAAS,YAAY,CAAC,CACjC,CAAA,KAAA,CAAM,MAAM;AAAA,SAAE,CAAA,CAAA;AAAA,OACnB,MAAA,IAAW,WAAW,iBAAmB,EAAA;AACvC,QAAgB,eAAA,EAAA,CACb,KAAK,MAAM,QAAA,CAAS,YAAY,CAAC,CACjC,CAAA,KAAA,CAAM,MAAM;AAAA,SAAE,CAAA,CAAA;AAAA,OACnB,MAAA,IAAW,WAAW,MAAQ,EAAA;AAC5B,QAAA,QAAA,CAAS,kBAAkB,CAAA,CAAA;AAAA,OAC7B,MAAA,IAAW,WAAW,gBAAkB,EAAA;AACtC,QAAA,QAAA,CAAS,kBAAkB,CAAA,CAAA;AAAA,OAC7B;AAAA,KACF;AAAA,IACA;AAAA,MACE,aAAA;AAAA,MACA,eAAA;AAAA,MACA,QAAA;AAAA,MACA,UAAA;AAAA,MACA,gBAAA;AAAA,MACA,gBAAA;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,OAAA,EAAQ,MACZ,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,yBAAyB,CAAA;AAAA,MAClC,IAAK,EAAA,YAAA;AAAA,MACL,UAAU,UAAW,EAAA;AAAA,MACrB,QAAA,EAAU,EAAE,4BAA4B,CAAA;AAAA,KAAA;AAAA,GAC1C,sCACC,OACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,uBAAoB,QAAU,EAAA,YAAA,EAAc,CAC/C,CACF,CAAA,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,33 @@
+import { useCallback } from 'react';
+import useAsyncRetry from 'react-use/esm/useAsyncRetry';
+import { createExampleTemplate } from '../../../lib/filesystem/createExampleTemplate.esm.js';
+import { WebFileSystemStore } from '../../../lib/filesystem/WebFileSystemStore.esm.js';
+import { WebFileSystemAccess } from '../../../lib/filesystem/WebFileSystemAccess.esm.js';
+
+function useTemplateDirectory() {
+  const { value, loading, error, retry } = useAsyncRetry(async () => {
+    const directory = await WebFileSystemStore.getDirectory();
+    if (!directory) return void 0;
+    return WebFileSystemAccess.fromHandle(directory);
+  }, []);
+  const openDirectory = useCallback(() => {
+    return WebFileSystemAccess.requestDirectoryAccess().then(WebFileSystemStore.setDirectory).then(retry);
+  }, [retry]);
+  const createDirectory = useCallback(() => {
+    return WebFileSystemAccess.requestDirectoryAccess().then(createExampleTemplate).then(WebFileSystemStore.setDirectory).then(retry);
+  }, [retry]);
+  const closeDirectory = useCallback(() => {
+    return WebFileSystemStore.setDirectory(void 0).then(retry);
+  }, [retry]);
+  return {
+    directory: value,
+    loading,
+    error,
+    openDirectory,
+    createDirectory,
+    closeDirectory
+  };
+}
+
+export { useTemplateDirectory };
+//# sourceMappingURL=useTemplateDirectory.esm.js.map

package/dist/alpha/components/TemplateEditorPage/useTemplateDirectory.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTemplateDirectory.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/useTemplateDirectory.ts"],"sourcesContent":["/*\n * Copyright 2024 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 } from 'react';\nimport useAsyncRetry from 'react-use/esm/useAsyncRetry';\n\nimport {\n  WebFileSystemStore,\n  WebFileSystemAccess,\n  WebDirectoryAccess,\n  createExampleTemplate,\n} from '../../../lib/filesystem';\n\nexport function useTemplateDirectory(): {\n  directory?: WebDirectoryAccess;\n  loading: boolean;\n  error?: Error;\n  openDirectory: () => Promise<void>;\n  createDirectory: () => Promise<void>;\n  closeDirectory: () => Promise<void>;\n} {\n  const { value, loading, error, retry } = useAsyncRetry(async () => {\n    const directory = await WebFileSystemStore.getDirectory();\n    if (!directory) return undefined;\n    return WebFileSystemAccess.fromHandle(directory);\n  }, []);\n\n  const openDirectory = useCallback(() => {\n    return WebFileSystemAccess.requestDirectoryAccess()\n      .then(WebFileSystemStore.setDirectory)\n      .then(retry);\n  }, [retry]);\n\n  const createDirectory = useCallback(() => {\n    return WebFileSystemAccess.requestDirectoryAccess()\n      .then(createExampleTemplate)\n      .then(WebFileSystemStore.setDirectory)\n      .then(retry);\n  }, [retry]);\n\n  const closeDirectory = useCallback(() => {\n    return WebFileSystemStore.setDirectory(undefined).then(retry);\n  }, [retry]);\n\n  return {\n    directory: value,\n    loading,\n    error,\n    openDirectory,\n    createDirectory,\n    closeDirectory,\n  };\n}\n"],"names":[],"mappings":";;;;;;AA0BO,SAAS,oBAOd,GAAA;AACA,EAAA,MAAM,EAAE,KAAO,EAAA,OAAA,EAAS,OAAO,KAAM,EAAA,GAAI,cAAc,YAAY;AACjE,IAAM,MAAA,SAAA,GAAY,MAAM,kBAAA,CAAmB,YAAa,EAAA,CAAA;AACxD,IAAI,IAAA,CAAC,WAAkB,OAAA,KAAA,CAAA,CAAA;AACvB,IAAO,OAAA,mBAAA,CAAoB,WAAW,SAAS,CAAA,CAAA;AAAA,GACjD,EAAG,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,aAAA,GAAgB,YAAY,MAAM;AACtC,IAAO,OAAA,mBAAA,CAAoB,wBACxB,CAAA,IAAA,CAAK,mBAAmB,YAAY,CAAA,CACpC,KAAK,KAAK,CAAA,CAAA;AAAA,GACf,EAAG,CAAC,KAAK,CAAC,CAAA,CAAA;AAEV,EAAM,MAAA,eAAA,GAAkB,YAAY,MAAM;AACxC,IAAO,OAAA,mBAAA,CAAoB,sBAAuB,EAAA,CAC/C,IAAK,CAAA,qBAAqB,CAC1B,CAAA,IAAA,CAAK,kBAAmB,CAAA,YAAY,CACpC,CAAA,IAAA,CAAK,KAAK,CAAA,CAAA;AAAA,GACf,EAAG,CAAC,KAAK,CAAC,CAAA,CAAA;AAEV,EAAM,MAAA,cAAA,GAAiB,YAAY,MAAM;AACvC,IAAA,OAAO,kBAAmB,CAAA,YAAA,CAAa,KAAS,CAAA,CAAA,CAAE,KAAK,KAAK,CAAA,CAAA;AAAA,GAC9D,EAAG,CAAC,KAAK,CAAC,CAAA,CAAA;AAEV,EAAO,OAAA;AAAA,IACL,SAAW,EAAA,KAAA;AAAA,IACX,OAAA;AAAA,IACA,KAAA;AAAA,IACA,aAAA;AAAA,IACA,eAAA;AAAA,IACA,cAAA;AAAA,GACF,CAAA;AACF;;;;"}

package/dist/alpha.d.ts

@@ -12,10 +12,10 @@ import * as _backstage_frontend_plugin_api from '@backstage/frontend-plugin-api'
 type ScaffolderCustomFieldExplorerClassKey = 'root' | 'controls' | 'fieldForm' | 'preview';
 
 /** @public */
-type ScaffolderTemplateEditorClassKey = 'root' | 'browser' | 'editor' | 'preview' | 'results';
+type ScaffolderTemplateEditorClassKey = 'root' | 'toolbar' | 'browser' | 'editor' | 'preview' | 'results';
 
 /** @public */
-type ScaffolderTemplateFormPreviewerClassKey = 'root' | 'controls' | 'textArea' | 'preview';
+type ScaffolderTemplateFormPreviewerClassKey = 'root' | 'toolbar' | 'controls' | 'textArea' | 'preview';
 
 /**
  * @alpha
@@ -117,6 +117,7 @@ declare const scaffolderTranslationRef: _backstage_core_plugin_api_alpha.Transla
     readonly "actionsPage.content.tableCell.name": "Name";
     readonly "actionsPage.content.tableCell.title": "Title";
     readonly "actionsPage.content.tableCell.description": "Description";
+    readonly "actionsPage.content.searchFieldPlaceholder": "Search for an action";
     readonly "actionsPage.content.noRowsDescription": "No schema defined";
     readonly "actionsPage.title": "Installed actions";
     readonly "actionsPage.action.input": "Input";
@@ -156,9 +157,13 @@ declare const scaffolderTranslationRef: _backstage_core_plugin_api_alpha.Transla
     readonly "ongoingTask.showLogsButtonTitle": "Show Logs";
     readonly "templateEditorForm.stepper.emptyText": "There are no spec parameters in the template to preview.";
     readonly "templateTypePicker.title": "Categories";
-    readonly "templateFormPage.title": "Template Form Playground";
-    readonly "templateFormPage.subtitle": "Edit, preview, and try out templates and template forms";
-    readonly "templateEditorPage.title": "Manage Templates";
+    readonly "templateIntroPage.title": "Manage Templates";
+    readonly "templateIntroPage.subtitle": "Edit, preview, and try out templates, forms, and custom fields";
+    readonly "templateFormPage.title": "Template Editor";
+    readonly "templateFormPage.subtitle": "Edit, preview, and try out templates forms";
+    readonly "templateCustomFieldPage.title": "Custom Field Explorer";
+    readonly "templateCustomFieldPage.subtitle": "Edit, preview, and try out custom fields";
+    readonly "templateEditorPage.title": "Template Editor";
     readonly "templateEditorPage.subtitle": "Edit, preview, and try out templates and template forms";
     readonly "templateEditorPage.dryRunResults.title": "Dry-run results";
     readonly "templateEditorPage.dryRunResultsList.title": "Result {{resultId}}";
@@ -184,12 +189,13 @@ declare const scaffolderTranslationRef: _backstage_core_plugin_api_alpha.Transla
     readonly "templateEditorPage.templateEditorIntro.createLocal.title": "Create New Template";
     readonly "templateEditorPage.templateEditorIntro.createLocal.description": "Create a local template directory, allowing you to both edit and try executing your own template.";
     readonly "templateEditorPage.templateEditorIntro.createLocal.unsupportedTooltip": "Only supported in some Chromium-based browsers";
-    readonly "templateEditorPage.templateEditorIntro.formEditor.title": "Template playground";
+    readonly "templateEditorPage.templateEditorIntro.formEditor.title": "Template Form Playground";
     readonly "templateEditorPage.templateEditorIntro.formEditor.description": "Preview and edit a template form, either using a sample template or by loading a template from the catalog.";
     readonly "templateEditorPage.templateEditorIntro.fieldExplorer.title": "Custom Field Explorer";
     readonly "templateEditorPage.templateEditorIntro.fieldExplorer.description": "View and play around with available installed custom field extensions.";
     readonly "templateEditorPage.templateEditorTextArea.saveIconTooltip": "Save file";
     readonly "templateEditorPage.templateEditorTextArea.refreshIconTooltip": "Reload file";
+    readonly "templateEditorPage.templateEditorTextArea.emptyStateParagraph": "Please select an action on the file menu.";
     readonly "templateEditorPage.templateFormPreviewer.title": "Load Existing Template";
     readonly "templateListPage.title": "Create a new component";
     readonly "templateListPage.subtitle": "Create new software components using standard templates in your organization";
@@ -203,6 +209,19 @@ declare const scaffolderTranslationRef: _backstage_core_plugin_api_alpha.Transla
     readonly "templateWizardPage.subtitle": "Create new software components using standard templates in your organization";
     readonly "templateWizardPage.pageTitle": "Create a new component";
     readonly "templateWizardPage.pageContextMenu.editConfigurationTitle": "Edit Configuration";
+    readonly "templateEditorToolbar.customFieldExplorerTooltip": "Custom Fields Explorer";
+    readonly "templateEditorToolbar.installedActionsDocumentationTooltip": "Installed Actions Documentation";
+    readonly "templateEditorToolbar.addToCatalogButton": "Publish";
+    readonly "templateEditorToolbar.addToCatalogDialogTitle": "Publish changes";
+    readonly "templateEditorToolbar.addToCatalogDialogContent.stepsIntroduction": "Follow the instructions below to create or update a template:";
+    readonly "templateEditorToolbar.addToCatalogDialogContent.stepsListItems": "Save the template files in a local directory\nCreate a pull request to a new or existing git repository\nIf the template already exists, the changes will be reflected in the software catalog once the pull request gets merged\nBut if you are creating a new template, follow the documentation linked below to register the new template repository in software catalog";
+    readonly "templateEditorToolbar.addToCatalogDialogActions.documentationUrl": "https://backstage.io/docs/features/software-templates/adding-templates/";
+    readonly "templateEditorToolbar.addToCatalogDialogActions.documentationButton": "Go to the documentation";
+    readonly "templateEditorToolbarFileMenu.button": "File";
+    readonly "templateEditorToolbarFileMenu.options.openDirectory": "Open template directory";
+    readonly "templateEditorToolbarFileMenu.options.createDirectory": "Create template directory";
+    readonly "templateEditorToolbarFileMenu.options.closeEditor": "Close template editor";
+    readonly "templateEditorToolbarTemplatesMenu.button": "Templates";
 }>;
 
 /*

package/dist/components/ActionsPage/ActionsPage.esm.js

@@ -20,6 +20,10 @@ import classNames from 'classnames';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ExpandLessIcon from '@material-ui/icons/ExpandLess';
 import LinkIcon from '@material-ui/icons/Link';
+import Autocomplete from '@material-ui/lab/Autocomplete';
+import TextField from '@material-ui/core/TextField';
+import InputAdornment from '@material-ui/core/InputAdornment';
+import SearchIcon from '@material-ui/icons/Search';
 import { useRouteRef, useApi } from '@backstage/core-plugin-api';
 import { Page, Header, Content, Progress, ErrorPanel, EmptyState, Link, MarkdownContent, CodeSnippet } from '@backstage/core-components';
 import Chip from '@material-ui/core/Chip';
@@ -70,12 +74,17 @@ const ActionPageContent = () => {
   const api = useApi(scaffolderApiRef);
   const { t } = useTranslationRef(scaffolderTranslationRef);
   const classes = useStyles();
-  const { loading, value, error } = useAsync(async () => {
+  const {
+    loading,
+    value = [],
+    error
+  } = useAsync(async () => {
     return api.listActions();
   }, [api]);
+  const [selectedAction, setSelectedAction] = useState(null);
   const [isExpanded, setIsExpanded] = useState({});
   useEffect(() => {
-    if (value && window.location.hash) {
+    if (value.length && window.location.hash) {
       document.querySelector(window.location.hash)?.scrollIntoView();
     }
   }, [value]);
@@ -155,7 +164,32 @@ const ActionPageContent = () => {
       formatRows(`${id}.${index}`, i)
     ))));
   };
-  return value?.map((action) => {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box, { pb: 3 }, /* @__PURE__ */ React.createElement(
+    Autocomplete,
+    {
+      id: "actions-autocomplete",
+      options: value,
+      loading,
+      getOptionLabel: (option) => option.id,
+      renderInput: (params) => /* @__PURE__ */ React.createElement(
+        TextField,
+        {
+          ...params,
+          "aria-label": t("actionsPage.content.searchFieldPlaceholder"),
+          placeholder: t("actionsPage.content.searchFieldPlaceholder"),
+          variant: "outlined",
+          InputProps: {
+            ...params.InputProps,
+            startAdornment: /* @__PURE__ */ React.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React.createElement(SearchIcon, null))
+          }
+        }
+      ),
+      onChange: (_event, option) => {
+        setSelectedAction(option);
+      },
+      fullWidth: true
+    }
+  )), (selectedAction ? [selectedAction] : value).map((action) => {
     if (action.id.startsWith("legacy:")) {
       return void 0;
     }
@@ -164,11 +198,11 @@ const ActionPageContent = () => {
       `${action.id}.input`,
       action.schema?.input?.oneOf
     );
-    return /* @__PURE__ */ React.createElement(Box, { pb: 4, key: action.id }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(Box, { pb: 3, key: action.id }, /* @__PURE__ */ React.createElement(Box, { display: "flex", alignItems: "center" }, /* @__PURE__ */ React.createElement(
       Typography,
       {
         id: action.id.replaceAll(":", "-"),
-        variant: "h4",
+        variant: "h5",
         component: "h2",
         className: classes.code
       },
@@ -180,12 +214,12 @@ const ActionPageContent = () => {
         to: `#${action.id.replaceAll(":", "-")}`
       },
       /* @__PURE__ */ React.createElement(LinkIcon, null)
-    ), action.description && /* @__PURE__ */ React.createElement(MarkdownContent, { content: action.description }), action.schema?.input && /* @__PURE__ */ React.createElement(Box, { pb: 2 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5", component: "h3" }, t("actionsPage.action.input")), renderTable(
+    )), action.description && /* @__PURE__ */ React.createElement(MarkdownContent, { content: action.description }), action.schema?.input && /* @__PURE__ */ React.createElement(Box, { pb: 2 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6", component: "h3" }, t("actionsPage.action.input")), renderTable(
       formatRows(`${action.id}.input`, action?.schema?.input)
     ), oneOf), action.schema?.output && /* @__PURE__ */ React.createElement(Box, { pb: 2 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5", component: "h3" }, t("actionsPage.action.output")), renderTable(
       formatRows(`${action.id}.output`, action?.schema?.output)
-    )), action.examples && /* @__PURE__ */ React.createElement(Accordion, null, /* @__PURE__ */ React.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, null) }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5", component: "h3" }, t("actionsPage.action.examples"))), /* @__PURE__ */ React.createElement(AccordionDetails, null, /* @__PURE__ */ React.createElement(Box, { pb: 2 }, /* @__PURE__ */ React.createElement(ExamplesTable, { examples: action.examples })))));
-  });
+    )), action.examples && /* @__PURE__ */ React.createElement(Accordion, null, /* @__PURE__ */ React.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, null) }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6", component: "h3" }, t("actionsPage.action.examples"))), /* @__PURE__ */ React.createElement(AccordionDetails, null, /* @__PURE__ */ React.createElement(Box, { pb: 2 }, /* @__PURE__ */ React.createElement(ExamplesTable, { examples: action.examples })))));
+  }));
 };
 const ActionsPage = () => {
   const navigate = useNavigate();