From 82b7f565c93c6768966288f8f6e1ff0ec5e38b37 Mon Sep 17 00:00:00 2001
From: Xin Hao Zhang <xzhang@cockroachlabs.com>
Date: Fri, 20 Sep 2024 15:20:41 -0400
Subject: [PATCH] cluster-ui: simplify column sorting logic in v2 dbs

Simplify the column sorting logic. Previously we were
mapping column title to sort key. We can just provide
the sort key directly in the column definition.

Epic: CRDB-37558

Release note: None
---
 .../cluster-ui/src/databasesV2/index.tsx      | 19 ++++-----
 .../cluster-ui/src/databasesV2/utils.ts       | 40 +------------------
 2 files changed, 11 insertions(+), 48 deletions(-)

diff --git a/pkg/ui/workspaces/cluster-ui/src/databasesV2/index.tsx b/pkg/ui/workspaces/cluster-ui/src/databasesV2/index.tsx
index 396c2a038e09..ae459a6418ca 100644
--- a/pkg/ui/workspaces/cluster-ui/src/databasesV2/index.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/databasesV2/index.tsx
@@ -36,27 +36,27 @@ import { Bytes } from "src/util";
 
 import { DatabaseColName } from "./constants";
 import { DatabaseRow } from "./databaseTypes";
-import {
-  getColTitleFromSortKey,
-  getSortKeyFromColTitle,
-  rawDatabaseMetadataToDatabaseRows,
-} from "./utils";
+import { rawDatabaseMetadataToDatabaseRows } from "./utils";
 
 const mockRegionOptions = [
   { label: "US East (N. Virginia)", value: "us-east-1" },
   { label: "US East (Ohio)", value: "us-east-2" },
 ];
 
-const COLUMNS: TableColumnProps<DatabaseRow>[] = [
+const COLUMNS: (TableColumnProps<DatabaseRow> & {
+  sortKey?: DatabaseSortOptions;
+})[] = [
   {
     title: DatabaseColName.NAME,
     sorter: true,
+    sortKey: DatabaseSortOptions.NAME,
     render: (db: DatabaseRow) => {
       return <Link to={`/v2/databases/${db.id}`}>{db.name}</Link>;
     },
   },
   {
     title: DatabaseColName.SIZE,
+    sortKey: DatabaseSortOptions.REPLICATION_SIZE,
     sorter: true,
     render: (db: DatabaseRow) => {
       return Bytes(db.approximateDiskSizeBytes);
@@ -64,6 +64,7 @@ const COLUMNS: TableColumnProps<DatabaseRow>[] = [
   },
   {
     title: DatabaseColName.TABLE_COUNT,
+    sortKey: DatabaseSortOptions.TABLE_COUNT,
     sorter: true,
     render: (db: DatabaseRow) => {
       return db.tableCount;
@@ -71,6 +72,7 @@ const COLUMNS: TableColumnProps<DatabaseRow>[] = [
   },
   {
     title: DatabaseColName.RANGE_COUNT,
+    sortKey: DatabaseSortOptions.RANGES,
     sorter: true,
     render: (db: DatabaseRow) => {
       return db.rangeCount;
@@ -157,7 +159,7 @@ export const DatabasesPageV2 = () => {
         return;
       }
       setSort({
-        field: getSortKeyFromColTitle(COLUMNS[colKey].title as DatabaseColName),
+        field: COLUMNS[colKey].sortKey,
         order: sorter.order === "descend" ? "desc" : "asc",
       });
     }
@@ -167,8 +169,7 @@ export const DatabasesPageV2 = () => {
   const colsWithSort = useMemo(
     () =>
       COLUMNS.map((col, i) => {
-        const title = getColTitleFromSortKey(sort.field as DatabaseSortOptions);
-        const colInd = COLUMNS.findIndex(c => c.title === title);
+        const colInd = COLUMNS.findIndex(c => c.title === sort.field);
         const sortOrder: SortDirection =
           sort?.order === "desc" ? "descend" : "ascend";
         return {
diff --git a/pkg/ui/workspaces/cluster-ui/src/databasesV2/utils.ts b/pkg/ui/workspaces/cluster-ui/src/databasesV2/utils.ts
index 73902e17b43b..3e7df11c7915 100644
--- a/pkg/ui/workspaces/cluster-ui/src/databasesV2/utils.ts
+++ b/pkg/ui/workspaces/cluster-ui/src/databasesV2/utils.ts
@@ -8,48 +8,10 @@
 // by the Apache License, Version 2.0, included in the file
 // licenses/APL.txt.
 
-import {
-  DatabaseMetadata,
-  DatabaseSortOptions,
-} from "src/api/databases/getDatabaseMetadataApi";
+import { DatabaseMetadata } from "src/api/databases/getDatabaseMetadataApi";
 
-import { DatabaseColName } from "./constants";
 import { DatabaseRow } from "./databaseTypes";
 
-export const getSortKeyFromColTitle = (
-  col: DatabaseColName,
-): DatabaseSortOptions => {
-  switch (col) {
-    case DatabaseColName.NAME:
-      return DatabaseSortOptions.NAME;
-    case DatabaseColName.SIZE:
-      return DatabaseSortOptions.REPLICATION_SIZE;
-    case DatabaseColName.RANGE_COUNT:
-      return DatabaseSortOptions.RANGES;
-    case DatabaseColName.TABLE_COUNT:
-      return DatabaseSortOptions.TABLE_COUNT;
-    default:
-      throw new Error(`Unsupported sort column ${col}`);
-  }
-};
-
-export const getColTitleFromSortKey = (
-  sortKey: DatabaseSortOptions,
-): DatabaseColName => {
-  switch (sortKey) {
-    case DatabaseSortOptions.NAME:
-      return DatabaseColName.NAME;
-    case DatabaseSortOptions.REPLICATION_SIZE:
-      return DatabaseColName.SIZE;
-    case DatabaseSortOptions.RANGES:
-      return DatabaseColName.RANGE_COUNT;
-    case DatabaseSortOptions.TABLE_COUNT:
-      return DatabaseColName.TABLE_COUNT;
-    default:
-      return DatabaseColName.NAME;
-  }
-};
-
 export const rawDatabaseMetadataToDatabaseRows = (
   raw: DatabaseMetadata[],
 ): DatabaseRow[] => {