Wizard: Add validation to Timezone select

This adds the timezones to the step validation and renders an error when an invalid timezone is imported.

How to test:
1. import a blueprint with invalid timezone "foo"
2. select a target
3. go to Registration step
4. click on "Review and finish" button

Current behaviour:
- the "Create" button is disabled, but when navigating to Timezone step no error is displayed

After update:
- there is an error rendered under the timezone select

src/Components/CreateImageWizard/steps/Timezone/components/TimezoneDropDown.tsx

@@ -12,6 +12,8 @@ import {
   Button,
   FormGroup,
 } from '@patternfly/react-core';
+import { HelperTextItem } from '@patternfly/react-core';
+import { HelperText } from '@patternfly/react-core';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 import { useAppDispatch, useAppSelector } from '../../../../../store/hooks';
@@ -19,12 +21,16 @@ import {
   changeTimezone,
   selectTimezone,
 } from '../../../../../store/wizardSlice';
+import { useTimezoneValidation } from '../../../utilities/useValidation';
 import { timezones } from '../timezonesList';
 
 const TimezoneDropDown = () => {
   const timezone = useAppSelector(selectTimezone);
   const dispatch = useAppDispatch();
 
+  const stepValidation = useTimezoneValidation();
+
+  const [errorText, setErrorText] = useState(stepValidation.errors['timezone']);
   const [isOpen, setIsOpen] = useState(false);
   const [inputValue, setInputValue] = useState<string>('');
   const [filterValue, setFilterValue] = useState<string>('');
@@ -67,6 +73,7 @@ const TimezoneDropDown = () => {
     if (value && !value.includes('No results')) {
       setInputValue(value);
       setFilterValue('');
+      setErrorText('');
       dispatch(changeTimezone(value));
       setIsOpen(false);
     }
@@ -88,6 +95,7 @@ const TimezoneDropDown = () => {
   const onClearButtonClick = () => {
     setInputValue('');
     setFilterValue('');
+    setErrorText('');
     dispatch(changeTimezone(''));
   };
 
@@ -143,6 +151,11 @@ const TimezoneDropDown = () => {
           ))}
         </SelectList>
       </Select>
+      {errorText && (
+        <HelperText>
+          <HelperTextItem variant={'error'}>{errorText}</HelperTextItem>
+        </HelperText>
+      )}
     </FormGroup>
   );
 };

src/Components/CreateImageWizard/utilities/useValidation.tsx

@@ -30,9 +30,11 @@ import {
   selectServices,
   selectLanguages,
   selectKeyboard,
+  selectTimezone,
 } from '../../../store/wizardSlice';
 import { keyboardsList } from '../steps/Locale/keyboardsList';
 import { languagesList } from '../steps/Locale/languagesList';
+import { timezones } from '../steps/Timezone/timezonesList';
 import {
   getDuplicateMountPoints,
   isBlueprintNameValid,
@@ -163,7 +165,15 @@ export function useSnapshotValidation(): StepValidation {
 }
 
 export function useTimezoneValidation(): StepValidation {
+  const timezone = useAppSelector(selectTimezone);
   const ntpServers = useAppSelector(selectNtpServers);
+  const errors = {};
+
+  if (timezone) {
+    if (!timezones.includes(timezone)) {
+      Object.assign(errors, { timezone: 'Unknown timezone' });
+    }
+  }
 
   if (ntpServers) {
     const invalidServers = [];
@@ -175,14 +185,16 @@ export function useTimezoneValidation(): StepValidation {
     }
 
     if (invalidServers.length > 0) {
-      return {
-        errors: { ntpServers: `Invalid ntpServers: ${invalidServers}` },
-        disabledNext: true,
-      };
+      Object.assign(errors, {
+        ntpServers: `Invalid NTP servers: ${invalidServers}`,
+      });
     }
   }
 
-  return { errors: {}, disabledNext: false };
+  return {
+    errors: errors,
+    disabledNext: 'timezone' in errors || 'ntpServers' in errors,
+  };
 }
 
 export function useLocaleValidation(): StepValidation {