@backstage/plugin-scaffolder 1.24.0-next.2 → 1.24.0

package/dist/next/TemplateEditorPage/TemplateEditorIntro.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateEditorIntro.esm.js","sources":["../../../src/next/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';\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?: (option: 'local' | 'form' | 'field-explorer') => void;\n}\n\nexport function TemplateEditorIntro(props: EditorIntroProps) {\n  const classes = useStyles();\n  const supportsLoad = WebFileSystemAccess.isSupported();\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            Load Template Directory\n          </Typography>\n          <Typography\n            variant=\"body1\"\n            color={supportsLoad ? undefined : 'textSecondary'}\n          >\n            Load a local template directory, allowing you to both edit and try\n            executing your own template.\n          </Typography>\n        </CardContent>\n      </CardActionArea>\n      {!supportsLoad && (\n        <div className={classes.infoIcon}>\n          <Tooltip\n            placement=\"top\"\n            title=\"Only supported in some Chromium-based browsers\"\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            Edit Template Form\n          </Typography>\n          <Typography variant=\"body1\">\n            Preview and edit a template form, either using a sample template or\n            by loading a template from the catalog.\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            Custom Field Explorer\n          </Typography>\n          <Typography variant=\"body1\">\n            View and play around with available installed custom field\n            extensions.\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        Get started by choosing one of the options below\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        {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/next/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?: (option: 'local' | 'form' | 'field-explorer') => 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 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        {cardFormEditor}\n        {!supportsLoad && cardLoadLocal}\n        {cardFieldExplorer}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/next/TemplateEditorPage/TemplateEditorPage.esm.js

