Wizard: Set up custom footers

This sets up custom footers for the new Wizard. Both the main and reviews footers are now located in components subfolder next to the Wizard. The review footer for the old wizard is placed in the Review step, which feels less convenient.

Author: regexowl

src/Components/CreateImageWizard3/CreateImageWizard3.tsx

@@ -15,13 +15,17 @@ import {
 
 import { useGetBlueprintQuery } from '@/store/api/backend';
 import { selectSelectedBlueprintId } from '@/store/slices/blueprint';
+import { selectIsOnPremise } from '@/store/slices/env';
 import { loadWizardState } from '@/store/slices/wizard';
 import {
   closeWizardModal,
   selectIsWizardModalOpen,
   selectWizardModalMode,
 } from '@/store/slices/wizardModal';
 
+import CustomWizardFooter from './components/CustomWizardFooter';
+import ReviewWizardFooter from './components/ReviewWizardFooter';
+
 import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import DetailsStep from '../CreateImageWizard/steps/Details';
 import FileSystemStep from '../CreateImageWizard/steps/FileSystem';
@@ -41,18 +45,45 @@ import RepeatableBuildStep from '../CreateImageWizard/steps/Snapshot';
 import TimezoneStep from '../CreateImageWizard/steps/Timezone';
 import UsersStep from '../CreateImageWizard/steps/UsersAndGroups';
 import { mapRequestToState } from '../CreateImageWizard/utilities/requestMapper';
+import {
+  useDetailsValidation,
+  useFilesystemValidation,
+  useFirewallValidation,
+  useFirstBootValidation,
+  useHostnameValidation,
+  useKernelValidation,
+  useLocaleValidation,
+  useRegistrationValidation,
+  useServicesValidation,
+  useSnapshotValidation,
+  useTimezoneValidation,
+} from '../CreateImageWizard/utilities/useValidation';
 
 export const CreateImageWizard3 = () => {
   const dispatch = useAppDispatch();
   const showWizardModal = useAppSelector(selectIsWizardModalOpen);
   const mode = useAppSelector(selectWizardModalMode);
   const blueprintId = useAppSelector(selectSelectedBlueprintId);
+  const isOnPremise = useAppSelector(selectIsOnPremise);
 
   const { data: blueprintDetails, isSuccess } = useGetBlueprintQuery(
     { id: blueprintId || '' },
     { skip: !(mode === 'edit' && !!blueprintId) },
   );
 
+  // Validation hooks
+  const detailsValidation = useDetailsValidation();
+  const registrationValidation = useRegistrationValidation();
+  const snapshotValidation = useSnapshotValidation();
+  const filesystemValidation = useFilesystemValidation();
+  const timezoneValidation = useTimezoneValidation();
+  const localeValidation = useLocaleValidation();
+  const hostnameValidation = useHostnameValidation();
+  const kernelValidation = useKernelValidation();
+  const servicesValidation = useServicesValidation();
+  const firewallValidation = useFirewallValidation();
+  const firstBootValidation = useFirstBootValidation();
+
   useEffect(() => {
     if (mode === 'edit' && blueprintId && blueprintDetails) {
       const editBlueprintState = mapRequestToState(blueprintDetails);
@@ -102,7 +133,21 @@ export const CreateImageWizard3 = () => {
           />
         }
       >
-        <WizardStep name='Base settings' id='base-settings-step'>
+        <WizardStep
+          name='Base settings'
+          id='base-settings-step'
+          footer={
+            <CustomWizardFooter
+              disableBack={true}
+              disableNext={
+                detailsValidation.disabledNext ||
+                registrationValidation.disabledNext ||
+                snapshotValidation.disabledNext
+              }
+              isOnPremise={isOnPremise}
+            />
+          }
+        >
           <Form>
             <Title headingLevel='h1' size='xl'>
               Basic image settings
@@ -122,7 +167,13 @@ export const CreateImageWizard3 = () => {
             <OscapStep />
           </Form>
         </WizardStep>
-        <WizardStep name='Repositories and packages' id='content-step'>
+        <WizardStep
+          name='Repositories and packages'
+          id='content-step'
+          footer={
+            <CustomWizardFooter disableNext={false} isOnPremise={isOnPremise} />
+          }
+        >
           <Form>
             <Title headingLevel='h1' size='xl'>
               Repositories and packages
@@ -138,7 +189,25 @@ export const CreateImageWizard3 = () => {
             <PackagesStep />
           </Form>
         </WizardStep>
-        <WizardStep name='Advanced settings' id='advance-settings-step'>
+        <WizardStep
+          name='Advanced settings'
+          id='advance-settings-step'
+          footer={
+            <CustomWizardFooter
+              disableNext={
+                filesystemValidation.disabledNext ||
+                timezoneValidation.disabledNext ||
+                localeValidation.disabledNext ||
+                hostnameValidation.disabledNext ||
+                kernelValidation.disabledNext ||
+                servicesValidation.disabledNext ||
+                firewallValidation.disabledNext ||
+                firstBootValidation.disabledNext
+              }
+              isOnPremise={isOnPremise}
+            />
+          }
+        >
           <Form>
             <Title headingLevel='h1' size='xl'>
               Advanced settings
@@ -168,7 +237,11 @@ export const CreateImageWizard3 = () => {
             <FirstBootStep />
           </Form>
         </WizardStep>
-        <WizardStep name='Review' id='review-step'>
+        <WizardStep
+          name='Review'
+          id='review-step'
+          footer={<ReviewWizardFooter />}
+        >
           <Form>
             <Title headingLevel='h1' size='xl'>
               Review image configuration

src/Components/CreateImageWizard3/components/CustomWizardFooter.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+
+import {
+  Button,
+  Flex,
+  useWizardContext,
+  WizardFooterWrapper,
+} from '@patternfly/react-core';
+import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
+
+import { AMPLITUDE_MODULE_NAME } from '@/constants';
+
+type CustomWizardFooterPropType = {
+  disableBack?: boolean;
+  disableNext: boolean;
+  beforeNext?: () => boolean;
+  isOnPremise: boolean;
+};
+
+export const CustomWizardFooter = ({
+  disableBack,
+  disableNext,
+  beforeNext,
+  isOnPremise,
+}: CustomWizardFooterPropType) => {
+  const { goToNextStep, goToPrevStep, close, activeStep } = useWizardContext();
+  const { analytics } = useChrome();
+  const cancelBtnID = 'wizard-cancel-btn';
+
+  return (
+    <WizardFooterWrapper>
+      <Flex columnGap={{ default: 'columnGapSm' }}>
+        <Button
+          variant='primary'
+          onClick={() => {
+            if (!beforeNext || beforeNext()) goToNextStep();
+          }}
+          isDisabled={disableNext}
+        >
+          Next
+        </Button>
+        <Button
+          variant='secondary'
+          onClick={() => {
+            goToPrevStep();
+          }}
+          isDisabled={disableBack || false}
+        >
+          Back
+        </Button>
+        <Button
+          variant='link'
+          onClick={() => {
+            if (!isOnPremise) {
+              analytics.track(`${AMPLITUDE_MODULE_NAME} - Button Clicked`, {
+                module: AMPLITUDE_MODULE_NAME,
+                button_id: cancelBtnID,
+                active_step_id: activeStep.id,
+              });
+            }
+            close();
+          }}
+        >
+          Cancel
+        </Button>
+      </Flex>
+    </WizardFooterWrapper>
+  );
+};
+
+export default CustomWizardFooter;

src/Components/CreateImageWizard3/components/ReviewWizardFooter.tsx

@@ -0,0 +1,139 @@
+import React, { useEffect, useState } from 'react';
+
+import {
+  Button,
+  Dropdown,
+  Flex,
+  MenuToggle,
+  useWizardContext,
+  WizardFooterWrapper,
+} from '@patternfly/react-core';
+import { MenuToggleElement } from '@patternfly/react-core/dist/esm/components/MenuToggle/MenuToggle';
+import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
+import { useStore } from 'react-redux';
+
+import { selectSelectedBlueprintId } from '@/store/slices/blueprint';
+import { selectIsOnPremise } from '@/store/slices/env';
+import { selectOrgId } from '@/store/slices/wizard';
+import { selectWizardModalMode } from '@/store/slices/wizardModal';
+
+import {
+  useCreateBPWithNotification as useCreateBlueprintMutation,
+  useUpdateBPWithNotification as useUpdateBlueprintMutation,
+} from '../../../Hooks';
+import { useAppSelector } from '../../../store/hooks';
+import {
+  CreateSaveAndBuildBtn,
+  CreateSaveButton,
+} from '../../CreateImageWizard/steps/Review/Footer/CreateDropdown';
+import {
+  EditSaveAndBuildBtn,
+  EditSaveButton,
+} from '../../CreateImageWizard/steps/Review/Footer/EditDropdown';
+import { mapRequestFromState } from '../../CreateImageWizard/utilities/requestMapper';
+import { useIsBlueprintValid } from '../../CreateImageWizard/utilities/useValidation';
+
+const ReviewWizardFooter = () => {
+  const { goToPrevStep, close } = useWizardContext();
+  const { isSuccess: isCreateSuccess, reset: resetCreate } =
+    useCreateBlueprintMutation({ fixedCacheKey: 'createBlueprintKey' });
+
+  const { isSuccess: isUpdateSuccess, reset: resetUpdate } =
+    useUpdateBlueprintMutation({ fixedCacheKey: 'updateBlueprintKey' });
+  const { auth } = useChrome();
+  const isOnPremise = useAppSelector(selectIsOnPremise);
+  const mode = useAppSelector(selectWizardModalMode);
+  const blueprintId = useAppSelector(selectSelectedBlueprintId);
+  const [isOpen, setIsOpen] = useState(false);
+  const store = useStore();
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+  const isValid = useIsBlueprintValid();
+  const orgId = useAppSelector(selectOrgId);
+
+  useEffect(() => {
+    if (isUpdateSuccess || isCreateSuccess) {
+      resetCreate();
+      resetUpdate();
+      close();
+    }
+  }, [isUpdateSuccess, isCreateSuccess, resetCreate, resetUpdate, close]);
+
+  const getBlueprintPayload = async () => {
+    if (!isOnPremise) {
+      const userData = await auth.getUser();
+      const orgId = userData?.identity.internal?.org_id;
+      const requestBody = orgId && mapRequestFromState(store, orgId);
+      return requestBody;
+    }
+
+    return mapRequestFromState(store, orgId ?? '');
+  };
+
+  const isEditMode = mode === 'edit';
+
+  return (
+    <WizardFooterWrapper>
+      <Flex columnGap={{ default: 'columnGapSm' }}>
+        <Dropdown
+          isOpen={isOpen}
+          onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+            <MenuToggle
+              variant='primary'
+              ref={toggleRef}
+              onClick={onToggleClick}
+              isExpanded={isOpen}
+              isDisabled={!isValid}
+              splitButtonItems={
+                isEditMode
+                  ? [
+                      <EditSaveButton
+                        key='wizard-edit-save-btn'
+                        getBlueprintPayload={getBlueprintPayload}
+                        setIsOpen={setIsOpen}
+                        blueprintId={blueprintId || ''}
+                        isDisabled={!isValid}
+                      />,
+                    ]
+                  : [
+                      <CreateSaveButton
+                        key='wizard-create-save-btn'
+                        getBlueprintPayload={getBlueprintPayload}
+                        setIsOpen={setIsOpen}
+                        isDisabled={!isValid}
+                      />,
+                    ]
+              }
+            />
+          )}
+          onSelect={() => setIsOpen(false)}
+        >
+          {isEditMode ? (
+            <EditSaveAndBuildBtn
+              getBlueprintPayload={getBlueprintPayload}
+              blueprintId={blueprintId || ''}
+              setIsOpen={setIsOpen}
+              isDisabled={!isValid}
+            />
+          ) : (
+            <CreateSaveAndBuildBtn
+              getBlueprintPayload={getBlueprintPayload}
+              setIsOpen={setIsOpen}
+              isDisabled={!isValid}
+            />
+          )}
+        </Dropdown>
+        <Button variant='secondary' onClick={goToPrevStep}>
+          Back
+        </Button>
+        <Button variant='link' onClick={close}>
+          Cancel
+        </Button>
+      </Flex>
+    </WizardFooterWrapper>
+  );
+};
+
+export default ReviewWizardFooter;