From 2465ce8e944842e763bd6f1a2508b71523bf84ea Mon Sep 17 00:00:00 2001
From: Georgii Karataev <georgkarat@gmail.com>
Date: Wed, 28 Feb 2024 12:09:21 +0100
Subject: [PATCH] fix(RHINENG-5932): Fix found visual regressions after PF5
 migration (#2148)

* fix: Align staleness card title with popover

* fix: Fix missing icons color

* fix: Align Create group button with the rest of toolbar

* chore: Add missing OUIA IDs
---
 package-lock.json                             |  8 +++---
 package.json                                  |  2 +-
 src/Utilities/DeleteModal.js                  |  2 +-
 .../__snapshots__/DeleteModal.test.js.snap    |  8 +++---
 src/Utilities/hooks/useBulkSelectConfig.js    |  1 -
 src/components/GroupsTable/GroupsTable.js     | 25 +++++++------------
 .../Modals/DeleteGroupModal.js                |  6 ++---
 .../HostStalenessCard.js                      |  2 +-
 .../InventoryTable/EntityTableToolbar.test.js |  2 +-
 src/routes/inventory.scss                     |  4 ---
 10 files changed, 23 insertions(+), 37 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e9ba87de7..6d0437041 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
         "@patternfly/react-core": "^5.1.2",
         "@patternfly/react-icons": "^5.2.0",
         "@patternfly/react-table": "^5.1.2",
-        "@redhat-cloud-services/frontend-components": "^4.2.3",
+        "@redhat-cloud-services/frontend-components": "^4.2.4",
         "@redhat-cloud-services/frontend-components-notifications": "^4.1.0",
         "@redhat-cloud-services/frontend-components-utilities": "^4.0.2",
         "@redhat-cloud-services/host-inventory-client": "1.2.13",
@@ -5502,9 +5502,9 @@
       }
     },
     "node_modules/@redhat-cloud-services/frontend-components": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/@redhat-cloud-services/frontend-components/-/frontend-components-4.2.3.tgz",
