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
RedHatInsights · Feb 28, 2024 · 2465ce8 · 2465ce8
1 parent fd3e39e
commit 2465ce8
Show file tree

Hide file tree

Showing 10 changed files with 23 additions and 37 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;