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

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

@@ -0,0 +1,84 @@
+import React, { useState, useCallback } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { scaffolderTranslationRef } from '../../../translation.esm.js';
+
+const ITEM_HEIGHT = 48;
+const useStyles = makeStyles({
+  menu: {
+    maxHeight: ITEM_HEIGHT * 5
+  }
+});
+function TemplateEditorToolbarTemplatesMenu(props) {
+  const { options, selectedOption, onSelectOption } = props;
+  const classes = useStyles();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const { t } = useTranslationRef(scaffolderTranslationRef);
+  const isSelectedOption = useCallback(
+    (option) => {
+      return !!selectedOption && selectedOption.value === option.value;
+    },
+    [selectedOption]
+  );
+  const handleOpenMenu = useCallback(
+    (event) => {
+      setAnchorEl(event.currentTarget);
+    },
+    [setAnchorEl]
+  );
+  const handleCloseMenu = useCallback(() => {
+    setAnchorEl(null);
+  }, [setAnchorEl]);
+  const handleSelectOption = useCallback(
+    (option) => {
+      handleCloseMenu();
+      onSelectOption(option);
+    },
+    [handleCloseMenu, onSelectOption]
+  );
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      "aria-controls": "templates-menu",
+      "aria-haspopup": "true",
+      onClick: handleOpenMenu
+    },
+    t("templateEditorToolbarTemplatesMenu.button")
+  ), /* @__PURE__ */ React.createElement(
+    Menu,
+    {
+      id: "templates-menu",
+      anchorEl,
+      open: Boolean(anchorEl),
+      onClose: handleCloseMenu,
+      getContentAnchorEl: null,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "left"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "left"
+      },
+      PaperProps: {
+        className: classes.menu
+      }
+    },
+    options.map((option, index) => /* @__PURE__ */ React.createElement(
+      MenuItem,
+      {
+        key: index,
+        selected: isSelectedOption(option),
+        "aria-selected": isSelectedOption(option),
+        onClick: () => handleSelectOption(option)
+      },
+      option.label
+    ))
+  ));
+}
+
+export { TemplateEditorToolbarTemplatesMenu };
+//# sourceMappingURL=TemplateEditorToolbarTemplatesMenu.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateEditorToolbarTemplatesMenu.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateEditorToolbarTemplatesMenu.tsx"],"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 React, { MouseEvent, useCallback, useState } from 'react';\n\nimport { makeStyles } from '@material-ui/core/styles';\nimport Button from '@material-ui/core/Button';\nimport Menu from '@material-ui/core/Menu';\nimport MenuItem from '@material-ui/core/MenuItem';\n\nimport { Entity } from '@backstage/catalog-model';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { scaffolderTranslationRef } from '../../../translation';\n\nconst ITEM_HEIGHT = 48;\n\nconst useStyles = makeStyles({\n  menu: {\n    maxHeight: ITEM_HEIGHT * 5,\n  },\n});\n\nexport type TemplateOption = {\n  label: string;\n  value: Entity;\n};\n\nexport function TemplateEditorToolbarTemplatesMenu(props: {\n  options: TemplateOption[];\n  selectedOption?: TemplateOption;\n  onSelectOption: (option: TemplateOption) => void;\n}) {\n  const { options, selectedOption, onSelectOption } = props;\n  const classes = useStyles();\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  const isSelectedOption = useCallback(\n    (option: TemplateOption) => {\n      return !!selectedOption && selectedOption.value === option.value;\n    },\n    [selectedOption],\n  );\n\n  const handleOpenMenu = useCallback(\n    (event: MouseEvent<HTMLElement>) => {\n      setAnchorEl(event.currentTarget);\n    },\n    [setAnchorEl],\n  );\n\n  const handleCloseMenu = useCallback(() => {\n    setAnchorEl(null);\n  }, [setAnchorEl]);\n\n  const handleSelectOption = useCallback(\n    (option: TemplateOption) => {\n      handleCloseMenu();\n      onSelectOption(option);\n    },\n    [handleCloseMenu, onSelectOption],\n  );\n\n  return (\n    <>\n      <Button\n        aria-controls=\"templates-menu\"\n        aria-haspopup=\"true\"\n        onClick={handleOpenMenu}\n      >\n        {t('templateEditorToolbarTemplatesMenu.button')}\n      </Button>\n      <Menu\n        id=\"templates-menu\"\n        anchorEl={anchorEl}\n        open={Boolean(anchorEl)}\n        onClose={handleCloseMenu}\n        getContentAnchorEl={null}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'left',\n        }}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'left',\n        }}\n        PaperProps={{\n          className: classes.menu,\n        }}\n      >\n        {options.map((option, index) => (\n          <MenuItem\n            key={index}\n            selected={isSelectedOption(option)}\n            aria-selected={isSelectedOption(option)}\n            onClick={() => handleSelectOption(option)}\n          >\n            {option.label}\n          </MenuItem>\n        ))}\n      </Menu>\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -25,7 +25,9 @@ function TemplateFormPage(props) {
     Header,
     {
       title: t("templateFormPage.title"),
-      subtitle: t("templateFormPage.subtitle")
+      subtitle: t("templateFormPage.subtitle"),
+      type: t("templateIntroPage.title"),
+      typeLink: editLink()
     }
   ), /* @__PURE__ */ React.createElement(Content, { className: classes.root }, /* @__PURE__ */ React.createElement(
     TemplateFormPreviewer,

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

@@ -1 +1 @@
-{"version":3,"file":"TemplateFormPage.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateFormPage.tsx"],"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 React, { useCallback } from 'react';\nimport { useNavigate } from 'react-router-dom';\n\nimport { makeStyles } from '@material-ui/core/styles';\n\nimport { Page, Header, Content } from '@backstage/core-components';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport {\n  FormProps,\n  LayoutOptions,\n  FieldExtensionOptions,\n} from '@backstage/plugin-scaffolder-react';\n\nimport { editRouteRef } from '../../../routes';\nimport { scaffolderTranslationRef } from '../../../translation';\n\nimport { TemplateFormPreviewer } from './TemplateFormPreviewer';\n\nconst useStyles = makeStyles({\n  root: {\n    padding: 0,\n  },\n});\n\ninterface TemplateFormPageProps {\n  layouts?: LayoutOptions[];\n  formProps?: FormProps;\n  fieldExtensions?: FieldExtensionOptions<any, any>[];\n  defaultPreviewTemplate?: string;\n}\n\nexport function TemplateFormPage(props: TemplateFormPageProps) {\n  const classes = useStyles();\n  const navigate = useNavigate();\n  const editLink = useRouteRef(editRouteRef);\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  const handleClose = useCallback(() => {\n    navigate(editLink());\n  }, [navigate, editLink]);\n\n  return (\n    <Page themeId=\"home\">\n      <Header\n        title={t('templateFormPage.title')}\n        subtitle={t('templateFormPage.subtitle')}\n      />\n      <Content className={classes.root}>\n        <TemplateFormPreviewer\n          layouts={props.layouts}\n          formProps={props.formProps}\n          customFieldExtensions={props.fieldExtensions}\n          defaultPreviewTemplate={props.defaultPreviewTemplate}\n          onClose={handleClose}\n        />\n      </Content>\n    </Page>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAmCA,MAAM,YAAY,UAAW,CAAA;AAAA,EAC3B,IAAM,EAAA;AAAA,IACJ,OAAS,EAAA,CAAA;AAAA,GACX;AACF,CAAC,CAAA,CAAA;AASM,SAAS,iBAAiB,KAA8B,EAAA;AAC7D,EAAA,MAAM,UAAU,SAAU,EAAA,CAAA;AAC1B,EAAA,MAAM,WAAW,WAAY,EAAA,CAAA;AAC7B,EAAM,MAAA,QAAA,GAAW,YAAY,YAAY,CAAA,CAAA;AACzC,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,wBAAwB,CAAA,CAAA;AAExD,EAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,IAAA,QAAA,CAAS,UAAU,CAAA,CAAA;AAAA,GAClB,EAAA,CAAC,QAAU,EAAA,QAAQ,CAAC,CAAA,CAAA;AAEvB,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,wBAAwB,CAAA;AAAA,MACjC,QAAA,EAAU,EAAE,2BAA2B,CAAA;AAAA,KAAA;AAAA,GAEzC,kBAAA,KAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,EAAA,SAAA,EAAW,QAAQ,IAC1B,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,qBAAA;AAAA,IAAA;AAAA,MACC,SAAS,KAAM,CAAA,OAAA;AAAA,MACf,WAAW,KAAM,CAAA,SAAA;AAAA,MACjB,uBAAuB,KAAM,CAAA,eAAA;AAAA,MAC7B,wBAAwB,KAAM,CAAA,sBAAA;AAAA,MAC9B,OAAS,EAAA,WAAA;AAAA,KAAA;AAAA,GAEb,CACF,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TemplateFormPage.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateFormPage.tsx"],"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 React, { useCallback } from 'react';\nimport { useNavigate } from 'react-router-dom';\n\nimport { makeStyles } from '@material-ui/core/styles';\n\nimport { Page, Header, Content } from '@backstage/core-components';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport {\n  FormProps,\n  LayoutOptions,\n  FieldExtensionOptions,\n} from '@backstage/plugin-scaffolder-react';\n\nimport { editRouteRef } from '../../../routes';\nimport { scaffolderTranslationRef } from '../../../translation';\n\nimport { TemplateFormPreviewer } from './TemplateFormPreviewer';\n\nconst useStyles = makeStyles({\n  root: {\n    padding: 0,\n  },\n});\n\ninterface TemplateFormPageProps {\n  layouts?: LayoutOptions[];\n  formProps?: FormProps;\n  fieldExtensions?: FieldExtensionOptions<any, any>[];\n  defaultPreviewTemplate?: string;\n}\n\nexport function TemplateFormPage(props: TemplateFormPageProps) {\n  const classes = useStyles();\n  const navigate = useNavigate();\n  const editLink = useRouteRef(editRouteRef);\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  const handleClose = useCallback(() => {\n    navigate(editLink());\n  }, [navigate, editLink]);\n\n  return (\n    <Page themeId=\"home\">\n      <Header\n        title={t('templateFormPage.title')}\n        subtitle={t('templateFormPage.subtitle')}\n        type={t('templateIntroPage.title')}\n        typeLink={editLink()}\n      />\n      <Content className={classes.root}>\n        <TemplateFormPreviewer\n          layouts={props.layouts}\n          formProps={props.formProps}\n          customFieldExtensions={props.fieldExtensions}\n          defaultPreviewTemplate={props.defaultPreviewTemplate}\n          onClose={handleClose}\n        />\n      </Content>\n    </Page>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAmCA,MAAM,YAAY,UAAW,CAAA;AAAA,EAC3B,IAAM,EAAA;AAAA,IACJ,OAAS,EAAA,CAAA;AAAA,GACX;AACF,CAAC,CAAA,CAAA;AASM,SAAS,iBAAiB,KAA8B,EAAA;AAC7D,EAAA,MAAM,UAAU,SAAU,EAAA,CAAA;AAC1B,EAAA,MAAM,WAAW,WAAY,EAAA,CAAA;AAC7B,EAAM,MAAA,QAAA,GAAW,YAAY,YAAY,CAAA,CAAA;AACzC,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,wBAAwB,CAAA,CAAA;AAExD,EAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,IAAA,QAAA,CAAS,UAAU,CAAA,CAAA;AAAA,GAClB,EAAA,CAAC,QAAU,EAAA,QAAQ,CAAC,CAAA,CAAA;AAEvB,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,wBAAwB,CAAA;AAAA,MACjC,QAAA,EAAU,EAAE,2BAA2B,CAAA;AAAA,MACvC,IAAA,EAAM,EAAE,yBAAyB,CAAA;AAAA,MACjC,UAAU,QAAS,EAAA;AAAA,KAAA;AAAA,GAErB,kBAAA,KAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,EAAA,SAAA,EAAW,QAAQ,IAC1B,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,qBAAA;AAAA,IAAA;AAAA,MACC,SAAS,KAAM,CAAA,OAAA;AAAA,MACf,WAAW,KAAM,CAAA,SAAA;AAAA,MACjB,uBAAuB,KAAM,CAAA,eAAA;AAAA,MAC7B,wBAAwB,KAAM,CAAA,sBAAA;AAAA,MAC9B,OAAS,EAAA,WAAA;AAAA,KAAA;AAAA,GAEb,CACF,CAAA,CAAA;AAEJ;;;;"}

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":";;;;;;;;;;;;;;;AAmDA,MAAM,4BAA+B,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AA+CrC,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB,CAAU,KAAA,MAAA;AAAA,IACR,IAAM,EAAA;AAAA,MACJ,MAAQ,EAAA,MAAA;AAAA,MACR,QAAU,EAAA,aAAA;AAAA,MACV,OAAS,EAAA,MAAA;AAAA,MACT,iBAAmB,EAAA,CAAA;AAAA;AAAA;AAAA;AAAA,IAAA,CAAA;AAAA,MAKnB,CAAC,KAAM,CAAA,WAAA,CAAY,EAAG,CAAA,IAAI,CAAC,GAAG;AAAA,QAC5B,iBAAmB,EAAA,CAAA;AAAA;AAAA;AAAA,IAAA,CAAA;AAAA,QAInB,gBAAkB,EAAA,UAAA;AAAA,QAClB,mBAAqB,EAAA,SAAA;AAAA,OACvB;AAAA,KACF;AAAA,IACA,KAAO,EAAA;AAAA,MACL,QAAU,EAAA,UAAA;AAAA,KACZ;AAAA,GACF,CAAA;AAAA,EACA,EAAE,MAAM,iCAAkC,EAAA;AAC5C,CAAA,CAAA;AAEO,MAAM,wBAAwB,CAAC;AAAA,EACpC,sBAAyB,GAAA,4BAAA;AAAA,EACzB,wBAAwB,EAAC;AAAA,EACzB,UAAU,EAAC;AAAA,EACX,SAAA;AACF,CAMM,KAAA;AACJ,EAAA,MAAM,UAAU,SAAU,EAAA,CAAA;AAC1B,EAAM,MAAA,QAAA,GAAW,OAAO,WAAW,CAAA,CAAA;AACnC,EAAM,MAAA,UAAA,GAAa,OAAO,aAAa,CAAA,CAAA;AACvC,EAAA,MAAM,WAAW,WAAY,EAAA,CAAA;AAC7B,EAAM,MAAA,QAAA,GAAW,YAAY,YAAY,CAAA,CAAA;AAEzC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,QAAiB,EAAA,CAAA;AACnD,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAI,QAAyB,EAAA,CAAA;AACzE,EAAA,MAAM,CAAC,eAAiB,EAAA,kBAAkB,CAAI,GAAA,QAAA,CAA2B,EAAE,CAAA,CAAA;AAC3E,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAS,sBAAsB,CAAA,CAAA;AAEvE,EAAM,MAAA,oBAAA,GAAuB,YAAY,MAAM;AAC7C,IAAA,QAAA,CAAS,UAAU,CAAA,CAAA;AAAA,GAClB,EAAA,CAAC,QAAU,EAAA,QAAQ,CAAC,CAAA,CAAA;AAEvB,EAAA,QAAA;AAAA,IACE,MACE,WACG,WAAY,CAAA;AAAA,MACX,MAAA,EAAQ,EAAE,IAAA,EAAM,UAAW,EAAA;AAAA,MAC3B,MAAQ,EAAA;AAAA,QACN,MAAA;AAAA,QACA,oBAAA;AAAA,QACA,eAAA;AAAA,QACA,gBAAA;AAAA,QACA,iBAAA;AAAA,QACA,YAAA;AAAA,QACA,aAAA;AAAA,OACF;AAAA,KACD,CACA,CAAA,IAAA;AAAA,MAAK,CAAC,EAAE,KAAA,EACP,KAAA,kBAAA;AAAA,QACE,KAAA,CAAM,IAAI,CAAa,QAAA,MAAA;AAAA,UACrB,KAAA,EACE,SAAS,QAAS,CAAA,KAAA,IAClB,kBAAkB,QAAU,EAAA,EAAE,WAAa,EAAA,UAAA,EAAY,CAAA;AAAA,UACzD,KAAO,EAAA,QAAA;AAAA,SACP,CAAA,CAAA;AAAA,OACJ;AAAA,KAED,CAAA,KAAA;AAAA,MAAM,CAAA,CAAA,KACL,SAAS,IAAK,CAAA;AAAA,QACZ,OAAA,EAAS,CAAsC,mCAAA,EAAA,CAAA,CAAE,OAAO,CAAA,CAAA;AAAA,QACxD,QAAU,EAAA,OAAA;AAAA,OACX,CAAA;AAAA,KACH;AAAA,IACJ,CAAC,UAAU,CAAA;AAAA,GACb,CAAA;AAEA,EAAA,MAAM,kBAAqB,GAAA,WAAA;AAAA;AAAA,IAEzB,CAAC,QAA6B,KAAA;AAC5B,MAAA,mBAAA,CAAoB,QAAQ,CAAA,CAAA;AAC5B,MAAA,eAAA,CAAgB,IAAK,CAAA,SAAA,CAAU,QAAS,CAAA,KAAA,CAAM,IAAI,CAAC,CAAA,CAAA;AAAA,KACrD;AAAA,IACA,CAAC,qBAAqB,eAAe,CAAA;AAAA,GACvC,CAAA;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,oBAAA,EAAA,EAAqB,OAAS,EAAA,EAAE,IAAM,EAAA,OAAA,CAAQ,IAAK,EAAA,EAAA,kBACjD,KAAA,CAAA,aAAA,CAAA,2BAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA,EAAsB,iBAAiB,qBACtC,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,6BAAA;AAAA,IAAA;AAAA,MACC,gBAAkB,EAAA,oBAAA;AAAA,KAAA;AAAA,GAEpB,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,kCAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA,eAAA;AAAA,MACT,cAAgB,EAAA,gBAAA;AAAA,MAChB,cAAgB,EAAA,kBAAA;AAAA,KAAA;AAAA,GAEpB,CACF,CAAA,kBACC,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA,EAA0B,SAAS,EAAE,IAAA,EAAM,OAAQ,CAAA,KAAA,EAClD,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,sBAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA,YAAA;AAAA,MACT,QAAU,EAAA,eAAA;AAAA,MACV,SAAA;AAAA,KAAA;AAAA,GAEJ,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,2BACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,kBAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA,YAAA;AAAA,MACT,aAAa,EAAA,IAAA;AAAA,MACb,eAAiB,EAAA,qBAAA;AAAA,MACjB,YAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,KAAA;AAAA,GAEJ,CACF,CAAA,CAAA;AAEJ;;;;"}

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/components/TemplateListPage/RegisterExistingButton.esm.js

