feat(replay): Create an Audit Log for bulk Replay Deletes inside /settings

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

@@ -0,0 +1,28 @@
+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';
+
+interface Props {
+  projectSlug: string;
+}
+
+export default function ReplayBulkDeleteAuditLog({projectSlug}: Props) {
+  const {data, getResponseHeader, error, isPending} = useReplayBulkDeleteAuditLog({
+    projectSlug,
+    query: {referrer: 'replay-settings'},
+  });
+
+  return (
+    <Fragment>
+      <ReplayBulkDeleteAuditLogTable
+        rows={data?.data}
+        error={error}
+        isPending={isPending}
+      />
+      <Pagination pageLinks={getResponseHeader?.('Link') ?? null} />
+    </Fragment>
+  );
+}

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

@@ -0,0 +1,91 @@
+import styled from '@emotion/styled';
+
+import {Alert} from 'sentry/components/core/alert';
+import {DateTime} from 'sentry/components/dateTime';
+import LoadingIndicator from 'sentry/components/loadingIndicator';
+import type {ReplayBulkDeleteAuditLog} from 'sentry/components/replays/bulkDelete/types';
+import {SimpleTable} from 'sentry/components/tables/simpleTable';
+import {t} from 'sentry/locale';
+import type RequestError from 'sentry/utils/requestError/requestError';
+import {ERROR_MAP} from 'sentry/utils/requestError/requestError';
+
+export default function ReplayBulkDeleteAuditLogTable({
+  error,
+  isPending,
+  rows,
+}: {
+  error: RequestError | null;
+  isPending: boolean;
+  rows: ReplayBulkDeleteAuditLog[] | undefined;
+}) {
+  return (
+    <SimpleTableWithColumns>
+      <SimpleTable.Header>
+        <SimpleTable.HeaderCell>{t('id')}</SimpleTable.HeaderCell>
+        <SimpleTable.HeaderCell>{t('Date Created')}</SimpleTable.HeaderCell>
+        <SimpleTable.HeaderCell>{t('Query')}</SimpleTable.HeaderCell>
+        <SimpleTable.HeaderCell>{t('Count Deleted')}</SimpleTable.HeaderCell>
+        <SimpleTable.HeaderCell>{t('Status')}</SimpleTable.HeaderCell>
+      </SimpleTable.Header>
+      {isPending ? (
+        <SimpleTable.Empty>
+          <LoadingIndicator />
+        </SimpleTable.Empty>
+      ) : error ? (
+        <SimpleTable.Empty>
+          <Alert type="error" showIcon>
+            {t('Sorry, the list could not be loaded. ')}
+            {getErrorMessage(error)}
+          </Alert>
+        </SimpleTable.Empty>
+      ) : rows?.length ? (
+        rows.map(row => (
+          <SimpleTable.Row key={row.id}>
+            <SimpleTable.RowCell>{row.id}</SimpleTable.RowCell>
+            <SimpleTable.RowCell>
+              <DateTime date={row.dateCreated} />
+            </SimpleTable.RowCell>
+            <SimpleTable.RowCell>
+              <dl>
+                <dt>Query</dt>
+                <dd>{row.query}</dd>
+                <dt>Range</dt>
+                <dd>
+                  <DateTime date={row.rangeStart} /> - <DateTime date={row.rangeEnd} />
+                </dd>
+                <dt>Environments</dt>
+                <dd>{row.environments.join(', ')}</dd>
+              </dl>
+            </SimpleTable.RowCell>
+            <SimpleTable.RowCell>{row.countDeleted}</SimpleTable.RowCell>
+            <SimpleTable.RowCell>{row.status}</SimpleTable.RowCell>
+          </SimpleTable.Row>
+        ))
+      ) : (
+        <SimpleTable.Empty>{t('No deletes found')}</SimpleTable.Empty>
+      )}
+    </SimpleTableWithColumns>
+  );
+}
+
+const SimpleTableWithColumns = styled(SimpleTable)`
+  grid-template-columns: repeat(5, 1fr);
+`;
+
+function getErrorMessage(fetchError: RequestError) {
+  if (typeof fetchError === 'string') {
+    return fetchError;
+  }
+  if (typeof fetchError?.responseJSON?.detail === 'string') {
+    return fetchError.responseJSON.detail;
+  }
+  if (fetchError?.responseJSON?.detail?.message) {
+    return fetchError.responseJSON.detail.message;
+  }
+  if (fetchError.name === ERROR_MAP[500]) {
+    return t('There was an internal systems error.');
+  }
+  return t(
+    'This could be due to invalid search parameters or an internal systems error.'
+  );
+}

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

@@ -0,0 +1,11 @@
+export type ReplayBulkDeleteAuditLog = {
+  countDeleted: number;
+  dateCreated: string;
+  dateUpdated: string;
+  environments: string[];
+  id: string | number;
+  query: string;
+  rangeEnd: string;
+  rangeStart: string;
+  status: 'pending' | 'in-progress' | 'completed';
+};

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

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

