Merge cockroachdb#73752

73752: cluster-ui: remove divider and transparent button on timescale r=maryliag a=xinhaoz 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 Co-authored-by: Xin Hao Zhang <[email protected]>
rickystewart · Dec 15, 2021 · edc8711 · edc8711
2 parents 45390e7 + 5e1c761
commit edc8711
Show file tree

Hide file tree

Showing 4 changed files with 3 additions and 8 deletions.
diff --git 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,14 +67,14 @@ 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,
   TimeScale,
   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
@@ -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
@@ -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
@@ -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}