@@ -9,6 +9,8 @@ import { ScaffolderPageContextMenu } from '@backstage/plugin-scaffolder-react/al
 import { useNavigate } from 'react-router-dom';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import { actionsRouteRef, scaffolderListTaskRouteRef, rootRouteRef } from '../../routes.esm.js';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { scaffolderTranslationRef } from '../../translation.esm.js';
 
 function TemplateEditorPage(props) {
   const [selection, setSelection] = useState();
@@ -16,6 +18,7 @@ function TemplateEditorPage(props) {
   const actionsLink = useRouteRef(actionsRouteRef);
   const tasksLink = useRouteRef(scaffolderListTaskRouteRef);
   const createLink = useRouteRef(rootRouteRef);
+  const { t } = useTranslationRef(scaffolderTranslationRef);
   const scaffolderPageContextMenuProps = {
     onEditorClicked: void 0,
     onActionsClicked: () => navigate(actionsLink()),
@@ -71,8 +74,8 @@ function TemplateEditorPage(props) {
   return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(
     Header,
     {
-      title: "Template Editor",
-      subtitle: "Edit, preview, and try out templates and template forms"
+      title: t("templateEditorPage.title"),
+      subtitle: t("templateEditorPage.subtitle")
     },
     /* @__PURE__ */ React.createElement(ScaffolderPageContextMenu, { ...scaffolderPageContextMenuProps })
   ), content);

package/dist/next/TemplateEditorPage/TemplateEditorPage.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateEditorPage.esm.js","sources":["../../../src/next/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, { useState } from 'react';\nimport { Content, Header, Page } from '@backstage/core-components';\nimport {\n  TemplateDirectoryAccess,\n  WebFileSystemAccess,\n} from '../../lib/filesystem';\nimport { CustomFieldExplorer } from './CustomFieldExplorer';\nimport { TemplateEditor } from './TemplateEditor';\nimport { TemplateFormPreviewer } from './TemplateFormPreviewer';\nimport {\n  FieldExtensionOptions,\n  type LayoutOptions,\n} from '@backstage/plugin-scaffolder-react';\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  rootRouteRef,\n  scaffolderListTaskRouteRef,\n} from '../../routes';\n\ntype Selection =\n  | {\n      type: 'local';\n      directory: TemplateDirectoryAccess;\n    }\n  | {\n      type: 'form';\n    }\n  | {\n      type: 'field-explorer';\n    };\n\ninterface TemplateEditorPageProps {\n  defaultPreviewTemplate?: string;\n  customFieldExtensions?: FieldExtensionOptions<any, any>[];\n  layouts?: LayoutOptions[];\n}\n\nexport function TemplateEditorPage(props: TemplateEditorPageProps) {\n  const [selection, setSelection] = useState<Selection>();\n  const navigate = useNavigate();\n  const actionsLink = useRouteRef(actionsRouteRef);\n  const tasksLink = useRouteRef(scaffolderListTaskRouteRef);\n  const createLink = useRouteRef(rootRouteRef);\n\n  const scaffolderPageContextMenuProps = {\n    onEditorClicked: undefined,\n    onActionsClicked: () => navigate(actionsLink()),\n    onTasksClicked: () => navigate(tasksLink()),\n    onCreateClicked: () => navigate(createLink()),\n  };\n\n  let content: JSX.Element | null = null;\n  if (selection?.type === 'local') {\n    content = (\n      <TemplateEditor\n        directory={selection.directory}\n        fieldExtensions={props.customFieldExtensions}\n        onClose={() => setSelection(undefined)}\n        layouts={props.layouts}\n      />\n    );\n  } else if (selection?.type === 'form') {\n    content = (\n      <TemplateFormPreviewer\n        defaultPreviewTemplate={props.defaultPreviewTemplate}\n        customFieldExtensions={props.customFieldExtensions}\n        onClose={() => setSelection(undefined)}\n        layouts={props.layouts}\n      />\n    );\n  } else if (selection?.type === 'field-explorer') {\n    content = (\n      <CustomFieldExplorer\n        customFieldExtensions={props.customFieldExtensions}\n        onClose={() => setSelection(undefined)}\n      />\n    );\n  } else {\n    content = (\n      <Content>\n        <TemplateEditorIntro\n          onSelect={option => {\n            if (option === 'local') {\n              WebFileSystemAccess.requestDirectoryAccess()\n                .then(directory => setSelection({ type: 'local', directory }))\n                .catch(() => {});\n            } else if (option === 'form') {\n              setSelection({ type: 'form' });\n            } else if (option === 'field-explorer') {\n              setSelection({ type: 'field-explorer' });\n            }\n          }}\n        />\n      </Content>\n    );\n  }\n\n  return (\n    <Page themeId=\"home\">\n      <Header\n        title=\"Template Editor\"\n        subtitle=\"Edit, preview, and try out templates and template forms\"\n      >\n        <ScaffolderPageContextMenu {...scaffolderPageContextMenuProps} />\n      </Header>\n      {content}\n    </Page>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TemplateEditorPage.esm.js","sources":["../../../src/next/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, { useState } from 'react';\nimport { Content, Header, Page } from '@backstage/core-components';\nimport {\n  TemplateDirectoryAccess,\n  WebFileSystemAccess,\n} from '../../lib/filesystem';\nimport { CustomFieldExplorer } from './CustomFieldExplorer';\nimport { TemplateEditor } from './TemplateEditor';\nimport { TemplateFormPreviewer } from './TemplateFormPreviewer';\nimport {\n  FieldExtensionOptions,\n  type LayoutOptions,\n} from '@backstage/plugin-scaffolder-react';\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  rootRouteRef,\n  scaffolderListTaskRouteRef,\n} from '../../routes';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../translation';\n\ntype Selection =\n  | {\n      type: 'local';\n      directory: TemplateDirectoryAccess;\n    }\n  | {\n      type: 'form';\n    }\n  | {\n      type: 'field-explorer';\n    };\n\ninterface TemplateEditorPageProps {\n  defaultPreviewTemplate?: string;\n  customFieldExtensions?: FieldExtensionOptions<any, any>[];\n  layouts?: LayoutOptions[];\n}\n\nexport function TemplateEditorPage(props: TemplateEditorPageProps) {\n  const [selection, setSelection] = useState<Selection>();\n  const navigate = useNavigate();\n  const actionsLink = useRouteRef(actionsRouteRef);\n  const tasksLink = useRouteRef(scaffolderListTaskRouteRef);\n  const createLink = useRouteRef(rootRouteRef);\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  let content: JSX.Element | null = null;\n  if (selection?.type === 'local') {\n    content = (\n      <TemplateEditor\n        directory={selection.directory}\n        fieldExtensions={props.customFieldExtensions}\n        onClose={() => setSelection(undefined)}\n        layouts={props.layouts}\n      />\n    );\n  } else if (selection?.type === 'form') {\n    content = (\n      <TemplateFormPreviewer\n        defaultPreviewTemplate={props.defaultPreviewTemplate}\n        customFieldExtensions={props.customFieldExtensions}\n        onClose={() => setSelection(undefined)}\n        layouts={props.layouts}\n      />\n    );\n  } else if (selection?.type === 'field-explorer') {\n    content = (\n      <CustomFieldExplorer\n        customFieldExtensions={props.customFieldExtensions}\n        onClose={() => setSelection(undefined)}\n      />\n    );\n  } else {\n    content = (\n      <Content>\n        <TemplateEditorIntro\n          onSelect={option => {\n            if (option === 'local') {\n              WebFileSystemAccess.requestDirectoryAccess()\n                .then(directory => setSelection({ type: 'local', directory }))\n                .catch(() => {});\n            } else if (option === 'form') {\n              setSelection({ type: 'form' });\n            } else if (option === 'field-explorer') {\n              setSelection({ type: 'field-explorer' });\n            }\n          }}\n        />\n      </Content>\n    );\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    </Page>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AA0DO,SAAS,mBAAmB,KAAgC,EAAA;AACjE,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,QAAoB,EAAA,CAAA;AACtD,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,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,EAAA,IAAI,OAA8B,GAAA,IAAA,CAAA;AAClC,EAAI,IAAA,SAAA,EAAW,SAAS,OAAS,EAAA;AAC/B,IACE,OAAA,mBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,WAAW,SAAU,CAAA,SAAA;AAAA,QACrB,iBAAiB,KAAM,CAAA,qBAAA;AAAA,QACvB,OAAA,EAAS,MAAM,YAAA,CAAa,KAAS,CAAA,CAAA;AAAA,QACrC,SAAS,KAAM,CAAA,OAAA;AAAA,OAAA;AAAA,KACjB,CAAA;AAAA,GAEJ,MAAA,IAAW,SAAW,EAAA,IAAA,KAAS,MAAQ,EAAA;AACrC,IACE,OAAA,mBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,qBAAA;AAAA,MAAA;AAAA,QACC,wBAAwB,KAAM,CAAA,sBAAA;AAAA,QAC9B,uBAAuB,KAAM,CAAA,qBAAA;AAAA,QAC7B,OAAA,EAAS,MAAM,YAAA,CAAa,KAAS,CAAA,CAAA;AAAA,QACrC,SAAS,KAAM,CAAA,OAAA;AAAA,OAAA;AAAA,KACjB,CAAA;AAAA,GAEJ,MAAA,IAAW,SAAW,EAAA,IAAA,KAAS,gBAAkB,EAAA;AAC/C,IACE,OAAA,mBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,mBAAA;AAAA,MAAA;AAAA,QACC,uBAAuB,KAAM,CAAA,qBAAA;AAAA,QAC7B,OAAA,EAAS,MAAM,YAAA,CAAa,KAAS,CAAA,CAAA;AAAA,OAAA;AAAA,KACvC,CAAA;AAAA,GAEG,MAAA;AACL,IAAA,OAAA,uCACG,OACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,mBAAA;AAAA,MAAA;AAAA,QACC,UAAU,CAAU,MAAA,KAAA;AAClB,UAAA,IAAI,WAAW,OAAS,EAAA;AACtB,YAAA,mBAAA,CAAoB,sBAAuB,EAAA,CACxC,IAAK,CAAA,CAAA,SAAA,KAAa,YAAa,CAAA,EAAE,IAAM,EAAA,OAAA,EAAS,SAAU,EAAC,CAAC,CAAA,CAC5D,MAAM,MAAM;AAAA,aAAE,CAAA,CAAA;AAAA,WACnB,MAAA,IAAW,WAAW,MAAQ,EAAA;AAC5B,YAAa,YAAA,CAAA,EAAE,IAAM,EAAA,MAAA,EAAQ,CAAA,CAAA;AAAA,WAC/B,MAAA,IAAW,WAAW,gBAAkB,EAAA;AACtC,YAAa,YAAA,CAAA,EAAE,IAAM,EAAA,gBAAA,EAAkB,CAAA,CAAA;AAAA,WACzC;AAAA,SACF;AAAA,OAAA;AAAA,KAEJ,CAAA,CAAA;AAAA,GAEJ;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,KAEhE,OACH,CAAA,CAAA;AAEJ;;;;"}

package/dist/next/TemplateEditorPage/TemplateEditorTextArea.esm.js

@@ -11,6 +11,8 @@ import { useKeyboardEvent } from '@react-hookz/web';
 import CodeMirror from '@uiw/react-codemirror';
 import React, { useMemo } from 'react';
 import { useDirectoryEditor } from './DirectoryEditorContext.esm.js';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { scaffolderTranslationRef } from '../../translation.esm.js';
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -42,6 +44,7 @@ const useStyles = makeStyles((theme) => ({
 function TemplateEditorTextArea(props) {
   const { errorText } = props;
   const classes = useStyles();
+  const { t } = useTranslationRef(scaffolderTranslationRef);
   const panelExtension = useMemo(() => {
     if (!errorText) {
       return showPanel.of(null);
@@ -70,21 +73,37 @@ function TemplateEditorTextArea(props) {
       value: props.content,
       onChange: props.onUpdate
     }
-  ), (props.onSave || props.onReload) && /* @__PURE__ */ React.createElement("div", { className: classes.floatingButtons }, /* @__PURE__ */ React.createElement(Paper, null, props.onSave && /* @__PURE__ */ React.createElement(Tooltip, { title: "Save file" }, /* @__PURE__ */ React.createElement(
-    IconButton,
+  ), (props.onSave || props.onReload) && /* @__PURE__ */ React.createElement("div", { className: classes.floatingButtons }, /* @__PURE__ */ React.createElement(Paper, null, props.onSave && /* @__PURE__ */ React.createElement(
+    Tooltip,
     {
-      className: classes.floatingButton,
-      onClick: () => props.onSave?.()
+      title: t(
+        "templateEditorPage.templateEditorTextArea.saveIconTooltip"
+      )
     },
-    /* @__PURE__ */ React.createElement(SaveIcon, null)
-  )), props.onReload && /* @__PURE__ */ React.createElement(Tooltip, { title: "Reload file" }, /* @__PURE__ */ React.createElement(
-    IconButton,
+    /* @__PURE__ */ React.createElement(
+      IconButton,
+      {
+        className: classes.floatingButton,
+        onClick: () => props.onSave?.()
+      },
+      /* @__PURE__ */ React.createElement(SaveIcon, null)
+    )
+  ), props.onReload && /* @__PURE__ */ React.createElement(
+    Tooltip,
     {
-      className: classes.floatingButton,
-      onClick: () => props.onReload?.()
+      title: t(
+        "templateEditorPage.templateEditorTextArea.refreshIconTooltip"
+      )
     },
-    /* @__PURE__ */ React.createElement(RefreshIcon, null)
-  )))));
+    /* @__PURE__ */ React.createElement(
+      IconButton,
+      {
+        className: classes.floatingButton,
+        onClick: () => props.onReload?.()
+      },
+      /* @__PURE__ */ React.createElement(RefreshIcon, null)
+    )
+  ))));
 }
 function TemplateEditorDirectoryEditorTextArea(props) {
   const directoryEditor = useDirectoryEditor();

package/dist/next/TemplateEditorPage/TemplateEditorTextArea.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateEditorTextArea.esm.js","sources":["../../../src/next/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 { 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';\n\nconst useStyles = makeStyles(theme => ({\n  container: {\n    position: 'relative',\n    width: '100%',\n    height: '100%',\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\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 title=\"Save file\">\n                <IconButton\n                  className={classes.floatingButton}\n                  onClick={() => props.onSave?.()}\n                >\n                  <SaveIcon />\n                </IconButton>\n              </Tooltip>\n            )}\n            {props.onReload && (\n              <Tooltip title=\"Reload file\">\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 directoryEditor = useDirectoryEditor();\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 => directoryEditor.selectedFile?.updateContent(content)}\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/next/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 { 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  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}) {\n  const directoryEditor = useDirectoryEditor();\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 => directoryEditor.selectedFile?.updateContent(content)}\n      {...actions}\n    />\n  );\n}\n\nTemplateEditorTextArea.DirectoryEditor = TemplateEditorDirectoryEditorTextArea;\n"],"names":["yamlSupport"],"mappings":"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"}

package/dist/next/TemplateEditorPage/TemplateFormPreviewer.esm.js

@@ -13,6 +13,8 @@ import useAsync from 'react-use/esm/useAsync';
 import yaml from 'yaml';
 import { TemplateEditorForm } from './TemplateEditorForm.esm.js';
 import { TemplateEditorTextArea } from './TemplateEditorTextArea.esm.js';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { scaffolderTranslationRef } from '../../translation.esm.js';
 
 const EXAMPLE_TEMPLATE_PARAMS_YAML = `# Edit the template parameters below to see how they will render in the scaffolder form UI
 parameters:
@@ -84,6 +86,7 @@ const TemplateFormPreviewer = ({
   layouts = []
 }) => {
   const classes = useStyles();
+  const { t } = useTranslationRef(scaffolderTranslationRef);
   const alertApi = useApi(alertApiRef);
   const catalogApi = useApi(catalogApiRef);
   const [selectedTemplate, setSelectedTemplate] = useState("");
@@ -125,11 +128,11 @@ const TemplateFormPreviewer = ({
     },
     [setTemplateYaml]
   );
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, loading && /* @__PURE__ */ React.createElement(LinearProgress, null), /* @__PURE__ */ React.createElement("main", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.controls }, /* @__PURE__ */ React.createElement(FormControl, { variant: "outlined", size: "small", fullWidth: true }, /* @__PURE__ */ React.createElement(InputLabel, { id: "select-template-label" }, "Load Existing Template"), /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, loading && /* @__PURE__ */ React.createElement(LinearProgress, null), /* @__PURE__ */ React.createElement("main", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.controls }, /* @__PURE__ */ React.createElement(FormControl, { variant: "outlined", size: "small", fullWidth: true }, /* @__PURE__ */ React.createElement(InputLabel, { id: "select-template-label" }, t("templateEditorPage.templateFormPreviewer.title")), /* @__PURE__ */ React.createElement(
     Select,
     {
       value: selectedTemplate,
-      label: "Load Existing Template",
+      label: t("templateEditorPage.templateFormPreviewer.title"),
       labelId: "select-template-label",
       onChange: (e) => handleSelectChange(e.target.value)
     },

package/dist/next/TemplateEditorPage/TemplateFormPreviewer.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateFormPreviewer.esm.js","sources":["../../../src/next/TemplateEditorPage/TemplateFormPreviewer.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { Entity } from '@backstage/catalog-model';\nimport { alertApiRef, useApi } from '@backstage/core-plugin-api';\nimport {\n  catalogApiRef,\n  humanizeEntityRef,\n} from '@backstage/plugin-catalog-react';\nimport FormControl from '@material-ui/core/FormControl';\nimport IconButton from '@material-ui/core/IconButton';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport LinearProgress from '@material-ui/core/LinearProgress';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport Select from '@material-ui/core/Select';\nimport { makeStyles } from '@material-ui/core/styles';\nimport CloseIcon from '@material-ui/icons/Close';\nimport React, { useCallback, useState } from 'react';\nimport useAsync from 'react-use/esm/useAsync';\nimport yaml from 'yaml';\nimport {\n  LayoutOptions,\n  FieldExtensionOptions,\n} from '@backstage/plugin-scaffolder-react';\nimport { TemplateEditorForm } from './TemplateEditorForm';\nimport { TemplateEditorTextArea } from './TemplateEditorTextArea';\n\nconst EXAMPLE_TEMPLATE_PARAMS_YAML = `# Edit the template parameters below to see how they will render in the scaffolder form UI\nparameters:\n  - title: Fill in some steps\n    required:\n      - name\n    properties:\n      name:\n        title: Name\n        type: string\n        description: Unique name of the component\n      owner:\n        title: Owner\n        type: string\n        description: Owner of the component\n        ui:field: OwnerPicker\n        ui:options:\n          catalogFilter:\n            kind: Group\n  - title: Choose a location\n    required:\n      - repoUrl\n    properties:\n      repoUrl:\n        title: Repository Location\n        type: string\n        ui:field: RepoUrlPicker\n        ui:options:\n          allowedHosts:\n            - github.com\nsteps:\n  - id: fetch-base\n    name: Fetch Base\n    action: fetch:template\n    input:\n      url: ./template\n      values:\n        name: \\${{parameters.name}}\n`;\n\ntype TemplateOption = {\n  label: string;\n  value: Entity;\n};\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    gridArea: 'pageContent',\n    display: 'grid',\n    gridTemplateAreas: `\n      \"controls controls\"\n      \"textArea preview\"\n    `,\n    gridTemplateRows: 'auto 1fr',\n    gridTemplateColumns: '1fr 1fr',\n  },\n  controls: {\n    gridArea: 'controls',\n    display: 'flex',\n    flexFlow: 'row nowrap',\n    alignItems: 'center',\n    margin: theme.spacing(1),\n  },\n  textArea: {\n    gridArea: 'textArea',\n  },\n  preview: {\n    gridArea: 'preview',\n  },\n}));\n\nexport const TemplateFormPreviewer = ({\n  defaultPreviewTemplate = EXAMPLE_TEMPLATE_PARAMS_YAML,\n  customFieldExtensions = [],\n  onClose,\n  layouts = [],\n}: {\n  defaultPreviewTemplate?: string;\n  customFieldExtensions?: FieldExtensionOptions<any, any>[];\n  onClose?: () => void;\n  layouts?: LayoutOptions[];\n}) => {\n  const classes = useStyles();\n  const alertApi = useApi(alertApiRef);\n  const catalogApi = useApi(catalogApiRef);\n  const [selectedTemplate, setSelectedTemplate] = useState('');\n  const [errorText, setErrorText] = useState<string>();\n  const [templateOptions, setTemplateOptions] = useState<TemplateOption[]>([]);\n  const [templateYaml, setTemplateYaml] = useState(defaultPreviewTemplate);\n\n  const { loading } = useAsync(\n    () =>\n      catalogApi\n        .getEntities({\n          filter: { kind: 'template' },\n          fields: [\n            'kind',\n            'metadata.namespace',\n            'metadata.name',\n            'metadata.title',\n            'spec.parameters',\n            'spec.steps',\n            'spec.output',\n          ],\n        })\n        .then(({ items }) =>\n          setTemplateOptions(\n            items.map(template => ({\n              label:\n                template.metadata.title ??\n                humanizeEntityRef(template, { defaultKind: 'template' }),\n              value: template,\n            })),\n          ),\n        )\n        .catch(e =>\n          alertApi.post({\n            message: `Error loading exisiting templates: ${e.message}`,\n            severity: 'error',\n          }),\n        ),\n    [catalogApi],\n  );\n\n  const handleSelectChange = useCallback(\n    // TODO(Rugvip): Afaik this should be Entity, but didn't want to make runtime changes while fixing types\n    (selected: any) => {\n      setSelectedTemplate(selected);\n      setTemplateYaml(yaml.stringify(selected.spec));\n    },\n    [setTemplateYaml],\n  );\n\n  return (\n    <>\n      {loading && <LinearProgress />}\n      <main className={classes.root}>\n        <div className={classes.controls}>\n          <FormControl variant=\"outlined\" size=\"small\" fullWidth>\n            <InputLabel id=\"select-template-label\">\n              Load Existing Template\n            </InputLabel>\n            <Select\n              value={selectedTemplate}\n              label=\"Load Existing Template\"\n              labelId=\"select-template-label\"\n              onChange={e => handleSelectChange(e.target.value)}\n            >\n              {templateOptions.map((option, idx) => (\n                <MenuItem key={idx} value={option.value as any}>\n                  {option.label}\n                </MenuItem>\n              ))}\n            </Select>\n          </FormControl>\n\n          <IconButton size=\"medium\" onClick={onClose}>\n            <CloseIcon />\n          </IconButton>\n        </div>\n        <div className={classes.textArea}>\n          <TemplateEditorTextArea\n            content={templateYaml}\n            onUpdate={setTemplateYaml}\n            errorText={errorText}\n          />\n        </div>\n        <div className={classes.preview}>\n          <TemplateEditorForm\n            content={templateYaml}\n            contentIsSpec\n            fieldExtensions={customFieldExtensions}\n            setErrorText={setErrorText}\n            layouts={layouts}\n          />\n        </div>\n      </main>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TemplateFormPreviewer.esm.js","sources":["../../../src/next/TemplateEditorPage/TemplateFormPreviewer.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { Entity } from '@backstage/catalog-model';\nimport { alertApiRef, useApi } from '@backstage/core-plugin-api';\nimport {\n  catalogApiRef,\n  humanizeEntityRef,\n} from '@backstage/plugin-catalog-react';\nimport FormControl from '@material-ui/core/FormControl';\nimport IconButton from '@material-ui/core/IconButton';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport LinearProgress from '@material-ui/core/LinearProgress';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport Select from '@material-ui/core/Select';\nimport { makeStyles } from '@material-ui/core/styles';\nimport CloseIcon from '@material-ui/icons/Close';\nimport React, { useCallback, useState } from 'react';\nimport useAsync from 'react-use/esm/useAsync';\nimport yaml from 'yaml';\nimport {\n  LayoutOptions,\n  FieldExtensionOptions,\n} from '@backstage/plugin-scaffolder-react';\nimport { TemplateEditorForm } from './TemplateEditorForm';\nimport { TemplateEditorTextArea } from './TemplateEditorTextArea';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../translation';\n\nconst EXAMPLE_TEMPLATE_PARAMS_YAML = `# Edit the template parameters below to see how they will render in the scaffolder form UI\nparameters:\n  - title: Fill in some steps\n    required:\n      - name\n    properties:\n      name:\n        title: Name\n        type: string\n        description: Unique name of the component\n      owner:\n        title: Owner\n        type: string\n        description: Owner of the component\n        ui:field: OwnerPicker\n        ui:options:\n          catalogFilter:\n            kind: Group\n  - title: Choose a location\n    required:\n      - repoUrl\n    properties:\n      repoUrl:\n        title: Repository Location\n        type: string\n        ui:field: RepoUrlPicker\n        ui:options:\n          allowedHosts:\n            - github.com\nsteps:\n  - id: fetch-base\n    name: Fetch Base\n    action: fetch:template\n    input:\n      url: ./template\n      values:\n        name: \\${{parameters.name}}\n`;\n\ntype TemplateOption = {\n  label: string;\n  value: Entity;\n};\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    gridArea: 'pageContent',\n    display: 'grid',\n    gridTemplateAreas: `\n      \"controls controls\"\n      \"textArea preview\"\n    `,\n    gridTemplateRows: 'auto 1fr',\n    gridTemplateColumns: '1fr 1fr',\n  },\n  controls: {\n    gridArea: 'controls',\n    display: 'flex',\n    flexFlow: 'row nowrap',\n    alignItems: 'center',\n    margin: theme.spacing(1),\n  },\n  textArea: {\n    gridArea: 'textArea',\n  },\n  preview: {\n    gridArea: 'preview',\n  },\n}));\n\nexport const TemplateFormPreviewer = ({\n  defaultPreviewTemplate = EXAMPLE_TEMPLATE_PARAMS_YAML,\n  customFieldExtensions = [],\n  onClose,\n  layouts = [],\n}: {\n  defaultPreviewTemplate?: string;\n  customFieldExtensions?: FieldExtensionOptions<any, any>[];\n  onClose?: () => void;\n  layouts?: LayoutOptions[];\n}) => {\n  const classes = useStyles();\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n  const alertApi = useApi(alertApiRef);\n  const catalogApi = useApi(catalogApiRef);\n  const [selectedTemplate, setSelectedTemplate] = useState('');\n  const [errorText, setErrorText] = useState<string>();\n  const [templateOptions, setTemplateOptions] = useState<TemplateOption[]>([]);\n  const [templateYaml, setTemplateYaml] = useState(defaultPreviewTemplate);\n\n  const { loading } = useAsync(\n    () =>\n      catalogApi\n        .getEntities({\n          filter: { kind: 'template' },\n          fields: [\n            'kind',\n            'metadata.namespace',\n            'metadata.name',\n            'metadata.title',\n            'spec.parameters',\n            'spec.steps',\n            'spec.output',\n          ],\n        })\n        .then(({ items }) =>\n          setTemplateOptions(\n            items.map(template => ({\n              label:\n                template.metadata.title ??\n                humanizeEntityRef(template, { defaultKind: 'template' }),\n              value: template,\n            })),\n          ),\n        )\n        .catch(e =>\n          alertApi.post({\n            message: `Error loading exisiting templates: ${e.message}`,\n            severity: 'error',\n          }),\n        ),\n    [catalogApi],\n  );\n\n  const handleSelectChange = useCallback(\n    // TODO(Rugvip): Afaik this should be Entity, but didn't want to make runtime changes while fixing types\n    (selected: any) => {\n      setSelectedTemplate(selected);\n      setTemplateYaml(yaml.stringify(selected.spec));\n    },\n    [setTemplateYaml],\n  );\n\n  return (\n    <>\n      {loading && <LinearProgress />}\n      <main className={classes.root}>\n        <div className={classes.controls}>\n          <FormControl variant=\"outlined\" size=\"small\" fullWidth>\n            <InputLabel id=\"select-template-label\">\n              {t('templateEditorPage.templateFormPreviewer.title')}\n            </InputLabel>\n            <Select\n              value={selectedTemplate}\n              label={t('templateEditorPage.templateFormPreviewer.title')}\n              labelId=\"select-template-label\"\n              onChange={e => handleSelectChange(e.target.value)}\n            >\n              {templateOptions.map((option, idx) => (\n                <MenuItem key={idx} value={option.value as any}>\n                  {option.label}\n                </MenuItem>\n              ))}\n            </Select>\n          </FormControl>\n\n          <IconButton size=\"medium\" onClick={onClose}>\n            <CloseIcon />\n          </IconButton>\n        </div>\n        <div className={classes.textArea}>\n          <TemplateEditorTextArea\n            content={templateYaml}\n            onUpdate={setTemplateYaml}\n            errorText={errorText}\n          />\n        </div>\n        <div className={classes.preview}>\n          <TemplateEditorForm\n            content={templateYaml}\n            contentIsSpec\n            fieldExtensions={customFieldExtensions}\n            setErrorText={setErrorText}\n            layouts={layouts}\n          />\n        </div>\n      </main>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/next/TemplateListPage/TemplateListPage.esm.js

@@ -7,15 +7,13 @@ import { ScaffolderPageContextMenu, TemplateCategoryPicker, TemplateGroups } fro
 import { RegisterExistingButton } from './RegisterExistingButton.esm.js';
 import { registerComponentRouteRef, editRouteRef, actionsRouteRef, scaffolderListTaskRouteRef, viewTechDocRouteRef, selectedTemplateRouteRef } from '../../routes.esm.js';
 import { parseEntityRef, stringifyEntityRef } from '@backstage/catalog-model';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { scaffolderTranslationRef } from '../../translation.esm.js';
 
-const defaultGroup = {
-  title: "Templates",
-  filter: () => true
-};
-const createGroupsWithOther = (groups) => [
+const createGroupsWithOther = (groups, t) => [
   ...groups,
   {
-    title: "Other Templates",
+    title: t("templateListPage.templateGroups.otherTitle"),
     filter: (e) => ![...groups].some(({ filter }) => filter(e))
   }
 ];
@@ -34,7 +32,13 @@ const TemplateListPage = (props) => {
   const viewTechDocsLink = useRouteRef(viewTechDocRouteRef);
   const templateRoute = useRouteRef(selectedTemplateRouteRef);
   const app = useApp();
-  const groups = givenGroups.length ? createGroupsWithOther(givenGroups) : [defaultGroup];
+  const { t } = useTranslationRef(scaffolderTranslationRef);
+  const groups = givenGroups.length ? createGroupsWithOther(givenGroups, t) : [
+    {
+      title: t("templateListPage.templateGroups.defaultTitle"),
+      filter: () => true
+    }
+  ];
   const scaffolderPageContextMenuProps = {
     onEditorClicked: props?.contextMenu?.editor !== false ? () => navigate(editorLink()) : void 0,
     onActionsClicked: props?.contextMenu?.actions !== false ? () => navigate(actionsLink()) : void 0,
@@ -48,12 +52,14 @@ const TemplateListPage = (props) => {
       return template.metadata.annotations?.["backstage.io/techdocs-ref"] && viewTechDocsLink ? [
         {
           icon: app.getSystemIcon("docs") ?? DocsIcon,
-          text: "View TechDocs",
+          text: t(
+            "templateListPage.additionalLinksForEntity.viewTechDocsTitle"
+          ),
           url: viewTechDocsLink({ kind, namespace, name })
         }
       ] : [];
     },
-    [app, viewTechDocsLink]
+    [app, viewTechDocsLink, t]
   );
   const onTemplateSelected = useCallback(
     (template) => {
@@ -65,19 +71,21 @@ const TemplateListPage = (props) => {
   return /* @__PURE__ */ React.createElement(EntityListProvider, null, /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(
     Header,
     {
-      pageTitleOverride: "Create a new component",
-      title: "Create a new component",
-      subtitle: "Create new software components using standard templates in your organization",
+      pageTitleOverride: t("templateListPage.pageTitle"),
+      title: t("templateListPage.title"),
+      subtitle: t("templateListPage.subtitle"),
       ...headerOptions
     },
     /* @__PURE__ */ React.createElement(ScaffolderPageContextMenu, { ...scaffolderPageContextMenuProps })
-  ), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(ContentHeader, { title: "Available Templates" }, /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(ContentHeader, { title: t("templateListPage.contentHeader.title") }, /* @__PURE__ */ React.createElement(
     RegisterExistingButton,
     {
-      title: "Register Existing Component",
+      title: t(
+        "templateListPage.contentHeader.registerExistingButtonTitle"
+      ),
       to: registerComponentLink && registerComponentLink()
     }
-  ), /* @__PURE__ */ React.createElement(SupportButton, null, "Create new software components using standard templates. Different templates create different kinds of components (services, websites, documentation, ...).")), /* @__PURE__ */ React.createElement(CatalogFilterLayout, null, /* @__PURE__ */ React.createElement(CatalogFilterLayout.Filters, null, /* @__PURE__ */ React.createElement(EntitySearchBar, null), /* @__PURE__ */ React.createElement(EntityKindPicker, { initialFilter: "template", hidden: true }), /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement(SupportButton, null, t("templateListPage.contentHeader.supportButtonTitle"))), /* @__PURE__ */ React.createElement(CatalogFilterLayout, null, /* @__PURE__ */ React.createElement(CatalogFilterLayout.Filters, null, /* @__PURE__ */ React.createElement(EntitySearchBar, null), /* @__PURE__ */ React.createElement(EntityKindPicker, { initialFilter: "template", hidden: true }), /* @__PURE__ */ React.createElement(
     UserListPicker,
     {
       initialFilter: "all",

package/dist/next/TemplateListPage/TemplateListPage.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateListPage.esm.js","sources":["../../../src/next/TemplateListPage/TemplateListPage.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, { useCallback } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';\nimport { useApp, useRouteRef } from '@backstage/core-plugin-api';\n\nimport {\n  Content,\n  ContentHeader,\n  DocsIcon,\n  Header,\n  Page,\n  SupportButton,\n} from '@backstage/core-components';\nimport {\n  EntityKindPicker,\n  EntityListProvider,\n  EntitySearchBar,\n  EntityTagPicker,\n  CatalogFilterLayout,\n  UserListPicker,\n} from '@backstage/plugin-catalog-react';\nimport {\n  ScaffolderPageContextMenu,\n  TemplateCategoryPicker,\n  TemplateGroups,\n} from '@backstage/plugin-scaffolder-react/alpha';\n\nimport { RegisterExistingButton } from './RegisterExistingButton';\nimport {\n  actionsRouteRef,\n  editRouteRef,\n  registerComponentRouteRef,\n  scaffolderListTaskRouteRef,\n  selectedTemplateRouteRef,\n  viewTechDocRouteRef,\n} from '../../routes';\nimport { parseEntityRef, stringifyEntityRef } from '@backstage/catalog-model';\nimport { TemplateGroupFilter } from '@backstage/plugin-scaffolder-react';\n\n/**\n * @alpha\n */\nexport type TemplateListPageProps = {\n  TemplateCardComponent?: React.ComponentType<{\n    template: TemplateEntityV1beta3;\n  }>;\n  groups?: TemplateGroupFilter[];\n  templateFilter?: (entity: TemplateEntityV1beta3) => boolean;\n  contextMenu?: {\n    editor?: boolean;\n    actions?: boolean;\n    tasks?: boolean;\n  };\n  headerOptions?: {\n    pageTitleOverride?: string;\n    title?: string;\n    subtitle?: string;\n  };\n};\n\nconst defaultGroup: TemplateGroupFilter = {\n  title: 'Templates',\n  filter: () => true,\n};\n\nconst createGroupsWithOther = (\n  groups: TemplateGroupFilter[],\n): TemplateGroupFilter[] => [\n  ...groups,\n  {\n    title: 'Other Templates',\n    filter: e => ![...groups].some(({ filter }) => filter(e)),\n  },\n];\n\n/**\n * @alpha\n */\nexport const TemplateListPage = (props: TemplateListPageProps) => {\n  const registerComponentLink = useRouteRef(registerComponentRouteRef);\n  const {\n    TemplateCardComponent,\n    groups: givenGroups = [],\n    templateFilter,\n    headerOptions,\n  } = props;\n  const navigate = useNavigate();\n  const editorLink = useRouteRef(editRouteRef);\n  const actionsLink = useRouteRef(actionsRouteRef);\n  const tasksLink = useRouteRef(scaffolderListTaskRouteRef);\n  const viewTechDocsLink = useRouteRef(viewTechDocRouteRef);\n  const templateRoute = useRouteRef(selectedTemplateRouteRef);\n  const app = useApp();\n\n  const groups = givenGroups.length\n    ? createGroupsWithOther(givenGroups)\n    : [defaultGroup];\n\n  const scaffolderPageContextMenuProps = {\n    onEditorClicked:\n      props?.contextMenu?.editor !== false\n        ? () => navigate(editorLink())\n        : undefined,\n    onActionsClicked:\n      props?.contextMenu?.actions !== false\n        ? () => navigate(actionsLink())\n        : undefined,\n    onTasksClicked:\n      props?.contextMenu?.tasks !== false\n        ? () => navigate(tasksLink())\n        : undefined,\n  };\n\n  const additionalLinksForEntity = useCallback(\n    (template: TemplateEntityV1beta3) => {\n      const { kind, namespace, name } = parseEntityRef(\n        stringifyEntityRef(template),\n      );\n      return template.metadata.annotations?.['backstage.io/techdocs-ref'] &&\n        viewTechDocsLink\n        ? [\n            {\n              icon: app.getSystemIcon('docs') ?? DocsIcon,\n              text: 'View TechDocs',\n              url: viewTechDocsLink({ kind, namespace, name }),\n            },\n          ]\n        : [];\n    },\n    [app, viewTechDocsLink],\n  );\n\n  const onTemplateSelected = useCallback(\n    (template: TemplateEntityV1beta3) => {\n      const { namespace, name } = parseEntityRef(stringifyEntityRef(template));\n\n      navigate(templateRoute({ namespace, templateName: name }));\n    },\n    [navigate, templateRoute],\n  );\n\n  return (\n    <EntityListProvider>\n      <Page themeId=\"home\">\n        <Header\n          pageTitleOverride=\"Create a new component\"\n          title=\"Create a new component\"\n          subtitle=\"Create new software components using standard templates in your organization\"\n          {...headerOptions}\n        >\n          <ScaffolderPageContextMenu {...scaffolderPageContextMenuProps} />\n        </Header>\n        <Content>\n          <ContentHeader title=\"Available Templates\">\n            <RegisterExistingButton\n              title=\"Register Existing Component\"\n              to={registerComponentLink && registerComponentLink()}\n            />\n            <SupportButton>\n              Create new software components using standard templates. Different\n              templates create different kinds of components (services,\n              websites, documentation, ...).\n            </SupportButton>\n          </ContentHeader>\n\n          <CatalogFilterLayout>\n            <CatalogFilterLayout.Filters>\n              <EntitySearchBar />\n              <EntityKindPicker initialFilter=\"template\" hidden />\n              <UserListPicker\n                initialFilter=\"all\"\n                availableFilters={['all', 'starred']}\n              />\n              <TemplateCategoryPicker />\n              <EntityTagPicker />\n            </CatalogFilterLayout.Filters>\n            <CatalogFilterLayout.Content>\n              <TemplateGroups\n                groups={groups}\n                templateFilter={templateFilter}\n                TemplateCardComponent={TemplateCardComponent}\n                onTemplateSelected={onTemplateSelected}\n                additionalLinksForEntity={additionalLinksForEntity}\n              />\n            </CatalogFilterLayout.Content>\n          </CatalogFilterLayout>\n        </Content>\n      </Page>\n    </EntityListProvider>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TemplateListPage.esm.js","sources":["../../../src/next/TemplateListPage/TemplateListPage.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, { useCallback } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';\nimport { useApp, useRouteRef } from '@backstage/core-plugin-api';\n\nimport {\n  Content,\n  ContentHeader,\n  DocsIcon,\n  Header,\n  Page,\n  SupportButton,\n} from '@backstage/core-components';\nimport {\n  EntityKindPicker,\n  EntityListProvider,\n  EntitySearchBar,\n  EntityTagPicker,\n  CatalogFilterLayout,\n  UserListPicker,\n} from '@backstage/plugin-catalog-react';\nimport {\n  ScaffolderPageContextMenu,\n  TemplateCategoryPicker,\n  TemplateGroups,\n} from '@backstage/plugin-scaffolder-react/alpha';\n\nimport { RegisterExistingButton } from './RegisterExistingButton';\nimport {\n  actionsRouteRef,\n  editRouteRef,\n  registerComponentRouteRef,\n  scaffolderListTaskRouteRef,\n  selectedTemplateRouteRef,\n  viewTechDocRouteRef,\n} from '../../routes';\nimport { parseEntityRef, stringifyEntityRef } from '@backstage/catalog-model';\nimport { TemplateGroupFilter } from '@backstage/plugin-scaffolder-react';\nimport {\n  TranslationFunction,\n  useTranslationRef,\n} from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../translation';\n\n/**\n * @alpha\n */\nexport type TemplateListPageProps = {\n  TemplateCardComponent?: React.ComponentType<{\n    template: TemplateEntityV1beta3;\n  }>;\n  groups?: TemplateGroupFilter[];\n  templateFilter?: (entity: TemplateEntityV1beta3) => boolean;\n  contextMenu?: {\n    editor?: boolean;\n    actions?: boolean;\n    tasks?: boolean;\n  };\n  headerOptions?: {\n    pageTitleOverride?: string;\n    title?: string;\n    subtitle?: string;\n  };\n};\n\nconst createGroupsWithOther = (\n  groups: TemplateGroupFilter[],\n  t: TranslationFunction<typeof scaffolderTranslationRef.T>,\n): TemplateGroupFilter[] => [\n  ...groups,\n  {\n    title: t('templateListPage.templateGroups.otherTitle'),\n    filter: e => ![...groups].some(({ filter }) => filter(e)),\n  },\n];\n\n/**\n * @alpha\n */\nexport const TemplateListPage = (props: TemplateListPageProps) => {\n  const registerComponentLink = useRouteRef(registerComponentRouteRef);\n  const {\n    TemplateCardComponent,\n    groups: givenGroups = [],\n    templateFilter,\n    headerOptions,\n  } = props;\n  const navigate = useNavigate();\n  const editorLink = useRouteRef(editRouteRef);\n  const actionsLink = useRouteRef(actionsRouteRef);\n  const tasksLink = useRouteRef(scaffolderListTaskRouteRef);\n  const viewTechDocsLink = useRouteRef(viewTechDocRouteRef);\n  const templateRoute = useRouteRef(selectedTemplateRouteRef);\n  const app = useApp();\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  const groups = givenGroups.length\n    ? createGroupsWithOther(givenGroups, t)\n    : [\n        {\n          title: t('templateListPage.templateGroups.defaultTitle'),\n          filter: () => true,\n        },\n      ];\n\n  const scaffolderPageContextMenuProps = {\n    onEditorClicked:\n      props?.contextMenu?.editor !== false\n        ? () => navigate(editorLink())\n        : undefined,\n    onActionsClicked:\n      props?.contextMenu?.actions !== false\n        ? () => navigate(actionsLink())\n        : undefined,\n    onTasksClicked:\n      props?.contextMenu?.tasks !== false\n        ? () => navigate(tasksLink())\n        : undefined,\n  };\n\n  const additionalLinksForEntity = useCallback(\n    (template: TemplateEntityV1beta3) => {\n      const { kind, namespace, name } = parseEntityRef(\n        stringifyEntityRef(template),\n      );\n      return template.metadata.annotations?.['backstage.io/techdocs-ref'] &&\n        viewTechDocsLink\n        ? [\n            {\n              icon: app.getSystemIcon('docs') ?? DocsIcon,\n              text: t(\n                'templateListPage.additionalLinksForEntity.viewTechDocsTitle',\n              ),\n              url: viewTechDocsLink({ kind, namespace, name }),\n            },\n          ]\n        : [];\n    },\n    [app, viewTechDocsLink, t],\n  );\n\n  const onTemplateSelected = useCallback(\n    (template: TemplateEntityV1beta3) => {\n      const { namespace, name } = parseEntityRef(stringifyEntityRef(template));\n\n      navigate(templateRoute({ namespace, templateName: name }));\n    },\n    [navigate, templateRoute],\n  );\n\n  return (\n    <EntityListProvider>\n      <Page themeId=\"home\">\n        <Header\n          pageTitleOverride={t('templateListPage.pageTitle')}\n          title={t('templateListPage.title')}\n          subtitle={t('templateListPage.subtitle')}\n          {...headerOptions}\n        >\n          <ScaffolderPageContextMenu {...scaffolderPageContextMenuProps} />\n        </Header>\n        <Content>\n          <ContentHeader title={t('templateListPage.contentHeader.title')}>\n            <RegisterExistingButton\n              title={t(\n                'templateListPage.contentHeader.registerExistingButtonTitle',\n              )}\n              to={registerComponentLink && registerComponentLink()}\n            />\n            <SupportButton>\n              {t('templateListPage.contentHeader.supportButtonTitle')}\n            </SupportButton>\n          </ContentHeader>\n\n          <CatalogFilterLayout>\n            <CatalogFilterLayout.Filters>\n              <EntitySearchBar />\n              <EntityKindPicker initialFilter=\"template\" hidden />\n              <UserListPicker\n                initialFilter=\"all\"\n                availableFilters={['all', 'starred']}\n              />\n              <TemplateCategoryPicker />\n              <EntityTagPicker />\n            </CatalogFilterLayout.Filters>\n            <CatalogFilterLayout.Content>\n              <TemplateGroups\n                groups={groups}\n                templateFilter={templateFilter}\n                TemplateCardComponent={TemplateCardComponent}\n                onTemplateSelected={onTemplateSelected}\n                additionalLinksForEntity={additionalLinksForEntity}\n              />\n            </CatalogFilterLayout.Content>\n          </CatalogFilterLayout>\n        </Content>\n      </Page>\n    </EntityListProvider>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/next/TemplateWizardPage/TemplateWizardPage.esm.js

@@ -8,6 +8,8 @@ import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { Workflow } from '@backstage/plugin-scaffolder-react/alpha';
 import { Page, Header } from '@backstage/core-components';
 import { rootRouteRef, scaffolderTaskRouteRef, selectedTemplateRouteRef } from '../../routes.esm.js';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { scaffolderTranslationRef } from '../../translation.esm.js';
 import { TemplateWizardPageContextMenu } from './TemplateWizardPageContextMenu.esm.js';
 
 const TemplateWizardPage = (props) => {
@@ -20,6 +22,7 @@ const TemplateWizardPage = (props) => {
   const { templateName, namespace } = useRouteRefParams(
     selectedTemplateRouteRef
   );
+  const { t } = useTranslationRef(scaffolderTranslationRef);
   const templateRef = stringifyEntityRef({
     kind: "Template",
     namespace,
@@ -41,9 +44,9 @@ const TemplateWizardPage = (props) => {
   return /* @__PURE__ */ React.createElement(AnalyticsContext, { attributes: { entityRef: templateRef } }, /* @__PURE__ */ React.createElement(Page, { themeId: "website" }, /* @__PURE__ */ React.createElement(
     Header,
     {
-      pageTitleOverride: "Create a new component",
-      title: "Create a new component",
-      subtitle: "Create new software components using standard templates in your organization",
+      pageTitleOverride: t("templateWizardPage.pageTitle"),
+      title: t("templateWizardPage.title"),
+      subtitle: t("templateWizardPage.subtitle"),
       ...props.headerOptions
     },
     /* @__PURE__ */ React.createElement(TemplateWizardPageContextMenu, { editUrl })

package/dist/next/TemplateWizardPage/TemplateWizardPage.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateWizardPage.esm.js","sources":["../../../src/next/TemplateWizardPage/TemplateWizardPage.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 { Navigate, useNavigate } from 'react-router-dom';\nimport useAsync from 'react-use/esm/useAsync';\nimport {\n  stringifyEntityRef,\n  ANNOTATION_EDIT_URL,\n} from '@backstage/catalog-model';\nimport {\n  AnalyticsContext,\n  useApi,\n  useRouteRef,\n  useRouteRefParams,\n} from '@backstage/core-plugin-api';\nimport {\n  scaffolderApiRef,\n  useTemplateSecrets,\n  type LayoutOptions,\n  FormProps,\n  FieldExtensionOptions,\n  ReviewStepProps,\n} from '@backstage/plugin-scaffolder-react';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\n\nimport { Workflow } from '@backstage/plugin-scaffolder-react/alpha';\nimport { JsonValue } from '@backstage/types';\nimport { Header, Page } from '@backstage/core-components';\n\nimport {\n  rootRouteRef,\n  scaffolderTaskRouteRef,\n  selectedTemplateRouteRef,\n} from '../../routes';\n\nimport { TemplateWizardPageContextMenu } from './TemplateWizardPageContextMenu';\n\n/**\n * @alpha\n */\nexport type TemplateWizardPageProps = {\n  customFieldExtensions: FieldExtensionOptions<any, any>[];\n  components?: {\n    ReviewStepComponent?: React.ComponentType<ReviewStepProps>;\n  };\n  layouts?: LayoutOptions[];\n  formProps?: FormProps;\n  headerOptions?: {\n    pageTitleOverride?: string;\n    title?: string;\n    subtitle?: string;\n  };\n};\n\nexport const TemplateWizardPage = (props: TemplateWizardPageProps) => {\n  const rootRef = useRouteRef(rootRouteRef);\n  const taskRoute = useRouteRef(scaffolderTaskRouteRef);\n  const { secrets } = useTemplateSecrets();\n  const scaffolderApi = useApi(scaffolderApiRef);\n  const catalogApi = useApi(catalogApiRef);\n  const navigate = useNavigate();\n  const { templateName, namespace } = useRouteRefParams(\n    selectedTemplateRouteRef,\n  );\n\n  const templateRef = stringifyEntityRef({\n    kind: 'Template',\n    namespace,\n    name: templateName,\n  });\n\n  const { value: editUrl } = useAsync(async () => {\n    const data = await catalogApi.getEntityByRef(templateRef);\n    return data?.metadata.annotations?.[ANNOTATION_EDIT_URL];\n  }, [templateRef, catalogApi]);\n\n  const onCreate = async (values: Record<string, JsonValue>) => {\n    const { taskId } = await scaffolderApi.scaffold({\n      templateRef,\n      values,\n      secrets,\n    });\n\n    navigate(taskRoute({ taskId }));\n  };\n\n  const onError = () => <Navigate to={rootRef()} />;\n\n  return (\n    <AnalyticsContext attributes={{ entityRef: templateRef }}>\n      <Page themeId=\"website\">\n        <Header\n          pageTitleOverride=\"Create a new component\"\n          title=\"Create a new component\"\n          subtitle=\"Create new software components using standard templates in your organization\"\n          {...props.headerOptions}\n        >\n          <TemplateWizardPageContextMenu editUrl={editUrl} />\n        </Header>\n        <Workflow\n          namespace={namespace}\n          templateName={templateName}\n          onCreate={onCreate}\n          components={props.components}\n          onError={onError}\n          extensions={props.customFieldExtensions}\n          formProps={props.formProps}\n          layouts={props.layouts}\n        />\n      </Page>\n    </AnalyticsContext>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAmEa,MAAA,kBAAA,GAAqB,CAAC,KAAmC,KAAA;AACpE,EAAM,MAAA,OAAA,GAAU,YAAY,YAAY,CAAA,CAAA;AACxC,EAAM,MAAA,SAAA,GAAY,YAAY,sBAAsB,CAAA,CAAA;AACpD,EAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,kBAAmB,EAAA,CAAA;AACvC,EAAM,MAAA,aAAA,GAAgB,OAAO,gBAAgB,CAAA,CAAA;AAC7C,EAAM,MAAA,UAAA,GAAa,OAAO,aAAa,CAAA,CAAA;AACvC,EAAA,MAAM,WAAW,WAAY,EAAA,CAAA;AAC7B,EAAM,MAAA,EAAE,YAAc,EAAA,SAAA,EAAc,GAAA,iBAAA;AAAA,IAClC,wBAAA;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,cAAc,kBAAmB,CAAA;AAAA,IACrC,IAAM,EAAA,UAAA;AAAA,IACN,SAAA;AAAA,IACA,IAAM,EAAA,YAAA;AAAA,GACP,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,KAAA,EAAO,OAAQ,EAAA,GAAI,SAAS,YAAY;AAC9C,IAAA,MAAM,IAAO,GAAA,MAAM,UAAW,CAAA,cAAA,CAAe,WAAW,CAAA,CAAA;AACxD,IAAO,OAAA,IAAA,EAAM,QAAS,CAAA,WAAA,GAAc,mBAAmB,CAAA,CAAA;AAAA,GACtD,EAAA,CAAC,WAAa,EAAA,UAAU,CAAC,CAAA,CAAA;AAE5B,EAAM,MAAA,QAAA,GAAW,OAAO,MAAsC,KAAA;AAC5D,IAAA,MAAM,EAAE,MAAA,EAAW,GAAA,MAAM,cAAc,QAAS,CAAA;AAAA,MAC9C,WAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,KACD,CAAA,CAAA;AAED,IAAA,QAAA,CAAS,SAAU,CAAA,EAAE,MAAO,EAAC,CAAC,CAAA,CAAA;AAAA,GAChC,CAAA;AAEA,EAAA,MAAM,UAAU,sBAAM,KAAA,CAAA,aAAA,CAAC,QAAS,EAAA,EAAA,EAAA,EAAI,SAAW,EAAA,CAAA,CAAA;AAE/C,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,gBAAiB,EAAA,EAAA,UAAA,EAAY,EAAE,SAAA,EAAW,aACzC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,OAAA,EAAQ,SACZ,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,iBAAkB,EAAA,wBAAA;AAAA,MAClB,KAAM,EAAA,wBAAA;AAAA,MACN,QAAS,EAAA,8EAAA;AAAA,MACR,GAAG,KAAM,CAAA,aAAA;AAAA,KAAA;AAAA,oBAEV,KAAA,CAAA,aAAA,CAAC,iCAA8B,OAAkB,EAAA,CAAA;AAAA,GAEnD,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,YAAA;AAAA,MACA,QAAA;AAAA,MACA,YAAY,KAAM,CAAA,UAAA;AAAA,MAClB,OAAA;AAAA,MACA,YAAY,KAAM,CAAA,qBAAA;AAAA,MAClB,WAAW,KAAM,CAAA,SAAA;AAAA,MACjB,SAAS,KAAM,CAAA,OAAA;AAAA,KAAA;AAAA,GAEnB,CACF,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TemplateWizardPage.esm.js","sources":["../../../src/next/TemplateWizardPage/TemplateWizardPage.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 { Navigate, useNavigate } from 'react-router-dom';\nimport useAsync from 'react-use/esm/useAsync';\nimport {\n  stringifyEntityRef,\n  ANNOTATION_EDIT_URL,\n} from '@backstage/catalog-model';\nimport {\n  AnalyticsContext,\n  useApi,\n  useRouteRef,\n  useRouteRefParams,\n} from '@backstage/core-plugin-api';\nimport {\n  scaffolderApiRef,\n  useTemplateSecrets,\n  type LayoutOptions,\n  FormProps,\n  FieldExtensionOptions,\n  ReviewStepProps,\n} from '@backstage/plugin-scaffolder-react';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\n\nimport { Workflow } from '@backstage/plugin-scaffolder-react/alpha';\nimport { JsonValue } from '@backstage/types';\nimport { Header, Page } from '@backstage/core-components';\n\nimport {\n  rootRouteRef,\n  scaffolderTaskRouteRef,\n  selectedTemplateRouteRef,\n} from '../../routes';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../translation';\n\nimport { TemplateWizardPageContextMenu } from './TemplateWizardPageContextMenu';\n\n/**\n * @alpha\n */\nexport type TemplateWizardPageProps = {\n  customFieldExtensions: FieldExtensionOptions<any, any>[];\n  components?: {\n    ReviewStepComponent?: React.ComponentType<ReviewStepProps>;\n  };\n  layouts?: LayoutOptions[];\n  formProps?: FormProps;\n  headerOptions?: {\n    pageTitleOverride?: string;\n    title?: string;\n    subtitle?: string;\n  };\n};\n\nexport const TemplateWizardPage = (props: TemplateWizardPageProps) => {\n  const rootRef = useRouteRef(rootRouteRef);\n  const taskRoute = useRouteRef(scaffolderTaskRouteRef);\n  const { secrets } = useTemplateSecrets();\n  const scaffolderApi = useApi(scaffolderApiRef);\n  const catalogApi = useApi(catalogApiRef);\n  const navigate = useNavigate();\n  const { templateName, namespace } = useRouteRefParams(\n    selectedTemplateRouteRef,\n  );\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  const templateRef = stringifyEntityRef({\n    kind: 'Template',\n    namespace,\n    name: templateName,\n  });\n\n  const { value: editUrl } = useAsync(async () => {\n    const data = await catalogApi.getEntityByRef(templateRef);\n    return data?.metadata.annotations?.[ANNOTATION_EDIT_URL];\n  }, [templateRef, catalogApi]);\n\n  const onCreate = async (values: Record<string, JsonValue>) => {\n    const { taskId } = await scaffolderApi.scaffold({\n      templateRef,\n      values,\n      secrets,\n    });\n\n    navigate(taskRoute({ taskId }));\n  };\n\n  const onError = () => <Navigate to={rootRef()} />;\n\n  return (\n    <AnalyticsContext attributes={{ entityRef: templateRef }}>\n      <Page themeId=\"website\">\n        <Header\n          pageTitleOverride={t('templateWizardPage.pageTitle')}\n          title={t('templateWizardPage.title')}\n          subtitle={t('templateWizardPage.subtitle')}\n          {...props.headerOptions}\n        >\n          <TemplateWizardPageContextMenu editUrl={editUrl} />\n        </Header>\n        <Workflow\n          namespace={namespace}\n          templateName={templateName}\n          onCreate={onCreate}\n          components={props.components}\n          onError={onError}\n          extensions={props.customFieldExtensions}\n          formProps={props.formProps}\n          layouts={props.layouts}\n        />\n      </Page>\n    </AnalyticsContext>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAqEa,MAAA,kBAAA,GAAqB,CAAC,KAAmC,KAAA;AACpE,EAAM,MAAA,OAAA,GAAU,YAAY,YAAY,CAAA,CAAA;AACxC,EAAM,MAAA,SAAA,GAAY,YAAY,sBAAsB,CAAA,CAAA;AACpD,EAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,kBAAmB,EAAA,CAAA;AACvC,EAAM,MAAA,aAAA,GAAgB,OAAO,gBAAgB,CAAA,CAAA;AAC7C,EAAM,MAAA,UAAA,GAAa,OAAO,aAAa,CAAA,CAAA;AACvC,EAAA,MAAM,WAAW,WAAY,EAAA,CAAA;AAC7B,EAAM,MAAA,EAAE,YAAc,EAAA,SAAA,EAAc,GAAA,iBAAA;AAAA,IAClC,wBAAA;AAAA,GACF,CAAA;AACA,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,wBAAwB,CAAA,CAAA;AAExD,EAAA,MAAM,cAAc,kBAAmB,CAAA;AAAA,IACrC,IAAM,EAAA,UAAA;AAAA,IACN,SAAA;AAAA,IACA,IAAM,EAAA,YAAA;AAAA,GACP,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,KAAA,EAAO,OAAQ,EAAA,GAAI,SAAS,YAAY;AAC9C,IAAA,MAAM,IAAO,GAAA,MAAM,UAAW,CAAA,cAAA,CAAe,WAAW,CAAA,CAAA;AACxD,IAAO,OAAA,IAAA,EAAM,QAAS,CAAA,WAAA,GAAc,mBAAmB,CAAA,CAAA;AAAA,GACtD,EAAA,CAAC,WAAa,EAAA,UAAU,CAAC,CAAA,CAAA;AAE5B,EAAM,MAAA,QAAA,GAAW,OAAO,MAAsC,KAAA;AAC5D,IAAA,MAAM,EAAE,MAAA,EAAW,GAAA,MAAM,cAAc,QAAS,CAAA;AAAA,MAC9C,WAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,KACD,CAAA,CAAA;AAED,IAAA,QAAA,CAAS,SAAU,CAAA,EAAE,MAAO,EAAC,CAAC,CAAA,CAAA;AAAA,GAChC,CAAA;AAEA,EAAA,MAAM,UAAU,sBAAM,KAAA,CAAA,aAAA,CAAC,QAAS,EAAA,EAAA,EAAA,EAAI,SAAW,EAAA,CAAA,CAAA;AAE/C,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,gBAAiB,EAAA,EAAA,UAAA,EAAY,EAAE,SAAA,EAAW,aACzC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,OAAA,EAAQ,SACZ,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,iBAAA,EAAmB,EAAE,8BAA8B,CAAA;AAAA,MACnD,KAAA,EAAO,EAAE,0BAA0B,CAAA;AAAA,MACnC,QAAA,EAAU,EAAE,6BAA6B,CAAA;AAAA,MACxC,GAAG,KAAM,CAAA,aAAA;AAAA,KAAA;AAAA,oBAEV,KAAA,CAAA,aAAA,CAAC,iCAA8B,OAAkB,EAAA,CAAA;AAAA,GAEnD,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,YAAA;AAAA,MACA,QAAA;AAAA,MACA,YAAY,KAAM,CAAA,UAAA;AAAA,MAClB,OAAA;AAAA,MACA,YAAY,KAAM,CAAA,qBAAA;AAAA,MAClB,WAAW,KAAM,CAAA,SAAA;AAAA,MACjB,SAAS,KAAM,CAAA,OAAA;AAAA,KAAA;AAAA,GAEnB,CACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/next/TemplateWizardPage/TemplateWizardPageContextMenu.esm.js

@@ -8,6 +8,8 @@ import { makeStyles } from '@material-ui/core/styles';
 import Edit from '@material-ui/icons/Edit';
 import MoreVert from '@material-ui/icons/MoreVert';
 import React, { useState } from 'react';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { scaffolderTranslationRef } from '../../translation.esm.js';
 
 const useStyles = makeStyles((theme) => ({
   button: {
@@ -18,6 +20,7 @@ function TemplateWizardPageContextMenu(props) {
   const { editUrl } = props;
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState();
+  const { t } = useTranslationRef(scaffolderTranslationRef);
   if (!editUrl) {
     return null;
   }
@@ -52,7 +55,14 @@ function TemplateWizardPageContextMenu(props) {
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: "right" }
     },
-    /* @__PURE__ */ React.createElement(MenuList, null, /* @__PURE__ */ React.createElement(MenuItem, { onClick: () => window.open(editUrl, "_blank") }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(Edit, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText, { primary: "Edit Configuration" })))
+    /* @__PURE__ */ React.createElement(MenuList, null, /* @__PURE__ */ React.createElement(MenuItem, { onClick: () => window.open(editUrl, "_blank") }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(Edit, { fontSize: "small" })), /* @__PURE__ */ React.createElement(
+      ListItemText,
+      {
+        primary: t(
+          "templateWizardPage.pageContextMenu.editConfigurationTitle"
+        )
+      }
+    )))
   ));
 }
 

package/dist/next/TemplateWizardPage/TemplateWizardPageContextMenu.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateWizardPageContextMenu.esm.js","sources":["../../../src/next/TemplateWizardPage/TemplateWizardPageContextMenu.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 IconButton from '@material-ui/core/IconButton';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport MenuList from '@material-ui/core/MenuList';\nimport Popover from '@material-ui/core/Popover';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Edit from '@material-ui/icons/Edit';\nimport MoreVert from '@material-ui/icons/MoreVert';\nimport React, { useState } from 'react';\n\nconst useStyles = makeStyles(theme => ({\n  button: {\n    color: theme.page.fontColor,\n  },\n}));\n\nexport type TemplateWizardPageContextMenuProps = {\n  editUrl?: string;\n};\n\nexport function TemplateWizardPageContextMenu(\n  props: TemplateWizardPageContextMenuProps,\n) {\n  const { editUrl } = props;\n  const classes = useStyles();\n  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>();\n\n  if (!editUrl) {\n    return null;\n  }\n\n  const onOpen = (event: React.SyntheticEvent<HTMLButtonElement>) => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const onClose = () => {\n    setAnchorEl(undefined);\n  };\n\n  return (\n    <>\n      <IconButton\n        id=\"long-menu\"\n        aria-label=\"more\"\n        aria-controls=\"long-menu\"\n        aria-expanded={!!anchorEl}\n        aria-haspopup=\"true\"\n        role=\"button\"\n        onClick={onOpen}\n        data-testid=\"menu-button\"\n        color=\"inherit\"\n        className={classes.button}\n      >\n        <MoreVert />\n      </IconButton>\n      <Popover\n        aria-labelledby=\"long-menu\"\n        open={Boolean(anchorEl)}\n        onClose={onClose}\n        anchorEl={anchorEl}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n        transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n      >\n        <MenuList>\n          <MenuItem onClick={() => window.open(editUrl, '_blank')}>\n            <ListItemIcon>\n              <Edit fontSize=\"small\" />\n            </ListItemIcon>\n            <ListItemText primary=\"Edit Configuration\" />\n          </MenuItem>\n        </MenuList>\n      </Popover>\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AA2BA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,MAAQ,EAAA;AAAA,IACN,KAAA,EAAO,MAAM,IAAK,CAAA,SAAA;AAAA,GACpB;AACF,CAAE,CAAA,CAAA,CAAA;AAMK,SAAS,8BACd,KACA,EAAA;AACA,EAAM,MAAA,EAAE,SAAY,GAAA,KAAA,CAAA;AACpB,EAAA,MAAM,UAAU,SAAU,EAAA,CAAA;AAC1B,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,QAA4B,EAAA,CAAA;AAE5D,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAM,MAAA,MAAA,GAAS,CAAC,KAAmD,KAAA;AACjE,IAAA,WAAA,CAAY,MAAM,aAAa,CAAA,CAAA;AAAA,GACjC,CAAA;AAEA,EAAA,MAAM,UAAU,MAAM;AACpB,IAAA,WAAA,CAAY,KAAS,CAAA,CAAA,CAAA;AAAA,GACvB,CAAA;AAEA,EAAA,uBAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,EAAG,EAAA,WAAA;AAAA,MACH,YAAW,EAAA,MAAA;AAAA,MACX,eAAc,EAAA,WAAA;AAAA,MACd,eAAA,EAAe,CAAC,CAAC,QAAA;AAAA,MACjB,eAAc,EAAA,MAAA;AAAA,MACd,IAAK,EAAA,QAAA;AAAA,MACL,OAAS,EAAA,MAAA;AAAA,MACT,aAAY,EAAA,aAAA;AAAA,MACZ,KAAM,EAAA,SAAA;AAAA,MACN,WAAW,OAAQ,CAAA,MAAA;AAAA,KAAA;AAAA,wCAElB,QAAS,EAAA,IAAA,CAAA;AAAA,GAEZ,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,iBAAgB,EAAA,WAAA;AAAA,MAChB,IAAA,EAAM,QAAQ,QAAQ,CAAA;AAAA,MACtB,OAAA;AAAA,MACA,QAAA;AAAA,MACA,YAAc,EAAA,EAAE,QAAU,EAAA,QAAA,EAAU,YAAY,OAAQ,EAAA;AAAA,MACxD,eAAiB,EAAA,EAAE,QAAU,EAAA,KAAA,EAAO,YAAY,OAAQ,EAAA;AAAA,KAAA;AAAA,oBAExD,KAAA,CAAA,aAAA,CAAC,QACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAS,EAAA,EAAA,OAAA,EAAS,MAAM,MAAO,CAAA,IAAA,CAAK,OAAS,EAAA,QAAQ,CACpD,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,oCACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,QAAS,EAAA,OAAA,EAAQ,CACzB,CAAA,sCACC,YAAa,EAAA,EAAA,OAAA,EAAQ,oBAAqB,EAAA,CAC7C,CACF,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TemplateWizardPageContextMenu.esm.js","sources":["../../../src/next/TemplateWizardPage/TemplateWizardPageContextMenu.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 IconButton from '@material-ui/core/IconButton';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport MenuList from '@material-ui/core/MenuList';\nimport Popover from '@material-ui/core/Popover';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Edit from '@material-ui/icons/Edit';\nimport MoreVert from '@material-ui/icons/MoreVert';\nimport React, { useState } from 'react';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../translation';\n\nconst useStyles = makeStyles(theme => ({\n  button: {\n    color: theme.page.fontColor,\n  },\n}));\n\nexport type TemplateWizardPageContextMenuProps = {\n  editUrl?: string;\n};\n\nexport function TemplateWizardPageContextMenu(\n  props: TemplateWizardPageContextMenuProps,\n) {\n  const { editUrl } = props;\n  const classes = useStyles();\n  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>();\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  if (!editUrl) {\n    return null;\n  }\n\n  const onOpen = (event: React.SyntheticEvent<HTMLButtonElement>) => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const onClose = () => {\n    setAnchorEl(undefined);\n  };\n\n  return (\n    <>\n      <IconButton\n        id=\"long-menu\"\n        aria-label=\"more\"\n        aria-controls=\"long-menu\"\n        aria-expanded={!!anchorEl}\n        aria-haspopup=\"true\"\n        role=\"button\"\n        onClick={onOpen}\n        data-testid=\"menu-button\"\n        color=\"inherit\"\n        className={classes.button}\n      >\n        <MoreVert />\n      </IconButton>\n      <Popover\n        aria-labelledby=\"long-menu\"\n        open={Boolean(anchorEl)}\n        onClose={onClose}\n        anchorEl={anchorEl}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n        transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n      >\n        <MenuList>\n          <MenuItem onClick={() => window.open(editUrl, '_blank')}>\n            <ListItemIcon>\n              <Edit fontSize=\"small\" />\n            </ListItemIcon>\n            <ListItemText\n              primary={t(\n                'templateWizardPage.pageContextMenu.editConfigurationTitle',\n              )}\n            />\n          </MenuItem>\n        </MenuList>\n      </Popover>\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AA6BA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,MAAQ,EAAA;AAAA,IACN,KAAA,EAAO,MAAM,IAAK,CAAA,SAAA;AAAA,GACpB;AACF,CAAE,CAAA,CAAA,CAAA;AAMK,SAAS,8BACd,KACA,EAAA;AACA,EAAM,MAAA,EAAE,SAAY,GAAA,KAAA,CAAA;AACpB,EAAA,MAAM,UAAU,SAAU,EAAA,CAAA;AAC1B,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,QAA4B,EAAA,CAAA;AAC5D,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,wBAAwB,CAAA,CAAA;AAExD,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAM,MAAA,MAAA,GAAS,CAAC,KAAmD,KAAA;AACjE,IAAA,WAAA,CAAY,MAAM,aAAa,CAAA,CAAA;AAAA,GACjC,CAAA;AAEA,EAAA,MAAM,UAAU,MAAM;AACpB,IAAA,WAAA,CAAY,KAAS,CAAA,CAAA,CAAA;AAAA,GACvB,CAAA;AAEA,EAAA,uBAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,EAAG,EAAA,WAAA;AAAA,MACH,YAAW,EAAA,MAAA;AAAA,MACX,eAAc,EAAA,WAAA;AAAA,MACd,eAAA,EAAe,CAAC,CAAC,QAAA;AAAA,MACjB,eAAc,EAAA,MAAA;AAAA,MACd,IAAK,EAAA,QAAA;AAAA,MACL,OAAS,EAAA,MAAA;AAAA,MACT,aAAY,EAAA,aAAA;AAAA,MACZ,KAAM,EAAA,SAAA;AAAA,MACN,WAAW,OAAQ,CAAA,MAAA;AAAA,KAAA;AAAA,wCAElB,QAAS,EAAA,IAAA,CAAA;AAAA,GAEZ,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,iBAAgB,EAAA,WAAA;AAAA,MAChB,IAAA,EAAM,QAAQ,QAAQ,CAAA;AAAA,MACtB,OAAA;AAAA,MACA,QAAA;AAAA,MACA,YAAc,EAAA,EAAE,QAAU,EAAA,QAAA,EAAU,YAAY,OAAQ,EAAA;AAAA,MACxD,eAAiB,EAAA,EAAE,QAAU,EAAA,KAAA,EAAO,YAAY,OAAQ,EAAA;AAAA,KAAA;AAAA,wCAEvD,QACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,YAAS,OAAS,EAAA,MAAM,OAAO,IAAK,CAAA,OAAA,EAAS,QAAQ,CAAA,EAAA,sCACnD,YACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,QAAS,EAAA,OAAA,EAAQ,CACzB,CACA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,OAAS,EAAA,CAAA;AAAA,UACP,2DAAA;AAAA,SACF;AAAA,OAAA;AAAA,KAEJ,CACF,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}