Merge #132613

132613: ui: misc v2 dbs styling fixes r=xinhaoz a=xinhaoz - Add tooltip to 'Last updated' text in table details - Cursor should be a pointer on tooltip hover - Align Enabled/Disabled tag in db details page with other badges by using the existing Badge component Epic: CRDB-37558 Release note: None Co-authored-by: Xin Hao Zhang <[email protected]>
cockroachdb · Oct 18, 2024 · bb702ba · bb702ba
2 parents 6710d9d + 5b53302
commit bb702ba
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 24 deletions.
diff --git a/...workspaces/cluster-ui/src/components/tableMetadataLastUpdated/tableMetadataJobControl.tsx b/...workspaces/cluster-ui/src/components/tableMetadataLastUpdated/tableMetadataJobControl.tsx
@@ -4,19 +4,22 @@
 // included in the /LICENSE file.
 
 import { RedoOutlined } from "@ant-design/icons";
-import { Skeleton, Tooltip } from "antd";
+import { Skeleton } from "antd";
 import React, { useCallback, useEffect } from "react";
 
 import {
   TableMetadataJobStatus,
   triggerUpdateTableMetaJobApi,
   useTableMetaUpdateJob,
 } from "src/api/databases/tableMetaUpdateJobApi";
+import { TABLE_METADATA_LAST_UPDATED_HELP } from "src/constants/tooltipMessages";
 import Button from "src/sharedFromCloud/button";
 import { Timestamp } from "src/timestamp";
 import { DATE_WITH_SECONDS_FORMAT_24_TZ } from "src/util";
 import { usePrevious } from "src/util/hooks";
 
