@backstage/plugin-scaffolder 1.24.0-next.3 → 1.25.0-next.0

package/dist/components/ListTasksPage/ListTasksPage.esm.js

@@ -12,9 +12,12 @@ import { TemplateTitleColumn } from './columns/TemplateTitleColumn.esm.js';
 import { editRouteRef, actionsRouteRef, rootRouteRef } from '../../routes.esm.js';
 import { ScaffolderPageContextMenu } from '@backstage/plugin-scaffolder-react/alpha';
 import { useNavigate } from 'react-router-dom';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { scaffolderTranslationRef } from '../../translation.esm.js';
 
 const ListTaskPageContent = (props) => {
   const { initiallySelectedFilter = "owned" } = props;
+  const { t } = useTranslationRef(scaffolderTranslationRef);
   const scaffolderApi = useApi(scaffolderApiRef);
   const rootLink = useRouteRef(rootRouteRef);
   const [ownerFilter, setOwnerFilter] = useState(initiallySelectedFilter);
@@ -35,8 +38,8 @@ const ListTaskPageContent = (props) => {
       EmptyState,
       {
         missing: "info",
-        title: "No information to display",
-        description: "There are no tasks or there was an issue communicating with backend."
+        title: t("listTaskPage.content.emptyState.title"),
+        description: t("listTaskPage.content.emptyState.description")
       }
     ));
   }
