Update @mui/x-date-pickers and Project Schedule settings (#2876)

docs/user_guide/assets/licenses/frontend_licenses.txt

@@ -1388,6 +1388,31 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 
 
+@mui/x-date-pickers 6.18.7
+MIT
+MIT License
+
+Copyright (c) 2020 Material-UI SAS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+
 @popperjs/core 2.11.8
 MIT
 The MIT License (MIT)

package.json

@@ -45,6 +45,7 @@
     "@microsoft/signalr": "^8.0.0",
     "@mui/icons-material": "^5.14.19",
     "@mui/material": "^5.14.16",
+    "@mui/x-date-pickers": "^6.18.7",
     "@redux-devtools/extension": "^3.2.5",
     "@reduxjs/toolkit": "^1.9.5",
     "@segment/analytics-next": "^1.55.0",

src/components/App/AppLoggedIn.tsx

@@ -4,6 +4,7 @@ import { Theme, ThemeProvider, createTheme } from "@mui/material/styles";
 import { ReactElement, useEffect, useMemo, useState } from "react";
 import { Route, Routes } from "react-router-dom";
 
+import DatePickersLocalizationProvider from "components/App/DatePickersLocalizationProvider";
 import SignalRHub from "components/App/SignalRHub";
 import AppBar from "components/AppBar/AppBarComponent";
 import PageNotFound from "components/PageNotFound/component";
@@ -72,7 +73,7 @@ export default function AppWithBar(): ReactElement {
       : theme;
 
   return (
-    <>
+    <DatePickersLocalizationProvider>
       <SignalRHub />
       <AppBar />
       <FontContext.Provider value={projFonts}>
@@ -113,6 +114,6 @@ export default function AppWithBar(): ReactElement {
           </Routes>
         </ThemeProvider>
       </FontContext.Provider>
-    </>
+    </DatePickersLocalizationProvider>
   );
 }

src/components/App/DatePickersLocalizationProvider.tsx

@@ -0,0 +1,26 @@
+import { LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+// Import for each non-en uiWritingSystem lang in src/types/writingSystem.ts:
+import "dayjs/locale/ar";
+import "dayjs/locale/es";
+import "dayjs/locale/fr";
+import "dayjs/locale/pt";
+import "dayjs/locale/zh";
+import { ReactElement, ReactNode } from "react";
+
+import i18n from "i18n";
+
+export default function DatePickersLocalizationProvider(props: {
+  children: ReactNode;
+}): ReactElement {
+  return (
+    <LocalizationProvider
+      // If i18n.language changes, user must refresh or log out and back in
+      // for the change to take effect in @mui/x-date-pickers components.
+      adapterLocale={i18n.language || undefined}
+      dateAdapter={AdapterDayjs}
+    >
+      {props.children}
+    </LocalizationProvider>
+  );
+}

src/components/ProjectSettings/ProjectSchedule/CalendarView.tsx

@@ -1,55 +1,35 @@
 import { Icon } from "@mui/material";
-import {
-  CalendarPicker,
-  PickersDay,
-  PickersDayProps,
-} from "@mui/x-date-pickers";
-import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
-import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { DateCalendar } from "@mui/x-date-pickers";
 import dayjs, { Dayjs } from "dayjs";
 import { ReactElement } from "react";
 
+import ProjectPickersDay from "components/ProjectSettings/ProjectSchedule/ProjectPickersDay";
+
 interface CalendarViewProps {
   projectSchedule: Date[];
 }
 
 export default function CalendarView(props: CalendarViewProps): ReactElement {
-  // Custom renderer for CalendarPicker
-  function customDayRenderer(
-    day: Dayjs,
-    _selectedDays: Array<Dayjs | null>,
-    pickersDayProps: PickersDayProps<Dayjs>
-  ): ReactElement {
-    const date = day.toDate();
-    const selected =
-      props.projectSchedule &&
-      props.projectSchedule.findIndex(
-        (d) =>
-          d.getDate() === date.getDate() &&
-          d.getMonth() === date.getMonth() &&
-          d.getFullYear() === date.getFullYear()
-      ) >= 0;
-    return <PickersDay {...pickersDayProps} selected={selected} />;
-  }
-
   function handleCalendarView(monthToRender?: Dayjs[]): ReactElement[] {
     if (!monthToRender) {
       return [];
     }
 
     return monthToRender.map((tempDayjs) => (
-      <CalendarPicker
+      <DateCalendar
         key={tempDayjs.toISOString()}
-        components={{ LeftArrowIcon: Icon, RightArrowIcon: Icon }}
         readOnly
         disabled
-        defaultCalendarMonth={tempDayjs}
+        referenceDate={tempDayjs}
         maxDate={tempDayjs}
         minDate={tempDayjs}
-        onChange={() => {}}
-        date={null}
         disableHighlightToday
-        renderDay={customDayRenderer}
+        slots={{
+          day: ProjectPickersDay,
+          leftArrowIcon: Icon,
+          rightArrowIcon: Icon,
+        }}
+        slotProps={{ day: { days: props.projectSchedule } as any }}
       />
     ));
   }
@@ -60,9 +40,5 @@ export default function CalendarView(props: CalendarViewProps): ReactElement {
     return Array.from(new Set(months)).sort().map(dayjs);
   }
 
-  return (
-    <LocalizationProvider dateAdapter={AdapterDayjs}>
-      {handleCalendarView(getScheduledMonths(props.projectSchedule))}
-    </LocalizationProvider>
-  );
+  return <>{handleCalendarView(getScheduledMonths(props.projectSchedule))}</>;
 }