@backstage/plugin-catalog 1.7.2-next.1 → 1.7.2

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @backstage/plugin-catalog
 
+## 1.7.2
+
+### Patch Changes
+
+- cebe24ef1d: Add `EntityLabelsCard` to show the labels for an entity.
+- 5353b4df61: There is now tooltip in the entity context menu
+- Updated dependencies
+  - @backstage/catalog-model@1.1.5
+  - @backstage/catalog-client@1.3.0
+  - @backstage/plugin-catalog-react@1.2.4
+  - @backstage/core-components@0.12.3
+  - @backstage/plugin-search-react@1.4.0
+  - @backstage/core-plugin-api@1.3.0
+  - @backstage/errors@1.1.4
+  - @backstage/integration-react@1.1.9
+  - @backstage/theme@0.2.16
+  - @backstage/types@1.0.2
+  - @backstage/plugin-catalog-common@1.0.10
+  - @backstage/plugin-search-common@1.2.1
+
+## 1.7.2-next.2
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/plugin-search-react@1.4.0-next.2
+  - @backstage/core-plugin-api@1.3.0-next.1
+  - @backstage/catalog-client@1.3.0-next.2
+  - @backstage/plugin-catalog-react@1.2.4-next.2
+  - @backstage/catalog-model@1.1.5-next.1
+  - @backstage/core-components@0.12.3-next.2
+  - @backstage/errors@1.1.4
+  - @backstage/integration-react@1.1.9-next.2
+  - @backstage/theme@0.2.16
+  - @backstage/types@1.0.2
+  - @backstage/plugin-catalog-common@1.0.10-next.1
+  - @backstage/plugin-search-common@1.2.1-next.0
+
 ## 1.7.2-next.1
 
 ### Patch Changes

package/dist/esm/{index-24abea03.esm.js → index-05290c15.esm.js}

@@ -1,11 +1,11 @@
 import ObservableImpl from 'zen-observable';
 import { stringifyEntityRef, RELATION_PART_OF, RELATION_OWNED_BY, getEntitySourceLocation, ANNOTATION_EDIT_URL, DEFAULT_NAMESPACE, ANNOTATION_LOCATION, ANNOTATION_VIEW_URL } from '@backstage/catalog-model';
 import { isArray, isString, capitalize } from 'lodash';
-import { Link, HeaderIconLinkRow, OverflowTooltip, WarningPanel, CodeSnippet, Table, Page, Header, Progress, RoutedTabs, Content, HeaderLabel, ResponseErrorPanel } from '@backstage/core-components';
+import { Link, HeaderIconLinkRow, OverflowTooltip, WarningPanel, CodeSnippet, Table, Page, Header, Progress, RoutedTabs, Content, HeaderLabel, ResponseErrorPanel, InfoCard } from '@backstage/core-components';
 import { createExternalRouteRef, createRouteRef, useElementFilter, useApi, alertApiRef, errorApiRef, useRouteRef, useAnalytics, attachComponentData, useRouteRefParams, useApiHolder, createPlugin, createApiFactory, discoveryApiRef, fetchApiRef, storageApiRef, createRoutableExtension, createComponentExtension } from '@backstage/core-plugin-api';
 import { scmIntegrationsApiRef, ScmIntegrationIcon } from '@backstage/integration-react';
 import { getEntityRelations, EntityRefLinks, useEntity, catalogApiRef, getEntitySourceLocation as getEntitySourceLocation$1, useEntityList, EntityKindFilter, EntityRefLink, humanizeEntityRef, useStarredEntities, useEntityPermission, entityRouteRef, useAsyncEntity, UnregisterEntityDialog, InspectEntityDialog, FavoriteEntity, CatalogFilterLayout, starredEntitiesApiRef } from '@backstage/plugin-catalog-react';
-import { makeStyles, Typography, Grid, Box, useMediaQuery, ImageList, ImageListItem, Chip, Card, CardHeader, IconButton, Divider, CardContent, createStyles, Select, InputBase, MenuItem, ListItem, ListItemIcon, ListItemText, Popover, MenuList, Dialog, DialogTitle, DialogActions, Button } from '@material-ui/core';
+import { makeStyles, Typography, Grid, Box, useMediaQuery, ImageList, ImageListItem, Chip, Card, CardHeader, IconButton, Divider, CardContent, createStyles, Select, InputBase, MenuItem, ListItem, ListItemIcon, ListItemText, Tooltip, Popover, MenuList, Dialog, DialogTitle, DialogActions, Button } from '@material-ui/core';
 import CachedIcon from '@material-ui/icons/Cached';
 import DocsIcon from '@material-ui/icons/Description';
 import EditIcon from '@material-ui/icons/Edit';