-      "integrity": "sha512-mc1HNFupS4EQY1ipZa8Tw/lR8L1J4NEtcSVbvMeKwvfFLlrUIG8isTnEHE+e8bjIcMhnCOO37b0K089uSzJHOw==",
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/@redhat-cloud-services/frontend-components/-/frontend-components-4.2.4.tgz",
+      "integrity": "sha512-5xne/DD1/+txtN50YOrKPeJKpSgENkGz4o4oqYMRB+ElJwnupsaOasvyfMwImKggDcAZ/uWLXt8KNoE8ZXhVvA==",
       "dependencies": {
         "@patternfly/react-component-groups": "^5.0.0",
         "@redhat-cloud-services/frontend-components-utilities": "^4.0.0",
diff --git a/package.json b/package.json
index 10c94e8ab..3767b5e8f 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "@patternfly/react-core": "^5.1.2",
     "@patternfly/react-icons": "^5.2.0",
     "@patternfly/react-table": "^5.1.2",
-    "@redhat-cloud-services/frontend-components": "^4.2.3",
+    "@redhat-cloud-services/frontend-components": "^4.2.4",
     "@redhat-cloud-services/frontend-components-notifications": "^4.1.0",
     "@redhat-cloud-services/frontend-components-utilities": "^4.0.2",
     "@redhat-cloud-services/host-inventory-client": "1.2.13",
diff --git a/src/Utilities/DeleteModal.js b/src/Utilities/DeleteModal.js
index 60856850b..342cfa441 100644
--- a/src/Utilities/DeleteModal.js
+++ b/src/Utilities/DeleteModal.js
@@ -47,7 +47,7 @@ const DeleteModal = ({
     >
       <Split hasGutter>
         <SplitItem>
-          <Icon size="xl" className="ins-m-alert">
+          <Icon size="xl" status="warning">
             <ExclamationTriangleIcon />
           </Icon>
         </SplitItem>
diff --git a/src/Utilities/__snapshots__/DeleteModal.test.js.snap b/src/Utilities/__snapshots__/DeleteModal.test.js.snap
index 68ebd537c..e2fb2a78b 100644
--- a/src/Utilities/__snapshots__/DeleteModal.test.js.snap
+++ b/src/Utilities/__snapshots__/DeleteModal.test.js.snap
@@ -77,10 +77,10 @@ exports[`DeleteModal DOM should render correctly with multiple systems 1`] = `
                 class="pf-v5-l-split__item"
               >
                 <span
-                  class="pf-v5-c-icon pf-m-xl ins-m-alert"
+                  class="pf-v5-c-icon pf-m-xl"
                 >
                   <span
-                    class="pf-v5-c-icon__content"
+                    class="pf-v5-c-icon__content pf-m-warning"
                   >
                     <svg
                       aria-hidden="true"
@@ -290,10 +290,10 @@ exports[`DeleteModal DOM should render correctly with one system 1`] = `
                 class="pf-v5-l-split__item"
               >
                 <span
-                  class="pf-v5-c-icon pf-m-xl ins-m-alert"
+                  class="pf-v5-c-icon pf-m-xl"
                 >
                   <span
-                    class="pf-v5-c-icon__content"
+                    class="pf-v5-c-icon__content pf-m-warning"
                   >
                     <svg
                       aria-hidden="true"
diff --git a/src/Utilities/hooks/useBulkSelectConfig.js b/src/Utilities/hooks/useBulkSelectConfig.js
index 5edc6c487..c264145b2 100644
--- a/src/Utilities/hooks/useBulkSelectConfig.js
+++ b/src/Utilities/hooks/useBulkSelectConfig.js
@@ -92,7 +92,6 @@ export const useBulkSelectConfig = (
       onSelectRows(0, value);
     },
     toggleProps: {
-      'data-ouia-component-type': 'bulk-select-toggle-button',
       children: isBulkLoading ? (
         [
           <Fragment key="sd">
diff --git a/src/components/GroupsTable/GroupsTable.js b/src/components/GroupsTable/GroupsTable.js
index 1e2b2ff0f..49003de72 100644
--- a/src/components/GroupsTable/GroupsTable.js
+++ b/src/components/GroupsTable/GroupsTable.js
@@ -450,22 +450,15 @@ const GroupsTable = ({ onCreateGroupClick }) => {
         }}
         actionsConfig={{
           actions: [
-            {
-              label: (
-                <ActionButton
-                  requiredPermissions={[GENERAL_GROUPS_WRITE_PERMISSION]}
-                  noAccessTooltip={NO_MODIFY_GROUPS_TOOLTIP_MESSAGE}
-                  onClick={onCreateGroupClick}
-                >
-                  Create group
-                </ActionButton>
-              ),
-              props: {
-                style: {
-                  backgroundColor: 'transparent',
-                },
-              },
-            },
+            <ActionButton
+              key="create-group-btn"
+              requiredPermissions={[GENERAL_GROUPS_WRITE_PERMISSION]}
+              noAccessTooltip={NO_MODIFY_GROUPS_TOOLTIP_MESSAGE}
+              onClick={onCreateGroupClick}
+              ouiaId="CreateGroupButton"
+            >
+              Create group
+            </ActionButton>,
             {
               label: (
                 <ActionDropdownItem
diff --git a/src/components/InventoryGroups/Modals/DeleteGroupModal.js b/src/components/InventoryGroups/Modals/DeleteGroupModal.js
index 103bd2b94..d680eda52 100644
--- a/src/components/InventoryGroups/Modals/DeleteGroupModal.js
+++ b/src/components/InventoryGroups/Modals/DeleteGroupModal.js
@@ -5,8 +5,6 @@ import componentTypes from '@data-driven-forms/react-form-renderer/component-typ
 import Modal from './Modal';
 import { deleteGroupsById, getGroupsByIds } from '../utils/api';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
-import warningColor from '@patternfly/react-tokens/dist/esm/global_warning_color_100';
-import dangerColor from '@patternfly/react-tokens/dist/esm/global_danger_color_100';
 import {
   Backdrop,
   Bullseye,
@@ -50,7 +48,7 @@ const generateSchema = (groups) => ({
 const generateContent = (groups = []) => ({
   title: groups.length > 1 ? 'Delete groups?' : 'Delete group?',
   titleIconVariant: () => (
-    <Icon color={warningColor.value}>
+    <Icon status="warning">
       <ExclamationTriangleIcon />
     </Icon>
   ),
@@ -133,7 +131,7 @@ const DeleteGroupModal = ({
           : 'Cannot delete group at this time'
       }
       titleIconVariant={() => (
-        <Icon color={dangerColor.value}>
+        <Icon status="danger">
           <ExclamationCircleIcon />
         </Icon>
       )}
diff --git a/src/components/InventoryHostStaleness/HostStalenessCard.js b/src/components/InventoryHostStaleness/HostStalenessCard.js
index 836f9186a..038503f82 100644
--- a/src/components/InventoryHostStaleness/HostStalenessCard.js
+++ b/src/components/InventoryHostStaleness/HostStalenessCard.js
@@ -195,8 +195,8 @@ const HostStalenessCard = ({ canModifyHostStaleness }) => {
           <CardHeader>
             <Title headingLevel="h4" size="xl" id="HostTitle">
               Organization level system staleness and deletion
+              <InventoryHostStalenessPopover hasEdgeSystems={hasEdgeSystems} />
             </Title>
-            <InventoryHostStalenessPopover hasEdgeSystems={hasEdgeSystems} />
           </CardHeader>
           <CardBody>
             <p>
diff --git a/src/components/InventoryTable/EntityTableToolbar.test.js b/src/components/InventoryTable/EntityTableToolbar.test.js
index 57a9c3e87..a22dfcbb9 100644
--- a/src/components/InventoryTable/EntityTableToolbar.test.js
+++ b/src/components/InventoryTable/EntityTableToolbar.test.js
@@ -31,7 +31,7 @@ const expectDefaultFiltersVisible = async () => {
 
   await userEvent.click(
     screen.getByRole('button', {
-      name: 'Conditional filter',
+      name: /conditional filter toggle/i,
     })
   );
   DEFAULT_FILTERS.forEach((filterName) =>
diff --git a/src/routes/inventory.scss b/src/routes/inventory.scss
index 547a2d718..2340e5509 100644
--- a/src/routes/inventory.scss
+++ b/src/routes/inventory.scss
@@ -19,10 +19,6 @@
     background: var(--pf-v5-global--BackgroundColor--100);
 }
 
-svg.ins-m-alert {
-    fill: var(--pf-v5-global--warning-color--100);
-}
-
 .ins-c-inventory__table--remove {
     .pf-v5-c-clipboard-copy {
         margin: 0 3rem;