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

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

@@ -1,50 +1,38 @@
 import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
 import { Page, Header, Content } from '@backstage/core-components';
-import { WebFileSystemAccess, WebFileSystemStore } from '../../../lib/filesystem/WebFileSystemAccess.esm.js';
-import { TemplateEditorIntro } from './TemplateEditorIntro.esm.js';
-import { useNavigate } from 'react-router-dom';
 import { useRouteRef } from '@backstage/core-plugin-api';
-import { rootRouteRef, editorRouteRef, customFieldsRouteRef, templateFormRouteRef } from '../../../routes.esm.js';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { scaffolderTranslationRef } from '../../../translation.esm.js';
-import { createExampleTemplate } from '../../../lib/filesystem/createExampleTemplate.esm.js';
+import { editRouteRef } from '../../../routes.esm.js';
+import { TemplateEditor } from './TemplateEditor.esm.js';
 
-function TemplateEditorPage() {
-  const navigate = useNavigate();
-  const createLink = useRouteRef(rootRouteRef);
-  const editorLink = useRouteRef(editorRouteRef);
-  const customFieldsLink = useRouteRef(customFieldsRouteRef);
-  const templateFormLink = useRouteRef(templateFormRouteRef);
+const useStyles = makeStyles(
+  {
+    content: {
+      padding: 0
+    }
+  },
+  { name: "ScaffolderTemplateEditorToolbar" }
+);
+function TemplateEditorPage(props) {
+  const classes = useStyles();
+  const editLink = useRouteRef(editRouteRef);
   const { t } = useTranslationRef(scaffolderTranslationRef);
   return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(
     Header,
     {
       title: t("templateEditorPage.title"),
-      type: "Scaffolder",
-      typeLink: createLink(),
-      subtitle: t("templateEditorPage.subtitle")
+      subtitle: t("templateEditorPage.subtitle"),
+      type: t("templateIntroPage.title"),
+      typeLink: editLink()
     }
-  ), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(
-    TemplateEditorIntro,
+  ), /* @__PURE__ */ React.createElement(Content, { className: classes.content }, /* @__PURE__ */ React.createElement(
+    TemplateEditor,
     {
-      onSelect: (option) => {
-        if (option === "local") {
-          WebFileSystemAccess.requestDirectoryAccess().then((directory) => WebFileSystemStore.setDirectory(directory)).then(() => navigate(editorLink())).catch(() => {
-          });
-        } else if (option === "create-template") {
-          WebFileSystemAccess.requestDirectoryAccess().then((directory) => {
-            createExampleTemplate(directory).then(() => {
-              WebFileSystemStore.setDirectory(directory);
-              navigate(editorLink());
-            });
-          }).catch(() => {
-          });
-        } else if (option === "form") {
-          navigate(templateFormLink());
-        } else if (option === "field-explorer") {
-          navigate(customFieldsLink());
-        }
-      }
+      layouts: props.layouts,
+      formProps: props.formProps,
+      fieldExtensions: props.fieldExtensions
     }
   )));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"TemplateEditorPage.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateEditorPage.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 from 'react';\nimport { Content, Header, Page } from '@backstage/core-components';\n\nimport { WebFileSystemAccess } from '../../../lib/filesystem';\n\nimport { TemplateEditorIntro } from './TemplateEditorIntro';\nimport { useNavigate } from 'react-router-dom';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport {\n  editorRouteRef,\n  customFieldsRouteRef,\n  rootRouteRef,\n  templateFormRouteRef,\n} from '../../../routes';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\nimport { WebFileSystemStore } from '../../../lib/filesystem/WebFileSystemAccess';\nimport { createExampleTemplate } from '../../../lib/filesystem/createExampleTemplate';\n\nexport function TemplateEditorPage() {\n  const navigate = useNavigate();\n  const createLink = useRouteRef(rootRouteRef);\n  const editorLink = useRouteRef(editorRouteRef);\n  const customFieldsLink = useRouteRef(customFieldsRouteRef);\n  const templateFormLink = useRouteRef(templateFormRouteRef);\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  return (\n    <Page themeId=\"home\">\n      <Header\n        title={t('templateEditorPage.title')}\n        type=\"Scaffolder\"\n        typeLink={createLink()}\n        subtitle={t('templateEditorPage.subtitle')}\n      />\n      <Content>\n        <TemplateEditorIntro\n          onSelect={option => {\n            if (option === 'local') {\n              WebFileSystemAccess.requestDirectoryAccess()\n                .then(directory => WebFileSystemStore.setDirectory(directory))\n                .then(() => navigate(editorLink()))\n                .catch(() => {});\n            } else if (option === 'create-template') {\n              WebFileSystemAccess.requestDirectoryAccess()\n                .then(directory => {\n                  createExampleTemplate(directory).then(() => {\n                    WebFileSystemStore.setDirectory(directory);\n                    navigate(editorLink());\n                  });\n                })\n                .catch(() => {});\n            } else if (option === 'form') {\n              navigate(templateFormLink());\n            } else if (option === 'field-explorer') {\n              navigate(customFieldsLink());\n            }\n          }}\n        />\n      </Content>\n    </Page>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAkCO,SAAS,kBAAqB,GAAA;AACnC,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;AAExD,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,0BAA0B,CAAA;AAAA,MACnC,IAAK,EAAA,YAAA;AAAA,MACL,UAAU,UAAW,EAAA;AAAA,MACrB,QAAA,EAAU,EAAE,6BAA6B,CAAA;AAAA,KAAA;AAAA,GAC3C,sCACC,OACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,mBAAA;AAAA,IAAA;AAAA,MACC,UAAU,CAAU,MAAA,KAAA;AAClB,QAAA,IAAI,WAAW,OAAS,EAAA;AACtB,UAAA,mBAAA,CAAoB,wBACjB,CAAA,IAAA,CAAK,CAAa,SAAA,KAAA,kBAAA,CAAmB,aAAa,SAAS,CAAC,CAC5D,CAAA,IAAA,CAAK,MAAM,QAAS,CAAA,UAAA,EAAY,CAAC,CAAA,CACjC,MAAM,MAAM;AAAA,WAAE,CAAA,CAAA;AAAA,SACnB,MAAA,IAAW,WAAW,iBAAmB,EAAA;AACvC,UAAoB,mBAAA,CAAA,sBAAA,EACjB,CAAA,IAAA,CAAK,CAAa,SAAA,KAAA;AACjB,YAAsB,qBAAA,CAAA,SAAS,CAAE,CAAA,IAAA,CAAK,MAAM;AAC1C,cAAA,kBAAA,CAAmB,aAAa,SAAS,CAAA,CAAA;AACzC,cAAA,QAAA,CAAS,YAAY,CAAA,CAAA;AAAA,aACtB,CAAA,CAAA;AAAA,WACF,CACA,CAAA,KAAA,CAAM,MAAM;AAAA,WAAE,CAAA,CAAA;AAAA,SACnB,MAAA,IAAW,WAAW,MAAQ,EAAA;AAC5B,UAAA,QAAA,CAAS,kBAAkB,CAAA,CAAA;AAAA,SAC7B,MAAA,IAAW,WAAW,gBAAkB,EAAA;AACtC,UAAA,QAAA,CAAS,kBAAkB,CAAA,CAAA;AAAA,SAC7B;AAAA,OACF;AAAA,KAAA;AAAA,GAEJ,CACF,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TemplateEditorPage.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateEditorPage.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 */\nimport React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { Content, Header, Page } from '@backstage/core-components';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport {\n  FormProps,\n  FieldExtensionOptions,\n  type LayoutOptions,\n} from '@backstage/plugin-scaffolder-react';\nimport { scaffolderTranslationRef } from '../../../translation';\nimport { editRouteRef } from '../../../routes';\nimport { TemplateEditor } from './TemplateEditor';\n\nconst useStyles = makeStyles(\n  {\n    content: {\n      padding: 0,\n    },\n  },\n  { name: 'ScaffolderTemplateEditorToolbar' },\n);\n\ninterface TemplatePageProps {\n  defaultPreviewTemplate?: string;\n  fieldExtensions?: FieldExtensionOptions<any, any>[];\n  layouts?: LayoutOptions[];\n  formProps?: FormProps;\n}\n\nexport function TemplateEditorPage(props: TemplatePageProps) {\n  const classes = useStyles();\n  const editLink = useRouteRef(editRouteRef);\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  return (\n    <Page themeId=\"home\">\n      <Header\n        title={t('templateEditorPage.title')}\n        subtitle={t('templateEditorPage.subtitle')}\n        type={t('templateIntroPage.title')}\n        typeLink={editLink()}\n      />\n      <Content className={classes.content}>\n        <TemplateEditor\n          layouts={props.layouts}\n          formProps={props.formProps}\n          fieldExtensions={props.fieldExtensions}\n        />\n      </Content>\n    </Page>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AA6BA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB;AAAA,IACE,OAAS,EAAA;AAAA,MACP,OAAS,EAAA,CAAA;AAAA,KACX;AAAA,GACF;AAAA,EACA,EAAE,MAAM,iCAAkC,EAAA;AAC5C,CAAA,CAAA;AASO,SAAS,mBAAmB,KAA0B,EAAA;AAC3D,EAAA,MAAM,UAAU,SAAU,EAAA,CAAA;AAC1B,EAAM,MAAA,QAAA,GAAW,YAAY,YAAY,CAAA,CAAA;AACzC,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,wBAAwB,CAAA,CAAA;AAExD,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,0BAA0B,CAAA;AAAA,MACnC,QAAA,EAAU,EAAE,6BAA6B,CAAA;AAAA,MACzC,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,OAC1B,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,SAAS,KAAM,CAAA,OAAA;AAAA,MACf,WAAW,KAAM,CAAA,SAAA;AAAA,MACjB,iBAAiB,KAAM,CAAA,eAAA;AAAA,KAAA;AAAA,GAE3B,CACF,CAAA,CAAA;AAEJ;;;;"}

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

@@ -4,7 +4,6 @@ import { showPanel } from '@codemirror/view';
 import IconButton from '@material-ui/core/IconButton';
 import Paper from '@material-ui/core/Paper';
 import Tooltip from '@material-ui/core/Tooltip';
-import Link from '@material-ui/core/Link';
 import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
 import RefreshIcon from '@material-ui/icons/Refresh';
@@ -29,11 +28,14 @@ const useStyles = makeStyles((theme) => ({
     verticalAlign: "top"
   },
   codeMirror: {
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0
+    height: "100%",
+    [theme.breakpoints.up("md")]: {
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0
+    }
   },
   errorPanel: {
     color: theme.palette.error.main,
@@ -116,6 +118,7 @@ function TemplateEditorTextArea(props) {
 function TemplateEditorDirectoryEditorTextArea(props) {
   const classes = useStyles();
   const directoryEditor = useDirectoryEditor();
+  const { t } = useTranslationRef(scaffolderTranslationRef);
   if (!directoryEditor) {
     return /* @__PURE__ */ React.createElement(
       Typography,
@@ -124,20 +127,7 @@ function TemplateEditorDirectoryEditorTextArea(props) {
         color: "textSecondary",
         align: "center"
       },
-      "Please",
-      " ",
-      /* @__PURE__ */ React.createElement(
-        Link,
-        {
-          className: classes.button,
-          component: "button",
-          variant: "body1",
-          onClick: props.onLoad
-        },
-        "load"
-      ),
-      " ",
-      "a template directory."
+      t("templateEditorPage.templateEditorTextArea.emptyStateParagraph")
     );
   }
   const actions = directoryEditor?.selectedFile?.dirty ? {

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

@@ -1 +1 @@
-{"version":3,"file":"TemplateEditorTextArea.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateEditorTextArea.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 { StreamLanguage } from '@codemirror/language';\nimport { yaml as yamlSupport } from '@codemirror/legacy-modes/mode/yaml';\nimport { showPanel } from '@codemirror/view';\nimport IconButton from '@material-ui/core/IconButton';\nimport Paper from '@material-ui/core/Paper';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport Link from '@material-ui/core/Link';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\nimport RefreshIcon from '@material-ui/icons/Refresh';\nimport SaveIcon from '@material-ui/icons/Save';\nimport { useKeyboardEvent } from '@react-hookz/web';\nimport CodeMirror from '@uiw/react-codemirror';\nimport React, { useMemo } from 'react';\nimport { useDirectoryEditor } from './DirectoryEditorContext';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\n\nconst useStyles = makeStyles(theme => ({\n  container: {\n    position: 'relative',\n    width: '100%',\n    height: '100%',\n  },\n  typography: {\n    padding: theme.spacing(1.5),\n  },\n  button: {\n    verticalAlign: 'top',\n  },\n  codeMirror: {\n    position: 'absolute',\n    top: 0,\n    bottom: 0,\n    left: 0,\n    right: 0,\n  },\n  errorPanel: {\n    color: theme.palette.error.main,\n    lineHeight: 2,\n    margin: theme.spacing(0, 1),\n  },\n  floatingButtons: {\n    position: 'absolute',\n    top: theme.spacing(1),\n    right: theme.spacing(3),\n  },\n  floatingButton: {\n    padding: theme.spacing(1),\n  },\n}));\n\n/** A wrapper around CodeMirror with an error panel and extra actions available */\nexport function TemplateEditorTextArea(props: {\n  content?: string;\n  onUpdate?: (content: string) => void;\n  errorText?: string;\n  onSave?: () => void;\n  onReload?: () => void;\n}) {\n  const { errorText } = props;\n  const classes = useStyles();\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  const panelExtension = useMemo(() => {\n    if (!errorText) {\n      return showPanel.of(null);\n    }\n\n    const dom = document.createElement('div');\n    dom.classList.add(classes.errorPanel);\n    dom.textContent = errorText;\n    return showPanel.of(() => ({ dom, bottom: true }));\n  }, [classes, errorText]);\n\n  useKeyboardEvent(\n    e => e.key === 's' && (e.ctrlKey || e.metaKey),\n    e => {\n      e.preventDefault();\n      if (props.onSave) {\n        props.onSave();\n      }\n    },\n  );\n\n  return (\n    <div className={classes.container}>\n      <CodeMirror\n        className={classes.codeMirror}\n        theme=\"dark\"\n        height=\"100%\"\n        extensions={[StreamLanguage.define(yamlSupport), panelExtension]}\n        value={props.content}\n        onChange={props.onUpdate}\n      />\n      {(props.onSave || props.onReload) && (\n        <div className={classes.floatingButtons}>\n          <Paper>\n            {props.onSave && (\n              <Tooltip\n                title={t(\n                  'templateEditorPage.templateEditorTextArea.saveIconTooltip',\n                )}\n              >\n                <IconButton\n                  className={classes.floatingButton}\n                  onClick={() => props.onSave?.()}\n                >\n                  <SaveIcon />\n                </IconButton>\n              </Tooltip>\n            )}\n            {props.onReload && (\n              <Tooltip\n                title={t(\n                  'templateEditorPage.templateEditorTextArea.refreshIconTooltip',\n                )}\n              >\n                <IconButton\n                  className={classes.floatingButton}\n                  onClick={() => props.onReload?.()}\n                >\n                  <RefreshIcon />\n                </IconButton>\n              </Tooltip>\n            )}\n          </Paper>\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** A version of the TemplateEditorTextArea that is connected to the DirectoryEditor context */\nexport function TemplateEditorDirectoryEditorTextArea(props: {\n  errorText?: string;\n  onLoad?: () => void;\n}) {\n  const classes = useStyles();\n  const directoryEditor = useDirectoryEditor();\n\n  if (!directoryEditor) {\n    return (\n      <Typography\n        className={classes.typography}\n        color=\"textSecondary\"\n        align=\"center\"\n      >\n        Please{' '}\n        <Link\n          className={classes.button}\n          component=\"button\"\n          variant=\"body1\"\n          onClick={props.onLoad}\n        >\n          load\n        </Link>{' '}\n        a template directory.\n      </Typography>\n    );\n  }\n\n  const actions = directoryEditor?.selectedFile?.dirty\n    ? {\n        onSave: () => directoryEditor.save(),\n        onReload: () => directoryEditor.reload(),\n      }\n    : {\n        onReload: () => directoryEditor.reload(),\n      };\n\n  return (\n    <TemplateEditorTextArea\n      errorText={props.errorText}\n      content={directoryEditor.selectedFile?.content}\n      onUpdate={content =>\n        directoryEditor?.selectedFile?.updateContent(content)\n      }\n      {...actions}\n    />\n  );\n}\n\nTemplateEditorTextArea.DirectoryEditor = TemplateEditorDirectoryEditorTextArea;\n"],"names":["yamlSupport"],"mappings":"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"}
+{"version":3,"file":"TemplateEditorTextArea.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateEditorTextArea.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 { StreamLanguage } from '@codemirror/language';\nimport { yaml as yamlSupport } from '@codemirror/legacy-modes/mode/yaml';\nimport { showPanel } from '@codemirror/view';\nimport IconButton from '@material-ui/core/IconButton';\nimport Paper from '@material-ui/core/Paper';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\nimport RefreshIcon from '@material-ui/icons/Refresh';\nimport SaveIcon from '@material-ui/icons/Save';\nimport { useKeyboardEvent } from '@react-hookz/web';\nimport CodeMirror from '@uiw/react-codemirror';\nimport React, { useMemo } from 'react';\nimport { useDirectoryEditor } from './DirectoryEditorContext';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\n\nconst useStyles = makeStyles(theme => ({\n  container: {\n    position: 'relative',\n    width: '100%',\n    height: '100%',\n  },\n  typography: {\n    padding: theme.spacing(1.5),\n  },\n  button: {\n    verticalAlign: 'top',\n  },\n  codeMirror: {\n    height: '100%',\n    [theme.breakpoints.up('md')]: {\n      position: 'absolute',\n      top: 0,\n      bottom: 0,\n      left: 0,\n      right: 0,\n    },\n  },\n  errorPanel: {\n    color: theme.palette.error.main,\n    lineHeight: 2,\n    margin: theme.spacing(0, 1),\n  },\n  floatingButtons: {\n    position: 'absolute',\n    top: theme.spacing(1),\n    right: theme.spacing(3),\n  },\n  floatingButton: {\n    padding: theme.spacing(1),\n  },\n}));\n\n/** A wrapper around CodeMirror with an error panel and extra actions available */\nexport function TemplateEditorTextArea(props: {\n  content?: string;\n  onUpdate?: (content: string) => void;\n  errorText?: string;\n  onSave?: () => void;\n  onReload?: () => void;\n}) {\n  const { errorText } = props;\n  const classes = useStyles();\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  const panelExtension = useMemo(() => {\n    if (!errorText) {\n      return showPanel.of(null);\n    }\n\n    const dom = document.createElement('div');\n    dom.classList.add(classes.errorPanel);\n    dom.textContent = errorText;\n    return showPanel.of(() => ({ dom, bottom: true }));\n  }, [classes, errorText]);\n\n  useKeyboardEvent(\n    e => e.key === 's' && (e.ctrlKey || e.metaKey),\n    e => {\n      e.preventDefault();\n      if (props.onSave) {\n        props.onSave();\n      }\n    },\n  );\n\n  return (\n    <div className={classes.container}>\n      <CodeMirror\n        className={classes.codeMirror}\n        theme=\"dark\"\n        height=\"100%\"\n        extensions={[StreamLanguage.define(yamlSupport), panelExtension]}\n        value={props.content}\n        onChange={props.onUpdate}\n      />\n      {(props.onSave || props.onReload) && (\n        <div className={classes.floatingButtons}>\n          <Paper>\n            {props.onSave && (\n              <Tooltip\n                title={t(\n                  'templateEditorPage.templateEditorTextArea.saveIconTooltip',\n                )}\n              >\n                <IconButton\n                  className={classes.floatingButton}\n                  onClick={() => props.onSave?.()}\n                >\n                  <SaveIcon />\n                </IconButton>\n              </Tooltip>\n            )}\n            {props.onReload && (\n              <Tooltip\n                title={t(\n                  'templateEditorPage.templateEditorTextArea.refreshIconTooltip',\n                )}\n              >\n                <IconButton\n                  className={classes.floatingButton}\n                  onClick={() => props.onReload?.()}\n                >\n                  <RefreshIcon />\n                </IconButton>\n              </Tooltip>\n            )}\n          </Paper>\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** A version of the TemplateEditorTextArea that is connected to the DirectoryEditor context */\nexport function TemplateEditorDirectoryEditorTextArea(props: {\n  errorText?: string;\n}) {\n  const classes = useStyles();\n  const directoryEditor = useDirectoryEditor();\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  if (!directoryEditor) {\n    return (\n      <Typography\n        className={classes.typography}\n        color=\"textSecondary\"\n        align=\"center\"\n      >\n        {t('templateEditorPage.templateEditorTextArea.emptyStateParagraph')}\n      </Typography>\n    );\n  }\n\n  const actions = directoryEditor?.selectedFile?.dirty\n    ? {\n        onSave: () => directoryEditor.save(),\n        onReload: () => directoryEditor.reload(),\n      }\n    : {\n        onReload: () => directoryEditor.reload(),\n      };\n\n  return (\n    <TemplateEditorTextArea\n      errorText={props.errorText}\n      content={directoryEditor.selectedFile?.content}\n      onUpdate={content =>\n        directoryEditor?.selectedFile?.updateContent(content)\n      }\n      {...actions}\n    />\n  );\n}\n\nTemplateEditorTextArea.DirectoryEditor = TemplateEditorDirectoryEditorTextArea;\n"],"names":["yamlSupport"],"mappings":"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"}

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

@@ -13,16 +13,23 @@ import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogActions from '@material-ui/core/DialogActions';
 import ExtensionIcon from '@material-ui/icons/Extension';
 import DescriptionIcon from '@material-ui/icons/Description';
-import { Link } from '@backstage/core-components';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
 import { ActionPageContent } from '../../../components/ActionsPage/ActionsPage.esm.js';
+import { scaffolderTranslationRef } from '../../../translation.esm.js';
 import { CustomFieldPlaygroud } from './CustomFieldPlaygroud.esm.js';
 
 const useStyles = makeStyles(
   (theme) => ({
     paper: {
-      width: "40%",
+      width: "90%",
       padding: theme.spacing(2),
-      backgroundColor: theme.palette.background.default
+      backgroundColor: theme.palette.background.default,
+      [theme.breakpoints.up("sm")]: {
+        width: "70%"
+      },
+      [theme.breakpoints.up("md")]: {
+        width: "50%"
+      }
     },
     appbar: {
       zIndex: 1
@@ -49,20 +56,25 @@ const useStyles = makeStyles(
 function TemplateEditorToolbar(props) {
   const { children, fieldExtensions } = props;
   const classes = useStyles();
+  const { t } = useTranslationRef(scaffolderTranslationRef);
   const [showFieldsDrawer, setShowFieldsDrawer] = useState(false);
   const [showActionsDrawer, setShowActionsDrawer] = useState(false);
   const [showPublishModal, setShowPublishModal] = useState(false);
-  return /* @__PURE__ */ React.createElement(AppBar, { className: classes.appbar, position: "relative" }, /* @__PURE__ */ React.createElement(Toolbar, { className: classes.toolbar }, /* @__PURE__ */ React.createElement("div", { className: classes.toolbarCustomActions }, children), /* @__PURE__ */ React.createElement(
-    ButtonGroup,
+  return /* @__PURE__ */ React.createElement(AppBar, { className: classes.appbar, position: "relative" }, /* @__PURE__ */ React.createElement(Toolbar, { className: classes.toolbar }, /* @__PURE__ */ React.createElement("div", { className: classes.toolbarCustomActions }, children), /* @__PURE__ */ React.createElement(ButtonGroup, { className: classes.toolbarDefaultActions, variant: "text" }, /* @__PURE__ */ React.createElement(
+    Tooltip,
     {
-      className: classes.toolbarDefaultActions,
-      variant: "outlined",
-      color: "primary"
+      title: t("templateEditorToolbar.customFieldExplorerTooltip")
     },
-    /* @__PURE__ */ React.createElement(Tooltip, { title: "Custom Fields Explorer" }, /* @__PURE__ */ React.createElement(Button, { onClick: () => setShowFieldsDrawer(true) }, /* @__PURE__ */ React.createElement(ExtensionIcon, null))),
-    /* @__PURE__ */ React.createElement(Tooltip, { title: "Installed Actions Documentation" }, /* @__PURE__ */ React.createElement(Button, { onClick: () => setShowActionsDrawer(true) }, /* @__PURE__ */ React.createElement(DescriptionIcon, null))),
-    /* @__PURE__ */ React.createElement(Button, { onClick: () => setShowPublishModal(true) }, "Publish")
+    /* @__PURE__ */ React.createElement(Button, { onClick: () => setShowFieldsDrawer(true) }, /* @__PURE__ */ React.createElement(ExtensionIcon, null))
   ), /* @__PURE__ */ React.createElement(
+    Tooltip,
+    {
+      title: t(
+        "templateEditorToolbar.installedActionsDocumentationTooltip"
+      )
+    },
+    /* @__PURE__ */ React.createElement(Button, { onClick: () => setShowActionsDrawer(true) }, /* @__PURE__ */ React.createElement(DescriptionIcon, null))
+  ), /* @__PURE__ */ React.createElement(Button, { onClick: () => setShowPublishModal(true) }, t("templateEditorToolbar.addToCatalogButton"))), /* @__PURE__ */ React.createElement(
     Drawer,
     {
       classes: { paper: classes.paper },
@@ -88,9 +100,25 @@ function TemplateEditorToolbar(props) {
       "aria-labelledby": "publish-dialog-title",
       "aria-describedby": "publish-dialog-description"
     },
-    /* @__PURE__ */ React.createElement(DialogTitle, { id: "publish-dialog-title" }, "Publish changes"),
-    /* @__PURE__ */ React.createElement(DialogContent, { dividers: true }, /* @__PURE__ */ React.createElement(DialogContentText, { id: "publish-dialog-slide-description" }, "Follow the instructions below to create or update a template:", /* @__PURE__ */ React.createElement("ol", null, /* @__PURE__ */ React.createElement("li", null, "Save the template files in a local directory"), /* @__PURE__ */ React.createElement("li", null, "Create a pull request to a new or existing git repository"), /* @__PURE__ */ React.createElement("li", null, "If the template already exists, the changes will be reflected in the software catalog once the pull request gets merged"), /* @__PURE__ */ React.createElement("li", null, "But if you are creating a new template, follow this", " ", /* @__PURE__ */ React.createElement(Link, { to: "https://backstage.io/docs/features/software-templates/adding-templates/" }, "documentation"), " ", "to register the new template repository in software catalog")))),
-    /* @__PURE__ */ React.createElement(DialogActions, null, /* @__PURE__ */ React.createElement(Button, { color: "primary", onClick: () => setShowPublishModal(false) }, "Close"))
+    /* @__PURE__ */ React.createElement(DialogTitle, { id: "publish-dialog-title" }, t("templateEditorToolbar.addToCatalogDialogTitle")),
+    /* @__PURE__ */ React.createElement(DialogContent, { dividers: true }, /* @__PURE__ */ React.createElement(DialogContentText, { id: "publish-dialog-slide-description" }, t(
+      "templateEditorToolbar.addToCatalogDialogContent.stepsIntroduction"
+    ), /* @__PURE__ */ React.createElement("ul", null, t(
+      "templateEditorToolbar.addToCatalogDialogContent.stepsListItems"
+    ).split("\n").map((step, index) => /* @__PURE__ */ React.createElement("li", { key: index }, step))))),
+    /* @__PURE__ */ React.createElement(DialogActions, null, /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        color: "primary",
+        href: t(
+          "templateEditorToolbar.addToCatalogDialogActions.documentationUrl"
+        ),
+        target: "_blank"
+      },
+      t(
+        "templateEditorToolbar.addToCatalogDialogActions.documentationButton"
+      )
+    ))
   )));
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"TemplateEditorToolbar.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateEditorToolbar.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, { ReactNode, useState } from 'react';\n\nimport { makeStyles } from '@material-ui/core/styles';\nimport AppBar from '@material-ui/core/AppBar';\nimport Toolbar from '@material-ui/core/Toolbar';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport ButtonGroup from '@material-ui/core/ButtonGroup';\nimport Button from '@material-ui/core/Button';\nimport Drawer from '@material-ui/core/Drawer';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogContentText from '@material-ui/core/DialogContentText';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport ExtensionIcon from '@material-ui/icons/Extension';\nimport DescriptionIcon from '@material-ui/icons/Description';\n\nimport { Link } from '@backstage/core-components';\nimport { FieldExtensionOptions } from '@backstage/plugin-scaffolder-react';\n\nimport { ActionPageContent } from '../../../components/ActionsPage/ActionsPage';\nimport { CustomFieldPlaygroud } from './CustomFieldPlaygroud';\n\nconst useStyles = makeStyles(\n  theme => ({\n    paper: {\n      width: '40%',\n      padding: theme.spacing(2),\n      backgroundColor: theme.palette.background.default,\n    },\n    appbar: {\n      zIndex: 1,\n    },\n    toolbar: {\n      display: 'grid',\n      gridTemplateColumns: 'auto 1fr',\n      gridGap: theme.spacing(1),\n      padding: theme.spacing(0, 1),\n      backgroundColor: theme.palette.background.paper,\n    },\n    toolbarCustomActions: {\n      display: 'grid',\n      alignItems: 'center',\n      gridAutoFlow: 'Column',\n      gridGap: theme.spacing(1),\n    },\n    toolbarDefaultActions: {\n      justifySelf: 'end',\n    },\n  }),\n  { name: 'ScaffolderTemplateEditorToolbar' },\n);\n\nexport function TemplateEditorToolbar(props: {\n  children?: ReactNode;\n  fieldExtensions?: FieldExtensionOptions<any, any>[];\n}) {\n  const { children, fieldExtensions } = props;\n  const classes = useStyles();\n  const [showFieldsDrawer, setShowFieldsDrawer] = useState(false);\n  const [showActionsDrawer, setShowActionsDrawer] = useState(false);\n  const [showPublishModal, setShowPublishModal] = useState(false);\n\n  return (\n    <AppBar className={classes.appbar} position=\"relative\">\n      <Toolbar className={classes.toolbar}>\n        <div className={classes.toolbarCustomActions}>{children}</div>\n        <ButtonGroup\n          className={classes.toolbarDefaultActions}\n          variant=\"outlined\"\n          color=\"primary\"\n        >\n          <Tooltip title=\"Custom Fields Explorer\">\n            <Button onClick={() => setShowFieldsDrawer(true)}>\n              <ExtensionIcon />\n            </Button>\n          </Tooltip>\n          <Tooltip title=\"Installed Actions Documentation\">\n            <Button onClick={() => setShowActionsDrawer(true)}>\n              <DescriptionIcon />\n            </Button>\n          </Tooltip>\n          <Button onClick={() => setShowPublishModal(true)}>Publish</Button>\n        </ButtonGroup>\n        <Drawer\n          classes={{ paper: classes.paper }}\n          anchor=\"right\"\n          open={showFieldsDrawer}\n          onClose={() => setShowFieldsDrawer(false)}\n        >\n          <CustomFieldPlaygroud fieldExtensions={fieldExtensions} />\n        </Drawer>\n        <Drawer\n          classes={{ paper: classes.paper }}\n          anchor=\"right\"\n          open={showActionsDrawer}\n          onClose={() => setShowActionsDrawer(false)}\n        >\n          <ActionPageContent />\n        </Drawer>\n        <Dialog\n          onClose={() => setShowPublishModal(false)}\n          open={showPublishModal}\n          aria-labelledby=\"publish-dialog-title\"\n          aria-describedby=\"publish-dialog-description\"\n        >\n          <DialogTitle id=\"publish-dialog-title\">Publish changes</DialogTitle>\n          <DialogContent dividers>\n            <DialogContentText id=\"publish-dialog-slide-description\">\n              Follow the instructions below to create or update a template:\n              <ol>\n                <li>Save the template files in a local directory</li>\n                <li>\n                  Create a pull request to a new or existing git repository\n                </li>\n                <li>\n                  If the template already exists, the changes will be reflected\n                  in the software catalog once the pull request gets merged\n                </li>\n                <li>\n                  But if you are creating a new template, follow this{' '}\n                  <Link to=\"https://backstage.io/docs/features/software-templates/adding-templates/\">\n                    documentation\n                  </Link>{' '}\n                  to register the new template repository in software catalog\n                </li>\n              </ol>\n            </DialogContentText>\n          </DialogContent>\n          <DialogActions>\n            <Button color=\"primary\" onClick={() => setShowPublishModal(false)}>\n              Close\n            </Button>\n          </DialogActions>\n        </Dialog>\n      </Toolbar>\n    </AppBar>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TemplateEditorToolbar.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateEditorToolbar.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, { ReactNode, useState } from 'react';\n\nimport { makeStyles } from '@material-ui/core/styles';\nimport AppBar from '@material-ui/core/AppBar';\nimport Toolbar from '@material-ui/core/Toolbar';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport ButtonGroup from '@material-ui/core/ButtonGroup';\nimport Button from '@material-ui/core/Button';\nimport Drawer from '@material-ui/core/Drawer';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogContentText from '@material-ui/core/DialogContentText';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport ExtensionIcon from '@material-ui/icons/Extension';\nimport DescriptionIcon from '@material-ui/icons/Description';\n\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { FieldExtensionOptions } from '@backstage/plugin-scaffolder-react';\n\nimport { ActionPageContent } from '../../../components/ActionsPage/ActionsPage';\nimport { scaffolderTranslationRef } from '../../../translation';\nimport { CustomFieldPlaygroud } from './CustomFieldPlaygroud';\n\nconst useStyles = makeStyles(\n  theme => ({\n    paper: {\n      width: '90%',\n      padding: theme.spacing(2),\n      backgroundColor: theme.palette.background.default,\n      [theme.breakpoints.up('sm')]: {\n        width: '70%',\n      },\n      [theme.breakpoints.up('md')]: {\n        width: '50%',\n      },\n    },\n    appbar: {\n      zIndex: 1,\n    },\n    toolbar: {\n      display: 'grid',\n      gridTemplateColumns: 'auto 1fr',\n      gridGap: theme.spacing(1),\n      padding: theme.spacing(0, 1),\n      backgroundColor: theme.palette.background.paper,\n    },\n    toolbarCustomActions: {\n      display: 'grid',\n      alignItems: 'center',\n      gridAutoFlow: 'Column',\n      gridGap: theme.spacing(1),\n    },\n    toolbarDefaultActions: {\n      justifySelf: 'end',\n    },\n  }),\n  { name: 'ScaffolderTemplateEditorToolbar' },\n);\n\nexport function TemplateEditorToolbar(props: {\n  children?: ReactNode;\n  fieldExtensions?: FieldExtensionOptions<any, any>[];\n}) {\n  const { children, fieldExtensions } = props;\n  const classes = useStyles();\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n  const [showFieldsDrawer, setShowFieldsDrawer] = useState(false);\n  const [showActionsDrawer, setShowActionsDrawer] = useState(false);\n  const [showPublishModal, setShowPublishModal] = useState(false);\n\n  return (\n    <AppBar className={classes.appbar} position=\"relative\">\n      <Toolbar className={classes.toolbar}>\n        <div className={classes.toolbarCustomActions}>{children}</div>\n        <ButtonGroup className={classes.toolbarDefaultActions} variant=\"text\">\n          <Tooltip\n            title={t('templateEditorToolbar.customFieldExplorerTooltip')}\n          >\n            <Button onClick={() => setShowFieldsDrawer(true)}>\n              <ExtensionIcon />\n            </Button>\n          </Tooltip>\n          <Tooltip\n            title={t(\n              'templateEditorToolbar.installedActionsDocumentationTooltip',\n            )}\n          >\n            <Button onClick={() => setShowActionsDrawer(true)}>\n              <DescriptionIcon />\n            </Button>\n          </Tooltip>\n          <Button onClick={() => setShowPublishModal(true)}>\n            {t('templateEditorToolbar.addToCatalogButton')}\n          </Button>\n        </ButtonGroup>\n        <Drawer\n          classes={{ paper: classes.paper }}\n          anchor=\"right\"\n          open={showFieldsDrawer}\n          onClose={() => setShowFieldsDrawer(false)}\n        >\n          <CustomFieldPlaygroud fieldExtensions={fieldExtensions} />\n        </Drawer>\n        <Drawer\n          classes={{ paper: classes.paper }}\n          anchor=\"right\"\n          open={showActionsDrawer}\n          onClose={() => setShowActionsDrawer(false)}\n        >\n          <ActionPageContent />\n        </Drawer>\n        <Dialog\n          onClose={() => setShowPublishModal(false)}\n          open={showPublishModal}\n          aria-labelledby=\"publish-dialog-title\"\n          aria-describedby=\"publish-dialog-description\"\n        >\n          <DialogTitle id=\"publish-dialog-title\">\n            {t('templateEditorToolbar.addToCatalogDialogTitle')}\n          </DialogTitle>\n          <DialogContent dividers>\n            <DialogContentText id=\"publish-dialog-slide-description\">\n              {t(\n                'templateEditorToolbar.addToCatalogDialogContent.stepsIntroduction',\n              )}\n              <ul>\n                {t(\n                  'templateEditorToolbar.addToCatalogDialogContent.stepsListItems',\n                )\n                  .split('\\n')\n                  .map((step, index) => (\n                    <li key={index}>{step}</li>\n                  ))}\n              </ul>\n            </DialogContentText>\n          </DialogContent>\n          <DialogActions>\n            <Button\n              color=\"primary\"\n              href={t(\n                'templateEditorToolbar.addToCatalogDialogActions.documentationUrl',\n              )}\n              target=\"_blank\"\n            >\n              {t(\n                'templateEditorToolbar.addToCatalogDialogActions.documentationButton',\n              )}\n            </Button>\n          </DialogActions>\n        </Dialog>\n      </Toolbar>\n    </AppBar>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAwCA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB,CAAU,KAAA,MAAA;AAAA,IACR,KAAO,EAAA;AAAA,MACL,KAAO,EAAA,KAAA;AAAA,MACP,OAAA,EAAS,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MACxB,eAAA,EAAiB,KAAM,CAAA,OAAA,CAAQ,UAAW,CAAA,OAAA;AAAA,MAC1C,CAAC,KAAM,CAAA,WAAA,CAAY,EAAG,CAAA,IAAI,CAAC,GAAG;AAAA,QAC5B,KAAO,EAAA,KAAA;AAAA,OACT;AAAA,MACA,CAAC,KAAM,CAAA,WAAA,CAAY,EAAG,CAAA,IAAI,CAAC,GAAG;AAAA,QAC5B,KAAO,EAAA,KAAA;AAAA,OACT;AAAA,KACF;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,MAAQ,EAAA,CAAA;AAAA,KACV;AAAA,IACA,OAAS,EAAA;AAAA,MACP,OAAS,EAAA,MAAA;AAAA,MACT,mBAAqB,EAAA,UAAA;AAAA,MACrB,OAAA,EAAS,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MACxB,OAAS,EAAA,KAAA,CAAM,OAAQ,CAAA,CAAA,EAAG,CAAC,CAAA;AAAA,MAC3B,eAAA,EAAiB,KAAM,CAAA,OAAA,CAAQ,UAAW,CAAA,KAAA;AAAA,KAC5C;AAAA,IACA,oBAAsB,EAAA;AAAA,MACpB,OAAS,EAAA,MAAA;AAAA,MACT,UAAY,EAAA,QAAA;AAAA,MACZ,YAAc,EAAA,QAAA;AAAA,MACd,OAAA,EAAS,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,KAC1B;AAAA,IACA,qBAAuB,EAAA;AAAA,MACrB,WAAa,EAAA,KAAA;AAAA,KACf;AAAA,GACF,CAAA;AAAA,EACA,EAAE,MAAM,iCAAkC,EAAA;AAC5C,CAAA,CAAA;AAEO,SAAS,sBAAsB,KAGnC,EAAA;AACD,EAAM,MAAA,EAAE,QAAU,EAAA,eAAA,EAAoB,GAAA,KAAA,CAAA;AACtC,EAAA,MAAM,UAAU,SAAU,EAAA,CAAA;AAC1B,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,wBAAwB,CAAA,CAAA;AACxD,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAC9D,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAChE,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAE9D,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,MAAO,EAAA,EAAA,SAAA,EAAW,OAAQ,CAAA,MAAA,EAAQ,UAAS,UAC1C,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,EAAA,SAAA,EAAW,OAAQ,CAAA,OAAA,EAAA,sCACzB,KAAI,EAAA,EAAA,SAAA,EAAW,OAAQ,CAAA,oBAAA,EAAA,EAAuB,QAAS,CAAA,kBACvD,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAY,SAAW,EAAA,OAAA,CAAQ,qBAAuB,EAAA,OAAA,EAAQ,MAC7D,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,kDAAkD,CAAA;AAAA,KAAA;AAAA,oBAE3D,KAAA,CAAA,aAAA,CAAC,UAAO,OAAS,EAAA,MAAM,oBAAoB,IAAI,CAAA,EAAA,kBAC5C,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA,IAAc,CACjB,CAAA;AAAA,GAEF,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA,CAAA;AAAA,QACL,4DAAA;AAAA,OACF;AAAA,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA,CAAC,UAAO,OAAS,EAAA,MAAM,qBAAqB,IAAI,CAAA,EAAA,kBAC7C,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA,IAAgB,CACnB,CAAA;AAAA,GAEF,kBAAA,KAAA,CAAA,aAAA,CAAC,MAAO,EAAA,EAAA,OAAA,EAAS,MAAM,mBAAA,CAAoB,IAAI,CAAA,EAAA,EAC5C,CAAE,CAAA,0CAA0C,CAC/C,CACF,CACA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA,EAAE,KAAO,EAAA,OAAA,CAAQ,KAAM,EAAA;AAAA,MAChC,MAAO,EAAA,OAAA;AAAA,MACP,IAAM,EAAA,gBAAA;AAAA,MACN,OAAA,EAAS,MAAM,mBAAA,CAAoB,KAAK,CAAA;AAAA,KAAA;AAAA,oBAExC,KAAA,CAAA,aAAA,CAAC,wBAAqB,eAAkC,EAAA,CAAA;AAAA,GAE1D,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA,EAAE,KAAO,EAAA,OAAA,CAAQ,KAAM,EAAA;AAAA,MAChC,MAAO,EAAA,OAAA;AAAA,MACP,IAAM,EAAA,iBAAA;AAAA,MACN,OAAA,EAAS,MAAM,oBAAA,CAAqB,KAAK,CAAA;AAAA,KAAA;AAAA,wCAExC,iBAAkB,EAAA,IAAA,CAAA;AAAA,GAErB,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAS,MAAM,mBAAA,CAAoB,KAAK,CAAA;AAAA,MACxC,IAAM,EAAA,gBAAA;AAAA,MACN,iBAAgB,EAAA,sBAAA;AAAA,MAChB,kBAAiB,EAAA,4BAAA;AAAA,KAAA;AAAA,wCAEhB,WAAY,EAAA,EAAA,EAAA,EAAG,sBACb,EAAA,EAAA,CAAA,CAAE,+CAA+C,CACpD,CAAA;AAAA,wCACC,aAAc,EAAA,EAAA,QAAA,EAAQ,wBACpB,KAAA,CAAA,aAAA,CAAA,iBAAA,EAAA,EAAkB,IAAG,kCACnB,EAAA,EAAA,CAAA;AAAA,MACC,mEAAA;AAAA,KACF,sCACC,IACE,EAAA,IAAA,EAAA,CAAA;AAAA,MACC,gEAAA;AAAA,MAEC,KAAM,CAAA,IAAI,CACV,CAAA,GAAA,CAAI,CAAC,IAAM,EAAA,KAAA,qBACT,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAG,KAAK,KAAQ,EAAA,EAAA,IAAK,CACvB,CACL,CACF,CACF,CAAA;AAAA,wCACC,aACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,KAAM,EAAA,SAAA;AAAA,QACN,IAAM,EAAA,CAAA;AAAA,UACJ,kEAAA;AAAA,SACF;AAAA,QACA,MAAO,EAAA,QAAA;AAAA,OAAA;AAAA,MAEN,CAAA;AAAA,QACC,qEAAA;AAAA,OACF;AAAA,KAEJ,CAAA;AAAA,GAEJ,CACF,CAAA,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,73 @@
+import React, { useState, useCallback } from 'react';
+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';
+
+function TemplateEditorToolbarFileMenu(props) {
+  const { onOpenDirectory, onCreateDirectory, onCloseDirectory } = props;
+  const { t } = useTranslationRef(scaffolderTranslationRef);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const handleOpenMenu = useCallback(
+    (event) => {
+      setAnchorEl(event.currentTarget);
+    },
+    [setAnchorEl]
+  );
+  const handleCloseMenu = useCallback(() => {
+    setAnchorEl(null);
+  }, [setAnchorEl]);
+  const handleOpenDirectory = useCallback(() => {
+    handleCloseMenu();
+    onOpenDirectory?.();
+  }, [handleCloseMenu, onOpenDirectory]);
+  const handleCreateDirectory = useCallback(() => {
+    handleCloseMenu();
+    onCreateDirectory?.();
+  }, [handleCloseMenu, onCreateDirectory]);
+  const handleCloseEditor = useCallback(() => {
+    handleCloseMenu();
+    onCloseDirectory?.();
+  }, [handleCloseMenu, onCloseDirectory]);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      "aria-controls": "file-menu",
+      "aria-haspopup": "true",
+      onClick: handleOpenMenu
+    },
+    t("templateEditorToolbarFileMenu.button")
+  ), /* @__PURE__ */ React.createElement(
+    Menu,
+    {
+      id: "file-menu",
+      anchorEl,
+      open: Boolean(anchorEl),
+      onClose: handleCloseMenu,
+      getContentAnchorEl: null,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "left"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "left"
+      }
+    },
+    /* @__PURE__ */ React.createElement(MenuItem, { onClick: handleOpenDirectory, disabled: !onOpenDirectory }, t("templateEditorToolbarFileMenu.options.openDirectory")),
+    /* @__PURE__ */ React.createElement(
+      MenuItem,
+      {
+        onClick: handleCreateDirectory,
+        disabled: !onCreateDirectory,
+        divider: true
+      },
+      t("templateEditorToolbarFileMenu.options.createDirectory")
+    ),
+    /* @__PURE__ */ React.createElement(MenuItem, { onClick: handleCloseEditor, disabled: !onCloseDirectory }, t("templateEditorToolbarFileMenu.options.closeEditor"))
+  ));
+}
+
+export { TemplateEditorToolbarFileMenu };
+//# sourceMappingURL=TemplateEditorToolbarFileMenu.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateEditorToolbarFileMenu.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateEditorToolbarFileMenu.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 Button from '@material-ui/core/Button';\nimport Menu from '@material-ui/core/Menu';\nimport MenuItem from '@material-ui/core/MenuItem';\n\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\n\nimport { scaffolderTranslationRef } from '../../../translation';\n\nexport function TemplateEditorToolbarFileMenu(props: {\n  onOpenDirectory?: () => void;\n  onCreateDirectory?: () => void;\n  onCloseDirectory?: () => void;\n}) {\n  const { onOpenDirectory, onCreateDirectory, onCloseDirectory } = props;\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n\n  const handleOpenMenu = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      setAnchorEl(event.currentTarget);\n    },\n    [setAnchorEl],\n  );\n\n  const handleCloseMenu = useCallback(() => {\n    setAnchorEl(null);\n  }, [setAnchorEl]);\n\n  const handleOpenDirectory = useCallback(() => {\n    handleCloseMenu();\n    onOpenDirectory?.();\n  }, [handleCloseMenu, onOpenDirectory]);\n\n  const handleCreateDirectory = useCallback(() => {\n    handleCloseMenu();\n    onCreateDirectory?.();\n  }, [handleCloseMenu, onCreateDirectory]);\n\n  const handleCloseEditor = useCallback(() => {\n    handleCloseMenu();\n    onCloseDirectory?.();\n  }, [handleCloseMenu, onCloseDirectory]);\n\n  return (\n    <>\n      <Button\n        aria-controls=\"file-menu\"\n        aria-haspopup=\"true\"\n        onClick={handleOpenMenu}\n      >\n        {t('templateEditorToolbarFileMenu.button')}\n      </Button>\n      <Menu\n        id=\"file-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      >\n        <MenuItem onClick={handleOpenDirectory} disabled={!onOpenDirectory}>\n          {t('templateEditorToolbarFileMenu.options.openDirectory')}\n        </MenuItem>\n        <MenuItem\n          onClick={handleCreateDirectory}\n          disabled={!onCreateDirectory}\n          divider\n        >\n          {t('templateEditorToolbarFileMenu.options.createDirectory')}\n        </MenuItem>\n        <MenuItem onClick={handleCloseEditor} disabled={!onCloseDirectory}>\n          {t('templateEditorToolbarFileMenu.options.closeEditor')}\n        </MenuItem>\n      </Menu>\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AA0BO,SAAS,8BAA8B,KAI3C,EAAA;AACD,EAAA,MAAM,EAAE,eAAA,EAAiB,iBAAmB,EAAA,gBAAA,EAAqB,GAAA,KAAA,CAAA;AACjE,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,wBAAwB,CAAA,CAAA;AACxD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAA6B,IAAI,CAAA,CAAA;AAEjE,EAAA,MAAM,cAAiB,GAAA,WAAA;AAAA,IACrB,CAAC,KAAyC,KAAA;AACxC,MAAA,WAAA,CAAY,MAAM,aAAa,CAAA,CAAA;AAAA,KACjC;AAAA,IACA,CAAC,WAAW,CAAA;AAAA,GACd,CAAA;AAEA,EAAM,MAAA,eAAA,GAAkB,YAAY,MAAM;AACxC,IAAA,WAAA,CAAY,IAAI,CAAA,CAAA;AAAA,GAClB,EAAG,CAAC,WAAW,CAAC,CAAA,CAAA;AAEhB,EAAM,MAAA,mBAAA,GAAsB,YAAY,MAAM;AAC5C,IAAgB,eAAA,EAAA,CAAA;AAChB,IAAkB,eAAA,IAAA,CAAA;AAAA,GACjB,EAAA,CAAC,eAAiB,EAAA,eAAe,CAAC,CAAA,CAAA;AAErC,EAAM,MAAA,qBAAA,GAAwB,YAAY,MAAM;AAC9C,IAAgB,eAAA,EAAA,CAAA;AAChB,IAAoB,iBAAA,IAAA,CAAA;AAAA,GACnB,EAAA,CAAC,eAAiB,EAAA,iBAAiB,CAAC,CAAA,CAAA;AAEvC,EAAM,MAAA,iBAAA,GAAoB,YAAY,MAAM;AAC1C,IAAgB,eAAA,EAAA,CAAA;AAChB,IAAmB,gBAAA,IAAA,CAAA;AAAA,GAClB,EAAA,CAAC,eAAiB,EAAA,gBAAgB,CAAC,CAAA,CAAA;AAEtC,EAAA,uBAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,eAAc,EAAA,WAAA;AAAA,MACd,eAAc,EAAA,MAAA;AAAA,MACd,OAAS,EAAA,cAAA;AAAA,KAAA;AAAA,IAER,EAAE,sCAAsC,CAAA;AAAA,GAE3C,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,EAAG,EAAA,WAAA;AAAA,MACH,QAAA;AAAA,MACA,IAAA,EAAM,QAAQ,QAAQ,CAAA;AAAA,MACtB,OAAS,EAAA,eAAA;AAAA,MACT,kBAAoB,EAAA,IAAA;AAAA,MACpB,YAAc,EAAA;AAAA,QACZ,QAAU,EAAA,QAAA;AAAA,QACV,UAAY,EAAA,MAAA;AAAA,OACd;AAAA,MACA,eAAiB,EAAA;AAAA,QACf,QAAU,EAAA,KAAA;AAAA,QACV,UAAY,EAAA,MAAA;AAAA,OACd;AAAA,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA,CAAC,YAAS,OAAS,EAAA,mBAAA,EAAqB,UAAU,CAAC,eAAA,EAAA,EAChD,CAAE,CAAA,qDAAqD,CAC1D,CAAA;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,OAAS,EAAA,qBAAA;AAAA,QACT,UAAU,CAAC,iBAAA;AAAA,QACX,OAAO,EAAA,IAAA;AAAA,OAAA;AAAA,MAEN,EAAE,uDAAuD,CAAA;AAAA,KAC5D;AAAA,oBACA,KAAA,CAAA,aAAA,CAAC,YAAS,OAAS,EAAA,iBAAA,EAAmB,UAAU,CAAC,gBAAA,EAAA,EAC9C,CAAE,CAAA,mDAAmD,CACxD,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}

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