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.

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";
@@ -142,7 +146,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 => {

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 = cx("column-title");