[frontend] Update dependency @mui/x-date-pickers to v7

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Romuald Lemesle <[email protected]>
krish9797 · Aug 21, 2024 · 6276b91 · 6276b91
1 parent a6d9c83
commit 6276b91
Show file tree

Hide file tree

Showing 11 changed files with 116 additions and 112 deletions.
diff --git a/openbas-api/src/main/java/io/openbas/rest/asset/form/AssetInput.java b/openbas-api/src/main/java/io/openbas/rest/asset/form/AssetInput.java
@@ -1,9 +1,9 @@
 package io.openbas.rest.asset.form;
 
 import com.fasterxml.jackson.annotation.JsonProperty;
-import lombok.Data;
-
+import io.swagger.v3.oas.annotations.media.Schema;
 import jakarta.validation.constraints.NotBlank;
+import lombok.Data;
 
 import java.time.Instant;
 import java.util.ArrayList;
@@ -21,6 +21,7 @@ public abstract class AssetInput {
   @JsonProperty("asset_description")
   private String description;
 
+  @Schema(nullable = true)
   @JsonProperty("asset_last_seen")
   private Instant lastSeen;
 

diff --git a/openbas-api/src/main/java/io/openbas/rest/exercise/form/ExerciseCreateInput.java b/openbas-api/src/main/java/io/openbas/rest/exercise/form/ExerciseCreateInput.java
@@ -1,6 +1,7 @@
 package io.openbas.rest.exercise.form;
 
 import com.fasterxml.jackson.annotation.JsonProperty;
+import io.swagger.v3.oas.annotations.media.Schema;
 import jakarta.annotation.Nullable;
 import jakarta.validation.constraints.FutureOrPresent;
 import jakarta.validation.constraints.NotBlank;
@@ -42,6 +43,7 @@ public class ExerciseCreateInput {
   @JsonProperty("exercise_description")
   private String description;
 
+  @Schema(nullable = true)
   @JsonProperty("exercise_start_date")
   @FutureOrPresent(message = NOW_FUTURE_MESSAGE)
   @Getter(NONE)

diff --git a/openbas-front/package.json b/openbas-front/package.json
@@ -19,10 +19,10 @@
     "@mui/material": "5.16.7",
     "@mui/styles": "5.16.7",
     "@mui/utils": "5.16.6",
-    "@mui/x-date-pickers": "6.20.2",
+    "@mui/x-date-pickers": "7.12.0",
     "@redux-devtools/extension": "3.3.0",
     "@uiw/react-md-editor": "4.0.4",
-    "apexcharts": "3.52.0",
+    "apexcharts": "3.51.0",
     "axios": "1.7.4",
     "ckeditor5-custom-build": "link:packages/ckeditor5-custom-build",
     "classnames": "2.5.1",

diff --git a/openbas-front/src/admin/components/assets/endpoints/EndpointForm.tsx b/openbas-front/src/admin/components/assets/endpoints/EndpointForm.tsx
@@ -23,7 +23,7 @@ const EndpointForm: React.FC<Props> = ({
   initialValues = {
     asset_name: '',
     asset_description: '',
-    asset_last_seen: undefined,
+    asset_last_seen: null,
     asset_tags: [],
     endpoint_hostname: '',
     endpoint_ips: [],
@@ -48,7 +48,7 @@ const EndpointForm: React.FC<Props> = ({
       zodImplement<EndpointInput>().with({
         asset_name: z.string().min(1, { message: t('Should not be empty') }),
         asset_description: z.string().optional(),
-        asset_last_seen: z.string().datetime().optional(),
+        asset_last_seen: z.string().datetime().optional().nullable(),
         asset_tags: z.string().array().optional(),
         endpoint_hostname: z.string().optional(),
         endpoint_ips: z.string().ip({ message: t('Invalid IP addresses') }).array().min(1),
@@ -100,22 +100,18 @@ const EndpointForm: React.FC<Props> = ({
         name="asset_last_seen"
         render={({ field }) => (
           <MuiDateTimePicker
-            value={field.value ? new Date(field.value) : ''}
+            value={field.value ? new Date(field.value) : null}
             label={t('Last Seen')}
             slotProps={{
               textField: {
                 variant: 'standard',
                 fullWidth: true,
                 style: { marginTop: 20 },
                 error: !!errors.asset_last_seen,
-                helperText: errors.asset_last_seen && errors.asset_last_seen?.message,
+                helperText: errors.asset_last_seen?.message,
               },
             }}
-            onChange={(date) => {
-              if (date instanceof Date) {
-                field.onChange(date?.toISOString());
-              }
-            }}
+            onChange={(date) => field.onChange(date?.toISOString())}
             ampm={false}
             format="yyyy-MM-dd HH:mm:ss"
           />

diff --git a/openbas-front/src/admin/components/assets/security_platforms/SecurityPlatformForm.tsx b/openbas-front/src/admin/components/assets/security_platforms/SecurityPlatformForm.tsx
@@ -24,7 +24,7 @@ const SecurityPlatformForm: React.FC<Props> = ({
     asset_name: '',
     security_platform_type: 'SIEM',
     asset_description: '',
-    asset_last_seen: undefined,
+    asset_last_seen: null,
     security_platform_logo_light: undefined,
     security_platform_logo_dark: undefined,
     asset_tags: [],
@@ -47,7 +47,7 @@ const SecurityPlatformForm: React.FC<Props> = ({
         asset_description: z.string().optional(),
         security_platform_logo_light: z.string().optional(),
         security_platform_logo_dark: z.string().optional(),
-        asset_last_seen: z.string().datetime().optional(),
+        asset_last_seen: z.string().datetime().optional().nullable(),
         asset_tags: z.string().array().optional(),
       }),
     ),

diff --git a/openbas-front/src/admin/components/common/injects/ImportUploaderInjectFromXlsInjects.tsx b/openbas-front/src/admin/components/common/injects/ImportUploaderInjectFromXlsInjects.tsx
@@ -221,11 +221,9 @@ const ImportUploaderInjectFromXlsInjects: FunctionComponent<Props> = ({
           render={({ field, fieldState }) => (
             <DateTimePicker
               views={['year', 'month', 'day']}
-              value={(field.value)}
-              minDate={new Date(new Date().setUTCHours(0, 0, 0, 0)).toISOString()}
-              onChange={(startDate) => {
-                return (startDate ? field.onChange(new Date(startDate).toISOString()) : field.onChange(''));
-              }}
+              value={field.value ? new Date(field.value) : null}
+              minDate={new Date(new Date().setUTCHours(0, 0, 0, 0))}
+              onChange={(startDate) => field.onChange(startDate?.toISOString())}
               slotProps={{
                 textField: {
                   fullWidth: true,

diff --git a/openbas-front/src/admin/components/scenarios/scenario/ScenarioRecurringFormDialog.tsx b/openbas-front/src/admin/components/scenarios/scenario/ScenarioRecurringFormDialog.tsx
@@ -182,19 +182,17 @@ const ScenarioRecurringFormDialog: React.FC<Props> = ({ onSubmit, selectRecurrin
               render={({ field, fieldState }) => (
                 <DateTimePicker
                   views={['year', 'month', 'day']}
-                  value={(field.value)}
-                  minDate={new Date(new Date().setUTCHours(0, 0, 0, 0)).toISOString()}
-                  onChange={(startDate) => {
-                    return (startDate ? field.onChange(new Date(startDate).toISOString()) : field.onChange(''));
-                  }}
+                  value={field.value ? new Date(field.value) : null}
+                  minDate={new Date(new Date().setUTCHours(0, 0, 0, 0))}
+                  onChange={(startDate) => field.onChange(startDate?.toISOString())}
                   onAccept={() => {
                     clearErrors('time');
                   }}
                   slotProps={{
                     textField: {
                       fullWidth: true,
                       error: !!fieldState.error,
-                      helperText: fieldState.error && fieldState.error?.message,
+                      helperText: fieldState.error?.message,
                     },
                   }}
                   label={t('Start date')}
@@ -276,14 +274,14 @@ const ScenarioRecurringFormDialog: React.FC<Props> = ({ onSubmit, selectRecurrin
                   skipDisabled
                   thresholdToRenderTimeInASingleColumn={100}
                   closeOnSelect={false}
-                  value={field.value}
-                  minTime={['noRepeat'].includes(selectRecurring) && new Date(new Date().setUTCHours(0, 0, 0, 0)).getTime() === new Date(getValues('startDate')).getTime() ? new Date().toISOString() : null}
-                  onChange={(time) => (time ? field.onChange(new Date(time).toISOString()) : field.onChange(''))}
+                  value={field.value ? new Date(field.value) : null}
+                  minTime={['noRepeat'].includes(selectRecurring) && new Date(new Date().setUTCHours(0, 0, 0, 0)).getTime() === new Date(getValues('startDate')).getTime() ? new Date() : undefined}
+                  onChange={(time) => (field.onChange(time?.toISOString()))}
                   slotProps={{
                     textField: {
                       fullWidth: true,
                       error: !!fieldState.error,
-                      helperText: fieldState.error && fieldState.error?.message,
+                      helperText: fieldState.error?.message,
                     },
                   }}
                 />
@@ -297,16 +295,16 @@ const ScenarioRecurringFormDialog: React.FC<Props> = ({ onSubmit, selectRecurrin
                 render={({ field, fieldState }) => (
                   <DateTimePicker
                     views={['year', 'month', 'day']}
-                    value={(field.value || null)}
-                    minDate={new Date(new Date().setUTCHours(24, 0, 0, 0)).toISOString()}
+                    value={field.value ? new Date(field.value) : null}
+                    minDate={new Date(new Date().setUTCHours(24, 0, 0, 0))}
                     onChange={(endDate) => {
-                      return (endDate ? field.onChange(new Date(new Date(endDate).setUTCHours(0, 0, 0, 0)).toISOString()) : field.onChange(''));
+                      return (endDate ? field.onChange(new Date(new Date(endDate).setUTCHours(0, 0, 0, 0)).toISOString()) : null);
                     }}
                     slotProps={{
                       textField: {
                         fullWidth: true,
                         error: !!fieldState.error,
-                        helperText: fieldState.error && fieldState.error?.message,
+                        helperText: fieldState.error?.message,
                       },
                     }}
                     label={t('End date')}

diff --git a/openbas-front/src/admin/components/simulations/simulation/ExerciseCreationForm.tsx b/openbas-front/src/admin/components/simulations/simulation/ExerciseCreationForm.tsx
@@ -28,7 +28,7 @@ const ExerciseCreationForm: FunctionComponent<Props> = ({
     exercise_severity: 'high',
     exercise_subtitle: '',
     exercise_description: '',
-    exercise_start_date: '',
+    exercise_start_date: null,
     exercise_tags: [],
   },
 }) => {
@@ -51,7 +51,7 @@ const ExerciseCreationForm: FunctionComponent<Props> = ({
         exercise_main_focus: z.string().optional(),
         exercise_severity: z.string().optional(),
         exercise_description: z.string().optional(),
-        exercise_start_date: z.string().optional(),
+        exercise_start_date: z.string().datetime().optional().nullable(),
         exercise_tags: z.string().array().optional(),
       }),
     ),
@@ -160,7 +160,7 @@ const ExerciseCreationForm: FunctionComponent<Props> = ({
         name="exercise_start_date"
         render={({ field }) => (
           <MuiDateTimePicker
-            value={field.value ? new Date(field.value) : ''}
+            value={field.value ? new Date(field.value) : null}
             label={t('Start date (optional)')}
             minDateTime={new Date()}
             slotProps={{
@@ -169,14 +169,10 @@ const ExerciseCreationForm: FunctionComponent<Props> = ({
                 fullWidth: true,
                 style: { marginTop: 20 },
                 error: !!errors.exercise_start_date,
-                helperText: errors.exercise_start_date && errors.exercise_start_date?.message,
+                helperText: errors.exercise_start_date?.message,
               },
             }}
-            onChange={(date) => {
-              if (date instanceof Date) {
-                field.onChange(date?.toISOString());
-              }
-            }}
+            onChange={(date) => field.onChange(date?.toISOString())}
             ampm={false}
             format="yyyy-MM-dd HH:mm:ss"
           />

diff --git a/openbas-front/src/admin/components/simulations/simulation/ExerciseDateForm.tsx b/openbas-front/src/admin/components/simulations/simulation/ExerciseDateForm.tsx
@@ -16,8 +16,8 @@ interface Props {
 }
 
 interface ExerciseStartDateAndTime {
-  date: string;
-  time: string;
+  date: Date;
+  time: Date;
 }
 
 // eslint-disable-next-line no-underscore-dangle
@@ -32,11 +32,11 @@ const ExerciseDateForm: React.FC<Props> = ({
 
   const defaultFormValues = () => {
     if (initialValues?.exercise_start_date) {
-      return ({ date: initialValues.exercise_start_date, time: initialValues.exercise_start_date });
+      return ({ date: new Date(initialValues.exercise_start_date), time: new Date(initialValues.exercise_start_date) });
     }
     return ({
-      date: new Date(new Date().setUTCHours(0, 0, 0, 0)).toISOString(),
-      time: minutesInFuture(5).toISOString(),
+      date: new Date(new Date().setUTCHours(0, 0, 0, 0)),
+      time: minutesInFuture(5).toDate(),
     });
   };
 
@@ -49,8 +49,7 @@ const ExerciseDateForm: React.FC<Props> = ({
     if (checked) {
       onSubmit({ exercise_start_date: '' });
     } else {
-      const date = new Date(data.date);
-      const time = new Date(data.time);
+      const { date, time } = data;
       date.setHours(time.getHours());
       date.setMinutes(time.getMinutes());
       date.setSeconds(time.getSeconds());
@@ -67,32 +66,41 @@ const ExerciseDateForm: React.FC<Props> = ({
     defaultValues: defaultFormValues(),
     resolver: zodResolver(
       zodImplement<ExerciseStartDateAndTime>().with({
-        date: z.string().min(1, t('Required')),
-        time: z.string().min(1, t('Required')),
-      }).refine(
-        (data) => {
-          if (!checked && data.date) {
-            return new Date(data.date).getTime() >= new Date(new Date().setUTCHours(0, 0, 0, 0)).getTime();
-          }
-          return true;
-        },
-        {
-          message: t('Date should be at least today'),
-          path: ['date'],
-        },
-      )
-        .refine(
+        date: z.any().refine(
           (data) => {
-            if (!checked && data.time) {
-              return (new Date().getTime() + _MS_DELAY_TOO_CLOSE) < new Date(data.time).getTime();
+            if (!checked) {
+              return !!data;
             }
             return true;
           },
-          {
-            message: t('The time and start date do not match, as the time provided is either too close to the current moment or in the past'),
-            path: ['time'],
+          { message: t('Required') },
+        ).refine(
+          (data) => {
+            if (!checked) {
+              return data instanceof Date && data.getTime() >= new Date(new Date().setUTCHours(0, 0, 0, 0)).getTime();
+            }
+            return true;
           },
+          { message: t('Date should be at least today') },
         ),
+        time: z.any().refine(
+          (data) => {
+            if (!checked) {
+              return !!data;
+            }
+            return true;
+          },
+          { message: t('Required') },
+        ).refine(
+          (data) => {
+            if (!checked) {
+              return data instanceof Date && (new Date().getTime() + _MS_DELAY_TOO_CLOSE) < data.getTime();
+            }
+            return true;
+          },
+          { message: t('The time and start date do not match, as the time provided is either too close to the current moment or in the past') },
+        ),
+      }),
     ),
   });
 
@@ -112,19 +120,17 @@ const ExerciseDateForm: React.FC<Props> = ({
               views={['year', 'month', 'day']}
               label={t('Start date (optional)')}
               disabled={checked}
-              minDate={new Date(new Date().setUTCHours(0, 0, 0, 0)).toISOString()}
+              minDate={new Date(new Date().setUTCHours(0, 0, 0, 0))}
               value={(field.value)}
-              onChange={(date) => {
-                return (date ? field.onChange(new Date(date).toISOString()) : field.onChange(''));
-              }}
+              onChange={(date) => field.onChange(date)}
               onAccept={() => {
                 clearErrors('time');
               }}
               slotProps={{
                 textField: {
                   fullWidth: true,
                   error: !!fieldState.error,
-                  helperText: fieldState.error && fieldState.error?.message,
+                  helperText: fieldState.error?.message,
                 },
               }}
             />
@@ -144,13 +150,13 @@ const ExerciseDateForm: React.FC<Props> = ({
               disabled={checked}
               closeOnSelect={false}
               value={field.value}
-              minTime={new Date(new Date().setUTCHours(0, 0, 0, 0)).getTime() === new Date(getValues('date')).getTime() ? new Date().toISOString() : null}
-              onChange={(time) => (time ? field.onChange(new Date(time).toISOString()) : field.onChange(''))}
+              minTime={new Date(new Date().setUTCHours(0, 0, 0, 0)).getTime() === new Date(getValues('date')).getTime() ? new Date() : undefined}
+              onChange={(time) => field.onChange(time)}
               slotProps={{
                 textField: {
                   fullWidth: true,
                   error: !!fieldState.error,
-                  helperText: fieldState.error && fieldState.error?.message,
+                  helperText: fieldState.error?.message,
                 },
               }}
             />
@@ -160,12 +166,12 @@ const ExerciseDateForm: React.FC<Props> = ({
 
       <div style={{ float: 'right', marginTop: 20 }}>
         {handleClose && (
-          <Button
-            onClick={handleClose.bind(this)}
-            style={{ marginRight: 10 }}
-          >
-            {t('Cancel')}
-          </Button>
+        <Button
+          onClick={handleClose.bind(this)}
+          style={{ marginRight: 10 }}
+        >
+          {t('Cancel')}
+        </Button>
         )}
         <Button
           color="secondary"
@@ -177,5 +183,4 @@ const ExerciseDateForm: React.FC<Props> = ({
     </form>
   );
 };
-
 export default ExerciseDateForm;