Merge #73755

73755: ui: updating query params for Jobs page r=maryliag a=maryliag

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

Co-authored-by: Marylia Gutierrez <[email protected]>

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,17 +164,38 @@ 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) => {
     const type = parseInt(selected.value, 10);
     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 => {