From 4579f82cc06a5f0732b55de4920df4c31891fd5d Mon Sep 17 00:00:00 2001
From: maryliag <marylia@cockroachlabs.com>
Date: Wed, 30 Nov 2022 14:44:41 -0500
Subject: [PATCH] ui: ux improvements

This commit adds UX improvements, such as:
- Add spacing on Table Details page
- Add spacing on Index Details page and change
the sql box size
- Rename `Statement Execution and Planning Time` chart
on Statement Details page to `Statement Times`

Epic: None

Release note (ui change): Rename chart on Statement Details
page from `Statement Execution and Planning Time` to
`Statement Times`.
---
 .../src/databaseTablePage/databaseTablePage.module.scss  | 6 +++++-
 .../src/databaseTablePage/databaseTablePage.tsx          | 2 +-
 .../src/indexDetailsPage/indexDetailsPage.module.scss    | 6 ++++++
 .../cluster-ui/src/indexDetailsPage/indexDetailsPage.tsx | 9 ++++++---
 .../cluster-ui/src/statementDetails/statementDetails.tsx | 2 +-
 5 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.module.scss b/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.module.scss
index 4dc11ed1fd6c..ca11a8bea9eb 100644
--- a/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.module.scss
+++ b/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.module.scss
@@ -76,7 +76,7 @@
     padding-right: 9px;
     padding-left: 9px;
     margin-right: -9px;
-    margin-left: -9px;
+    margin-left: 9px;
   }
 
   &__header {
@@ -157,3 +157,7 @@
   font-weight: $font-weight--extra-bold;
   color: $colors--neutral-8;
 }
+
+.row-spaced {
+  margin-top: 20px;
+}
diff --git a/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.tsx b/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.tsx
index 94f8f5b31ffa..d38891cb525f 100644
--- a/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.tsx
@@ -621,7 +621,7 @@ export class DatabaseTablePage extends React.Component<
                         </SummaryCard>
                       </Col>
                     </Row>
-                    <Row gutter={18}>
+                    <Row gutter={18} className={cx("row-spaced")}>
                       <SummaryCard
                         className={cx(
                           "summary-card",
diff --git a/pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetailsPage.module.scss b/pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetailsPage.module.scss
index b30c9a0719bf..0bd704fab476 100644
--- a/pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetailsPage.module.scss
+++ b/pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetailsPage.module.scss
@@ -73,6 +73,7 @@
   &--row {
     background-color: $adminui-white;
     letter-spacing: 0.33px;
+    margin-left: 1px;
   }
   &--label {
     font-family: $font-family--semi-bold;
@@ -136,3 +137,8 @@
     text-decoration: underline;
   }
 }
+
+.row-spaced {
+  margin-top: 20px;
+}
+
diff --git a/pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetailsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetailsPage.tsx
index d4213f2b032b..e569d89a5f6a 100644
--- a/pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetailsPage.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetailsPage.tsx
@@ -17,7 +17,7 @@ import { baseHeadingClasses } from "src/transactionsPage/transactionsPageClasses
 import { CaretRight } from "../icon/caretRight";
 import { BreadcrumbItem, Breadcrumbs } from "../breadcrumbs";
 import { Caution, Search as IndexIcon } from "@cockroachlabs/icons";
-import { SqlBox } from "src/sql";
+import { SqlBox, SqlBoxSize } from "src/sql";
 import { Col, Row, Tooltip } from "antd";
 import "antd/lib/col/style";
 import "antd/lib/row/style";
@@ -257,7 +257,10 @@ export class IndexDetailsPage extends React.Component<
           <section className={baseHeadingClasses.wrapper}>
             <Row gutter={18}>
               <Col className="gutter-row" span={18}>
-                <SqlBox value={this.props.details.createStatement} />
+                <SqlBox
+                  value={this.props.details.createStatement}
+                  size={SqlBoxSize.custom}
+                />
               </Col>
             </Row>
             <Row gutter={18}>
@@ -306,7 +309,7 @@ export class IndexDetailsPage extends React.Component<
                 </SummaryCard>
               </Col>
             </Row>
-            <Row gutter={18}>
+            <Row gutter={18} className={cx("row-spaced")}>
               <Col className="gutter-row" span={18}>
                 <SummaryCard className={cx("summary-card--row")}>
                   <Heading type="h5">Index recommendations</Heading>
diff --git a/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx b/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx
index 549c981e44fe..d231ed4ecd80 100644
--- a/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx
@@ -689,7 +689,7 @@ export class StatementDetails extends React.Component<
           <Row gutter={24}>
             <Col className="gutter-row" span={12}>
               <BarGraphTimeSeries
-                title="Statement Execution and Planning Time"
+                title="Statement Times"
                 alignedData={executionAndPlanningTimeseries}
                 uPlotOptions={executionAndPlanningOps}
                 yAxisUnits={AxisUnits.Duration}