feat(replay): Add a banner on the Replay List page showing if there are in-progress bulk-delete tasks (#94713)

The banner only appears if exactly one project has been selected in the
global project picker, and one of the 10 most recent jobs is still
`pending` or `in-progress`.


![SCR-20250701-jwfh](https://github.com/user-attachments/assets/c5d47779-8cd6-4cce-9b58-481eaa9cd11f)

Depends on #94653

Fixes REPLAY-459

Author: ryan953

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

@@ -3,7 +3,7 @@ import {Fragment} from 'react';
 import Pagination from 'sentry/components/pagination';
 import ReplayBulkDeleteAuditLogTable from 'sentry/components/replays/bulkDelete/replayBulkDeleteAuditLogTable';
 import type {ReplayBulkDeleteAuditLog} from 'sentry/components/replays/bulkDelete/types';
-import useReplayBulkDeleteAuditLog from 'sentry/components/replays/bulkDelete/useFetchBulkDeleteLogs';
+import useReplayBulkDeleteAuditLog from 'sentry/components/replays/bulkDelete/useReplayBulkDeleteAuditLog';
 
 interface Props {
   projectSlug: string;

static/app/components/replays/bulkDelete/useFetchBulkDeleteLogs.tsx renamed to static/app/components/replays/bulkDelete/useReplayBulkDeleteAuditLog.tsx

@@ -0,0 +1,55 @@
+import {hasEveryAccess} from 'sentry/components/acl/access';
+import {Alert} from 'sentry/components/core/alert';
+import Link from 'sentry/components/links/link';
+import useReplayBulkDeleteAuditLog from 'sentry/components/replays/bulkDelete/useReplayBulkDeleteAuditLog';
+import {t, tct} from 'sentry/locale';
+import useOrganization from 'sentry/utils/useOrganization';
+import useProjectFromId from 'sentry/utils/useProjectFromId';
+
+interface Props {
+  projectId: string;
+}
+
+export default function BulkDeleteAlert({projectId}: Props) {
+  const organization = useOrganization();
+  const project = useProjectFromId({project_id: projectId});
+  const hasWriteAccess = hasEveryAccess(['project:write'], {organization, project});
+
+  const {data} = useReplayBulkDeleteAuditLog({
+    projectSlug: project?.slug ?? '',
+    query: {per_page: 10, offset: 0, referrer: 'replay-list'},
+    enabled: project && hasWriteAccess,
+  });
+
+  if (!hasWriteAccess || !project) {
+    return null;
+  }
+
+  // TODO: This only looks at the first page of results.
+  // It would be better to be able to search for jobs in progress to be sure.
+  // The expectation is that only one job is running at a time.
+  const hasAnyInProgress = data?.data?.some(job =>
+    ['pending', 'in-progress'].includes(job?.status ?? '')
+  );
+
+  if (hasAnyInProgress) {
+    return (
+      <Alert
+        type="info"
+        showIcon
+        expand={tct('Visit the [link: Job log] to see more details and track progress.', {
+          link: (
+            <Link
+              to={`/organizations/${organization.slug}/settings/projects/${project.slug}/replays/?replaySettingsTab=bulk-delete`}
+            />
+          ),
+        })}
+      >
+        {t(
+          'Replays are being deleted in the background. Items shown below may be stale.'
+        )}
+      </Alert>
+    );
+  }
+  return null;
+}

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

@@ -14,6 +14,7 @@ import usePageFilters from 'sentry/utils/usePageFilters';
 import useProjectSdkNeedsUpdate from 'sentry/utils/useProjectSdkNeedsUpdate';
 import DeadRageSelectorCards from 'sentry/views/replays/deadRageClick/deadRageSelectorCards';
 import useAllMobileProj from 'sentry/views/replays/detail/useAllMobileProj';
+import BulkDeleteAlert from 'sentry/views/replays/list/bulkDeleteAlert';
 import ReplaysFilters from 'sentry/views/replays/list/filters';
 import ReplayOnboardingPanel from 'sentry/views/replays/list/replayOnboardingPanel';
 import ReplaysList from 'sentry/views/replays/list/replaysList';
@@ -64,6 +65,9 @@ export default function ListContent() {
 
   return (
     <Fragment>
+      {projects.length === 1 ? (
+        <BulkDeleteAlert projectId={String(projects[0] ?? '')} />
+      ) : null}
       <FiltersContainer>
         <ReplaysFilters />
         <SearchWrapper>