ref(replay): Refactor how we refresh bulk delete notifications (#97893)

Instead of getting a direct reference to the `refresh` method, we can
instead clear the cached data which will trigger a refresh. This
decouples the Refresh button from the rest of the hook because they're
two ideas and don't need to be in the same spot in the same file like
they were before.

Author: ryan953

static/app/components/replays/bulkDelete/useReplayBulkDeleteAuditLog.tsx

@@ -1,28 +1,41 @@
 import type {ReplayBulkDeleteAuditLog} from 'sentry/components/replays/bulkDelete/types';
-import {useApiQuery} from 'sentry/utils/queryClient';
+import {useApiQuery, type ApiQueryKey} from 'sentry/utils/queryClient';
 import useOrganization from 'sentry/utils/useOrganization';
 
+type Query = {
+  referrer: string;
+  offset?: number;
+  per_page?: number;
+};
+
 interface Props {
   projectSlug: string;
-  query: {
-    referrer: string;
-    offset?: number;
-    per_page?: number;
-  };
+  query: Query;
   enabled?: boolean;
   refetchIntervalMs?: number;
 }
 
+export function useReplayBulkDeleteAuditLogQueryKey({
+  projectSlug,
+  query,
+}: {
+  projectSlug: string;
+  query: Query;
+}): ApiQueryKey {
+  const organization = useOrganization();
+  return [`/projects/${organization.slug}/${projectSlug}/replays/jobs/delete/`, {query}];
+}
+
 export default function useReplayBulkDeleteAuditLog({
   enabled,
   projectSlug,
   query,
   refetchIntervalMs,
 }: Props) {
-  const organization = useOrganization();
+  const queryKey = useReplayBulkDeleteAuditLogQueryKey({projectSlug, query});
   const {data, error, getResponseHeader, isPending, refetch} = useApiQuery<{
     data: ReplayBulkDeleteAuditLog[];
-  }>([`/projects/${organization.slug}/${projectSlug}/replays/jobs/delete/`, {query}], {
+  }>(queryKey, {
     enabled,
     refetchInterval: refetchIntervalMs ?? 1_000,
     retry: false,

static/app/components/replays/table/deleteReplays.tsx

@@ -1,4 +1,4 @@
-import {Fragment} from 'react';
+import {Fragment, useCallback} from 'react';
 import styled from '@emotion/styled';
 import invariant from 'invariant';
 
@@ -14,15 +14,15 @@ import {Tooltip} from 'sentry/components/core/tooltip';
 import Duration from 'sentry/components/duration/duration';
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import {KeyValueData} from 'sentry/components/keyValueData';
-import useReplayBulkDeleteAuditLog from 'sentry/components/replays/bulkDelete/useReplayBulkDeleteAuditLog';
+import {useReplayBulkDeleteAuditLogQueryKey} from 'sentry/components/replays/bulkDelete/useReplayBulkDeleteAuditLog';
 import {SimpleTable} from 'sentry/components/tables/simpleTable';
 import TimeSince from 'sentry/components/timeSince';
 import {IconCalendar, IconDelete} from 'sentry/icons';
 import {t, tct, tn} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Project} from 'sentry/types/project';
 import {getShortEventId} from 'sentry/utils/events';
-import type {QueryKeyEndpointOptions} from 'sentry/utils/queryClient';
+import {useQueryClient, type QueryKeyEndpointOptions} from 'sentry/utils/queryClient';
 import {decodeList} from 'sentry/utils/queryString';
 import useDeleteReplays, {
   type ReplayBulkDeletePayload,
@@ -40,6 +40,7 @@ interface Props {
 }
 
 export default function DeleteReplays({selectedIds, replays, queryOptions}: Props) {
+  const queryClient = useQueryClient();
   const analyticsArea = useAnalyticsArea();
   const {project: projectIds} = useLocationQuery({
     fields: {
@@ -59,10 +60,13 @@ export default function DeleteReplays({selectedIds, replays, queryOptions}: Prop
 
   const settingsPath = `/settings/projects/${project?.slug}/replays/?replaySettingsTab=bulk-delete`;
 
-  const {refetch: refetchAuditLog} = useReplayBulkDeleteAuditLog({
+  const queryKey = useReplayBulkDeleteAuditLogQueryKey({
     projectSlug: project?.slug ?? '',
     query: {referrer: analyticsArea},
   });
+  const refetchAuditLog = useCallback(() => {
+    queryClient.invalidateQueries({queryKey});
+  }, [queryClient, queryKey]);
 
   return (
     <Tooltip