@backstage/plugin-catalog-react 1.9.3 → 1.9.4-next.1

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @backstage/plugin-catalog-react
 
+## 1.9.4-next.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/frontend-plugin-api@0.6.0-next.1
+  - @backstage/core-components@0.14.0-next.0
+  - @backstage/catalog-model@1.4.4-next.0
+  - @backstage/catalog-client@1.6.0-next.1
+  - @backstage/core-plugin-api@1.8.3-next.0
+  - @backstage/integration-react@1.1.24-next.0
+  - @backstage/errors@1.2.3
+  - @backstage/types@1.1.1
+  - @backstage/version-bridge@1.0.7
+  - @backstage/plugin-catalog-common@1.0.21-next.0
+  - @backstage/plugin-permission-common@0.7.12
+  - @backstage/plugin-permission-react@0.4.20-next.0
+
+## 1.9.4-next.0
+
+### Patch Changes
+
+- 916da47: Change default icon for unknown entities to nothing instead of the help icon.
+- 71c6d7a: Overflowing labels in OwnerPicker (Catalog) are now truncated. Hovering over them shows the full label
+- Updated dependencies
+  - @backstage/frontend-plugin-api@0.5.1-next.0
+  - @backstage/catalog-client@1.6.0-next.0
+  - @backstage/core-components@0.13.10
+  - @backstage/catalog-model@1.4.3
+  - @backstage/core-plugin-api@1.8.2
+  - @backstage/errors@1.2.3
+  - @backstage/integration-react@1.1.23
+  - @backstage/types@1.1.1
+  - @backstage/version-bridge@1.0.7
+  - @backstage/plugin-catalog-common@1.0.20
+  - @backstage/plugin-permission-common@0.7.12
+  - @backstage/plugin-permission-react@0.4.19
+
 ## 1.9.3
 
 ### Patch Changes

package/alpha/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-catalog-react",
-  "version": "1.9.3",
+  "version": "1.9.4-next.1",
   "main": "../dist/alpha.esm.js",
   "module": "../dist/alpha.esm.js",
   "types": "../dist/alpha.d.ts"

package/dist/index.esm.js