+import { Tooltip } from "../tooltip";
+
 import styles from "./tableMetadataJobControl.module.scss";
 
 type TableMetadataJobControlProps = {
@@ -86,11 +89,7 @@ export const TableMetadataJobControl: React.FC<
   return (
     <div className={styles["controls-container"]}>
       <Skeleton loading={isLoading}>
-        <Tooltip
-          title={
-            "Data is last refreshed automatically (per cluster setting) or manually."
-          }
-        >
+        <Tooltip title={TABLE_METADATA_LAST_UPDATED_HELP}>
           Last refreshed:{" "}
           <Timestamp
             format={DATE_WITH_SECONDS_FORMAT_24_TZ}

diff --git a/pkg/ui/workspaces/cluster-ui/src/components/tooltip/index.tsx b/pkg/ui/workspaces/cluster-ui/src/components/tooltip/index.tsx
@@ -4,6 +4,7 @@
 // included in the /LICENSE file.
 
 import { Tooltip as AntdTooltip, TooltipProps } from "antd";
+import classNames from "classnames";
 import React from "react";
 
 import styles from "./tooltip.module.scss";
@@ -13,9 +14,12 @@ type Props = TooltipProps & {
 };
 
 export const Tooltip: React.FC<Props> = props => {
-  const style = props.noUnderline ? "" : styles.underline;
+  const underlineStyle = props.noUnderline ? "" : styles.underline;
   return (
-    <AntdTooltip className={style} title={props.title}>
+    <AntdTooltip
+      className={classNames(styles.container, underlineStyle)}
+      title={<div className={styles.title}>{props.title}</div>}
+    >
       {props.children}
     </AntdTooltip>
   );

diff --git a/pkg/ui/workspaces/cluster-ui/src/components/tooltip/tooltip.module.scss b/pkg/ui/workspaces/cluster-ui/src/components/tooltip/tooltip.module.scss
@@ -8,3 +8,16 @@
 .underline {
   border-bottom: 1px dashed $colors--neutral-5;
 }
+
+.container {
+  &:hover{
+    cursor: pointer;
+  }
+}
+
+.title {
+ a {
+   font-size: inherit;
+   color: inherit;
+ }
+}
diff --git a/pkg/ui/workspaces/cluster-ui/src/constants/tooltipMessages.tsx b/pkg/ui/workspaces/cluster-ui/src/constants/tooltipMessages.tsx
@@ -10,9 +10,12 @@ import { tableStatsClusterSetting } from "src/util";
 export const AUTO_STATS_COLLECTION_HELP = (
   <span>
     Automatic statistics can help improve query performance. Learn how to{" "}
-    <Link underline href={tableStatsClusterSetting} target="_blank">
+    <Link strong underline href={tableStatsClusterSetting} target="_blank">
       <span>manage statistics collection</span>
     </Link>{" "}
     .
   </span>
 );
+
+export const TABLE_METADATA_LAST_UPDATED_HELP =
+  "Data is last refreshed automatically (per cluster setting) or manually.";
diff --git a/pkg/ui/workspaces/cluster-ui/src/databaseDetailsV2/tablesView.tsx b/pkg/ui/workspaces/cluster-ui/src/databaseDetailsV2/tablesView.tsx
@@ -3,7 +3,6 @@
 // Use of this software is governed by the CockroachDB Software License
 // included in the /LICENSE file.
 
-import { Tag } from "antd";
 import React, { useContext, useMemo } from "react";
 import { Link } from "react-router-dom";
 
@@ -13,6 +12,7 @@ import {
   TableSortOption,
   useTableMetadata,
 } from "src/api/databases/getTableMetadataApi";
+import { Badge } from "src/badge";
 import { NodeRegionsSelector } from "src/components/nodeRegionsSelector/nodeRegionsSelector";
 import { RegionNodesLabel } from "src/components/regionNodesLabel";
 import { TableMetadataJobControl } from "src/components/tableMetadataLastUpdated/tableMetadataJobControl";
@@ -150,9 +150,9 @@ const COLUMNS: (TableColumnProps<TableRow> & {
     ),
     sorter: false,
     render: (t: TableRow) => {
-      const type = t.autoStatsEnabled ? "success" : "error";
+      const type = t.autoStatsEnabled ? "success" : "default";
       const text = t.autoStatsEnabled ? "ENABLED" : "DISABLED";
-      return <Tag color={type}>{text}</Tag>;
+      return <Badge status={type} text={text} forceUpperCase />;
     },
   },
   {

diff --git a/pkg/ui/workspaces/cluster-ui/src/settings/booleanSetting.tsx b/pkg/ui/workspaces/cluster-ui/src/settings/booleanSetting.tsx
@@ -3,10 +3,10 @@
 // Use of this software is governed by the CockroachDB Software License
 // included in the /LICENSE file.
 
-import { Tooltip } from "antd";
 import classNames from "classnames/bind";
 import * as React from "react";
 
+import { Tooltip } from "src/components/tooltip";
 import { CircleFilled } from "src/icon";
 
 import styles from "./booleanSetting.module.scss";
@@ -28,11 +28,7 @@ export function BooleanSetting(props: BooleanSettingProps): React.ReactElement {
   return (
     <div>
       <CircleFilled className={cx(boolClass)} />
-      <Tooltip
-        placement="bottom"
-        title={tooltipText}
-        className={cx("crl-hover-text__dashed-underline")}
-      >
+      <Tooltip placement="bottom" title={tooltipText}>
         {text} - {label}
       </Tooltip>
     </div>

diff --git a/pkg/ui/workspaces/cluster-ui/src/tableDetailsV2/tableOverview.tsx b/pkg/ui/workspaces/cluster-ui/src/tableDetailsV2/tableOverview.tsx
@@ -11,14 +11,14 @@ import React, { useContext } from "react";
 import { useNodeStatuses } from "src/api";
 import { TableDetails } from "src/api/databases/getTableMetadataApi";
 import { Tooltip } from "src/components/tooltip";
+import { TABLE_METADATA_LAST_UPDATED_HELP } from "src/constants/tooltipMessages";
 import { ClusterDetailsContext } from "src/contexts";
 import { PageSection } from "src/layouts";
 import { SqlBox, SqlBoxSize } from "src/sql";
 import { SummaryCard, SummaryCardItem } from "src/summaryCard";
 import { Timestamp } from "src/timestamp";
 import { Bytes, DATE_WITH_SECONDS_FORMAT_24_TZ } from "src/util";
-
-import { mapStoreIDsToNodeRegions } from "../util/nodeUtils";
+import { mapStoreIDsToNodeRegions } from "src/util/nodeUtils";
 
 type TableOverviewProps = {
   tableDetails: TableDetails;
@@ -61,7 +61,7 @@ export const TableOverview: React.FC<TableOverviewProps> = ({
 
   const formattedErrorText = metadata.lastUpdateError
     ? "Update error: " + metadata.lastUpdateError
-    : "";
+    : null;
 
   return (
     <>
@@ -71,12 +71,17 @@ export const TableOverview: React.FC<TableOverviewProps> = ({
       <PageSection>
         <Row justify={"end"}>
           <Col>
-            <Tooltip title={formattedErrorText}>
+            <Tooltip
+              title={formattedErrorText ?? TABLE_METADATA_LAST_UPDATED_HELP}
+            >
               <Row gutter={8} align={"middle"} justify={"center"}>
-                {metadata.lastUpdateError && (
-                  <Icon fill="warning" iconName={"Caution"} />
+                {metadata.lastUpdateError ? (
+                  <Icon fill={"warning"} iconName={"Caution"} />
+                ) : (
+                  <Icon fill="info" iconName={"InfoCircle"} />
                 )}
                 <Col>
+                  {" "}
                   Last updated:{" "}
                   <Timestamp
                     format={DATE_WITH_SECONDS_FORMAT_24_TZ}