Merge pull request #75486 from cockroachdb/blathers/backport-release-…

…21.2-75473 release-21.2: ui: fix 3rd click on sorting table column
cockroachdb · Jan 25, 2022 · f86d7ce · f86d7ce
2 parents d507f80 + 2f5bf62
commit f86d7ce
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 16 deletions.
diff --git 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";
@@ -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 => {

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