ui: update date pickers

ui/package-lock.json

@@ -14,6 +14,7 @@
         "@mui/icons-material": "^5.10.6",
         "@mui/lab": "^5.0.0-alpha.73",
         "@mui/material": "^5.10.8",
+        "@mui/x-date-pickers": "^5.0.3",
         "@react-hook/resize-observer": "^1.2.5",
         "@types/jest": "^27.4.1",
         "@types/node": "^17.0.21",
@@ -2109,6 +2110,75 @@
         "postcss-selector-parser": "^6.0.10"
       }
     },
+    "node_modules/@date-io/core": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@date-io/core/-/core-2.16.0.tgz",
+      "integrity": "sha512-DYmSzkr+jToahwWrsiRA2/pzMEtz9Bq1euJwoOuYwuwIYXnZFtHajY2E6a1VNVDc9jP8YUXK1BvnZH9mmT19Zg=="
+    },
+    "node_modules/@date-io/date-fns": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@date-io/date-fns/-/date-fns-2.16.0.tgz",
+      "integrity": "sha512-bfm5FJjucqlrnQcXDVU5RD+nlGmL3iWgkHTq3uAZWVIuBu6dDmGa3m8a6zo2VQQpu8ambq9H22UyUpn7590joA==",
+      "dependencies": {
+        "@date-io/core": "^2.16.0"
+      },
+      "peerDependencies": {
+        "date-fns": "^2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "date-fns": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@date-io/dayjs": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@date-io/dayjs/-/dayjs-2.16.0.tgz",
+      "integrity": "sha512-y5qKyX2j/HG3zMvIxTobYZRGnd1FUW2olZLS0vTj7bEkBQkjd2RO7/FEwDY03Z1geVGlXKnzIATEVBVaGzV4Iw==",
+      "dependencies": {
+        "@date-io/core": "^2.16.0"
+      },
+      "peerDependencies": {
+        "dayjs": "^1.8.17"
+      },
+      "peerDependenciesMeta": {
+        "dayjs": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@date-io/luxon": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@date-io/luxon/-/luxon-2.16.0.tgz",
+      "integrity": "sha512-L8UXHa/9VbfRqP4KB7JUZwFgOVxo22rONVod1o7GMN2Oku4PzJ0k1kXc+nLP9lRlF1UAA28oQsQqn85Y/PdBZw==",
+      "dependencies": {
+        "@date-io/core": "^2.16.0"
+      },
+      "peerDependencies": {
+        "luxon": "^1.21.3 || ^2.x"
+      },
+      "peerDependenciesMeta": {
+        "luxon": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@date-io/moment": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-2.16.0.tgz",
+      "integrity": "sha512-wvu/40k128kF6P0jPbiyZcPR14VjJAgYEs+mYtsXz/AyWpC2DEJKly7ub+dpevUywbTzzpZysyCxCdzLzxD/uw==",
+      "dependencies": {
+        "@date-io/core": "^2.16.0"
+      },
+      "peerDependencies": {
+        "moment": "^2.24.0"
+      },
+      "peerDependenciesMeta": {
+        "moment": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@emotion/babel-plugin": {
       "version": "11.10.2",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.2.tgz",
@@ -3426,6 +3496,64 @@
         "react": "^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/@mui/x-date-pickers": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-5.0.3.tgz",
+      "integrity": "sha512-njoQvsh7WzgiHu0wGSSPnQ4emT3SDzxCpaKK9DM0jRaxyxfC2wQX431RWmouG8JjnugTltwLnPwkKjLclHQhhA==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.9",
+        "@date-io/core": "^2.15.0",
+        "@date-io/date-fns": "^2.15.0",
+        "@date-io/dayjs": "^2.15.0",
+        "@date-io/luxon": "^2.15.0",
+        "@date-io/moment": "^2.15.0",
+        "@mui/utils": "^5.10.3",
+        "@types/react-transition-group": "^4.4.5",
+        "clsx": "^1.2.1",
+        "prop-types": "^15.7.2",
+        "react-transition-group": "^4.4.5",
+        "rifm": "^0.12.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/material": "^5.4.1",
+        "@mui/system": "^5.4.1",
+        "date-fns": "^2.25.0",
+        "dayjs": "^1.10.7",
+        "luxon": "^1.28.0 || ^2.0.0 || ^3.0.0",
+        "moment": "^2.29.1",
+        "react": "^17.0.2 || ^18.0.0",
+        "react-dom": "^17.0.2 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "date-fns": {
+          "optional": true
+        },
+        "dayjs": {
+          "optional": true
+        },
+        "luxon": {
+          "optional": true
+        },
+        "moment": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -15928,6 +16056,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rifm": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/rifm/-/rifm-0.12.1.tgz",
+      "integrity": "sha512-OGA1Bitg/dSJtI/c4dh90svzaUPt228kzFsUkJbtA2c964IqEAwWXeL9ZJi86xWv3j5SMqRvGULl7bA6cK0Bvg==",
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -19823,6 +19959,43 @@
       "integrity": "sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==",
       "requires": {}
     },
+    "@date-io/core": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@date-io/core/-/core-2.16.0.tgz",
+      "integrity": "sha512-DYmSzkr+jToahwWrsiRA2/pzMEtz9Bq1euJwoOuYwuwIYXnZFtHajY2E6a1VNVDc9jP8YUXK1BvnZH9mmT19Zg=="
+    },
+    "@date-io/date-fns": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@date-io/date-fns/-/date-fns-2.16.0.tgz",
+      "integrity": "sha512-bfm5FJjucqlrnQcXDVU5RD+nlGmL3iWgkHTq3uAZWVIuBu6dDmGa3m8a6zo2VQQpu8ambq9H22UyUpn7590joA==",
+      "requires": {
+        "@date-io/core": "^2.16.0"
+      }
+    },
+    "@date-io/dayjs": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@date-io/dayjs/-/dayjs-2.16.0.tgz",
+      "integrity": "sha512-y5qKyX2j/HG3zMvIxTobYZRGnd1FUW2olZLS0vTj7bEkBQkjd2RO7/FEwDY03Z1geVGlXKnzIATEVBVaGzV4Iw==",
+      "requires": {
+        "@date-io/core": "^2.16.0"
+      }
+    },
+    "@date-io/luxon": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@date-io/luxon/-/luxon-2.16.0.tgz",
+      "integrity": "sha512-L8UXHa/9VbfRqP4KB7JUZwFgOVxo22rONVod1o7GMN2Oku4PzJ0k1kXc+nLP9lRlF1UAA28oQsQqn85Y/PdBZw==",
+      "requires": {
+        "@date-io/core": "^2.16.0"
+      }
+    },
+    "@date-io/moment": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-2.16.0.tgz",
+      "integrity": "sha512-wvu/40k128kF6P0jPbiyZcPR14VjJAgYEs+mYtsXz/AyWpC2DEJKly7ub+dpevUywbTzzpZysyCxCdzLzxD/uw==",
+      "requires": {
+        "@date-io/core": "^2.16.0"
+      }
+    },
     "@emotion/babel-plugin": {
       "version": "11.10.2",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.2.tgz",
@@ -20716,6 +20889,25 @@
         "react-is": "^18.2.0"
       }
     },
