Merge pull request #104 from prymitive/offset-refresh

feat(ui): refresh offset badges on silence start/end tabs in the sile…

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

@@ -14,8 +14,6 @@ import { HourMinute } from "./HourMinute";
 import "./index.css";
 
 const OffsetBadge = ({ startDate, endDate, prefixLabel }) => {
-  if (!startDate) startDate = moment().seconds(0);
-
   const days = endDate.diff(startDate, "days");
   const hours = endDate.diff(startDate, "hours") % 24;
   const minutes = endDate.diff(startDate, "minutes") % 60;
@@ -30,7 +28,7 @@ const OffsetBadge = ({ startDate, endDate, prefixLabel }) => {
   );
 };
 OffsetBadge.propTypes = {
-  startDate: PropTypes.instanceOf(moment),
+  startDate: PropTypes.instanceOf(moment).isRequired,
   endDate: PropTypes.instanceOf(moment).isRequired,
   prefixLabel: PropTypes.string.isRequired
 };
@@ -183,15 +181,29 @@ const DateTimeSelect = observer(
         },
         setDuration() {
           this.current = TabNames.Duration;
+        },
+        timeNow: null,
+        updateTimeNow() {
+          this.timeNow = moment().seconds(0);
         }
       },
       {
         setStart: action.bound,
         setEnd: action.bound,
-        setDuration: action.bound
+        setDuration: action.bound,
+        updateTimeNow: action.bound
       }
     );
 
+    componentDidMount() {
+      this.tab.updateTimeNow();
+      this.nowUpdateTimer = setInterval(this.tab.updateTimeNow, 30 * 1000);
+    }
+    componentWillUnmount() {
+      clearInterval(this.nowUpdateTimer);
+      this.nowUpdateTimer = null;
+    }
+
     render() {
       const { silenceFormStore } = this.props;
 
@@ -204,6 +216,7 @@ const DateTimeSelect = observer(
                   <span className="mr-1">Starts</span>
                   <OffsetBadge
                     prefixLabel="in "
+                    startDate={this.tab.timeNow}
                     endDate={silenceFormStore.data.startsAt}
                   />
                 </React.Fragment>
@@ -217,6 +230,7 @@ const DateTimeSelect = observer(
                   <span className="mr-1">Ends</span>
                   <OffsetBadge
                     prefixLabel="in "
+                    startDate={this.tab.timeNow}
                     endDate={silenceFormStore.data.endsAt}
                   />
                 </React.Fragment>

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

@@ -2,6 +2,8 @@ import React from "react";
 
 import { mount, shallow } from "enzyme";
 
+import { advanceTo, clear } from "jest-date-mock";
+
 import moment from "moment";
 
 import { SilenceFormStore } from "Stores/SilenceFormStore";
@@ -20,6 +22,10 @@ beforeEach(() => {
   silenceFormStore.data.endsAt = moment([2061, 1, 1, 0, 0, 0]);
 });
 
+afterEach(() => {
+  clear();
+});
+
 const ShallowDateTimeSelect = () => {
   return shallow(<DateTimeSelect silenceFormStore={silenceFormStore} />);
 };
@@ -74,6 +80,39 @@ describe("<DateTimeSelect />", () => {
     tab.simulate("click");
     expect(tree.find(".tab-content").text()).toBe("366days0hours0minutes");
   });
+
+  it("'Ends' tab offset badge is updated after 1 minute", () => {
+    jest.useFakeTimers();
+    advanceTo(new Date(2060, 1, 1, 12, 0, 0));
+    silenceFormStore.data.startsAt = moment([2060, 1, 1, 12, 0, 0]);
+    silenceFormStore.data.endsAt = moment([2060, 1, 1, 13, 0, 0]);
+
+    const tree = MountedDateTimeSelect();
+    expect(
+      tree
+        .find(".nav-link")
+        .at(1)
+        .text()
+    ).toBe("Endsin 1h ");
+
+    advanceTo(new Date(2060, 1, 1, 12, 1, 0));
+    jest.runOnlyPendingTimers();
+
+    expect(
+      tree
+        .find(".nav-link")
+        .at(1)
+        .text()
+    ).toBe("Endsin 59m ");
+  });
+
+  it("nowUpdateTimer is destroyed before unmount", () => {
+    const tree = MountedDateTimeSelect();
+    const instance = tree.instance();
+    expect(instance.nowUpdateTimer).toBeDefined();
+    instance.componentWillUnmount();
+    expect(instance.nowUpdateTimer).toBeNull();
+  });
 });
 
 const ValidateTimeButton = (