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;