-
+
+
+
-
-
-
-
+
+
+
+
-
-
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
- 12
-
-
- 13
-
-
- 14
-
-
-
-
- 15
-
-
- 16
-
-
- 17
-
-
- 18
-
-
- 19
-
-
- 20
-
-
- 21
-
-
-
-
- 22
-
-
- 23
-
-
- 24
-
-
- 25
-
-
- 26
-
-
- 27
-
-
- 28
-
-
-
-
- 29
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
-
-
diff --git a/ui/src/Components/SilenceModal/DateTimeSelect/index.test.tsx b/ui/src/Components/SilenceModal/DateTimeSelect/index.test.tsx
index c17c5d15d..5914c2818 100644
--- a/ui/src/Components/SilenceModal/DateTimeSelect/index.test.tsx
+++ b/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("
", () => {
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("
", () => {
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("
", () => {
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("
", () => {
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);
diff --git a/ui/src/Components/SilenceModal/DateTimeSelect/index.tsx b/ui/src/Components/SilenceModal/DateTimeSelect/index.tsx
index 45616e0f6..e93d5d76e 100644
--- a/ui/src/Components/SilenceModal/DateTimeSelect/index.tsx
+++ b/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
(silenceFormStore.data.startsAt);
+
+ const footer = (
+
+
+
+ );
+
return (
{
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(silenceFormStore.data.endsAt);
+
+ const footer = (
+
+
+
+ );
+
return (
{
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,
}}
diff --git a/ui/src/Styles/Components/_DateTimeSelect.scss b/ui/src/Styles/Components/_DateTimeSelect.scss
index ee8e3d600..099ead625 100644
--- a/ui/src/Styles/Components/_DateTimeSelect.scss
+++ b/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;
- }
}
diff --git a/ui/src/Styles/DarkTheme.scss b/ui/src/Styles/DarkTheme.scss
index 4fce8ee2b..6ca5c1885 100644
--- a/ui/src/Styles/DarkTheme.scss
+++ b/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;
diff --git a/ui/src/Styles/LightTheme.scss b/ui/src/Styles/LightTheme.scss
index 00630722b..9c869bb30 100644
--- a/ui/src/Styles/LightTheme.scss
+++ b/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;