Wizard: Update the way of adding NTP servers

This updates the way NTP servers can be added:
- helper text was removed
- add button (PlusCircle) was added to the input group utilities
- remove input button is now rendered always, but gets disabled when there's no input
- chip group was moved under the input

Also I've noticed that the "clear input" button completely cleared the list of NTP servers which would make me very angry as a user. Fixed it, so now the clear input button only clears the input field and the `clearNtpServers` action was removed as we don't use it anywhere else.

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

@@ -5,18 +5,15 @@ import {
   Chip,
   ChipGroup,
   FormGroup,
-  HelperText,
-  HelperTextItem,
   TextInputGroup,
   TextInputGroupMain,
   TextInputGroupUtilities,
 } from '@patternfly/react-core';
-import { TimesIcon } from '@patternfly/react-icons';
+import { PlusCircleIcon, TimesIcon } from '@patternfly/react-icons';
 
 import { useAppDispatch, useAppSelector } from '../../../../../store/hooks';
 import {
   addNtpServer,
-  clearNtpServers,
   removeNtpServer,
   selectNtpServers,
 } from '../../../../../store/wizardSlice';
@@ -45,6 +42,11 @@ const NtpServersInput = () => {
     }
   };
 
+  const handleAddServer = (e: React.MouseEvent, value: string) => {
+    dispatch(addNtpServer(value));
+    setInputValue('');
+  };
+
   return (
     <FormGroup isRequired={false} label="NTP servers">
       <TextInputGroup>
@@ -53,35 +55,37 @@ const NtpServersInput = () => {
           onChange={onTextInputChange}
           value={inputValue}
           onKeyDown={(e) => handleKeyDown(e, inputValue)}
-        >
-          <ChipGroup>
-            {ntpServers?.map((server) => (
-              <Chip
-                key={server}
-                onClick={() => dispatch(removeNtpServer(server))}
-              >
-                {server}
-              </Chip>
-            ))}
-          </ChipGroup>
-        </TextInputGroupMain>
-        {ntpServers && ntpServers.length > 0 && (
-          <TextInputGroupUtilities>
-            <Button
-              variant="plain"
-              onClick={() => dispatch(clearNtpServers())}
-              aria-label="Remove all NTP servers"
-            >
-              <TimesIcon />
-            </Button>
-          </TextInputGroupUtilities>
-        )}
+        />
+        <TextInputGroupUtilities>
+          <Button
+            variant="plain"
+            onClick={(e) => handleAddServer(e, inputValue)}
+            isDisabled={!inputValue}
+            aria-label="Add NTP server"
+          >
+            <PlusCircleIcon />
+          </Button>
+          <Button
+            variant="plain"
+            onClick={() => setInputValue('')}
+            isDisabled={!inputValue}
+            aria-label="Clear input"
+          >
+            <TimesIcon />
+          </Button>
+        </TextInputGroupUtilities>
       </TextInputGroup>
-      <HelperText>
-        <HelperTextItem variant="indeterminate">
-          Confirm the NTP server by pressing space, comma or enter.
-        </HelperTextItem>
-      </HelperText>
+      <ChipGroup
+        categoryName="Added NTP servers"
+        numChips={5}
+        className="pf-v5-u-mt-sm pf-v5-u-w-100"
+      >
+        {ntpServers?.map((server) => (
+          <Chip key={server} onClick={() => dispatch(removeNtpServer(server))}>
+            {server}
+          </Chip>
+        ))}
+      </ChipGroup>
     </FormGroup>
   );
 };