Wizard: Basic Locale step

This adds Locale step basics and file structure.

src/Components/CreateImageWizard/CreateImageWizard.tsx

@@ -17,6 +17,7 @@ import FileSystemStep from './steps/FileSystem';
 import { FileSystemContext } from './steps/FileSystem/FileSystemTable';
 import FirstBootStep from './steps/FirstBoot';
 import ImageOutputStep from './steps/ImageOutput';
+import LocaleStep from './steps/Locale';
 import OscapStep from './steps/Oscap';
 import PackagesStep from './steps/Packages';
 import RegistrationStep from './steps/Registration';
@@ -135,6 +136,7 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
 
   const isUsersEnabled = useFlag('image-builder.users.enabled');
   const isTimezoneEnabled = useFlag('image-builder.timezone.enabled');
+  const isLocaleEnabled = useFlag('image-builder.locale.enabled');
 
   // Remove this and all fallthrough logic when snapshotting is enabled in Prod-stable
   // =========================TO REMOVE=======================
@@ -219,7 +221,7 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
 
   let startIndex = 1; // default index
   if (isEdit) {
-    startIndex = 17;
+    startIndex = 18;
   }
 
   // Duplicating some of the logic from the Wizard component to allow for custom nav items status
@@ -465,6 +467,18 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
               >
                 <TimezoneStep />
               </WizardStep>,
+              <WizardStep
+                name="Locale"
+                id="wizard-locale"
+                key="wizard-locale"
+                navItem={customStatusNavItem}
+                isHidden={!isLocaleEnabled}
+                footer={
+                  <CustomWizardFooter disableNext={false} optional={true} />
+                }
+              >
+                <LocaleStep />
+              </WizardStep>,
               <WizardStep
                 name="First boot script configuration"
                 id="wizard-first-boot"

src/Components/CreateImageWizard/steps/Locale/components/KeyboardInput.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { FormGroup } from '@patternfly/react-core';
+
+const KeyboardInput = () => {
+  return <FormGroup isRequired={false} label="Keyboard"></FormGroup>;
+};
+
+export default KeyboardInput;

src/Components/CreateImageWizard/steps/Locale/components/LanguagesDropDown.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { FormGroup } from '@patternfly/react-core';
+
+const LanguagesDropDown = () => {
+  return <FormGroup isRequired={false} label="Languages"></FormGroup>;
+};
+
+export default LanguagesDropDown;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { Text, Form, Title } from '@patternfly/react-core';
+
+import KeyboardInput from './components/KeyboardInput';
+import LanguagesDropDown from './components/LanguagesDropDown';
+
+const LocaleStep = () => {
+  return (
+    <Form>
+      <Title headingLevel="h1" size="xl">
+        Locale
+      </Title>
+      <Text>Select locale for your image.</Text>
+      <LanguagesDropDown />
+      <KeyboardInput />
+    </Form>
+  );
+};
+
+export default LocaleStep;

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

