From 5e1c761948110d29fd0a521e4a8ef0d97718bda1 Mon Sep 17 00:00:00 2001
From: Xin Hao Zhang <xzhang@cockroachlabs.com>
Date: Mon, 13 Dec 2021 14:31:24 -0500
Subject: [PATCH] cluster-ui: remove divider and transparent button on
 timescale

Previously, the timescale dropdown component had transparent button
backgrounds and by default a divider to the left of the dropdown. This
commit removes the divider from the base component and make the button
backgrounds solid to make the component more reusable.

Release note: None
---
 .../cluster-ui/src/statementsPage/statementsPage.tsx        | 6 ++----
 .../src/timeScaleDropdown/timeFrameControls.module.scss     | 1 -
 .../cluster-ui/src/timeScaleDropdown/timeScaleDropdown.tsx  | 2 --
 .../cluster-ui/src/transactionsPage/transactionsPage.tsx    | 2 +-
 4 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx
index 0e3c225d4c51..6a30b77b2b71 100644
--- a/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx
@@ -11,7 +11,6 @@
 import React from "react";
 import { RouteComponentProps } from "react-router-dom";
 import { isNil, merge } from "lodash";
-import moment, { Moment } from "moment";
 import classNames from "classnames/bind";
 import { Loading } from "src/loading";
 import { PageConfig, PageConfigItem } from "src/pageConfig";
@@ -23,7 +22,6 @@ import {
 } from "src/sortedtable";
 import { Search } from "src/search";
 import { Pagination } from "src/pagination";
-import { DateRange } from "src/dateRange";
 import { TableStatistics } from "../tableStatistics";
 import {
   Filter,
@@ -69,7 +67,6 @@ import { StatementsRequest } from "src/api/statementsApi";
 import Long from "long";
 import ClearStats from "../sqlActivity/clearStats";
 import SQLActivityError from "../sqlActivity/errorComponent";
-import { commonStyles } from "../common";
 import {
   TimeScaleDropdown,
   defaultTimeScaleSelected,
@@ -77,6 +74,7 @@ import {
   toDateRange,
 } from "../timeScaleDropdown";
 
+import { commonStyles } from "../common";
 const cx = classNames.bind(styles);
 const sortableTableCx = classNames.bind(sortableTableStyles);
 
@@ -557,7 +555,7 @@ export class StatementsPage extends React.Component<
               showNodes={nodes.length > 1}
             />
           </PageConfigItem>
-          <PageConfigItem>
+          <PageConfigItem className={commonStyles("separator")}>
             <TimeScaleDropdown
               currentScale={this.props.timeScale}
               setTimeScale={this.changeTimeScale}
diff --git a/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeFrameControls.module.scss b/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeFrameControls.module.scss
index 6399b01d2e32..f17090b89b50 100644
--- a/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeFrameControls.module.scss
+++ b/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeFrameControls.module.scss
@@ -41,7 +41,6 @@
     ._action, ._action > button {
       margin-right: 0px;
       border-color: $colors--neutral-4;
-      background-color: transparent;
       width: 40px;
       height: 40px;
       font-size: 21px;
diff --git a/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeScaleDropdown.tsx b/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeScaleDropdown.tsx
index 3dac35fb629b..fd12cfce28cf 100644
--- a/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeScaleDropdown.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeScaleDropdown.tsx
@@ -10,7 +10,6 @@
 
 import React, { useMemo } from "react";
 import moment from "moment";
-import { Divider } from "antd";
 import classNames from "classnames/bind";
 import {
   TimeRangeTitle,
@@ -237,7 +236,6 @@ export const TimeScaleDropdown: React.FC<TimeScaleDropdownProps> = ({
 
   return (
     <div className={cx("timescale")}>
-      <Divider type="vertical" />
       <RangeSelect
         selected={getTimeRangeTitle(currentWindow, currentScale)}
         onChange={onOptionSelect}
diff --git a/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.tsx
index 1a800dbdd010..6ced624eaf2f 100644
--- a/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.tsx
@@ -457,7 +457,7 @@ export class TransactionsPage extends React.Component<
                       showNodes={nodes.length > 1}
                     />
                   </PageConfigItem>
-                  <PageConfigItem>
+                  <PageConfigItem className={commonStyles("separator")}>
                     <TimeScaleDropdown
                       currentScale={this.props.timeScale}
                       setTimeScale={this.changeTimeScale}