+    "@mui/x-date-pickers": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-5.0.3.tgz",
+      "integrity": "sha512-njoQvsh7WzgiHu0wGSSPnQ4emT3SDzxCpaKK9DM0jRaxyxfC2wQX431RWmouG8JjnugTltwLnPwkKjLclHQhhA==",
+      "requires": {
+        "@babel/runtime": "^7.18.9",
+        "@date-io/core": "^2.15.0",
+        "@date-io/date-fns": "^2.15.0",
+        "@date-io/dayjs": "^2.15.0",
+        "@date-io/luxon": "^2.15.0",
+        "@date-io/moment": "^2.15.0",
+        "@mui/utils": "^5.10.3",
+        "@types/react-transition-group": "^4.4.5",
+        "clsx": "^1.2.1",
+        "prop-types": "^15.7.2",
+        "react-transition-group": "^4.4.5",
+        "rifm": "^0.12.1"
+      }
+    },
     "@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -29638,6 +29830,12 @@
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw=="
     },
+    "rifm": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/rifm/-/rifm-0.12.1.tgz",
+      "integrity": "sha512-OGA1Bitg/dSJtI/c4dh90svzaUPt228kzFsUkJbtA2c964IqEAwWXeL9ZJi86xWv3j5SMqRvGULl7bA6cK0Bvg==",
+      "requires": {}
+    },
     "rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",

ui/package.json

@@ -9,6 +9,7 @@
     "@mui/icons-material": "^5.10.6",
     "@mui/lab": "^5.0.0-alpha.73",
     "@mui/material": "^5.10.8",