@@ -28,7 +28,7 @@ const RegisterExistingButton = (props) => {
       to
     },
     /* @__PURE__ */ React.createElement(CreateComponentIcon, null)
-  ) : /* @__PURE__ */ React.createElement(Button, { component: Link, variant: "contained", color: "primary", to }, title);
+  ) : /* @__PURE__ */ React.createElement(Button, { component: Link, variant: "outlined", color: "primary", to }, title);
 };
 
 export { RegisterExistingButton };

package/dist/alpha/components/TemplateListPage/RegisterExistingButton.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"RegisterExistingButton.esm.js","sources":["../../../../src/alpha/components/TemplateListPage/RegisterExistingButton.tsx"],"sourcesContent":["/*\n * Copyright 2021 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 Button from '@material-ui/core/Button';\nimport IconButton from '@material-ui/core/IconButton';\nimport useMediaQuery from '@material-ui/core/useMediaQuery';\nimport React from 'react';\nimport { Link as RouterLink, LinkProps } from 'react-router-dom';\nimport AddCircleOutline from '@material-ui/icons/AddCircleOutline';\nimport { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';\nimport { usePermission } from '@backstage/plugin-permission-react';\nimport { Theme } from '@material-ui/core/styles';\n\n/**\n * Properties for {@link RegisterExistingButton}\n *\n * @alpha\n */\nexport type RegisterExistingButtonProps = {\n  title: string;\n} & Partial<Pick<LinkProps, 'to'>>;\n\n/**\n * A button that helps users to register an existing component.\n * @alpha\n */\nexport const RegisterExistingButton = (props: RegisterExistingButtonProps) => {\n  const { title, to } = props;\n  const { allowed } = usePermission({\n    permission: catalogEntityCreatePermission,\n  });\n  const isXSScreen = useMediaQuery<Theme>(theme =>\n    theme.breakpoints.down('xs'),\n  );\n\n  if (!to || !allowed) {\n    return null;\n  }\n\n  return isXSScreen ? (\n    <IconButton\n      component={RouterLink}\n      color=\"primary\"\n      title={title}\n      size=\"small\"\n      to={to}\n    >\n      <AddCircleOutline />\n    </IconButton>\n  ) : (\n    <Button component={RouterLink} variant=\"contained\" color=\"primary\" to={to}>\n      {title}\n    </Button>\n  );\n};\n"],"names":["RouterLink","AddCircleOutline"],"mappings":";;;;;;;;;AAuCa,MAAA,sBAAA,GAAyB,CAAC,KAAuC,KAAA;AAC5E,EAAM,MAAA,EAAE,KAAO,EAAA,EAAA,EAAO,GAAA,KAAA,CAAA;AACtB,EAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,aAAc,CAAA;AAAA,IAChC,UAAY,EAAA,6BAAA;AAAA,GACb,CAAA,CAAA;AACD,EAAA,MAAM,UAAa,GAAA,aAAA;AAAA,IAAqB,CACtC,KAAA,KAAA,KAAA,CAAM,WAAY,CAAA,IAAA,CAAK,IAAI,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAI,IAAA,CAAC,EAAM,IAAA,CAAC,OAAS,EAAA;AACnB,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,OAAO,UACL,mBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAAA,IAAA;AAAA,MACX,KAAM,EAAA,SAAA;AAAA,MACN,KAAA;AAAA,MACA,IAAK,EAAA,OAAA;AAAA,MACL,EAAA;AAAA,KAAA;AAAA,wCAECC,mBAAiB,EAAA,IAAA,CAAA;AAAA,GACpB,mBAEC,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAO,SAAW,EAAAD,IAAA,EAAY,SAAQ,WAAY,EAAA,KAAA,EAAM,SAAU,EAAA,EAAA,EAAA,EAChE,KACH,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"RegisterExistingButton.esm.js","sources":["../../../../src/alpha/components/TemplateListPage/RegisterExistingButton.tsx"],"sourcesContent":["/*\n * Copyright 2021 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 Button from '@material-ui/core/Button';\nimport IconButton from '@material-ui/core/IconButton';\nimport useMediaQuery from '@material-ui/core/useMediaQuery';\nimport React from 'react';\nimport { Link as RouterLink, LinkProps } from 'react-router-dom';\nimport AddCircleOutline from '@material-ui/icons/AddCircleOutline';\nimport { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';\nimport { usePermission } from '@backstage/plugin-permission-react';\nimport { Theme } from '@material-ui/core/styles';\n\n/**\n * Properties for {@link RegisterExistingButton}\n *\n * @alpha\n */\nexport type RegisterExistingButtonProps = {\n  title: string;\n} & Partial<Pick<LinkProps, 'to'>>;\n\n/**\n * A button that helps users to register an existing component.\n * @alpha\n */\nexport const RegisterExistingButton = (props: RegisterExistingButtonProps) => {\n  const { title, to } = props;\n  const { allowed } = usePermission({\n    permission: catalogEntityCreatePermission,\n  });\n  const isXSScreen = useMediaQuery<Theme>(theme =>\n    theme.breakpoints.down('xs'),\n  );\n\n  if (!to || !allowed) {\n    return null;\n  }\n\n  return isXSScreen ? (\n    <IconButton\n      component={RouterLink}\n      color=\"primary\"\n      title={title}\n      size=\"small\"\n      to={to}\n    >\n      <AddCircleOutline />\n    </IconButton>\n  ) : (\n    <Button component={RouterLink} variant=\"outlined\" color=\"primary\" to={to}>\n      {title}\n    </Button>\n  );\n};\n"],"names":["RouterLink","AddCircleOutline"],"mappings":";;;;;;;;;AAuCa,MAAA,sBAAA,GAAyB,CAAC,KAAuC,KAAA;AAC5E,EAAM,MAAA,EAAE,KAAO,EAAA,EAAA,EAAO,GAAA,KAAA,CAAA;AACtB,EAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,aAAc,CAAA;AAAA,IAChC,UAAY,EAAA,6BAAA;AAAA,GACb,CAAA,CAAA;AACD,EAAA,MAAM,UAAa,GAAA,aAAA;AAAA,IAAqB,CACtC,KAAA,KAAA,KAAA,CAAM,WAAY,CAAA,IAAA,CAAK,IAAI,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAI,IAAA,CAAC,EAAM,IAAA,CAAC,OAAS,EAAA;AACnB,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,OAAO,UACL,mBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAAA,IAAA;AAAA,MACX,KAAM,EAAA,SAAA;AAAA,MACN,KAAA;AAAA,MACA,IAAK,EAAA,OAAA;AAAA,MACL,EAAA;AAAA,KAAA;AAAA,wCAECC,mBAAiB,EAAA,IAAA,CAAA;AAAA,GACpB,mBAEC,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAO,SAAW,EAAAD,IAAA,EAAY,SAAQ,UAAW,EAAA,KAAA,EAAM,SAAU,EAAA,EAAA,EAAA,EAC/D,KACH,CAAA,CAAA;AAEJ;;;;"}

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,8 +157,12 @@ 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 "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";
@@ -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": "Edit Template Form";
+    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/api.esm.js

@@ -25,9 +25,11 @@ class ScaffolderClient {
     }
     const baseUrl = await this.discoveryApi.getBaseUrl("scaffolder");
     const { userEntityRef } = await this.identityApi.getBackstageIdentity();
-    const query = qs.stringify(
-      options.filterByOwnership === "owned" ? { createdBy: userEntityRef } : {}
-    );
+    const query = qs.stringify({
+      createdBy: options.filterByOwnership === "owned" ? userEntityRef : void 0,
+      limit: options.limit,
+      offset: options.offset
+    });
     const response = await this.fetchApi.fetch(`${baseUrl}/v2/tasks?${query}`);
     if (!response.ok) {
       throw await ResponseError.fromResponse(response);