ui/cluster-ui: fix routing to statement details page

Partially addresses cockroachdb#68843

Previously, we used two different bases for the statement details page, which
depended on which route parameters were included. `/statements/` was used when
the app name was included in the path, and otherwise `/statement/` was used.
The database name was also optionally included in the path name, further
complicating routing to the statement details page as these optional route
params lead to the need to include all combinations of route parameters for
statement detail paths,

This commit turns all optional route parameters into query string parameters,
removing the necessity for different base paths and route param combinations.

Release note (ui change): For statement detail URLs, the app name and database
name are now query string parameters. The route to statement details is
now definitively `/statement/:implicitTxn/:statement?{queryStringParams}`.

e.g.
`statement/true/SELECT%20city%2C%20id%20FROM%20vehicles%20WHERE%20city%20%3D%20%241?database=movr&app=movr`

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

@@ -422,7 +422,7 @@ export class StatementsPage extends React.Component<
     const {
       statements,
       databases,
-      match,
+      location,
       lastReset,
       onDiagnosticsReportDownload,
       onStatementClick,
@@ -432,7 +432,7 @@ export class StatementsPage extends React.Component<
       nodeRegions,
       isTenant,
     } = this.props;
-    const appAttrValue = getMatchParamByName(match, appAttr);
+    const appAttrValue = queryByName(location, appAttr);
     const selectedApp = appAttrValue || "";
     const appOptions = [{ value: "all", label: "All" }];
     this.props.apps.forEach(app => appOptions.push({ value: app, label: app }));

pkg/ui/workspaces/db-console/src/views/statements/statementsPage.tsx

@@ -34,7 +34,7 @@ import { PrintTime } from "src/views/reports/containers/range/print";
 import { selectDiagnosticsReportsPerStatement } from "src/redux/statements/statementsSelectors";
 import { createStatementDiagnosticsAlertLocalSetting } from "src/redux/alerts";
 import { statementsDateRangeLocalSetting } from "src/redux/statementsDateRange";
-import { getMatchParamByName } from "src/util/query";
+import { queryByName } from "src/util/query";
 
 import { StatementsPage, AggregateStatistics } from "@cockroachlabs/cluster-ui";
 import {
@@ -78,7 +78,7 @@ export const selectStatements = createSelector(
       return null;
     }
     let statements = flattenStatementStats(state.data.statements);
-    const app = getMatchParamByName(props.match, appAttr);
+    const app = queryByName(props.location, appAttr);
     const isInternal = (statement: ExecutionStatistics) =>
       statement.app.startsWith(state.data.internal_app_name_prefix);