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={}