fix(time window): show errors for component [EE-6800] (#11317)

Co-authored-by: testa113 <testa113>

app/react/portainer/environments/common/TimeWindowPicker/TimeWindowPicker.tsx

@@ -1,4 +1,5 @@
 import moment from 'moment';
+import { FormikErrors } from 'formik';
 
 import { Button } from '@@/buttons';
 import { Alert } from '@@/Alert';
@@ -13,14 +14,10 @@ type Props = {
    * The current start and end time values. in 'HH:mm' format (e.g. '00:00') and in UTC timezone.
    */
   values: EndpointChangeWindow;
+  errors?: FormikErrors<EndpointChangeWindow>;
   initialValues: EndpointChangeWindow;
-  onChange: ({
-    changeWindow,
-    timeZone,
-  }: {
-    changeWindow: EndpointChangeWindow;
-    timeZone?: string;
-  }) => void;
+  onChangeTimeZone: (timeZone: string) => void;
+  onChangeChangeWindow: (changeWindow: EndpointChangeWindow) => void;
   isEditMode: boolean;
   setIsEditMode: (isEditMode: boolean) => void;
   timeZone?: string;
@@ -31,8 +28,10 @@ const summaryTimeFormat = 'h:mmA';
 
 export function TimeWindowPicker({
   values,
+  errors,
   initialValues,
-  onChange,
+  onChangeTimeZone,
+  onChangeChangeWindow,
   isEditMode,
   setIsEditMode,
   timeZone = moment.tz.guess(),
@@ -43,8 +42,10 @@ export function TimeWindowPicker({
       {isEditMode && (
         <TimeWindowPickerInputGroup
           values={values}
-          onChange={onChange}
+          onChangeTimeZone={onChangeTimeZone}
+          onChangeChangeWindow={onChangeChangeWindow}
           timeZone={timeZone}
+          errors={errors}
         />
       )}
       <Alert color="info" className="[&>div]:!text-xs">
@@ -83,10 +84,8 @@ export function TimeWindowPicker({
               className="!ml-0"
               onClick={() => {
                 setIsEditMode(false);
-                onChange({
-                  changeWindow: initialValues,
-                  timeZone: initialTimeZone,
-                });
+                onChangeChangeWindow(initialValues);
+                onChangeTimeZone(initialTimeZone || moment.tz.guess());
               }}
             >
               Cancel

app/react/portainer/environments/common/TimeWindowPicker/TimeWindowPickerInputGroup.tsx

@@ -1,8 +1,10 @@
 import moment from 'moment';
 import { useMemo } from 'react';
+import { FormikErrors } from 'formik';
 
 import { Select } from '@@/form-components/ReactSelect';
 import { Option } from '@@/form-components/PortainerSelect';
+import { FormError } from '@@/form-components/FormError';
 
 import { EndpointChangeWindow } from '../../types';
 
@@ -14,19 +16,17 @@ type Props = {
    * The current start and end time values. in 'HH:mm' format (e.g. '00:00') and in UTC timezone.
    */
   values: EndpointChangeWindow;
-  onChange: ({
-    changeWindow,
-    timeZone,
-  }: {
-    changeWindow: EndpointChangeWindow;
-    timeZone: string;
-  }) => void;
+  errors?: FormikErrors<EndpointChangeWindow>;
+  onChangeTimeZone: (timeZone: string) => void;
+  onChangeChangeWindow: (changeWindow: EndpointChangeWindow) => void;
   timeZone?: string;
 };
 
 export function TimeWindowPickerInputGroup({
   values,
-  onChange,
+  errors,
+  onChangeTimeZone,
+  onChangeChangeWindow,
   timeZone = moment.tz.guess(),
 }: Props) {
   // all unique timezones for all countries as options
@@ -47,14 +47,12 @@ export function TimeWindowPickerInputGroup({
   // set the initial timezone to the user's timezone if it is not set
   if (!timeZone) {
     const newTimeZone = moment.tz.guess();
-    onChange({
-      changeWindow: {
+    onChangeChangeWindow({
       ...values,
       StartTime: timeZoneToUtc(values.StartTime, newTimeZone),
       EndTime: timeZoneToUtc(values.EndTime, newTimeZone),
-      },
-      timeZone: newTimeZone,
     });
+    onChangeTimeZone(newTimeZone);
   }
 
   // find the option index for react-select to scroll to the current option
@@ -64,18 +62,16 @@ export function TimeWindowPickerInputGroup({
   );
 
   return (
+    <div className="flex-col">
       <div className="flex flex-wrap items-center gap-x-5">
-      <div className="flex items-center gap-x-5">
+        <div className="inline-flex flex-wrap items-center gap-x-5">
           <TimePickerInput
             utcTime={values.StartTime}
             timeZone={timeZone}
             onChange={(time) =>
-            onChange({
-              changeWindow: {
+              onChangeChangeWindow({
                 ...values,
                 StartTime: timeZoneToUtc(time, timeZone),
-              },
-              timeZone,
               })
             }
           />
@@ -84,12 +80,9 @@ export function TimeWindowPickerInputGroup({
             utcTime={values.EndTime}
             timeZone={timeZone}
             onChange={(time) =>
-            onChange({
-              changeWindow: {
+              onChangeChangeWindow({
                 ...values,
                 EndTime: timeZoneToUtc(time, timeZone),
-              },
-              timeZone,
               })
             }
           />
@@ -97,7 +90,7 @@ export function TimeWindowPickerInputGroup({
         <Select<Option<string>>
           options={timeZoneOptions}
           value={timeZoneOptions[timeZoneOptionIndex]}
-        className="w-72 min-w-fit"
+          className="basis-[fit-content] flex-1 min-w-fit max-w-xs"
           onChange={(newTimeZone) => {
             if (!newTimeZone) return;
             // update the utc time so that the local time displayed remains the same
@@ -111,17 +104,18 @@ export function TimeWindowPickerInputGroup({
               timeZone,
               newTimeZone.value
             );
-          onChange({
-            changeWindow: {
+            onChangeChangeWindow({
               ...values,
               StartTime: updatedStartTime,
               EndTime: updatedEndTime,
-            },
-            timeZone: newTimeZone.value,
             });
+            onChangeTimeZone(newTimeZone.value);
           }}
         />
       </div>
+      {errors?.StartTime && <FormError>{errors.StartTime}</FormError>}
+      {errors?.EndTime && <FormError>{errors.EndTime}</FormError>}
+    </div>
   );
 }