ui: save search query on cache for Transactions page

Previously, a search  was not maintained when
the page change (e.g. coming back from Transaction details).
This commits saves the selected value to be used.

Partially adresses cockroachdb#71851

Release note: None

pkg/ui/workspaces/cluster-ui/src/store/analytics/analytics.reducer.ts

@@ -15,7 +15,9 @@ type Page =
   | "Statements"
   | "Statement Details"
   | "Sessions"
-  | "Sessions Details";
+  | "Sessions Details"
+  | "Transactions"
+  | "Transaction Details";
 
 type SearchEvent = {
   name: "Keyword Searched";

pkg/ui/workspaces/cluster-ui/src/store/localStorage/localStorage.reducer.ts

@@ -34,6 +34,7 @@ export type LocalStorageState = {
   "filters/StatementsPage": Filters;
   "filters/TransactionsPage": Filters;
   "search/StatementsPage": string;
+  "search/TransactionsPage": string;
 };
 
 type Payload = {
@@ -88,6 +89,8 @@ const initialState: LocalStorageState = {
     defaultFilters,
   "search/StatementsPage":
     JSON.parse(localStorage.getItem("search/StatementsPage")) || null,
+  "search/TransactionsPage":
+    JSON.parse(localStorage.getItem("search/TransactionsPage")) || null,
 };
 
 const localStorageSlice = createSlice({

pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.selectors.ts

@@ -43,3 +43,8 @@ export const selectFilters = createSelector(
   localStorageSelector,
   localStorage => localStorage["filters/TransactionsPage"],
 );
+
+export const selectSearch = createSelector(
+  localStorageSelector,
+  localStorage => localStorage["search/TransactionsPage"],
+);

pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.stories.tsx

@@ -36,32 +36,34 @@ storiesOf("Transactions Page", module)
   .add("with data", () => (
     <TransactionsPage
       {...routeProps}
+      columns={columns}
       data={data}
       dateRange={dateRange}
+      filters={filters}
       nodeRegions={nodeRegions}
-      columns={columns}
+      onFilterChange={noop}
+      onSortingChange={noop}
       refreshData={noop}
       resetSQLStats={noop}
+      search={""}
       sortSetting={sortSetting}
-      onSortingChange={noop}
-      filters={filters}
-      onFilterChange={noop}
     />
   ))
   .add("without data", () => {
     return (
       <TransactionsPage
         {...routeProps}
+        columns={columns}
         data={getEmptyData()}
         dateRange={dateRange}
+        filters={filters}
         nodeRegions={nodeRegions}
-        columns={columns}
+        onFilterChange={noop}
+        onSortingChange={noop}
         refreshData={noop}
         resetSQLStats={noop}
+        search={""}
         sortSetting={sortSetting}
-        onSortingChange={noop}
-        filters={filters}
-        onFilterChange={noop}
       />
     );
   })
@@ -75,58 +77,61 @@ storiesOf("Transactions Page", module)
     return (
       <TransactionsPage
         {...routeProps}
+        columns={columns}
         data={getEmptyData()}
         dateRange={dateRange}
+        filters={filters}
+        history={history}
         nodeRegions={nodeRegions}
-        columns={columns}
+        onFilterChange={noop}
+        onSortingChange={noop}
         refreshData={noop}
-        history={history}
         resetSQLStats={noop}
+        search={""}
         sortSetting={sortSetting}
-        onSortingChange={noop}
-        filters={filters}
-        onFilterChange={noop}
       />
     );
   })
   .add("with loading indicator", () => {
     return (
       <TransactionsPage
         {...routeProps}
+        columns={columns}
         data={undefined}
         dateRange={dateRange}
+        filters={filters}
         nodeRegions={nodeRegions}
-        columns={columns}
+        onFilterChange={noop}
+        onSortingChange={noop}
         refreshData={noop}
         resetSQLStats={noop}
+        search={""}
         sortSetting={sortSetting}
-        onSortingChange={noop}
-        filters={filters}
-        onFilterChange={noop}
       />
     );
   })
   .add("with error alert", () => {
     return (
       <TransactionsPage
         {...routeProps}
+        columns={columns}
         data={undefined}
         dateRange={dateRange}
-        nodeRegions={nodeRegions}
-        columns={columns}
         error={
           new RequestError(
             "Forbidden",
             403,
             "this operation requires admin privilege",
           )
         }
+        filters={filters}
+        nodeRegions={nodeRegions}
+        onFilterChange={noop}
+        onSortingChange={noop}
         refreshData={noop}
         resetSQLStats={noop}
+        search={""}
         sortSetting={sortSetting}
-        onSortingChange={noop}
-        filters={filters}
-        onFilterChange={noop}
       />
     );
   });

pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.tsx

@@ -73,25 +73,25 @@ type Timestamp = protos.google.protobuf.ITimestamp;
 const cx = classNames.bind(styles);
 
 interface TState {
-  pagination: ISortedTablePagination;
-  search?: string;
+  aggregatedTs: Timestamp | null;
   filters?: Filters;
+  pagination: ISortedTablePagination;
   statementFingerprintIds: Long[] | null;
-  aggregatedTs: Timestamp | null;
-  transactionStats: TransactionStats | null;
   transactionFingerprintId: Long | null;
+  transactionStats: TransactionStats | null;
 }
 
 export interface TransactionsPageStateProps {
+  columns: string[];
   data: IStatementsResponse;
   dateRange: [Moment, Moment];
-  nodeRegions: { [nodeId: string]: string };
   error?: Error | null;
-  pageSize?: number;
+  filters: Filters;
   isTenant?: UIConfigState["isTenant"];
-  columns: string[];
+  nodeRegions: { [nodeId: string]: string };
+  pageSize?: number;
+  search: string;
   sortSetting: SortSetting;
-  filters: Filters;
 }
 
 export interface TransactionsPageDispatchProps {
@@ -100,6 +100,7 @@ export interface TransactionsPageDispatchProps {
   onDateRangeChange?: (start: Moment, end: Moment) => void;
   onColumnsChange?: (selectedColumns: string[]) => void;
   onFilterChange?: (value: Filters) => void;
+  onSearchComplete?: (query: string) => void;
   onSortingChange?: (
     name: string,
     columnTitle: string,
@@ -131,7 +132,6 @@ export class TransactionsPage extends React.Component<
         pageSize: this.props.pageSize || 20,
         current: 1,
       },
-      search: "",
       aggregatedTs: null,
       statementFingerprintIds: null,
       transactionStats: null,
@@ -142,29 +142,39 @@ export class TransactionsPage extends React.Component<
   }
 
   getStateFromHistory = (): Partial<TState> => {
-    const { history, sortSetting, filters } = this.props;
+    const {
+      history,
+      search,
+      sortSetting,
+      filters,
+      onSearchComplete,
+      onSortingChange,
+      onFilterChange,
+    } = this.props;
     const searchParams = new URLSearchParams(history.location.search);
 
     // Search query.
     const searchQuery = searchParams.get("q") || undefined;
+    if (onSearchComplete && searchQuery && search != searchQuery) {
+      onSearchComplete(searchQuery);
+    }
 
     // Sort Settings.
     handleSortSettingFromQueryString(
       "Transactions",
       history.location.search,
       sortSetting,
-      this.props.onSortingChange,
+      onSortingChange,
     );
 
     // Filters.
     const latestFilter = handleFiltersFromQueryString(
       history,
       filters,
-      this.props.onFilterChange,
+      onFilterChange,
     );
 
     return {
-      search: searchQuery,
       filters: latestFilter,
     };
   };
@@ -179,20 +189,34 @@ export class TransactionsPage extends React.Component<
   }
 
   updateQueryParams(): void {
-    updateFiltersQueryParamsOnTab(
-      "Transactions",
-      this.state.filters,
-      this.props.history,
-    );
+    const { history, search, sortSetting } = this.props;
+    const tab = "Transactions";
+
+    // Search.
+    const searchParams = new URLSearchParams(history.location.search);
+    const currentTab = searchParams.get("tab") || "";
+    const searchQueryString = searchParams.get("q") || "";
+    if (currentTab === tab && search && search != searchQueryString) {
+      syncHistory(
+        {
+          q: search,
+        },
+        history,
+      );
+    }
 
+    // Filters.
+    updateFiltersQueryParamsOnTab(tab, this.state.filters, history);
+
+    // Sort Setting.
     updateSortSettingQueryParamsOnTab(
-      "Transactions",
-      this.props.sortSetting,
+      tab,
+      sortSetting,
       {
         ascending: false,
         columnTitle: "executionCount",
       },
-      this.props.history,
+      history,
     );
   }
 
@@ -231,7 +255,9 @@ export class TransactionsPage extends React.Component<
   };
 
   onClearSearchField = (): void => {
-    this.setState({ search: "" });
+    if (this.props.onSearchComplete) {
+      this.props.onSearchComplete("");
+    }
     syncHistory(
       {
         q: undefined,
@@ -241,7 +267,9 @@ export class TransactionsPage extends React.Component<
   };
 
   onSubmitSearchField = (search: string): void => {
-    this.setState({ search });
+    if (this.props.onSearchComplete) {
+      this.props.onSearchComplete(search);
+    }
     this.resetPagination();
     syncHistory(
       {
@@ -339,8 +367,9 @@ export class TransactionsPage extends React.Component<
               onColumnsChange,
               columns: userSelectedColumnsToShow,
               sortSetting,
+              search,
             } = this.props;
-            const { pagination, search, filters } = this.state;
+            const { pagination, filters } = this.state;
             const { statements, internal_app_name_prefix } = data;
             const appNames = getTrxAppFilterOptions(
               data.transactions,

pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPageConnected.tsx

@@ -31,10 +31,12 @@ import { nodeRegionsByIDSelector } from "../store/nodes";
 import {
   selectDateRange,
   selectFilters,
+  selectSearch,
 } from "src/statementsPage/statementsPage.selectors";
 import { StatementsRequest } from "src/api/statementsApi";
 import { actions as localStorageActions } from "../store/localStorage";
 import { Filters } from "../queryFilter";
+import { actions as analyticsActions } from "../store/analytics";
 
 export const TransactionsPageConnected = withRouter(
   connect<
@@ -43,14 +45,15 @@ export const TransactionsPageConnected = withRouter(
     RouteComponentProps
   >(
     (state: AppState) => ({
+      columns: selectTxnColumns(state),
       data: selectTransactionsData(state),
-      nodeRegions: nodeRegionsByIDSelector(state),
+      dateRange: selectDateRange(state),
       error: selectTransactionsLastError(state),
+      filters: selectFilters(state),
       isTenant: selectIsTenant(state),
-      dateRange: selectDateRange(state),
-      columns: selectTxnColumns(state),
+      nodeRegions: nodeRegionsByIDSelector(state),
+      search: selectSearch(state),
       sortSetting: selectSortSetting(state),
-      filters: selectFilters(state),
     }),
     (dispatch: Dispatch) => ({
       refreshData: (req?: StatementsRequest) =>
@@ -89,13 +92,35 @@ export const TransactionsPageConnected = withRouter(
         );
       },
       onFilterChange: (value: Filters) => {
+        dispatch(
+          analyticsActions.track({
+            name: "Filter Clicked",
+            page: "Transactions",
+            filterName: "app",
+            value: value.toString(),
+          }),
+        );
         dispatch(
           localStorageActions.update({
             key: "filters/TransactionsPage",
             value: value,
           }),
         );
       },
+      onSearchComplete: (query: string) => {
+        dispatch(
+          analyticsActions.track({
+            name: "Keyword Searched",
+            page: "Transactions",
+          }),
+        );
+        dispatch(
+          localStorageActions.update({
+            key: "search/TransactionsPage",
+            value: query,
+          }),
+        );
+      },
     }),
   )(TransactionsPage),
 );