feat(aci): Add pagination to detector list page (#93190)

Author: malwilley

static/app/views/detectors/components/detectorListRow.tsx

@@ -101,6 +101,10 @@ const RowWrapper = styled('div')<{disabled?: boolean}>`
   align-items: center;
   padding: ${space(2)};
 
+  &:not(:last-child) {
+    border-bottom: 1px solid ${p => p.theme.innerBorder};
+  }
+
   ${p =>
     p.disabled &&
     css`

static/app/views/detectors/constants.tsx

@@ -1,6 +1,6 @@
 import {FieldValueType} from 'sentry/utils/fields';
 
-export const DETECTOR_LIST_PAGE_LIMIT = 25;
+export const DETECTOR_LIST_PAGE_LIMIT = 20;
 
 export const DETECTOR_FILTER_KEYS: Record<
   string,

static/app/views/detectors/hooks/index.ts

@@ -10,8 +10,11 @@ import {
 } from 'sentry/utils/queryClient';
 import useApi from 'sentry/utils/useApi';
 import useOrganization from 'sentry/utils/useOrganization';
+import {DETECTOR_LIST_PAGE_LIMIT} from 'sentry/views/detectors/constants';
 
 interface UseDetectorsQueryKeyOptions {
+  cursor?: string;
+  limit?: number;
   projects?: number[];
   query?: string;
   sortBy?: string;
@@ -22,25 +25,31 @@ const makeDetectorListQueryKey = ({
   query,
   sortBy,
   projects,
+  limit,
+  cursor,
 }: {
   orgSlug: string;
+  cursor?: string;
+  limit?: number;
   projects?: number[];
   query?: string;
   sortBy?: string;
 }): ApiQueryKey => [
   `/organizations/${orgSlug}/detectors/`,
-  {query: {query, sortBy, project: projects}},
+  {query: {query, sortBy, project: projects, per_page: limit, cursor}},
 ];
 
 export function useDetectorsQuery({
   query,
   sortBy,
   projects,
+  limit = DETECTOR_LIST_PAGE_LIMIT,
+  cursor,
 }: UseDetectorsQueryKeyOptions = {}) {
   const org = useOrganization();
 
   return useApiQuery<Detector[]>(
-    makeDetectorListQueryKey({orgSlug: org.slug, query, sortBy, projects}),
+    makeDetectorListQueryKey({orgSlug: org.slug, query, sortBy, projects, limit, cursor}),
     {
       staleTime: 0,
       retry: false,

static/app/views/detectors/list.tsx

@@ -4,6 +4,7 @@ import {Flex} from 'sentry/components/container/flex';
 import {LinkButton} from 'sentry/components/core/button/linkButton';
 import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
 import {ProjectPageFilter} from 'sentry/components/organizations/projectPageFilter';
+import Pagination from 'sentry/components/pagination';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {ActionsProvider} from 'sentry/components/workflowEngine/layout/actions';
 import ListLayout from 'sentry/components/workflowEngine/layout/list';
@@ -12,6 +13,7 @@ import {IconAdd} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {useLocation} from 'sentry/utils/useLocation';
+import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import DetectorListTable from 'sentry/views/detectors/components/detectorListTable';
@@ -23,14 +25,22 @@ export default function DetectorsList() {
   useWorkflowEngineFeatureGate({redirect: true});
 
   const location = useLocation();
+  const navigate = useNavigate();
   const {selection} = usePageFilters();
 
   const query =
     typeof location.query.query === 'string' ? location.query.query : undefined;
   const sortBy =
     typeof location.query.sort === 'string' ? location.query.sort : undefined;
+  const cursor =
+    typeof location.query.cursor === 'string' ? location.query.cursor : undefined;
 
-  const {data: detectors, isPending} = useDetectorsQuery({
+  const {
+    data: detectors,
+    isPending,
+    getResponseHeader,
+  } = useDetectorsQuery({
+    cursor,
     query,
     sortBy,
     projects: selection.projects,
@@ -42,7 +52,18 @@ export default function DetectorsList() {
         <ActionsProvider actions={<Actions />}>
           <ListLayout>
             <TableHeader />
-            <DetectorListTable detectors={detectors ?? []} isPending={isPending} />
+            <div>
+              <DetectorListTable detectors={detectors ?? []} isPending={isPending} />
+              <Pagination
+                pageLinks={getResponseHeader?.('Link')}
+                onCursor={newCursor => {
+                  navigate({
+                    pathname: location.pathname,
+                    query: {...location.query, cursor: newCursor},
+                  });
+                }}
+              />
+            </div>
           </ListLayout>
         </ActionsProvider>
       </PageFiltersContainer>