From 8d84b5eef29db9dc52fd7983ca31c4065ac471b2 Mon Sep 17 00:00:00 2001
From: regexowl <ksimicko@redhat.com>
Date: Mon, 9 Dec 2024 14:40:02 +0100
Subject: [PATCH] Wizard: Add Locale to Review step

This adds Locale expandable to the Review step.
---
 .../steps/Review/ReviewStep.tsx               | 22 +++++++++++++
 .../steps/Review/ReviewStepTextLists.tsx      | 32 +++++++++++++++++++
 .../steps/Locale/Locale.test.tsx              | 22 +++++++++++--
 3 files changed, 74 insertions(+), 2 deletions(-)

diff --git a/src/Components/CreateImageWizard/steps/Review/ReviewStep.tsx b/src/Components/CreateImageWizard/steps/Review/ReviewStep.tsx
index 2162a0a4..3e4dcde1 100644
--- a/src/Components/CreateImageWizard/steps/Review/ReviewStep.tsx
+++ b/src/Components/CreateImageWizard/steps/Review/ReviewStep.tsx
@@ -29,6 +29,7 @@ import {
   TargetEnvOciList,
   TargetEnvOtherList,
   TimezoneList,
+  LocaleList,
 } from './ReviewStepTextLists';
 
 import isRhel from '../../../../../src/Utilities/isRhel';
@@ -68,9 +69,11 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
   const [isExpandedComplianceDetail, setIsExpandedComplianceDetail] =
     useState(true);
   const [isExpandedTimezone, setIsExpandedTimezone] = useState(true);
+  const [isExpandedLocale, setIsExpandedLocale] = useState(true);
   const [isExpandableFirstBoot, setIsExpandedFirstBoot] = useState(true);
 
   const isTimezoneEnabled = useFlag('image-builder.timezone.enabled');
+  const isLocaleEnabled = useFlag('image-builder.locale.enabled');
 
   const onToggleImageOutput = (isExpandedImageOutput: boolean) =>
     setIsExpandedImageOutput(isExpandedImageOutput);
@@ -90,6 +93,8 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
     setIsExpandedComplianceDetail(isExpandedComplianceDetail);
   const onToggleTimezone = (isExpandedTimezone: boolean) =>
     setIsExpandedTimezone(isExpandedTimezone);
+  const onToggleLocale = (isExpandedLocale: boolean) =>
+    setIsExpandedLocale(isExpandedLocale);
   const onToggleFirstBoot = (isExpandableFirstBoot: boolean) =>
     setIsExpandedFirstBoot(isExpandableFirstBoot);
 
@@ -321,6 +326,23 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
           <TimezoneList />
         </ExpandableSection>
       )}
+      {isLocaleEnabled && (
+        <ExpandableSection
+          toggleContent={composeExpandable(
+            'Locale',
+            'revisit-locale',
+            'wizard-locale'
+          )}
+          onToggle={(_event, isExpandedLocale) =>
+            onToggleLocale(isExpandedLocale)
+          }
+          isExpanded={isExpandedLocale}
+          isIndented
+          data-testid="locale-expandable"
+        >
+          <LocaleList />
+        </ExpandableSection>
+      )}
       {isFirstBootEnabled && (
         <ExpandableSection
           toggleContent={composeExpandable(
diff --git a/src/Components/CreateImageWizard/steps/Review/ReviewStepTextLists.tsx b/src/Components/CreateImageWizard/steps/Review/ReviewStepTextLists.tsx
index 4684a855..08370bf8 100644
--- a/src/Components/CreateImageWizard/steps/Review/ReviewStepTextLists.tsx
+++ b/src/Components/CreateImageWizard/steps/Review/ReviewStepTextLists.tsx
@@ -65,6 +65,8 @@ import {
   selectFirstBootScript,
   selectTimezone,
   selectNtpServers,
+  selectLanguages,
+  selectKeyboard,
 } from '../../../../store/wizardSlice';
 import { toMonthAndYear, yyyyMMddFormat } from '../../../../Utilities/time';
 import {
@@ -771,6 +773,36 @@ export const TimezoneList = () => {
   );
 };
 
+export const LocaleList = () => {
+  const languages = useAppSelector(selectLanguages);
+  const keyboard = useAppSelector(selectKeyboard);
+
+  return (
+    <TextContent>
+      <TextList component={TextListVariants.dl}>
+        <TextListItem
+          component={TextListItemVariants.dt}
+          className="pf-v5-u-min-width"
+        >
+          Languages
+        </TextListItem>
+        <TextListItem component={TextListItemVariants.dd}>
+          {languages && languages.length > 0 ? languages.join(', ') : 'None'}
+        </TextListItem>
+        <TextListItem
+          component={TextListItemVariants.dt}
+          className="pf-v5-u-min-width"
+        >
+          Keyboard
+        </TextListItem>
+        <TextListItem component={TextListItemVariants.dd}>
+          {keyboard ? keyboard : 'None'}
+        </TextListItem>
+      </TextList>
+    </TextContent>
+  );
+};
+
 export const FirstBootList = () => {
   const isFirstbootEnabled = !!useAppSelector(selectFirstBootScript);
 
diff --git a/src/test/Components/CreateImageWizard/steps/Locale/Locale.test.tsx b/src/test/Components/CreateImageWizard/steps/Locale/Locale.test.tsx
index 4576ef99..9662bdf4 100644
--- a/src/test/Components/CreateImageWizard/steps/Locale/Locale.test.tsx
+++ b/src/test/Components/CreateImageWizard/steps/Locale/Locale.test.tsx
@@ -1,5 +1,5 @@
 import type { Router as RemixRouter } from '@remix-run/router';
-import { screen, waitFor } from '@testing-library/react';
+import { screen, waitFor, within } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 
 import { CREATE_BLUEPRINT, EDIT_BLUEPRINT } from '../../../../../constants';
@@ -86,6 +86,13 @@ const selectKeyboard = async () => {
   await waitFor(() => user.click(usKeyboard));
 };
 
+const clickRevisitButton = async () => {
+  const user = userEvent.setup();
+  const expandable = await screen.findByTestId('locale-expandable');
+  const revisitButton = await within(expandable).findByTestId('revisit-locale');
+  await waitFor(() => user.click(revisitButton));
+};
+
 describe('Step Locale', () => {
   beforeEach(() => {
     vi.clearAllMocks();
@@ -140,6 +147,16 @@ describe('Step Locale', () => {
     expect(options[1]).toHaveTextContent('us-acentos');
     expect(options[2]).toHaveTextContent('us-alt-intl');
   });
+
+  test('revisit step button on Review works', async () => {
+    await renderCreateMode();
+    await goToLocaleStep();
+    await searchForKeyboard();
+    await selectKeyboard();
+    await goToReviewStep();
+    await clickRevisitButton();
+    await screen.findByRole('heading', { name: /Locale/ });
+  });
 });
 
 describe('Locale request generated correctly', () => {
@@ -232,4 +249,5 @@ describe('Locale edit mode', () => {
   });
 });
 
-// TO DO 'Step Locale' -> 'revisit step button on Review works'
+// TO DO 'with languages selected'
+// TO DO 'with languages and keyboard selected'