CONSOLE-4659: Replace Bootstrap Responsive utilities with PatternFly … #15261

rhamilto · 2025-07-09T14:04:22Z

…Display

openshift-ci-robot · 2025-07-09T14:04:28Z

@rhamilto: This pull request references CONSOLE-4659 which is a valid jira issue.

Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the story to target the "4.20.0" version, but no target version was set.

Details

In response to this:

…Display

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

rhamilto · 2025-07-09T14:05:17Z

code approval:
/assign @logonoff
qe approval:
/assign @yapei

This is tech debt, so nothing for PX or docs to review.
/label px-approved
/label docs-approved

logonoff

/lgtm

🥳

sg00dwin · 2025-07-09T17:12:00Z

Robb, These breakpoint choices may have been intentional, I just wanted to note that the bootstrap responsive class size names (-xs, -sm, etc) do not correspond to the size names for the Patternfly global breakpoints.

So a one for one change that would maintain consistency for...
hidden-xs corresponds to pf-v6-u-display-none pf-v6-u-display-*-on-md and
hidden-xs hidden-sm corresponds to pf-v6-u-display-none pf-v6-u-display-*-on-lg

rhamilto · 2025-07-09T17:42:13Z

Robb, These breakpoint choices may have been intentional, I just wanted to note that the bootstrap responsive class size names (-xs, -sm, etc) do not correspond to the size names for the Patternfly global breakpoints.

So a one for one change that would maintain consistency for... hidden-xs corresponds to pf-v6-u-display-none pf-v6-u-display-*-on-md and hidden-xs hidden-sm corresponds to pf-v6-u-display-none pf-v6-u-display-*-on-lg

Thanks, @sg00dwin! In my testing, the changes I've included provide the intended functionality even though they aren't an exact match.

rhamilto · 2025-07-09T19:02:44Z

/test okd-scos-e2e-aws-ovn

rhamilto · 2025-07-09T23:21:33Z

/test okd-scos-e2e-aws-ovn

rhamilto · 2025-07-10T12:31:51Z

/test okd-scos-e2e-aws-ovn

rhamilto · 2025-07-10T18:11:45Z

/test okd-scos-e2e-aws-ovn

yapei · 2025-07-11T03:48:43Z

