feat(aci): Add latest group sorting to frontend (#97312)

Author: malwilley

static/app/views/detectors/components/detectorListTable/index.tsx

@@ -1,7 +1,6 @@
 import type {ComponentProps} from 'react';
 import styled from '@emotion/styled';
 
-import LoadingError from 'sentry/components/loadingError';
 import {SimpleTable} from 'sentry/components/tables/simpleTable';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
@@ -83,7 +82,12 @@ function DetectorListTable({
           <HeaderCell data-column-name="type" divider sortKey="type" sort={sort}>
             {t('Type')}
           </HeaderCell>
-          <HeaderCell data-column-name="last-issue" divider sort={sort}>
+          <HeaderCell
+            data-column-name="last-issue"
+            divider
+            sortKey="latestGroup"
+            sort={sort}
+          >
             {t('Last Issue')}
           </HeaderCell>
           <HeaderCell data-column-name="assignee" divider sort={sort}>
@@ -98,15 +102,14 @@ function DetectorListTable({
             {t('Automations')}
           </HeaderCell>
         </SimpleTable.Header>
-        {isError && <LoadingError message={t('Error loading monitors')} />}
+        {isError && <SimpleTable.Empty>{t('Error loading monitors')}</SimpleTable.Empty>}
         {isPending && <LoadingSkeletons />}
-        {isSuccess && detectors.length > 0 ? (
-          detectors.map(detector => (
-            <DetectorListRow key={detector.id} detector={detector} />
-          ))
-        ) : (
+        {isSuccess && detectors.length === 0 && (
           <SimpleTable.Empty>{t('No monitors found')}</SimpleTable.Empty>
         )}
+        {detectors.map(detector => (
+          <DetectorListRow key={detector.id} detector={detector} />
+        ))}
       </DetectorListSimpleTable>
     </Container>
   );

static/app/views/detectors/list.spec.tsx

@@ -208,12 +208,12 @@ describe('DetectorsList', function () {
       const {router} = render(<DetectorsList />, {organization});
       await screen.findByText('Detector 1');
 
-      // Default sort is connectedWorkflows descending
+      // Default sort is latestGroup descending
       expect(mockDetectorsRequest).toHaveBeenCalledWith(
         expect.anything(),
         expect.objectContaining({
           query: expect.objectContaining({
-            sortBy: '-connectedWorkflows',
+            sortBy: '-latestGroup',
           }),
         })
       );

static/app/views/detectors/list.tsx

@@ -28,7 +28,7 @@ export default function DetectorsList() {
 
   const location = useLocation();
   const navigate = useNavigate();
-  const {selection} = usePageFilters();
+  const {selection, isReady} = usePageFilters();
 
   const {
     sort: sorts,
@@ -41,21 +41,24 @@ export default function DetectorsList() {
       cursor: decodeScalar,
     },
   });
-  const sort = sorts[0] ?? {kind: 'desc', field: 'connectedWorkflows'};
+  const sort = sorts[0] ?? {kind: 'desc', field: 'latestGroup'};
 
   const {
     data: detectors,
-    isPending,
+    isLoading,
     isError,
     isSuccess,
     getResponseHeader,
-  } = useDetectorsQuery({
-    cursor,
-    query,
-    sortBy: sort ? `${sort?.kind === 'asc' ? '' : '-'}${sort?.field}` : undefined,
-    projects: selection.projects,
-    limit: DETECTOR_LIST_PAGE_LIMIT,
-  });
+  } = useDetectorsQuery(
+    {
+      cursor,
+      query,
+      sortBy: sort ? `${sort?.kind === 'asc' ? '' : '-'}${sort?.field}` : undefined,
+      projects: selection.projects,
+      limit: DETECTOR_LIST_PAGE_LIMIT,
+    },
+    {enabled: isReady}
+  );
 
   return (
     <SentryDocumentTitle title={t('Monitors')} noSuffix>
@@ -65,7 +68,7 @@ export default function DetectorsList() {
           <div>
             <DetectorListTable
               detectors={detectors ?? []}
-              isPending={isPending}
+              isPending={isLoading}
               isError={isError}
               isSuccess={isSuccess}
               sort={sort}