@@ -50,15 +53,15 @@ const ListTaskPageContent = (props) => {
     Table,
     {
       data: value?.tasks ?? [],
-      title: "Tasks",
+      title: t("listTaskPage.content.tableTitle"),
       columns: [
         {
-          title: "Task ID",
+          title: t("listTaskPage.content.tableCell.taskID"),
           field: "id",
           render: (row) => /* @__PURE__ */ React.createElement(Link, { to: `${rootLink()}/tasks/${row.id}` }, row.id)
         },
         {
-          title: "Template",
+          title: t("listTaskPage.content.tableCell.template"),
           field: "spec.templateInfo.entity.metadata.title",
           render: (row) => /* @__PURE__ */ React.createElement(
             TemplateTitleColumn,
@@ -68,17 +71,17 @@ const ListTaskPageContent = (props) => {
           )
         },
         {
-          title: "Created",
+          title: t("listTaskPage.content.tableCell.created"),
           field: "createdAt",
           render: (row) => /* @__PURE__ */ React.createElement(CreatedAtColumn, { createdAt: row.createdAt })
         },
         {
-          title: "Owner",
+          title: t("listTaskPage.content.tableCell.owner"),
           field: "createdBy",
           render: (row) => /* @__PURE__ */ React.createElement(OwnerEntityColumn, { entityRef: row.spec?.user?.ref })
         },
         {
-          title: "Status",
+          title: t("listTaskPage.content.tableCell.status"),
           field: "status",
           render: (row) => /* @__PURE__ */ React.createElement(TaskStatusColumn, { status: row.status })
         }
@@ -91,6 +94,7 @@ const ListTasksPage = (props) => {
   const editorLink = useRouteRef(editRouteRef);
   const actionsLink = useRouteRef(actionsRouteRef);
   const createLink = useRouteRef(rootRouteRef);
+  const { t } = useTranslationRef(scaffolderTranslationRef);
   const scaffolderPageContextMenuProps = {
     onEditorClicked: () => navigate(editorLink()),
     onActionsClicked: () => navigate(actionsLink()),
@@ -100,9 +104,9 @@ const ListTasksPage = (props) => {
   return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(
     Header,
     {
-      pageTitleOverride: "Templates Tasks",
-      title: "List template tasks",
-      subtitle: "All tasks that have been started"
+      pageTitleOverride: t("listTaskPage.pageTitle"),
+      title: t("listTaskPage.title"),
+      subtitle: t("listTaskPage.subtitle")
     },
     /* @__PURE__ */ React.createElement(ScaffolderPageContextMenu, { ...scaffolderPageContextMenuProps })
   ), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(ListTaskPageContent, { ...props })));

package/dist/components/ListTasksPage/ListTasksPage.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListTasksPage.esm.js","sources":["../../../src/components/ListTasksPage/ListTasksPage.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 {\n  Content,\n  EmptyState,\n  ErrorPanel,\n  Header,\n  Link,\n  Page,\n  Progress,\n  Table,\n} from '@backstage/core-components';\nimport { useApi, useRouteRef } from '@backstage/core-plugin-api';\nimport { CatalogFilterLayout } from '@backstage/plugin-catalog-react';\nimport useAsync from 'react-use/esm/useAsync';\nimport React, { useState } from 'react';\nimport {\n  ScaffolderTask,\n  scaffolderApiRef,\n} from '@backstage/plugin-scaffolder-react';\nimport { OwnerListPicker } from './OwnerListPicker';\nimport {\n  CreatedAtColumn,\n  OwnerEntityColumn,\n  TaskStatusColumn,\n  TemplateTitleColumn,\n} from './columns';\nimport { actionsRouteRef, editRouteRef, rootRouteRef } from '../../routes';\nimport { ScaffolderPageContextMenu } from '@backstage/plugin-scaffolder-react/alpha';\nimport { useNavigate } from 'react-router-dom';\n\nexport interface MyTaskPageProps {\n  initiallySelectedFilter?: 'owned' | 'all';\n}\n\nconst ListTaskPageContent = (props: MyTaskPageProps) => {\n  const { initiallySelectedFilter = 'owned' } = props;\n\n  const scaffolderApi = useApi(scaffolderApiRef);\n  const rootLink = useRouteRef(rootRouteRef);\n\n  const [ownerFilter, setOwnerFilter] = useState(initiallySelectedFilter);\n  const { value, loading, error } = useAsync(() => {\n    if (scaffolderApi.listTasks) {\n      return scaffolderApi.listTasks?.({ filterByOwnership: ownerFilter });\n    }\n\n    // eslint-disable-next-line no-console\n    console.warn(\n      'listTasks is not implemented in the scaffolderApi, please make sure to implement this method.',\n    );\n\n    return Promise.resolve({ tasks: [] });\n  }, [scaffolderApi, ownerFilter]);\n\n  if (loading) {\n    return <Progress />;\n  }\n\n  if (error) {\n    return (\n      <>\n        <ErrorPanel error={error} />\n        <EmptyState\n          missing=\"info\"\n          title=\"No information to display\"\n          description=\"There are no tasks or there was an issue communicating with backend.\"\n        />\n      </>\n    );\n  }\n\n  return (\n    <CatalogFilterLayout>\n      <CatalogFilterLayout.Filters>\n        <OwnerListPicker\n          filter={ownerFilter}\n          onSelectOwner={id => setOwnerFilter(id)}\n        />\n      </CatalogFilterLayout.Filters>\n      <CatalogFilterLayout.Content>\n        <Table<ScaffolderTask>\n          data={value?.tasks ?? []}\n          title=\"Tasks\"\n          columns={[\n            {\n              title: 'Task ID',\n              field: 'id',\n              render: row => (\n                <Link to={`${rootLink()}/tasks/${row.id}`}>{row.id}</Link>\n              ),\n            },\n            {\n              title: 'Template',\n              field: 'spec.templateInfo.entity.metadata.title',\n              render: row => (\n                <TemplateTitleColumn\n                  entityRef={row.spec.templateInfo?.entityRef}\n                />\n              ),\n            },\n            {\n              title: 'Created',\n              field: 'createdAt',\n              render: row => <CreatedAtColumn createdAt={row.createdAt} />,\n            },\n            {\n              title: 'Owner',\n              field: 'createdBy',\n              render: row => (\n                <OwnerEntityColumn entityRef={row.spec?.user?.ref} />\n              ),\n            },\n            {\n              title: 'Status',\n              field: 'status',\n              render: row => <TaskStatusColumn status={row.status} />,\n            },\n          ]}\n        />\n      </CatalogFilterLayout.Content>\n    </CatalogFilterLayout>\n  );\n};\n\nexport const ListTasksPage = (props: MyTaskPageProps) => {\n  const navigate = useNavigate();\n  const editorLink = useRouteRef(editRouteRef);\n  const actionsLink = useRouteRef(actionsRouteRef);\n  const createLink = useRouteRef(rootRouteRef);\n\n  const scaffolderPageContextMenuProps = {\n    onEditorClicked: () => navigate(editorLink()),\n    onActionsClicked: () => navigate(actionsLink()),\n    onTasksClicked: undefined,\n    onCreateClicked: () => navigate(createLink()),\n  };\n  return (\n    <Page themeId=\"home\">\n      <Header\n        pageTitleOverride=\"Templates Tasks\"\n        title=\"List template tasks\"\n        subtitle=\"All tasks that have been started\"\n      >\n        <ScaffolderPageContextMenu {...scaffolderPageContextMenuProps} />\n      </Header>\n      <Content>\n        <ListTaskPageContent {...props} />\n      </Content>\n    </Page>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ListTasksPage.esm.js","sources":["../../../src/components/ListTasksPage/ListTasksPage.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 {\n  Content,\n  EmptyState,\n  ErrorPanel,\n  Header,\n  Link,\n  Page,\n  Progress,\n  Table,\n} from '@backstage/core-components';\nimport { useApi, useRouteRef } from '@backstage/core-plugin-api';\nimport { CatalogFilterLayout } from '@backstage/plugin-catalog-react';\nimport useAsync from 'react-use/esm/useAsync';\nimport React, { useState } from 'react';\nimport {\n  ScaffolderTask,\n  scaffolderApiRef,\n} from '@backstage/plugin-scaffolder-react';\nimport { OwnerListPicker } from './OwnerListPicker';\nimport {\n  CreatedAtColumn,\n  OwnerEntityColumn,\n  TaskStatusColumn,\n  TemplateTitleColumn,\n} from './columns';\nimport { actionsRouteRef, editRouteRef, rootRouteRef } from '../../routes';\nimport { ScaffolderPageContextMenu } from '@backstage/plugin-scaffolder-react/alpha';\nimport { useNavigate } from 'react-router-dom';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../translation';\n\nexport interface MyTaskPageProps {\n  initiallySelectedFilter?: 'owned' | 'all';\n}\n\nconst ListTaskPageContent = (props: MyTaskPageProps) => {\n  const { initiallySelectedFilter = 'owned' } = props;\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  const scaffolderApi = useApi(scaffolderApiRef);\n  const rootLink = useRouteRef(rootRouteRef);\n\n  const [ownerFilter, setOwnerFilter] = useState(initiallySelectedFilter);\n  const { value, loading, error } = useAsync(() => {\n    if (scaffolderApi.listTasks) {\n      return scaffolderApi.listTasks?.({ filterByOwnership: ownerFilter });\n    }\n\n    // eslint-disable-next-line no-console\n    console.warn(\n      'listTasks is not implemented in the scaffolderApi, please make sure to implement this method.',\n    );\n\n    return Promise.resolve({ tasks: [] });\n  }, [scaffolderApi, ownerFilter]);\n\n  if (loading) {\n    return <Progress />;\n  }\n\n  if (error) {\n    return (\n      <>\n        <ErrorPanel error={error} />\n        <EmptyState\n          missing=\"info\"\n          title={t('listTaskPage.content.emptyState.title')}\n          description={t('listTaskPage.content.emptyState.description')}\n        />\n      </>\n    );\n  }\n\n  return (\n    <CatalogFilterLayout>\n      <CatalogFilterLayout.Filters>\n        <OwnerListPicker\n          filter={ownerFilter}\n          onSelectOwner={id => setOwnerFilter(id)}\n        />\n      </CatalogFilterLayout.Filters>\n      <CatalogFilterLayout.Content>\n        <Table<ScaffolderTask>\n          data={value?.tasks ?? []}\n          title={t('listTaskPage.content.tableTitle')}\n          columns={[\n            {\n              title: t('listTaskPage.content.tableCell.taskID'),\n              field: 'id',\n              render: row => (\n                <Link to={`${rootLink()}/tasks/${row.id}`}>{row.id}</Link>\n              ),\n            },\n            {\n              title: t('listTaskPage.content.tableCell.template'),\n              field: 'spec.templateInfo.entity.metadata.title',\n              render: row => (\n                <TemplateTitleColumn\n                  entityRef={row.spec.templateInfo?.entityRef}\n                />\n              ),\n            },\n            {\n              title: t('listTaskPage.content.tableCell.created'),\n              field: 'createdAt',\n              render: row => <CreatedAtColumn createdAt={row.createdAt} />,\n            },\n            {\n              title: t('listTaskPage.content.tableCell.owner'),\n              field: 'createdBy',\n              render: row => (\n                <OwnerEntityColumn entityRef={row.spec?.user?.ref} />\n              ),\n            },\n            {\n              title: t('listTaskPage.content.tableCell.status'),\n              field: 'status',\n              render: row => <TaskStatusColumn status={row.status} />,\n            },\n          ]}\n        />\n      </CatalogFilterLayout.Content>\n    </CatalogFilterLayout>\n  );\n};\n\nexport const ListTasksPage = (props: MyTaskPageProps) => {\n  const navigate = useNavigate();\n  const editorLink = useRouteRef(editRouteRef);\n  const actionsLink = useRouteRef(actionsRouteRef);\n  const createLink = useRouteRef(rootRouteRef);\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  const scaffolderPageContextMenuProps = {\n    onEditorClicked: () => navigate(editorLink()),\n    onActionsClicked: () => navigate(actionsLink()),\n    onTasksClicked: undefined,\n    onCreateClicked: () => navigate(createLink()),\n  };\n  return (\n    <Page themeId=\"home\">\n      <Header\n        pageTitleOverride={t('listTaskPage.pageTitle')}\n        title={t('listTaskPage.title')}\n        subtitle={t('listTaskPage.subtitle')}\n      >\n        <ScaffolderPageContextMenu {...scaffolderPageContextMenuProps} />\n      </Header>\n      <Content>\n        <ListTaskPageContent {...props} />\n      </Content>\n    </Page>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/ListTasksPage/OwnerListPicker.esm.js

@@ -7,6 +7,8 @@ import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
 import SettingsIcon from '@material-ui/icons/Settings';
 import React, { Fragment } from 'react';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { scaffolderTranslationRef } from '../../translation.esm.js';
 import AllIcon from '@material-ui/icons/FontDownload';
 
 const useStyles = makeStyles(
@@ -37,19 +39,19 @@ const useStyles = makeStyles(
     name: "ScaffolderReactOwnerListPicker"
   }
 );
-function getFilterGroups() {
+function getFilterGroups(t) {
   return [
     {
-      name: "Task Owner",
+      name: t("ownerListPicker.title"),
       items: [
         {
           id: "owned",
-          label: "Owned",
+          label: t("ownerListPicker.options.owned"),
           icon: SettingsIcon
         },
         {
           id: "all",
-          label: "All",
+          label: t("ownerListPicker.options.all"),
           icon: AllIcon
         }
       ]
@@ -59,7 +61,8 @@ function getFilterGroups() {
 const OwnerListPicker = (props) => {
   const { filter, onSelectOwner } = props;
   const classes = useStyles();
-  const filterGroups = getFilterGroups();
+  const { t } = useTranslationRef(scaffolderTranslationRef);
+  const filterGroups = getFilterGroups(t);
   return /* @__PURE__ */ React.createElement(Card, { className: classes.root }, filterGroups.map((group) => /* @__PURE__ */ React.createElement(Fragment, { key: group.name }, /* @__PURE__ */ React.createElement(
     Typography,
     {

package/dist/components/ListTasksPage/OwnerListPicker.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"OwnerListPicker.esm.js","sources":["../../../src/components/ListTasksPage/OwnerListPicker.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 { IconComponent } from '@backstage/core-plugin-api';\nimport Card from '@material-ui/core/Card';\nimport List from '@material-ui/core/List';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\nimport SettingsIcon from '@material-ui/icons/Settings';\nimport React, { Fragment } from 'react';\n\nimport AllIcon from '@material-ui/icons/FontDownload';\n\nconst useStyles = makeStyles(\n  theme => ({\n    root: {\n      backgroundColor: 'rgba(0, 0, 0, .11)',\n      boxShadow: 'none',\n      margin: theme.spacing(1, 0, 1, 0),\n    },\n    title: {\n      margin: theme.spacing(1, 0, 0, 1),\n      textTransform: 'uppercase',\n      fontSize: 12,\n      fontWeight: 'bold',\n    },\n    listIcon: {\n      minWidth: 30,\n      color: theme.palette.text.primary,\n    },\n    menuItem: {\n      minHeight: theme.spacing(6),\n    },\n    groupWrapper: {\n      margin: theme.spacing(1, 1, 2, 1),\n    },\n  }),\n  {\n    name: 'ScaffolderReactOwnerListPicker',\n  },\n);\n\nexport type ButtonGroup = {\n  name: string;\n  items: {\n    id: 'owned' | 'starred' | 'all';\n    label: string;\n    icon?: IconComponent;\n  }[];\n};\n\nfunction getFilterGroups(): ButtonGroup[] {\n  return [\n    {\n      name: 'Task Owner',\n      items: [\n        {\n          id: 'owned',\n          label: 'Owned',\n          icon: SettingsIcon,\n        },\n        {\n          id: 'all',\n          label: 'All',\n          icon: AllIcon,\n        },\n      ],\n    },\n  ];\n}\n\nexport const OwnerListPicker = (props: {\n  filter: string;\n  onSelectOwner: (id: 'owned' | 'all') => void;\n}) => {\n  const { filter, onSelectOwner } = props;\n  const classes = useStyles();\n\n  const filterGroups = getFilterGroups();\n  return (\n    <Card className={classes.root}>\n      {filterGroups.map(group => (\n        <Fragment key={group.name}>\n          <Typography\n            variant=\"subtitle2\"\n            component=\"span\"\n            className={classes.title}\n          >\n            {group.name}\n          </Typography>\n          <Card className={classes.groupWrapper}>\n            <List disablePadding dense role=\"menu\">\n              {group.items.map(item => (\n                <MenuItem\n                  key={item.id}\n                  divider\n                  ContainerProps={{ role: 'menuitem' }}\n                  onClick={() => onSelectOwner(item.id as 'owned' | 'all')}\n                  selected={item.id === filter}\n                  className={classes.menuItem}\n                  data-testid={`owner-picker-${item.id}`}\n                >\n                  {item.icon && (\n                    <ListItemIcon className={classes.listIcon}>\n                      <item.icon fontSize=\"small\" />\n                    </ListItemIcon>\n                  )}\n                  <ListItemText>\n                    <Typography variant=\"body1\">{item.label}</Typography>\n                  </ListItemText>\n                </MenuItem>\n              ))}\n            </List>\n          </Card>\n        </Fragment>\n      ))}\n    </Card>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AA4BA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB,CAAU,KAAA,MAAA;AAAA,IACR,IAAM,EAAA;AAAA,MACJ,eAAiB,EAAA,oBAAA;AAAA,MACjB,SAAW,EAAA,MAAA;AAAA,MACX,QAAQ,KAAM,CAAA,OAAA,CAAQ,CAAG,EAAA,CAAA,EAAG,GAAG,CAAC,CAAA;AAAA,KAClC;AAAA,IACA,KAAO,EAAA;AAAA,MACL,QAAQ,KAAM,CAAA,OAAA,CAAQ,CAAG,EAAA,CAAA,EAAG,GAAG,CAAC,CAAA;AAAA,MAChC,aAAe,EAAA,WAAA;AAAA,MACf,QAAU,EAAA,EAAA;AAAA,MACV,UAAY,EAAA,MAAA;AAAA,KACd;AAAA,IACA,QAAU,EAAA;AAAA,MACR,QAAU,EAAA,EAAA;AAAA,MACV,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,OAAA;AAAA,KAC5B;AAAA,IACA,QAAU,EAAA;AAAA,MACR,SAAA,EAAW,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,KAC5B;AAAA,IACA,YAAc,EAAA;AAAA,MACZ,QAAQ,KAAM,CAAA,OAAA,CAAQ,CAAG,EAAA,CAAA,EAAG,GAAG,CAAC,CAAA;AAAA,KAClC;AAAA,GACF,CAAA;AAAA,EACA;AAAA,IACE,IAAM,EAAA,gCAAA;AAAA,GACR;AACF,CAAA,CAAA;AAWA,SAAS,eAAiC,GAAA;AACxC,EAAO,OAAA;AAAA,IACL;AAAA,MACE,IAAM,EAAA,YAAA;AAAA,MACN,KAAO,EAAA;AAAA,QACL;AAAA,UACE,EAAI,EAAA,OAAA;AAAA,UACJ,KAAO,EAAA,OAAA;AAAA,UACP,IAAM,EAAA,YAAA;AAAA,SACR;AAAA,QACA;AAAA,UACE,EAAI,EAAA,KAAA;AAAA,UACJ,KAAO,EAAA,KAAA;AAAA,UACP,IAAM,EAAA,OAAA;AAAA,SACR;AAAA,OACF;AAAA,KACF;AAAA,GACF,CAAA;AACF,CAAA;AAEa,MAAA,eAAA,GAAkB,CAAC,KAG1B,KAAA;AACJ,EAAM,MAAA,EAAE,MAAQ,EAAA,aAAA,EAAkB,GAAA,KAAA,CAAA;AAClC,EAAA,MAAM,UAAU,SAAU,EAAA,CAAA;AAE1B,EAAA,MAAM,eAAe,eAAgB,EAAA,CAAA;AACrC,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,SAAW,EAAA,OAAA,CAAQ,IACtB,EAAA,EAAA,YAAA,CAAa,GAAI,CAAA,CAAA,KAAA,qBACf,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,GAAK,EAAA,KAAA,CAAM,IACnB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,WAAA;AAAA,MACR,SAAU,EAAA,MAAA;AAAA,MACV,WAAW,OAAQ,CAAA,KAAA;AAAA,KAAA;AAAA,IAElB,KAAM,CAAA,IAAA;AAAA,qBAER,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,SAAW,EAAA,OAAA,CAAQ,gCACtB,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,cAAc,EAAA,IAAA,EAAC,OAAK,IAAC,EAAA,IAAA,EAAK,UAC7B,KAAM,CAAA,KAAA,CAAM,IAAI,CACf,IAAA,qBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,KAAK,IAAK,CAAA,EAAA;AAAA,MACV,OAAO,EAAA,IAAA;AAAA,MACP,cAAA,EAAgB,EAAE,IAAA,EAAM,UAAW,EAAA;AAAA,MACnC,OAAS,EAAA,MAAM,aAAc,CAAA,IAAA,CAAK,EAAqB,CAAA;AAAA,MACvD,QAAA,EAAU,KAAK,EAAO,KAAA,MAAA;AAAA,MACtB,WAAW,OAAQ,CAAA,QAAA;AAAA,MACnB,aAAA,EAAa,CAAgB,aAAA,EAAA,IAAA,CAAK,EAAE,CAAA,CAAA;AAAA,KAAA;AAAA,IAEnC,IAAK,CAAA,IAAA,oBACH,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA,EAAa,SAAW,EAAA,OAAA,CAAQ,QAC/B,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,CAAA,IAAA,EAAL,EAAU,QAAA,EAAS,SAAQ,CAC9B,CAAA;AAAA,oBAEF,KAAA,CAAA,aAAA,CAAC,oCACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,SAAQ,OAAS,EAAA,EAAA,IAAA,CAAK,KAAM,CAC1C,CAAA;AAAA,GAEH,CACH,CACF,CACF,CACD,CACH,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"OwnerListPicker.esm.js","sources":["../../../src/components/ListTasksPage/OwnerListPicker.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 { IconComponent } from '@backstage/core-plugin-api';\nimport Card from '@material-ui/core/Card';\nimport List from '@material-ui/core/List';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\nimport SettingsIcon from '@material-ui/icons/Settings';\nimport React, { Fragment } from 'react';\nimport {\n  TranslationFunction,\n  useTranslationRef,\n} from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../translation';\n\nimport AllIcon from '@material-ui/icons/FontDownload';\n\nconst useStyles = makeStyles(\n  theme => ({\n    root: {\n      backgroundColor: 'rgba(0, 0, 0, .11)',\n      boxShadow: 'none',\n      margin: theme.spacing(1, 0, 1, 0),\n    },\n    title: {\n      margin: theme.spacing(1, 0, 0, 1),\n      textTransform: 'uppercase',\n      fontSize: 12,\n      fontWeight: 'bold',\n    },\n    listIcon: {\n      minWidth: 30,\n      color: theme.palette.text.primary,\n    },\n    menuItem: {\n      minHeight: theme.spacing(6),\n    },\n    groupWrapper: {\n      margin: theme.spacing(1, 1, 2, 1),\n    },\n  }),\n  {\n    name: 'ScaffolderReactOwnerListPicker',\n  },\n);\n\nexport type ButtonGroup = {\n  name: string;\n  items: {\n    id: 'owned' | 'starred' | 'all';\n    label: string;\n    icon?: IconComponent;\n  }[];\n};\n\nfunction getFilterGroups(\n  t: TranslationFunction<typeof scaffolderTranslationRef.T>,\n): ButtonGroup[] {\n  return [\n    {\n      name: t('ownerListPicker.title'),\n      items: [\n        {\n          id: 'owned',\n          label: t('ownerListPicker.options.owned'),\n          icon: SettingsIcon,\n        },\n        {\n          id: 'all',\n          label: t('ownerListPicker.options.all'),\n          icon: AllIcon,\n        },\n      ],\n    },\n  ];\n}\n\nexport const OwnerListPicker = (props: {\n  filter: string;\n  onSelectOwner: (id: 'owned' | 'all') => void;\n}) => {\n  const { filter, onSelectOwner } = props;\n  const classes = useStyles();\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  const filterGroups = getFilterGroups(t);\n  return (\n    <Card className={classes.root}>\n      {filterGroups.map(group => (\n        <Fragment key={group.name}>\n          <Typography\n            variant=\"subtitle2\"\n            component=\"span\"\n            className={classes.title}\n          >\n            {group.name}\n          </Typography>\n          <Card className={classes.groupWrapper}>\n            <List disablePadding dense role=\"menu\">\n              {group.items.map(item => (\n                <MenuItem\n                  key={item.id}\n                  divider\n                  ContainerProps={{ role: 'menuitem' }}\n                  onClick={() => onSelectOwner(item.id as 'owned' | 'all')}\n                  selected={item.id === filter}\n                  className={classes.menuItem}\n                  data-testid={`owner-picker-${item.id}`}\n                >\n                  {item.icon && (\n                    <ListItemIcon className={classes.listIcon}>\n                      <item.icon fontSize=\"small\" />\n                    </ListItemIcon>\n                  )}\n                  <ListItemText>\n                    <Typography variant=\"body1\">{item.label}</Typography>\n                  </ListItemText>\n                </MenuItem>\n              ))}\n            </List>\n          </Card>\n        </Fragment>\n      ))}\n    </Card>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/OngoingTask/ContextMenu.esm.js

@@ -16,6 +16,8 @@ import { useApi, useAnalytics } from '@backstage/core-plugin-api';
 import { scaffolderApiRef } from '@backstage/plugin-scaffolder-react';
 import { usePermission } from '@backstage/plugin-permission-react';
 import { taskCancelPermission, taskReadPermission, taskCreatePermission } from '@backstage/plugin-scaffolder-common/alpha';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { scaffolderTranslationRef } from '../../translation.esm.js';
 
 const useStyles = makeStyles(() => ({
   button: {
@@ -38,6 +40,7 @@ const ContextMenu = (props) => {
   const scaffolderApi = useApi(scaffolderApiRef);
   const analytics = useAnalytics();
   const [anchorEl, setAnchorEl] = useState();
+  const { t } = useTranslationRef(scaffolderTranslationRef);
   const [{ status: cancelStatus }, { execute: cancel }] = useAsync(async () => {
     if (taskId) {
       analytics.captureEvent("cancelled", "Template has been cancelled");
@@ -76,10 +79,15 @@ const ContextMenu = (props) => {
       anchorOrigin: { vertical: "bottom", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: "right" }
     },
-    /* @__PURE__ */ React.createElement(MenuList, null, /* @__PURE__ */ React.createElement(MenuItem, { onClick: () => onToggleLogs?.(!logsVisible) }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(Toc, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText, { primary: logsVisible ? "Hide Logs" : "Show Logs" })), /* @__PURE__ */ React.createElement(MenuItem, { onClick: () => onToggleButtonBar?.(!buttonBarVisible) }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(ControlPointIcon, { fontSize: "small" })), /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(MenuList, null, /* @__PURE__ */ React.createElement(MenuItem, { onClick: () => onToggleLogs?.(!logsVisible) }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(Toc, { fontSize: "small" })), /* @__PURE__ */ React.createElement(
       ListItemText,
       {
-        primary: buttonBarVisible ? "Hide Button Bar" : "Show Button Bar"
+        primary: logsVisible ? t("ongoingTask.contextMenu.hideLogs") : t("ongoingTask.contextMenu.showLogs")
+      }
+    )), /* @__PURE__ */ React.createElement(MenuItem, { onClick: () => onToggleButtonBar?.(!buttonBarVisible) }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(ControlPointIcon, { fontSize: "small" })), /* @__PURE__ */ React.createElement(
+      ListItemText,
+      {
+        primary: buttonBarVisible ? t("ongoingTask.contextMenu.hideButtonBar") : t("ongoingTask.contextMenu.showButtonBar")
       }
     )), /* @__PURE__ */ React.createElement(
       MenuItem,
@@ -89,7 +97,7 @@ const ContextMenu = (props) => {
         "data-testid": "start-over-task"
       },
       /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(Retry, { fontSize: "small" })),
-      /* @__PURE__ */ React.createElement(ListItemText, { primary: "Start Over" })
+      /* @__PURE__ */ React.createElement(ListItemText, { primary: t("ongoingTask.contextMenu.startOver") })
     ), /* @__PURE__ */ React.createElement(
       MenuItem,
       {
@@ -98,7 +106,7 @@ const ContextMenu = (props) => {
         "data-testid": "cancel-task"
       },
       /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(Cancel, { fontSize: "small" })),
-      /* @__PURE__ */ React.createElement(ListItemText, { primary: "Cancel" })
+      /* @__PURE__ */ React.createElement(ListItemText, { primary: t("ongoingTask.contextMenu.cancel") })
     ))
   ));
 };

package/dist/components/OngoingTask/ContextMenu.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.esm.js","sources":["../../../src/components/OngoingTask/ContextMenu.tsx"],"sourcesContent":["/*\n * Copyright 2023 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, Theme, useTheme } from '@material-ui/core/styles';\nimport { useAsync } from '@react-hookz/web';\nimport Cancel from '@material-ui/icons/Cancel';\nimport Retry from '@material-ui/icons/Repeat';\nimport Toc from '@material-ui/icons/Toc';\nimport ControlPointIcon from '@material-ui/icons/ControlPoint';\nimport MoreVert from '@material-ui/icons/MoreVert';\nimport React, { useState } from 'react';\nimport { useAnalytics, useApi } from '@backstage/core-plugin-api';\nimport { scaffolderApiRef } from '@backstage/plugin-scaffolder-react';\nimport { usePermission } from '@backstage/plugin-permission-react';\nimport {\n  taskCancelPermission,\n  taskReadPermission,\n  taskCreatePermission,\n} from '@backstage/plugin-scaffolder-common/alpha';\n\ntype ContextMenuProps = {\n  cancelEnabled?: boolean;\n  logsVisible?: boolean;\n  buttonBarVisible?: boolean;\n  onStartOver?: () => void;\n  onToggleLogs?: (state: boolean) => void;\n  onToggleButtonBar?: (state: boolean) => void;\n  taskId?: string;\n};\n\nconst useStyles = makeStyles<Theme, { fontColor: string }>(() => ({\n  button: {\n    color: ({ fontColor }) => fontColor,\n  },\n}));\n\nexport const ContextMenu = (props: ContextMenuProps) => {\n  const {\n    cancelEnabled,\n    logsVisible,\n    buttonBarVisible,\n    onStartOver,\n    onToggleLogs,\n    onToggleButtonBar,\n    taskId,\n  } = props;\n  const { getPageTheme } = useTheme();\n  const pageTheme = getPageTheme({ themeId: 'website' });\n  const classes = useStyles({ fontColor: pageTheme.fontColor });\n  const scaffolderApi = useApi(scaffolderApiRef);\n  const analytics = useAnalytics();\n  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>();\n\n  const [{ status: cancelStatus }, { execute: cancel }] = useAsync(async () => {\n    if (taskId) {\n      analytics.captureEvent('cancelled', 'Template has been cancelled');\n      await scaffolderApi.cancelTask(taskId);\n    }\n  });\n\n  const { allowed: canCancelTask } = usePermission({\n    permission: taskCancelPermission,\n  });\n\n  const { allowed: canReadTask } = usePermission({\n    permission: taskReadPermission,\n  });\n\n  const { allowed: canCreateTask } = usePermission({\n    permission: taskCreatePermission,\n  });\n\n  // Start Over endpoint requires user to have both read (to grab parameters) and create (to create new task) permissions\n  const canStartOver = canReadTask && canCreateTask;\n\n  return (\n    <>\n      <IconButton\n        aria-label=\"more\"\n        aria-controls=\"long-menu\"\n        aria-haspopup=\"true\"\n        onClick={(event: React.SyntheticEvent<HTMLButtonElement>) => {\n          setAnchorEl(event.currentTarget);\n        }}\n        data-testid=\"menu-button\"\n        className={classes.button}\n      >\n        <MoreVert />\n      </IconButton>\n      <Popover\n        open={Boolean(anchorEl)}\n        onClose={() => setAnchorEl(undefined)}\n        anchorEl={anchorEl}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n        transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n      >\n        <MenuList>\n          <MenuItem onClick={() => onToggleLogs?.(!logsVisible)}>\n            <ListItemIcon>\n              <Toc fontSize=\"small\" />\n            </ListItemIcon>\n            <ListItemText primary={logsVisible ? 'Hide Logs' : 'Show Logs'} />\n          </MenuItem>\n          <MenuItem onClick={() => onToggleButtonBar?.(!buttonBarVisible)}>\n            <ListItemIcon>\n              <ControlPointIcon fontSize=\"small\" />\n            </ListItemIcon>\n            <ListItemText\n              primary={buttonBarVisible ? 'Hide Button Bar' : 'Show Button Bar'}\n            />\n          </MenuItem>\n          <MenuItem\n            onClick={onStartOver}\n            disabled={cancelEnabled || !canStartOver}\n            data-testid=\"start-over-task\"\n          >\n            <ListItemIcon>\n              <Retry fontSize=\"small\" />\n            </ListItemIcon>\n            <ListItemText primary=\"Start Over\" />\n          </MenuItem>\n          <MenuItem\n            onClick={cancel}\n            disabled={\n              !cancelEnabled ||\n              cancelStatus !== 'not-executed' ||\n              !canCancelTask\n            }\n            data-testid=\"cancel-task\"\n          >\n            <ListItemIcon>\n              <Cancel fontSize=\"small\" />\n            </ListItemIcon>\n            <ListItemText primary=\"Cancel\" />\n          </MenuItem>\n        </MenuList>\n      </Popover>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ContextMenu.esm.js","sources":["../../../src/components/OngoingTask/ContextMenu.tsx"],"sourcesContent":["/*\n * Copyright 2023 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, Theme, useTheme } from '@material-ui/core/styles';\nimport { useAsync } from '@react-hookz/web';\nimport Cancel from '@material-ui/icons/Cancel';\nimport Retry from '@material-ui/icons/Repeat';\nimport Toc from '@material-ui/icons/Toc';\nimport ControlPointIcon from '@material-ui/icons/ControlPoint';\nimport MoreVert from '@material-ui/icons/MoreVert';\nimport React, { useState } from 'react';\nimport { useAnalytics, useApi } from '@backstage/core-plugin-api';\nimport { scaffolderApiRef } from '@backstage/plugin-scaffolder-react';\nimport { usePermission } from '@backstage/plugin-permission-react';\nimport {\n  taskCancelPermission,\n  taskReadPermission,\n  taskCreatePermission,\n} from '@backstage/plugin-scaffolder-common/alpha';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../translation';\n\ntype ContextMenuProps = {\n  cancelEnabled?: boolean;\n  logsVisible?: boolean;\n  buttonBarVisible?: boolean;\n  onStartOver?: () => void;\n  onToggleLogs?: (state: boolean) => void;\n  onToggleButtonBar?: (state: boolean) => void;\n  taskId?: string;\n};\n\nconst useStyles = makeStyles<Theme, { fontColor: string }>(() => ({\n  button: {\n    color: ({ fontColor }) => fontColor,\n  },\n}));\n\nexport const ContextMenu = (props: ContextMenuProps) => {\n  const {\n    cancelEnabled,\n    logsVisible,\n    buttonBarVisible,\n    onStartOver,\n    onToggleLogs,\n    onToggleButtonBar,\n    taskId,\n  } = props;\n  const { getPageTheme } = useTheme();\n  const pageTheme = getPageTheme({ themeId: 'website' });\n  const classes = useStyles({ fontColor: pageTheme.fontColor });\n  const scaffolderApi = useApi(scaffolderApiRef);\n  const analytics = useAnalytics();\n  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>();\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  const [{ status: cancelStatus }, { execute: cancel }] = useAsync(async () => {\n    if (taskId) {\n      analytics.captureEvent('cancelled', 'Template has been cancelled');\n      await scaffolderApi.cancelTask(taskId);\n    }\n  });\n\n  const { allowed: canCancelTask } = usePermission({\n    permission: taskCancelPermission,\n  });\n\n  const { allowed: canReadTask } = usePermission({\n    permission: taskReadPermission,\n  });\n\n  const { allowed: canCreateTask } = usePermission({\n    permission: taskCreatePermission,\n  });\n\n  // Start Over endpoint requires user to have both read (to grab parameters) and create (to create new task) permissions\n  const canStartOver = canReadTask && canCreateTask;\n\n  return (\n    <>\n      <IconButton\n        aria-label=\"more\"\n        aria-controls=\"long-menu\"\n        aria-haspopup=\"true\"\n        onClick={(event: React.SyntheticEvent<HTMLButtonElement>) => {\n          setAnchorEl(event.currentTarget);\n        }}\n        data-testid=\"menu-button\"\n        className={classes.button}\n      >\n        <MoreVert />\n      </IconButton>\n      <Popover\n        open={Boolean(anchorEl)}\n        onClose={() => setAnchorEl(undefined)}\n        anchorEl={anchorEl}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n        transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n      >\n        <MenuList>\n          <MenuItem onClick={() => onToggleLogs?.(!logsVisible)}>\n            <ListItemIcon>\n              <Toc fontSize=\"small\" />\n            </ListItemIcon>\n            <ListItemText\n              primary={\n                logsVisible\n                  ? t('ongoingTask.contextMenu.hideLogs')\n                  : t('ongoingTask.contextMenu.showLogs')\n              }\n            />\n          </MenuItem>\n          <MenuItem onClick={() => onToggleButtonBar?.(!buttonBarVisible)}>\n            <ListItemIcon>\n              <ControlPointIcon fontSize=\"small\" />\n            </ListItemIcon>\n            <ListItemText\n              primary={\n                buttonBarVisible\n                  ? t('ongoingTask.contextMenu.hideButtonBar')\n                  : t('ongoingTask.contextMenu.showButtonBar')\n              }\n            />\n          </MenuItem>\n          <MenuItem\n            onClick={onStartOver}\n            disabled={cancelEnabled || !canStartOver}\n            data-testid=\"start-over-task\"\n          >\n            <ListItemIcon>\n              <Retry fontSize=\"small\" />\n            </ListItemIcon>\n            <ListItemText primary={t('ongoingTask.contextMenu.startOver')} />\n          </MenuItem>\n          <MenuItem\n            onClick={cancel}\n            disabled={\n              !cancelEnabled ||\n              cancelStatus !== 'not-executed' ||\n              !canCancelTask\n            }\n            data-testid=\"cancel-task\"\n          >\n            <ListItemIcon>\n              <Cancel fontSize=\"small\" />\n            </ListItemIcon>\n            <ListItemText primary={t('ongoingTask.contextMenu.cancel')} />\n          </MenuItem>\n        </MenuList>\n      </Popover>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/OngoingTask/OngoingTask.esm.js

@@ -15,6 +15,8 @@ import { DefaultTemplateOutputs, TaskSteps, TaskLogStream } from '@backstage/plu
 import { useAsync } from '@react-hookz/web';
 import { usePermission } from '@backstage/plugin-permission-react';
 import { taskCancelPermission, taskReadPermission, taskCreatePermission } from '@backstage/plugin-scaffolder-common/alpha';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { scaffolderTranslationRef } from '../../translation.esm.js';
 
 const useStyles = makeStyles((theme) => ({
   contentWrapper: {
@@ -48,6 +50,7 @@ const OngoingTask = (props) => {
     })) ?? [],
     [taskStream]
   );
+  const { t } = useTranslationRef(scaffolderTranslationRef);
   const [logsVisible, setLogVisibleState] = useState(false);
   const [buttonBarVisible, setButtonBarVisibleState] = useState(true);
   const { allowed: canCancelTask } = usePermission({
@@ -108,14 +111,14 @@ const OngoingTask = (props) => {
     }
   );
   const Outputs = props.TemplateOutputsComponent ?? DefaultTemplateOutputs;
-  const templateName = taskStream.task?.spec.templateInfo?.entity?.metadata.name;
+  const templateName = taskStream.task?.spec.templateInfo?.entity?.metadata.name || "";
   const cancelEnabled = !(taskStream.cancelled || taskStream.completed);
   return /* @__PURE__ */ React.createElement(Page, { themeId: "website" }, /* @__PURE__ */ React.createElement(
     Header,
     {
-      pageTitleOverride: templateName ? `Run of ${templateName}` : `Scaffolder Run`,
-      title: /* @__PURE__ */ React.createElement("div", null, "Run of ", /* @__PURE__ */ React.createElement("code", null, templateName)),
-      subtitle: `Task ${taskId}`
+      pageTitleOverride: templateName ? t("ongoingTask.pageTitle.hasTemplateName", { templateName }) : t("ongoingTask.pageTitle.noTemplateName"),
+      title: /* @__PURE__ */ React.createElement("div", null, t("ongoingTask.title"), " ", /* @__PURE__ */ React.createElement("code", null, templateName)),
+      subtitle: t("ongoingTask.subtitle", { taskId })
     },
     /* @__PURE__ */ React.createElement(
       ContextMenu,
@@ -152,7 +155,7 @@ const OngoingTask = (props) => {
       onClick: triggerCancel,
       "data-testid": "cancel-button"
     },
-    "Cancel"
+    t("ongoingTask.cancelButtonTitle")
   ), /* @__PURE__ */ React.createElement(
     Button,
     {
@@ -161,7 +164,7 @@ const OngoingTask = (props) => {
       variant: "outlined",
       onClick: () => setLogVisibleState(!logsVisible)
     },
-    logsVisible ? "Hide Logs" : "Show Logs"
+    logsVisible ? t("ongoingTask.hideLogsButtonTitle") : t("ongoingTask.showLogsButtonTitle")
   ), /* @__PURE__ */ React.createElement(
     Button,
     {
@@ -171,7 +174,7 @@ const OngoingTask = (props) => {
       onClick: startOver,
       "data-testid": "start-over-button"
     },
-    "Start Over"
+    t("ongoingTask.startOverButtonTitle")
   ))))) : null, logsVisible ? /* @__PURE__ */ React.createElement(ResizableBox, { height: 240, minConstraints: [0, 160], axis: "y" }, /* @__PURE__ */ React.createElement(Paper, { style: { height: "100%" } }, /* @__PURE__ */ React.createElement(Box, { padding: 2, height: "100%" }, /* @__PURE__ */ React.createElement(TaskLogStream, { logs: taskStream.stepLogs })))) : null));
 };
 

package/dist/components/OngoingTask/OngoingTask.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"OngoingTask.esm.js","sources":["../../../src/components/OngoingTask/OngoingTask.tsx"],"sourcesContent":["/*\n * Copyright 2023 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, useEffect, useMemo, useState } from 'react';\nimport { Content, ErrorPanel, Header, Page } from '@backstage/core-components';\nimport { useNavigate, useParams } from 'react-router-dom';\nimport Box from '@material-ui/core/Box';\nimport Button from '@material-ui/core/Button';\nimport Paper from '@material-ui/core/Paper';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { ResizableBox } from 'react-resizable';\nimport {\n  ScaffolderTaskOutput,\n  scaffolderApiRef,\n  useTaskEventStream,\n} from '@backstage/plugin-scaffolder-react';\nimport { selectedTemplateRouteRef } from '../../routes';\nimport { useAnalytics, useApi, useRouteRef } from '@backstage/core-plugin-api';\nimport qs from 'qs';\nimport { ContextMenu } from './ContextMenu';\nimport {\n  DefaultTemplateOutputs,\n  TaskLogStream,\n  TaskSteps,\n} from '@backstage/plugin-scaffolder-react/alpha';\nimport { useAsync } from '@react-hookz/web';\nimport { usePermission } from '@backstage/plugin-permission-react';\nimport {\n  taskCancelPermission,\n  taskReadPermission,\n  taskCreatePermission,\n} from '@backstage/plugin-scaffolder-common/alpha';\n\nconst useStyles = makeStyles(theme => ({\n  contentWrapper: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  buttonBar: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'right',\n  },\n  cancelButton: {\n    marginRight: theme.spacing(1),\n  },\n  logsVisibilityButton: {\n    marginRight: theme.spacing(1),\n  },\n}));\n\n/**\n * @public\n */\nexport const OngoingTask = (props: {\n  TemplateOutputsComponent?: React.ComponentType<{\n    output?: ScaffolderTaskOutput;\n  }>;\n}) => {\n  // todo(blam): check that task Id actually exists, and that it's valid. otherwise redirect to something more useful.\n  const { taskId } = useParams();\n  const templateRouteRef = useRouteRef(selectedTemplateRouteRef);\n  const navigate = useNavigate();\n  const analytics = useAnalytics();\n  const scaffolderApi = useApi(scaffolderApiRef);\n  const taskStream = useTaskEventStream(taskId!);\n  const classes = useStyles();\n  const steps = useMemo(\n    () =>\n      taskStream.task?.spec.steps.map(step => ({\n        ...step,\n        ...taskStream?.steps?.[step.id],\n      })) ?? [],\n    [taskStream],\n  );\n\n  const [logsVisible, setLogVisibleState] = useState(false);\n  const [buttonBarVisible, setButtonBarVisibleState] = useState(true);\n\n  // Used dummy string value for `resourceRef` since `allowed` field will always return `false` if `resourceRef` is `undefined`\n  const { allowed: canCancelTask } = usePermission({\n    permission: taskCancelPermission,\n  });\n\n  const { allowed: canReadTask } = usePermission({\n    permission: taskReadPermission,\n  });\n\n  const { allowed: canCreateTask } = usePermission({\n    permission: taskCreatePermission,\n  });\n\n  // Start Over endpoint requires user to have both read (to grab parameters) and create (to create new task) permissions\n  const canStartOver = canReadTask && canCreateTask;\n\n  useEffect(() => {\n    if (taskStream.error) {\n      setLogVisibleState(true);\n    }\n  }, [taskStream.error]);\n\n  useEffect(() => {\n    if (taskStream.completed && !taskStream.error) {\n      setButtonBarVisibleState(false);\n    }\n  }, [taskStream.error, taskStream.completed]);\n\n  const activeStep = useMemo(() => {\n    for (let i = steps.length - 1; i >= 0; i--) {\n      if (steps[i].status !== 'open') {\n        return i;\n      }\n    }\n\n    return 0;\n  }, [steps]);\n\n  const startOver = useCallback(() => {\n    const { namespace, name } =\n      taskStream.task?.spec.templateInfo?.entity?.metadata ?? {};\n\n    const formData = taskStream.task?.spec.parameters ?? {};\n\n    if (!namespace || !name) {\n      return;\n    }\n\n    analytics.captureEvent('click', `Task has been started over`);\n\n    navigate({\n      pathname: templateRouteRef({\n        namespace,\n        templateName: name,\n      }),\n      search: `?${qs.stringify({ formData: JSON.stringify(formData) })}`,\n    });\n  }, [\n    analytics,\n    navigate,\n    taskStream.task?.spec.parameters,\n    taskStream.task?.spec.templateInfo?.entity?.metadata,\n    templateRouteRef,\n  ]);\n\n  const [{ status: cancelStatus }, { execute: triggerCancel }] = useAsync(\n    async () => {\n      if (taskId) {\n        analytics.captureEvent('cancelled', 'Template has been cancelled');\n        await scaffolderApi.cancelTask(taskId);\n      }\n    },\n  );\n\n  const Outputs = props.TemplateOutputsComponent ?? DefaultTemplateOutputs;\n\n  const templateName =\n    taskStream.task?.spec.templateInfo?.entity?.metadata.name;\n\n  const cancelEnabled = !(taskStream.cancelled || taskStream.completed);\n\n  return (\n    <Page themeId=\"website\">\n      <Header\n        pageTitleOverride={\n          templateName ? `Run of ${templateName}` : `Scaffolder Run`\n        }\n        title={\n          <div>\n            Run of <code>{templateName}</code>\n          </div>\n        }\n        subtitle={`Task ${taskId}`}\n      >\n        <ContextMenu\n          cancelEnabled={cancelEnabled}\n          logsVisible={logsVisible}\n          buttonBarVisible={buttonBarVisible}\n          onStartOver={startOver}\n          onToggleLogs={setLogVisibleState}\n          onToggleButtonBar={setButtonBarVisibleState}\n          taskId={taskId}\n        />\n      </Header>\n      <Content className={classes.contentWrapper}>\n        {taskStream.error ? (\n          <Box paddingBottom={2}>\n            <ErrorPanel\n              error={taskStream.error}\n              titleFormat=\"markdown\"\n              title={taskStream.error.message}\n            />\n          </Box>\n        ) : null}\n\n        <Box paddingBottom={2}>\n          <TaskSteps\n            steps={steps}\n            activeStep={activeStep}\n            isComplete={taskStream.completed}\n            isError={Boolean(taskStream.error)}\n          />\n        </Box>\n\n        <Outputs output={taskStream.output} />\n\n        {buttonBarVisible ? (\n          <Box paddingBottom={2}>\n            <Paper>\n              <Box padding={2}>\n                <div className={classes.buttonBar}>\n                  <Button\n                    className={classes.cancelButton}\n                    disabled={\n                      !cancelEnabled ||\n                      cancelStatus !== 'not-executed' ||\n                      !canCancelTask\n                    }\n                    onClick={triggerCancel}\n                    data-testid=\"cancel-button\"\n                  >\n                    Cancel\n                  </Button>\n                  <Button\n                    className={classes.logsVisibilityButton}\n                    color=\"primary\"\n                    variant=\"outlined\"\n                    onClick={() => setLogVisibleState(!logsVisible)}\n                  >\n                    {logsVisible ? 'Hide Logs' : 'Show Logs'}\n                  </Button>\n                  <Button\n                    variant=\"contained\"\n                    color=\"primary\"\n                    disabled={cancelEnabled || !canStartOver}\n                    onClick={startOver}\n                    data-testid=\"start-over-button\"\n                  >\n                    Start Over\n                  </Button>\n                </div>\n              </Box>\n            </Paper>\n          </Box>\n        ) : null}\n\n        {logsVisible ? (\n          <ResizableBox height={240} minConstraints={[0, 160]} axis=\"y\">\n            <Paper style={{ height: '100%' }}>\n              <Box padding={2} height=\"100%\">\n                <TaskLogStream logs={taskStream.stepLogs} />\n              </Box>\n            </Paper>\n          </ResizableBox>\n        ) : null}\n      </Content>\n    </Page>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"OngoingTask.esm.js","sources":["../../../src/components/OngoingTask/OngoingTask.tsx"],"sourcesContent":["/*\n * Copyright 2023 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, useEffect, useMemo, useState } from 'react';\nimport { Content, ErrorPanel, Header, Page } from '@backstage/core-components';\nimport { useNavigate, useParams } from 'react-router-dom';\nimport Box from '@material-ui/core/Box';\nimport Button from '@material-ui/core/Button';\nimport Paper from '@material-ui/core/Paper';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { ResizableBox } from 'react-resizable';\nimport {\n  ScaffolderTaskOutput,\n  scaffolderApiRef,\n  useTaskEventStream,\n} from '@backstage/plugin-scaffolder-react';\nimport { selectedTemplateRouteRef } from '../../routes';\nimport { useAnalytics, useApi, useRouteRef } from '@backstage/core-plugin-api';\nimport qs from 'qs';\nimport { ContextMenu } from './ContextMenu';\nimport {\n  DefaultTemplateOutputs,\n  TaskLogStream,\n  TaskSteps,\n} from '@backstage/plugin-scaffolder-react/alpha';\nimport { useAsync } from '@react-hookz/web';\nimport { usePermission } from '@backstage/plugin-permission-react';\nimport {\n  taskCancelPermission,\n  taskReadPermission,\n  taskCreatePermission,\n} from '@backstage/plugin-scaffolder-common/alpha';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../translation';\n\nconst useStyles = makeStyles(theme => ({\n  contentWrapper: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  buttonBar: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'right',\n  },\n  cancelButton: {\n    marginRight: theme.spacing(1),\n  },\n  logsVisibilityButton: {\n    marginRight: theme.spacing(1),\n  },\n}));\n\n/**\n * @public\n */\nexport const OngoingTask = (props: {\n  TemplateOutputsComponent?: React.ComponentType<{\n    output?: ScaffolderTaskOutput;\n  }>;\n}) => {\n  // todo(blam): check that task Id actually exists, and that it's valid. otherwise redirect to something more useful.\n  const { taskId } = useParams();\n  const templateRouteRef = useRouteRef(selectedTemplateRouteRef);\n  const navigate = useNavigate();\n  const analytics = useAnalytics();\n  const scaffolderApi = useApi(scaffolderApiRef);\n  const taskStream = useTaskEventStream(taskId!);\n  const classes = useStyles();\n  const steps = useMemo(\n    () =>\n      taskStream.task?.spec.steps.map(step => ({\n        ...step,\n        ...taskStream?.steps?.[step.id],\n      })) ?? [],\n    [taskStream],\n  );\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  const [logsVisible, setLogVisibleState] = useState(false);\n  const [buttonBarVisible, setButtonBarVisibleState] = useState(true);\n\n  // Used dummy string value for `resourceRef` since `allowed` field will always return `false` if `resourceRef` is `undefined`\n  const { allowed: canCancelTask } = usePermission({\n    permission: taskCancelPermission,\n  });\n\n  const { allowed: canReadTask } = usePermission({\n    permission: taskReadPermission,\n  });\n\n  const { allowed: canCreateTask } = usePermission({\n    permission: taskCreatePermission,\n  });\n\n  // Start Over endpoint requires user to have both read (to grab parameters) and create (to create new task) permissions\n  const canStartOver = canReadTask && canCreateTask;\n\n  useEffect(() => {\n    if (taskStream.error) {\n      setLogVisibleState(true);\n    }\n  }, [taskStream.error]);\n\n  useEffect(() => {\n    if (taskStream.completed && !taskStream.error) {\n      setButtonBarVisibleState(false);\n    }\n  }, [taskStream.error, taskStream.completed]);\n\n  const activeStep = useMemo(() => {\n    for (let i = steps.length - 1; i >= 0; i--) {\n      if (steps[i].status !== 'open') {\n        return i;\n      }\n    }\n\n    return 0;\n  }, [steps]);\n\n  const startOver = useCallback(() => {\n    const { namespace, name } =\n      taskStream.task?.spec.templateInfo?.entity?.metadata ?? {};\n\n    const formData = taskStream.task?.spec.parameters ?? {};\n\n    if (!namespace || !name) {\n      return;\n    }\n\n    analytics.captureEvent('click', `Task has been started over`);\n\n    navigate({\n      pathname: templateRouteRef({\n        namespace,\n        templateName: name,\n      }),\n      search: `?${qs.stringify({ formData: JSON.stringify(formData) })}`,\n    });\n  }, [\n    analytics,\n    navigate,\n    taskStream.task?.spec.parameters,\n    taskStream.task?.spec.templateInfo?.entity?.metadata,\n    templateRouteRef,\n  ]);\n\n  const [{ status: cancelStatus }, { execute: triggerCancel }] = useAsync(\n    async () => {\n      if (taskId) {\n        analytics.captureEvent('cancelled', 'Template has been cancelled');\n        await scaffolderApi.cancelTask(taskId);\n      }\n    },\n  );\n\n  const Outputs = props.TemplateOutputsComponent ?? DefaultTemplateOutputs;\n\n  const templateName =\n    taskStream.task?.spec.templateInfo?.entity?.metadata.name || '';\n\n  const cancelEnabled = !(taskStream.cancelled || taskStream.completed);\n\n  return (\n    <Page themeId=\"website\">\n      <Header\n        pageTitleOverride={\n          templateName\n            ? t('ongoingTask.pageTitle.hasTemplateName', { templateName })\n            : t('ongoingTask.pageTitle.noTemplateName')\n        }\n        title={\n          <div>\n            {t('ongoingTask.title')} <code>{templateName}</code>\n          </div>\n        }\n        subtitle={t('ongoingTask.subtitle', { taskId: taskId as string })}\n      >\n        <ContextMenu\n          cancelEnabled={cancelEnabled}\n          logsVisible={logsVisible}\n          buttonBarVisible={buttonBarVisible}\n          onStartOver={startOver}\n          onToggleLogs={setLogVisibleState}\n          onToggleButtonBar={setButtonBarVisibleState}\n          taskId={taskId}\n        />\n      </Header>\n      <Content className={classes.contentWrapper}>\n        {taskStream.error ? (\n          <Box paddingBottom={2}>\n            <ErrorPanel\n              error={taskStream.error}\n              titleFormat=\"markdown\"\n              title={taskStream.error.message}\n            />\n          </Box>\n        ) : null}\n\n        <Box paddingBottom={2}>\n          <TaskSteps\n            steps={steps}\n            activeStep={activeStep}\n            isComplete={taskStream.completed}\n            isError={Boolean(taskStream.error)}\n          />\n        </Box>\n\n        <Outputs output={taskStream.output} />\n\n        {buttonBarVisible ? (\n          <Box paddingBottom={2}>\n            <Paper>\n              <Box padding={2}>\n                <div className={classes.buttonBar}>\n                  <Button\n                    className={classes.cancelButton}\n                    disabled={\n                      !cancelEnabled ||\n                      cancelStatus !== 'not-executed' ||\n                      !canCancelTask\n                    }\n                    onClick={triggerCancel}\n                    data-testid=\"cancel-button\"\n                  >\n                    {t('ongoingTask.cancelButtonTitle')}\n                  </Button>\n                  <Button\n                    className={classes.logsVisibilityButton}\n                    color=\"primary\"\n                    variant=\"outlined\"\n                    onClick={() => setLogVisibleState(!logsVisible)}\n                  >\n                    {logsVisible\n                      ? t('ongoingTask.hideLogsButtonTitle')\n                      : t('ongoingTask.showLogsButtonTitle')}\n                  </Button>\n                  <Button\n                    variant=\"contained\"\n                    color=\"primary\"\n                    disabled={cancelEnabled || !canStartOver}\n                    onClick={startOver}\n                    data-testid=\"start-over-button\"\n                  >\n                    {t('ongoingTask.startOverButtonTitle')}\n                  </Button>\n                </div>\n              </Box>\n            </Paper>\n          </Box>\n        ) : null}\n\n        {logsVisible ? (\n          <ResizableBox height={240} minConstraints={[0, 160]} axis=\"y\">\n            <Paper style={{ height: '100%' }}>\n              <Box padding={2} height=\"100%\">\n                <TaskLogStream logs={taskStream.stepLogs} />\n              </Box>\n            </Paper>\n          </ResizableBox>\n        ) : null}\n      </Content>\n    </Page>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AA+CA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,cAAgB,EAAA;AAAA,IACd,OAAS,EAAA,MAAA;AAAA,IACT,aAAe,EAAA,QAAA;AAAA,GACjB;AAAA,EACA,SAAW,EAAA;AAAA,IACT,OAAS,EAAA,MAAA;AAAA,IACT,aAAe,EAAA,KAAA;AAAA,IACf,cAAgB,EAAA,OAAA;AAAA,GAClB;AAAA,EACA,YAAc,EAAA;AAAA,IACZ,WAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,GAC9B;AAAA,EACA,oBAAsB,EAAA;AAAA,IACpB,WAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,GAC9B;AACF,CAAE,CAAA,CAAA,CAAA;AAKW,MAAA,WAAA,GAAc,CAAC,KAItB,KAAA;AAEJ,EAAM,MAAA,EAAE,MAAO,EAAA,GAAI,SAAU,EAAA,CAAA;AAC7B,EAAM,MAAA,gBAAA,GAAmB,YAAY,wBAAwB,CAAA,CAAA;AAC7D,EAAA,MAAM,WAAW,WAAY,EAAA,CAAA;AAC7B,EAAA,MAAM,YAAY,YAAa,EAAA,CAAA;AAC/B,EAAM,MAAA,aAAA,GAAgB,OAAO,gBAAgB,CAAA,CAAA;AAC7C,EAAM,MAAA,UAAA,GAAa,mBAAmB,MAAO,CAAA,CAAA;AAC7C,EAAA,MAAM,UAAU,SAAU,EAAA,CAAA;AAC1B,EAAA,MAAM,KAAQ,GAAA,OAAA;AAAA,IACZ,MACE,UAAW,CAAA,IAAA,EAAM,IAAK,CAAA,KAAA,CAAM,IAAI,CAAS,IAAA,MAAA;AAAA,MACvC,GAAG,IAAA;AAAA,MACH,GAAG,UAAA,EAAY,KAAQ,GAAA,IAAA,CAAK,EAAE,CAAA;AAAA,KAChC,CAAE,KAAK,EAAC;AAAA,IACV,CAAC,UAAU,CAAA;AAAA,GACb,CAAA;AACA,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,wBAAwB,CAAA,CAAA;AAExD,EAAA,MAAM,CAAC,WAAA,EAAa,kBAAkB,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AACxD,EAAA,MAAM,CAAC,gBAAA,EAAkB,wBAAwB,CAAA,GAAI,SAAS,IAAI,CAAA,CAAA;AAGlE,EAAA,MAAM,EAAE,OAAA,EAAS,aAAc,EAAA,GAAI,aAAc,CAAA;AAAA,IAC/C,UAAY,EAAA,oBAAA;AAAA,GACb,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,OAAA,EAAS,WAAY,EAAA,GAAI,aAAc,CAAA;AAAA,IAC7C,UAAY,EAAA,kBAAA;AAAA,GACb,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,OAAA,EAAS,aAAc,EAAA,GAAI,aAAc,CAAA;AAAA,IAC/C,UAAY,EAAA,oBAAA;AAAA,GACb,CAAA,CAAA;AAGD,EAAA,MAAM,eAAe,WAAe,IAAA,aAAA,CAAA;AAEpC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,WAAW,KAAO,EAAA;AACpB,MAAA,kBAAA,CAAmB,IAAI,CAAA,CAAA;AAAA,KACzB;AAAA,GACC,EAAA,CAAC,UAAW,CAAA,KAAK,CAAC,CAAA,CAAA;AAErB,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,UAAW,CAAA,SAAA,IAAa,CAAC,UAAA,CAAW,KAAO,EAAA;AAC7C,MAAA,wBAAA,CAAyB,KAAK,CAAA,CAAA;AAAA,KAChC;AAAA,KACC,CAAC,UAAA,CAAW,KAAO,EAAA,UAAA,CAAW,SAAS,CAAC,CAAA,CAAA;AAE3C,EAAM,MAAA,UAAA,GAAa,QAAQ,MAAM;AAC/B,IAAA,KAAA,IAAS,IAAI,KAAM,CAAA,MAAA,GAAS,CAAG,EAAA,CAAA,IAAK,GAAG,CAAK,EAAA,EAAA;AAC1C,MAAA,IAAI,KAAM,CAAA,CAAC,CAAE,CAAA,MAAA,KAAW,MAAQ,EAAA;AAC9B,QAAO,OAAA,CAAA,CAAA;AAAA,OACT;AAAA,KACF;AAEA,IAAO,OAAA,CAAA,CAAA;AAAA,GACT,EAAG,CAAC,KAAK,CAAC,CAAA,CAAA;AAEV,EAAM,MAAA,SAAA,GAAY,YAAY,MAAM;AAClC,IAAM,MAAA,EAAE,SAAW,EAAA,IAAA,EACjB,GAAA,UAAA,CAAW,MAAM,IAAK,CAAA,YAAA,EAAc,MAAQ,EAAA,QAAA,IAAY,EAAC,CAAA;AAE3D,IAAA,MAAM,QAAW,GAAA,UAAA,CAAW,IAAM,EAAA,IAAA,CAAK,cAAc,EAAC,CAAA;AAEtD,IAAI,IAAA,CAAC,SAAa,IAAA,CAAC,IAAM,EAAA;AACvB,MAAA,OAAA;AAAA,KACF;AAEA,IAAU,SAAA,CAAA,YAAA,CAAa,SAAS,CAA4B,0BAAA,CAAA,CAAA,CAAA;AAE5D,IAAS,QAAA,CAAA;AAAA,MACP,UAAU,gBAAiB,CAAA;AAAA,QACzB,SAAA;AAAA,QACA,YAAc,EAAA,IAAA;AAAA,OACf,CAAA;AAAA,MACD,MAAA,EAAQ,CAAI,CAAA,EAAA,EAAA,CAAG,SAAU,CAAA,EAAE,QAAU,EAAA,IAAA,CAAK,SAAU,CAAA,QAAQ,CAAE,EAAC,CAAC,CAAA,CAAA;AAAA,KACjE,CAAA,CAAA;AAAA,GACA,EAAA;AAAA,IACD,SAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA,CAAW,MAAM,IAAK,CAAA,UAAA;AAAA,IACtB,UAAW,CAAA,IAAA,EAAM,IAAK,CAAA,YAAA,EAAc,MAAQ,EAAA,QAAA;AAAA,IAC5C,gBAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA,CAAC,EAAE,MAAQ,EAAA,YAAA,IAAgB,EAAE,OAAA,EAAS,aAAc,EAAC,CAAI,GAAA,QAAA;AAAA,IAC7D,YAAY;AACV,MAAA,IAAI,MAAQ,EAAA;AACV,QAAU,SAAA,CAAA,YAAA,CAAa,aAAa,6BAA6B,CAAA,CAAA;AACjE,QAAM,MAAA,aAAA,CAAc,WAAW,MAAM,CAAA,CAAA;AAAA,OACvC;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,OAAA,GAAU,MAAM,wBAA4B,IAAA,sBAAA,CAAA;AAElD,EAAA,MAAM,eACJ,UAAW,CAAA,IAAA,EAAM,KAAK,YAAc,EAAA,MAAA,EAAQ,SAAS,IAAQ,IAAA,EAAA,CAAA;AAE/D,EAAA,MAAM,aAAgB,GAAA,EAAE,UAAW,CAAA,SAAA,IAAa,UAAW,CAAA,SAAA,CAAA,CAAA;AAE3D,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,OAAA,EAAQ,SACZ,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,iBAAA,EACE,eACI,CAAE,CAAA,uCAAA,EAAyC,EAAE,YAAa,EAAC,CAC3D,GAAA,CAAA,CAAE,sCAAsC,CAAA;AAAA,MAE9C,KAAA,kBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EACE,CAAE,CAAA,mBAAmB,GAAE,GAAC,kBAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA,EAAA,YAAa,CAC/C,CAAA;AAAA,MAEF,QAAU,EAAA,CAAA,CAAE,sBAAwB,EAAA,EAAE,QAA0B,CAAA;AAAA,KAAA;AAAA,oBAEhE,KAAA,CAAA,aAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,aAAA;AAAA,QACA,WAAA;AAAA,QACA,gBAAA;AAAA,QACA,WAAa,EAAA,SAAA;AAAA,QACb,YAAc,EAAA,kBAAA;AAAA,QACd,iBAAmB,EAAA,wBAAA;AAAA,QACnB,MAAA;AAAA,OAAA;AAAA,KACF;AAAA,GACF,kBACC,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,SAAW,EAAA,OAAA,CAAQ,cACzB,EAAA,EAAA,UAAA,CAAW,KACV,mBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,aAAA,EAAe,CAClB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,OAAO,UAAW,CAAA,KAAA;AAAA,MAClB,WAAY,EAAA,UAAA;AAAA,MACZ,KAAA,EAAO,WAAW,KAAM,CAAA,OAAA;AAAA,KAAA;AAAA,GAE5B,CACE,GAAA,IAAA,kBAEH,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,eAAe,CAClB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,UAAA;AAAA,MACA,YAAY,UAAW,CAAA,SAAA;AAAA,MACvB,OAAA,EAAS,OAAQ,CAAA,UAAA,CAAW,KAAK,CAAA;AAAA,KAAA;AAAA,GAErC,mBAEC,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,QAAQ,UAAW,CAAA,MAAA,EAAQ,CAEnC,EAAA,gBAAA,mBACE,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,eAAe,CAClB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,OAAA,EAAS,qBACX,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,OAAA,CAAQ,SACtB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,WAAW,OAAQ,CAAA,YAAA;AAAA,MACnB,QACE,EAAA,CAAC,aACD,IAAA,YAAA,KAAiB,kBACjB,CAAC,aAAA;AAAA,MAEH,OAAS,EAAA,aAAA;AAAA,MACT,aAAY,EAAA,eAAA;AAAA,KAAA;AAAA,IAEX,EAAE,+BAA+B,CAAA;AAAA,GAEpC,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,WAAW,OAAQ,CAAA,oBAAA;AAAA,MACnB,KAAM,EAAA,SAAA;AAAA,MACN,OAAQ,EAAA,UAAA;AAAA,MACR,OAAS,EAAA,MAAM,kBAAmB,CAAA,CAAC,WAAW,CAAA;AAAA,KAAA;AAAA,IAE7C,WACG,GAAA,CAAA,CAAE,iCAAiC,CAAA,GACnC,EAAE,iCAAiC,CAAA;AAAA,GAEzC,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,WAAA;AAAA,MACR,KAAM,EAAA,SAAA;AAAA,MACN,QAAA,EAAU,iBAAiB,CAAC,YAAA;AAAA,MAC5B,OAAS,EAAA,SAAA;AAAA,MACT,aAAY,EAAA,mBAAA;AAAA,KAAA;AAAA,IAEX,EAAE,kCAAkC,CAAA;AAAA,GAEzC,CACF,CACF,CACF,CACE,GAAA,IAAA,EAEH,8BACE,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA,EAAa,MAAQ,EAAA,GAAA,EAAK,gBAAgB,CAAC,CAAA,EAAG,GAAG,CAAG,EAAA,IAAA,EAAK,uBACvD,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAM,KAAO,EAAA,EAAE,QAAQ,MAAO,EAAA,EAAA,sCAC5B,GAAI,EAAA,EAAA,OAAA,EAAS,GAAG,MAAO,EAAA,MAAA,EAAA,sCACrB,aAAc,EAAA,EAAA,IAAA,EAAM,WAAW,QAAU,EAAA,CAC5C,CACF,CACF,CAAA,GACE,IACN,CACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/TemplateTypePicker/TemplateTypePicker.esm.js

@@ -12,12 +12,15 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import { useEntityTypeFilter } from '@backstage/plugin-catalog-react';
 import { useApi, alertApiRef } from '@backstage/core-plugin-api';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { scaffolderTranslationRef } from '../../translation.esm.js';
 
 const icon = /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" });
 const checkedIcon = /* @__PURE__ */ React.createElement(CheckBoxIcon, { fontSize: "small" });
 const TemplateTypePicker = () => {
   const alertApi = useApi(alertApiRef);
   const { error, loading, availableTypes, selectedTypes, setSelectedTypes } = useEntityTypeFilter();
+  const { t } = useTranslationRef(scaffolderTranslationRef);
   if (loading) return /* @__PURE__ */ React.createElement(Progress, null);
   if (!availableTypes) return null;
   if (error) {
@@ -34,7 +37,7 @@ const TemplateTypePicker = () => {
       component: "label",
       htmlFor: "categories-picker"
     },
-    "Categories"
+    t("templateTypePicker.title")
   ), /* @__PURE__ */ React.createElement(
     Autocomplete,
     {

package/dist/components/TemplateTypePicker/TemplateTypePicker.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateTypePicker.esm.js","sources":["../../../src/components/TemplateTypePicker/TemplateTypePicker.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 React from 'react';\nimport capitalize from 'lodash/capitalize';\nimport { Progress } from '@backstage/core-components';\nimport Box from '@material-ui/core/Box';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport TextField from '@material-ui/core/TextField';\nimport Typography from '@material-ui/core/Typography';\nimport CheckBoxIcon from '@material-ui/icons/CheckBox';\nimport CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport { useEntityTypeFilter } from '@backstage/plugin-catalog-react';\nimport { alertApiRef, useApi } from '@backstage/core-plugin-api';\n\nconst icon = <CheckBoxOutlineBlankIcon fontSize=\"small\" />;\nconst checkedIcon = <CheckBoxIcon fontSize=\"small\" />;\n\n/**\n * The component to select the `type` of `Template` that you will see in the table.\n *\n * @public\n */\nexport const TemplateTypePicker = () => {\n  const alertApi = useApi(alertApiRef);\n  const { error, loading, availableTypes, selectedTypes, setSelectedTypes } =\n    useEntityTypeFilter();\n\n  if (loading) return <Progress />;\n\n  if (!availableTypes) return null;\n\n  if (error) {\n    alertApi.post({\n      message: `Failed to load entity types`,\n      severity: 'error',\n    });\n    return null;\n  }\n\n  return (\n    <Box pb={1} pt={1}>\n      <Typography\n        variant=\"button\"\n        component=\"label\"\n        htmlFor=\"categories-picker\"\n      >\n        Categories\n      </Typography>\n      <Autocomplete<string, true>\n        id=\"categories-picker\"\n        multiple\n        options={availableTypes}\n        value={selectedTypes}\n        onChange={(_: object, value: string[]) => setSelectedTypes(value)}\n        renderOption={(option, { selected }) => (\n          <FormControlLabel\n            control={\n              <Checkbox\n                icon={icon}\n                checkedIcon={checkedIcon}\n                checked={selected}\n              />\n            }\n            label={capitalize(option)}\n          />\n        )}\n        size=\"small\"\n        popupIcon={<ExpandMoreIcon data-testid=\"categories-picker-expand\" />}\n        renderInput={params => <TextField {...params} variant=\"outlined\" />}\n      />\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AA+BA,MAAM,IAAO,mBAAA,KAAA,CAAA,aAAA,CAAC,wBAAyB,EAAA,EAAA,QAAA,EAAS,OAAQ,EAAA,CAAA,CAAA;AACxD,MAAM,WAAc,mBAAA,KAAA,CAAA,aAAA,CAAC,YAAa,EAAA,EAAA,QAAA,EAAS,OAAQ,EAAA,CAAA,CAAA;AAO5C,MAAM,qBAAqB,MAAM;AACtC,EAAM,MAAA,QAAA,GAAW,OAAO,WAAW,CAAA,CAAA;AACnC,EAAA,MAAM,EAAE,KAAO,EAAA,OAAA,EAAS,gBAAgB,aAAe,EAAA,gBAAA,KACrD,mBAAoB,EAAA,CAAA;AAEtB,EAAI,IAAA,OAAA,EAAgB,uBAAA,KAAA,CAAA,aAAA,CAAC,QAAS,EAAA,IAAA,CAAA,CAAA;AAE9B,EAAI,IAAA,CAAC,gBAAuB,OAAA,IAAA,CAAA;AAE5B,EAAA,IAAI,KAAO,EAAA;AACT,IAAA,QAAA,CAAS,IAAK,CAAA;AAAA,MACZ,OAAS,EAAA,CAAA,2BAAA,CAAA;AAAA,MACT,QAAU,EAAA,OAAA;AAAA,KACX,CAAA,CAAA;AACD,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,EAAI,EAAA,CAAA,EAAG,IAAI,CACd,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,QAAA;AAAA,MACR,SAAU,EAAA,OAAA;AAAA,MACV,OAAQ,EAAA,mBAAA;AAAA,KAAA;AAAA,IACT,YAAA;AAAA,GAGD,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,EAAG,EAAA,mBAAA;AAAA,MACH,QAAQ,EAAA,IAAA;AAAA,MACR,OAAS,EAAA,cAAA;AAAA,MACT,KAAO,EAAA,aAAA;AAAA,MACP,QAAU,EAAA,CAAC,CAAW,EAAA,KAAA,KAAoB,iBAAiB,KAAK,CAAA;AAAA,MAChE,YAAc,EAAA,CAAC,MAAQ,EAAA,EAAE,UACvB,qBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,gBAAA;AAAA,QAAA;AAAA,UACC,OACE,kBAAA,KAAA,CAAA,aAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,IAAA;AAAA,cACA,WAAA;AAAA,cACA,OAAS,EAAA,QAAA;AAAA,aAAA;AAAA,WACX;AAAA,UAEF,KAAA,EAAO,WAAW,MAAM,CAAA;AAAA,SAAA;AAAA,OAC1B;AAAA,MAEF,IAAK,EAAA,OAAA;AAAA,MACL,SAAW,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAe,EAAA,EAAA,aAAA,EAAY,0BAA2B,EAAA,CAAA;AAAA,MAClE,aAAa,CAAU,MAAA,qBAAA,KAAA,CAAA,aAAA,CAAC,aAAW,GAAG,MAAA,EAAQ,SAAQ,UAAW,EAAA,CAAA;AAAA,KAAA;AAAA,GAErE,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TemplateTypePicker.esm.js","sources":["../../../src/components/TemplateTypePicker/TemplateTypePicker.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 React from 'react';\nimport capitalize from 'lodash/capitalize';\nimport { Progress } from '@backstage/core-components';\nimport Box from '@material-ui/core/Box';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport TextField from '@material-ui/core/TextField';\nimport Typography from '@material-ui/core/Typography';\nimport CheckBoxIcon from '@material-ui/icons/CheckBox';\nimport CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport { useEntityTypeFilter } from '@backstage/plugin-catalog-react';\nimport { alertApiRef, useApi } from '@backstage/core-plugin-api';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../translation';\n\nconst icon = <CheckBoxOutlineBlankIcon fontSize=\"small\" />;\nconst checkedIcon = <CheckBoxIcon fontSize=\"small\" />;\n\n/**\n * The component to select the `type` of `Template` that you will see in the table.\n *\n * @public\n */\nexport const TemplateTypePicker = () => {\n  const alertApi = useApi(alertApiRef);\n  const { error, loading, availableTypes, selectedTypes, setSelectedTypes } =\n    useEntityTypeFilter();\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n\n  if (loading) return <Progress />;\n\n  if (!availableTypes) return null;\n\n  if (error) {\n    alertApi.post({\n      message: `Failed to load entity types`,\n      severity: 'error',\n    });\n    return null;\n  }\n\n  return (\n    <Box pb={1} pt={1}>\n      <Typography\n        variant=\"button\"\n        component=\"label\"\n        htmlFor=\"categories-picker\"\n      >\n        {t('templateTypePicker.title')}\n      </Typography>\n      <Autocomplete<string, true>\n        id=\"categories-picker\"\n        multiple\n        options={availableTypes}\n        value={selectedTypes}\n        onChange={(_: object, value: string[]) => setSelectedTypes(value)}\n        renderOption={(option, { selected }) => (\n          <FormControlLabel\n            control={\n              <Checkbox\n                icon={icon}\n                checkedIcon={checkedIcon}\n                checked={selected}\n              />\n            }\n            label={capitalize(option)}\n          />\n        )}\n        size=\"small\"\n        popupIcon={<ExpandMoreIcon data-testid=\"categories-picker-expand\" />}\n        renderInput={params => <TextField {...params} variant=\"outlined\" />}\n      />\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAiCA,MAAM,IAAO,mBAAA,KAAA,CAAA,aAAA,CAAC,wBAAyB,EAAA,EAAA,QAAA,EAAS,OAAQ,EAAA,CAAA,CAAA;AACxD,MAAM,WAAc,mBAAA,KAAA,CAAA,aAAA,CAAC,YAAa,EAAA,EAAA,QAAA,EAAS,OAAQ,EAAA,CAAA,CAAA;AAO5C,MAAM,qBAAqB,MAAM;AACtC,EAAM,MAAA,QAAA,GAAW,OAAO,WAAW,CAAA,CAAA;AACnC,EAAA,MAAM,EAAE,KAAO,EAAA,OAAA,EAAS,gBAAgB,aAAe,EAAA,gBAAA,KACrD,mBAAoB,EAAA,CAAA;AACtB,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,wBAAwB,CAAA,CAAA;AAExD,EAAI,IAAA,OAAA,EAAgB,uBAAA,KAAA,CAAA,aAAA,CAAC,QAAS,EAAA,IAAA,CAAA,CAAA;AAE9B,EAAI,IAAA,CAAC,gBAAuB,OAAA,IAAA,CAAA;AAE5B,EAAA,IAAI,KAAO,EAAA;AACT,IAAA,QAAA,CAAS,IAAK,CAAA;AAAA,MACZ,OAAS,EAAA,CAAA,2BAAA,CAAA;AAAA,MACT,QAAU,EAAA,OAAA;AAAA,KACX,CAAA,CAAA;AACD,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,EAAI,EAAA,CAAA,EAAG,IAAI,CACd,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,QAAA;AAAA,MACR,SAAU,EAAA,OAAA;AAAA,MACV,OAAQ,EAAA,mBAAA;AAAA,KAAA;AAAA,IAEP,EAAE,0BAA0B,CAAA;AAAA,GAE/B,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,EAAG,EAAA,mBAAA;AAAA,MACH,QAAQ,EAAA,IAAA;AAAA,MACR,OAAS,EAAA,cAAA;AAAA,MACT,KAAO,EAAA,aAAA;AAAA,MACP,QAAU,EAAA,CAAC,CAAW,EAAA,KAAA,KAAoB,iBAAiB,KAAK,CAAA;AAAA,MAChE,YAAc,EAAA,CAAC,MAAQ,EAAA,EAAE,UACvB,qBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,gBAAA;AAAA,QAAA;AAAA,UACC,OACE,kBAAA,KAAA,CAAA,aAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,IAAA;AAAA,cACA,WAAA;AAAA,cACA,OAAS,EAAA,QAAA;AAAA,aAAA;AAAA,WACX;AAAA,UAEF,KAAA,EAAO,WAAW,MAAM,CAAA;AAAA,SAAA;AAAA,OAC1B;AAAA,MAEF,IAAK,EAAA,OAAA;AAAA,MACL,SAAW,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAe,EAAA,EAAA,aAAA,EAAY,0BAA2B,EAAA,CAAA;AAAA,MAClE,aAAa,CAAU,MAAA,qBAAA,KAAA,CAAA,aAAA,CAAC,aAAW,GAAG,MAAA,EAAQ,SAAQ,UAAW,EAAA,CAAA;AAAA,KAAA;AAAA,GAErE,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/fields/EntityNamePicker/EntityNamePicker.esm.js

@@ -1,12 +1,18 @@
 import React from 'react';
 import TextField from '@material-ui/core/TextField';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { scaffolderTranslationRef } from '../../../translation.esm.js';
 export { EntityNamePickerSchema } from './schema.esm.js';
 
 const EntityNamePicker = (props) => {
+  const { t } = useTranslationRef(scaffolderTranslationRef);
   const {
     onChange,
     required,
-    schema: { title = "Name", description = "Unique name of the component" },
+    schema: {
+      title = t("fields.entityNamePicker.title"),
+      description = t("fields.entityNamePicker.description")
+    },
     rawErrors,
     formData,
     uiSchema: { "ui:autofocus": autoFocus },

package/dist/components/fields/EntityNamePicker/EntityNamePicker.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntityNamePicker.esm.js","sources":["../../../../src/components/fields/EntityNamePicker/EntityNamePicker.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 */\nimport React from 'react';\nimport { EntityNamePickerProps } from './schema';\nimport TextField from '@material-ui/core/TextField';\n\nexport { EntityNamePickerSchema } from './schema';\n\n/**\n * EntityName Picker\n */\nexport const EntityNamePicker = (props: EntityNamePickerProps) => {\n  const {\n    onChange,\n    required,\n    schema: { title = 'Name', description = 'Unique name of the component' },\n    rawErrors,\n    formData,\n    uiSchema: { 'ui:autofocus': autoFocus },\n    idSchema,\n    placeholder,\n  } = props;\n\n  return (\n    <TextField\n      id={idSchema?.$id}\n      label={title}\n      placeholder={placeholder}\n      helperText={description}\n      required={required}\n      value={formData ?? ''}\n      onChange={({ target: { value } }) => onChange(value)}\n      margin=\"normal\"\n      error={rawErrors?.length > 0 && !formData}\n      inputProps={{ autoFocus }}\n      FormHelperTextProps={{ margin: 'dense', style: { marginLeft: 0 } }}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;AAwBa,MAAA,gBAAA,GAAmB,CAAC,KAAiC,KAAA;AAChE,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAQ,EAAA,EAAE,KAAQ,GAAA,MAAA,EAAQ,cAAc,8BAA+B,EAAA;AAAA,IACvE,SAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA,EAAU,EAAE,cAAA,EAAgB,SAAU,EAAA;AAAA,IACtC,QAAA;AAAA,IACA,WAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,IAAI,QAAU,EAAA,GAAA;AAAA,MACd,KAAO,EAAA,KAAA;AAAA,MACP,WAAA;AAAA,MACA,UAAY,EAAA,WAAA;AAAA,MACZ,QAAA;AAAA,MACA,OAAO,QAAY,IAAA,EAAA;AAAA,MACnB,QAAA,EAAU,CAAC,EAAE,MAAA,EAAQ,EAAE,KAAM,EAAA,EAAQ,KAAA,QAAA,CAAS,KAAK,CAAA;AAAA,MACnD,MAAO,EAAA,QAAA;AAAA,MACP,KAAO,EAAA,SAAA,EAAW,MAAS,GAAA,CAAA,IAAK,CAAC,QAAA;AAAA,MACjC,UAAA,EAAY,EAAE,SAAU,EAAA;AAAA,MACxB,mBAAA,EAAqB,EAAE,MAAQ,EAAA,OAAA,EAAS,OAAO,EAAE,UAAA,EAAY,GAAI,EAAA;AAAA,KAAA;AAAA,GACnE,CAAA;AAEJ;;;;"}
+{"version":3,"file":"EntityNamePicker.esm.js","sources":["../../../../src/components/fields/EntityNamePicker/EntityNamePicker.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 */\nimport React from 'react';\nimport { EntityNamePickerProps } from './schema';\nimport TextField from '@material-ui/core/TextField';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { scaffolderTranslationRef } from '../../../translation';\n\nexport { EntityNamePickerSchema } from './schema';\n\n/**\n * EntityName Picker\n */\nexport const EntityNamePicker = (props: EntityNamePickerProps) => {\n  const { t } = useTranslationRef(scaffolderTranslationRef);\n  const {\n    onChange,\n    required,\n    schema: {\n      title = t('fields.entityNamePicker.title'),\n      description = t('fields.entityNamePicker.description'),\n    },\n    rawErrors,\n    formData,\n    uiSchema: { 'ui:autofocus': autoFocus },\n    idSchema,\n    placeholder,\n  } = props;\n\n  return (\n    <TextField\n      id={idSchema?.$id}\n      label={title}\n      placeholder={placeholder}\n      helperText={description}\n      required={required}\n      value={formData ?? ''}\n      onChange={({ target: { value } }) => onChange(value)}\n      margin=\"normal\"\n      error={rawErrors?.length > 0 && !formData}\n      inputProps={{ autoFocus }}\n      FormHelperTextProps={{ margin: 'dense', style: { marginLeft: 0 } }}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;AA0Ba,MAAA,gBAAA,GAAmB,CAAC,KAAiC,KAAA;AAChE,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,wBAAwB,CAAA,CAAA;AACxD,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,KAAA,GAAQ,EAAE,+BAA+B,CAAA;AAAA,MACzC,WAAA,GAAc,EAAE,qCAAqC,CAAA;AAAA,KACvD;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA,EAAU,EAAE,cAAA,EAAgB,SAAU,EAAA;AAAA,IACtC,QAAA;AAAA,IACA,WAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,IAAI,QAAU,EAAA,GAAA;AAAA,MACd,KAAO,EAAA,KAAA;AAAA,MACP,WAAA;AAAA,MACA,UAAY,EAAA,WAAA;AAAA,MACZ,QAAA;AAAA,MACA,OAAO,QAAY,IAAA,EAAA;AAAA,MACnB,QAAA,EAAU,CAAC,EAAE,MAAA,EAAQ,EAAE,KAAM,EAAA,EAAQ,KAAA,QAAA,CAAS,KAAK,CAAA;AAAA,MACnD,MAAO,EAAA,QAAA;AAAA,MACP,KAAO,EAAA,SAAA,EAAW,MAAS,GAAA,CAAA,IAAK,CAAC,QAAA;AAAA,MACjC,UAAA,EAAY,EAAE,SAAU,EAAA;AAAA,MACxB,mBAAA,EAAqB,EAAE,MAAQ,EAAA,OAAA,EAAS,OAAO,EAAE,UAAA,EAAY,GAAI,EAAA;AAAA,KAAA;AAAA,GACnE,CAAA;AAEJ;;;;"}

package/dist/components/fields/EntityPicker/EntityPicker.esm.js

@@ -8,12 +8,18 @@ import Autocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete
 import React, { useCallback, useEffect } from 'react';
 import useAsync from 'react-use/esm/useAsync';
 import { VirtualizedListbox } from '../VirtualizedListbox.esm.js';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { scaffolderTranslationRef } from '../../../translation.esm.js';
 export { EntityPickerSchema } from './schema.esm.js';
 
 const EntityPicker = (props) => {
+  const { t } = useTranslationRef(scaffolderTranslationRef);
   const {
     onChange,
-    schema: { title = "Entity", description = "An entity from the catalog" },
+    schema: {
+      title = t("fields.entityPicker.title"),
+      description = t("fields.entityPicker.description")
+    },
     required,
     uiSchema,
     rawErrors,