@@ -4,7 +4,7 @@ import { stringifyEntityRef, DEFAULT_NAMESPACE, ANNOTATION_SOURCE_LOCATION, pars
 import get from 'lodash/get';
 import React, { useState, useEffect, useMemo, createContext, useCallback, useContext, useRef, memo, forwardRef, useLayoutEffect, Fragment } from 'react';
 import ObservableImpl from 'zen-observable';
-import { Grid, useMediaQuery, useTheme, Button, Drawer, Box, Typography, FormControlLabel, Checkbox, makeStyles, TextField, Tooltip, IconButton, Card, CardContent, Chip, CardActions, Toolbar, FormControl, Input, InputAdornment, withStyles, DialogContentText, ListItemText as ListItemText$1, ListSubheader as ListSubheader$1, ListItem, ListItemIcon, List, ListItemSecondaryAction, Dialog, DialogTitle, DialogContent, Tabs, Tab, DialogActions, Divider, MenuItem } from '@material-ui/core';
+import { Grid, useMediaQuery, useTheme, Button, Drawer, Box, Typography, FormControlLabel, Checkbox, makeStyles, TextField, Tooltip, IconButton, Card, CardContent, Chip, CardActions, Toolbar, FormControl, Input, InputAdornment, withStyles as withStyles$1, DialogContentText, ListItemText as ListItemText$1, ListSubheader as ListSubheader$1, ListItem, ListItemIcon, List, ListItemSecondaryAction, Dialog, DialogTitle, DialogContent, Tabs, Tab, DialogActions, Divider, MenuItem } from '@material-ui/core';
 import FilterListIcon from '@material-ui/icons/FilterList';
 import { Select, Link, ResponseErrorPanel, Progress, OverflowTooltip, Table, DependencyGraph, DependencyGraphTypes, CodeSnippet, CopyTextButton, EmptyState } from '@backstage/core-components';
 import { g as getEntityRelations, u as useEntity } from './esm/useEntity-de64059a.esm.js';
@@ -27,6 +27,7 @@ import classNames from 'classnames';
 import { useMountEffect, useDebouncedEffect } from '@react-hookz/web';
 import PersonIcon from '@material-ui/icons/Person';
 import GroupIcon from '@material-ui/icons/Group';
+import { withStyles, makeStyles as makeStyles$1 } from '@material-ui/core/styles';
 import { getOrCreateGlobalSingleton } from '@backstage/version-bridge';
 import HoverPopover from 'material-ui-popup-state/HoverPopover';
 import { usePopupState, bindHover, bindPopover } from 'material-ui-popup-state/hooks';
@@ -36,7 +37,7 @@ import Clear from '@material-ui/icons/Clear';
 import Search from '@material-ui/icons/Search';
 import Star from '@material-ui/icons/Star';
 import StarBorder from '@material-ui/icons/StarBorder';
-import WorkIcon from '@material-ui/icons/Work';
+import SvgIcon from '@material-ui/core/SvgIcon';
 import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
 import groupBy from 'lodash/groupBy';
 import DialogContentText$1 from '@material-ui/core/DialogContentText';
@@ -47,7 +48,6 @@ import SettingsIcon from '@material-ui/icons/Settings';
 import useDeepCompareEffect from 'react-use/lib/useDeepCompareEffect';
 import Box$1 from '@material-ui/core/Box';
 import Button$1 from '@material-ui/core/Button';
-import { makeStyles as makeStyles$1 } from '@material-ui/core/styles';
 import Typography$1 from '@material-ui/core/Typography';
 
 const catalogApiRef = createApiRef({
@@ -1339,14 +1339,52 @@ function useSelectedOwners({
 
 const useStyles$f = makeStyles(
   {
-    input: {}
+    input: {},
+    fullWidth: { width: "100%" },
+    boxLabel: {
+      width: "100%",
+      textOverflow: "ellipsis",
+      overflow: "hidden"
+    }
   },
   {
     name: "CatalogReactEntityOwnerPicker"
   }
 );
+const FixedWidthFormControlLabel = withStyles(
+  (_theme) => ({
+    label: {
+      width: "100%"
+    },
+    root: {
+      width: "90%"
+    }
+  }),
+  { name: "FixedWidthFormControlLabel" }
+)(FormControlLabel);
 const icon$1 = /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" });
 const checkedIcon$1 = /* @__PURE__ */ React.createElement(CheckBoxIcon, { fontSize: "small" });
+function RenderOptionLabel(props) {
+  const classes = useStyles$f();
+  const isGroup = props.entity.kind.toLocaleLowerCase("en-US") === "group";
+  const { primaryTitle: title } = useEntityPresentation(props.entity);
+  return /* @__PURE__ */ React.createElement(Box, { className: classes.fullWidth }, /* @__PURE__ */ React.createElement(
+    FixedWidthFormControlLabel,
+    {
+      className: classes.fullWidth,
+      control: /* @__PURE__ */ React.createElement(
+        Checkbox,
+        {
+          icon: icon$1,
+          checkedIcon: checkedIcon$1,
+          checked: props.isSelected
+        }
+      ),
+      onClick: (event) => event.preventDefault(),
+      label: /* @__PURE__ */ React.createElement(Tooltip, { title }, /* @__PURE__ */ React.createElement(Box, { display: "flex", alignItems: "center" }, isGroup ? /* @__PURE__ */ React.createElement(GroupIcon, { fontSize: "small" }) : /* @__PURE__ */ React.createElement(PersonIcon, { fontSize: "small" }), "\xA0", /* @__PURE__ */ React.createElement(Box, { className: classes.boxLabel }, /* @__PURE__ */ React.createElement(Typography, { noWrap: true }, title))))
+    }
+  ));
+}
 const EntityOwnerPicker = (props) => {
   var _a, _b, _c;
   const classes = useStyles$f();
@@ -1421,25 +1459,7 @@ const EntityOwnerPicker = (props) => {
       },
       filterOptions: (x) => x,
       renderOption: (entity, { selected }) => {
-        const isGroup = entity.kind.toLocaleLowerCase("en-US") === "group";
-        return /* @__PURE__ */ React.createElement(
-          FormControlLabel,
-          {
-            control: /* @__PURE__ */ React.createElement(
-              Checkbox,
-              {
-                icon: icon$1,
-                checkedIcon: checkedIcon$1,
-                checked: selected
-              }
-            ),
-            onClick: (event) => event.preventDefault(),
-            label: /* @__PURE__ */ React.createElement(Box, { display: "flex", flexWrap: "wrap", alignItems: "center" }, isGroup ? /* @__PURE__ */ React.createElement(GroupIcon, { fontSize: "small" }) : /* @__PURE__ */ React.createElement(PersonIcon, { fontSize: "small" }), "\xA0", humanizeEntity(
-              entity,
-              humanizeEntityRef(entity, { defaultKind: entity.kind })
-            ))
-          }
-        );
+        return /* @__PURE__ */ React.createElement(RenderOptionLabel, { entity, isSelected: selected });
       },
       size: "small",
       popupIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, { "data-testid": "owner-picker-expand" }),
@@ -1986,7 +2006,7 @@ const EntityTypePicker = (props) => {
   ));
 };
 
-const YellowStar = withStyles({
+const YellowStar = withStyles$1({
   root: {
     color: "#f3ba37"
   }
@@ -2013,7 +2033,7 @@ const FavoriteEntity = (props) => {
   );
 };
 
-const DEFAULT_ICON = WorkIcon;
+const DEFAULT_ICON = SvgIcon;
 function getKind(kind, entityRef) {
   if (kind) {
     return kind.toLocaleLowerCase("en-US");
@@ -2101,6 +2121,7 @@ function CustomNode({ node }) {
   const entityRoute = useRouteRef(entityRouteRef);
   const [width, setWidth] = useState(0);
   const [height, setHeight] = useState(0);
+  const app = useApp();
   const idRef = useRef(null);
   useLayoutEffect(() => {
     if (idRef.current) {
@@ -2113,9 +2134,12 @@ function CustomNode({ node }) {
       }
     }
   }, [width, height]);
+  const hasKindIcon = app.getSystemIcon(
+    `kind:${node.kind.toLocaleLowerCase("en-US")}`
+  );
   const padding = 10;
   const iconSize = height;
-  const paddedIconWidth = iconSize + padding;
+  const paddedIconWidth = hasKindIcon ? iconSize + padding : 0;
   const paddedWidth = paddedIconWidth + width + padding * 2;
   const paddedHeight = height + padding * 2;
   const displayTitle = node.metadata.title || (node.kind && node.metadata.name && node.metadata.namespace ? humanizeEntityRef({
@@ -2143,7 +2167,7 @@ function CustomNode({ node }) {
       height: paddedHeight,
       rx: 10
     }
-  ), /* @__PURE__ */ React.createElement(
+  ), hasKindIcon && /* @__PURE__ */ React.createElement(
     EntityKindIcon,
     {
       kind: node.kind,
@@ -2285,7 +2309,7 @@ function useColocated(entity) {
   };
 }
 function EntityList(props) {
-  return /* @__PURE__ */ React.createElement(List, { dense: true }, props.header && /* @__PURE__ */ React.createElement(KeyValueListItem, { key: "header", entry: props.header }), props.entities.map((entity) => /* @__PURE__ */ React.createElement(ListItem, { key: stringifyEntityRef(entity) }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(EntityKindIcon, { kind: entity.kind })), /* @__PURE__ */ React.createElement(ListItemText, { primary: /* @__PURE__ */ React.createElement(EntityRefLink, { entityRef: entity }) }))));
+  return /* @__PURE__ */ React.createElement(List, { dense: true }, props.header && /* @__PURE__ */ React.createElement(KeyValueListItem, { key: "header", entry: props.header }), props.entities.map((entity) => /* @__PURE__ */ React.createElement(ListItem, { key: stringifyEntityRef(entity) }, /* @__PURE__ */ React.createElement(ListItemText, { primary: /* @__PURE__ */ React.createElement(EntityRefLink, { entityRef: entity }) }))));
 }
 function Contents$1(props) {
   const { entity } = props;
@@ -2393,7 +2417,7 @@ function OverviewPage(props) {
       helpLink: "https://backstage.io/docs/features/software-catalog/well-known-relations"
     },
     Object.entries(groupedRelations).map(
-      ([type, groupRelations], index) => /* @__PURE__ */ React.createElement("div", { key: index }, /* @__PURE__ */ React.createElement(List, { dense: true, subheader: /* @__PURE__ */ React.createElement(ListSubheader, null, type) }, groupRelations.map((group) => /* @__PURE__ */ React.createElement(ListItem, { key: group.targetRef }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(EntityKindIcon, { entityRef: group.targetRef })), /* @__PURE__ */ React.createElement(
+      ([type, groupRelations], index) => /* @__PURE__ */ React.createElement("div", { key: index }, /* @__PURE__ */ React.createElement(List, { dense: true, subheader: /* @__PURE__ */ React.createElement(ListSubheader, null, type) }, groupRelations.map((group) => /* @__PURE__ */ React.createElement(ListItem, { key: group.targetRef }, /* @__PURE__ */ React.createElement(
         ListItemText,
         {
           primary: /* @__PURE__ */ React.createElement(EntityRefLink, { entityRef: group.targetRef })