@@ -106,7 +106,7 @@ const rootRouteRef = createRouteRef({
   id: "catalog"
 });
 
-const useStyles$6 = makeStyles((theme) => ({
+const useStyles$8 = makeStyles((theme) => ({
   value: {
     fontWeight: "bold",
     overflow: "hidden",
@@ -125,13 +125,13 @@ const useStyles$6 = makeStyles((theme) => ({
 }));
 function AboutField(props) {
   const { label, value, gridSizes, children } = props;
-  const classes = useStyles$6();
+  const classes = useStyles$8();
   const childElements = useElementFilter(children, (c) => c.getElements());
   const content = childElements.length > 0 ? childElements : /* @__PURE__ */ React.createElement(Typography, { variant: "body2", className: classes.value }, value || `unknown`);
   return /* @__PURE__ */ React.createElement(Grid, { item: true, ...gridSizes }, /* @__PURE__ */ React.createElement(Typography, { variant: "h2", className: classes.label }, label), content);
 }
 
-const useStyles$5 = makeStyles({
+const useStyles$7 = makeStyles({
   svgIcon: {
     display: "inline-block",
     "& svg": {
@@ -143,7 +143,7 @@ const useStyles$5 = makeStyles({
 });
 function IconLink(props) {
   const { href, text, Icon } = props;
-  const classes = useStyles$5();
+  const classes = useStyles$7();
   return /* @__PURE__ */ React.createElement(Box, { display: "flex" }, /* @__PURE__ */ React.createElement(Box, { mr: 1, className: classes.svgIcon }, /* @__PURE__ */ React.createElement(Typography, { component: "div" }, Icon ? /* @__PURE__ */ React.createElement(Icon, null) : /* @__PURE__ */ React.createElement(LanguageIcon, null))), /* @__PURE__ */ React.createElement(Box, { flexGrow: "1" }, /* @__PURE__ */ React.createElement(Link, { to: href, target: "_blank", rel: "noopener" }, text || href)));
 }
 
@@ -179,7 +179,7 @@ function LinksGridList(props) {
   return /* @__PURE__ */ React.createElement(ImageList, { rowHeight: "auto", cols: numOfCols }, items.map(({ text, href, Icon }, i) => /* @__PURE__ */ React.createElement(ImageListItem, { key: i }, /* @__PURE__ */ React.createElement(IconLink, { href, text: text != null ? text : href, Icon }))));
 }
 
-const useStyles$4 = makeStyles({
+const useStyles$6 = makeStyles({
   description: {
     wordBreak: "break-word"
   }
@@ -197,7 +197,7 @@ function getLocationTargetHref(target, type, entitySourceLocation) {
 function AboutContent(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
   const { entity } = props;
-  const classes = useStyles$4();
+  const classes = useStyles$6();
   const isSystem = entity.kind.toLocaleLowerCase("en-US") === "system";
   const isResource = entity.kind.toLocaleLowerCase("en-US") === "resource";
   const isComponent = entity.kind.toLocaleLowerCase("en-US") === "component";
@@ -316,11 +316,12 @@ function AboutContent(props) {
   )));
 }
 
-const useStyles$3 = makeStyles({
+const useStyles$5 = makeStyles({
   gridItemCard: {
     display: "flex",
     flexDirection: "column",
     height: "calc(100% - 10px)",
+    // for pages without content header
     marginBottom: "10px"
   },
   fullHeightCard: {
@@ -338,7 +339,7 @@ const useStyles$3 = makeStyles({
 function AboutCard(props) {
   var _a, _b, _c;
   const { variant } = props;
-  const classes = useStyles$3();
+  const classes = useStyles$5();
   const { entity } = useEntity();
   const scmIntegrationsApi = useApi(scmIntegrationsApiRef);
   const catalogApi = useApi(catalogApiRef);
@@ -452,7 +453,7 @@ function filterKinds(allKinds, allowedKinds, forcedKinds) {
   return kindsMap;
 }
 
-const useStyles$2 = makeStyles(
+const useStyles$4 = makeStyles(
   (theme) => createStyles({
     root: {
       ...theme.typography.h4
@@ -462,7 +463,7 @@ const useStyles$2 = makeStyles(
 function CatalogKindHeader(props) {
   var _a, _b;
   const { initialFilter = "component", allowedKinds } = props;
-  const classes = useStyles$2();
+  const classes = useStyles$4();
   const { allKinds } = useAllKinds();
   const {
     filters,
@@ -505,7 +506,7 @@ function CatalogKindHeader(props) {
   );
 }
 
-const useStyles$1 = makeStyles({
+const useStyles$3 = makeStyles({
   flexContainer: {
     flexWrap: "wrap"
   },
@@ -518,7 +519,7 @@ const useStyles$1 = makeStyles({
 function CatalogSearchResultListItem(props) {
   const result = props.result;
   const highlight = props.highlight;
-  const classes = useStyles$1();
+  const classes = useStyles$3();
   const analytics = useAnalytics();
   const handleClick = () => {
     analytics.captureEvent("discover", result.title, {
@@ -882,7 +883,7 @@ function UnregisterEntity(props) {
   return /* @__PURE__ */ React.createElement(React.Fragment, null, unregisterButton);
 }
 
-const useStyles = makeStyles$1(
+const useStyles$2 = makeStyles$1(
   (theme) => {
     return {
       button: {
@@ -900,7 +901,7 @@ function EntityContextMenu(props) {
     onInspectEntity
   } = props;
   const [anchorEl, setAnchorEl] = useState();
-  const classes = useStyles();
+  const classes = useStyles$2();
   const unregisterPermission = useEntityPermission(
     catalogEntityDeletePermission
   );
@@ -930,7 +931,7 @@ function EntityContextMenu(props) {
     )),
     /* @__PURE__ */ React.createElement(Divider, { key: "the divider is here!" })
   ];
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Tooltip, { title: "More", arrow: true }, /* @__PURE__ */ React.createElement(
     IconButton,
     {
       "aria-label": "more",
@@ -944,7 +945,7 @@ function EntityContextMenu(props) {
       id: "long-menu"
     },
     /* @__PURE__ */ React.createElement(MoreVert, null)
-  ), /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement(
     Popover,
     {
       open: Boolean(anchorEl),
@@ -1314,6 +1315,91 @@ const FilteredEntityLayout = CatalogFilterLayout;
 const FilterContainer = CatalogFilterLayout.Filters;
 const EntityListContainer = CatalogFilterLayout.Content;
 
+const ENTITY_YAML = `metadata:
+  name: example
+  labels:
+    javaVersion: 1.2.3`;
+const useStyles$1 = makeStyles(
+  (theme) => ({
+    code: {
+      borderRadius: 6,
+      margin: `${theme.spacing(2)}px 0px`,
+      background: theme.palette.type === "dark" ? "#444" : "#fff"
+    }
+  }),
+  { name: "PluginCatalogEntityLabelsEmptyState" }
+);
+function EntityLabelsEmptyState() {
+  const classes = useStyles$1();
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { variant: "body1" }, "No labels defined for this entity. You can add labels to your entity YAML as shown in the highlighted example below:"), /* @__PURE__ */ React.createElement("div", { className: classes.code }, /* @__PURE__ */ React.createElement(
+    CodeSnippet,
+    {
+      text: ENTITY_YAML,
+      language: "yaml",
+      showLineNumbers: true,
+      highlightedNumbers: [3, 4, 5, 6],
+      customStyle: { background: "inherit", fontSize: "115%" }
+    }
+  )), /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "contained",
+      color: "primary",
+      target: "_blank",
+      href: "https://backstage.io/docs/features/software-catalog/descriptor-format#labels-optional"
+    },
+    "Read more"
+  ));
+}
+
+const useStyles = makeStyles((_) => ({
+  key: {
+    fontWeight: "bold"
+  }
+}));
+const EntityLabelsCard$1 = (props) => {
+  var _a;
+  const { variant, title } = props;
+  const { entity } = useEntity();
+  const classes = useStyles();
+  const columns = [
+    {
+      render: (row) => {
+        return /* @__PURE__ */ React.createElement(Typography, { className: classes.key, variant: "body2" }, row.key);
+      }
+    },
+    {
+      field: "value"
+    }
+  ];
+  const labels = (_a = entity == null ? void 0 : entity.metadata) == null ? void 0 : _a.labels;
+  return /* @__PURE__ */ React.createElement(InfoCard, { title: title || "Labels", variant }, !labels || Object.keys(labels).length === 0 ? /* @__PURE__ */ React.createElement(EntityLabelsEmptyState, null) : /* @__PURE__ */ React.createElement(
+    Table,
+    {
+      columns,
+      data: Object.keys(labels).map((labelKey) => ({
+        key: labelKey,
+        value: labels[labelKey]
+      })),
+      options: {
+        search: false,
+        showTitle: true,
+        loadingType: "linear",
+        header: false,
+        padding: "dense",
+        pageSize: 5,
+        toolbar: false,
+        paging: Object.keys(labels).length > 5
+      }
+    }
+  ));
+};
+
+function hasLabels(entity) {
+  var _a, _b;
+  return ((_a = entity == null ? void 0 : entity.metadata) == null ? void 0 : _a.labels) ? Object.keys((_b = entity == null ? void 0 : entity.metadata) == null ? void 0 : _b.labels).some(Boolean) : false;
+}
+
 const catalogPlugin = createPlugin({
   id: "catalog",
   apis: [
@@ -1349,7 +1435,7 @@ const catalogPlugin = createPlugin({
 const CatalogIndexPage = catalogPlugin.provide(
   createRoutableExtension({
     name: "CatalogIndexPage",
-    component: () => import('./index-e2a687cd.esm.js').then((m) => m.CatalogPage),
+    component: () => import('./index-eb346a82.esm.js').then((m) => m.CatalogPage),
     mountPoint: rootRouteRef
   })
 );
@@ -1364,7 +1450,7 @@ const EntityAboutCard = catalogPlugin.provide(
   createComponentExtension({
     name: "EntityAboutCard",
     component: {
-      lazy: () => import('./index-c04e9bd4.esm.js').then((m) => m.AboutCard)
+      lazy: () => import('./index-2c3b0303.esm.js').then((m) => m.AboutCard)
     }
   })
 );
@@ -1372,7 +1458,15 @@ const EntityLinksCard = catalogPlugin.provide(
   createComponentExtension({
     name: "EntityLinksCard",
     component: {
-      lazy: () => import('./index-e79d2b74.esm.js').then((m) => m.EntityLinksCard)
+      lazy: () => import('./index-07f33109.esm.js').then((m) => m.EntityLinksCard)
+    }
+  })
+);
+const EntityLabelsCard = catalogPlugin.provide(
+  createComponentExtension({
+    name: "EntityLabelsCard",
+    component: {
+      lazy: () => import('./index-75a7574f.esm.js').then((m) => m.EntityLabelsCard)
     }
   })
 );
@@ -1451,5 +1545,5 @@ const RelatedEntitiesCard = catalogPlugin.provide(
   })
 );
 
-export { AboutCard as A, EntityListContainer as B, CatalogTable as C, DefaultStarredEntitiesApi as D, EntityAboutCard as E, FilteredEntityLayout as F, LinksGridList as L, RelatedEntitiesCard as R, AboutContent as a, AboutField as b, createComponentRouteRef as c, CatalogEntityPage as d, CatalogIndexPage as e, catalogPlugin as f, EntityDependencyOfComponentsCard as g, EntityDependsOnComponentsCard as h, EntityDependsOnResourcesCard as i, EntityHasComponentsCard as j, EntityHasResourcesCard as k, EntityHasSubcomponentsCard as l, EntityHasSystemsCard as m, EntityLinksCard as n, CatalogKindHeader as o, CatalogSearchResultListItem as p, EntityLayout as q, EntityOrphanWarning as r, isOrphan as s, EntityProcessingErrorsPanel as t, hasCatalogProcessingErrors as u, EntitySwitch as v, isKind as w, isNamespace as x, isComponentType as y, FilterContainer as z };
-//# sourceMappingURL=index-24abea03.esm.js.map
+export { AboutCard as A, isNamespace as B, CatalogTable as C, DefaultStarredEntitiesApi as D, EntityLabelsCard$1 as E, isComponentType as F, FilteredEntityLayout as G, FilterContainer as H, EntityListContainer as I, LinksGridList as L, RelatedEntitiesCard as R, AboutContent as a, AboutField as b, createComponentRouteRef as c, CatalogEntityPage as d, CatalogIndexPage as e, catalogPlugin as f, EntityAboutCard as g, hasLabels as h, EntityDependencyOfComponentsCard as i, EntityDependsOnComponentsCard as j, EntityDependsOnResourcesCard as k, EntityHasComponentsCard as l, EntityHasResourcesCard as m, EntityHasSubcomponentsCard as n, EntityHasSystemsCard as o, EntityLinksCard as p, EntityLabelsCard as q, CatalogKindHeader as r, CatalogSearchResultListItem as s, EntityLayout as t, EntityOrphanWarning as u, isOrphan as v, EntityProcessingErrorsPanel as w, hasCatalogProcessingErrors as x, EntitySwitch as y, isKind as z };
+//# sourceMappingURL=index-05290c15.esm.js.map