ansible · himdel · Mar 27, 2024 · Mar 27, 2024
diff --git a/src/components/access-tab.tsx b/src/components/access-tab.tsx
@@ -541,7 +541,7 @@ export class AccessTab extends Component<IProps> {
       {
         id: 0,
         name: t`Select a user`,
-        component: (
+        children: (
           <SelectUser
             assignedUsers={users}
             selectedUser={user}
@@ -552,13 +552,11 @@ export class AccessTab extends Component<IProps> {
             }
           />
         ),
-        backButtonText: t`Cancel`,
-        enableNext: hasUser,
       },
       {
         id: 1,
         name: t`Select role(s)`,
-        component: (
+        children: (
           <SelectRoles
             assignedRoles={assignedRoles}
             selectedRoles={roles}
@@ -571,16 +569,13 @@ export class AccessTab extends Component<IProps> {
             pulpObjectType={pulpObjectType}
           />
         ),
-        canJumpTo: hasUser,
-        enableNext: hasUser && hasRoles,
+        isDisabled: !hasUser,
       },
       {
         id: 2,
         name: t`Preview`,
-        component: <PreviewRoles user={user} selectedRoles={roles} />,
-        nextButtonText: t`Add`,
-        canJumpTo: hasUser && hasRoles,
-        isFinished: true,
+        children: <PreviewRoles user={user} selectedRoles={roles} />,
+        isDisabled: !(hasUser && hasRoles),
       },
     ];
 
@@ -617,7 +612,7 @@ export class AccessTab extends Component<IProps> {
       {
         id: 0,
         name: t`Select a group`,
-        component: (
+        children: (
           <SelectGroup
             assignedGroups={groups}
             selectedGroup={group}
@@ -628,13 +623,11 @@ export class AccessTab extends Component<IProps> {
             }
           />
         ),
-        backButtonText: t`Cancel`,
-        enableNext: hasGroup,
       },
       {
         id: 1,
         name: t`Select role(s)`,
-        component: (
+        children: (
           <SelectRoles
             assignedRoles={assignedRoles}
             selectedRoles={roles}
@@ -647,16 +640,13 @@ export class AccessTab extends Component<IProps> {
             pulpObjectType={pulpObjectType}
           />
         ),
-        canJumpTo: hasGroup,
-        enableNext: hasGroup && hasRoles,
+        isDisabled: !hasGroup,
       },
       {
         id: 2,
         name: t`Preview`,
-        component: <PreviewRoles group={group} selectedRoles={roles} />,
-        nextButtonText: t`Add`,
-        canJumpTo: hasGroup && hasRoles,
-        isFinished: true,
+        children: <PreviewRoles group={group} selectedRoles={roles} />,
+        isDisabled: !(hasGroup && hasRoles),
       },
     ];
 
@@ -692,7 +682,7 @@ export class AccessTab extends Component<IProps> {
       {
         id: 0,
         name: t`Select role(s)`,
-        component: (
+        children: (
           <SelectRoles
             assignedRoles={assignedRoles}
             selectedRoles={roles}
@@ -702,18 +692,14 @@ export class AccessTab extends Component<IProps> {
             pulpObjectType={pulpObjectType}
           />
         ),
-        backButtonText: t`Cancel`,
-        enableNext: hasRoles,
       },
       {
         id: 1,
         name: t`Preview`,
-        component: (
+        children: (
           <PreviewRoles user={user} group={group} selectedRoles={roles} />
         ),
-        nextButtonText: t`Add`,
-        canJumpTo: hasRoles,
-        isFinished: true,
+        isDisabled: !hasRoles,
       },
     ];
 

diff --git 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) => (
-  <Modal
-    isOpen
-    variant={variant ?? ModalVariant.large}
-    showClose={false}
-    aria-label={title}
-    hasNoBodyWrapper
-  >
-    <PFWizard
-      hasNoBodyPadding
-      navAriaLabel={t`${title} steps`}
-      mainAriaLabel={t`${title} content`}
-      backButtonText={t`Back`}
-      cancelButtonText={t`Cancel`}
-      closeButtonAriaLabel={t`Close`}
-      nextButtonText={t`Next`}
-      titleId='wizard-modal-title'
-      descriptionId='wizard-modal-description'
-      title={title}
-      steps={steps}
-      >
-      >
-    />
-  </Modal>
-);
+export const WizardModal = ({ onClose, onSave, steps, title }: Props) => {
+  const footer = {
+    backButtonText: t`Back`,
+    cancelButtonText: t`Cancel`,
+    nextButtonText: t`Next`,
+  };
+
+  return (
+    <Modal
+      aria-label={title}
+      hasNoBodyWrapper
+      isOpen
+      >
+      showClose={false}
+      variant={ModalVariant.large}
+    >
+      <Wizard
+        header={
+          <WizardHeader
+            closeButtonAriaLabel={t`Close`}
+            >
+            title={title}
+          />
+        }
+        navAriaLabel={t`${title} steps`}
+        >
+        >
+      >
+        {steps.map((step, i, { [i + 1]: next, length }) =>
+          i === length - 1 ? (
+            <WizardStep
+              key={step.id}
+              {...step}
+              footer={{ ...footer, nextButtonText: t`Add` }}
+            />
+          ) : (
+            <WizardStep
+              key={step.id}
+              {...step}
+              footer={{ ...footer, isNextDisabled: next.isDisabled }}
+            />
+          ),
+        )}
+      </Wizard>
+    </Modal>
+  );
+};
diff --git a/...ontainers/group-management/group-detail-role-management/group-detail-role-management.scss b/...ontainers/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/...containers/group-management/group-detail-role-management/group-detail-role-management.tsx b/...containers/group-management/group-detail-role-management/group-detail-role-management.tsx
@@ -182,23 +182,19 @@ const GroupDetailRoleManagement: FunctionComponent<Props> = ({
     {
       id: 0,
       name: t`Select role(s)`,
-      component: (
+      children: (
         <SelectRoles
           assignedRoles={roles}
           selectedRoles={selectedRoles}
            => setSelectedRoles(roles)}
         />
       ),
-      backButtonText: t`Cancel`,
-      enableNext: isPreviewEnabled,
     },
     {
       id: 1,
       name: t`Preview`,
-      component: <PreviewRoles group={group} selectedRoles={selectedRoles} />,
-      nextButtonText: t`Add`,
-      canJumpTo: isPreviewEnabled,
-      isFinished: true,
+      children: <PreviewRoles group={group} selectedRoles={selectedRoles} />,
+      isDisabled: !isPreviewEnabled,
     },
   ];
 

diff --git 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
@@ -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();