+    "@mui/x-date-pickers": "^5.0.3",
     "@react-hook/resize-observer": "^1.2.5",
     "@types/jest": "^27.4.1",
     "@types/node": "^17.0.21",

ui/src/List/TimerangeSelector.tsx

@@ -51,9 +51,10 @@
  */
 
 import { Stream } from "../types";
-import StaticDatePicker, {
+import {
+  StaticDatePicker,
   StaticDatePickerProps,
-} from "@mui/lab/StaticDatePicker";
+} from "@mui/x-date-pickers/StaticDatePicker";
 import React, { useEffect } from "react";
 import { zonedTimeToUtc } from "date-fns-tz";
 import { addDays, addMilliseconds, differenceInMilliseconds } from "date-fns";
@@ -65,7 +66,7 @@ import FormControlLabel from "@mui/material/FormControlLabel";
 import FormLabel from "@mui/material/FormLabel";
 import Radio from "@mui/material/Radio";
 import RadioGroup from "@mui/material/RadioGroup";
-import TimePicker, { TimePickerProps } from "@mui/lab/TimePicker";
+import { TimePicker, TimePickerProps } from "@mui/x-date-pickers/TimePicker";
 import Collapse from "@mui/material/Collapse";
 import Box from "@mui/material/Box";
 
@@ -76,7 +77,7 @@ interface Props {
 }
 
 const MyTimePicker = (
-  props: Pick<TimePickerProps, "value" | "onChange" | "disabled">
+  props: Pick<TimePickerProps<Date, Date>, "value" | "onChange" | "disabled">
 ) => (
   <TimePicker
     label="Time"
@@ -89,7 +90,7 @@ const MyTimePicker = (
   />
 );
 
-const SmallStaticDatePicker = (props: StaticDatePickerProps<Date>) => {
+const SmallStaticDatePicker = (props: StaticDatePickerProps<Date, Date>) => {
   // The spacing defined at https://material.io/components/date-pickers#specs
   // seems plenty big enough (on desktop). Not sure why material-ui wants
   // to make it bigger but that doesn't work well with our layout.
@@ -100,20 +101,26 @@ const SmallStaticDatePicker = (props: StaticDatePickerProps<Date>) => {
     <Box
       sx={{
         "@media (pointer: fine)": {
-          "& > div": {
+          "& .MuiPickerStaticWrapper-content": {
-            minWidth: 256,
+            minWidth: "auto", // defaults to 320px
           },
-          "& > div > div, & > div > div > div, & .MuiCalendarPicker-root": {
+          "& .MuiCalendarOrClockPicker-root > div, & .MuiCalendarPicker-root": {
-            width: 256,
+            width: 256, // defaults to 320px
+            margin: 0,
           },
-          "& .MuiTypography-caption": {
+          "& .MuiPickersArrowSwitcher-spacer": {
+            // By default, this spacer is so big that there's not enough space
+            // in the row for October. Shrink it.
+            width: 12,
+          },
+          "& .MuiDayPicker-weekDayLabel": {
             width: DATE_SIZE,
             margin: 0,
           },
           "& .PrivatePickersSlideTransition-root": {
             minHeight: DATE_SIZE * 6,
           },
-          '& .PrivatePickersSlideTransition-root [role="row"]': {
+          "& .MuiDayPicker-weekContainer": {
             margin: 0,
           },
           "& .MuiPickersDay-dayWithMargin": {
@@ -362,6 +369,7 @@ const TimerangeSelector = ({
         <SmallStaticDatePicker
           displayStaticWrapperAs="desktop"
           value={startDate}
+          disabled={days.allowed === null}
           shouldDisableDate={shouldDisableDate}
           maxDate={
             days.allowed === null ? today : new Date(days.allowed.maxMillis)

ui/src/index.tsx

@@ -5,14 +5,14 @@
 import CssBaseline from "@mui/material/CssBaseline";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
 import StyledEngineProvider from "@mui/material/StyledEngineProvider";
-import LocalizationProvider from "@mui/lab/LocalizationProvider";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import "@fontsource/roboto";
 import React from "react";
 import ReactDOM from "react-dom";
 import App from "./App";
 import ErrorBoundary from "./ErrorBoundary";
 import { SnackbarProvider } from "./snackbars";
-import AdapterDateFns from "@mui/lab/AdapterDateFns";
+import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 import "./index.css";
 import { HashRouter } from "react-router-dom";