@backstage/plugin-api-docs 0.12.6-next.1 → 0.12.6

package/dist/components/ApiDefinitionDialog/ApiDefinitionDialog.esm.js

@@ -1,3 +1,4 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useApi } from '@backstage/core-plugin-api';
 import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
@@ -9,9 +10,11 @@ import Tab from '@material-ui/core/Tab';
 import Tabs from '@material-ui/core/Tabs';
 import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
-import React, { useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { apiDocsConfigRef } from '../../config.esm.js';
 import { PlainApiDefinitionWidget } from '../PlainApiDefinitionWidget/PlainApiDefinitionWidget.esm.js';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { apiDocsTranslationRef } from '../../translation.esm.js';
 
 const useStyles = makeStyles((theme) => ({
   fullHeightDialog: {
@@ -48,7 +51,7 @@ const useStyles = makeStyles((theme) => ({
 function TabPanel(props) {
   const { children, value, index, ...other } = props;
   const classes = useStyles();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       role: "tabpanel",
@@ -56,9 +59,9 @@ function TabPanel(props) {
       id: `vertical-tabpanel-${index}`,
       "aria-labelledby": `vertical-tab-${index}`,
       className: classes.tabContents,
-      ...other
-    },
-    value === index && /* @__PURE__ */ React.createElement(Box, { pl: 3, pr: 3 }, children)
+      ...other,
+      children: value === index && /* @__PURE__ */ jsx(Box, { pl: 3, pr: 3, children })
+    }
   );
 }
 function a11yProps(index) {
@@ -69,8 +72,9 @@ function a11yProps(index) {
 }
 function ApiDefinitionDialog(props) {
   const { open, entity, onClose } = props;
-  const [activeTab, setActiveTab] = React.useState(0);
+  const [activeTab, setActiveTab] = useState(0);
   const classes = useStyles();
+  const { t } = useTranslationRef(apiDocsTranslationRef);
   useEffect(() => {
     setActiveTab(0);
   }, [open]);
@@ -78,7 +82,7 @@ function ApiDefinitionDialog(props) {
   const definitionWidget = config.getApiDefinitionWidget(entity);
   let tabIndex = 0;
   let tabPanelIndex = 0;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     Dialog,
     {
       fullWidth: true,
@@ -86,29 +90,43 @@ function ApiDefinitionDialog(props) {
       open,
       onClose,
       "aria-labelledby": "api-definition-dialog-title",
-      PaperProps: { className: classes.fullHeightDialog }
-    },
-    /* @__PURE__ */ React.createElement(DialogTitle, { id: "api-definition-dialog-title", disableTypography: true }, /* @__PURE__ */ React.createElement(Typography, { className: classes.type }, "API - ", definitionWidget?.title ?? "Raw"), /* @__PURE__ */ React.createElement(Typography, { className: classes.title, variant: "h1" }, entity.metadata.title ?? entity.metadata.name)),
-    /* @__PURE__ */ React.createElement(DialogContent, { dividers: true, className: classes.root }, /* @__PURE__ */ React.createElement(
-      Tabs,
-      {
-        orientation: "vertical",
-        variant: "scrollable",
-        value: activeTab,
-        onChange: (_, newValue) => setActiveTab(newValue),
-        "aria-label": "API definition options",
-        className: classes.tabs
-      },
-      definitionWidget ? /* @__PURE__ */ React.createElement(Tab, { label: definitionWidget.title, ...a11yProps(tabIndex++) }) : null,
-      /* @__PURE__ */ React.createElement(Tab, { label: "Raw", ...a11yProps(tabIndex++) })
-    ), definitionWidget ? /* @__PURE__ */ React.createElement(TabPanel, { value: activeTab, index: tabPanelIndex++ }, definitionWidget.component(entity.spec.definition)) : null, /* @__PURE__ */ React.createElement(TabPanel, { value: activeTab, index: tabPanelIndex++ }, /* @__PURE__ */ React.createElement(
-      PlainApiDefinitionWidget,
-      {
-        definition: entity.spec.definition,
-        language: definitionWidget?.rawLanguage ?? entity.spec.type
-      }
-    ))),
-    /* @__PURE__ */ React.createElement(DialogActions, null, /* @__PURE__ */ React.createElement(Button, { onClick: onClose, color: "primary" }, "Close"))
+      PaperProps: { className: classes.fullHeightDialog },
+      children: [
+        /* @__PURE__ */ jsxs(DialogTitle, { id: "api-definition-dialog-title", disableTypography: true, children: [
+          /* @__PURE__ */ jsxs(Typography, { className: classes.type, children: [
+            "API - ",
+            definitionWidget?.title ?? "Raw"
+          ] }),
+          /* @__PURE__ */ jsx(Typography, { className: classes.title, variant: "h1", children: entity.metadata.title ?? entity.metadata.name })
+        ] }),
+        /* @__PURE__ */ jsxs(DialogContent, { dividers: true, className: classes.root, children: [
+          /* @__PURE__ */ jsxs(
+            Tabs,
+            {
+              orientation: "vertical",
+              variant: "scrollable",
+              value: activeTab,
+              onChange: (_, newValue) => setActiveTab(newValue),
+              "aria-label": t("apiDefinitionDialog.tabsAriaLabel"),
+              className: classes.tabs,
+              children: [
+                definitionWidget ? /* @__PURE__ */ jsx(Tab, { label: definitionWidget.title, ...a11yProps(tabIndex++) }) : null,
+                /* @__PURE__ */ jsx(Tab, { label: "Raw", ...a11yProps(tabIndex++) })
+              ]
+            }
+          ),
+          definitionWidget ? /* @__PURE__ */ jsx(TabPanel, { value: activeTab, index: tabPanelIndex++, children: definitionWidget.component(entity.spec.definition) }) : null,
+          /* @__PURE__ */ jsx(TabPanel, { value: activeTab, index: tabPanelIndex++, children: /* @__PURE__ */ jsx(
+            PlainApiDefinitionWidget,
+            {
+              definition: entity.spec.definition,
+              language: definitionWidget?.rawLanguage ?? entity.spec.type
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsx(Button, { onClick: onClose, color: "primary", children: t("apiDefinitionDialog.closeButtonTitle") }) })
+      ]
+    }
   );
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"ApiDefinitionDialog.esm.js","sources":["../../../src/components/ApiDefinitionDialog/ApiDefinitionDialog.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 { ApiEntity } from '@backstage/catalog-model';\nimport { useApi } from '@backstage/core-plugin-api';\nimport Box from '@material-ui/core/Box';\nimport Button from '@material-ui/core/Button';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport Tab from '@material-ui/core/Tab';\nimport Tabs from '@material-ui/core/Tabs';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\nimport React, { useEffect } from 'react';\nimport { apiDocsConfigRef } from '../../config';\nimport { PlainApiDefinitionWidget } from '../PlainApiDefinitionWidget';\n\nconst useStyles = makeStyles(theme => ({\n  fullHeightDialog: {\n    height: 'calc(100% - 64px)',\n  },\n  root: {\n    display: 'flex',\n    flexGrow: 1,\n    width: '100%',\n    height: '100%',\n  },\n  tabs: {\n    borderRight: `1px solid ${theme.palette.divider}`,\n    flexShrink: 0,\n  },\n  tabContents: {\n    flexGrow: 1,\n    overflowX: 'auto',\n  },\n  title: {\n    color: theme.palette.text.primary,\n    wordBreak: 'break-word',\n    fontSize: theme.typography.h3.fontSize,\n    marginBottom: 0,\n  },\n  type: {\n    textTransform: 'uppercase',\n    fontSize: 11,\n    opacity: 0.8,\n    marginBottom: theme.spacing(1),\n    color: theme.palette.text.primary,\n  },\n}));\n\nfunction TabPanel(props: {\n  children?: React.ReactNode;\n  index: number;\n  value: number;\n}) {\n  const { children, value, index, ...other } = props;\n  const classes = useStyles();\n  return (\n    <div\n      role=\"tabpanel\"\n      hidden={value !== index}\n      id={`vertical-tabpanel-${index}`}\n      aria-labelledby={`vertical-tab-${index}`}\n      className={classes.tabContents}\n      {...other}\n    >\n      {value === index && (\n        <Box pl={3} pr={3}>\n          {children}\n        </Box>\n      )}\n    </div>\n  );\n}\n\nfunction a11yProps(index: number) {\n  return {\n    id: `vertical-tab-${index}`,\n    'aria-controls': `vertical-tabpanel-${index}`,\n  };\n}\n\n/**\n * A dialog that lets users inspect the API definition.\n *\n * @public\n */\nexport function ApiDefinitionDialog(props: {\n  open: boolean;\n  entity: ApiEntity;\n  onClose: () => void;\n}) {\n  const { open, entity, onClose } = props;\n  const [activeTab, setActiveTab] = React.useState(0);\n  const classes = useStyles();\n\n  useEffect(() => {\n    setActiveTab(0);\n  }, [open]);\n\n  const config = useApi(apiDocsConfigRef);\n  const definitionWidget = config.getApiDefinitionWidget(entity);\n\n  let tabIndex = 0;\n  let tabPanelIndex = 0;\n\n  return (\n    <Dialog\n      fullWidth\n      maxWidth=\"xl\"\n      open={open}\n      onClose={onClose}\n      aria-labelledby=\"api-definition-dialog-title\"\n      PaperProps={{ className: classes.fullHeightDialog }}\n    >\n      <DialogTitle id=\"api-definition-dialog-title\" disableTypography>\n        <Typography className={classes.type}>\n          API - {definitionWidget?.title ?? 'Raw'}\n        </Typography>\n        <Typography className={classes.title} variant=\"h1\">\n          {entity.metadata.title ?? entity.metadata.name}\n        </Typography>\n      </DialogTitle>\n      <DialogContent dividers className={classes.root}>\n        <Tabs\n          orientation=\"vertical\"\n          variant=\"scrollable\"\n          value={activeTab}\n          onChange={(_, newValue) => setActiveTab(newValue)}\n          aria-label=\"API definition options\"\n          className={classes.tabs}\n        >\n          {definitionWidget ? (\n            <Tab label={definitionWidget.title} {...a11yProps(tabIndex++)} />\n          ) : null}\n          <Tab label=\"Raw\" {...a11yProps(tabIndex++)} />\n        </Tabs>\n\n        {definitionWidget ? (\n          <TabPanel value={activeTab} index={tabPanelIndex++}>\n            {definitionWidget.component(entity.spec.definition)}\n          </TabPanel>\n        ) : null}\n        <TabPanel value={activeTab} index={tabPanelIndex++}>\n          <PlainApiDefinitionWidget\n            definition={entity.spec.definition}\n            language={definitionWidget?.rawLanguage ?? entity.spec.type}\n          />\n        </TabPanel>\n      </DialogContent>\n      <DialogActions>\n        <Button onClick={onClose} color=\"primary\">\n          Close\n        </Button>\n      </DialogActions>\n    </Dialog>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ApiDefinitionDialog.esm.js","sources":["../../../src/components/ApiDefinitionDialog/ApiDefinitionDialog.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 { ApiEntity } from '@backstage/catalog-model';\nimport { useApi } from '@backstage/core-plugin-api';\nimport Box from '@material-ui/core/Box';\nimport Button from '@material-ui/core/Button';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport Tab from '@material-ui/core/Tab';\nimport Tabs from '@material-ui/core/Tabs';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { ReactNode, useState, useEffect } from 'react';\nimport { apiDocsConfigRef } from '../../config';\nimport { PlainApiDefinitionWidget } from '../PlainApiDefinitionWidget';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { apiDocsTranslationRef } from '../../translation';\n\nconst useStyles = makeStyles(theme => ({\n  fullHeightDialog: {\n    height: 'calc(100% - 64px)',\n  },\n  root: {\n    display: 'flex',\n    flexGrow: 1,\n    width: '100%',\n    height: '100%',\n  },\n  tabs: {\n    borderRight: `1px solid ${theme.palette.divider}`,\n    flexShrink: 0,\n  },\n  tabContents: {\n    flexGrow: 1,\n    overflowX: 'auto',\n  },\n  title: {\n    color: theme.palette.text.primary,\n    wordBreak: 'break-word',\n    fontSize: theme.typography.h3.fontSize,\n    marginBottom: 0,\n  },\n  type: {\n    textTransform: 'uppercase',\n    fontSize: 11,\n    opacity: 0.8,\n    marginBottom: theme.spacing(1),\n    color: theme.palette.text.primary,\n  },\n}));\n\nfunction TabPanel(props: {\n  children?: ReactNode;\n  index: number;\n  value: number;\n}) {\n  const { children, value, index, ...other } = props;\n  const classes = useStyles();\n  return (\n    <div\n      role=\"tabpanel\"\n      hidden={value !== index}\n      id={`vertical-tabpanel-${index}`}\n      aria-labelledby={`vertical-tab-${index}`}\n      className={classes.tabContents}\n      {...other}\n    >\n      {value === index && (\n        <Box pl={3} pr={3}>\n          {children}\n        </Box>\n      )}\n    </div>\n  );\n}\n\nfunction a11yProps(index: number) {\n  return {\n    id: `vertical-tab-${index}`,\n    'aria-controls': `vertical-tabpanel-${index}`,\n  };\n}\n\n/**\n * A dialog that lets users inspect the API definition.\n *\n * @public\n */\nexport function ApiDefinitionDialog(props: {\n  open: boolean;\n  entity: ApiEntity;\n  onClose: () => void;\n}) {\n  const { open, entity, onClose } = props;\n  const [activeTab, setActiveTab] = useState(0);\n  const classes = useStyles();\n  const { t } = useTranslationRef(apiDocsTranslationRef);\n\n  useEffect(() => {\n    setActiveTab(0);\n  }, [open]);\n\n  const config = useApi(apiDocsConfigRef);\n  const definitionWidget = config.getApiDefinitionWidget(entity);\n\n  let tabIndex = 0;\n  let tabPanelIndex = 0;\n\n  return (\n    <Dialog\n      fullWidth\n      maxWidth=\"xl\"\n      open={open}\n      onClose={onClose}\n      aria-labelledby=\"api-definition-dialog-title\"\n      PaperProps={{ className: classes.fullHeightDialog }}\n    >\n      <DialogTitle id=\"api-definition-dialog-title\" disableTypography>\n        <Typography className={classes.type}>\n          API - {definitionWidget?.title ?? 'Raw'}\n        </Typography>\n        <Typography className={classes.title} variant=\"h1\">\n          {entity.metadata.title ?? entity.metadata.name}\n        </Typography>\n      </DialogTitle>\n      <DialogContent dividers className={classes.root}>\n        <Tabs\n          orientation=\"vertical\"\n          variant=\"scrollable\"\n          value={activeTab}\n          onChange={(_, newValue) => setActiveTab(newValue)}\n          aria-label={t('apiDefinitionDialog.tabsAriaLabel')}\n          className={classes.tabs}\n        >\n          {definitionWidget ? (\n            <Tab label={definitionWidget.title} {...a11yProps(tabIndex++)} />\n          ) : null}\n          <Tab label=\"Raw\" {...a11yProps(tabIndex++)} />\n        </Tabs>\n\n        {definitionWidget ? (\n          <TabPanel value={activeTab} index={tabPanelIndex++}>\n            {definitionWidget.component(entity.spec.definition)}\n          </TabPanel>\n        ) : null}\n        <TabPanel value={activeTab} index={tabPanelIndex++}>\n          <PlainApiDefinitionWidget\n            definition={entity.spec.definition}\n            language={definitionWidget?.rawLanguage ?? entity.spec.type}\n          />\n        </TabPanel>\n      </DialogContent>\n      <DialogActions>\n        <Button onClick={onClose} color=\"primary\">\n          {t('apiDefinitionDialog.closeButtonTitle')}\n        </Button>\n      </DialogActions>\n    </Dialog>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/ApiExplorerPage/ApiExplorerPage.esm.js

@@ -1,10 +1,10 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { useOutlet } from 'react-router-dom';
 import { DefaultApiExplorerPage } from './DefaultApiExplorerPage.esm.js';
 
 const ApiExplorerPage = (props) => {
   const outlet = useOutlet();
-  return outlet || /* @__PURE__ */ React.createElement(DefaultApiExplorerPage, { ...props });
+  return outlet || /* @__PURE__ */ jsx(DefaultApiExplorerPage, { ...props });
 };
 
 export { ApiExplorerPage };

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

@@ -1 +1 @@
-{"version":3,"file":"ApiExplorerPage.esm.js","sources":["../../../src/components/ApiExplorerPage/ApiExplorerPage.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 { useOutlet } from 'react-router-dom';\nimport {\n  DefaultApiExplorerPage,\n  DefaultApiExplorerPageProps,\n} from './DefaultApiExplorerPage';\n\n/**\n * ApiExplorerPage\n * @public\n */\nexport const ApiExplorerPage = (props: DefaultApiExplorerPageProps) => {\n  const outlet = useOutlet();\n\n  return outlet || <DefaultApiExplorerPage {...props} />;\n};\n"],"names":[],"mappings":";;;;AA2Ba,MAAA,eAAA,GAAkB,CAAC,KAAuC,KAAA;AACrE,EAAA,MAAM,SAAS,SAAU,EAAA;AAEzB,EAAA,OAAO,MAAU,oBAAA,KAAA,CAAA,aAAA,CAAC,sBAAwB,EAAA,EAAA,GAAG,KAAO,EAAA,CAAA;AACtD;;;;"}
+{"version":3,"file":"ApiExplorerPage.esm.js","sources":["../../../src/components/ApiExplorerPage/ApiExplorerPage.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 { useOutlet } from 'react-router-dom';\nimport {\n  DefaultApiExplorerPage,\n  DefaultApiExplorerPageProps,\n} from './DefaultApiExplorerPage';\n\n/**\n * ApiExplorerPage\n * @public\n */\nexport const ApiExplorerPage = (props: DefaultApiExplorerPageProps) => {\n  const outlet = useOutlet();\n\n  return outlet || <DefaultApiExplorerPage {...props} />;\n};\n"],"names":[],"mappings":";;;;AA0Ba,MAAA,eAAA,GAAkB,CAAC,KAAuC,KAAA;AACrE,EAAA,MAAM,SAAS,SAAU,EAAA;AAEzB,EAAA,OAAO,MAAU,oBAAA,GAAA,CAAC,sBAAwB,EAAA,EAAA,GAAG,KAAO,EAAA,CAAA;AACtD;;;;"}

package/dist/components/ApiExplorerPage/DefaultApiExplorerPage.esm.js

@@ -1,11 +1,13 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { PageWithHeader, Content, ContentHeader, CreateButton, SupportButton } from '@backstage/core-components';
 import { useApi, configApiRef, useRouteRef } from '@backstage/core-plugin-api';
 import { CatalogTable } from '@backstage/plugin-catalog';
 import { EntityListProvider, CatalogFilterLayout, EntityKindPicker, EntityTypePicker, UserListPicker, EntityOwnerPicker, EntityLifecyclePicker, EntityTagPicker } from '@backstage/plugin-catalog-react';
-import React from 'react';
 import { registerComponentRouteRef } from '../../routes.esm.js';
 import { usePermission } from '@backstage/plugin-permission-react';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { apiDocsTranslationRef } from '../../translation.esm.js';
 
 const defaultColumns = [
   CatalogTable.columns.createTitleColumn({ hidden: true }),
@@ -26,32 +28,51 @@ const DefaultApiExplorerPage = (props) => {
     pagination
   } = props;
   const configApi = useApi(configApiRef);
-  const generatedSubtitle = `${configApi.getOptionalString("organization.name") ?? "Backstage"} API Explorer`;
+  const { t } = useTranslationRef(apiDocsTranslationRef);
+  const generatedSubtitle = t("defaultApiExplorerPage.subtitle", {
+    orgName: configApi.getOptionalString("organization.name") ?? "Backstage"
+  });
   const registerComponentLink = useRouteRef(registerComponentRouteRef);
   const { allowed } = usePermission({
     permission: catalogEntityCreatePermission
   });
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     PageWithHeader,
     {
       themeId: "apis",
-      title: "APIs",
+      title: t("defaultApiExplorerPage.title"),
       subtitle: generatedSubtitle,
-      pageTitleOverride: "APIs"
-    },
-    /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(ContentHeader, { title: "" }, allowed && /* @__PURE__ */ React.createElement(
-      CreateButton,
-      {
-        title: "Register Existing API",
-        to: registerComponentLink?.()
-      }
-    ), /* @__PURE__ */ React.createElement(SupportButton, null, "All your APIs")), /* @__PURE__ */ React.createElement(EntityListProvider, { pagination }, /* @__PURE__ */ React.createElement(CatalogFilterLayout, null, /* @__PURE__ */ React.createElement(CatalogFilterLayout.Filters, null, /* @__PURE__ */ React.createElement(EntityKindPicker, { initialFilter: "api", hidden: true }), /* @__PURE__ */ React.createElement(EntityTypePicker, null), /* @__PURE__ */ React.createElement(UserListPicker, { initialFilter: initiallySelectedFilter }), /* @__PURE__ */ React.createElement(EntityOwnerPicker, { mode: ownerPickerMode }), /* @__PURE__ */ React.createElement(EntityLifecyclePicker, null), /* @__PURE__ */ React.createElement(EntityTagPicker, null)), /* @__PURE__ */ React.createElement(CatalogFilterLayout.Content, null, /* @__PURE__ */ React.createElement(
-      CatalogTable,
-      {
-        columns: columns || defaultColumns,
-        actions
-      }
-    )))))
+      pageTitleOverride: t("defaultApiExplorerPage.pageTitleOverride"),
+      children: /* @__PURE__ */ jsxs(Content, { children: [
+        /* @__PURE__ */ jsxs(ContentHeader, { title: "", children: [
+          allowed && /* @__PURE__ */ jsx(
+            CreateButton,
+            {
+              title: t("defaultApiExplorerPage.createButtonTitle"),
+              to: registerComponentLink?.()
+            }
+          ),
+          /* @__PURE__ */ jsx(SupportButton, { children: t("defaultApiExplorerPage.supportButtonTitle") })
+        ] }),
+        /* @__PURE__ */ jsx(EntityListProvider, { pagination, children: /* @__PURE__ */ jsxs(CatalogFilterLayout, { children: [
+          /* @__PURE__ */ jsxs(CatalogFilterLayout.Filters, { children: [
+            /* @__PURE__ */ jsx(EntityKindPicker, { initialFilter: "api", hidden: true }),
+            /* @__PURE__ */ jsx(EntityTypePicker, {}),
+            /* @__PURE__ */ jsx(UserListPicker, { initialFilter: initiallySelectedFilter }),
+            /* @__PURE__ */ jsx(EntityOwnerPicker, { mode: ownerPickerMode }),
+            /* @__PURE__ */ jsx(EntityLifecyclePicker, {}),
+            /* @__PURE__ */ jsx(EntityTagPicker, {})
+          ] }),
+          /* @__PURE__ */ jsx(CatalogFilterLayout.Content, { children: /* @__PURE__ */ jsx(
+            CatalogTable,
+            {
+              columns: columns || defaultColumns,
+              actions
+            }
+          ) })
+        ] }) })
+      ] })
+    }
   );
 };
 

package/dist/components/ApiExplorerPage/DefaultApiExplorerPage.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultApiExplorerPage.esm.js","sources":["../../../src/components/ApiExplorerPage/DefaultApiExplorerPage.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 {\n  Content,\n  ContentHeader,\n  CreateButton,\n  PageWithHeader,\n  SupportButton,\n  TableColumn,\n  TableProps,\n} from '@backstage/core-components';\nimport { configApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';\nimport { CatalogTable, CatalogTableRow } from '@backstage/plugin-catalog';\nimport {\n  EntityKindPicker,\n  EntityLifecyclePicker,\n  EntityListProvider,\n  EntityListPagination,\n  EntityOwnerPicker,\n  EntityTagPicker,\n  EntityTypePicker,\n  UserListFilterKind,\n  UserListPicker,\n  CatalogFilterLayout,\n  EntityOwnerPickerProps,\n} from '@backstage/plugin-catalog-react';\nimport React from 'react';\nimport { registerComponentRouteRef } from '../../routes';\nimport { usePermission } from '@backstage/plugin-permission-react';\nimport { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';\n\nconst defaultColumns: TableColumn<CatalogTableRow>[] = [\n  CatalogTable.columns.createTitleColumn({ hidden: true }),\n  CatalogTable.columns.createNameColumn({ defaultKind: 'API' }),\n  CatalogTable.columns.createSystemColumn(),\n  CatalogTable.columns.createOwnerColumn(),\n  CatalogTable.columns.createSpecTypeColumn(),\n  CatalogTable.columns.createSpecLifecycleColumn(),\n  CatalogTable.columns.createMetadataDescriptionColumn(),\n  CatalogTable.columns.createTagsColumn(),\n];\n\n/**\n * DefaultApiExplorerPageProps\n * @public\n */\nexport type DefaultApiExplorerPageProps = {\n  initiallySelectedFilter?: UserListFilterKind;\n  columns?: TableColumn<CatalogTableRow>[];\n  actions?: TableProps<CatalogTableRow>['actions'];\n  ownerPickerMode?: EntityOwnerPickerProps['mode'];\n  pagination?: EntityListPagination;\n};\n\n/**\n * DefaultApiExplorerPage\n * @public\n */\nexport const DefaultApiExplorerPage = (props: DefaultApiExplorerPageProps) => {\n  const {\n    initiallySelectedFilter = 'all',\n    columns,\n    actions,\n    ownerPickerMode,\n    pagination,\n  } = props;\n\n  const configApi = useApi(configApiRef);\n  const generatedSubtitle = `${\n    configApi.getOptionalString('organization.name') ?? 'Backstage'\n  } API Explorer`;\n  const registerComponentLink = useRouteRef(registerComponentRouteRef);\n  const { allowed } = usePermission({\n    permission: catalogEntityCreatePermission,\n  });\n\n  return (\n    <PageWithHeader\n      themeId=\"apis\"\n      title=\"APIs\"\n      subtitle={generatedSubtitle}\n      pageTitleOverride=\"APIs\"\n    >\n      <Content>\n        <ContentHeader title=\"\">\n          {allowed && (\n            <CreateButton\n              title=\"Register Existing API\"\n              to={registerComponentLink?.()}\n            />\n          )}\n          <SupportButton>All your APIs</SupportButton>\n        </ContentHeader>\n        <EntityListProvider pagination={pagination}>\n          <CatalogFilterLayout>\n            <CatalogFilterLayout.Filters>\n              <EntityKindPicker initialFilter=\"api\" hidden />\n              <EntityTypePicker />\n              <UserListPicker initialFilter={initiallySelectedFilter} />\n              <EntityOwnerPicker mode={ownerPickerMode} />\n              <EntityLifecyclePicker />\n              <EntityTagPicker />\n            </CatalogFilterLayout.Filters>\n            <CatalogFilterLayout.Content>\n              <CatalogTable\n                columns={columns || defaultColumns}\n                actions={actions}\n              />\n            </CatalogFilterLayout.Content>\n          </CatalogFilterLayout>\n        </EntityListProvider>\n      </Content>\n    </PageWithHeader>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AA6CA,MAAM,cAAiD,GAAA;AAAA,EACrD,aAAa,OAAQ,CAAA,iBAAA,CAAkB,EAAE,MAAA,EAAQ,MAAM,CAAA;AAAA,EACvD,aAAa,OAAQ,CAAA,gBAAA,CAAiB,EAAE,WAAA,EAAa,OAAO,CAAA;AAAA,EAC5D,YAAA,CAAa,QAAQ,kBAAmB,EAAA;AAAA,EACxC,YAAA,CAAa,QAAQ,iBAAkB,EAAA;AAAA,EACvC,YAAA,CAAa,QAAQ,oBAAqB,EAAA;AAAA,EAC1C,YAAA,CAAa,QAAQ,yBAA0B,EAAA;AAAA,EAC/C,YAAA,CAAa,QAAQ,+BAAgC,EAAA;AAAA,EACrD,YAAA,CAAa,QAAQ,gBAAiB;AACxC,CAAA;AAkBa,MAAA,sBAAA,GAAyB,CAAC,KAAuC,KAAA;AAC5E,EAAM,MAAA;AAAA,IACJ,uBAA0B,GAAA,KAAA;AAAA,IAC1B,OAAA;AAAA,IACA,OAAA;AAAA,IACA,eAAA;AAAA,IACA;AAAA,GACE,GAAA,KAAA;AAEJ,EAAM,MAAA,SAAA,GAAY,OAAO,YAAY,CAAA;AACrC,EAAA,MAAM,oBAAoB,CACxB,EAAA,SAAA,CAAU,iBAAkB,CAAA,mBAAmB,KAAK,WACtD,CAAA,aAAA,CAAA;AACA,EAAM,MAAA,qBAAA,GAAwB,YAAY,yBAAyB,CAAA;AACnE,EAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,aAAc,CAAA;AAAA,IAChC,UAAY,EAAA;AAAA,GACb,CAAA;AAED,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,MAAA;AAAA,MACR,KAAM,EAAA,MAAA;AAAA,MACN,QAAU,EAAA,iBAAA;AAAA,MACV,iBAAkB,EAAA;AAAA,KAAA;AAAA,wCAEjB,OACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,aAAc,EAAA,EAAA,KAAA,EAAM,MAClB,OACC,oBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,KAAM,EAAA,uBAAA;AAAA,QACN,IAAI,qBAAwB;AAAA;AAAA,KAC9B,sCAED,aAAc,EAAA,IAAA,EAAA,eAAa,CAC9B,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,sBAAmB,UAClB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,2CACE,KAAA,CAAA,aAAA,CAAA,mBAAA,CAAoB,SAApB,IACC,kBAAA,KAAA,CAAA,aAAA,CAAC,oBAAiB,aAAc,EAAA,KAAA,EAAM,QAAM,IAAC,EAAA,CAAA,sCAC5C,gBAAiB,EAAA,IAAA,CAAA,sCACjB,cAAe,EAAA,EAAA,aAAA,EAAe,yBAAyB,CACxD,kBAAA,KAAA,CAAA,aAAA,CAAC,qBAAkB,IAAM,EAAA,eAAA,EAAiB,mBACzC,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA,IAAsB,mBACtB,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA,IAAgB,CACnB,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,mBAAoB,CAAA,OAAA,EAApB,IACC,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,SAAS,OAAW,IAAA,cAAA;AAAA,QACpB;AAAA;AAAA,KAEJ,CACF,CACF,CACF;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"DefaultApiExplorerPage.esm.js","sources":["../../../src/components/ApiExplorerPage/DefaultApiExplorerPage.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 {\n  Content,\n  ContentHeader,\n  CreateButton,\n  PageWithHeader,\n  SupportButton,\n  TableColumn,\n  TableProps,\n} from '@backstage/core-components';\nimport { configApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';\nimport { CatalogTable, CatalogTableRow } from '@backstage/plugin-catalog';\nimport {\n  EntityKindPicker,\n  EntityLifecyclePicker,\n  EntityListProvider,\n  EntityListPagination,\n  EntityOwnerPicker,\n  EntityTagPicker,\n  EntityTypePicker,\n  UserListFilterKind,\n  UserListPicker,\n  CatalogFilterLayout,\n  EntityOwnerPickerProps,\n} from '@backstage/plugin-catalog-react';\nimport { registerComponentRouteRef } from '../../routes';\nimport { usePermission } from '@backstage/plugin-permission-react';\nimport { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { apiDocsTranslationRef } from '../../translation';\n\nconst defaultColumns: TableColumn<CatalogTableRow>[] = [\n  CatalogTable.columns.createTitleColumn({ hidden: true }),\n  CatalogTable.columns.createNameColumn({ defaultKind: 'API' }),\n  CatalogTable.columns.createSystemColumn(),\n  CatalogTable.columns.createOwnerColumn(),\n  CatalogTable.columns.createSpecTypeColumn(),\n  CatalogTable.columns.createSpecLifecycleColumn(),\n  CatalogTable.columns.createMetadataDescriptionColumn(),\n  CatalogTable.columns.createTagsColumn(),\n];\n\n/**\n * DefaultApiExplorerPageProps\n * @public\n */\nexport type DefaultApiExplorerPageProps = {\n  initiallySelectedFilter?: UserListFilterKind;\n  columns?: TableColumn<CatalogTableRow>[];\n  actions?: TableProps<CatalogTableRow>['actions'];\n  ownerPickerMode?: EntityOwnerPickerProps['mode'];\n  pagination?: EntityListPagination;\n};\n\n/**\n * DefaultApiExplorerPage\n * @public\n */\nexport const DefaultApiExplorerPage = (props: DefaultApiExplorerPageProps) => {\n  const {\n    initiallySelectedFilter = 'all',\n    columns,\n    actions,\n    ownerPickerMode,\n    pagination,\n  } = props;\n\n  const configApi = useApi(configApiRef);\n  const { t } = useTranslationRef(apiDocsTranslationRef);\n  const generatedSubtitle = t('defaultApiExplorerPage.subtitle', {\n    orgName: configApi.getOptionalString('organization.name') ?? 'Backstage',\n  });\n  const registerComponentLink = useRouteRef(registerComponentRouteRef);\n  const { allowed } = usePermission({\n    permission: catalogEntityCreatePermission,\n  });\n\n  return (\n    <PageWithHeader\n      themeId=\"apis\"\n      title={t('defaultApiExplorerPage.title')}\n      subtitle={generatedSubtitle}\n      pageTitleOverride={t('defaultApiExplorerPage.pageTitleOverride')}\n    >\n      <Content>\n        <ContentHeader title=\"\">\n          {allowed && (\n            <CreateButton\n              title={t('defaultApiExplorerPage.createButtonTitle')}\n              to={registerComponentLink?.()}\n            />\n          )}\n          <SupportButton>\n            {t('defaultApiExplorerPage.supportButtonTitle')}\n          </SupportButton>\n        </ContentHeader>\n        <EntityListProvider pagination={pagination}>\n          <CatalogFilterLayout>\n            <CatalogFilterLayout.Filters>\n              <EntityKindPicker initialFilter=\"api\" hidden />\n              <EntityTypePicker />\n              <UserListPicker initialFilter={initiallySelectedFilter} />\n              <EntityOwnerPicker mode={ownerPickerMode} />\n              <EntityLifecyclePicker />\n              <EntityTagPicker />\n            </CatalogFilterLayout.Filters>\n            <CatalogFilterLayout.Content>\n              <CatalogTable\n                columns={columns || defaultColumns}\n                actions={actions}\n              />\n            </CatalogFilterLayout.Content>\n          </CatalogFilterLayout>\n        </EntityListProvider>\n      </Content>\n    </PageWithHeader>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AA8CA,MAAM,cAAiD,GAAA;AAAA,EACrD,aAAa,OAAQ,CAAA,iBAAA,CAAkB,EAAE,MAAA,EAAQ,MAAM,CAAA;AAAA,EACvD,aAAa,OAAQ,CAAA,gBAAA,CAAiB,EAAE,WAAA,EAAa,OAAO,CAAA;AAAA,EAC5D,YAAA,CAAa,QAAQ,kBAAmB,EAAA;AAAA,EACxC,YAAA,CAAa,QAAQ,iBAAkB,EAAA;AAAA,EACvC,YAAA,CAAa,QAAQ,oBAAqB,EAAA;AAAA,EAC1C,YAAA,CAAa,QAAQ,yBAA0B,EAAA;AAAA,EAC/C,YAAA,CAAa,QAAQ,+BAAgC,EAAA;AAAA,EACrD,YAAA,CAAa,QAAQ,gBAAiB;AACxC,CAAA;AAkBa,MAAA,sBAAA,GAAyB,CAAC,KAAuC,KAAA;AAC5E,EAAM,MAAA;AAAA,IACJ,uBAA0B,GAAA,KAAA;AAAA,IAC1B,OAAA;AAAA,IACA,OAAA;AAAA,IACA,eAAA;AAAA,IACA;AAAA,GACE,GAAA,KAAA;AAEJ,EAAM,MAAA,SAAA,GAAY,OAAO,YAAY,CAAA;AACrC,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,qBAAqB,CAAA;AACrD,EAAM,MAAA,iBAAA,GAAoB,EAAE,iCAAmC,EAAA;AAAA,IAC7D,OAAS,EAAA,SAAA,CAAU,iBAAkB,CAAA,mBAAmB,CAAK,IAAA;AAAA,GAC9D,CAAA;AACD,EAAM,MAAA,qBAAA,GAAwB,YAAY,yBAAyB,CAAA;AACnE,EAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,aAAc,CAAA;AAAA,IAChC,UAAY,EAAA;AAAA,GACb,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,MAAA;AAAA,MACR,KAAA,EAAO,EAAE,8BAA8B,CAAA;AAAA,MACvC,QAAU,EAAA,iBAAA;AAAA,MACV,iBAAA,EAAmB,EAAE,0CAA0C,CAAA;AAAA,MAE/D,+BAAC,OACC,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAC,IAAA,CAAA,aAAA,EAAA,EAAc,OAAM,EAClB,EAAA,QAAA,EAAA;AAAA,UACC,OAAA,oBAAA,GAAA;AAAA,YAAC,YAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAO,EAAE,0CAA0C,CAAA;AAAA,cACnD,IAAI,qBAAwB;AAAA;AAAA,WAC9B;AAAA,0BAED,GAAA,CAAA,aAAA,EAAA,EACE,QAAE,EAAA,CAAA,CAAA,2CAA2C,CAChD,EAAA;AAAA,SACF,EAAA,CAAA;AAAA,wBACC,GAAA,CAAA,kBAAA,EAAA,EAAmB,UAClB,EAAA,QAAA,kBAAA,IAAA,CAAC,mBACC,EAAA,EAAA,QAAA,EAAA;AAAA,0BAAC,IAAA,CAAA,mBAAA,CAAoB,SAApB,EACC,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,gBAAiB,EAAA,EAAA,aAAA,EAAc,KAAM,EAAA,MAAA,EAAM,IAAC,EAAA,CAAA;AAAA,gCAC5C,gBAAiB,EAAA,EAAA,CAAA;AAAA,4BAClB,GAAA,CAAC,cAAe,EAAA,EAAA,aAAA,EAAe,uBAAyB,EAAA,CAAA;AAAA,4BACxD,GAAA,CAAC,iBAAkB,EAAA,EAAA,IAAA,EAAM,eAAiB,EAAA,CAAA;AAAA,gCACzC,qBAAsB,EAAA,EAAA,CAAA;AAAA,gCACtB,eAAgB,EAAA,EAAA;AAAA,WACnB,EAAA,CAAA;AAAA,0BACA,GAAA,CAAC,mBAAoB,CAAA,OAAA,EAApB,EACC,QAAA,kBAAA,GAAA;AAAA,YAAC,YAAA;AAAA,YAAA;AAAA,cACC,SAAS,OAAW,IAAA,cAAA;AAAA,cACpB;AAAA;AAAA,WAEJ,EAAA;AAAA,SAAA,EACF,CACF,EAAA;AAAA,OACF,EAAA;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/components/ApisCards/ConsumedApisCard.esm.js

@@ -1,15 +1,18 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { RELATION_CONSUMES_API } from '@backstage/catalog-model';
 import Typography from '@material-ui/core/Typography';
 import { useEntity, useRelatedEntities, EntityTable } from '@backstage/plugin-catalog-react';
-import React from 'react';
-import { apiEntityColumns } from './presets.esm.js';
+import { getApiEntityColumns } from './presets.esm.js';
 import { InfoCard, Progress, WarningPanel, CodeSnippet, Link } from '@backstage/core-components';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { apiDocsTranslationRef } from '../../translation.esm.js';
 
 const ConsumedApisCard = (props) => {
+  const { t } = useTranslationRef(apiDocsTranslationRef);
   const {
     variant = "gridItem",
-    title = "Consumed APIs",
-    columns = apiEntityColumns,
+    title = t("consumedApisCard.title"),
+    columns = getApiEntityColumns(t),
     tableOptions = {}
   } = props;
   const { entity } = useEntity();
@@ -17,31 +20,36 @@ const ConsumedApisCard = (props) => {
     type: RELATION_CONSUMES_API
   });
   if (loading) {
-    return /* @__PURE__ */ React.createElement(InfoCard, { variant, title }, /* @__PURE__ */ React.createElement(Progress, null));
+    return /* @__PURE__ */ jsx(InfoCard, { variant, title, children: /* @__PURE__ */ jsx(Progress, {}) });
   }
   if (error || !entities) {
-    return /* @__PURE__ */ React.createElement(InfoCard, { variant, title }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(InfoCard, { variant, title, children: /* @__PURE__ */ jsx(
       WarningPanel,
       {
         severity: "error",
-        title: "Could not load APIs",
-        message: /* @__PURE__ */ React.createElement(CodeSnippet, { text: `${error}`, language: "text" })
+        title: t("consumedApisCard.error.title"),
+        message: /* @__PURE__ */ jsx(CodeSnippet, { text: `${error}`, language: "text" })
       }
-    ));
+    ) });
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     EntityTable,
     {
       title,
       variant,
-      emptyContent: /* @__PURE__ */ React.createElement("div", { style: { textAlign: "center" } }, /* @__PURE__ */ React.createElement(Typography, { variant: "body1" }, "This ", entity.kind.toLocaleLowerCase("en-US"), " does not consume any APIs."), /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, /* @__PURE__ */ React.createElement(
-        Link,
-        {
-          to: "https://backstage.io/docs/features/software-catalog/descriptor-format#specconsumesapis-optional",
-          externalLinkIcon: true
-        },
-        "Learn how to change this"
-      ))),
+      emptyContent: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body1", children: t("consumedApisCard.emptyContent.title", {
+          entity: entity.kind.toLocaleLowerCase("en-US")
+        }) }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", children: /* @__PURE__ */ jsx(
+          Link,
+          {
+            to: "https://backstage.io/docs/features/software-catalog/descriptor-format#specconsumesapis-optional",
+            externalLinkIcon: true,
+            children: t("apisCardHelpLinkTitle")
+          }
+        ) })
+      ] }),
       columns,
       tableOptions,
       entities

package/dist/components/ApisCards/ConsumedApisCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConsumedApisCard.esm.js","sources":["../../../src/components/ApisCards/ConsumedApisCard.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { ApiEntity, RELATION_CONSUMES_API } from '@backstage/catalog-model';\nimport Typography from '@material-ui/core/Typography';\nimport {\n  EntityTable,\n  useEntity,\n  useRelatedEntities,\n} from '@backstage/plugin-catalog-react';\nimport React from 'react';\nimport { apiEntityColumns } from './presets';\nimport {\n  CodeSnippet,\n  InfoCard,\n  InfoCardVariants,\n  Link,\n  Progress,\n  TableColumn,\n  TableOptions,\n  WarningPanel,\n} from '@backstage/core-components';\n\n/**\n * @public\n */\nexport const ConsumedApisCard = (props: {\n  variant?: InfoCardVariants;\n  title?: string;\n  columns?: TableColumn<ApiEntity>[];\n  tableOptions?: TableOptions;\n}) => {\n  const {\n    variant = 'gridItem',\n    title = 'Consumed APIs',\n    columns = apiEntityColumns,\n    tableOptions = {},\n  } = props;\n  const { entity } = useEntity();\n  const { entities, loading, error } = useRelatedEntities(entity, {\n    type: RELATION_CONSUMES_API,\n  });\n\n  if (loading) {\n    return (\n      <InfoCard variant={variant} title={title}>\n        <Progress />\n      </InfoCard>\n    );\n  }\n\n  if (error || !entities) {\n    return (\n      <InfoCard variant={variant} title={title}>\n        <WarningPanel\n          severity=\"error\"\n          title=\"Could not load APIs\"\n          message={<CodeSnippet text={`${error}`} language=\"text\" />}\n        />\n      </InfoCard>\n    );\n  }\n\n  return (\n    <EntityTable\n      title={title}\n      variant={variant}\n      emptyContent={\n        <div style={{ textAlign: 'center' }}>\n          <Typography variant=\"body1\">\n            This {entity.kind.toLocaleLowerCase('en-US')} does not consume any\n            APIs.\n          </Typography>\n          <Typography variant=\"body2\">\n            <Link\n              to=\"https://backstage.io/docs/features/software-catalog/descriptor-format#specconsumesapis-optional\"\n              externalLinkIcon\n            >\n              Learn how to change this\n            </Link>\n          </Typography>\n        </div>\n      }\n      columns={columns}\n      tableOptions={tableOptions}\n      entities={entities as ApiEntity[]}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAuCa,MAAA,gBAAA,GAAmB,CAAC,KAK3B,KAAA;AACJ,EAAM,MAAA;AAAA,IACJ,OAAU,GAAA,UAAA;AAAA,IACV,KAAQ,GAAA,eAAA;AAAA,IACR,OAAU,GAAA,gBAAA;AAAA,IACV,eAAe;AAAC,GACd,GAAA,KAAA;AACJ,EAAM,MAAA,EAAE,MAAO,EAAA,GAAI,SAAU,EAAA;AAC7B,EAAA,MAAM,EAAE,QAAU,EAAA,OAAA,EAAS,KAAM,EAAA,GAAI,mBAAmB,MAAQ,EAAA;AAAA,IAC9D,IAAM,EAAA;AAAA,GACP,CAAA;AAED,EAAA,IAAI,OAAS,EAAA;AACX,IAAA,2CACG,QAAS,EAAA,EAAA,OAAA,EAAkB,KAC1B,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAS,CACZ,CAAA;AAAA;AAIJ,EAAI,IAAA,KAAA,IAAS,CAAC,QAAU,EAAA;AACtB,IACE,uBAAA,KAAA,CAAA,aAAA,CAAC,QAAS,EAAA,EAAA,OAAA,EAAkB,KAC1B,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,QAAS,EAAA,OAAA;AAAA,QACT,KAAM,EAAA,qBAAA;AAAA,QACN,OAAA,sCAAU,WAAY,EAAA,EAAA,IAAA,EAAM,GAAG,KAAK,CAAA,CAAA,EAAI,UAAS,MAAO,EAAA;AAAA;AAAA,KAE5D,CAAA;AAAA;AAIJ,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,OAAA;AAAA,MACA,YAAA,sCACG,KAAI,EAAA,EAAA,KAAA,EAAO,EAAE,SAAW,EAAA,QAAA,EACvB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,WAAQ,OACpB,EAAA,MAAA,CAAO,IAAK,CAAA,iBAAA,CAAkB,OAAO,CAAA,EAAE,6BAE/C,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,OAClB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,EAAG,EAAA,iGAAA;AAAA,UACH,gBAAgB,EAAA;AAAA,SAAA;AAAA,QACjB;AAAA,OAGH,CACF,CAAA;AAAA,MAEF,OAAA;AAAA,MACA,YAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"ConsumedApisCard.esm.js","sources":["../../../src/components/ApisCards/ConsumedApisCard.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { ApiEntity, RELATION_CONSUMES_API } from '@backstage/catalog-model';\nimport Typography from '@material-ui/core/Typography';\nimport {\n  EntityTable,\n  useEntity,\n  useRelatedEntities,\n} from '@backstage/plugin-catalog-react';\nimport { getApiEntityColumns } from './presets';\nimport {\n  CodeSnippet,\n  InfoCard,\n  InfoCardVariants,\n  Link,\n  Progress,\n  TableColumn,\n  TableOptions,\n  WarningPanel,\n} from '@backstage/core-components';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { apiDocsTranslationRef } from '../../translation';\n\n/**\n * @public\n */\nexport const ConsumedApisCard = (props: {\n  variant?: InfoCardVariants;\n  title?: string;\n  columns?: TableColumn<ApiEntity>[];\n  tableOptions?: TableOptions;\n}) => {\n  const { t } = useTranslationRef(apiDocsTranslationRef);\n  const {\n    variant = 'gridItem',\n    title = t('consumedApisCard.title'),\n    columns = getApiEntityColumns(t),\n    tableOptions = {},\n  } = props;\n  const { entity } = useEntity();\n  const { entities, loading, error } = useRelatedEntities(entity, {\n    type: RELATION_CONSUMES_API,\n  });\n\n  if (loading) {\n    return (\n      <InfoCard variant={variant} title={title}>\n        <Progress />\n      </InfoCard>\n    );\n  }\n\n  if (error || !entities) {\n    return (\n      <InfoCard variant={variant} title={title}>\n        <WarningPanel\n          severity=\"error\"\n          title={t('consumedApisCard.error.title')}\n          message={<CodeSnippet text={`${error}`} language=\"text\" />}\n        />\n      </InfoCard>\n    );\n  }\n\n  return (\n    <EntityTable\n      title={title}\n      variant={variant}\n      emptyContent={\n        <div style={{ textAlign: 'center' }}>\n          <Typography variant=\"body1\">\n            {t('consumedApisCard.emptyContent.title', {\n              entity: entity.kind.toLocaleLowerCase('en-US'),\n            })}\n          </Typography>\n          <Typography variant=\"body2\">\n            <Link\n              to=\"https://backstage.io/docs/features/software-catalog/descriptor-format#specconsumesapis-optional\"\n              externalLinkIcon\n            >\n              {t('apisCardHelpLinkTitle')}\n            </Link>\n          </Typography>\n        </div>\n      }\n      columns={columns}\n      tableOptions={tableOptions}\n      entities={entities as ApiEntity[]}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAwCa,MAAA,gBAAA,GAAmB,CAAC,KAK3B,KAAA;AACJ,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,qBAAqB,CAAA;AACrD,EAAM,MAAA;AAAA,IACJ,OAAU,GAAA,UAAA;AAAA,IACV,KAAA,GAAQ,EAAE,wBAAwB,CAAA;AAAA,IAClC,OAAA,GAAU,oBAAoB,CAAC,CAAA;AAAA,IAC/B,eAAe;AAAC,GACd,GAAA,KAAA;AACJ,EAAM,MAAA,EAAE,MAAO,EAAA,GAAI,SAAU,EAAA;AAC7B,EAAA,MAAM,EAAE,QAAU,EAAA,OAAA,EAAS,KAAM,EAAA,GAAI,mBAAmB,MAAQ,EAAA;AAAA,IAC9D,IAAM,EAAA;AAAA,GACP,CAAA;AAED,EAAA,IAAI,OAAS,EAAA;AACX,IAAA,2BACG,QAAS,EAAA,EAAA,OAAA,EAAkB,KAC1B,EAAA,QAAA,kBAAA,GAAA,CAAC,YAAS,CACZ,EAAA,CAAA;AAAA;AAIJ,EAAI,IAAA,KAAA,IAAS,CAAC,QAAU,EAAA;AACtB,IACE,uBAAA,GAAA,CAAC,QAAS,EAAA,EAAA,OAAA,EAAkB,KAC1B,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,QAAS,EAAA,OAAA;AAAA,QACT,KAAA,EAAO,EAAE,8BAA8B,CAAA;AAAA,QACvC,OAAA,sBAAU,WAAY,EAAA,EAAA,IAAA,EAAM,GAAG,KAAK,CAAA,CAAA,EAAI,UAAS,MAAO,EAAA;AAAA;AAAA,KAE5D,EAAA,CAAA;AAAA;AAIJ,EACE,uBAAA,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,OAAA;AAAA,MACA,8BACG,IAAA,CAAA,KAAA,EAAA,EAAI,OAAO,EAAE,SAAA,EAAW,UACvB,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,OACjB,EAAA,QAAA,EAAA,CAAA,CAAE,qCAAuC,EAAA;AAAA,UACxC,MAAQ,EAAA,MAAA,CAAO,IAAK,CAAA,iBAAA,CAAkB,OAAO;AAAA,SAC9C,CACH,EAAA,CAAA;AAAA,wBACA,GAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,OAClB,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,EAAG,EAAA,iGAAA;AAAA,YACH,gBAAgB,EAAA,IAAA;AAAA,YAEf,YAAE,uBAAuB;AAAA;AAAA,SAE9B,EAAA;AAAA,OACF,EAAA,CAAA;AAAA,MAEF,OAAA;AAAA,MACA,YAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/components/ApisCards/HasApisCard.esm.js

@@ -1,21 +1,27 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { RELATION_HAS_PART } from '@backstage/catalog-model';
 import Typography from '@material-ui/core/Typography';
 import { EntityTable, useEntity, useRelatedEntities } from '@backstage/plugin-catalog-react';
-import React from 'react';
+import { useMemo } from 'react';
 import { createSpecApiTypeColumn } from './presets.esm.js';
 import { InfoCard, Progress, WarningPanel, CodeSnippet, Link } from '@backstage/core-components';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { apiDocsTranslationRef } from '../../translation.esm.js';
 
-const presetColumns = [
-  EntityTable.columns.createEntityRefColumn({ defaultKind: "API" }),
-  EntityTable.columns.createOwnerColumn(),
-  createSpecApiTypeColumn(),
-  EntityTable.columns.createSpecLifecycleColumn(),
-  EntityTable.columns.createMetadataDescriptionColumn()
-];
 const HasApisCard = (props) => {
+  const { t } = useTranslationRef(apiDocsTranslationRef);
+  const presetColumns = useMemo(() => {
+    return [
+      EntityTable.columns.createEntityRefColumn({ defaultKind: "API" }),
+      EntityTable.columns.createOwnerColumn(),
+      createSpecApiTypeColumn(t),
+      EntityTable.columns.createSpecLifecycleColumn(),
+      EntityTable.columns.createMetadataDescriptionColumn()
+    ];
+  }, [t]);
   const {
     variant = "gridItem",
-    title = "APIs",
+    title = t("hasApisCard.title"),
     columns = presetColumns,
     tableOptions = {}
   } = props;
@@ -25,24 +31,29 @@ const HasApisCard = (props) => {
     kind: "API"
   });
   if (loading) {
-    return /* @__PURE__ */ React.createElement(InfoCard, { variant, title }, /* @__PURE__ */ React.createElement(Progress, null));
+    return /* @__PURE__ */ jsx(InfoCard, { variant, title, children: /* @__PURE__ */ jsx(Progress, {}) });
   }
   if (error || !entities) {
-    return /* @__PURE__ */ React.createElement(InfoCard, { variant, title }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(InfoCard, { variant, title, children: /* @__PURE__ */ jsx(
       WarningPanel,
       {
         severity: "error",
-        title: "Could not load APIs",
-        message: /* @__PURE__ */ React.createElement(CodeSnippet, { text: `${error}`, language: "text" })
+        title: t("hasApisCard.error.title"),
+        message: /* @__PURE__ */ jsx(CodeSnippet, { text: `${error}`, language: "text" })
       }
-    ));
+    ) });
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     EntityTable,
     {
       title,
       variant,
-      emptyContent: /* @__PURE__ */ React.createElement("div", { style: { textAlign: "center" } }, /* @__PURE__ */ React.createElement(Typography, { variant: "body1" }, "This ", entity.kind.toLocaleLowerCase("en-US"), " does not contain any APIs."), /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, /* @__PURE__ */ React.createElement(Link, { to: "https://backstage.io/docs/features/software-catalog/descriptor-format#kind-api" }, "Learn how to change this."))),
+      emptyContent: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body1", children: t("hasApisCard.emptyContent.title", {
+          entity: entity.kind.toLocaleLowerCase("en-US")
+        }) }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", children: /* @__PURE__ */ jsx(Link, { to: "https://backstage.io/docs/features/software-catalog/descriptor-format#kind-api", children: t("apisCardHelpLinkTitle") }) })
+      ] }),
       columns,
       tableOptions,
       entities

package/dist/components/ApisCards/HasApisCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"HasApisCard.esm.js","sources":["../../../src/components/ApisCards/HasApisCard.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { ApiEntity, RELATION_HAS_PART } from '@backstage/catalog-model';\nimport Typography from '@material-ui/core/Typography';\nimport {\n  EntityTable,\n  useEntity,\n  useRelatedEntities,\n} from '@backstage/plugin-catalog-react';\nimport React from 'react';\nimport { createSpecApiTypeColumn } from './presets';\nimport {\n  CodeSnippet,\n  InfoCard,\n  InfoCardVariants,\n  Link,\n  Progress,\n  TableColumn,\n  TableOptions,\n  WarningPanel,\n} from '@backstage/core-components';\n\nconst presetColumns: TableColumn<ApiEntity>[] = [\n  EntityTable.columns.createEntityRefColumn({ defaultKind: 'API' }),\n  EntityTable.columns.createOwnerColumn(),\n  createSpecApiTypeColumn(),\n  EntityTable.columns.createSpecLifecycleColumn(),\n  EntityTable.columns.createMetadataDescriptionColumn(),\n];\n\n/**\n * @public\n */\nexport const HasApisCard = (props: {\n  variant?: InfoCardVariants;\n  title?: string;\n  columns?: TableColumn<ApiEntity>[];\n  tableOptions?: TableOptions;\n}) => {\n  const {\n    variant = 'gridItem',\n    title = 'APIs',\n    columns = presetColumns,\n    tableOptions = {},\n  } = props;\n  const { entity } = useEntity();\n  const { entities, loading, error } = useRelatedEntities(entity, {\n    type: RELATION_HAS_PART,\n    kind: 'API',\n  });\n\n  if (loading) {\n    return (\n      <InfoCard variant={variant} title={title}>\n        <Progress />\n      </InfoCard>\n    );\n  }\n\n  if (error || !entities) {\n    return (\n      <InfoCard variant={variant} title={title}>\n        <WarningPanel\n          severity=\"error\"\n          title=\"Could not load APIs\"\n          message={<CodeSnippet text={`${error}`} language=\"text\" />}\n        />\n      </InfoCard>\n    );\n  }\n\n  return (\n    <EntityTable\n      title={title}\n      variant={variant}\n      emptyContent={\n        <div style={{ textAlign: 'center' }}>\n          <Typography variant=\"body1\">\n            This {entity.kind.toLocaleLowerCase('en-US')} does not contain any\n            APIs.\n          </Typography>\n          <Typography variant=\"body2\">\n            <Link to=\"https://backstage.io/docs/features/software-catalog/descriptor-format#kind-api\">\n              Learn how to change this.\n            </Link>\n          </Typography>\n        </div>\n      }\n      columns={columns}\n      tableOptions={tableOptions}\n      entities={entities as ApiEntity[]}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAoCA,MAAM,aAA0C,GAAA;AAAA,EAC9C,YAAY,OAAQ,CAAA,qBAAA,CAAsB,EAAE,WAAA,EAAa,OAAO,CAAA;AAAA,EAChE,WAAA,CAAY,QAAQ,iBAAkB,EAAA;AAAA,EACtC,uBAAwB,EAAA;AAAA,EACxB,WAAA,CAAY,QAAQ,yBAA0B,EAAA;AAAA,EAC9C,WAAA,CAAY,QAAQ,+BAAgC;AACtD,CAAA;AAKa,MAAA,WAAA,GAAc,CAAC,KAKtB,KAAA;AACJ,EAAM,MAAA;AAAA,IACJ,OAAU,GAAA,UAAA;AAAA,IACV,KAAQ,GAAA,MAAA;AAAA,IACR,OAAU,GAAA,aAAA;AAAA,IACV,eAAe;AAAC,GACd,GAAA,KAAA;AACJ,EAAM,MAAA,EAAE,MAAO,EAAA,GAAI,SAAU,EAAA;AAC7B,EAAA,MAAM,EAAE,QAAU,EAAA,OAAA,EAAS,KAAM,EAAA,GAAI,mBAAmB,MAAQ,EAAA;AAAA,IAC9D,IAAM,EAAA,iBAAA;AAAA,IACN,IAAM,EAAA;AAAA,GACP,CAAA;AAED,EAAA,IAAI,OAAS,EAAA;AACX,IAAA,2CACG,QAAS,EAAA,EAAA,OAAA,EAAkB,KAC1B,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAS,CACZ,CAAA;AAAA;AAIJ,EAAI,IAAA,KAAA,IAAS,CAAC,QAAU,EAAA;AACtB,IACE,uBAAA,KAAA,CAAA,aAAA,CAAC,QAAS,EAAA,EAAA,OAAA,EAAkB,KAC1B,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,QAAS,EAAA,OAAA;AAAA,QACT,KAAM,EAAA,qBAAA;AAAA,QACN,OAAA,sCAAU,WAAY,EAAA,EAAA,IAAA,EAAM,GAAG,KAAK,CAAA,CAAA,EAAI,UAAS,MAAO,EAAA;AAAA;AAAA,KAE5D,CAAA;AAAA;AAIJ,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,OAAA;AAAA,MACA,YACE,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,KAAA,EAAO,EAAE,SAAA,EAAW,QAAS,EAAA,EAAA,kBAC/B,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,OAAA,EAAA,EAAQ,SACpB,MAAO,CAAA,IAAA,CAAK,iBAAkB,CAAA,OAAO,CAAE,EAAA,6BAE/C,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,OAClB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,EAAA,EAAG,gFAAiF,EAAA,EAAA,2BAE1F,CACF,CACF,CAAA;AAAA,MAEF,OAAA;AAAA,MACA,YAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"HasApisCard.esm.js","sources":["../../../src/components/ApisCards/HasApisCard.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { ApiEntity, RELATION_HAS_PART } from '@backstage/catalog-model';\nimport Typography from '@material-ui/core/Typography';\nimport {\n  EntityTable,\n  useEntity,\n  useRelatedEntities,\n} from '@backstage/plugin-catalog-react';\nimport { useMemo } from 'react';\nimport { createSpecApiTypeColumn } from './presets';\nimport {\n  CodeSnippet,\n  InfoCard,\n  InfoCardVariants,\n  Link,\n  Progress,\n  TableColumn,\n  TableOptions,\n  WarningPanel,\n} from '@backstage/core-components';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { apiDocsTranslationRef } from '../../translation';\n\n/**\n * @public\n */\nexport const HasApisCard = (props: {\n  variant?: InfoCardVariants;\n  title?: string;\n  columns?: TableColumn<ApiEntity>[];\n  tableOptions?: TableOptions;\n}) => {\n  const { t } = useTranslationRef(apiDocsTranslationRef);\n  const presetColumns: TableColumn<ApiEntity>[] = useMemo(() => {\n    return [\n      EntityTable.columns.createEntityRefColumn({ defaultKind: 'API' }),\n      EntityTable.columns.createOwnerColumn(),\n      createSpecApiTypeColumn(t),\n      EntityTable.columns.createSpecLifecycleColumn(),\n      EntityTable.columns.createMetadataDescriptionColumn(),\n    ];\n  }, [t]);\n  const {\n    variant = 'gridItem',\n    title = t('hasApisCard.title'),\n    columns = presetColumns,\n    tableOptions = {},\n  } = props;\n  const { entity } = useEntity();\n  const { entities, loading, error } = useRelatedEntities(entity, {\n    type: RELATION_HAS_PART,\n    kind: 'API',\n  });\n\n  if (loading) {\n    return (\n      <InfoCard variant={variant} title={title}>\n        <Progress />\n      </InfoCard>\n    );\n  }\n\n  if (error || !entities) {\n    return (\n      <InfoCard variant={variant} title={title}>\n        <WarningPanel\n          severity=\"error\"\n          title={t('hasApisCard.error.title')}\n          message={<CodeSnippet text={`${error}`} language=\"text\" />}\n        />\n      </InfoCard>\n    );\n  }\n\n  return (\n    <EntityTable\n      title={title}\n      variant={variant}\n      emptyContent={\n        <div style={{ textAlign: 'center' }}>\n          <Typography variant=\"body1\">\n            {t('hasApisCard.emptyContent.title', {\n              entity: entity.kind.toLocaleLowerCase('en-US'),\n            })}\n          </Typography>\n          <Typography variant=\"body2\">\n            <Link to=\"https://backstage.io/docs/features/software-catalog/descriptor-format#kind-api\">\n              {t('apisCardHelpLinkTitle')}\n            </Link>\n          </Typography>\n        </div>\n      }\n      columns={columns}\n      tableOptions={tableOptions}\n      entities={entities as ApiEntity[]}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAyCa,MAAA,WAAA,GAAc,CAAC,KAKtB,KAAA;AACJ,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,qBAAqB,CAAA;AACrD,EAAM,MAAA,aAAA,GAA0C,QAAQ,MAAM;AAC5D,IAAO,OAAA;AAAA,MACL,YAAY,OAAQ,CAAA,qBAAA,CAAsB,EAAE,WAAA,EAAa,OAAO,CAAA;AAAA,MAChE,WAAA,CAAY,QAAQ,iBAAkB,EAAA;AAAA,MACtC,wBAAwB,CAAC,CAAA;AAAA,MACzB,WAAA,CAAY,QAAQ,yBAA0B,EAAA;AAAA,MAC9C,WAAA,CAAY,QAAQ,+BAAgC;AAAA,KACtD;AAAA,GACF,EAAG,CAAC,CAAC,CAAC,CAAA;AACN,EAAM,MAAA;AAAA,IACJ,OAAU,GAAA,UAAA;AAAA,IACV,KAAA,GAAQ,EAAE,mBAAmB,CAAA;AAAA,IAC7B,OAAU,GAAA,aAAA;AAAA,IACV,eAAe;AAAC,GACd,GAAA,KAAA;AACJ,EAAM,MAAA,EAAE,MAAO,EAAA,GAAI,SAAU,EAAA;AAC7B,EAAA,MAAM,EAAE,QAAU,EAAA,OAAA,EAAS,KAAM,EAAA,GAAI,mBAAmB,MAAQ,EAAA;AAAA,IAC9D,IAAM,EAAA,iBAAA;AAAA,IACN,IAAM,EAAA;AAAA,GACP,CAAA;AAED,EAAA,IAAI,OAAS,EAAA;AACX,IAAA,2BACG,QAAS,EAAA,EAAA,OAAA,EAAkB,KAC1B,EAAA,QAAA,kBAAA,GAAA,CAAC,YAAS,CACZ,EAAA,CAAA;AAAA;AAIJ,EAAI,IAAA,KAAA,IAAS,CAAC,QAAU,EAAA;AACtB,IACE,uBAAA,GAAA,CAAC,QAAS,EAAA,EAAA,OAAA,EAAkB,KAC1B,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,QAAS,EAAA,OAAA;AAAA,QACT,KAAA,EAAO,EAAE,yBAAyB,CAAA;AAAA,QAClC,OAAA,sBAAU,WAAY,EAAA,EAAA,IAAA,EAAM,GAAG,KAAK,CAAA,CAAA,EAAI,UAAS,MAAO,EAAA;AAAA;AAAA,KAE5D,EAAA,CAAA;AAAA;AAIJ,EACE,uBAAA,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,OAAA;AAAA,MACA,8BACG,IAAA,CAAA,KAAA,EAAA,EAAI,OAAO,EAAE,SAAA,EAAW,UACvB,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,OACjB,EAAA,QAAA,EAAA,CAAA,CAAE,gCAAkC,EAAA;AAAA,UACnC,MAAQ,EAAA,MAAA,CAAO,IAAK,CAAA,iBAAA,CAAkB,OAAO;AAAA,SAC9C,CACH,EAAA,CAAA;AAAA,wBACA,GAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,OAClB,EAAA,QAAA,kBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,EAAA,EAAG,gFACN,EAAA,QAAA,EAAA,CAAA,CAAE,uBAAuB,CAAA,EAC5B,CACF,EAAA;AAAA,OACF,EAAA,CAAA;AAAA,MAEF,OAAA;AAAA,MACA,YAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/components/ApisCards/ProvidedApisCard.esm.js

@@ -1,15 +1,18 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { RELATION_PROVIDES_API } from '@backstage/catalog-model';
 import Typography from '@material-ui/core/Typography';
 import { useEntity, useRelatedEntities, EntityTable } from '@backstage/plugin-catalog-react';
-import React from 'react';
-import { apiEntityColumns } from './presets.esm.js';
+import { getApiEntityColumns } from './presets.esm.js';
 import { InfoCard, Progress, WarningPanel, CodeSnippet, Link } from '@backstage/core-components';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { apiDocsTranslationRef } from '../../translation.esm.js';
 
 const ProvidedApisCard = (props) => {
+  const { t } = useTranslationRef(apiDocsTranslationRef);
   const {
     variant = "gridItem",
-    title = "Provided APIs",
-    columns = apiEntityColumns,
+    title = t("providedApisCard.title"),
+    columns = getApiEntityColumns(t),
     tableOptions = {}
   } = props;
   const { entity } = useEntity();
@@ -17,31 +20,36 @@ const ProvidedApisCard = (props) => {
     type: RELATION_PROVIDES_API
   });
   if (loading) {
-    return /* @__PURE__ */ React.createElement(InfoCard, { variant, title }, /* @__PURE__ */ React.createElement(Progress, null));
+    return /* @__PURE__ */ jsx(InfoCard, { variant, title, children: /* @__PURE__ */ jsx(Progress, {}) });
   }
   if (error || !entities) {
-    return /* @__PURE__ */ React.createElement(InfoCard, { variant, title }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(InfoCard, { variant, title, children: /* @__PURE__ */ jsx(
       WarningPanel,
       {
         severity: "error",
-        title: "Could not load APIs",
-        message: /* @__PURE__ */ React.createElement(CodeSnippet, { text: `${error}`, language: "text" })
+        title: t("providedApisCard.error.title"),
+        message: /* @__PURE__ */ jsx(CodeSnippet, { text: `${error}`, language: "text" })
       }
-    ));
+    ) });
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     EntityTable,
     {
       title,
       variant,
-      emptyContent: /* @__PURE__ */ React.createElement("div", { style: { textAlign: "center" } }, /* @__PURE__ */ React.createElement(Typography, { variant: "body1" }, "This ", entity.kind.toLocaleLowerCase("en-US"), " does not provide any APIs."), /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, /* @__PURE__ */ React.createElement(
-        Link,
-        {
-          to: "https://backstage.io/docs/features/software-catalog/descriptor-format#specprovidesapis-optional",
-          externalLinkIcon: true
-        },
-        "Learn how to change this"
-      ))),
+      emptyContent: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body1", children: t("providedApisCard.emptyContent.title", {
+          entity: entity.kind.toLocaleLowerCase("en-US")
+        }) }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", children: /* @__PURE__ */ jsx(
+          Link,
+          {
+            to: "https://backstage.io/docs/features/software-catalog/descriptor-format#specprovidesapis-optional",
+            externalLinkIcon: true,
+            children: t("apisCardHelpLinkTitle")
+          }
+        ) })
+      ] }),
       columns,
       tableOptions,
       entities