Merge #87497

87497: ui: fix database page column capitalization r=j82w a=j82w

Fixed capitalization on following fields Index recommendations to Index Recommendations, Range count to Range Count,
and Regions/nodes to Regions/Nodes

closes #87437

<img width="1707" alt="Screen Shot 2022-09-07 at 10 33 07 AM" src="https://user-images.githubusercontent.com/8868107/188905195-ff8148e6-d153-4114-a26d-d23657c8d674.png">

<img width="824" alt="Screen Shot 2022-09-07 at 10 33 40 AM" src="https://user-images.githubusercontent.com/8868107/188905166-bea29727-58ab-4429-ba34-12ae92bd02fa.png">

Release justification: Category 2: Bug fixes and
low-risk updates to new functionality

Release note: None

Co-authored-by: j82w <[email protected]>

Author: craig[bot]

pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.tsx

@@ -23,10 +23,11 @@ import { Pagination, ResultsPerPageLabel } from "src/pagination";
 import {
   ColumnDescriptor,
   ISortedTablePagination,
-  SortSetting,
   SortedTable,
+  SortSetting,
 } from "src/sortedtable";
 import * as format from "src/util/format";
+import { DATE_FORMAT } from "src/util/format";
 import { mvccGarbage, syncHistory } from "../util";
 
 import styles from "./databaseDetailsPage.module.scss";
@@ -37,7 +38,6 @@ import {
 } from "src/transactionsPage/transactionsPageClasses";
 import { Moment } from "moment";
 import { Caution } from "@cockroachlabs/icons";
-import { DATE_FORMAT } from "src/util/format";
 import { Anchor } from "../anchor";
 
 const cx = classNames.bind(styles);
@@ -378,7 +378,7 @@ export class DatabaseDetailsPage extends React.Component<
         title: (
           <Tooltip
             placement="bottom"
-            title="Regions/nodes on which the table data is stored."
+            title="Regions/Nodes on which the table data is stored."
           >
             Regions
           </Tooltip>

pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.tsx

@@ -9,13 +9,13 @@
 // licenses/APL.txt.
 
 import React from "react";
-import { Col, Row, Tabs } from "antd";
+import { Col, Row, Tabs, Tooltip } from "antd";
 import "antd/lib/col/style";
 import "antd/lib/row/style";
 import "antd/lib/tabs/style";
-import { RouteComponentProps } from "react-router-dom";
+import { Link, RouteComponentProps } from "react-router-dom";
 import classNames from "classnames/bind";
-import { Tooltip } from "antd";
+import classnames from "classnames/bind";
 import "antd/lib/tooltip/style";
 import { Heading } from "@cockroachlabs/ui-components";
 
@@ -24,26 +24,25 @@ import { Breadcrumbs } from "src/breadcrumbs";
 import { CaretRight } from "src/icon/caretRight";
 import { StackIcon } from "src/icon/stackIcon";
 import { SqlBox } from "src/sql";
-import { ColumnDescriptor, SortSetting, SortedTable } from "src/sortedtable";
+import { ColumnDescriptor, SortedTable, SortSetting } from "src/sortedtable";
 import {
   SummaryCard,
   SummaryCardItem,
   SummaryCardItemBoolSetting,
 } from "src/summaryCard";
 import * as format from "src/util/format";
+import { DATE_FORMAT, DATE_FORMAT_24_UTC } from "src/util/format";
 import { syncHistory, tableStatsClusterSetting } from "src/util";
 
 import styles from "./databaseTablePage.module.scss";
 import { commonStyles } from "src/common";
 import { baseHeadingClasses } from "src/transactionsPage/transactionsPageClasses";
 import moment, { Moment } from "moment";
 import { Search as IndexIcon } from "@cockroachlabs/icons";
-import { Link } from "react-router-dom";
-import classnames from "classnames/bind";
 import booleanSettingStyles from "../settings/booleanSetting.module.scss";
 import { CircleFilled } from "../icon";
 import { performanceTuningRecipes } from "src/util/docs";
-import { DATE_FORMAT_24_UTC, DATE_FORMAT } from "src/util/format";
+
 const cx = classNames.bind(styles);
 const booleanSettingCx = classnames.bind(booleanSettingStyles);
 
@@ -346,7 +345,7 @@ export class DatabaseTablePage extends React.Component<
           placement="bottom"
           title="Index recommendations will appear if the system detects improper index usage, such as the occurrence of unused indexes. Following index recommendations may help improve query performance."
         >
-          Index recommendations
+          Index Recommendations
         </Tooltip>
       ),
       cell: this.renderIndexRecommendations,
@@ -492,7 +491,7 @@ export class DatabaseTablePage extends React.Component<
                   <SummaryCard className={cx("summary-card")}>
                     {this.props.showNodeRegionsSection && (
                       <SummaryCardItem
-                        label="Regions/nodes"
+                        label="Regions/Nodes"
                         value={this.props.stats.nodesByRegionString}
                       />
                     )}

pkg/ui/workspaces/cluster-ui/src/databasesPage/databasesPage.tsx

@@ -13,6 +13,7 @@ import { Link, RouteComponentProps } from "react-router-dom";
 import { Tooltip } from "antd";
 import "antd/lib/tooltip/style";
 import classNames from "classnames/bind";
+import classnames from "classnames/bind";
 
 import { Anchor } from "src/anchor";
 import { StackIcon } from "src/icon/stackIcon";
@@ -21,8 +22,8 @@ import { BooleanSetting } from "src/settings/booleanSetting";
 import {
   ColumnDescriptor,
   ISortedTablePagination,
-  SortSetting,
   SortedTable,
+  SortSetting,
 } from "src/sortedtable";
 import * as format from "src/util/format";
 
@@ -33,7 +34,6 @@ import {
   statisticsClasses,
 } from "src/transactionsPage/transactionsPageClasses";
 import { syncHistory, tableStatsClusterSetting } from "src/util";
-import classnames from "classnames/bind";
 import booleanSettingStyles from "../settings/booleanSetting.module.scss";
 import { CircleFilled } from "../icon";
 
@@ -284,7 +284,7 @@ export class DatabasesPage extends React.Component<
           placement="bottom"
           title="The total number of ranges across all tables in the database."
         >
-          Range count
+          Range Count
         </Tooltip>
       ),
       cell: database => database.rangeCount,
@@ -296,9 +296,9 @@ export class DatabasesPage extends React.Component<
       title: (
         <Tooltip
           placement="bottom"
-          title="Regions/nodes on which the database tables are located."
+          title="Regions/Nodes on which the database tables are located."
         >
-          Regions/nodes
+          Regions/Nodes
         </Tooltip>
       ),
       cell: database => database.nodesByRegionString || "None",
@@ -313,7 +313,7 @@ export class DatabasesPage extends React.Component<
           placement="bottom"
           title="Index recommendations will appear if the system detects improper index usage, such as the occurrence of unused indexes. Following index recommendations may help improve query performance."
         >
-          Index recommendations
+          Index Recommendations
         </Tooltip>
       ),
       cell: this.renderIndexRecommendations,

pkg/ui/workspaces/cluster-ui/src/pageConfig/pageConfig.tsx

@@ -30,7 +30,9 @@ export function PageConfig(props: PageConfigProps): React.ReactElement {
 
   return (
     <div
-      className={cx("page-config", { "page-config__white-background": isCockroachCloud })}
+      className={cx("page-config", {
+        "page-config__white-background": isCockroachCloud,
+      })}
     >
       <ul className={classes}>{props.children}</ul>
     </div>