fix(ui): migrate to react-day-picker v8

ui/src/Components/SilenceModal/DateTimeSelect/index.test.tsx

@@ -7,6 +7,7 @@ import toDiffableHtml from "diffable-html";
 import addMinutes from "date-fns/addMinutes";
 import addHours from "date-fns/addHours";
 import differenceInMilliseconds from "date-fns/differenceInMilliseconds";
+import { format } from "date-fns";
 
 import { SilenceFormStore } from "Stores/SilenceFormStore";
 import {
@@ -204,7 +205,7 @@ describe("<TabContentStart />", () => {
     expect(silenceFormStore.data.startsAt.toISOString()).toBe(
       new Date(2060, 1, 1, 0, 0, 0).toISOString()
     );
-    tree.find('div[aria-label="Wed Feb 18 2060"]').simulate("click");
+    tree.find("button.rdp-button.rdp-day").at(17).simulate("click");
     expect(silenceFormStore.data.startsAt.toISOString()).toBe(
       new Date(2060, 1, 18, 0, 0, 0).toISOString()
     );
@@ -215,6 +216,20 @@ describe("<TabContentStart />", () => {
     ValidateTimeButton(tree, "startsAt", 0, /angle-up/, 3600 * 1000);
   });
 
+  it("Today button takes you back to the current month", () => {
+    const tree = MountedTabContentStart();
+    expect(silenceFormStore.data.startsAt.toISOString()).toBe(
+      new Date(2060, 1, 1, 0, 0, 0).toISOString()
+    );
+    expect(tree.find(".rdp-caption_label").text()).toBe("February 2060");
+    tree.find("button.rdp-button.rdp-nav_button_next").simulate("click");
+    expect(tree.find(".rdp-caption_label").text()).toBe("March 2060");
+    tree.find("button.btn.btn-light.btn-sm").simulate("click");
+    expect(tree.find(".rdp-caption_label").text()).toBe(
+      format(new Date(), "LLLL yyyy")
+    );
+  });
+
   it("scrolling up on the hour button adds 1h to startsAt", () => {
     const tree = MountedTabContentStart();
     ValidateTimeWheel(
@@ -317,7 +332,7 @@ describe("<TabContentEnd />", () => {
     expect(silenceFormStore.data.endsAt.toISOString()).toBe(
       new Date(2061, 1, 1, 0, 0, 0).toISOString()
     );
-    tree.find('div[aria-label="Thu Feb 24 2061"]').simulate("click");
+    tree.find("button.rdp-button.rdp-day").at(23).simulate("click");
     expect(silenceFormStore.data.endsAt.toISOString()).toBe(
       new Date(2061, 1, 24, 0, 0, 0).toISOString()
     );
@@ -328,6 +343,20 @@ describe("<TabContentEnd />", () => {
     ValidateTimeButton(tree, "endsAt", 0, /angle-up/, 3600 * 1000);
   });
 
+  it("Today button takes you back to the current month", () => {
+    const tree = MountedTabContentEnd();
+    expect(silenceFormStore.data.endsAt.toISOString()).toBe(
+      new Date(2061, 1, 1, 0, 0, 0).toISOString()
+    );
+    expect(tree.find(".rdp-caption_label").text()).toBe("February 2061");
+    tree.find("button.rdp-button.rdp-nav_button_next").simulate("click");
+    expect(tree.find(".rdp-caption_label").text()).toBe("March 2061");
+    tree.find("button.btn.btn-light.btn-sm").simulate("click");
+    expect(tree.find(".rdp-caption_label").text()).toBe(
+      format(new Date(), "LLLL yyyy")
+    );
+  });
+
   it("scrolling up on the hour button adds 1h to endsAt", () => {
     const tree = MountedTabContentEnd();
     ValidateTimeWheel(tree, "endsAt", "td.components-hour-up", -1, 3600 * 1000);

ui/src/Components/SilenceModal/DateTimeSelect/index.tsx

@@ -6,9 +6,13 @@ import differenceInMinutes from "date-fns/differenceInMinutes";
 import differenceInHours from "date-fns/differenceInHours";
 import differenceInDays from "date-fns/differenceInDays";
 import setSeconds from "date-fns/setSeconds";
+import isSameMonth from "date-fns/isSameMonth";
 
-import DayPicker from "react-day-picker";
-import "react-day-picker/lib/style.css";
+import { DayPicker } from "react-day-picker";
+import "react-day-picker/dist/style.css";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCalendarDay } from "@fortawesome/free-solid-svg-icons/faCalendarDay";
 
 import type { SilenceFormStore } from "Stores/SilenceFormStore";
 import { Duration } from "./Duration";
@@ -57,16 +61,34 @@ const Tab: FC<{
 const TabContentStart: FC<{
   silenceFormStore: SilenceFormStore;
 }> = observer(({ silenceFormStore }) => {
+  const today = new Date();
+  const [month, setMonth] = useState<Date>(silenceFormStore.data.startsAt);
+
+  const footer = (
+    <div className="d-flex justify-content-around mt-3">
+      <button
+        className="btn btn-light btn-sm"
+        disabled={isSameMonth(today, month)}
+        onClick={() => setMonth(today)}
+      >
+        <FontAwesomeIcon icon={faCalendarDay} className="me-1" fixedWidth />
+        Today
+      </button>
+    </div>
+  );
+
   return (
     <div className="d-flex flex-sm-row flex-column justify-content-around mx-3 mt-2">
       <div className="d-flex justify-content-center align-items-center">
         <DayPicker
           className="components-date-range"
-          month={silenceFormStore.data.startsAt}
-          disabledDays={{
+          mode="range"
+          month={month}
+          onMonthChange={setMonth}
+          footer={footer}
+          disabled={{
             before: nowZeroSeconds(),
           }}
-          todayButton="Today"
           onDayClick={(val) => {
             const startsAt = new Date(val);
             startsAt.setHours(silenceFormStore.data.startsAt.getHours());
@@ -75,7 +97,7 @@ const TabContentStart: FC<{
             silenceFormStore.data.setStart(startsAt);
             silenceFormStore.data.verifyStarEnd();
           }}
-          selectedDays={{
+          selected={{
             from: silenceFormStore.data.startsAt,
             to: silenceFormStore.data.endsAt,
           }}
@@ -98,16 +120,34 @@ const TabContentStart: FC<{
 
 const TabContentEnd: FC<{ silenceFormStore: SilenceFormStore }> = observer(
   ({ silenceFormStore }) => {
+    const today = new Date();
+    const [month, setMonth] = useState<Date>(silenceFormStore.data.endsAt);
+
+    const footer = (
+      <div className="d-flex justify-content-around mt-3">
+        <button
+          className="btn btn-light btn-sm"
+          disabled={isSameMonth(today, month)}
+          onClick={() => setMonth(today)}
+        >
+          <FontAwesomeIcon icon={faCalendarDay} className="me-1" fixedWidth />
+          Today
+        </button>
+      </div>
+    );
+
     return (
       <div className="d-flex flex-sm-row flex-column justify-content-around mx-3 mt-2">
         <div className="d-flex justify-content-center align-items-center">
           <DayPicker
             className="components-date-range"
-            month={silenceFormStore.data.endsAt}
-            disabledDays={{
+            mode="range"
+            month={month}
+            onMonthChange={setMonth}
+            footer={footer}
+            disabled={{
               before: setSeconds(silenceFormStore.data.startsAt, 0),
             }}
-            todayButton="Today"
             onDayClick={(val) => {
               const endsAt = new Date(val);
               endsAt.setHours(silenceFormStore.data.endsAt.getHours());
@@ -116,7 +156,7 @@ const TabContentEnd: FC<{ silenceFormStore: SilenceFormStore }> = observer(
               silenceFormStore.data.setEnd(endsAt);
               silenceFormStore.data.verifyStarEnd();
             }}
-            selectedDays={{
+            selected={{
               from: silenceFormStore.data.startsAt,
               to: silenceFormStore.data.endsAt,
             }}

ui/src/Styles/Components/_DateTimeSelect.scss

@@ -1,70 +1,83 @@
-.components-date-range.DayPicker {
-  .DayPicker-wrapper:focus,
-  .DayPicker-NavButton:focus {
-    outline: none;
+.components-date-range {
+  .rdp-cell {
+    width: 36px;
+    height: 36px;
   }
 
-  .DayPicker-Weekday {
-    font-weight: 600;
+  .rdp-button {
+    &:focus,
+    &:active {
+      outline: none;
+      border: 0;
+    }
+
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: $light;
+    }
+
+    &.rdp-day_disabled {
+      opacity: 1;
+    }
   }
 
-  .DayPicker-Month {
+  .rdp-caption_label {
+    font-weight: 400;
+    font-size: 120%;
+  }
+
+  .rdp-table {
     border-collapse: inherit;
     border-spacing: 0 1px;
   }
 
-  .DayPicker-Day {
-    &:focus {
-      outline: none;
-    }
-
-    &:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside):not(.DayPicker-Day--selected):hover {
-      background-color: $light;
+  .rdp-day {
+    &:hover,
+    &:active {
       border-radius: 0.5rem;
     }
 
-    &.DayPicker-Day--today {
-      color: $dark;
+    &:not(.rdp-day_disabled):not(.rdp-day_range_middle):not(.rdp-day_selected):hover {
+      background-color: $light;
     }
 
-    &.DayPicker-Day--disabled {
+    &.rdp-day_disabled {
       color: $secondary;
     }
 
-    &.DayPicker-Day--selected {
+    &.rdp-day_today {
+      font-weight: 600;
+    }
+
+    &.rdp-day_selected {
       border-radius: 0;
 
-      &.DayPicker-Day--start {
+      &.rdp-day_range_start,
+      &.rdp-day_range_end {
+        font-weight: 600;
+        background-color: $primary;
+      }
+
+      &.rdp-day_range_start {
         border-top-left-radius: 0.5rem;
         border-bottom-left-radius: 0.5rem;
-        font-weight: 600;
       }
 
-      &.DayPicker-Day--end {
+      &.rdp-day_range_end {
         border-top-right-radius: 0.5rem;
         border-bottom-right-radius: 0.5rem;
-        font-weight: 600;
       }
 
-      &.DayPicker-Day--start:not(.DayPicker-Day--outside),
-      &.DayPicker-Day--end:not(.DayPicker-Day--outside) {
+      &.rdp-day_start:not(.rdp-day_range_middle),
+      &.rdp-day_end:not(.rdp-day_range_middle) {
         background-color: $primary;
         color: $white;
       }
-      &:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
+      &.rdp-day_range_middle:not(.rdp-day_range_start):not(.rdp-day_range_end) {
         background-color: $light;
         color: $components-date-range-sub-color;
       }
     }
   }
-
-  .DayPicker-TodayButton {
-    color: $components-date-range-today-color;
-    font-weight: 600;
-  }
-
-  .DayPicker-Footer {
-    display: flex;
-    justify-content: space-around;
-  }
 }

ui/src/Styles/DarkTheme.scss

@@ -92,7 +92,6 @@ $grid-swimlane-bg: lighten($dark, 2%);
 $bg-focused: darken($blue, 5%);
 $annotation-link-border: $secondary;
 
-$components-date-range-today-color: $white;
 $components-date-range-sub-color: $white;
 
 $input-range-track-background: $secondary;

ui/src/Styles/LightTheme.scss

@@ -73,7 +73,6 @@ $grid-swimlane-bg: lighten($dark, 2%);
 $bg-focused: lighten($blue, 5%);
 $annotation-link-border: $light;
 
-$components-date-range-today-color: $black;
 $components-date-range-sub-color: $black;
 
 $input-range-track-background: $gray-400;