Wizard: Validate registration with useValidation

This migrated Registration step validation to `useValidation`.

The scenarios in which the Next button and Create/Save button should be disabled are:
- any of "register now" options is chosen, but no activation key is selected
- activation key is selected, but it's invalid (information about it cannot be fetched)

src/Components/CreateImageWizard/CreateImageWizard.tsx

@@ -32,6 +32,7 @@ import {
   useSnapshotValidation,
   useFirstBootValidation,
   useDetailsValidation,
+  useRegistrationValidation,
 } from './utilities/useValidation';
 import {
   isAwsAccountIdValid,
@@ -61,8 +62,6 @@ import {
   selectGcpShareMethod,
   selectImageTypes,
   addImageType,
-  selectRegistrationType,
-  selectActivationKey,
 } from '../../store/wizardSlice';
 import { resolveRelPath } from '../../Utilities/path';
 import { ImageBuilderHeader } from '../sharedComponents/ImageBuilderHeader';
@@ -192,8 +191,7 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
   const azureResourceGroup = useAppSelector(selectAzureResourceGroup);
   const azureSource = useAppSelector(selectAzureSource);
   // Registration
-  const registrationType = useAppSelector(selectRegistrationType);
-  const activationKey = useAppSelector(selectActivationKey);
+  const registrationValidation = useRegistrationValidation();
   // Snapshots
   const snapshotValidation = useSnapshotValidation();
   // Filesystem
@@ -342,12 +340,13 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
                 name="Register"
                 id="step-register"
                 key="step-register"
+                navItem={customStatusNavItem}
+                status={
+                  registrationValidation.disabledNext ? 'error' : 'default'
+                }
                 footer={
                   <CustomWizardFooter
-                    disableNext={
-                      registrationType.startsWith('register-now') &&
-                      !activationKey
-                    }
+                    disableNext={registrationValidation.disabledNext}
                     optional={true}
                   />
                 }

src/Components/CreateImageWizard/utilities/useValidation.tsx

@@ -6,6 +6,7 @@ import {
   BlueprintsResponse,
   useLazyGetBlueprintsQuery,
 } from '../../../store/imageBuilderApi';
+import { useShowActivationKeyQuery } from '../../../store/rhsmApi';
 import {
   selectBlueprintId,
   selectBlueprintName,
@@ -15,6 +16,8 @@ import {
   selectPartitions,
   selectSnapshotDate,
   selectUseLatest,
+  selectActivationKey,
+  selectRegistrationType,
 } from '../../../store/wizardSlice';
 import {
   getDuplicateMountPoints,
@@ -32,11 +35,13 @@ export type StepValidation = {
 };
 
 export function useIsBlueprintValid(): boolean {
+  const registration = useRegistrationValidation();
   const filesystem = useFilesystemValidation();
   const snapshot = useSnapshotValidation();
   const firstBoot = useFirstBootValidation();
   const details = useDetailsValidation();
   return (
+    !registration.disabledNext &&
     !filesystem.disabledNext &&
     !snapshot.disabledNext &&
     !firstBoot.disabledNext &&
@@ -44,6 +49,34 @@ export function useIsBlueprintValid(): boolean {
   );
 }
 
+export function useRegistrationValidation(): StepValidation {
+  const registrationType = useAppSelector(selectRegistrationType);
+  const activationKey = useAppSelector(selectActivationKey);
+
+  const { isFetching, isError } = useShowActivationKeyQuery(
+    { name: activationKey! },
+    {
+      skip: !activationKey,
+    }
+  );
+
+  if (registrationType !== 'register-later' && !activationKey) {
+    return {
+      errors: { activationKey: 'No activation key selected' },
+      disabledNext: true,
+    };
+  }
+
+  if (activationKey && (isFetching || isError)) {
+    return {
+      errors: { activationKey: 'Invalid activation key' },
+      disabledNext: true,
+    };
+  }
+
+  return { errors: {}, disabledNext: false };
+}
+
 export function useFilesystemValidation(): StepValidation {
   const mode = useAppSelector(selectFileSystemConfigurationType);
   const partitions = useAppSelector(selectPartitions);