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

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

@@ -1 +1 @@
-{"version":3,"file":"TemplateEditorIntro.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateEditorIntro.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport Card from '@material-ui/core/Card';\nimport CardActionArea from '@material-ui/core/CardActionArea';\nimport CardContent from '@material-ui/core/CardContent';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport Typography from '@material-ui/core/Typography';\nimport InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { WebFileSystemAccess } from '../../../lib/filesystem';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\n\nconst useStyles = makeStyles(theme => ({\n  introText: {\n    textAlign: 'center',\n    marginTop: theme.spacing(2),\n  },\n  card: {\n    position: 'relative',\n    maxWidth: 340,\n    marginTop: theme.spacing(4),\n    margin: theme.spacing(0, 2),\n  },\n  infoIcon: {\n    position: 'absolute',\n    top: theme.spacing(1),\n    right: theme.spacing(1),\n  },\n}));\n\ninterface EditorIntroProps {\n  style?: JSX.IntrinsicElements['div']['style'];\n  onSelect?: (\n    option: 'create-template' | 'local' | 'form' | 'field-explorer',\n  ) => void;\n}\n\nexport function TemplateEditorIntro(props: EditorIntroProps) {\n  const classes = useStyles();\n  const supportsLoad = WebFileSystemAccess.isSupported();\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  const cardLoadLocal = (\n    <Card className={classes.card} elevation={4}>\n      <CardActionArea\n        disabled={!supportsLoad}\n        onClick={() => props.onSelect?.('local')}\n      >\n        <CardContent>\n          <Typography\n            variant=\"h4\"\n            component=\"h3\"\n            gutterBottom\n            color={supportsLoad ? undefined : 'textSecondary'}\n            style={{ display: 'flex', flexFlow: 'row nowrap' }}\n          >\n            {t('templateEditorPage.templateEditorIntro.loadLocal.title')}\n          </Typography>\n          <Typography\n            variant=\"body1\"\n            color={supportsLoad ? undefined : 'textSecondary'}\n          >\n            {t('templateEditorPage.templateEditorIntro.loadLocal.description')}\n          </Typography>\n        </CardContent>\n      </CardActionArea>\n      {!supportsLoad && (\n        <div className={classes.infoIcon}>\n          <Tooltip\n            placement=\"top\"\n            title={t(\n              'templateEditorPage.templateEditorIntro.loadLocal.unsupportedTooltip',\n            )}\n          >\n            <InfoOutlinedIcon />\n          </Tooltip>\n        </div>\n      )}\n    </Card>\n  );\n\n  const cardCreateLocal = (\n    <Card className={classes.card} elevation={4}>\n      <CardActionArea\n        disabled={!supportsLoad}\n        onClick={() => props.onSelect?.('create-template')}\n      >\n        <CardContent>\n          <Typography\n            variant=\"h4\"\n            component=\"h3\"\n            gutterBottom\n            color={supportsLoad ? undefined : 'textSecondary'}\n            style={{ display: 'flex', flexFlow: 'row nowrap' }}\n          >\n            {t('templateEditorPage.templateEditorIntro.createLocal.title')}\n          </Typography>\n          <Typography\n            variant=\"body1\"\n            color={supportsLoad ? undefined : 'textSecondary'}\n          >\n            {t(\n              'templateEditorPage.templateEditorIntro.createLocal.description',\n            )}\n          </Typography>\n        </CardContent>\n      </CardActionArea>\n      {!supportsLoad && (\n        <div className={classes.infoIcon}>\n          <Tooltip\n            placement=\"top\"\n            title={t(\n              'templateEditorPage.templateEditorIntro.createLocal.unsupportedTooltip',\n            )}\n          >\n            <InfoOutlinedIcon />\n          </Tooltip>\n        </div>\n      )}\n    </Card>\n  );\n\n  const cardFormEditor = (\n    <Card className={classes.card} elevation={4}>\n      <CardActionArea onClick={() => props.onSelect?.('form')}>\n        <CardContent>\n          <Typography variant=\"h4\" component=\"h3\" gutterBottom>\n            {t('templateEditorPage.templateEditorIntro.formEditor.title')}\n          </Typography>\n          <Typography variant=\"body1\">\n            {t('templateEditorPage.templateEditorIntro.formEditor.description')}\n          </Typography>\n        </CardContent>\n      </CardActionArea>\n    </Card>\n  );\n\n  const cardFieldExplorer = (\n    <Card className={classes.card} elevation={4}>\n      <CardActionArea onClick={() => props.onSelect?.('field-explorer')}>\n        <CardContent>\n          <Typography variant=\"h4\" component=\"h3\" gutterBottom>\n            {t('templateEditorPage.templateEditorIntro.fieldExplorer.title')}\n          </Typography>\n          <Typography variant=\"body1\">\n            {t(\n              'templateEditorPage.templateEditorIntro.fieldExplorer.description',\n            )}\n          </Typography>\n        </CardContent>\n      </CardActionArea>\n    </Card>\n  );\n\n  return (\n    <div style={props.style}>\n      <Typography variant=\"h4\" component=\"h2\" className={classes.introText}>\n        {t('templateEditorPage.templateEditorIntro.title')}\n      </Typography>\n      <div\n        style={{\n          display: 'flex',\n          flexFlow: 'row wrap',\n          alignItems: 'flex-start',\n          justifyContent: 'center',\n          alignContent: 'flex-start',\n        }}\n      >\n        {supportsLoad && cardLoadLocal}\n        {supportsLoad && cardCreateLocal}\n        {cardFormEditor}\n        {!supportsLoad && cardLoadLocal}\n        {cardFieldExplorer}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TemplateEditorIntro.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateEditorIntro.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport Card from '@material-ui/core/Card';\nimport CardActionArea from '@material-ui/core/CardActionArea';\nimport CardContent from '@material-ui/core/CardContent';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { WebFileSystemAccess } from '../../../lib/filesystem';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\nimport CreateNewFolderIcon from '@material-ui/icons/CreateNewFolder';\nimport ListAltIcon from '@material-ui/icons/ListAlt';\nimport FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';\nimport InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';\nimport CardMedia from '@material-ui/core/CardMedia';\nimport PublishIcon from '@material-ui/icons/Publish';\nimport SvgIcon from '@material-ui/core/SvgIcon';\nimport Tooltip from '@material-ui/core/Tooltip';\n\nconst useStyles = makeStyles(theme => ({\n  gridRoot: {\n    display: 'flex',\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  cardGrid: {\n    maxWidth: 1000,\n    display: 'grid',\n    gridGap: theme.spacing(2),\n    gridAutoFlow: 'row',\n    [theme.breakpoints.up('md')]: {\n      gridTemplateRows: '1fr 1fr',\n      gridTemplateColumns: '1fr 1fr',\n    },\n  },\n  card: {\n    display: 'grid',\n    gridTemplateColumns: 'auto 1fr',\n    gridTemplateRows: '1fr',\n    alignItems: 'center',\n    margin: theme.spacing(0, 1),\n    marginTop: theme.spacing(2),\n    padding: theme.spacing(2),\n  },\n  icon: {\n    justifySelf: 'center',\n    paddingTop: theme.spacing(1),\n    fontSize: 48,\n  },\n  introText: {\n    textAlign: 'center',\n    marginTop: theme.spacing(2),\n  },\n  infoIcon: {\n    position: 'absolute',\n    top: theme.spacing(1),\n    right: theme.spacing(1),\n  },\n  cardContent: {\n    padding: theme.spacing(1),\n  },\n}));\n\ninterface EditorIntroProps {\n  style?: JSX.IntrinsicElements['div']['style'];\n  onSelect?: (\n    option: 'create-template' | 'local' | 'form' | 'field-explorer',\n  ) => void;\n}\n\nfunction ActionCard(props: {\n  title: string;\n  description: string;\n  Icon: typeof SvgIcon;\n  action?: React.MouseEventHandler;\n  requireLoad?: boolean;\n}) {\n  const supportsLoad = props.requireLoad\n    ? WebFileSystemAccess.isSupported()\n    : true;\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  const classes = useStyles();\n  const { Icon, title, description, action } = props;\n  return (\n    <Card className={classes.card}>\n      {!supportsLoad && (\n        <Tooltip\n          placement=\"top\"\n          title={t(\n            'templateEditorPage.templateEditorIntro.loadLocal.unsupportedTooltip',\n          )}\n        >\n          <InfoOutlinedIcon />\n        </Tooltip>\n      )}\n\n      <CardActionArea onClick={action}>\n        <CardMedia>\n          <Icon\n            className={classes.icon}\n            color={supportsLoad ? undefined : 'disabled'}\n          />\n        </CardMedia>\n        <CardContent className={classes.cardContent}>\n          <Typography\n            gutterBottom\n            variant=\"h5\"\n            component=\"h2\"\n            color={supportsLoad ? undefined : 'textSecondary'}\n          >\n            {title}\n          </Typography>\n          <Typography variant=\"body2\" color=\"textSecondary\" component=\"p\">\n            {description}\n          </Typography>\n        </CardContent>\n      </CardActionArea>\n    </Card>\n  );\n}\nexport function TemplateEditorIntro(props: EditorIntroProps) {\n  const classes = useStyles();\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  return (\n    <div style={props.style}>\n      <Typography variant=\"h4\" component=\"h2\" className={classes.introText}>\n        {t('templateEditorPage.templateEditorIntro.title')}\n      </Typography>\n      <div className={classes.gridRoot}>\n        <div className={classes.cardGrid}>\n          <ActionCard\n            title={t('templateEditorPage.templateEditorIntro.loadLocal.title')}\n            description={t(\n              'templateEditorPage.templateEditorIntro.loadLocal.description',\n            )}\n            requireLoad\n            Icon={PublishIcon}\n            action={() => props.onSelect?.('local')}\n          />\n          <ActionCard\n            title={t(\n              'templateEditorPage.templateEditorIntro.createLocal.title',\n            )}\n            description={t(\n              'templateEditorPage.templateEditorIntro.createLocal.description',\n            )}\n            requireLoad\n            action={() => props.onSelect?.('create-template')}\n            Icon={CreateNewFolderIcon}\n          />\n\n          <ActionCard\n            title={t('templateEditorPage.templateEditorIntro.formEditor.title')}\n            description={t(\n              'templateEditorPage.templateEditorIntro.formEditor.description',\n            )}\n            Icon={ListAltIcon}\n            action={() => props.onSelect?.('form')}\n          />\n\n          <ActionCard\n            title={t(\n              'templateEditorPage.templateEditorIntro.fieldExplorer.title',\n            )}\n            description={t(\n              'templateEditorPage.templateEditorIntro.fieldExplorer.description',\n            )}\n            Icon={FormatListBulletedIcon}\n            action={() => props.onSelect?.('field-explorer')}\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,94 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+
+const TemplateEditorLayout = withStyles(
+  (theme) => ({
+    root: {
+      height: "100%",
+      gridArea: "pageContent",
+      display: "grid",
+      gridTemplateAreas: `
+      "toolbar"
+      "browser"
+      "editor"
+      "preview"
+      "results"
+    `,
+      [theme.breakpoints.up("md")]: {
+        gridTemplateAreas: `
+      "toolbar toolbar toolbar"
+      "browser editor preview"
+      "results results results"
+    `,
+        gridTemplateColumns: "1fr 3fr 2fr",
+        gridTemplateRows: "auto 1fr auto"
+      }
+    }
+  }),
+  { name: "ScaffolderTemplateEditorLayout" }
+)(({ children, classes }) => /* @__PURE__ */ React.createElement("main", { className: classes.root }, children));
+const TemplateEditorLayoutToolbar = withStyles(
+  {
+    root: {
+      gridArea: "toolbar"
+    }
+  },
+  { name: "ScaffolderTemplateEditorLayoutToolbar" }
+)(({ children, classes }) => /* @__PURE__ */ React.createElement("section", { className: classes.root }, children));
+const TemplateEditorLayoutBrowser = withStyles(
+  (theme) => ({
+    root: {
+      gridArea: "browser",
+      overflow: "auto",
+      [theme.breakpoints.up("md")]: {
+        borderRight: `1px solid ${theme.palette.divider}`
+      }
+    }
+  }),
+  { name: "ScaffolderTemplateEditorLayoutBrowser" }
+)(({ children, classes }) => /* @__PURE__ */ React.createElement("section", { className: classes.root }, children));
+const TemplateEditorLayoutFiles = withStyles(
+  {
+    root: {
+      gridArea: "editor",
+      overflow: "auto"
+    }
+  },
+  { name: "ScaffolderTemplateEditorLayoutFiles" }
+)(({ children, classes }) => /* @__PURE__ */ React.createElement("section", { className: classes.root }, children));
+const TemplateEditorLayoutPreview = withStyles(
+  (theme) => ({
+    root: {
+      gridArea: "preview",
+      position: "relative",
+      backgroundColor: theme.palette.background.default,
+      [theme.breakpoints.up("md")]: {
+        borderLeft: `1px solid ${theme.palette.divider}`
+      }
+    },
+    scroll: {
+      height: "100%",
+      padding: theme.spacing(1),
+      [theme.breakpoints.up("md")]: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        overflow: "auto"
+      }
+    }
+  }),
+  { name: "ScaffolderTemplateEditorLayoutPreview" }
+)(({ children, classes }) => /* @__PURE__ */ React.createElement("section", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.scroll }, children)));
+const TemplateEditorLayoutConsole = withStyles(
+  {
+    root: {
+      gridArea: "results"
+    }
+  },
+  { name: "ScaffolderTemplateEditorLayoutConsole" }
+)(({ children, classes }) => /* @__PURE__ */ React.createElement("section", { className: classes.root }, children));
+
+export { TemplateEditorLayout, TemplateEditorLayoutBrowser, TemplateEditorLayoutConsole, TemplateEditorLayoutFiles, TemplateEditorLayoutPreview, TemplateEditorLayoutToolbar };
+//# sourceMappingURL=TemplateEditorLayout.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateEditorLayout.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateEditorLayout.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, { PropsWithChildren } from 'react';\nimport { WithStyles, withStyles } from '@material-ui/core/styles';\n\nexport const TemplateEditorLayout = withStyles(\n  theme => ({\n    root: {\n      height: '100%',\n      gridArea: 'pageContent',\n      display: 'grid',\n      gridTemplateAreas: `\n      \"toolbar\"\n      \"browser\"\n      \"editor\"\n      \"preview\"\n      \"results\"\n    `,\n      [theme.breakpoints.up('md')]: {\n        gridTemplateAreas: `\n      \"toolbar toolbar toolbar\"\n      \"browser editor preview\"\n      \"results results results\"\n    `,\n        gridTemplateColumns: '1fr 3fr 2fr',\n        gridTemplateRows: 'auto 1fr auto',\n      },\n    },\n  }),\n  { name: 'ScaffolderTemplateEditorLayout' },\n)(({ children, classes }: PropsWithChildren<WithStyles>) => (\n  <main className={classes.root}>{children}</main>\n));\n\nexport const TemplateEditorLayoutToolbar = withStyles(\n  {\n    root: {\n      gridArea: 'toolbar',\n    },\n  },\n  { name: 'ScaffolderTemplateEditorLayoutToolbar' },\n)(({ children, classes }: PropsWithChildren<WithStyles>) => (\n  <section className={classes.root}>{children}</section>\n));\n\nexport const TemplateEditorLayoutBrowser = withStyles(\n  theme => ({\n    root: {\n      gridArea: 'browser',\n      overflow: 'auto',\n      [theme.breakpoints.up('md')]: {\n        borderRight: `1px solid ${theme.palette.divider}`,\n      },\n    },\n  }),\n  { name: 'ScaffolderTemplateEditorLayoutBrowser' },\n)(({ children, classes }: PropsWithChildren<WithStyles>) => (\n  <section className={classes.root}>{children}</section>\n));\n\nexport const TemplateEditorLayoutFiles = withStyles(\n  {\n    root: {\n      gridArea: 'editor',\n      overflow: 'auto',\n    },\n  },\n  { name: 'ScaffolderTemplateEditorLayoutFiles' },\n)(({ children, classes }: PropsWithChildren<WithStyles>) => (\n  <section className={classes.root}>{children}</section>\n));\n\nexport const TemplateEditorLayoutPreview = withStyles(\n  theme => ({\n    root: {\n      gridArea: 'preview',\n      position: 'relative',\n      backgroundColor: theme.palette.background.default,\n      [theme.breakpoints.up('md')]: {\n        borderLeft: `1px solid ${theme.palette.divider}`,\n      },\n    },\n    scroll: {\n      height: '100%',\n      padding: theme.spacing(1),\n      [theme.breakpoints.up('md')]: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        overflow: 'auto',\n      },\n    },\n  }),\n  { name: 'ScaffolderTemplateEditorLayoutPreview' },\n)(({ children, classes }: PropsWithChildren<WithStyles>) => (\n  <section className={classes.root}>\n    <div className={classes.scroll}>{children}</div>\n  </section>\n));\n\nexport const TemplateEditorLayoutConsole = withStyles(\n  {\n    root: {\n      gridArea: 'results',\n    },\n  },\n  { name: 'ScaffolderTemplateEditorLayoutConsole' },\n)(({ children, classes }: PropsWithChildren<WithStyles>) => (\n  <section className={classes.root}>{children}</section>\n));\n"],"names":[],"mappings":"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"}

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

