Wizard: Add step validation to Locale

This adds step validation to Locale, allowing to properly validate imported values.

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

@@ -3,6 +3,8 @@ import React, { useEffect, useState } from 'react';
 import {
   Button,
   FormGroup,
+  HelperText,
+  HelperTextItem,
   MenuToggle,
   MenuToggleElement,
   Select,
@@ -20,12 +22,16 @@ import {
   selectKeyboard,
 } from '../../../../../store/wizardSlice';
 import sortfn from '../../../../../Utilities/sortfn';
+import { useLocaleValidation } from '../../../utilities/useValidation';
 import { keyboardsList } from '../keyboardsList';
 
 const KeyboardDropDown = () => {
   const keyboard = useAppSelector(selectKeyboard);
   const dispatch = useAppDispatch();
 
+  const stepValidation = useLocaleValidation();
+
+  const [errorText, setErrorText] = useState(stepValidation.errors['keyboard']);
   const [isOpen, setIsOpen] = useState(false);
   const [inputValue, setInputValue] = useState<string>('');
   const [filterValue, setFilterValue] = useState<string>('');
@@ -70,6 +76,7 @@ const KeyboardDropDown = () => {
     if (value && !value.includes('No results')) {
       setInputValue(value);
       setFilterValue('');
+      setErrorText('');
       dispatch(changeKeyboard(value));
       setIsOpen(false);
     }
@@ -91,6 +98,7 @@ const KeyboardDropDown = () => {
   const onClearButtonClick = () => {
     setInputValue('');
     setFilterValue('');
+    setErrorText('');
     dispatch(changeKeyboard(''));
   };
 
@@ -146,6 +154,11 @@ const KeyboardDropDown = () => {
           ))}
         </SelectList>
       </Select>
+      {errorText && (
+        <HelperText>
+          <HelperTextItem variant={'error'}>{errorText}</HelperTextItem>
+        </HelperText>
+      )}
     </FormGroup>
   );
 };

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

@@ -5,6 +5,8 @@ import {
   Chip,
   ChipGroup,
   FormGroup,
+  HelperText,
+  HelperTextItem,
   MenuToggle,
   MenuToggleElement,
   Select,
@@ -23,12 +25,18 @@ import {
   selectLanguages,
 } from '../../../../../store/wizardSlice';
 import sortfn from '../../../../../Utilities/sortfn';
+import { useLocaleValidation } from '../../../utilities/useValidation';
 import { languagesList } from '../languagesList';
 
 const LanguagesDropDown = () => {
   const languages = useAppSelector(selectLanguages);
   const dispatch = useAppDispatch();
 
+  const stepValidation = useLocaleValidation();
+  const unknownLanguages = stepValidation.errors['languages']
+    ? stepValidation.errors['languages'].split(' ')
+    : [];
+
   const [isOpen, setIsOpen] = useState(false);
   const [inputValue, setInputValue] = useState<string>('');
   const [filterValue, setFilterValue] = useState<string>('');
@@ -92,6 +100,13 @@ const LanguagesDropDown = () => {
     setFilterValue('');
   };
 
+  const handleRemoveLang = (_event: React.MouseEvent, value: string) => {
+    dispatch(removeLanguage(value));
+    if (unknownLanguages.length > 0) {
+      unknownLanguages.filter((lang) => lang !== value);
+    }
+  };
+
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
       ref={toggleRef}
@@ -143,9 +158,18 @@ const LanguagesDropDown = () => {
           ))}
         </SelectList>
       </Select>
+      {unknownLanguages.length > 0 && (
+        <HelperText>
+          <HelperTextItem
+            variant={'error'}
+          >{`Unknown languages: ${unknownLanguages.join(
+            ', '
+          )}`}</HelperTextItem>
+        </HelperText>
+      )}
       <ChipGroup numChips={5} className="pf-v5-u-mt-sm pf-v5-u-w-100">
         {languages?.map((lang) => (
-          <Chip key={lang} onClick={() => dispatch(removeLanguage(lang))}>
+          <Chip key={lang} onClick={(e) => handleRemoveLang(e, lang)}>
             {lang}
           </Chip>
         ))}