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

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

@@ -1 +1 @@
-{"version":3,"file":"TemplateEditorToolbarTemplatesMenu.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateEditorToolbarTemplatesMenu.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { MouseEvent, useCallback, useState } from 'react';\n\nimport { makeStyles } from '@material-ui/core/styles';\nimport Button from '@material-ui/core/Button';\nimport Menu from '@material-ui/core/Menu';\nimport MenuItem from '@material-ui/core/MenuItem';\n\nimport { Entity } from '@backstage/catalog-model';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { scaffolderTranslationRef } from '../../../translation';\n\nconst ITEM_HEIGHT = 48;\n\nconst useStyles = makeStyles({\n  menu: {\n    maxHeight: ITEM_HEIGHT * 5,\n  },\n});\n\nexport type TemplateOption = {\n  label: string;\n  value: Entity;\n};\n\nexport function TemplateEditorToolbarTemplatesMenu(props: {\n  options: TemplateOption[];\n  selectedOption?: TemplateOption;\n  onSelectOption: (option: TemplateOption) => void;\n}) {\n  const { options, selectedOption, onSelectOption } = props;\n  const classes = useStyles();\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  const isSelectedOption = useCallback(\n    (option: TemplateOption) => {\n      return !!selectedOption && selectedOption.value === option.value;\n    },\n    [selectedOption],\n  );\n\n  const handleOpenMenu = useCallback(\n    (event: MouseEvent<HTMLElement>) => {\n      setAnchorEl(event.currentTarget);\n    },\n    [setAnchorEl],\n  );\n\n  const handleCloseMenu = useCallback(() => {\n    setAnchorEl(null);\n  }, [setAnchorEl]);\n\n  const handleSelectOption = useCallback(\n    (option: TemplateOption) => {\n      handleCloseMenu();\n      onSelectOption(option);\n    },\n    [handleCloseMenu, onSelectOption],\n  );\n\n  return (\n    <>\n      <Button\n        aria-controls=\"templates-menu\"\n        aria-haspopup=\"true\"\n        onClick={handleOpenMenu}\n      >\n        {t('templateEditorToolbarTemplatesMenu.button')}\n      </Button>\n      <Menu\n        id=\"templates-menu\"\n        anchorEl={anchorEl}\n        open={Boolean(anchorEl)}\n        onClose={handleCloseMenu}\n        getContentAnchorEl={null}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'left',\n        }}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'left',\n        }}\n        PaperProps={{\n          className: classes.menu,\n        }}\n      >\n        {options.map((option, index) => (\n          <MenuItem\n            key={index}\n            selected={isSelectedOption(option)}\n            aria-selected={isSelectedOption(option)}\n            onClick={() => handleSelectOption(option)}\n          >\n            {option.label}\n          </MenuItem>\n        ))}\n      </Menu>\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AA2BA,MAAM,WAAc,GAAA,EAAA;AAEpB,MAAM,YAAY,UAAW,CAAA;AAAA,EAC3B,IAAM,EAAA;AAAA,IACJ,WAAW,WAAc,GAAA;AAAA;AAE7B,CAAC,CAAA;AAOM,SAAS,mCAAmC,KAIhD,EAAA;AACD,EAAA,MAAM,EAAE,OAAA,EAAS,cAAgB,EAAA,cAAA,EAAmB,GAAA,KAAA;AACpD,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAA6B,IAAI,CAAA;AACjE,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,wBAAwB,CAAA;AAExD,EAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,IACvB,CAAC,MAA2B,KAAA;AAC1B,MAAA,OAAO,CAAC,CAAC,cAAkB,IAAA,cAAA,CAAe,UAAU,MAAO,CAAA,KAAA;AAAA,KAC7D;AAAA,IACA,CAAC,cAAc;AAAA,GACjB;AAEA,EAAA,MAAM,cAAiB,GAAA,WAAA;AAAA,IACrB,CAAC,KAAmC,KAAA;AAClC,MAAA,WAAA,CAAY,MAAM,aAAa,CAAA;AAAA,KACjC;AAAA,IACA,CAAC,WAAW;AAAA,GACd;AAEA,EAAM,MAAA,eAAA,GAAkB,YAAY,MAAM;AACxC,IAAA,WAAA,CAAY,IAAI,CAAA;AAAA,GAClB,EAAG,CAAC,WAAW,CAAC,CAAA;AAEhB,EAAA,MAAM,kBAAqB,GAAA,WAAA;AAAA,IACzB,CAAC,MAA2B,KAAA;AAC1B,MAAgB,eAAA,EAAA;AAChB,MAAA,cAAA,CAAe,MAAM,CAAA;AAAA,KACvB;AAAA,IACA,CAAC,iBAAiB,cAAc;AAAA,GAClC;AAEA,EAAA,uBAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,eAAc,EAAA,gBAAA;AAAA,MACd,eAAc,EAAA,MAAA;AAAA,MACd,OAAS,EAAA;AAAA,KAAA;AAAA,IAER,EAAE,2CAA2C;AAAA,GAEhD,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,EAAG,EAAA,gBAAA;AAAA,MACH,QAAA;AAAA,MACA,IAAA,EAAM,QAAQ,QAAQ,CAAA;AAAA,MACtB,OAAS,EAAA,eAAA;AAAA,MACT,kBAAoB,EAAA,IAAA;AAAA,MACpB,YAAc,EAAA;AAAA,QACZ,QAAU,EAAA,QAAA;AAAA,QACV,UAAY,EAAA;AAAA,OACd;AAAA,MACA,eAAiB,EAAA;AAAA,QACf,QAAU,EAAA,KAAA;AAAA,QACV,UAAY,EAAA;AAAA,OACd;AAAA,MACA,UAAY,EAAA;AAAA,QACV,WAAW,OAAQ,CAAA;AAAA;AACrB,KAAA;AAAA,IAEC,OAAQ,CAAA,GAAA,CAAI,CAAC,MAAA,EAAQ,KACpB,qBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA,KAAA;AAAA,QACL,QAAA,EAAU,iBAAiB,MAAM,CAAA;AAAA,QACjC,eAAA,EAAe,iBAAiB,MAAM,CAAA;AAAA,QACtC,OAAA,EAAS,MAAM,kBAAA,CAAmB,MAAM;AAAA,OAAA;AAAA,MAEvC,MAAO,CAAA;AAAA,KAEX;AAAA,GAEL,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TemplateEditorToolbarTemplatesMenu.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateEditorToolbarTemplatesMenu.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { MouseEvent, useCallback, useState } from 'react';\n\nimport { makeStyles } from '@material-ui/core/styles';\nimport Button from '@material-ui/core/Button';\nimport Menu from '@material-ui/core/Menu';\nimport MenuItem from '@material-ui/core/MenuItem';\n\nimport { Entity } from '@backstage/catalog-model';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { scaffolderTranslationRef } from '../../../translation';\n\nconst ITEM_HEIGHT = 48;\n\nconst useStyles = makeStyles({\n  menu: {\n    maxHeight: ITEM_HEIGHT * 5,\n  },\n});\n\nexport type TemplateOption = {\n  label: string;\n  value: Entity;\n};\n\nexport function TemplateEditorToolbarTemplatesMenu(props: {\n  options: TemplateOption[];\n  selectedOption?: TemplateOption;\n  onSelectOption: (option: TemplateOption) => void;\n}) {\n  const { options, selectedOption, onSelectOption } = props;\n  const classes = useStyles();\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  const isSelectedOption = useCallback(\n    (option: TemplateOption) => {\n      return !!selectedOption && selectedOption.value === option.value;\n    },\n    [selectedOption],\n  );\n\n  const handleOpenMenu = useCallback(\n    (event: MouseEvent<HTMLElement>) => {\n      setAnchorEl(event.currentTarget);\n    },\n    [setAnchorEl],\n  );\n\n  const handleCloseMenu = useCallback(() => {\n    setAnchorEl(null);\n  }, [setAnchorEl]);\n\n  const handleSelectOption = useCallback(\n    (option: TemplateOption) => {\n      handleCloseMenu();\n      onSelectOption(option);\n    },\n    [handleCloseMenu, onSelectOption],\n  );\n\n  return (\n    <>\n      <Button\n        aria-controls=\"templates-menu\"\n        aria-haspopup=\"true\"\n        onClick={handleOpenMenu}\n      >\n        {t('templateEditorToolbarTemplatesMenu.button')}\n      </Button>\n      <Menu\n        id=\"templates-menu\"\n        anchorEl={anchorEl}\n        open={Boolean(anchorEl)}\n        onClose={handleCloseMenu}\n        getContentAnchorEl={null}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'left',\n        }}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'left',\n        }}\n        PaperProps={{\n          className: classes.menu,\n        }}\n      >\n        {options.map((option, index) => (\n          <MenuItem\n            key={index}\n            selected={isSelectedOption(option)}\n            aria-selected={isSelectedOption(option)}\n            onClick={() => handleSelectOption(option)}\n          >\n            {option.label}\n          </MenuItem>\n        ))}\n      </Menu>\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AA2BA,MAAM,WAAc,GAAA,EAAA;AAEpB,MAAM,YAAY,UAAW,CAAA;AAAA,EAC3B,IAAM,EAAA;AAAA,IACJ,WAAW,WAAc,GAAA;AAAA;AAE7B,CAAC,CAAA;AAOM,SAAS,mCAAmC,KAIhD,EAAA;AACD,EAAA,MAAM,EAAE,OAAA,EAAS,cAAgB,EAAA,cAAA,EAAmB,GAAA,KAAA;AACpD,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAA6B,IAAI,CAAA;AACjE,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,wBAAwB,CAAA;AAExD,EAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,IACvB,CAAC,MAA2B,KAAA;AAC1B,MAAA,OAAO,CAAC,CAAC,cAAkB,IAAA,cAAA,CAAe,UAAU,MAAO,CAAA,KAAA;AAAA,KAC7D;AAAA,IACA,CAAC,cAAc;AAAA,GACjB;AAEA,EAAA,MAAM,cAAiB,GAAA,WAAA;AAAA,IACrB,CAAC,KAAmC,KAAA;AAClC,MAAA,WAAA,CAAY,MAAM,aAAa,CAAA;AAAA,KACjC;AAAA,IACA,CAAC,WAAW;AAAA,GACd;AAEA,EAAM,MAAA,eAAA,GAAkB,YAAY,MAAM;AACxC,IAAA,WAAA,CAAY,IAAI,CAAA;AAAA,GAClB,EAAG,CAAC,WAAW,CAAC,CAAA;AAEhB,EAAA,MAAM,kBAAqB,GAAA,WAAA;AAAA,IACzB,CAAC,MAA2B,KAAA;AAC1B,MAAgB,eAAA,EAAA;AAChB,MAAA,cAAA,CAAe,MAAM,CAAA;AAAA,KACvB;AAAA,IACA,CAAC,iBAAiB,cAAc;AAAA,GAClC;AAEA,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,eAAc,EAAA,gBAAA;AAAA,QACd,eAAc,EAAA,MAAA;AAAA,QACd,OAAS,EAAA,cAAA;AAAA,QAER,YAAE,2CAA2C;AAAA;AAAA,KAChD;AAAA,oBACA,GAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,EAAG,EAAA,gBAAA;AAAA,QACH,QAAA;AAAA,QACA,IAAA,EAAM,QAAQ,QAAQ,CAAA;AAAA,QACtB,OAAS,EAAA,eAAA;AAAA,QACT,kBAAoB,EAAA,IAAA;AAAA,QACpB,YAAc,EAAA;AAAA,UACZ,QAAU,EAAA,QAAA;AAAA,UACV,UAAY,EAAA;AAAA,SACd;AAAA,QACA,eAAiB,EAAA;AAAA,UACf,QAAU,EAAA,KAAA;AAAA,UACV,UAAY,EAAA;AAAA,SACd;AAAA,QACA,UAAY,EAAA;AAAA,UACV,WAAW,OAAQ,CAAA;AAAA,SACrB;AAAA,QAEC,QAAQ,EAAA,OAAA,CAAA,GAAA,CAAI,CAAC,MAAA,EAAQ,KACpB,qBAAA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YAEC,QAAA,EAAU,iBAAiB,MAAM,CAAA;AAAA,YACjC,eAAA,EAAe,iBAAiB,MAAM,CAAA;AAAA,YACtC,OAAA,EAAS,MAAM,kBAAA,CAAmB,MAAM,CAAA;AAAA,YAEvC,QAAO,EAAA,MAAA,CAAA;AAAA,WAAA;AAAA,UALH;AAAA,SAOR;AAAA;AAAA;AACH,GACF,EAAA,CAAA;AAEJ;;;;"}

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

