@backstage/plugin-catalog-react 0.0.0-nightly-20240119021656 → 0.0.0-nightly-20240121021748

package/CHANGELOG.md

@@ -1,14 +1,15 @@
 # @backstage/plugin-catalog-react
 
-## 0.0.0-nightly-20240119021656
+## 0.0.0-nightly-20240121021748
 
 ### Patch Changes
 
+- 71c6d7a: Overflowing labels in OwnerPicker (Catalog) are now truncated. Hovering over them shows the full label
 - Updated dependencies
-  - @backstage/frontend-plugin-api@0.0.0-nightly-20240119021656
+  - @backstage/frontend-plugin-api@0.0.0-nightly-20240121021748
+  - @backstage/core-components@0.13.10
   - @backstage/catalog-client@1.5.2
   - @backstage/catalog-model@1.4.3
-  - @backstage/core-components@0.13.10
   - @backstage/core-plugin-api@1.8.2
   - @backstage/errors@1.2.3
   - @backstage/integration-react@1.1.23

package/alpha/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-catalog-react",
-  "version": "0.0.0-nightly-20240119021656",
+  "version": "0.0.0-nightly-20240121021748",
   "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';
@@ -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"
   }