build: [PROD-13949] upgrade date-pickers to version 7

Author: nborde-CSM

package.json

@@ -44,6 +44,7 @@
     "@testing-library/user-event": "^14.5.2",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "babel-jest": "^29.7.0",
+    "dayjs": "^1.11.13",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard": "^17.1.0",
@@ -86,7 +87,7 @@
   "dependencies": {
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
-    "@mui/x-date-pickers": "^5.0.20",
+    "@mui/x-date-pickers": "^7.0.0",
     "@nosferatu500/react-sortable-tree": "^3.0.6",
     "ag-grid-community": "~32.0.2",
     "ag-grid-react": "~32.0.2",

src/inputs/BasicInputs/BasicDateInput/BasicDateInput.js

@@ -1,28 +1,24 @@
 // Copyright (c) Cosmo Tech.
 // Licensed under the MIT license.
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { Stack, TextField } from '@mui/material';
+import { Stack } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { DateUtils } from '@cosmotech/core';
+import dayjs from 'dayjs';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
 import { TooltipInfo } from '../../../misc';
 import { getCommonInputStyles } from '../../style';
 import { BasicInputPlaceholder } from '../BasicInputPlaceholder';
 
 const useStyles = makeStyles(getCommonInputStyles);
+dayjs.extend(utc);
+dayjs.extend(timezone);
 
-const _computeInternalDate = (value, reverseTimezoneOffset) => {
-  if (value == null) return value;
-  return reverseTimezoneOffset ? DateUtils.addLocalDateToUTCOffset(value) : value;
-};
-
-const _getInternalDateToReturnToParent = (value, reverseTimezoneOffset) => {
-  if (value == null) return value;
-  return reverseTimezoneOffset ? DateUtils.addUTCToLocalDateOffset(value) : value;
-};
+const TIME_ZONE = 'UTC';
 
 export const BasicDateInput = (props) => {
   const {
@@ -41,30 +37,11 @@ export const BasicDateInput = (props) => {
   } = props;
   const classes = useStyles();
 
-  // DesktopDatePicker always work in users' local time, meaning that dates provided as UTC may be displayed as a
-  // different day based on users' timezeone offset. For uses cases that only need tha "date" part withtout "time", we
-  // should ignore timezones and must thus add an internal state to reverse the timezone offset (this behavior is
-  // enabled only if reverseTimezoneOffset is set to true)
-  const [internalDate, setInternalDate] = useState(_computeInternalDate(value, reverseTimezoneOffset));
-  const minDate = useMemo(
-    () => _computeInternalDate(dateProps.minDate, reverseTimezoneOffset),
-    [dateProps, reverseTimezoneOffset]
-  );
-  const maxDate = useMemo(
-    () => _computeInternalDate(dateProps.maxDate, reverseTimezoneOffset),
-    [dateProps, reverseTimezoneOffset]
-  );
-
-  useEffect(() => {
-    setInternalDate(_computeInternalDate(value, reverseTimezoneOffset));
-  }, [reverseTimezoneOffset, value]);
-
   const onChange = useCallback(
     (newValue) => {
-      setInternalDate(newValue);
-      changeSelectedDate(_getInternalDateToReturnToParent(newValue, reverseTimezoneOffset));
+      changeSelectedDate(newValue == null ? newValue : new Date(newValue?.format()));
     },
-    [reverseTimezoneOffset, changeSelectedDate]
+    [changeSelectedDate]
   );
 
   if (dateProps.disabled)
@@ -73,7 +50,7 @@ export const BasicDateInput = (props) => {
         id={`date-input-${id}`}
         label={label}
         tooltipText={tooltipText}
-        value={internalDate?.toLocaleDateString() ?? ''}
+        value={value?.toLocaleDateString('en-US', { timeZone: TIME_ZONE }) ?? ''}
         {...otherProps}
       />
     );
@@ -86,26 +63,26 @@ export const BasicDateInput = (props) => {
       className={isDirty ? classes.dirtyInput : isDirty === false ? classes.notDirtyInput : ''}
       sx={{ alignItems: 'center' }}
     >
-      <LocalizationProvider dateAdapter={AdapterDateFns}>
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
         <DesktopDatePicker
           label={label}
           inputFormat={format}
-          minDate={minDate}
-          maxDate={maxDate}
-          renderInput={({ error: _, ...params }) => (
-            <TextField
-              id={`date-text-field-${id}`}
-              variant="outlined"
-              sx={{ flexGrow: 1 }}
-              size={size}
-              error={error?.message?.length > 0}
-              helperText={error?.message ?? ''}
-              {...params}
-            />
-          )}
+          minDate={dateProps.minDate ? dayjs(dateProps.minDate) : null}
+          maxDate={dateProps.minDate ? dayjs(dateProps.maxDate) : null}
+          timezone={TIME_ZONE}
+          slotProps={{
+            textField: {
+              id: `date-text-field-${id}`,
+              variant: 'outlined',
+              sx: { flexGrow: 1 },
+              error: error?.message?.length > 0,
+              helperText: error?.message ?? '',
+              size,
+            },
+          }}
           id={`date-input-${id}`}
           onChange={onChange}
-          value={internalDate ?? new Date(undefined)}
+          value={dayjs(value)}
         />
       </LocalizationProvider>
       <TooltipInfo title={tooltipText} variant="small" />