ROX-31771: Fix user profile integration tests

[sachaudh]

Description

This PR fixes the user profile page integration tests.

User-facing documentation

• CHANGELOG.md is updated OR update is not needed
• documentation PR is created and is linked above OR is not needed

Testing and quality

• the change is production ready: the change is GA, or otherwise the functionality is gated by a feature flag
• CI results are inspected

Automated testing

• added unit tests
• added e2e tests
• added regression tests
• added compatibility tests
• modified existing tests

How I validated my change

Before:

After:

[openshift-ci]

Skipping CI for Draft Pull Request.
If you want CI signal for your change, please convert it to an actual PR.
You can still manually trigger a test run with /test all

[sachaudh]

@zhenpesky @mansursyed We seem to be using NavItem and NavExpandable in the User Profile page, which don't seem to show a good active state in v6 of PatternFly (see link). I noticed we have white-on-white, so maybe that's why.

Even if I make the background gray, like in our PatternFly v5, it still doesn't look nice.

I'm wondering if using Tabs would be better here (see link). There seem to be vertical tabs and even an expandable tab with more visible active states.

cc: @dvail @pedrottimark

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 49.34%. Comparing base (69d9c49) to head (bb91c32).

Additional details and impacted files

@@                  Coverage Diff                  @@
##           dv/ROX-28622-pf-6   #18007      +/-   ##
=====================================================
- Coverage              49.35%   49.34%   -0.01%     
=====================================================
  Files                   2699     2699              
  Lines                 198960   198960              
=====================================================
- Hits                   98199    98185      -14     
- Misses                 93144    93155      +11     
- Partials                7617     7620       +3     

Flag	Coverage Δ
go-unit-tests	49.34% <ø> (-0.01%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[sachaudh]

@dvail never used git-spice before. Do I need to use it for the work we're doing?

[dvail]

We seem to be using NavItem and NavExpandable in the User Profile page, which don't seem to show a good active state in v6 of PatternFly

@mansursyed @zhenpesky Of note, I've already found a couple of other places where this is going to be a problem in the app, global search being another one. I really don't know why the PF team decided to make the active state nearly indistinguishable on these types of navigation items but it does reduce clarity in our UI. Depending on your guidance here, we might want to think on if there is an alternate pattern we can use and replace all instances where this is an issue. Possibly with Tabs like @sachaudh mentioned above.

This might be a good topic for the UI/UX sync on Wed too.

[dvail]

@dvail never used git-spice before. Do I need to use it for the work we're doing?

I don't think so, and honestly I'm not sure how this would work with both of us working on the same stack as git-spice keeps metadata locally on our development machines.

I use it primarily because it makes stacking branches/PRs, changing between them, and rebasing the entire stack very easy. Now that we are working on individual page issues though, I think the stacks will be much shorter, and mostly targeting the PF6 feature branch directly (soon...), so stack management will be less of a concern.

[sachaudh]

@dvail, it looks like an earlier commit might have had the side effect of fixing this issue. It had auto-closed because I resolved the merge conflict by choosing the changes from the branch's head. I'll reopen for the visual changes, though.

[sachaudh]

@mansursyed I do want to push this along, so I'll use the Vertical Tab and Expandable Tab approach for now. We can sync on further changes separately.

[sachaudh]

@mansursyed @dvail, I wanted to brainstorm another option for that page. I initially tried using Tabs, but it felt odd to have a Vertical Tab and a Vertical Expandable Tab. It would have looked nicer with just one or the other, but together it still looked weird.

Another option could be a Selector. Since the user roles list is dynamic, it should work well as a select option.

@mansursyed I know you wanted some time to think about this one. Let me know if any of the previous suggestions work for you, or if you have any others. I'm ok with whatever is most consistent and simplest 👍🏼