diff --git a/.changeset/empty-ligers-hang.md b/.changeset/empty-ligers-hang.md
new file mode 100644
index 0000000000..c17609712a
--- /dev/null
+++ b/.changeset/empty-ligers-hang.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-react': patch
+---
+
+Overflowing labels in OwnerPicker (Catalog) are now truncated. Hovering over them shows the full label
diff --git a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx
index ed22e126c5..5b5bd39310 100644
--- a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx
+++ b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx
@@ -26,6 +26,7 @@ import {
TextField,
Typography,
makeStyles,
+ Tooltip,
} from '@material-ui/core';
import CheckBoxIcon from '@material-ui/icons/CheckBox';
import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
@@ -39,6 +40,8 @@ import PersonIcon from '@material-ui/icons/Person';
import GroupIcon from '@material-ui/icons/Group';
import { humanizeEntity, humanizeEntityRef } from '../EntityRefLink/humanize';
import { useFetchEntities } from './useFetchEntities';
+import { withStyles } from '@material-ui/core/styles';
+import { useEntityPresentation } from '../../apis';
/** @public */
export type CatalogReactEntityOwnerPickerClassKey = 'input';
@@ -46,12 +49,30 @@ export type CatalogReactEntityOwnerPickerClassKey = 'input';
const useStyles = makeStyles(
{
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 = ;
const checkedIcon = ;
@@ -62,6 +83,42 @@ export type EntityOwnerPickerProps = {
mode?: 'owners-only' | 'all';
};
+function RenderOptionLabel(props: { entity: Entity; isSelected: boolean }) {
+ const classes = useStyles();
+ const isGroup = props.entity.kind.toLocaleLowerCase('en-US') === 'group';
+ const { primaryTitle: title } = useEntityPresentation(props.entity);
+ return (
+
+
+ }
+ onClick={event => event.preventDefault()}
+ label={
+
+
+ {isGroup ? (
+
+ ) : (
+
+ )}
+
+
+ {title}
+
+
+
+ }
+ />
+
+ );
+}
+
/** @public */
export const EntityOwnerPicker = (props?: EntityOwnerPickerProps) => {
const classes = useStyles();
@@ -153,41 +210,13 @@ export const EntityOwnerPicker = (props?: EntityOwnerPickerProps) => {
if (typeof e !== 'string') {
cache.setEntity(e);
}
-
return entityRef;
}),
);
}}
filterOptions={x => x}
renderOption={(entity, { selected }) => {
- const isGroup = entity.kind.toLocaleLowerCase('en-US') === 'group';
-
- return (
-
- }
- onClick={event => event.preventDefault()}
- label={
-
- {isGroup ? (
-
- ) : (
-
- )}
-
- {humanizeEntity(
- entity,
- humanizeEntityRef(entity, { defaultKind: entity.kind }),
- )}
-
- }
- />
- );
+ return ;
}}
size="small"
popupIcon={}