From 6b64dfe6bb2c8d0f2bd87066c9ac242612468e0a Mon Sep 17 00:00:00 2001
From: Marylia Gutierrez <marylia@cockroachlabs.com>
Date: Mon, 24 Jan 2022 18:56:49 -0500
Subject: [PATCH] ui: fix 3rd click on sorting table column

Previously, when a user clicked the 3rd time on the same
column, the page was crashing (Only happening on
Statement and Transaction pages). This would happen
because on those two pages we need to update when we switch
tabs, and the value of sort being set to null was
causing the componentDidUpdate being called constantly.
Since we always have a sort happening on the table, this
commit removes the 3rd option of blank selection.
This commit also updates the Session tab to be properly
updating the query params when the tab is switched.

Fixes #74440

Release note (bug fix): Fix SQL Activity pages crashing when
a column was sorted by the 3rd time.
---
 .../cluster-ui/src/sessions/sessionsPage.tsx  | 17 +++++++++-
 .../src/sortedtable/tableHead/tableHead.tsx   | 34 +++++++++++--------
 2 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx
index 4472f5bb1139..c257200e27d7 100644
--- a/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx
@@ -26,7 +26,11 @@ import emptyTableResultsIcon from "../assets/emptyState/empty-table-results.svg"
 import SQLActivityError from "../sqlActivity/errorComponent";
 
 import { Pagination, ResultsPerPageLabel } from "src/pagination";
-import { SortSetting, ISortedTablePagination } from "src/sortedtable";
+import {
+  SortSetting,
+  ISortedTablePagination,
+  updateSortSettingQueryParamsOnTab,
+} from "src/sortedtable";
 import { Loading } from "src/loading";
 import { Anchor } from "src/anchor";
 import { EmptyTable } from "src/empty";
@@ -137,7 +141,18 @@ export class SessionsPage extends React.Component<
   }
 
   componentDidUpdate = (): void => {
+    const { history, sortSetting } = this.props;
+
     this.props.refreshSessions();
+    updateSortSettingQueryParamsOnTab(
+      "Sessions",
+      sortSetting,
+      {
+        ascending: false,
+        columnTitle: "statementAge",
+      },
+      history,
+    );
   };
 
   onChangePage = (current: number): void => {
diff --git a/pkg/ui/workspaces/cluster-ui/src/sortedtable/tableHead/tableHead.tsx b/pkg/ui/workspaces/cluster-ui/src/sortedtable/tableHead/tableHead.tsx
index a8f330c632f6..3ec0078acb7e 100644
--- a/pkg/ui/workspaces/cluster-ui/src/sortedtable/tableHead/tableHead.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/sortedtable/tableHead/tableHead.tsx
@@ -35,20 +35,18 @@ export const TableHead: React.FC<TableHeadProps> = ({
   const cellContentWrapper = cx("inner-content-wrapper");
   const arrowsClass = cx("sortable__actions");
 
-  function handleSort(picked: boolean, columnTitle: string) {
+  function handleSort(
+    newColumnSelected: boolean,
+    columnTitle: string,
+    prevValue: boolean,
+  ) {
     // If the columnTitle is different than the previous value, initial sort
-    // descending. If the same columnTitle is clicked multiple times consecutively,
-    // first change to ascending, then remove the sort key.
-    const ASCENDING = true;
-    const DESCENDING = false;
-
-    const direction = picked ? ASCENDING : DESCENDING;
-    const sortElementColumnTitle =
-      picked && sortSetting.ascending ? null : columnTitle;
+    // descending. If is the same columnTitle the value is updated.
 
+    const ascending = newColumnSelected ? false : !prevValue;
     onChangeSortSetting({
-      ascending: direction,
-      columnTitle: sortElementColumnTitle,
+      ascending,
+      columnTitle,
     });
   }
 
@@ -58,15 +56,21 @@ export const TableHead: React.FC<TableHeadProps> = ({
         {expandableConfig && <th className={thClass} />}
         {columns.map((c: SortableColumn, idx: number) => {
           const sortable = c.columnTitle !== (null || undefined);
-          const picked = c.name === sortSetting.columnTitle;
+          const newColumnSelected = c.name !== sortSetting.columnTitle;
           const style = { textAlign: c.titleAlign };
-          const cellAction = sortable ? () => handleSort(picked, c.name) : null;
+          const cellAction = sortable
+            ? () => handleSort(newColumnSelected, c.name, sortSetting.ascending)
+            : null;
           const cellClasses = cx(
             "head-wrapper__cell",
             "sorted__cell",
             sortable && "sorted__cell--sortable",
-            sortSetting.ascending && picked && "sorted__cell--ascending",
-            !sortSetting.ascending && picked && "sorted__cell--descending",
+            sortSetting.ascending &&
+              !newColumnSelected &&
+              "sorted__cell--ascending",
+            !sortSetting.ascending &&
+              !newColumnSelected &&
+              "sorted__cell--descending",
             firstCellBordered && idx === 0 && "cell-header",
           );
           const titleClasses = c.hideTitleUnderline ? "" : cx("column-title");