[DB-13952]yugabyted: Changed name of headings and added tooltips

Summary: Added tooltips and heading to analysis and assessment page Jira: DB-13952 Test Plan: Manual testing Reviewers: djiang Reviewed By: djiang Subscribers: yugabyted-dev, krishna.tripathi Differential Revision: https://phorge.dev.yugabyte.com/D40912
yugabyte · Dec 27, 2024 · f24ee8b · f24ee8b
1 parent 3eee635
commit f24ee8b
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 22 deletions.
diff --git a/yugabyted-ui/ui/src/components/YBTable/YBTable.tsx b/yugabyted-ui/ui/src/components/YBTable/YBTable.tsx
@@ -5,7 +5,8 @@ import MUIDataTable, {
   MUIDataTableOptions,
   MUISortOptions,
   MUIDataTableCheckboxProps,
-  MUIDataTableMeta
+  MUIDataTableMeta,
+  CustomHeadLabelRenderOptions
 } from 'mui-datatables';
 import {
     createStyles,
@@ -212,15 +213,17 @@ const cHeadRender = (
   sortOrder: MUISortOptions,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   headerProps?: (meta: ColumnMeta) => Record<any, any>,
-  sort?: boolean
+  sort?: boolean,
+  headerLabel?: (options: CustomHeadLabelRenderOptions) => string | React.ReactNode
 ) => {
   let restProps = {};
   if (headerProps) {
     restProps = { ...headerProps(header) };
   }
+  const label = !!headerLabel ? headerLabel({...header, colPos: header.index}) : header.label;
   return (
     <TableCell key={header.name} onClick={() => updateDirection(header.index)} {...restProps}>
-      {!header?.hideHeader && header.label}
+      {!header?.hideHeader && label}
       {!header?.hideHeader && sort && (
         <TableSortLabel
           active={header.name === sortOrder.name}
@@ -420,7 +423,8 @@ export const YBTable = ({
             updateDirection,
             sortOrder,
             col.options?.setCellHeaderProps,
-            col.options?.sort ?? true
+            col.options?.sort ?? true,
+            col.options?.customHeadLabelRender
         );
         if (col.customColumnSort) {
             col.options.sortCompare = col.customColumnSort;

diff --git a/yugabyted-ui/ui/src/features/clusters/details/migration/steps/schema/RefactoringGraph.tsx b/yugabyted-ui/ui/src/features/clusters/details/migration/steps/schema/RefactoringGraph.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useMemo, Fragment } from "react";
 import type { RefactoringCount } from "@app/api/src";
 import { useTranslation } from "react-i18next";
-import { YBTable, YBButton } from "@app/components";
+import { YBTable, YBButton, YBTooltip } from "@app/components";
 import { BadgeVariant, YBBadge } from "@app/components/YBBadge/YBBadge";
 import { Box, TableCell, TableRow, makeStyles } from "@material-ui/core";
 import type { UnsupportedSqlWithDetails, ErrorsAndSuggestionsDetails } from "@app/api/src";
@@ -311,11 +311,25 @@ export const RefactoringGraph: FC<RefactoringGraphProps> = ({ sqlObjects, sqlObj
   const showRightArrowSidePanel = graphData.some(
     (item) => item.rightArrowSidePanel.mapReturnedArrayLength > 0
   );
+  const createCustomHeaderLabelRender =
+    (labelKey: string, tooltipKey?: string): () => React.ReactNode => {
+    return () => (
+      <Box display="inline-flex" alignItems="center">
+        {t(labelKey)}
+        {tooltipKey && (
+          <YBTooltip
+            title={t(tooltipKey)}
+            placement="top"
+            interactive
+          />
+        )}
+      </Box>
+    );
+  };
 
   const columns = [
     {
       name: "plusMinusExpansion",
-      label: " ",
       options: {
         sort: false,
         display: showPlusMinusExpansion,
@@ -335,7 +349,8 @@ export const RefactoringGraph: FC<RefactoringGraphProps> = ({ sqlObjects, sqlObj
             >
               {expandedSuggestions[plusMinusExpansion.index] ? <MinusIcon /> : <PlusIcon />}
             </Box>
-          )
+          ),
+        customHeadLabelRender: () => null
       },
     },
     {
@@ -344,51 +359,56 @@ export const RefactoringGraph: FC<RefactoringGraphProps> = ({ sqlObjects, sqlObj
       options: {
         sort: false,
         setCellHeaderProps: () => ({ style: { padding: "8px 30px" } }),
-        setCellProps: () => ({ style: { padding: "8px 30px", textTransform: "capitalize" } })
+        setCellProps: () => ({ style: { padding: "8px 30px", textTransform: "capitalize" } }),
+        customHeadLabelRender: createCustomHeaderLabelRender(
+          "clusterDetail.voyager.planAndAssess.recommendation.schemaChanges.objectType"
+        ),
       },
     },
     {
       name: "automaticDDLImport",
-      label: t(
-        "clusterDetail.voyager.planAndAssess.recommendation.schemaChanges.automaticDDLImport"
-      ),
       options: {
         setCellHeaderProps: () => ({ style: { padding: "8px 30px" } }),
         setCellProps: () => ({ style: { padding: "8px 30px" } }),
         customBodyRender: (count: number) => (
           <YBBadge text={count} variant={BadgeVariant.Success} />
-        )
+        ),
+        customHeadLabelRender: createCustomHeaderLabelRender(
+        "clusterDetail.voyager.planAndAssess.recommendation.schemaChanges.automaticDDLImport",
+        "clusterDetail.voyager.planAndAssess.recommendation.schemaChanges.automaticDDLImportTooltip"
+        ),
       },
     },
     {
       name: "invalidObjCount",
-      label: t(
-        "clusterDetail.voyager.planAndAssess.recommendation.schemaChanges.invalidObjectCount"
-      ),
       options: {
         setCellHeaderProps: () => ({ style: { padding: "8px 25px" } }),
         setCellProps: () => ({ style: { padding: "8px 30px" } }),
         customBodyRender: (count: number) => (
           <YBBadge text={count} variant={BadgeVariant.Warning} />
-        )
+        ),
+        customHeadLabelRender: createCustomHeaderLabelRender(
+        "clusterDetail.voyager.planAndAssess.recommendation.schemaChanges.invalidObjectCount",
+        "clusterDetail.voyager.planAndAssess.recommendation.schemaChanges.invalidObjectCountTooltip"
+        ),
       },
     },
     {
       name: "manualRefactoring",
-      label: t(
-        "clusterDetail.voyager.planAndAssess.recommendation.schemaChanges.manualRefactoring"
-      ),
       options: {
         setCellHeaderProps: () => ({ style: { padding: "8px 25px" } }),
         setCellProps: () => ({ style: { padding: "8px 30px" } }),
         customBodyRender: (count: number) => (
           <YBBadge text={count} variant={BadgeVariant.Warning} />
-        )
+        ),
+        customHeadLabelRender: createCustomHeaderLabelRender(
+        "clusterDetail.voyager.planAndAssess.recommendation.schemaChanges.manualRefactoring",
+        "clusterDetail.voyager.planAndAssess.recommendation.schemaChanges.manualRefactoringTooltip"
+        ),
       },
     },
     {
       name: "rightArrowSidePanel",
-      label: " ",
       options: {
         sort: false,
         display: showRightArrowSidePanel,
@@ -434,7 +454,8 @@ export const RefactoringGraph: FC<RefactoringGraphProps> = ({ sqlObjects, sqlObj
             >
               <ArrowRightIcon />
             </Box>
-          )
+          ),
+        customHeadLabelRender: () => null, // No heading needed here
       },
     },
   ];