@@ -1,4 +1,5 @@
-import React, { useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { makeStyles } from '@material-ui/core/styles';
 import { Page, Header, Content } from '@backstage/core-components';
@@ -21,24 +22,27 @@ function TemplateFormPage(props) {
   const handleClose = useCallback(() => {
     navigate(editLink());
   }, [navigate, editLink]);
-  return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(
-    Header,
-    {
-      title: t("templateFormPage.title"),
-      subtitle: t("templateFormPage.subtitle"),
-      type: t("templateIntroPage.title"),
-      typeLink: editLink()
-    }
-  ), /* @__PURE__ */ React.createElement(Content, { className: classes.root }, /* @__PURE__ */ React.createElement(
-    TemplateFormPreviewer,
-    {
-      layouts: props.layouts,
-      formProps: props.formProps,
-      customFieldExtensions: props.fieldExtensions,
-      defaultPreviewTemplate: props.defaultPreviewTemplate,
-      onClose: handleClose
-    }
-  )));
+  return /* @__PURE__ */ jsxs(Page, { themeId: "home", children: [
+    /* @__PURE__ */ jsx(
+      Header,
+      {
+        title: t("templateFormPage.title"),
+        subtitle: t("templateFormPage.subtitle"),
+        type: t("templateIntroPage.title"),
+        typeLink: editLink()
+      }
+    ),
+    /* @__PURE__ */ jsx(Content, { className: classes.root, children: /* @__PURE__ */ jsx(
+      TemplateFormPreviewer,
+      {
+        layouts: props.layouts,
+        formProps: props.formProps,
+        customFieldExtensions: props.fieldExtensions,
+        defaultPreviewTemplate: props.defaultPreviewTemplate,
+        onClose: handleClose
+      }
+    ) })
+  ] });
 }
 
 export { TemplateFormPage };

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

