Wizard: Add locale structure to store and mapper

This creates structure and actions for the locale customization in the wizardSlice and requestMapper.

src/Components/CreateImageWizard/utilities/requestMapper.ts

@@ -76,6 +76,8 @@ import {
   selectFirstBootScript,
   selectMetadata,
   initialState,
+  selectLanguages,
+  selectKeyboard,
 } from '../../../store/wizardSlice';
 import { FileSystemConfigurationType } from '../steps/FileSystem';
 import {
@@ -290,6 +292,10 @@ function commonRequestToState(
           repository: '' as PackageRepository,
           package_list: [],
         })) || [],
+    locale: {
+      languages: request.customizations.locale?.languages || [],
+      keyboard: request.customizations.locale?.keyboard || '',
+    },
     services: {
       enabled: request.customizations?.services?.enabled || [],
       masked: request.customizations?.services?.masked || [],
@@ -496,7 +502,7 @@ const getCustomizations = (state: RootState, orgID: string): Customizations => {
       : undefined,
     groups: undefined,
     timezone: undefined,
-    locale: undefined,
+    locale: getLocale(state),
     firewall: undefined,
     installation_device: undefined,
     fdo: undefined,
@@ -614,6 +620,20 @@ const getSubscription = (
   }
 };
 
+const getLocale = (state: RootState) => {
+  const languages = selectLanguages(state);
+  const keyboard = selectKeyboard(state);
+
+  if (languages?.length === 0 && !keyboard) {
+    return undefined;
+  } else {
+    return {
+      languages: languages && languages.length > 0 ? languages : undefined,
+      keyboard: keyboard ? keyboard : undefined,
+    };
+  }
+};
+
 const getCustomRepositories = (state: RootState) => {
   const customRepositories = selectCustomRepositories(state);
   const recommendedRepositories = selectRecommendedRepositories(state);

src/store/wizardSlice.ts

@@ -7,6 +7,7 @@ import type {
   Distributions,
   ImageRequest,
   ImageTypes,
+  Locale,
   Repository,
 } from './imageBuilderApi';
 import type { ActivationKeys } from './rhsmApi';
@@ -106,6 +107,7 @@ export type wizardState = {
   kernel: {
     append: string;
   };
+  locale: Locale;
   details: {
     blueprintName: string;
     blueprintDescription: string;
@@ -177,6 +179,10 @@ export const initialState: wizardState = {
   kernel: {
     append: '',
   },
+  locale: {
+    languages: [],
+    keyboard: '',
+  },
   details: {
     blueprintName: '',
     blueprintDescription: '',
@@ -327,6 +333,14 @@ export const selectKernel = (state: RootState) => {
   return state.wizard.kernel;
 };
 
+export const selectLanguages = (state: RootState) => {
+  return state.wizard.locale.languages;
+};
+
+export const selectKeyboard = (state: RootState) => {
+  return state.wizard.locale.keyboard;
+};
+
 export const selectBlueprintName = (state: RootState) => {
   return state.wizard.details.blueprintName;
 };
@@ -660,6 +674,28 @@ export const wizardSlice = createSlice({
         1
       );
     },
+    addLanguage: (state, action: PayloadAction<string>) => {
+      if (
+        state.locale.languages &&
+        !state.locale.languages.some((lang) => lang === action.payload)
+      ) {
+        state.locale.languages.push(action.payload);
+      }
+    },
+    removeLanguage: (state, action: PayloadAction<string>) => {
+      if (state.locale.languages) {
+        state.locale.languages.splice(
+          state.locale.languages.findIndex((lang) => lang === action.payload),
+          1
+        );
+      }
+    },
+    clearLanguages: (state) => {
+      state.locale.languages = [];
+    },
+    changeKeyboard: (state, action: PayloadAction<string>) => {
+      state.locale.keyboard = action.payload;
+    },
     changeBlueprintName: (state, action: PayloadAction<string>) => {
       state.details.blueprintName = action.payload;
     },
@@ -732,6 +768,10 @@ export const {
   removePackage,
   addGroup,
   removeGroup,
+  addLanguage,
+  removeLanguage,
+  clearLanguages,
+  changeKeyboard,
   changeBlueprintName,
   changeBlueprintDescription,
   loadWizardState,