static/app/views/settings/project/projectReplays.tsx

@@ -1,16 +1,22 @@
+import styled from '@emotion/styled';
+
 import Access from 'sentry/components/acl/access';
 import {LinkButton} from 'sentry/components/core/button/linkButton';
+import {TabList, TabPanels, Tabs} from 'sentry/components/core/tabs';
 import Form from 'sentry/components/forms/form';
 import JsonForm from 'sentry/components/forms/jsonForm';
 import type {JsonFormObject} from 'sentry/components/forms/types';
 import HookOrDefault from 'sentry/components/hookOrDefault';
 import Link from 'sentry/components/links/link';
+import ReplayBulkDeleteAuditLog from 'sentry/components/replays/bulkDelete/replayBulkDeleteAuditLog';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {t, tct} from 'sentry/locale';
 import ProjectsStore from 'sentry/stores/projectsStore';
+import {space} from 'sentry/styles/space';
 import type {RouteComponentProps} from 'sentry/types/legacyReactRouter';
 import type {Organization} from 'sentry/types/organization';
 import type {Project} from 'sentry/types/project';
+import useUrlParams from 'sentry/utils/useUrlParams';
 import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader';
 import {ProjectPermissionAlert} from 'sentry/views/settings/project/projectPermissionAlert';
 
@@ -27,10 +33,14 @@ type Props = RouteComponentProps<RouteParams> & {
   project: Project;
 };
 
-function ProjectReplaySettings({organization, project, params: {projectId}}: Props) {
+export default function ProjectReplaySettings({
+  organization,
+  project,
+  params: {projectId},
+}: Props) {
   const formGroups: JsonFormObject[] = [
     {
-      title: 'Settings',
+      title: t('Replay Issues'),
       fields: [
         {
           name: 'sentry:replay_rage_click_issues',
@@ -65,6 +75,11 @@ function ProjectReplaySettings({organization, project, params: {projectId}}: Pro
     },
   ];
 
+  const {getParamValue, setParamValue} = useUrlParams(
+    'replaySettingsTab',
+    'replay-issues'
+  );
+
   return (
     <SentryDocumentTitle title={t('Replays')} projectSlug={project.slug}>
       <SettingsPageHeader
@@ -78,30 +93,53 @@ function ProjectReplaySettings({organization, project, params: {projectId}}: Pro
           </LinkButton>
         }
       />
-      <ProjectPermissionAlert project={project} />
-      <ReplaySettingsAlert />
-
-      <Form
-        saveOnBlur
-        apiMethod="PUT"
-        apiEndpoint={`/projects/${organization.slug}/${projectId}/`}
-        initialData={project.options}
-        onSubmitSuccess={(
-          response // This will update our project context
-        ) => ProjectsStore.onUpdateSuccess(response)}
+      <TabsWithGap
+        defaultValue={getParamValue()}
+        onChange={value => setParamValue(String(value))}
       >
-        <Access access={['project:write']} project={project}>
-          {({hasAccess}) => (
-            <JsonForm
-              disabled={!hasAccess}
-              features={new Set(organization.features)}
-              forms={formGroups}
-            />
-          )}
-        </Access>
-      </Form>
+        <TabList>
+          <TabList.Item key="replay-issues">{t('Replay Issues')}</TabList.Item>
+          <TabList.Item key="bulk-delete">{t('Bulk Delete')}</TabList.Item>
+        </TabList>
+        <TabPanels>
+          <TabPanels.Item key="replay-issues">
+            <ProjectPermissionAlert project={project} />
+            <ReplaySettingsAlert />
+
+            <Form
+              saveOnBlur
+              apiMethod="PUT"
+              apiEndpoint={`/projects/${organization.slug}/${projectId}/`}
+              initialData={project.options}
+              onSubmitSuccess={(
+                response // This will update our project context
+              ) => ProjectsStore.onUpdateSuccess(response)}
+            >
+              <Access access={['project:write']} project={project}>
+                {({hasAccess}) => (
+                  <JsonForm
+                    disabled={!hasAccess}
+                    features={new Set(organization.features)}
+                    forms={formGroups}
+                  />
+                )}
+              </Access>
+            </Form>
+          </TabPanels.Item>
+          <TabPanels.Item key="bulk-delete">
+            <p>
+              {t(
+                'Deleting replays requires us to remove data from multiple storage locations which can take some time. You can monitor progress and audit requests here.'
+              )}
+            </p>
+            <ReplayBulkDeleteAuditLog projectSlug={project.slug} />
+          </TabPanels.Item>
+        </TabPanels>
+      </TabsWithGap>
     </SentryDocumentTitle>
   );
 }
 
-export default ProjectReplaySettings;
+const TabsWithGap = styled(Tabs)`
+  gap: ${space(2)};
+`;