feat: [UIE-8731] - Roles Table and Users Table ui fix

[mpolotsk-akamai]

Description 📝

Roles Table and Users Table UI fix

Changes 🔄

List any change(s) relevant to the reviewer.

• fixed "Add a User" button styling issue on small screens in the Users table
• centered the empty state message in the Roles table
• added a "Roles" header to the Roles tab
• fixed show/hide functionality in the Permissions section
• UI adjustments in the Roles table (margins, padding, button positioning)

Target release date 🗓️

June 3rd

Preview 📷

Before	After

How to test 🧪

Prerequisites

(How to setup test environment)

• Ensure the Identity and Access Beta flag is enabled in dev tools
• Use devenv and login as vagrant user or use mock data

Verification steps

(How to verify changes)

1. Go to the Users tab

   • Confirm that the "Add a User" button displays correctly on small screens

2. Go to the Roles tab

   • Ensure that the empty state message in the Roles table is centered
   • Ensure that a "Roles" header is visible at the top of the tab

3. Go to the Permissions section

   • Verify that the show/hide functionality works correctly
   • Expand the firewall_creator role
   • Confirm that there are exactly two permissions listed
   • Ensure the "Expand" button is not shown in this case

Author Checklists

As an Author, to speed up the review process, I considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support

• I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

• All unit tests are passing
• TypeScript compilation succeeded without errors
• Code passes all linting rules

[mjac0bs]

Thanks @mpolotsk-akamai, changes looked good overall, but the unit test failure does seem related. Seems like maybe updating tests to mock the intersection observer is necessary? Will approve once that's addressed.

Here are a couple other things I noticed for consideration:

• The tooltip icon for Permissions seems oddly placed. I would expect it to be on the same line as Permissions, to its right. Would you expect the same? This is an existing issue in dev, and maybe it already has an intended ticket for follow up.
• A couple issue I noticed on small mobile screens:
  • The role name is illegible due to wrapping.
  • The Assign Role button extends beyond the table.
  • I am wondering about mobile view in general for this table. Did UX give any insight on columns that could be dropped/how the table could be condensed to be more mobile-friendly? (Description takes up a lot of space, but seems important, for ex.) That's a larger question, and I know not necessarily in scope for this PR.

Screen.Recording.2025-05-16.at.9.08.41.AM.mov

[mpolotsk-akamai]

@mjac0bs ,
thank you for the review!

• the tooltip icon will be handled in a separate PR (feat: [UIE-8140, UIE-8662, UIE-8769] - IAM RBAC: fix bugs for the drawer #12227).
• as for the table - it's a CDS component, so any layout fixes (in this case for small mobile screens) should be made directly in the component. I’ll open a separate ticket for that.

[mjac0bs]

Thanks for addressing feedback!

[corya-akamai]

Can we pull out the changes to useCalculateHiddenItems and handle those separately?

[corya-akamai]

What was the issue with the previous implementation? A lot of time was spent to avoid unnecessary calculations, if we are reverting that, we need to document why that is necessary. There are no screenshots showing this change, and no unit tests to ensure we aren't breaking something.

[mpolotsk-akamai]

Thanks for the review, @corya-akamai !
The previous implementation had a few issues:

1. The expand button in role rows was showing the total number of assigned permissions, not just the hidden ones.
2. It was showing “+N” even when all items were already visible (e.g., only 3 permissions).
3. The hidden permissions count only updated after expanding and collapsing. If there were no hidden items, the “Expand (+N)” button would disappear completely after collapsing again.

From my understanding, the core issue was that getBoundingClientRect() was called before the layout had fully settled. Combined with -webkit-line-clamp, which visually hides overflow content without actually laying it out, this led to inaccurate measurements, causing the logic to assume all items were hidden, even when they were visible.

[mpolotsk-akamai]

I’ve also added screenshots that show the issues.

[corya-akamai]

@mpolotsk-akamai awesome thanks!

[corya-akamai]

Can we pull that useCalculateHidden into another PR?

[mpolotsk-akamai]

After discussion with @corya-akamai and @aaleksee-akamai , I’ve removed the fix for the Expand/Hide functionality from this PR. That issue will be addressed separately in a dedicated PR.

[linode-gh-bot]

Cloud Manager UI test results

🎉 605 passing tests on test run #9 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
0 Failing	605 Passing	4 Skipped	119m 40s