@@ -27,6 +27,7 @@ const goToDetailsStep = async () => {
   await clickNext();
   await clickNext();
   await clickNext();
+  await clickNext();
 };
 
 const enterBlueprintDescription = async (

src/test/Components/CreateImageWizard/steps/FileSystemConfiguration/FileSystemConfiguration.test.tsx

@@ -115,6 +115,7 @@ const goToReviewStep = async () => {
   await clickNext();
   await clickNext();
   await clickNext();
+  await clickNext();
   await enterBlueprintName();
   await clickNext();
 };

src/test/Components/CreateImageWizard/steps/FirstBoot/Firstboot.test.tsx

@@ -46,6 +46,7 @@ const goToFirstBootStep = async (): Promise<void> => {
   await clickNext(); // Additional packages
   await clickNext(); // Users
   await clickNext(); // Timezone
+  await clickNext(); // Locale
   await clickNext(); // Snapshot
   await clickNext(); // First Boot
 };
@@ -69,6 +70,7 @@ const goFromOscapToFirstBoot = async () => {
   await clickNext();
   await clickNext();
   await clickNext();
+  await clickNext();
 };
 
 const openCodeEditor = async (): Promise<void> => {

src/test/Components/CreateImageWizard/steps/ImageOutput/ImageOutput.test.tsx

@@ -137,6 +137,7 @@ const goToReviewStep = async () => {
   await clickNext(); // Additional packages
   await clickNext(); // Users
   await clickNext(); // Timezone
+  await clickNext(); // Locale
   await clickNext(); // First boot
   await clickNext(); // Details
   await enterBlueprintName();

src/test/Components/CreateImageWizard/steps/Locale/Locale.test.tsx

@@ -0,0 +1,63 @@
+import type { Router as RemixRouter } from '@remix-run/router';
+import { screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+
+import {
+  clickBack,
+  clickNext,
+  verifyCancelButton,
+} from '../../wizardTestUtils';
+import { clickRegisterLater, renderCreateMode } from '../../wizardTestUtils';
+
+let router: RemixRouter | undefined = undefined;
+
+const goToLocaleStep = async () => {
+  const user = userEvent.setup();
+  const guestImageCheckBox = await screen.findByRole('checkbox', {
+    name: /virtualization guest image checkbox/i,
+  });
+  await waitFor(() => user.click(guestImageCheckBox));
+  await clickNext(); // Registration
+  await clickRegisterLater();
+  await clickNext(); // OpenSCAP
+  await clickNext(); // File system configuration
+  await clickNext(); // Snapshots
+  await clickNext(); // Custom repositories
+  await clickNext(); // Additional packages
+  await clickNext(); // Users
+  await clickNext(); // Timezone
+  await clickNext(); // Locale
+};
+
+describe('Step Locale', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    router = undefined;
+  });
+
+  test('clicking Next loads First Boot', async () => {
+    await renderCreateMode();
+    await goToLocaleStep();
+    await clickNext();
+    await screen.findByRole('heading', {
+      name: 'First boot configuration',
+    });
+  });
+
+  test('clicking Back loads Timezone', async () => {
+    await renderCreateMode();
+    await goToLocaleStep();
+    await clickBack();
+    await screen.findByRole('heading', { name: 'Timezone' });
+  });
+
+  test('clicking Cancel loads landing page', async () => {
+    await renderCreateMode();
+    await goToLocaleStep();
+    await verifyCancelButton(router);
+  });
+});
+
+// TO DO 'Step Locale' -> 'revisit step button on Review works'
+// TO DO 'Locale request generated correctly'
+// TO DO 'Locale edit mode'

src/test/Components/CreateImageWizard/steps/Oscap/Oscap.test.tsx

@@ -100,6 +100,7 @@ const goToReviewStep = async () => {
   await clickNext(); // Additional packages
   await clickNext(); // Users
   await clickNext(); // Timezone
+  await clickNext(); // Locale
   await clickNext(); // FirstBoot
   await clickNext(); // Details
   await enterBlueprintName('Oscap test');

src/test/Components/CreateImageWizard/steps/Packages/Packages.test.tsx

@@ -54,6 +54,7 @@ const goToPackagesStep = async () => {
 const goToReviewStep = async () => {
   await clickNext(); // Users
   await clickNext(); // Timezone
+  await clickNext(); // Locale
   await clickNext(); // First Boot
   await clickNext(); // Details
   await enterBlueprintName();

src/test/Components/CreateImageWizard/steps/Registration/Registration.test.tsx

@@ -98,6 +98,7 @@ const goToReviewStep = async () => {
   await clickNext();
   await clickNext();
   await clickNext();
+  await clickNext();
   await enterBlueprintName();
   await clickNext();
 };

src/test/Components/CreateImageWizard/steps/Repositories/Repositories.test.tsx

@@ -48,6 +48,7 @@ const goToReviewStep = async () => {
   await clickNext();
   await clickNext(); // Users
   await clickNext(); // Timezone
+  await clickNext(); // Locale
   await clickNext(); // First Boot
   await enterBlueprintName();
   await clickNext(); // Review

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

@@ -58,6 +58,7 @@ const goToReviewStep = async () => {
   await clickNext();
   await clickNext();
   await clickNext();
+  await clickNext();
 };
 
 describe('Step Review', () => {

src/test/Components/CreateImageWizard/steps/Snapshot/Snapshot.test.tsx

@@ -40,6 +40,7 @@ const goToReviewStep = async () => {
   await clickNext();
   await clickNext(); // Users
   await clickNext(); // Timezone
+  await clickNext(); // Locale
   await enterBlueprintName();
   await clickNext();
 };

src/test/Components/CreateImageWizard/steps/TargetEnvironment/AwsTarget.test.tsx

@@ -46,6 +46,7 @@ const goToReview = async () => {
   await clickNext(); // Additional packages
   await clickNext(); // Users
   await clickNext(); // Timezone
+  await clickNext(); // Locale
   await clickNext(); // Details
   await clickNext(); // FirstBoot
   await enterBlueprintName();

src/test/Components/CreateImageWizard/steps/TargetEnvironment/AzureTarget.test.tsx

@@ -46,6 +46,7 @@ const goToReview = async () => {
   await clickNext(); // Additional packages
   await clickNext(); // Users
   await clickNext(); // Timezone
+  await clickNext(); // Locale
   await clickNext(); // FirstBoot
   await clickNext(); // Details
   await enterBlueprintName();

src/test/Components/CreateImageWizard/steps/TargetEnvironment/GCPTarget.test.tsx

@@ -41,6 +41,7 @@ const goToReview = async () => {
   await clickNext(); // Additional packages
   await clickNext(); // Users
   await clickNext(); // Timezone
+  await clickNext(); // Locale
   await clickNext(); // Details
   await clickNext(); // FirstBoot
   await enterBlueprintName();

src/test/Components/CreateImageWizard/steps/Timezone/Timezone.test.tsx

@@ -34,12 +34,12 @@ describe('Step Timezone', () => {
     router = undefined;
   });
 
-  test('clicking Next loads First Boot', async () => {
+  test('clicking Next loads Locale', async () => {
     await renderCreateMode();
     await goToTimezoneStep();
     await clickNext();
     await screen.findByRole('heading', {
-      name: 'First boot configuration',
+      name: 'Locale',
     });
   });
 

src/test/setup.ts

@@ -67,6 +67,8 @@ vi.mock('@unleash/proxy-client-react', () => ({
         return true;
       case 'image-builder.timezone.enabled':
         return true;
+      case 'image-builder.locale.enabled':
+        return true;
       case 'edgeParity.image-list':
         return true;
       case 'image-builder.edge.local-image-table':