[frontend] migration date picker

OpenCTI-Platform · Apr 19, 2024 · 43bb316 · 43bb316
1 parent c038a0a
commit 43bb316
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 29 deletions.
diff --git a/opencti-platform/opencti-front/src/components/DateTimePickerField.jsx b/opencti-platform/opencti-front/src/components/DateTimePickerField.jsx
@@ -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,

diff --git a/opencti-platform/opencti-front/vite.config.mts b/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",