Update dependency @mui/x-date-pickers to v7 - abandoned

opencti-platform/opencti-front/package.json

@@ -17,7 +17,7 @@
     "@mui/material": "5.15.15",
     "@mui/styles": "5.15.15",
     "@mui/utils": "5.15.14",
-    "@mui/x-date-pickers": "6.19.9",
+    "@mui/x-date-pickers": "7.2.0",
     "@rjsf/core": "5.18.1",
     "@rjsf/mui": "5.18.1",
     "@rjsf/utils": "5.18.1",

opencti-platform/opencti-front/src/components/DateTimePickerField.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import { DateTimePicker } from '@mui/x-date-pickers';
 import { fieldToDateTimePicker } from 'formik-mui-lab';
 import { useField } from 'formik';
 import * as R from 'ramda';
@@ -34,6 +34,7 @@ const DateTimePickerField = (props) => {
   } = props;
   const intl = useIntl();
   const [field, meta] = useField(name);
+
   const internalOnAccept = React.useCallback(
     (date) => {
       setFieldTouched(name, true);
@@ -43,6 +44,7 @@ const DateTimePickerField = (props) => {
     },
     [setFieldTouched, onSubmit, name],
   );
+
   const internalOnChange = React.useCallback(
     (date) => {
       setFieldValue(name, date ?? null);
@@ -52,44 +54,29 @@ const DateTimePickerField = (props) => {
     },
     [setFieldValue, onChange, name],
   );
+
   const internalOnFocus = React.useCallback(() => {
     if (typeof onFocus === 'function' && name) {
       onFocus(name);
     }
   }, [onFocus, name]);
+
   const internalOnBlur = React.useCallback(() => {
     setFieldTouched(name, true);
     const { value } = field;
     if (typeof onSubmit === 'function') {
       onSubmit(name, value ? parse(value).toISOString() : null);
     }
   }, [setFieldTouched, onSubmit, name, field]);
+
+  const views = ['year', 'month', 'day', 'hours', 'minutes'];
   if (withSeconds) {
-    return (
-      <DateTimePicker
-        {...fieldToDateTimePicker(props)}
-        variant="inline"
-        disableToolbar={false}
-        autoOk={true}
-        allowKeyboardControl={true}
-        onAccept={internalOnAccept}
-        onChange={internalOnChange}
-        views={['year', 'month', 'day', 'hours', 'minutes', 'seconds']}
-        format={
-          dateTimeFormatsMapWithSeconds[intl.locale] || 'yyyy-MM-dd hh:mm:ss a'
-        }
-        slotProps={{
-          textField: {
-            ...textFieldProps,
-            onFocus: internalOnFocus,
-            onBlur: internalOnBlur,
-            error: !R.isNil(meta.error),
-            helperText: (!R.isNil(meta.error) && meta.error) || textFieldProps.helperText,
-          },
-        }}
-      />
-    );
+    views.push('seconds');
   }
+
+  const formatNoSeconds = dateTimeFormatsMap[intl.locale] || 'yyyy-MM-dd hh:mm a';
+  const formatWithSeconds = dateTimeFormatsMapWithSeconds[intl.locale] || 'yyyy-MM-dd hh:mm:ss a';
+
   return (
     <DateTimePicker
       {...fieldToDateTimePicker(props)}
@@ -99,8 +86,8 @@ const DateTimePickerField = (props) => {
       allowKeyboardControl={true}
       onAccept={internalOnAccept}
       onChange={internalOnChange}
-      views={['year', 'month', 'day', 'hours', 'minutes']}
-      format={dateTimeFormatsMap[intl.locale] || 'yyyy-MM-dd hh:mm a'}
+      views={views}
+      format={withSeconds ? formatWithSeconds : formatNoSeconds}
       slotProps={{
         textField: {
           ...textFieldProps,

opencti-platform/opencti-front/src/components/TimePickerField.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TimePicker } from '@mui/x-date-pickers/TimePicker';
+import { TimePicker } from '@mui/x-date-pickers';
 import { fieldToTimePicker } from 'formik-mui-lab';
 import { useField } from 'formik';
 import * as R from 'ramda';

opencti-platform/opencti-front/src/private/components/common/lists/FilterDate.tsx

@@ -1,5 +1,5 @@
 import React, { FunctionComponent, KeyboardEvent } from 'react';
-import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { DatePicker } from '@mui/x-date-pickers';
 
 interface FilterDateProps {
   defaultHandleAddFilter: (
@@ -61,11 +61,14 @@ const FilterDate: FunctionComponent<FilterDateProps> = ({
       }
     }
   };
+
+  const filterDate = findFilterFromKey(inputValues, filterKey, operator)?.values[0];
+
   return (
     <DatePicker
       key={filterKey}
       label={filterLabel}
-      value={findFilterFromKey(inputValues, filterKey, operator)?.values[0] || null}
+      value={filterDate ? new Date(filterDate) : null}
       onChange={(value) => handleChangeDate(value as Date)}
       onAccept={(value) => handleAcceptDate(value as Date)}
       slotProps={{

opencti-platform/opencti-front/src/private/components/workspaces/WorkspaceHeader.jsx

@@ -11,7 +11,7 @@ import IconButton from '@mui/material/IconButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import ToggleButton from '@mui/material/ToggleButton';
 import TextField from '@mui/material/TextField';
-import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { DatePicker } from '@mui/x-date-pickers';
 import Select from '@mui/material/Select';
 import FormControl from '@mui/material/FormControl';
 import InputLabel from '@mui/material/InputLabel';

opencti-platform/opencti-front/src/public/components/PublicDashboard.tsx

@@ -57,10 +57,6 @@ const PublicDashboardComponent = ({
     auditWidget,
   } = usePublicDashboardWidgets(uriKey, config);
 
-  const onChangeRelativeDate = () => {};
-  const onChangeStartDate = () => {};
-  const onChangeEndDate = () => {};
-
   if (!publicDashboardByUriKey || !config) {
     return null;
   }
@@ -71,9 +67,6 @@ const PublicDashboardComponent = ({
       <PublicDashboardHeader
         title={publicDashboardByUriKey?.name ?? ''}
         manifestConfig={config}
-        onChangeRelativeDate={onChangeRelativeDate}
-        onChangeStartDate={onChangeStartDate}
-        onChangeEndDate={onChangeEndDate}
       />
 
       <ReactGridLayout

opencti-platform/opencti-front/src/public/components/dashboard/PublicDashboardHeader.tsx

@@ -4,24 +4,18 @@ import InputLabel from '@mui/material/InputLabel';
 import Select from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
 import FormControl from '@mui/material/FormControl';
-import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { DatePicker } from '@mui/x-date-pickers';
 import { useFormatter } from '../../../components/i18n';
 import type { PublicManifestConfig } from './PublicManifest';
 
 interface PublicDashboardHeaderProps {
   title: string
   manifestConfig: PublicManifestConfig
-  onChangeRelativeDate: (value: string) => void
-  onChangeStartDate: (value: string | null) => void
-  onChangeEndDate: (value: string | null) => void
 }
 
 const PublicDashboardHeader = ({
   title,
   manifestConfig,
-  onChangeRelativeDate,
-  onChangeStartDate,
-  onChangeEndDate,
 }: PublicDashboardHeaderProps) => {
   const { t_i18n } = useFormatter();
   const { relativeDate, startDate, endDate } = manifestConfig;
@@ -54,7 +48,6 @@ const PublicDashboardHeader = ({
           labelId="relative"
           label={t_i18n('Relative time')}
           value={relativeDate ?? ''}
-          onChange={(event) => onChangeRelativeDate(event.target.value)}
           variant="outlined"
           disabled
         >
@@ -69,11 +62,10 @@ const PublicDashboardHeader = ({
       </FormControl>
       <DatePicker
         disabled
-        value={startDate ?? null}
+        value={startDate ? new Date(startDate) : null}
         label={t_i18n('Start date')}
         sx={{ width: 220 }}
         disableFuture
-        onChange={(value, context) => !context.validationError && onChangeStartDate(value)}
         slotProps={{
           field: {
             clearable: true,
@@ -89,10 +81,9 @@ const PublicDashboardHeader = ({
       />
       <DatePicker
         disabled
-        value={endDate ?? null}
+        value={endDate ? new Date(endDate) : null}
         label={t_i18n('End date')}
         disableFuture
-        onChange={(value, context) => !context.validationError && onChangeEndDate(value)}
         sx={{ width: 220 }}
         slotProps={{
           field: {

opencti-platform/opencti-front/vite.config.mts

@@ -80,7 +80,6 @@ const depsToOptimize = [
   "js-file-download",
   "@mui/material/ToggleButtonGroup",
   "@mui/material/ToggleButton",
-  "@mui/x-date-pickers/DatePicker",
   "@mui/lab/Timeline",
   "@mui/lab/TimelineItem",
   "@mui/lab/TimelineSeparator",
@@ -102,7 +101,6 @@ const depsToOptimize = [
   "react-virtualized",
   "@mui/material/Tabs",
   "@mui/material/Tab",
-  "@mui/x-date-pickers/DateTimePicker",
   "formik-mui-lab",
   "@ckeditor/ckeditor5-react",
   "@mui/material/Slider",
@@ -126,7 +124,6 @@ const depsToOptimize = [
   "react-timeline-range-slider",
   "recharts",
   "@mui/material/Collapse",
-  "@mui/x-date-pickers/TimePicker",
   "react-material-ui-carousel",
   "@mui/material/LinearProgress",
   "@rjsf/mui",

opencti-platform/opencti-front/yarn.lock

@@ -1695,7 +1695,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.23.9, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.23.9, @babel/runtime@npm:^7.24.0, @babel/runtime@npm:^7.24.4, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
   version: 7.24.4
   resolution: "@babel/runtime@npm:7.24.4"
   dependencies:
@@ -3291,14 +3291,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/base@npm:^5.0.0-beta.22":
-  version: 5.0.0-beta.41
-  resolution: "@mui/base@npm:5.0.0-beta.41"
+"@mui/base@npm:^5.0.0-beta.40":
+  version: 5.0.0-beta.42
+  resolution: "@mui/base@npm:5.0.0-beta.42"
   dependencies:
-    "@babel/runtime": "npm:^7.23.9"
+    "@babel/runtime": "npm:^7.24.4"
     "@floating-ui/react-dom": "npm:^2.0.8"
     "@mui/types": "npm:^7.2.14"
-    "@mui/utils": "npm:^5.15.14"
+    "@mui/utils": "npm:^6.0.0-alpha.1"
     "@popperjs/core": "npm:^2.11.8"
     clsx: "npm:^2.1.0"
     prop-types: "npm:^15.8.1"
@@ -3309,7 +3309,7 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10/8371d3d5a451f15e5ed16df554ff699787fdd7b7e61feccce93528c33818b3d2d33222c6a46d58cbd33f9c2bdcc515d0fdf4fe2ab561bc070633ce8ec4578c51
+  checksum: 10/0fba94046780e73a4bb994d9a07106897ec878741a369b95a2c1996b7bc6d1ab400402f5d8f4e558ab166f3cd9cb2d851e373b256705a842bae5de0b59e68c74
   languageName: node
   linkType: hard
 
@@ -3591,7 +3591,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/utils@npm:5.15.14, @mui/utils@npm:^5.14.16, @mui/utils@npm:^5.15.14":
+"@mui/utils@npm:5.15.14, @mui/utils@npm:^5.15.14":
   version: 5.15.14
   resolution: "@mui/utils@npm:5.15.14"
   dependencies:
@@ -3609,22 +3609,40 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/x-date-pickers@npm:6.19.9":
-  version: 6.19.9
-  resolution: "@mui/x-date-pickers@npm:6.19.9"
+"@mui/utils@npm:^6.0.0-alpha.1":
+  version: 6.0.0-alpha.1
+  resolution: "@mui/utils@npm:6.0.0-alpha.1"
   dependencies:
-    "@babel/runtime": "npm:^7.23.2"
-    "@mui/base": "npm:^5.0.0-beta.22"
-    "@mui/utils": "npm:^5.14.16"
-    "@types/react-transition-group": "npm:^4.4.8"
-    clsx: "npm:^2.0.0"
+    "@babel/runtime": "npm:^7.24.4"
+    "@types/prop-types": "npm:^15.7.12"
+    prop-types: "npm:^15.8.1"
+    react-is: "npm:^18.2.0"
+  peerDependencies:
+    "@types/react": ^17.0.0 || ^18.0.0
+    react: ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/042a32a0b3816e3dbc6b88a07abe92ecbc1b6c3b2b1515461c4bc5da9fac137cc859eeac725454cb21d713a489fba916d8f0e648ecfb69a3d9ac1d553fa55b48
+  languageName: node
+  linkType: hard
+
+"@mui/x-date-pickers@npm:7.2.0":
+  version: 7.2.0
+  resolution: "@mui/x-date-pickers@npm:7.2.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.24.0"
+    "@mui/base": "npm:^5.0.0-beta.40"
+    "@mui/system": "npm:^5.15.14"
+    "@mui/utils": "npm:^5.15.14"
+    "@types/react-transition-group": "npm:^4.4.10"
+    clsx: "npm:^2.1.0"
     prop-types: "npm:^15.8.1"
     react-transition-group: "npm:^4.4.5"
   peerDependencies:
     "@emotion/react": ^11.9.0
     "@emotion/styled": ^11.8.1
-    "@mui/material": ^5.8.6
-    "@mui/system": ^5.8.0
+    "@mui/material": ^5.15.14
     date-fns: ^2.25.0 || ^3.2.0
     date-fns-jalali: ^2.13.0-0
     dayjs: ^1.10.7
@@ -3653,7 +3671,7 @@ __metadata:
       optional: true
     moment-jalaali:
       optional: true
-  checksum: 10/d5c2e84e039b791c0d36595d56b9b7aa57a098aed0bc4de7f2933b6305434fc2865331b49d660c40298f8537114b68a05127e32effa660df74721040b1817f09
+  checksum: 10/65c261d5ab3173dc531040b33a2665d2abaeda78086e550169038b11625d20e2c786cf96891e602c59acff35c9a0d19dd42422f55d61d45438cf15a023c0bf8f
   languageName: node
   linkType: hard
 
@@ -5343,7 +5361,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/prop-types@npm:*, @types/prop-types@npm:^15.7.11":
+"@types/prop-types@npm:*, @types/prop-types@npm:^15.7.11, @types/prop-types@npm:^15.7.12":
   version: 15.7.12
   resolution: "@types/prop-types@npm:15.7.12"
   checksum: 10/ac16cc3d0a84431ffa5cfdf89579ad1e2269549f32ce0c769321fdd078f84db4fbe1b461ed5a1a496caf09e637c0e367d600c541435716a55b1d9713f5035dfe
@@ -5453,7 +5471,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-transition-group@npm:^4.4.10, @types/react-transition-group@npm:^4.4.8":
+"@types/react-transition-group@npm:^4.4.10":
   version: 4.4.10
   resolution: "@types/react-transition-group@npm:4.4.10"
   dependencies:
@@ -15135,7 +15153,7 @@ __metadata:
     "@mui/material": "npm:5.15.15"
     "@mui/styles": "npm:5.15.15"
     "@mui/utils": "npm:5.15.14"
-    "@mui/x-date-pickers": "npm:6.19.9"
+    "@mui/x-date-pickers": "npm:7.2.0"
     "@playwright/test": "npm:1.42.1"
     "@rjsf/core": "npm:5.18.1"
     "@rjsf/mui": "npm:5.18.1"