@@ -1 +1 @@
-{"version":3,"file":"TemplateFormPage.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateFormPage.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useCallback } from 'react';\nimport { useNavigate } from 'react-router-dom';\n\nimport { makeStyles } from '@material-ui/core/styles';\n\nimport { Page, Header, Content } from '@backstage/core-components';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport {\n  FormProps,\n  LayoutOptions,\n  FieldExtensionOptions,\n} from '@backstage/plugin-scaffolder-react';\n\nimport { editRouteRef } from '../../../routes';\nimport { scaffolderTranslationRef } from '../../../translation';\n\nimport { TemplateFormPreviewer } from './TemplateFormPreviewer';\n\nconst useStyles = makeStyles({\n  root: {\n    padding: 0,\n  },\n});\n\ninterface TemplateFormPageProps {\n  layouts?: LayoutOptions[];\n  formProps?: FormProps;\n  fieldExtensions?: FieldExtensionOptions<any, any>[];\n  defaultPreviewTemplate?: string;\n}\n\nexport function TemplateFormPage(props: TemplateFormPageProps) {\n  const classes = useStyles();\n  const navigate = useNavigate();\n  const editLink = useRouteRef(editRouteRef);\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  const handleClose = useCallback(() => {\n    navigate(editLink());\n  }, [navigate, editLink]);\n\n  return (\n    <Page themeId=\"home\">\n      <Header\n        title={t('templateFormPage.title')}\n        subtitle={t('templateFormPage.subtitle')}\n        type={t('templateIntroPage.title')}\n        typeLink={editLink()}\n      />\n      <Content className={classes.root}>\n        <TemplateFormPreviewer\n          layouts={props.layouts}\n          formProps={props.formProps}\n          customFieldExtensions={props.fieldExtensions}\n          defaultPreviewTemplate={props.defaultPreviewTemplate}\n          onClose={handleClose}\n        />\n      </Content>\n    </Page>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAmCA,MAAM,YAAY,UAAW,CAAA;AAAA,EAC3B,IAAM,EAAA;AAAA,IACJ,OAAS,EAAA;AAAA;AAEb,CAAC,CAAA;AASM,SAAS,iBAAiB,KAA8B,EAAA;AAC7D,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAA,MAAM,WAAW,WAAY,EAAA;AAC7B,EAAM,MAAA,QAAA,GAAW,YAAY,YAAY,CAAA;AACzC,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,wBAAwB,CAAA;AAExD,EAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,IAAA,QAAA,CAAS,UAAU,CAAA;AAAA,GAClB,EAAA,CAAC,QAAU,EAAA,QAAQ,CAAC,CAAA;AAEvB,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,OAAA,EAAQ,MACZ,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,wBAAwB,CAAA;AAAA,MACjC,QAAA,EAAU,EAAE,2BAA2B,CAAA;AAAA,MACvC,IAAA,EAAM,EAAE,yBAAyB,CAAA;AAAA,MACjC,UAAU,QAAS;AAAA;AAAA,GAErB,kBAAA,KAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,EAAA,SAAA,EAAW,QAAQ,IAC1B,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,qBAAA;AAAA,IAAA;AAAA,MACC,SAAS,KAAM,CAAA,OAAA;AAAA,MACf,WAAW,KAAM,CAAA,SAAA;AAAA,MACjB,uBAAuB,KAAM,CAAA,eAAA;AAAA,MAC7B,wBAAwB,KAAM,CAAA,sBAAA;AAAA,MAC9B,OAAS,EAAA;AAAA;AAAA,GAEb,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TemplateFormPage.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateFormPage.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useCallback } from 'react';\nimport { useNavigate } from 'react-router-dom';\n\nimport { makeStyles } from '@material-ui/core/styles';\n\nimport { Page, Header, Content } from '@backstage/core-components';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport {\n  FormProps,\n  LayoutOptions,\n  FieldExtensionOptions,\n} from '@backstage/plugin-scaffolder-react';\n\nimport { editRouteRef } from '../../../routes';\nimport { scaffolderTranslationRef } from '../../../translation';\n\nimport { TemplateFormPreviewer } from './TemplateFormPreviewer';\n\nconst useStyles = makeStyles({\n  root: {\n    padding: 0,\n  },\n});\n\ninterface TemplateFormPageProps {\n  layouts?: LayoutOptions[];\n  formProps?: FormProps;\n  fieldExtensions?: FieldExtensionOptions<any, any>[];\n  defaultPreviewTemplate?: string;\n}\n\nexport function TemplateFormPage(props: TemplateFormPageProps) {\n  const classes = useStyles();\n  const navigate = useNavigate();\n  const editLink = useRouteRef(editRouteRef);\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  const handleClose = useCallback(() => {\n    navigate(editLink());\n  }, [navigate, editLink]);\n\n  return (\n    <Page themeId=\"home\">\n      <Header\n        title={t('templateFormPage.title')}\n        subtitle={t('templateFormPage.subtitle')}\n        type={t('templateIntroPage.title')}\n        typeLink={editLink()}\n      />\n      <Content className={classes.root}>\n        <TemplateFormPreviewer\n          layouts={props.layouts}\n          formProps={props.formProps}\n          customFieldExtensions={props.fieldExtensions}\n          defaultPreviewTemplate={props.defaultPreviewTemplate}\n          onClose={handleClose}\n        />\n      </Content>\n    </Page>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAmCA,MAAM,YAAY,UAAW,CAAA;AAAA,EAC3B,IAAM,EAAA;AAAA,IACJ,OAAS,EAAA;AAAA;AAEb,CAAC,CAAA;AASM,SAAS,iBAAiB,KAA8B,EAAA;AAC7D,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAA,MAAM,WAAW,WAAY,EAAA;AAC7B,EAAM,MAAA,QAAA,GAAW,YAAY,YAAY,CAAA;AACzC,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,wBAAwB,CAAA;AAExD,EAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,IAAA,QAAA,CAAS,UAAU,CAAA;AAAA,GAClB,EAAA,CAAC,QAAU,EAAA,QAAQ,CAAC,CAAA;AAEvB,EACE,uBAAA,IAAA,CAAC,IAAK,EAAA,EAAA,OAAA,EAAQ,MACZ,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,EAAE,wBAAwB,CAAA;AAAA,QACjC,QAAA,EAAU,EAAE,2BAA2B,CAAA;AAAA,QACvC,IAAA,EAAM,EAAE,yBAAyB,CAAA;AAAA,QACjC,UAAU,QAAS;AAAA;AAAA,KACrB;AAAA,oBACC,GAAA,CAAA,OAAA,EAAA,EAAQ,SAAW,EAAA,OAAA,CAAQ,IAC1B,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,qBAAA;AAAA,MAAA;AAAA,QACC,SAAS,KAAM,CAAA,OAAA;AAAA,QACf,WAAW,KAAM,CAAA,SAAA;AAAA,QACjB,uBAAuB,KAAM,CAAA,eAAA;AAAA,QAC7B,wBAAwB,KAAM,CAAA,sBAAA;AAAA,QAC9B,OAAS,EAAA;AAAA;AAAA,KAEb,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

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

@@ -1,5 +1,6 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import yaml from 'yaml';
-import React, { useState, useCallback } from 'react';
+import { useState, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import useAsync from 'react-use/esm/useAsync';
 import { makeStyles } from '@material-ui/core/styles';
@@ -130,36 +131,43 @@ const TemplateFormPreviewer = ({
     },
     [setSelectedTemplate, setTemplateYaml]
   );
-  return /* @__PURE__ */ React.createElement(TemplateEditorLayout, { classes: { root: classes.root } }, /* @__PURE__ */ React.createElement(TemplateEditorLayoutToolbar, null, /* @__PURE__ */ React.createElement(TemplateEditorToolbar, { fieldExtensions: customFieldExtensions }, /* @__PURE__ */ React.createElement(
-    TemplateEditorToolbarFileMenu,
-    {
-      onCloseDirectory: handleCloseDirectory
-    }
-  ), /* @__PURE__ */ React.createElement(
-    TemplateEditorToolbarTemplatesMenu,
-    {
-      options: templateOptions,
-      selectedOption: selectedTemplate,
-      onSelectOption: handleSelectChange
-    }
-  ))), /* @__PURE__ */ React.createElement(TemplateEditorLayoutFiles, { classes: { root: classes.files } }, /* @__PURE__ */ React.createElement(
-    TemplateEditorTextArea,
-    {
-      content: templateYaml,
-      onUpdate: setTemplateYaml,
-      errorText
-    }
-  )), /* @__PURE__ */ React.createElement(TemplateEditorLayoutPreview, null, /* @__PURE__ */ React.createElement(
-    TemplateEditorForm,
-    {
-      content: templateYaml,
-      contentIsSpec: true,
-      fieldExtensions: customFieldExtensions,
-      setErrorText,
-      layouts,
-      formProps
-    }
-  )));
+  return /* @__PURE__ */ jsxs(TemplateEditorLayout, { classes: { root: classes.root }, children: [
+    /* @__PURE__ */ jsx(TemplateEditorLayoutToolbar, { children: /* @__PURE__ */ jsxs(TemplateEditorToolbar, { fieldExtensions: customFieldExtensions, children: [
+      /* @__PURE__ */ jsx(
+        TemplateEditorToolbarFileMenu,
+        {
+          onCloseDirectory: handleCloseDirectory
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TemplateEditorToolbarTemplatesMenu,
+        {
+          options: templateOptions,
+          selectedOption: selectedTemplate,
+          onSelectOption: handleSelectChange
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(TemplateEditorLayoutFiles, { classes: { root: classes.files }, children: /* @__PURE__ */ jsx(
+      TemplateEditorTextArea,
+      {
+        content: templateYaml,
+        onUpdate: setTemplateYaml,
+        errorText
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TemplateEditorLayoutPreview, { children: /* @__PURE__ */ jsx(
+      TemplateEditorForm,
+      {
+        content: templateYaml,
+        contentIsSpec: true,
+        fieldExtensions: customFieldExtensions,
+        setErrorText,
+        layouts,
+        formProps
+      }
+    ) })
+  ] });
 };
 
 export { TemplateFormPreviewer };

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

@@ -1 +1 @@
-{"version":3,"file":"TemplateFormPreviewer.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateFormPreviewer.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport yaml from 'yaml';\nimport React, { useCallback, useState } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport useAsync from 'react-use/esm/useAsync';\n\nimport { makeStyles } from '@material-ui/core/styles';\n\nimport { alertApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';\nimport {\n  catalogApiRef,\n  humanizeEntityRef,\n} from '@backstage/plugin-catalog-react';\nimport {\n  LayoutOptions,\n  FieldExtensionOptions,\n  FormProps,\n} from '@backstage/plugin-scaffolder-react';\n\nimport { editRouteRef } from '../../../routes';\n\nimport {\n  TemplateEditorLayout,\n  TemplateEditorLayoutToolbar,\n  TemplateEditorLayoutFiles,\n  TemplateEditorLayoutPreview,\n} from './TemplateEditorLayout';\nimport { TemplateEditorToolbar } from './TemplateEditorToolbar';\nimport { TemplateEditorToolbarFileMenu } from './TemplateEditorToolbarFileMenu';\nimport {\n  TemplateOption,\n  TemplateEditorToolbarTemplatesMenu,\n} from './TemplateEditorToolbarTemplatesMenu';\nimport { TemplateEditorForm } from './TemplateEditorForm';\nimport { TemplateEditorTextArea } from './TemplateEditorTextArea';\n\nconst EXAMPLE_TEMPLATE_PARAMS_YAML = `# Edit the template parameters below to see how they will render in the scaffolder form UI\nparameters:\n  - title: Fill in some steps\n    required:\n      - name\n    properties:\n      name:\n        title: Name\n        type: string\n        description: Unique name of the component\n      owner:\n        title: Owner\n        type: string\n        description: Owner of the component\n        ui:field: OwnerPicker\n        ui:options:\n          catalogFilter:\n            kind: Group\n  - title: Choose a location\n    required:\n      - repoUrl\n    properties:\n      repoUrl:\n        title: Repository Location\n        type: string\n        ui:field: RepoUrlPicker\n        ui:options:\n          allowedHosts:\n            - github.com\nsteps:\n  - id: fetch-base\n    name: Fetch Base\n    action: fetch:template\n    input:\n      url: ./template\n      values:\n        name: \\${{parameters.name}}\n`;\n\n/** @public */\nexport type ScaffolderTemplateFormPreviewerClassKey =\n  | 'root'\n  | 'toolbar'\n  | 'controls'\n  | 'textArea'\n  | 'preview';\n\nconst useStyles = makeStyles(\n  theme => ({\n    root: {\n      height: '100%',\n      gridArea: 'pageContent',\n      display: 'grid',\n      gridTemplateAreas: `\n      \"toolbar\"\n      \"textArea\"\n      \"preview\"\n    `,\n      [theme.breakpoints.up('md')]: {\n        gridTemplateAreas: `\n      \"toolbar toolbar\"\n      \"textArea preview\"\n    `,\n        gridTemplateRows: 'auto 1fr',\n        gridTemplateColumns: '1fr 1fr',\n      },\n    },\n    files: {\n      gridArea: 'textArea',\n    },\n  }),\n  { name: 'ScaffolderTemplateFormPreviewer' },\n);\n\nexport const TemplateFormPreviewer = ({\n  defaultPreviewTemplate = EXAMPLE_TEMPLATE_PARAMS_YAML,\n  customFieldExtensions = [],\n  layouts = [],\n  formProps,\n}: {\n  defaultPreviewTemplate?: string;\n  customFieldExtensions?: FieldExtensionOptions<any, any>[];\n  onClose?: () => void;\n  layouts?: LayoutOptions[];\n  formProps?: FormProps;\n}) => {\n  const classes = useStyles();\n  const alertApi = useApi(alertApiRef);\n  const catalogApi = useApi(catalogApiRef);\n  const navigate = useNavigate();\n  const editLink = useRouteRef(editRouteRef);\n\n  const [errorText, setErrorText] = useState<string>();\n  const [selectedTemplate, setSelectedTemplate] = useState<TemplateOption>();\n  const [templateOptions, setTemplateOptions] = useState<TemplateOption[]>([]);\n  const [templateYaml, setTemplateYaml] = useState(defaultPreviewTemplate);\n\n  const handleCloseDirectory = useCallback(() => {\n    navigate(editLink());\n  }, [navigate, editLink]);\n\n  useAsync(\n    () =>\n      catalogApi\n        .getEntities({\n          filter: { kind: 'template' },\n          fields: [\n            'kind',\n            'metadata.namespace',\n            'metadata.name',\n            'metadata.title',\n            'spec.parameters',\n            'spec.steps',\n            'spec.output',\n          ],\n        })\n        .then(({ items }) =>\n          setTemplateOptions(\n            items.map(template => ({\n              label:\n                template.metadata.title ??\n                humanizeEntityRef(template, { defaultKind: 'template' }),\n              value: template,\n            })),\n          ),\n        )\n        .catch(e =>\n          alertApi.post({\n            message: `Error loading exisiting templates: ${e.message}`,\n            severity: 'error',\n          }),\n        ),\n    [catalogApi],\n  );\n\n  const handleSelectChange = useCallback(\n    // TODO(Rugvip): Afaik this should be Entity, but didn't want to make runtime changes while fixing types\n    (selected: TemplateOption) => {\n      setSelectedTemplate(selected);\n      setTemplateYaml(yaml.stringify(selected.value.spec));\n    },\n    [setSelectedTemplate, setTemplateYaml],\n  );\n\n  return (\n    <TemplateEditorLayout classes={{ root: classes.root }}>\n      <TemplateEditorLayoutToolbar>\n        <TemplateEditorToolbar fieldExtensions={customFieldExtensions}>\n          <TemplateEditorToolbarFileMenu\n            onCloseDirectory={handleCloseDirectory}\n          />\n          <TemplateEditorToolbarTemplatesMenu\n            options={templateOptions}\n            selectedOption={selectedTemplate}\n            onSelectOption={handleSelectChange}\n          />\n        </TemplateEditorToolbar>\n      </TemplateEditorLayoutToolbar>\n      <TemplateEditorLayoutFiles classes={{ root: classes.files }}>\n        <TemplateEditorTextArea\n          content={templateYaml}\n          onUpdate={setTemplateYaml}\n          errorText={errorText}\n        />\n      </TemplateEditorLayoutFiles>\n      <TemplateEditorLayoutPreview>\n        <TemplateEditorForm\n          content={templateYaml}\n          contentIsSpec\n          fieldExtensions={customFieldExtensions}\n          setErrorText={setErrorText}\n          layouts={layouts}\n          formProps={formProps}\n        />\n      </TemplateEditorLayoutPreview>\n    </TemplateEditorLayout>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TemplateFormPreviewer.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateFormPreviewer.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport yaml from 'yaml';\nimport { useCallback, useState } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport useAsync from 'react-use/esm/useAsync';\n\nimport { makeStyles } from '@material-ui/core/styles';\n\nimport { alertApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';\nimport {\n  catalogApiRef,\n  humanizeEntityRef,\n} from '@backstage/plugin-catalog-react';\nimport {\n  LayoutOptions,\n  FieldExtensionOptions,\n  FormProps,\n} from '@backstage/plugin-scaffolder-react';\n\nimport { editRouteRef } from '../../../routes';\n\nimport {\n  TemplateEditorLayout,\n  TemplateEditorLayoutToolbar,\n  TemplateEditorLayoutFiles,\n  TemplateEditorLayoutPreview,\n} from './TemplateEditorLayout';\nimport { TemplateEditorToolbar } from './TemplateEditorToolbar';\nimport { TemplateEditorToolbarFileMenu } from './TemplateEditorToolbarFileMenu';\nimport {\n  TemplateOption,\n  TemplateEditorToolbarTemplatesMenu,\n} from './TemplateEditorToolbarTemplatesMenu';\nimport { TemplateEditorForm } from './TemplateEditorForm';\nimport { TemplateEditorTextArea } from './TemplateEditorTextArea';\n\nconst EXAMPLE_TEMPLATE_PARAMS_YAML = `# Edit the template parameters below to see how they will render in the scaffolder form UI\nparameters:\n  - title: Fill in some steps\n    required:\n      - name\n    properties:\n      name:\n        title: Name\n        type: string\n        description: Unique name of the component\n      owner:\n        title: Owner\n        type: string\n        description: Owner of the component\n        ui:field: OwnerPicker\n        ui:options:\n          catalogFilter:\n            kind: Group\n  - title: Choose a location\n    required:\n      - repoUrl\n    properties:\n      repoUrl:\n        title: Repository Location\n        type: string\n        ui:field: RepoUrlPicker\n        ui:options:\n          allowedHosts:\n            - github.com\nsteps:\n  - id: fetch-base\n    name: Fetch Base\n    action: fetch:template\n    input:\n      url: ./template\n      values:\n        name: \\${{parameters.name}}\n`;\n\n/** @public */\nexport type ScaffolderTemplateFormPreviewerClassKey =\n  | 'root'\n  | 'toolbar'\n  | 'controls'\n  | 'textArea'\n  | 'preview';\n\nconst useStyles = makeStyles(\n  theme => ({\n    root: {\n      height: '100%',\n      gridArea: 'pageContent',\n      display: 'grid',\n      gridTemplateAreas: `\n      \"toolbar\"\n      \"textArea\"\n      \"preview\"\n    `,\n      [theme.breakpoints.up('md')]: {\n        gridTemplateAreas: `\n      \"toolbar toolbar\"\n      \"textArea preview\"\n    `,\n        gridTemplateRows: 'auto 1fr',\n        gridTemplateColumns: '1fr 1fr',\n      },\n    },\n    files: {\n      gridArea: 'textArea',\n    },\n  }),\n  { name: 'ScaffolderTemplateFormPreviewer' },\n);\n\nexport const TemplateFormPreviewer = ({\n  defaultPreviewTemplate = EXAMPLE_TEMPLATE_PARAMS_YAML,\n  customFieldExtensions = [],\n  layouts = [],\n  formProps,\n}: {\n  defaultPreviewTemplate?: string;\n  customFieldExtensions?: FieldExtensionOptions<any, any>[];\n  onClose?: () => void;\n  layouts?: LayoutOptions[];\n  formProps?: FormProps;\n}) => {\n  const classes = useStyles();\n  const alertApi = useApi(alertApiRef);\n  const catalogApi = useApi(catalogApiRef);\n  const navigate = useNavigate();\n  const editLink = useRouteRef(editRouteRef);\n\n  const [errorText, setErrorText] = useState<string>();\n  const [selectedTemplate, setSelectedTemplate] = useState<TemplateOption>();\n  const [templateOptions, setTemplateOptions] = useState<TemplateOption[]>([]);\n  const [templateYaml, setTemplateYaml] = useState(defaultPreviewTemplate);\n\n  const handleCloseDirectory = useCallback(() => {\n    navigate(editLink());\n  }, [navigate, editLink]);\n\n  useAsync(\n    () =>\n      catalogApi\n        .getEntities({\n          filter: { kind: 'template' },\n          fields: [\n            'kind',\n            'metadata.namespace',\n            'metadata.name',\n            'metadata.title',\n            'spec.parameters',\n            'spec.steps',\n            'spec.output',\n          ],\n        })\n        .then(({ items }) =>\n          setTemplateOptions(\n            items.map(template => ({\n              label:\n                template.metadata.title ??\n                humanizeEntityRef(template, { defaultKind: 'template' }),\n              value: template,\n            })),\n          ),\n        )\n        .catch(e =>\n          alertApi.post({\n            message: `Error loading exisiting templates: ${e.message}`,\n            severity: 'error',\n          }),\n        ),\n    [catalogApi],\n  );\n\n  const handleSelectChange = useCallback(\n    // TODO(Rugvip): Afaik this should be Entity, but didn't want to make runtime changes while fixing types\n    (selected: TemplateOption) => {\n      setSelectedTemplate(selected);\n      setTemplateYaml(yaml.stringify(selected.value.spec));\n    },\n    [setSelectedTemplate, setTemplateYaml],\n  );\n\n  return (\n    <TemplateEditorLayout classes={{ root: classes.root }}>\n      <TemplateEditorLayoutToolbar>\n        <TemplateEditorToolbar fieldExtensions={customFieldExtensions}>\n          <TemplateEditorToolbarFileMenu\n            onCloseDirectory={handleCloseDirectory}\n          />\n          <TemplateEditorToolbarTemplatesMenu\n            options={templateOptions}\n            selectedOption={selectedTemplate}\n            onSelectOption={handleSelectChange}\n          />\n        </TemplateEditorToolbar>\n      </TemplateEditorLayoutToolbar>\n      <TemplateEditorLayoutFiles classes={{ root: classes.files }}>\n        <TemplateEditorTextArea\n          content={templateYaml}\n          onUpdate={setTemplateYaml}\n          errorText={errorText}\n        />\n      </TemplateEditorLayoutFiles>\n      <TemplateEditorLayoutPreview>\n        <TemplateEditorForm\n          content={templateYaml}\n          contentIsSpec\n          fieldExtensions={customFieldExtensions}\n          setErrorText={setErrorText}\n          layouts={layouts}\n          formProps={formProps}\n        />\n      </TemplateEditorLayoutPreview>\n    </TemplateEditorLayout>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -1,4 +1,5 @@
-import React, { useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useCallback } from 'react';
 import { Page, Header, Content } from '@backstage/core-components';
 import { TemplateEditorIntro } from './TemplateEditorIntro.esm.js';
 import { useNavigate } from 'react-router-dom';
@@ -39,15 +40,18 @@ function TemplateIntroPage() {
       customFieldsLink
     ]
   );
-  return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(
-    Header,
-    {
-      title: t("templateIntroPage.title"),
-      type: "Scaffolder",
-      typeLink: createLink(),
-      subtitle: t("templateIntroPage.subtitle")
-    }
-  ), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(TemplateEditorIntro, { onSelect: handleSelect })));
+  return /* @__PURE__ */ jsxs(Page, { themeId: "home", children: [
+    /* @__PURE__ */ jsx(
+      Header,
+      {
+        title: t("templateIntroPage.title"),
+        type: "Scaffolder",
+        typeLink: createLink(),
+        subtitle: t("templateIntroPage.subtitle")
+      }
+    ),
+    /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsx(TemplateEditorIntro, { onSelect: handleSelect }) })
+  ] });
 }
 
 export { TemplateIntroPage };

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

@@ -1 +1 @@
-{"version":3,"file":"TemplateIntroPage.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateIntroPage.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { useCallback } from 'react';\nimport { Content, Header, Page } from '@backstage/core-components';\n\nimport { TemplateEditorIntro } from './TemplateEditorIntro';\nimport { useNavigate } from 'react-router-dom';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport {\n  rootRouteRef,\n  editorRouteRef,\n  templateFormRouteRef,\n  customFieldsRouteRef,\n} from '../../../routes';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\nimport { useTemplateDirectory } from './useTemplateDirectory';\n\nexport function TemplateIntroPage() {\n  const navigate = useNavigate();\n  const createLink = useRouteRef(rootRouteRef);\n  const editorLink = useRouteRef(editorRouteRef);\n  const templateFormLink = useRouteRef(templateFormRouteRef);\n  const customFieldsLink = useRouteRef(customFieldsRouteRef);\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n  const { openDirectory, createDirectory } = useTemplateDirectory();\n\n  const handleSelect = useCallback(\n    (option: 'create-template' | 'local' | 'form' | 'field-explorer') => {\n      if (option === 'local') {\n        openDirectory()\n          .then(() => navigate(editorLink()))\n          .catch(() => {});\n      } else if (option === 'create-template') {\n        createDirectory()\n          .then(() => navigate(editorLink()))\n          .catch(() => {});\n      } else if (option === 'form') {\n        navigate(templateFormLink());\n      } else if (option === 'field-explorer') {\n        navigate(customFieldsLink());\n      }\n    },\n    [\n      openDirectory,\n      createDirectory,\n      navigate,\n      editorLink,\n      templateFormLink,\n      customFieldsLink,\n    ],\n  );\n\n  return (\n    <Page themeId=\"home\">\n      <Header\n        title={t('templateIntroPage.title')}\n        type=\"Scaffolder\"\n        typeLink={createLink()}\n        subtitle={t('templateIntroPage.subtitle')}\n      />\n      <Content>\n        <TemplateEditorIntro onSelect={handleSelect} />\n      </Content>\n    </Page>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;AA+BO,SAAS,iBAAoB,GAAA;AAClC,EAAA,MAAM,WAAW,WAAY,EAAA;AAC7B,EAAM,MAAA,UAAA,GAAa,YAAY,YAAY,CAAA;AAC3C,EAAM,MAAA,UAAA,GAAa,YAAY,cAAc,CAAA;AAC7C,EAAM,MAAA,gBAAA,GAAmB,YAAY,oBAAoB,CAAA;AACzD,EAAM,MAAA,gBAAA,GAAmB,YAAY,oBAAoB,CAAA;AACzD,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,wBAAwB,CAAA;AACxD,EAAA,MAAM,EAAE,aAAA,EAAe,eAAgB,EAAA,GAAI,oBAAqB,EAAA;AAEhE,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,MAAoE,KAAA;AACnE,MAAA,IAAI,WAAW,OAAS,EAAA;AACtB,QAAc,aAAA,EAAA,CACX,KAAK,MAAM,QAAA,CAAS,YAAY,CAAC,CACjC,CAAA,KAAA,CAAM,MAAM;AAAA,SAAE,CAAA;AAAA,OACnB,MAAA,IAAW,WAAW,iBAAmB,EAAA;AACvC,QAAgB,eAAA,EAAA,CACb,KAAK,MAAM,QAAA,CAAS,YAAY,CAAC,CACjC,CAAA,KAAA,CAAM,MAAM;AAAA,SAAE,CAAA;AAAA,OACnB,MAAA,IAAW,WAAW,MAAQ,EAAA;AAC5B,QAAA,QAAA,CAAS,kBAAkB,CAAA;AAAA,OAC7B,MAAA,IAAW,WAAW,gBAAkB,EAAA;AACtC,QAAA,QAAA,CAAS,kBAAkB,CAAA;AAAA;AAC7B,KACF;AAAA,IACA;AAAA,MACE,aAAA;AAAA,MACA,eAAA;AAAA,MACA,QAAA;AAAA,MACA,UAAA;AAAA,MACA,gBAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,OAAA,EAAQ,MACZ,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,yBAAyB,CAAA;AAAA,MAClC,IAAK,EAAA,YAAA;AAAA,MACL,UAAU,UAAW,EAAA;AAAA,MACrB,QAAA,EAAU,EAAE,4BAA4B;AAAA;AAAA,GAC1C,sCACC,OACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,uBAAoB,QAAU,EAAA,YAAA,EAAc,CAC/C,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TemplateIntroPage.esm.js","sources":["../../../../src/alpha/components/TemplateEditorPage/TemplateIntroPage.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useCallback } from 'react';\nimport { Content, Header, Page } from '@backstage/core-components';\n\nimport { TemplateEditorIntro } from './TemplateEditorIntro';\nimport { useNavigate } from 'react-router-dom';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport {\n  rootRouteRef,\n  editorRouteRef,\n  templateFormRouteRef,\n  customFieldsRouteRef,\n} from '../../../routes';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\nimport { useTemplateDirectory } from './useTemplateDirectory';\n\nexport function TemplateIntroPage() {\n  const navigate = useNavigate();\n  const createLink = useRouteRef(rootRouteRef);\n  const editorLink = useRouteRef(editorRouteRef);\n  const templateFormLink = useRouteRef(templateFormRouteRef);\n  const customFieldsLink = useRouteRef(customFieldsRouteRef);\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n  const { openDirectory, createDirectory } = useTemplateDirectory();\n\n  const handleSelect = useCallback(\n    (option: 'create-template' | 'local' | 'form' | 'field-explorer') => {\n      if (option === 'local') {\n        openDirectory()\n          .then(() => navigate(editorLink()))\n          .catch(() => {});\n      } else if (option === 'create-template') {\n        createDirectory()\n          .then(() => navigate(editorLink()))\n          .catch(() => {});\n      } else if (option === 'form') {\n        navigate(templateFormLink());\n      } else if (option === 'field-explorer') {\n        navigate(customFieldsLink());\n      }\n    },\n    [\n      openDirectory,\n      createDirectory,\n      navigate,\n      editorLink,\n      templateFormLink,\n      customFieldsLink,\n    ],\n  );\n\n  return (\n    <Page themeId=\"home\">\n      <Header\n        title={t('templateIntroPage.title')}\n        type=\"Scaffolder\"\n        typeLink={createLink()}\n        subtitle={t('templateIntroPage.subtitle')}\n      />\n      <Content>\n        <TemplateEditorIntro onSelect={handleSelect} />\n      </Content>\n    </Page>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AA+BO,SAAS,iBAAoB,GAAA;AAClC,EAAA,MAAM,WAAW,WAAY,EAAA;AAC7B,EAAM,MAAA,UAAA,GAAa,YAAY,YAAY,CAAA;AAC3C,EAAM,MAAA,UAAA,GAAa,YAAY,cAAc,CAAA;AAC7C,EAAM,MAAA,gBAAA,GAAmB,YAAY,oBAAoB,CAAA;AACzD,EAAM,MAAA,gBAAA,GAAmB,YAAY,oBAAoB,CAAA;AACzD,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,wBAAwB,CAAA;AACxD,EAAA,MAAM,EAAE,aAAA,EAAe,eAAgB,EAAA,GAAI,oBAAqB,EAAA;AAEhE,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,MAAoE,KAAA;AACnE,MAAA,IAAI,WAAW,OAAS,EAAA;AACtB,QAAc,aAAA,EAAA,CACX,KAAK,MAAM,QAAA,CAAS,YAAY,CAAC,CACjC,CAAA,KAAA,CAAM,MAAM;AAAA,SAAE,CAAA;AAAA,OACnB,MAAA,IAAW,WAAW,iBAAmB,EAAA;AACvC,QAAgB,eAAA,EAAA,CACb,KAAK,MAAM,QAAA,CAAS,YAAY,CAAC,CACjC,CAAA,KAAA,CAAM,MAAM;AAAA,SAAE,CAAA;AAAA,OACnB,MAAA,IAAW,WAAW,MAAQ,EAAA;AAC5B,QAAA,QAAA,CAAS,kBAAkB,CAAA;AAAA,OAC7B,MAAA,IAAW,WAAW,gBAAkB,EAAA;AACtC,QAAA,QAAA,CAAS,kBAAkB,CAAA;AAAA;AAC7B,KACF;AAAA,IACA;AAAA,MACE,aAAA;AAAA,MACA,eAAA;AAAA,MACA,QAAA;AAAA,MACA,UAAA;AAAA,MACA,gBAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EACE,uBAAA,IAAA,CAAC,IAAK,EAAA,EAAA,OAAA,EAAQ,MACZ,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,EAAE,yBAAyB,CAAA;AAAA,QAClC,IAAK,EAAA,YAAA;AAAA,QACL,UAAU,UAAW,EAAA;AAAA,QACrB,QAAA,EAAU,EAAE,4BAA4B;AAAA;AAAA,KAC1C;AAAA,wBACC,OACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,mBAAoB,EAAA,EAAA,QAAA,EAAU,cAAc,CAC/C,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

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

@@ -1,7 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
 import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
-import React from 'react';
 import { Link } from 'react-router-dom';
 import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';
@@ -18,17 +18,17 @@ const RegisterExistingButton = (props) => {
   if (!to || !allowed) {
     return null;
   }
-  return isXSScreen ? /* @__PURE__ */ React.createElement(
+  return isXSScreen ? /* @__PURE__ */ jsx(
     IconButton,
     {
       component: Link,
       color: "primary",
       title,
       size: "small",
-      to
-    },
-    /* @__PURE__ */ React.createElement(CreateComponentIcon, null)
-  ) : /* @__PURE__ */ React.createElement(Button, { component: Link, variant: "outlined", color: "primary", to }, title);
+      to,
+      children: /* @__PURE__ */ jsx(CreateComponentIcon, {})
+    }
+  ) : /* @__PURE__ */ jsx(Button, { component: Link, variant: "outlined", color: "primary", to, children: title });
 };
 
 export { RegisterExistingButton };

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

@@ -1 +1 @@
-{"version":3,"file":"RegisterExistingButton.esm.js","sources":["../../../../src/alpha/components/TemplateListPage/RegisterExistingButton.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport Button from '@material-ui/core/Button';\nimport IconButton from '@material-ui/core/IconButton';\nimport useMediaQuery from '@material-ui/core/useMediaQuery';\nimport React from 'react';\nimport { Link as RouterLink, LinkProps } from 'react-router-dom';\nimport AddCircleOutline from '@material-ui/icons/AddCircleOutline';\nimport { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';\nimport { usePermission } from '@backstage/plugin-permission-react';\nimport { Theme } from '@material-ui/core/styles';\n\n/**\n * Properties for {@link RegisterExistingButton}\n *\n * @alpha\n */\nexport type RegisterExistingButtonProps = {\n  title: string;\n} & Partial<Pick<LinkProps, 'to'>>;\n\n/**\n * A button that helps users to register an existing component.\n * @alpha\n */\nexport const RegisterExistingButton = (props: RegisterExistingButtonProps) => {\n  const { title, to } = props;\n  const { allowed } = usePermission({\n    permission: catalogEntityCreatePermission,\n  });\n  const isXSScreen = useMediaQuery<Theme>(theme =>\n    theme.breakpoints.down('xs'),\n  );\n\n  if (!to || !allowed) {\n    return null;\n  }\n\n  return isXSScreen ? (\n    <IconButton\n      component={RouterLink}\n      color=\"primary\"\n      title={title}\n      size=\"small\"\n      to={to}\n    >\n      <AddCircleOutline />\n    </IconButton>\n  ) : (\n    <Button component={RouterLink} variant=\"outlined\" color=\"primary\" to={to}>\n      {title}\n    </Button>\n  );\n};\n"],"names":["RouterLink","AddCircleOutline"],"mappings":";;;;;;;;;AAuCa,MAAA,sBAAA,GAAyB,CAAC,KAAuC,KAAA;AAC5E,EAAM,MAAA,EAAE,KAAO,EAAA,EAAA,EAAO,GAAA,KAAA;AACtB,EAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,aAAc,CAAA;AAAA,IAChC,UAAY,EAAA;AAAA,GACb,CAAA;AACD,EAAA,MAAM,UAAa,GAAA,aAAA;AAAA,IAAqB,CACtC,KAAA,KAAA,KAAA,CAAM,WAAY,CAAA,IAAA,CAAK,IAAI;AAAA,GAC7B;AAEA,EAAI,IAAA,CAAC,EAAM,IAAA,CAAC,OAAS,EAAA;AACnB,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,OAAO,UACL,mBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAAA,IAAA;AAAA,MACX,KAAM,EAAA,SAAA;AAAA,MACN,KAAA;AAAA,MACA,IAAK,EAAA,OAAA;AAAA,MACL;AAAA,KAAA;AAAA,wCAECC,mBAAiB,EAAA,IAAA;AAAA,GACpB,mBAEC,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAO,SAAW,EAAAD,IAAA,EAAY,SAAQ,UAAW,EAAA,KAAA,EAAM,SAAU,EAAA,EAAA,EAAA,EAC/D,KACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"RegisterExistingButton.esm.js","sources":["../../../../src/alpha/components/TemplateListPage/RegisterExistingButton.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport Button from '@material-ui/core/Button';\nimport IconButton from '@material-ui/core/IconButton';\nimport useMediaQuery from '@material-ui/core/useMediaQuery';\nimport { Link as RouterLink, LinkProps } from 'react-router-dom';\nimport AddCircleOutline from '@material-ui/icons/AddCircleOutline';\nimport { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';\nimport { usePermission } from '@backstage/plugin-permission-react';\nimport { Theme } from '@material-ui/core/styles';\n\n/**\n * Properties for {@link RegisterExistingButton}\n *\n * @alpha\n */\nexport type RegisterExistingButtonProps = {\n  title: string;\n} & Partial<Pick<LinkProps, 'to'>>;\n\n/**\n * A button that helps users to register an existing component.\n * @alpha\n */\nexport const RegisterExistingButton = (props: RegisterExistingButtonProps) => {\n  const { title, to } = props;\n  const { allowed } = usePermission({\n    permission: catalogEntityCreatePermission,\n  });\n  const isXSScreen = useMediaQuery<Theme>(theme =>\n    theme.breakpoints.down('xs'),\n  );\n\n  if (!to || !allowed) {\n    return null;\n  }\n\n  return isXSScreen ? (\n    <IconButton\n      component={RouterLink}\n      color=\"primary\"\n      title={title}\n      size=\"small\"\n      to={to}\n    >\n      <AddCircleOutline />\n    </IconButton>\n  ) : (\n    <Button component={RouterLink} variant=\"outlined\" color=\"primary\" to={to}>\n      {title}\n    </Button>\n  );\n};\n"],"names":["RouterLink","AddCircleOutline"],"mappings":";;;;;;;;;AAsCa,MAAA,sBAAA,GAAyB,CAAC,KAAuC,KAAA;AAC5E,EAAM,MAAA,EAAE,KAAO,EAAA,EAAA,EAAO,GAAA,KAAA;AACtB,EAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,aAAc,CAAA;AAAA,IAChC,UAAY,EAAA;AAAA,GACb,CAAA;AACD,EAAA,MAAM,UAAa,GAAA,aAAA;AAAA,IAAqB,CACtC,KAAA,KAAA,KAAA,CAAM,WAAY,CAAA,IAAA,CAAK,IAAI;AAAA,GAC7B;AAEA,EAAI,IAAA,CAAC,EAAM,IAAA,CAAC,OAAS,EAAA;AACnB,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,OAAO,UACL,mBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAAA,IAAA;AAAA,MACX,KAAM,EAAA,SAAA;AAAA,MACN,KAAA;AAAA,MACA,IAAK,EAAA,OAAA;AAAA,MACL,EAAA;AAAA,MAEA,8BAACC,mBAAiB,EAAA,EAAA;AAAA;AAAA,GACpB,mBAEC,GAAA,CAAA,MAAA,EAAA,EAAO,SAAW,EAAAD,IAAA,EAAY,SAAQ,UAAW,EAAA,KAAA,EAAM,SAAU,EAAA,EAAA,EAC/D,QACH,EAAA,KAAA,EAAA,CAAA;AAEJ;;;;"}

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

@@ -1,4 +1,5 @@
-import React, { useCallback } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useRouteRef, useApp } from '@backstage/core-plugin-api';
 import { DocsIcon, Page, Header, Content, ContentHeader, SupportButton } from '@backstage/core-components';
@@ -68,39 +69,58 @@ const TemplateListPage = (props) => {
     },
     [navigate, templateRoute]
   );
-  return /* @__PURE__ */ React.createElement(EntityListProvider, null, /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(
-    Header,
-    {
-      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, null, /* @__PURE__ */ React.createElement(
-    RegisterExistingButton,
-    {
-      title: t(
-        "templateListPage.contentHeader.registerExistingButtonTitle"
-      ),
-      to: registerComponentLink && registerComponentLink()
-    }
-  ), /* @__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",
-      availableFilters: ["all", "starred"]
-    }
-  ), /* @__PURE__ */ React.createElement(TemplateCategoryPicker, null), /* @__PURE__ */ React.createElement(EntityTagPicker, null), /* @__PURE__ */ React.createElement(EntityOwnerPicker, null)), /* @__PURE__ */ React.createElement(CatalogFilterLayout.Content, null, /* @__PURE__ */ React.createElement(
-    TemplateGroups,
-    {
-      groups,
-      templateFilter,
-      TemplateCardComponent,
-      onTemplateSelected,
-      additionalLinksForEntity
-    }
-  ))))));
+  return /* @__PURE__ */ jsx(EntityListProvider, { children: /* @__PURE__ */ jsxs(Page, { themeId: "home", children: [
+    /* @__PURE__ */ jsx(
+      Header,
+      {
+        pageTitleOverride: t("templateListPage.pageTitle"),
+        title: t("templateListPage.title"),
+        subtitle: t("templateListPage.subtitle"),
+        ...headerOptions,
+        children: /* @__PURE__ */ jsx(ScaffolderPageContextMenu, { ...scaffolderPageContextMenuProps })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Content, { children: [
+      /* @__PURE__ */ jsxs(ContentHeader, { children: [
+        /* @__PURE__ */ jsx(
+          RegisterExistingButton,
+          {
+            title: t(
+              "templateListPage.contentHeader.registerExistingButtonTitle"
+            ),
+            to: registerComponentLink && registerComponentLink()
+          }
+        ),
+        /* @__PURE__ */ jsx(SupportButton, { children: t("templateListPage.contentHeader.supportButtonTitle") })
+      ] }),
+      /* @__PURE__ */ jsxs(CatalogFilterLayout, { children: [
+        /* @__PURE__ */ jsxs(CatalogFilterLayout.Filters, { children: [
+          /* @__PURE__ */ jsx(EntitySearchBar, {}),
+          /* @__PURE__ */ jsx(EntityKindPicker, { initialFilter: "template", hidden: true }),
+          /* @__PURE__ */ jsx(
+            UserListPicker,
+            {
+              initialFilter: "all",
+              availableFilters: ["all", "starred"]
+            }
+          ),
+          /* @__PURE__ */ jsx(TemplateCategoryPicker, {}),
+          /* @__PURE__ */ jsx(EntityTagPicker, {}),
+          /* @__PURE__ */ jsx(EntityOwnerPicker, {})
+        ] }),
+        /* @__PURE__ */ jsx(CatalogFilterLayout.Content, { children: /* @__PURE__ */ jsx(
+          TemplateGroups,
+          {
+            groups,
+            templateFilter,
+            TemplateCardComponent,
+            onTemplateSelected,
+            additionalLinksForEntity
+          }
+        ) })
+      ] })
+    ] })
+  ] }) });
 };
 
 export { TemplateListPage };

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

@@ -1 +1 @@
-{"version":3,"file":"TemplateListPage.esm.js","sources":["../../../../src/alpha/components/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  EntityOwnerPicker,\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>\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              <EntityOwnerPicker />\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/alpha/components/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 { ComponentType, 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  EntityOwnerPicker,\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?: 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>\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              <EntityOwnerPicker />\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/alpha/components/TemplateWizardPage/TemplateWizardPage.esm.js

@@ -1,4 +1,5 @@
-import React, { useState, useCallback } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
 import { useNavigate, Navigate } from 'react-router-dom';
 import useAsync from 'react-use/esm/useAsync';
 import { stringifyEntityRef, ANNOTATION_EDIT_URL } from '@backstage/catalog-model';
@@ -65,29 +66,33 @@ const TemplateWizardPage = (props) => {
       templateRef
     ]
   );
-  const onError = useCallback(() => /* @__PURE__ */ React.createElement(Navigate, { to: rootRef() }), [rootRef]);
-  return /* @__PURE__ */ React.createElement(AnalyticsContext, { attributes: { entityRef: templateRef } }, /* @__PURE__ */ React.createElement(Page, { themeId: "website" }, /* @__PURE__ */ React.createElement(
-    Header,
-    {
-      pageTitleOverride: t("templateWizardPage.pageTitle"),
-      title: t("templateWizardPage.title"),
-      subtitle: t("templateWizardPage.subtitle"),
-      ...props.headerOptions
-    },
-    /* @__PURE__ */ React.createElement(TemplateWizardPageContextMenu, { editUrl })
-  ), isCreating && /* @__PURE__ */ React.createElement(Progress, null), /* @__PURE__ */ React.createElement(
-    Workflow,
-    {
-      namespace,
-      templateName,
-      onCreate,
-      components: props.components,
-      onError,
-      extensions: props.customFieldExtensions,
-      formProps: props.formProps,
-      layouts: props.layouts
-    }
-  )));
+  const onError = useCallback(() => /* @__PURE__ */ jsx(Navigate, { to: rootRef() }), [rootRef]);
+  return /* @__PURE__ */ jsx(AnalyticsContext, { attributes: { entityRef: templateRef }, children: /* @__PURE__ */ jsxs(Page, { themeId: "website", children: [
+    /* @__PURE__ */ jsx(
+      Header,
+      {
+        pageTitleOverride: t("templateWizardPage.pageTitle"),
+        title: t("templateWizardPage.title"),
+        subtitle: t("templateWizardPage.subtitle"),
+        ...props.headerOptions,
+        children: /* @__PURE__ */ jsx(TemplateWizardPageContextMenu, { editUrl })
+      }
+    ),
+    isCreating && /* @__PURE__ */ jsx(Progress, {}),
+    /* @__PURE__ */ jsx(
+      Workflow,
+      {
+        namespace,
+        templateName,
+        onCreate,
+        components: props.components,
+        onError,
+        extensions: props.customFieldExtensions,
+        formProps: props.formProps,
+        layouts: props.layouts
+      }
+    )
+  ] }) });
 };
 
 export { TemplateWizardPage };