From 4c2a56ac33bb2bdf415db41cd5e2c9f9d660f157 Mon Sep 17 00:00:00 2001
From: Marylia Gutierrez <marylia@cockroachlabs.com>
Date: Mon, 13 Dec 2021 14:58:06 -0500
Subject: [PATCH] ui: updating query params for Jobs page

Previously, the filter values for Jobs page were being saved
on cache, but the value on query params were not being updated
and not being used.
On this commit, those values are updated and the query params
take priority from cached values.

Partially addresses #68199

Release note: None
---
 .../db-console/src/views/jobs/index.tsx       | 42 ++++++++++++++++++-
 1 file changed, 41 insertions(+), 1 deletion(-)

diff --git a/pkg/ui/workspaces/db-console/src/views/jobs/index.tsx b/pkg/ui/workspaces/db-console/src/views/jobs/index.tsx
index 688c0f5b0856..301c5c37728f 100644
--- a/pkg/ui/workspaces/db-console/src/views/jobs/index.tsx
+++ b/pkg/ui/workspaces/db-console/src/views/jobs/index.tsx
@@ -103,10 +103,11 @@ export class JobsTable extends React.Component<JobsTableProps> {
 
     const { history } = this.props;
     const searchParams = new URLSearchParams(history.location.search);
+
+    // Sort Settings.
     const ascending = (searchParams.get("ascending") || undefined) === "true";
     const columnTitle = searchParams.get("columnTitle") || undefined;
     const sortSetting = this.props.sort;
-
     if (
       this.props.setSort &&
       columnTitle &&
@@ -115,6 +116,24 @@ export class JobsTable extends React.Component<JobsTableProps> {
     ) {
       this.props.setSort({ columnTitle, ascending });
     }
+
+    // Filter Status.
+    const status = searchParams.get("status") || undefined;
+    if (this.props.setStatus && status && status != this.props.status) {
+      this.props.setStatus(status);
+    }
+
+    // Filter Show.
+    const show = searchParams.get("show") || undefined;
+    if (this.props.setShow && show && show != this.props.show) {
+      this.props.setShow(show);
+    }
+
+    // Filter Type.
+    const type = parseInt(searchParams.get("type"), 10) || undefined;
+    if (this.props.setType && type && type != this.props.type) {
+      this.props.setType(type);
+    }
   }
 
   refresh(props = this.props) {
@@ -145,6 +164,13 @@ export class JobsTable extends React.Component<JobsTableProps> {
     const filter = selected.value === "" ? "all" : selected.value;
     trackFilter("Status", filter);
     this.props.setStatus(selected.value);
+
+    util.syncHistory(
+      {
+        status: selected.value,
+      },
+      this.props.history,
+    );
   };
 
   onTypeSelected = (selected: DropdownOption) => {
@@ -152,10 +178,24 @@ export class JobsTable extends React.Component<JobsTableProps> {
     const typeLabel = typeOptions[type].label;
     trackFilter("Type", typeLabel);
     this.props.setType(type);
+
+    util.syncHistory(
+      {
+        type: type.toString(),
+      },
+      this.props.history,
+    );
   };
 
   onShowSelected = (selected: DropdownOption) => {
     this.props.setShow(selected.value);
+
+    util.syncHistory(
+      {
+        show: selected.value,
+      },
+      this.props.history,
+    );
   };
 
   changeSortSetting = (ss: SortSetting): void => {