Wizard: Skip directly to Review

When clicking "Review and finish" the user skips directly to the Review step and the name of the blueprint gets automatically populated.

src/Components/CreateImageWizard/CreateImageWizard.tsx

@@ -114,7 +114,7 @@ export const CustomWizardFooter = ({
           ouiaId="wizard-review-and-finish-btn"
           variant="tertiary"
           onClick={() => {
-            if (!beforeNext || beforeNext()) goToStepById('step-details');
+            if (!beforeNext || beforeNext()) goToStepById('step-review');
           }}
           isDisabled={disableNext}
         >

src/Components/CreateImageWizard/steps/Details/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 
 import {
   Form,
@@ -14,12 +14,10 @@ import { useAppDispatch, useAppSelector } from '../../../../store/hooks';
 import {
   changeBlueprintDescription,
   changeBlueprintName,
-  selectArchitecture,
   selectBlueprintDescription,
   selectBlueprintName,
-  selectDistribution,
 } from '../../../../store/wizardSlice';
-import { generateDefaultName } from '../../utilities/generateDefaultName';
+import { useGenerateDefaultName } from '../../utilities/useGenerateDefaultName';
 import { useDetailsValidation } from '../../utilities/useValidation';
 import { HookValidatedInput } from '../../ValidatedTextInput';
 
@@ -27,17 +25,9 @@ const DetailsStep = () => {
   const dispatch = useAppDispatch();
   const blueprintName = useAppSelector(selectBlueprintName);
   const blueprintDescription = useAppSelector(selectBlueprintDescription);
-  const distribution = useAppSelector(selectDistribution);
-  const arch = useAppSelector(selectArchitecture);
 
-  useEffect(() => {
-    if (!blueprintName) {
-      dispatch(changeBlueprintName(generateDefaultName(distribution, arch)));
-    }
-    // This useEffect hook should run *only* on mount and therefore has an empty
-    // dependency array. eslint's exhaustive-deps rule does not support this use.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  useGenerateDefaultName();
+
   const handleNameChange = (
     _event: React.FormEvent<HTMLInputElement>,
     name: string

src/Components/CreateImageWizard/steps/Review/index.tsx

@@ -9,6 +9,7 @@ import {
   selectBlueprintDescription,
   selectBlueprintName,
 } from '../../../../store/wizardSlice';
+import { useGenerateDefaultName } from '../../utilities/useGenerateDefaultName';
 
 const ReviewStep = ({
   snapshottingEnabled,
@@ -18,6 +19,8 @@ const ReviewStep = ({
   const blueprintName = useAppSelector(selectBlueprintName);
   const blueprintDescription = useAppSelector(selectBlueprintDescription);
 
+  useGenerateDefaultName();
+
   return (
     <Form>
       <Title headingLevel="h1" size="xl">

src/Components/CreateImageWizard/utilities/generateDefaultName.ts

@@ -1,17 +0,0 @@
-import { Distributions, ImageRequest } from '../../../store/imageBuilderApi';
-
-export const generateDefaultName = (
-  distribution: Distributions,
-  arch: ImageRequest['architecture']
-) => {
-  const date = new Date();
-  const day = date.getDate().toString().padStart(2, '0');
-  const month = (date.getMonth() + 1).toString().padStart(2, '0');
-  const year = date.getFullYear().toString();
-  const hours = date.getHours().toString().padStart(2, '0');
-  const minutes = date.getMinutes().toString().padStart(2, '0');
-
-  const dateTimeString = `${month}${day}${year}-${hours}${minutes}`;
-
-  return `${distribution}-${arch}-${dateTimeString}`;
-};

src/Components/CreateImageWizard/utilities/useGenerateDefaultName.ts

@@ -0,0 +1,42 @@
+import { useEffect } from 'react';
+
+import { useAppDispatch, useAppSelector } from '../../../store/hooks';
+import { Distributions, ImageRequest } from '../../../store/imageBuilderApi';
+import {
+  changeBlueprintName,
+  selectArchitecture,
+  selectBlueprintName,
+  selectDistribution,
+} from '../../../store/wizardSlice';
+
+const generateDefaultName = (
+  distribution: Distributions,
+  arch: ImageRequest['architecture']
+) => {
+  const date = new Date();
+  const day = date.getDate().toString().padStart(2, '0');
+  const month = (date.getMonth() + 1).toString().padStart(2, '0');
+  const year = date.getFullYear().toString();
+  const hours = date.getHours().toString().padStart(2, '0');
+  const minutes = date.getMinutes().toString().padStart(2, '0');
+
+  const dateTimeString = `${month}${day}${year}-${hours}${minutes}`;
+
+  return `${distribution}-${arch}-${dateTimeString}`;
+};
+
+export const useGenerateDefaultName = () => {
+  const dispatch = useAppDispatch();
+  const blueprintName = useAppSelector(selectBlueprintName);
+  const distribution = useAppSelector(selectDistribution);
+  const arch = useAppSelector(selectArchitecture);
+
+  useEffect(() => {
+    if (!blueprintName) {
+      dispatch(changeBlueprintName(generateDefaultName(distribution, arch)));
+    }
+    // This useEffect hook should run *only* on mount and therefore has an empty
+    // dependency array. eslint's exhaustive-deps rule does not support this use.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+};