From 593ce6177afb1a1c9876fed40d25ef1ea3c6f043 Mon Sep 17 00:00:00 2001 From: Martin Hradil Date: Wed, 27 Mar 2024 01:56:37 +0000 Subject: [PATCH] WizardModal: use current pf wizard No-Issue --- src/components/access-tab.tsx | 40 +++---- src/components/wizard-modal.tsx | 100 +++++++++++------- .../group-detail-role-management.scss | 24 ++--- .../group-detail-role-management.tsx | 10 +- .../e2e/groups_and_users/group_roles.js | 2 +- test/cypress/e2e/misc/rbac.js | 1 + 6 files changed, 88 insertions(+), 89 deletions(-) diff --git a/src/components/access-tab.tsx b/src/components/access-tab.tsx index 37eb07d41b..b7e430dbd0 100644 --- a/src/components/access-tab.tsx +++ b/src/components/access-tab.tsx @@ -541,7 +541,7 @@ export class AccessTab extends Component { { id: 0, name: t`Select a user`, - component: ( + children: ( { } /> ), - backButtonText: t`Cancel`, - enableNext: hasUser, }, { id: 1, name: t`Select role(s)`, - component: ( + children: ( { pulpObjectType={pulpObjectType} /> ), - canJumpTo: hasUser, - enableNext: hasUser && hasRoles, + isDisabled: !hasUser, }, { id: 2, name: t`Preview`, - component: , - nextButtonText: t`Add`, - canJumpTo: hasUser && hasRoles, - isFinished: true, + children: , + isDisabled: !(hasUser && hasRoles), }, ]; @@ -617,7 +612,7 @@ export class AccessTab extends Component { { id: 0, name: t`Select a group`, - component: ( + children: ( { } /> ), - backButtonText: t`Cancel`, - enableNext: hasGroup, }, { id: 1, name: t`Select role(s)`, - component: ( + children: ( { pulpObjectType={pulpObjectType} /> ), - canJumpTo: hasGroup, - enableNext: hasGroup && hasRoles, + isDisabled: !hasGroup, }, { id: 2, name: t`Preview`, - component: , - nextButtonText: t`Add`, - canJumpTo: hasGroup && hasRoles, - isFinished: true, + children: , + isDisabled: !(hasGroup && hasRoles), }, ]; @@ -692,7 +682,7 @@ export class AccessTab extends Component { { id: 0, name: t`Select role(s)`, - component: ( + children: ( { pulpObjectType={pulpObjectType} /> ), - backButtonText: t`Cancel`, - enableNext: hasRoles, }, { id: 1, name: t`Preview`, - component: ( + children: ( ), - nextButtonText: t`Add`, - canJumpTo: hasRoles, - isFinished: true, + isDisabled: !hasRoles, }, ]; diff --git a/src/components/wizard-modal.tsx b/src/components/wizard-modal.tsx index d3b8b4e536..e958db7b69 100644 --- a/src/components/wizard-modal.tsx +++ b/src/components/wizard-modal.tsx @@ -1,47 +1,69 @@ import { t } from '@lingui/macro'; -import { Modal, ModalVariant } from '@patternfly/react-core'; import { - Wizard as PFWizard, - type WizardStep, -} from '@patternfly/react-core/deprecated'; -import React from 'react'; + Modal, + ModalVariant, + Wizard, + WizardHeader, + WizardStep, +} from '@patternfly/react-core'; +import React, { type ReactNode } from 'react'; interface Props { - steps: WizardStep[]; - title: string; - variant?: ModalVariant; onClose: () => void; onSave: () => void; + steps: { + children: ReactNode; + id: string | number; + isDisabled?: boolean; + name: string; + }[]; + title: string; } -export const WizardModal = ({ - steps, - title, - onClose, - onSave, - variant, -}: Props) => ( - - - -); +export const WizardModal = ({ onClose, onSave, steps, title }: Props) => { + const footer = { + backButtonText: t`Back`, + cancelButtonText: t`Cancel`, + nextButtonText: t`Next`, + }; + + return ( + + + } + navAriaLabel={t`${title} steps`} + onClose={onClose} + onSave={onSave} + > + {steps.map((step, i, { [i + 1]: next, length }) => + i === length - 1 ? ( + + ) : ( + + ), + )} + + + ); +}; diff --git a/src/containers/group-management/group-detail-role-management/group-detail-role-management.scss b/src/containers/group-management/group-detail-role-management/group-detail-role-management.scss index 5d45ba2b42..4c005ddca9 100644 --- a/src/containers/group-management/group-detail-role-management/group-detail-role-management.scss +++ b/src/containers/group-management/group-detail-role-management/group-detail-role-management.scss @@ -6,16 +6,10 @@ } .hub-custom-wizard-layout { - padding: 1rem 1.5rem 0; - .hub-select-roles-content { overflow: auto; } - .pf-v5-c-pagination.pf-m-bottom { - padding-top: 0; - } - .hub-permission { margin: 3px; } @@ -41,15 +35,15 @@ justify-content: center; height: 400px; } -} -.hub-loading-wizard { - display: flex; - align-items: center; -} + &.hub-no-data { + display: flex; + justify-content: center; + min-height: 590px; + } -.hub-no-data { - display: flex; - justify-content: center; - min-height: 590px; + &.hub-loading-wizard { + display: flex; + align-items: center; + } } diff --git a/src/containers/group-management/group-detail-role-management/group-detail-role-management.tsx b/src/containers/group-management/group-detail-role-management/group-detail-role-management.tsx index 3f57d642b4..0e7a3ce56e 100644 --- a/src/containers/group-management/group-detail-role-management/group-detail-role-management.tsx +++ b/src/containers/group-management/group-detail-role-management/group-detail-role-management.tsx @@ -182,23 +182,19 @@ const GroupDetailRoleManagement: FunctionComponent = ({ { id: 0, name: t`Select role(s)`, - component: ( + children: ( setSelectedRoles(roles)} /> ), - backButtonText: t`Cancel`, - enableNext: isPreviewEnabled, }, { id: 1, name: t`Preview`, - component: , - nextButtonText: t`Add`, - canJumpTo: isPreviewEnabled, - isFinished: true, + children: , + isDisabled: !isPreviewEnabled, }, ]; diff --git a/test/cypress/e2e/groups_and_users/group_roles.js b/test/cypress/e2e/groups_and_users/group_roles.js index 982a5c4cfe..683399df2c 100644 --- a/test/cypress/e2e/groups_and_users/group_roles.js +++ b/test/cypress/e2e/groups_and_users/group_roles.js @@ -136,7 +136,7 @@ describe('Group Roles Tests', () => { .should('not.be.disabled') .click(); - cy.get('[aria-label="Add roles content"]').contains('Selected roles'); + cy.get('.pf-v5-c-wizard').contains('Selected roles'); cy.get(`[data-cy="HubPermission-${testContainerRole.name}"]`); cy.contains('Next').click(); diff --git a/test/cypress/e2e/misc/rbac.js b/test/cypress/e2e/misc/rbac.js index 6c99c5b479..845a6cac1d 100644 --- a/test/cypress/e2e/misc/rbac.js +++ b/test/cypress/e2e/misc/rbac.js @@ -285,6 +285,7 @@ describe('RBAC test for user with permissions', () => { cy.galaxykit('task wait all'); cy.visit(`${uiPrefix}repo/published/testspace2/testcollection2`); + cy.contains('Go to documentation'); // can Delete collection cy.openHeaderKebab();