From 6b16d0d8c97450ac4870c311723a1528f4c20767 Mon Sep 17 00:00:00 2001 From: Alban Bailly Date: Mon, 18 Aug 2025 17:45:51 +0200 Subject: [PATCH 1/5] fix some --- .../src/features/IAM/Users/UserRoles/AssignedEntities.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/manager/src/features/IAM/Users/UserRoles/AssignedEntities.tsx b/packages/manager/src/features/IAM/Users/UserRoles/AssignedEntities.tsx index 9bbf6fb060a..aba6dcb1312 100644 --- a/packages/manager/src/features/IAM/Users/UserRoles/AssignedEntities.tsx +++ b/packages/manager/src/features/IAM/Users/UserRoles/AssignedEntities.tsx @@ -56,7 +56,7 @@ export const AssignedEntities = ({ ref={(el: HTMLDivElement) => { itemRefs.current[index] = el; }} - style={{ display: 'inline-block', marginRight: 8 }} + style={{ display: 'inline', marginRight: 8 }} > -
{items} -
+ {numHiddenItems > 0 && ( Date: Tue, 19 Aug 2025 13:27:08 +0200 Subject: [PATCH 2/5] improve ellipsis pattern --- .../IAM/Users/UserRoles/AssignedEntities.tsx | 36 ++++++++++++++----- 1 file changed, 28 insertions(+), 8 deletions(-) diff --git a/packages/manager/src/features/IAM/Users/UserRoles/AssignedEntities.tsx b/packages/manager/src/features/IAM/Users/UserRoles/AssignedEntities.tsx index aba6dcb1312..62fe73313cd 100644 --- a/packages/manager/src/features/IAM/Users/UserRoles/AssignedEntities.tsx +++ b/packages/manager/src/features/IAM/Users/UserRoles/AssignedEntities.tsx @@ -24,13 +24,15 @@ export const AssignedEntities = ({ useCalculateHiddenItems(role.entity_names!); const handleResize = React.useMemo( - () => debounce(() => calculateHiddenItems(), 100), + () => debounce(() => calculateHiddenItems(), 250), [calculateHiddenItems] ); React.useEffect(() => { // Ensure calculateHiddenItems runs after layout stabilization on initial render - const rafId = requestAnimationFrame(() => calculateHiddenItems()); + const rafId = requestAnimationFrame(() => { + requestAnimationFrame(() => calculateHiddenItems()); + }); window.addEventListener('resize', handleResize); @@ -49,14 +51,24 @@ export const AssignedEntities = ({ [role.entity_names, role.entity_ids] ); + const isLastVisibleItem = React.useCallback( + (index: number) => { + return combinedEntities.length - numHiddenItems - 1 === index; + }, + [combinedEntities.length, numHiddenItems] + ); + const items = combinedEntities?.map( (entity: CombinedEntity, index: number) => ( -
{ itemRefs.current[index] = el; }} - style={{ display: 'inline', marginRight: 8 }} + sx={{ + display: 'inline', + marginRight: theme.tokens.spacing.S8, + }} > 0 && isLastVisibleItem(index) ? '"..."' : '""', + position: 'absolute', + top: 0, + right: -16, + width: 14, + }, }} /> -
+ ) ); @@ -87,15 +108,14 @@ export const AssignedEntities = ({ sx={{ alignItems: 'center', display: 'flex', + position: 'relative', }} > {items} From a4869bee3470bd6859fc4746e17a9377e4733941 Mon Sep 17 00:00:00 2001 From: Alban Bailly Date: Tue, 19 Aug 2025 13:33:22 +0200 Subject: [PATCH 3/5] cleanup --- .../src/features/IAM/Users/UserRoles/AssignedEntities.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/manager/src/features/IAM/Users/UserRoles/AssignedEntities.tsx b/packages/manager/src/features/IAM/Users/UserRoles/AssignedEntities.tsx index 62fe73313cd..e0d22799d54 100644 --- a/packages/manager/src/features/IAM/Users/UserRoles/AssignedEntities.tsx +++ b/packages/manager/src/features/IAM/Users/UserRoles/AssignedEntities.tsx @@ -29,7 +29,6 @@ export const AssignedEntities = ({ ); React.useEffect(() => { - // Ensure calculateHiddenItems runs after layout stabilization on initial render const rafId = requestAnimationFrame(() => { requestAnimationFrame(() => calculateHiddenItems()); }); From 3b486ac211efc3a32dd674b9bf2ad4d07cf3008e Mon Sep 17 00:00:00 2001 From: Alban Bailly Date: Tue, 19 Aug 2025 14:05:06 +0200 Subject: [PATCH 4/5] cleanup --- .../src/features/IAM/Users/UserRoles/AssignedEntities.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/manager/src/features/IAM/Users/UserRoles/AssignedEntities.tsx b/packages/manager/src/features/IAM/Users/UserRoles/AssignedEntities.tsx index e0d22799d54..357a5bdc8e3 100644 --- a/packages/manager/src/features/IAM/Users/UserRoles/AssignedEntities.tsx +++ b/packages/manager/src/features/IAM/Users/UserRoles/AssignedEntities.tsx @@ -29,6 +29,7 @@ export const AssignedEntities = ({ ); React.useEffect(() => { + // Double RAF for good measure - see https://stackoverflow.com/questions/44145740/how-does-double-requestanimationframe-work const rafId = requestAnimationFrame(() => { requestAnimationFrame(() => calculateHiddenItems()); }); @@ -66,7 +67,10 @@ export const AssignedEntities = ({ }} sx={{ display: 'inline', - marginRight: theme.tokens.spacing.S8, + marginRight: + numHiddenItems > 0 && isLastVisibleItem(index) + ? theme.tokens.spacing.S16 + : theme.tokens.spacing.S8, }} > Date: Tue, 19 Aug 2025 14:22:13 +0200 Subject: [PATCH 5/5] Added changeset: IAM - Cross browser AssignedRoles entities chips truncation --- packages/manager/.changeset/pr-12720-fixed-1755606133614.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/manager/.changeset/pr-12720-fixed-1755606133614.md diff --git a/packages/manager/.changeset/pr-12720-fixed-1755606133614.md b/packages/manager/.changeset/pr-12720-fixed-1755606133614.md new file mode 100644 index 00000000000..62505f37f74 --- /dev/null +++ b/packages/manager/.changeset/pr-12720-fixed-1755606133614.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Fixed +--- + +IAM - Cross browser AssignedRoles entities chips truncation ([#12720](https://github.com/linode/manager/pull/12720))