frontend/public/components/api-explorer.tsx

  return (
    <span className="co-resource-item">
-      <span className="co-resource-icon--fixed-width hidden-xs">
+      <span className="co-resource-icon--fixed-width pf-v6-u-display-none pf-v6-u-display-flex-on-sm">


resource icon on API Explorer list page is still visible on smallest width

yapei · 2025-07-11T03:54:41Z

frontend/public/components/configmap.jsx

+  '',
+  '',
+  '',
+  'pf-v6-u-display-none pf-v6-u-display-table-cell-on-sm',
+  Kebab.columnClass,


all default columns are still visible at smallest width

Updated.

Screen.Recording.2025-07-11.at.8.25.02.AM.mov

yapei · 2025-07-11T04:00:08Z

frontend/public/components/edit-yaml.jsx

                      type="submit"
                      variant="secondary"
-                      className="pf-v6-c-button--align-right hidden-sm hidden-xs"
+                      className="pf-v6-c-button--align-right pf-v6-u-display-none pf-v6-u-display-flex-on-sm"


I can still see Download button at smallest screen width

yapei · 2025-07-11T04:06:59Z

frontend/public/components/events.jsx

            {obj.namespace && (
              <ResourceLink
-                className="co-sysevent__resourcelink hidden-xs"
+                className="co-sysevent__resourcelink pf-v6-u-display-none pf-v6-u-display-block-on-sm"


Namespace link still visible at smallest screen width

yapei · 2025-07-11T04:09:39Z

frontend/public/components/sidebars/resource-sidebar.tsx

  return (
    <div
-      className="co-p-has-sidebar__sidebar co-p-has-sidebar__sidebar--bordered hidden-sm hidden-xs"
+      className="co-p-has-sidebar__sidebar co-p-has-sidebar__sidebar--bordered pf-v6-u-display-none pf-v6-u-display-block-on-sm"


this seems working well

Screen.Recording.2025-07-11.at.12.08.30.PM.mov

yapei · 2025-07-11T04:12:57Z

frontend/public/components/utils/headings.tsx

                </span>
                {resourceStatus && (
-                  <ResourceStatus additionalClassNames="hidden-xs">
+                  <ResourceStatus additionalClassNames="pf-v6-u-display-none pf-v6-u-display-block-on-sm">


this seems working fine too

…Display

rhamilto · 2025-07-11T12:32:35Z

Excellent reviewing, @yapei. As mentioned in #15261 (comment), I utilized slightly different breakpoints as we have the ability to maintain more of the elements as there is sufficient space to display them (new breakpoint is 576px).

Screen.Recording.2025-07-11.at.8.26.17.AM.mov

Screen.Recording.2025-07-11.at.8.25.50.AM.mov

Screen.Recording.2025-07-11.at.8.22.03.AM.mov

The one exception you noted is the ConfigMaps list page, which I've updated. Good catch.

Screen.Recording.2025-07-11.at.8.25.02.AM.mov

rhamilto · 2025-07-11T19:00:27Z

/retest

yapei · 2025-07-14T07:27:29Z

Thanks for the quick updates!! tested again and working fine

/label qe-approved

openshift-ci-robot · 2025-07-14T07:27:35Z

@rhamilto: This pull request references CONSOLE-4659 which is a valid jira issue.

Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the story to target the "4.20.0" version, but no target version was set.

Details

In response to this:

…Display

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

rhamilto · 2025-07-14T12:01:51Z

/test okd-scos-e2e-aws-ovn

rhamilto · 2025-07-14T15:04:50Z

/test okd-scos-e2e-aws-ovn

rhamilto · 2025-07-14T18:01:04Z

/retest

rhamilto · 2025-07-15T12:28:57Z

/retest

logonoff

/lgtm

openshift-ci · 2025-07-15T14:38:04Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: logonoff, rhamilto, sg00dwin

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

The pull request process is described here

Details

Needs approval from an approver in each of these files:

~~frontend/OWNERS~~ [logonoff,rhamilto]

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

rhamilto · 2025-07-15T19:55:08Z

/retest

openshift-ci-robot added the jira/valid-reference Indicates that this PR references a valid Jira ticket of any type. label Jul 9, 2025

openshift-ci bot requested review from cajieh and sg00dwin July 9, 2025 14:04

openshift-ci bot added component/core Related to console core functionality component/sdk Related to console-plugin-sdk approved Indicates a PR has been approved by an approver from all required OWNERS files. component/shared Related to console-shared labels Jul 9, 2025

openshift-ci bot assigned logonoff and yapei Jul 9, 2025

openshift-ci bot added px-approved Signifies that Product Support has signed off on this PR docs-approved Signifies that Docs has signed off on this PR labels Jul 9, 2025

logonoff approved these changes Jul 9, 2025

View reviewed changes

openshift-ci bot added the lgtm Indicates that a PR is ready to be merged. label Jul 9, 2025

sg00dwin approved these changes Jul 9, 2025

View reviewed changes

yapei reviewed Jul 11, 2025

View reviewed changes

CONSOLE-4659: Replace Bootstrap Responsive utilities with PatternFly …

2a981af

…Display

rhamilto force-pushed the CONSOLE-4659 branch from e585da8 to 2a981af Compare July 11, 2025 12:27

openshift-ci bot removed the lgtm Indicates that a PR is ready to be merged. label Jul 11, 2025

openshift-ci bot added the qe-approved Signifies that QE has signed off on this PR label Jul 14, 2025

logonoff approved these changes Jul 15, 2025

View reviewed changes

openshift-ci bot added the lgtm Indicates that a PR is ready to be merged. label Jul 15, 2025

openshift-merge-bot bot merged commit 1628346 into openshift:main Jul 15, 2025
6 of 7 checks passed

rhamilto deleted the CONSOLE-4659 branch July 15, 2025 21:17

CONSOLE-4659: Replace Bootstrap Responsive utilities with PatternFly … #15261

CONSOLE-4659: Replace Bootstrap Responsive utilities with PatternFly … #15261

Uh oh!

Conversation

rhamilto commented Jul 9, 2025

Uh oh!

openshift-ci-robot commented Jul 9, 2025 • edited by openshift-ci bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rhamilto commented Jul 9, 2025

Uh oh!

logonoff left a comment

Choose a reason for hiding this comment

Uh oh!

sg00dwin commented Jul 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rhamilto commented Jul 9, 2025

Uh oh!

rhamilto commented Jul 9, 2025

Uh oh!

rhamilto commented Jul 9, 2025

Uh oh!

rhamilto commented Jul 10, 2025

Uh oh!

rhamilto commented Jul 10, 2025

Uh oh!

yapei Jul 11, 2025

Choose a reason for hiding this comment

Uh oh!

yapei Jul 11, 2025

Choose a reason for hiding this comment

Uh oh!

rhamilto Jul 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yapei Jul 11, 2025

Choose a reason for hiding this comment

Uh oh!

yapei Jul 11, 2025

Choose a reason for hiding this comment

Uh oh!

yapei Jul 11, 2025

Choose a reason for hiding this comment

Uh oh!

yapei Jul 11, 2025

Choose a reason for hiding this comment

Uh oh!

rhamilto commented Jul 11, 2025

Uh oh!

rhamilto commented Jul 11, 2025

Uh oh!

yapei commented Jul 14, 2025

Uh oh!

openshift-ci-robot commented Jul 14, 2025 • edited by openshift-ci bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rhamilto commented Jul 14, 2025

Uh oh!

rhamilto commented Jul 14, 2025

Uh oh!

rhamilto commented Jul 14, 2025

Uh oh!

rhamilto commented Jul 15, 2025

Uh oh!

logonoff left a comment

Choose a reason for hiding this comment

Uh oh!

openshift-ci bot commented Jul 15, 2025

Uh oh!

rhamilto commented Jul 15, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

openshift-ci-robot commented Jul 9, 2025 •

edited by openshift-ci bot

Loading

sg00dwin commented Jul 9, 2025 •

edited

Loading

rhamilto Jul 11, 2025 •

edited

Loading

openshift-ci-robot commented Jul 14, 2025 •

edited by openshift-ci bot

Loading