@@ -1,58 +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 { ScaffolderPageContextMenu } from '@backstage/plugin-scaffolder-react/alpha';
-import { useNavigate } from 'react-router-dom';
 import { useRouteRef } from '@backstage/core-plugin-api';
-import { actionsRouteRef, scaffolderListTaskRouteRef, 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 actionsLink = useRouteRef(actionsRouteRef);
-  const tasksLink = useRouteRef(scaffolderListTaskRouteRef);
-  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);
-  const scaffolderPageContextMenuProps = {
-    onEditorClicked: void 0,
-    onActionsClicked: () => navigate(actionsLink()),
-    onTasksClicked: () => navigate(tasksLink()),
-    onCreateClicked: () => navigate(createLink())
-  };
   return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(
     Header,
     {
       title: t("templateEditorPage.title"),
-      subtitle: t("templateEditorPage.subtitle")
-    },
-    /* @__PURE__ */ React.createElement(ScaffolderPageContextMenu, { ...scaffolderPageContextMenuProps })
-  ), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(
-    TemplateEditorIntro,
+      subtitle: t("templateEditorPage.subtitle"),
+      type: t("templateIntroPage.title"),
+      typeLink: editLink()
+    }
+  ), /* @__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 { ScaffolderPageContextMenu } from '@backstage/plugin-scaffolder-react/alpha';\nimport { useNavigate } from 'react-router-dom';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport {\n  actionsRouteRef,\n  editorRouteRef,\n  customFieldsRouteRef,\n  rootRouteRef,\n  scaffolderListTaskRouteRef,\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 actionsLink = useRouteRef(actionsRouteRef);\n  const tasksLink = useRouteRef(scaffolderListTaskRouteRef);\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  const scaffolderPageContextMenuProps = {\n    onEditorClicked: undefined,\n    onActionsClicked: () => navigate(actionsLink()),\n    onTasksClicked: () => navigate(tasksLink()),\n    onCreateClicked: () => navigate(createLink()),\n  };\n\n  return (\n    <Page themeId=\"home\">\n      <Header\n        title={t('templateEditorPage.title')}\n        subtitle={t('templateEditorPage.subtitle')}\n      >\n        <ScaffolderPageContextMenu {...scaffolderPageContextMenuProps} />\n      </Header>\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":";;;;;;;;;;;;AAqCO,SAAS,kBAAqB,GAAA;AACnC,EAAA,MAAM,WAAW,WAAY,EAAA,CAAA;AAC7B,EAAM,MAAA,WAAA,GAAc,YAAY,eAAe,CAAA,CAAA;AAC/C,EAAM,MAAA,SAAA,GAAY,YAAY,0BAA0B,CAAA,CAAA;AACxD,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,EAAA,MAAM,8BAAiC,GAAA;AAAA,IACrC,eAAiB,EAAA,KAAA,CAAA;AAAA,IACjB,gBAAkB,EAAA,MAAM,QAAS,CAAA,WAAA,EAAa,CAAA;AAAA,IAC9C,cAAgB,EAAA,MAAM,QAAS,CAAA,SAAA,EAAW,CAAA;AAAA,IAC1C,eAAiB,EAAA,MAAM,QAAS,CAAA,UAAA,EAAY,CAAA;AAAA,GAC9C,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,0BAA0B,CAAA;AAAA,MACnC,QAAA,EAAU,EAAE,6BAA6B,CAAA;AAAA,KAAA;AAAA,oBAEzC,KAAA,CAAA,aAAA,CAAC,yBAA2B,EAAA,EAAA,GAAG,8BAAgC,EAAA,CAAA;AAAA,GACjE,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;;;;"}