From 71c6d7a0de7e50fa047ffae6942abc6b984ed798 Mon Sep 17 00:00:00 2001 From: Navya Govind Date: Tue, 2 Jan 2024 13:30:47 +0100 Subject: [PATCH 1/6] Add a fix for overflowing labels in owner picker in catalog + hover feature Signed-off-by: Navya Govind --- .changeset/empty-ligers-hang.md | 5 +++ .../EntityOwnerPicker/EntityOwnerPicker.tsx | 37 ++++++++++++------- 2 files changed, 29 insertions(+), 13 deletions(-) create mode 100644 .changeset/empty-ligers-hang.md 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..1b6773662e 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'; @@ -161,7 +162,10 @@ export const EntityOwnerPicker = (props?: EntityOwnerPickerProps) => { filterOptions={x => x} renderOption={(entity, { selected }) => { const isGroup = entity.kind.toLocaleLowerCase('en-US') === 'group'; - + const humanizedName = humanizeEntity( + entity, + humanizeEntityRef(entity, { defaultKind: entity.kind }), + ); return ( { } onClick={event => event.preventDefault()} label={ - - {isGroup ? ( - - ) : ( - - )} -   - {humanizeEntity( - entity, - humanizeEntityRef(entity, { defaultKind: entity.kind }), - )} - + + + {isGroup ? ( + + ) : ( + + )} +   + + {humanizedName} + + + } /> ); From b2d71c2bd3a2fd3eeb57541c89aae0502b14eef7 Mon Sep 17 00:00:00 2001 From: Navya Govind Date: Mon, 15 Jan 2024 10:53:04 +0100 Subject: [PATCH 2/6] Make overflow dynamic Signed-off-by: Navya Govind --- .../EntityOwnerPicker/EntityOwnerPicker.tsx | 80 ++++++++++++------- 1 file changed, 49 insertions(+), 31 deletions(-) diff --git a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx index 1b6773662e..c4311ce896 100644 --- a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx +++ b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx @@ -40,6 +40,7 @@ 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'; /** @public */ export type CatalogReactEntityOwnerPickerClassKey = 'input'; @@ -53,6 +54,21 @@ const useStyles = makeStyles( }, ); +const FixedWidthFormControlLabel = withStyles( + _theme => ({ + root: { + width: '100%', + }, + label: { + root: { + width: '100%', + }, + width: '100%', + }, + }), + { name: 'FixedWidthFormControlLabel' }, +)(FormControlLabel); + const icon = ; const checkedIcon = ; @@ -154,7 +170,6 @@ export const EntityOwnerPicker = (props?: EntityOwnerPickerProps) => { if (typeof e !== 'string') { cache.setEntity(e); } - return entityRef; }), ); @@ -167,37 +182,40 @@ export const EntityOwnerPicker = (props?: EntityOwnerPickerProps) => { humanizeEntityRef(entity, { defaultKind: entity.kind }), ); return ( - - } - onClick={event => event.preventDefault()} - label={ - - - {isGroup ? ( - - ) : ( - - )} -   - - {humanizedName} + + + } + onClick={event => event.preventDefault()} + label={ + + + {isGroup ? ( + + ) : ( + + )} +   + + {humanizedName} + - - - } - /> + + } + /> + ); }} size="small" From ce9dd1460f5e702a25d8129436e32ef2025765d8 Mon Sep 17 00:00:00 2001 From: Navya Govind Date: Mon, 15 Jan 2024 11:30:34 +0100 Subject: [PATCH 3/6] refactor css stuff Signed-off-by: Navya Govind --- .../EntityOwnerPicker/EntityOwnerPicker.tsx | 24 +++++++------------ 1 file changed, 9 insertions(+), 15 deletions(-) diff --git a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx index c4311ce896..685279b83e 100644 --- a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx +++ b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx @@ -48,6 +48,12 @@ export type CatalogReactEntityOwnerPickerClassKey = 'input'; const useStyles = makeStyles( { input: {}, + fullWidth: { width: '100%' }, + boxLabel: { + width: '100%', + textOverflow: 'ellipsis', + overflow: 'hidden', + }, }, { name: 'CatalogReactEntityOwnerPicker', @@ -56,13 +62,7 @@ const useStyles = makeStyles( const FixedWidthFormControlLabel = withStyles( _theme => ({ - root: { - width: '100%', - }, label: { - root: { - width: '100%', - }, width: '100%', }, }), @@ -182,9 +182,9 @@ export const EntityOwnerPicker = (props?: EntityOwnerPickerProps) => { humanizeEntityRef(entity, { defaultKind: entity.kind }), ); return ( - + { )}   - + {humanizedName} From 87ca41827b954ccd9ba3dc1d61bd22663b846737 Mon Sep 17 00:00:00 2001 From: Navya Govind Date: Mon, 15 Jan 2024 13:18:22 +0100 Subject: [PATCH 4/6] use presentation api Signed-off-by: Navya Govind --- .../EntityOwnerPicker/EntityOwnerPicker.tsx | 73 ++++++++++--------- 1 file changed, 38 insertions(+), 35 deletions(-) diff --git a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx index 685279b83e..6a4a6d2dd0 100644 --- a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx +++ b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx @@ -41,6 +41,7 @@ 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'; @@ -79,6 +80,42 @@ export type EntityOwnerPickerProps = { mode?: 'owners-only' | 'all'; }; +function WrappedOption(props: { entity: Entity; isSelected: boolean }) { + const classes = useStyles(); + const isGroup = props.entity.kind.toLocaleLowerCase('en-US') === 'group'; + const { primaryTitle } = useEntityPresentation(props.entity); + return ( + + + } + onClick={event => event.preventDefault()} + label={ + + + {isGroup ? ( + + ) : ( + + )} +   + + {primaryTitle} + + + + } + /> + + ); +} + /** @public */ export const EntityOwnerPicker = (props?: EntityOwnerPickerProps) => { const classes = useStyles(); @@ -176,41 +213,7 @@ export const EntityOwnerPicker = (props?: EntityOwnerPickerProps) => { }} filterOptions={x => x} renderOption={(entity, { selected }) => { - const isGroup = entity.kind.toLocaleLowerCase('en-US') === 'group'; - const humanizedName = humanizeEntity( - entity, - humanizeEntityRef(entity, { defaultKind: entity.kind }), - ); - return ( - - - } - onClick={event => event.preventDefault()} - label={ - - - {isGroup ? ( - - ) : ( - - )} -   - - {humanizedName} - - - - } - /> - - ); + return ; }} size="small" popupIcon={} From 983a93fc4a6317f730e5c0e5a3cdf7adbb1114e6 Mon Sep 17 00:00:00 2001 From: Navya Govind Date: Mon, 15 Jan 2024 13:26:47 +0100 Subject: [PATCH 5/6] better naming Signed-off-by: Navya Govind --- .../components/EntityOwnerPicker/EntityOwnerPicker.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx index 6a4a6d2dd0..8876266db2 100644 --- a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx +++ b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx @@ -80,10 +80,10 @@ export type EntityOwnerPickerProps = { mode?: 'owners-only' | 'all'; }; -function WrappedOption(props: { entity: Entity; isSelected: boolean }) { +function RenderOptionLabel(props: { entity: Entity; isSelected: boolean }) { const classes = useStyles(); const isGroup = props.entity.kind.toLocaleLowerCase('en-US') === 'group'; - const { primaryTitle } = useEntityPresentation(props.entity); + const { primaryTitle: title } = useEntityPresentation(props.entity); return ( event.preventDefault()} label={ - + {isGroup ? ( @@ -106,7 +106,7 @@ function WrappedOption(props: { entity: Entity; isSelected: boolean }) { )}   - {primaryTitle} + {title} @@ -213,7 +213,7 @@ export const EntityOwnerPicker = (props?: EntityOwnerPickerProps) => { }} filterOptions={x => x} renderOption={(entity, { selected }) => { - return ; + return ; }} size="small" popupIcon={} From 88e3fb20480d876f38384cd18cb8acc0f5b94e26 Mon Sep 17 00:00:00 2001 From: Navya Govind Date: Thu, 18 Jan 2024 11:47:25 +0100 Subject: [PATCH 6/6] dynamic overflow Signed-off-by: Navya Govind --- .../src/components/EntityOwnerPicker/EntityOwnerPicker.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx index 8876266db2..5b5bd39310 100644 --- a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx +++ b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx @@ -66,6 +66,9 @@ const FixedWidthFormControlLabel = withStyles( label: { width: '100%', }, + root: { + width: '90%', + }, }), { name: 'FixedWidthFormControlLabel' }, )(FormControlLabel);