fix(replay): Filter empty querystring params from replay list api call (#69007)

Following up on #68849

This filters empty query params, which don't need to be sent to the
server. Also in #68849 i missed a few important fields in the list.

Author: ryan953

static/app/utils/queryClient.tsx

@@ -40,7 +40,7 @@ export const DEFAULT_QUERY_CLIENT_CONFIG: QueryClientConfig = {
 //      [0]: https://tanstack.com/query/v4/docs/guides/query-cancellation#default-behavior
 const PERSIST_IN_FLIGHT = true;
 
-type QueryKeyEndpointOptions<
+export type QueryKeyEndpointOptions<
   Headers = Record<string, string>,
   Query = Record<string, any>,
   Data = Record<string, any>,

static/app/utils/replays/hooks/useFetchReplayList.ts

@@ -3,16 +3,32 @@ import {useMemo} from 'react';
 import {ALL_ACCESS_PROJECTS} from 'sentry/constants/pageFilters';
 import type {Organization} from 'sentry/types';
 import {uniq} from 'sentry/utils/array/uniq';
-import {type ApiQueryKey, useApiQuery} from 'sentry/utils/queryClient';
+import {
+  type ApiQueryKey,
+  type QueryKeyEndpointOptions,
+  useApiQuery,
+} from 'sentry/utils/queryClient';
 import {mapResponseToReplayRecord} from 'sentry/utils/replays/replayDataUtils';
 import {
   REPLAY_LIST_FIELDS,
   type ReplayListQueryReferrer,
   type ReplayListRecord,
 } from 'sentry/views/replays/types';
 
+interface QueryOptions {
+  cursor?: string;
+  end?: string;
+  environment?: string[];
+  project?: string[];
+  query?: string;
+  sort?: string;
+  start?: string;
+  statsPeriod?: string;
+  utc?: string;
+}
+
 type Options = {
-  options: ApiQueryKey[1];
+  options: QueryKeyEndpointOptions<Record<string, string>, QueryOptions, never>;
   organization: Organization;
   queryReferrer: ReplayListQueryReferrer;
 };
@@ -40,13 +56,17 @@ export default function useFetchReplayList({
       queryReferrer === 'issueReplays' || queryReferrer === 'transactionReplays'
         ? ALL_ACCESS_PROJECTS
         : originalProject;
+
+    const query = Object.fromEntries(
+      Object.entries(options.query).filter(([_key, val]) => val !== '')
+    );
     return [
       url,
       {
         ...options,
         query: {
           per_page: 50,
-          ...options.query,
+          ...query,
           fields,
           project,
           queryReferrer,

static/app/views/replays/list/replaysList.tsx

@@ -24,10 +24,14 @@ function ReplaysList() {
   const query = useLocationQuery({
     fields: {
       cursor: decodeScalar,
+      end: decodeScalar,
+      environment: decodeList,
       project: decodeList,
       query: decodeScalar,
       sort: value => decodeScalar(value, '-started_at'),
+      start: decodeScalar,
       statsPeriod: decodeScalar,
+      utc: decodeScalar,
     },
   });