From 7aa4e1e244c791bf86a0a6f84c08f7a901157fa1 Mon Sep 17 00:00:00 2001
From: Josephine Lee <josephine@cockroachlabs.com>
Date: Wed, 27 Apr 2022 15:26:24 -0400
Subject: [PATCH] ui: Initialize the time picker custom option with the current
 selection

Addresses #75552. Partially addresses #71205.

This commit modifies the time picker custom selection to be prefilled with the
currently selected time.

Release note (ui): The time picker (in the Metrics and SQL Activity, among
other, pages) custom selection now defaults to the currently selected time.
---
 .../workspaces/cluster-ui/src/dateRange/dateRange.tsx  | 10 +++++++++-
 .../cluster-ui/src/timeScaleDropdown/rangeSelect.tsx   |  6 ++++--
 .../src/timeScaleDropdown/timeScaleDropdown.tsx        |  2 ++
 .../cluster-ui/src/timeScaleDropdown/timeScaleTypes.ts |  3 ++-
 .../src/timeScaleDropdown/timescale.spec.tsx           |  8 +++++++-
 5 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/pkg/ui/workspaces/cluster-ui/src/dateRange/dateRange.tsx b/pkg/ui/workspaces/cluster-ui/src/dateRange/dateRange.tsx
index 69173d63b543..56e0b30c90ee 100644
--- a/pkg/ui/workspaces/cluster-ui/src/dateRange/dateRange.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/dateRange/dateRange.tsx
@@ -8,7 +8,7 @@
 // by the Apache License, Version 2.0, included in the file
 // licenses/APL.txt.
 
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Alert, DatePicker, Form, Input, Popover, TimePicker } from "antd";
 import moment, { Moment } from "moment";
 import classNames from "classnames/bind";
@@ -52,6 +52,14 @@ export function DateRangeMenu({
   );
   const [endMoment, setEndMoment] = useState<Moment>(endInit || moment.utc());
 
+  useEffect(() => {
+    setStartMoment(startInit);
+  }, [startInit]);
+
+  useEffect(() => {
+    setEndMoment(endInit);
+  }, [endInit]);
+
   const onChangeStart = (m?: Moment) => {
     m && setStartMoment(m);
   };
diff --git a/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/rangeSelect.tsx b/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/rangeSelect.tsx
index 640e6ab864f2..d9fa3dfb5d77 100644
--- a/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/rangeSelect.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/rangeSelect.tsx
@@ -16,6 +16,7 @@ import { CaretDown } from "src/icon/caretDown";
 import classNames from "classnames/bind";
 
 import styles from "./rangeSelector.module.scss";
+import { TimeWindow } from "./timeScaleTypes";
 
 const cx = classNames.bind(styles);
 
@@ -32,6 +33,7 @@ export type Selected = {
   timeEnd?: string;
   title?: string;
   timeLabel?: string;
+  timeWindow: TimeWindow;
 };
 
 interface RangeSelectProps {
@@ -123,8 +125,8 @@ const RangeSelect = ({
       {custom ? (
         <div className={cx("custom-menu")}>
           <DateRangeMenu
-            startInit={moment.utc().subtract(10, "minutes")}
-            endInit={moment.utc()}
+            startInit={selected.timeWindow.start}
+            endInit={selected.timeWindow.end}
             onSubmit={onChangeDate}
             onCancel={() => setCustom(false)}
           />
diff --git a/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeScaleDropdown.tsx b/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeScaleDropdown.tsx
index f767d807243f..5c21c0c0b583 100644
--- a/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeScaleDropdown.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeScaleDropdown.tsx
@@ -85,11 +85,13 @@ export const getTimeRangeTitle = (
       timeEnd: moment.utc(end).format(timeFormat),
       title: "Custom",
       timeLabel: getTimeLabel(currentWindow),
+      timeWindow: currentWindow,
     };
   } else {
     return {
       title: currentScale.key,
       timeLabel: getTimeLabel(currentWindow),
+      timeWindow: currentWindow,
     };
   }
 };
diff --git a/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeScaleTypes.ts b/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeScaleTypes.ts
index f26c0bf72fb9..c12252a2470d 100644
--- a/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeScaleTypes.ts
+++ b/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeScaleTypes.ts
@@ -70,8 +70,9 @@ export type TimeRangeTitle =
       timeEnd: string;
       title: "Custom";
       timeLabel: string;
+      timeWindow: TimeWindow;
     }
-  | { title: string; timeLabel: string };
+  | { title: string; timeLabel: string; timeWindow: TimeWindow };
 
 export enum ArrowDirection {
   LEFT,
diff --git a/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timescale.spec.tsx b/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timescale.spec.tsx
index 56be93c30667..ae3e4b116423 100644
--- a/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timescale.spec.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timescale.spec.tsx
@@ -113,7 +113,11 @@ describe("<TimeScaleDropdown>", function() {
     );
 
     const title = getTimeRangeTitle(currentWindow, state.currentScale);
-    assert.deepEqual(title, { title: "Past 10 Minutes", timeLabel: "10m" });
+    assert.deepEqual(title, {
+      title: "Past 10 Minutes",
+      timeLabel: "10m",
+      timeWindow: currentWindow,
+    });
   });
 
   describe("getTimeRangeTitle", () => {
@@ -137,6 +141,7 @@ describe("<TimeScaleDropdown>", function() {
         timeEnd,
         title: "Custom",
         timeLabel: "10m",
+        timeWindow: currentWindow,
       });
     });
 
@@ -177,6 +182,7 @@ describe("<TimeScaleDropdown>", function() {
         timeEnd,
         title: "Custom",
         timeLabel: "1d",
+        timeWindow: currentWindow,
       });
     });
   });