Wizard: Add validation for NTP servers

This adds a validation pattern and a validation for NTP servers field.

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

@@ -5,6 +5,8 @@ import {
   Chip,
   ChipGroup,
   FormGroup,
+  HelperText,
+  HelperTextItem,
   TextInputGroup,
   TextInputGroupMain,
   TextInputGroupUtilities,
@@ -17,11 +19,13 @@ import {
   removeNtpServer,
   selectNtpServers,
 } from '../../../../../store/wizardSlice';
+import { isNtpServerValid } from '../../../validators';
 
 const NtpServersInput = () => {
   const dispatch = useAppDispatch();
   const ntpServers = useAppSelector(selectNtpServers);
   const [inputValue, setInputValue] = useState('');
+  const [errorText, setErrorText] = useState('');
 
   const onTextInputChange = (
     _event: React.FormEvent<HTMLInputElement>,
@@ -33,11 +37,19 @@ const NtpServersInput = () => {
   const handleKeyDown = (e: React.KeyboardEvent, value: string) => {
     if (e.key === ' ' || e.key === 'Enter' || e.key === ',') {
       e.preventDefault();
-      if (ntpServers?.includes(value)) {
-        // TO DO error
-      } else {
+
+      if (isNtpServerValid(value) && !ntpServers?.includes(value)) {
         dispatch(addNtpServer(value));
         setInputValue('');
+        setErrorText('');
+      }
+
+      if (ntpServers?.includes(value)) {
+        setErrorText('NTP server already exists.');
+      }
+
+      if (!isNtpServerValid(value)) {
+        setErrorText('Invalid format.');
       }
     }
   };
@@ -75,6 +87,11 @@ const NtpServersInput = () => {
           </Button>
         </TextInputGroupUtilities>
       </TextInputGroup>
+      {errorText && (
+        <HelperText>
+          <HelperTextItem variant={'error'}>{errorText}</HelperTextItem>
+        </HelperText>
+      )}
       <ChipGroup numChips={5} className="pf-v5-u-mt-sm pf-v5-u-w-100">
         {ntpServers?.map((server) => (
           <Chip key={server} onClick={() => dispatch(removeNtpServer(server))}>

src/Components/CreateImageWizard/validators.ts

@@ -61,10 +61,12 @@ export const isSnapshotValid = (dateString: string) => {
 export const isBlueprintDescriptionValid = (blueprintDescription: string) => {
   return blueprintDescription.length <= 250;
 };
+
 export const isFileSystemConfigValid = (partitions: Partition[]) => {
   const duplicates = getDuplicateMountPoints(partitions);
   return duplicates.length === 0;
 };
+
 export const getDuplicateMountPoints = (partitions: Partition[]): string[] => {
   const mountPointSet: Set<string> = new Set();
   const duplicates: string[] = [];
@@ -81,3 +83,10 @@ export const getDuplicateMountPoints = (partitions: Partition[]): string[] => {
   }
   return duplicates;
 };
+
+export const isNtpServerValid = (ntpServer: string) => {
+  return (
+    ntpServer !== undefined &&
+    /^([a-z0-9-]+)?(([.:/]{1,3}[a-z0-9-]+)){1,}$/.test(ntpServer)
+  );
+};