ODC-6064: Update PatternFly to fix unexpected spacing below topology toolbar

[jerolimov]

Fixes:
https://issues.redhat.com/browse/ODC-6064

Analysis / Root cause:
With one of the latest @patternfly/react-core the Toolbar component renders an unexpceted spacing. See before screenshots below.

Solution Description:
Update @patternfly/patternfly and @patternfly/react-core to the latest version which includes the bugfix

See also

• Unexpected spacing below Toolbar / ToolbarContent patternfly/patternfly-react#5962
• fix(toolbar): fixed hidden/visible mods patternfly/patternfly#4197
• chore(deps): update dependency @patternfly/patternfly to v4.119.3 patternfly/patternfly-react#5971

Screen shots / Gifs for design review:

Broken topology toolbar before:

Topology toolbar now (again without spacing):

Search for other UI changes.

The only differences I noticed yet is that the perspective dropdown shows now a gray bottom-border line which changes to blue if the user hovers it.

Before:

After (without the change in _nav_header.scss, with the change there is no visual change to the old version):

With the latest @patternfly/patternfly update this issue is fixed again. I don't find any other layout issues yet.

Unit test coverage report:
Untouched

Test setup:
Just open the developer perspective > topology.

Browser conformance:

• Chrome
• Firefox
• Safari
• Edge

/kind bug

[jerolimov]

I think we should wait for UX feedback if the perspective switch change is a bug or a feature...

It is at least the default behavior of a PatternFly dropdown https://www.patternfly.org/v4/components/dropdown

/hold

[rhamilto]

Search for other UI changes. The only differences I noticed yet is that the perspective dropdown shows now a gray bottom-border line which changes to blue if the user hovers it.

I noticed this as well and reported it at patternfly/patternfly#4155 (comment) (which I now realize wasn't the offending PR, but the issue links to the offending PR). I worked around the issue with https://github.com/openshift/console/pull/9419/files#diff-8f2141c9b030221e65e6a3c024604a13181de9046fdc1f54c60e23b6a10c045eR14-R18

[rhamilto]

Fix for the breaking PatternFly change coming. See patternfly/patternfly#4155 (comment)

[jerolimov]

@rhamilto thanks for these links.

For this PR I removed the border also from for the :after element (see _nav-header.scss change). So that there is no visual difference anymore to the old version. From my side this PR is fine with this change, but let me know what you think. :)

I remove the hold as I don't know any visual blocker at the moment. I also updated PF again and rebased this PR.
/unhold

[rhamilto]

@rhamilto thanks for these links.

For this PR I removed the border also from for the :after element (see _nav-header.scss change). So that there is no visual difference anymore to the old version. From my side this PR is fine with this change, but let me know what you think. :)

I remove the hold as I don't know any visual blocker at the moment. I also updated PF again and rebased this PR.
/unhold

PatternFly is to revert the changes requiring you to add :after to the existing rule. I think it would be best to wait until those changes land so there is no need to add to the existing override as once the reversion is released, the :after addition will be unnecessary.

[jerolimov]

OK. Waiting for

• fix(context-selector,dropdown): revert move ::before values to ::after patternfly/patternfly#4213 + release
• maybe @patternfly/react-core release as well

/hold

[jerolimov]

@rhamilto patternfly/patternfly#4213 is merged and released. I updated this PR again to the latest PF releases.

The topology toolbar is still fine with this PR, the perspective switch looks good again (without any CSS change in this PR anymore). And I could not find any other UI glitch at the moment.

From my side we could update PF now. Look good to you as well?

Are you fine with adding such a update-patternfly.sh script so that everyone knows how to update it (use prerelease instead latest, -W, --exact) 😄 ?

/hold cancel

[rhamilto]

From my side we could update PF now. Look good to you as well?

Yep!

Are you fine with adding such a update-patternfly.sh script so that everyone knows how to update it (use prerelease instead latest, -W, --exact) 😄 ?

I'll defer to the @spadgett and @christianvogt on that one.

[christianvogt]

If you want to deliver a script because it makes the task easier. go for it.

[rhamilto]

/lgtm

[rhamilto]

/lgtm

[rhamilto]

Sorry, @jerolimov. It looks like my PR landed before yours did, and now you need to rebase.

[jerolimov]

Sorry, @jerolimov. It looks like my PR landed before yours did, and now you need to rebase.

No problem. Rebased, re-run the script and done. ;)

[rhamilto]

/lgtm

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: jerolimov, rhamilto

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• frontend/OWNERS [jerolimov,rhamilto]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment