feat(seer): Rewrite the Seer > Project list page (#109531)

This rewrite consolidates some of the previous columns to match what's
in #109349

- We've combined the previous "auto-triggered fixes" and "coding agent"
columns into one column with a dropdown to pick an "Autofix Agent".
- PR create column now applies to background agents as well as Seer
Agent

Bulk editing is disabled. At this moment we don't have support for
updating the complex `automation_handoff` values in the current bulk
edit endpoint.


Fixes
https://linear.app/getsentry/issue/CW-930/settings-seer-project-list-simplify-the-columnsactions-to-match
Depends on #110188

Author: ryan953

static/app/components/events/autofix/preferences/hooks/useBulkAutofixAutomationSettings.ts

@@ -1,8 +1,9 @@
-import {useCallback, useMemo} from 'react';
+import {useMemo} from 'react';
 
 import type {ProjectSeerPreferences} from 'sentry/components/events/autofix/types';
+import type {Organization} from 'sentry/types/organization';
+import {apiOptions} from 'sentry/utils/api/apiOptions';
 import getApiUrl from 'sentry/utils/api/getApiUrl';
-import useFetchSequentialPages from 'sentry/utils/api/useFetchSequentialPages';
 import {
   fetchMutation,
   useMutation,
@@ -48,31 +49,19 @@ export type AutofixAutomationSettings = {
   reposCount: number;
 };
 
-/**
- * Fetch all autofix related settings for all projects.
- *
- * This returns a list of objects with the following properties:
- * - projectId: the project ID
- * - autofixAutomationTuning: the tuning setting for automated autofix
- * - automatedRunStoppingPoint: the stopping point for automated runs
- * - reposCount: the number of repositories configured for the project
- */
-export function useGetBulkAutofixAutomationSettings() {
-  const organization = useOrganization();
-
-  return useFetchSequentialPages<AutofixAutomationSettings[]>({
-    enabled: true,
-    perPage: 100,
-    getQueryKey: useCallback(
-      ({cursor, per_page}: {cursor: string; per_page: number}) => [
-        getApiUrl(`/organizations/$organizationIdOrSlug/autofix/automation-settings/`, {
-          path: {organizationIdOrSlug: organization.slug},
-        }),
-        {query: {cursor, per_page}},
-      ],
-      [organization.slug]
-    ),
-  });
+export function bulkAutofixAutomationSettingsInfiniteOptions({
+  organization,
+}: {
+  organization: Organization;
+}) {
+  return apiOptions.asInfinite<AutofixAutomationSettings[]>()(
+    '/organizations/$organizationIdOrSlug/autofix/automation-settings/',
+    {
+      path: {organizationIdOrSlug: organization.slug},
+      query: {per_page: 100},
+      staleTime: 0,
+    }
+  );
 }
 
 type AutofixAutomationUpdate =

static/app/components/events/autofix/preferences/hooks/useUpdateProjectSeerPreferences.ts

@@ -1,9 +1,12 @@
+import {useCallback} from 'react';
+
 import {
   makeProjectSeerPreferencesQueryKey,
   type SeerPreferencesResponse,
 } from 'sentry/components/events/autofix/preferences/hooks/useProjectSeerPreferences';
 import type {ProjectSeerPreferences} from 'sentry/components/events/autofix/types';
 import type {Project} from 'sentry/types/project';
+import apiFetch from 'sentry/utils/api/apiFetch';
 import {
   fetchMutation,
   getApiQueryData,
@@ -23,6 +26,21 @@ type Context =
       previousPrefs?: never;
     };
 
+export function useFetchProjectSeerPreferences({project}: {project: Project}) {
+  const organization = useOrganization();
+  const queryClient = useQueryClient();
+  const queryKey = makeProjectSeerPreferencesQueryKey(organization.slug, project.slug);
+
+  return useCallback(async () => {
+    const response = await queryClient.fetchQuery({
+      queryKey,
+      queryFn: apiFetch<SeerPreferencesResponse>,
+      staleTime: 0,
+    });
+    return response.json.preference;
+  }, [queryClient, queryKey]);
+}
+
 export function useUpdateProjectSeerPreferences(project: Project) {
   const organization = useOrganization();
   const queryClient = useQueryClient();

static/gsApp/views/seerAutomation/components/projectDetails/autofixAgent.tsx

@@ -69,7 +69,7 @@ export default function AutofixAgent({canWrite, preference, project}: Props) {
     project,
     integrations: integrations ?? [],
   });
-  const mutateSelectedAgent = useMutateSelectedAgent({preference, project});
+  const mutateSelectedAgent = useMutateSelectedAgent({project});
 
   const disabledReason = canWrite
     ? null

static/gsApp/views/seerAutomation/components/projectTable/seerProjectTable.tsx

@@ -1,73 +1,113 @@
-import {useMemo, useState} from 'react';
+import {useEffect, useMemo} from 'react';
 import styled from '@emotion/styled';
 import {debounce, parseAsString, useQueryState} from 'nuqs';
 
 import {InputGroup} from '@sentry/scraps/input';
 import {Stack} from '@sentry/scraps/layout';
 
 import {
-  useGetBulkAutofixAutomationSettings,
+  bulkAutofixAutomationSettingsInfiniteOptions,
   useUpdateBulkAutofixAutomationSettings,
-  type AutofixAutomationSettings,
 } from 'sentry/components/events/autofix/preferences/hooks/useBulkAutofixAutomationSettings';
+import {organizationIntegrationsCodingAgents} from 'sentry/components/events/autofix/useAutofix';
 import LoadingError from 'sentry/components/loadingError';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {SimpleTable} from 'sentry/components/tables/simpleTable';
 import {IconSearch} from 'sentry/icons/iconSearch';
 import {t, tct} from 'sentry/locale';
+import ProjectsStore from 'sentry/stores/projectsStore';
 import type {Project} from 'sentry/types/project';
 import type {Sort} from 'sentry/utils/discover/fields';
 import {ListItemCheckboxProvider} from 'sentry/utils/list/useListItemCheckboxState';
+import {useInfiniteQuery, useQuery, useQueryClient} from 'sentry/utils/queryClient';
 import type {ApiQueryKey} from 'sentry/utils/queryClient';
 import parseAsSort from 'sentry/utils/url/parseAsSort';
+import useOrganization from 'sentry/utils/useOrganization';
 import useProjects from 'sentry/utils/useProjects';
 
 import ProjectTableHeader from 'getsentry/views/seerAutomation/components/projectTable/seerProjectTableHeader';
 import SeerProjectTableRow from 'getsentry/views/seerAutomation/components/projectTable/seerProjectTableRow';
 
-function getDefaultAutofixSettings(projectId: string): AutofixAutomationSettings {
-  return {
-    autofixAutomationTuning: 'off',
-    automatedRunStoppingPoint: 'code_changes',
-    automationHandoff: undefined,
-    projectId,
-    reposCount: 0,
-  };
-}
-
 export default function SeerProjectTable() {
+  const queryClient = useQueryClient();
+  const organization = useOrganization();
   const {projects, fetching, fetchError} = useProjects();
 
-  const {pages: autofixAutomationSettings, isFetching: isFetchingSettings} =
-    useGetBulkAutofixAutomationSettings();
+  const autofixSettingsQueryOptions = bulkAutofixAutomationSettingsInfiniteOptions({
+    organization,
+  });
+  const {
+    data: autofixAutomationSettings,
+    hasNextPage,
+    isError,
+    fetchNextPage,
+    isFetchingNextPage,
+  } = useInfiniteQuery({
+    ...autofixSettingsQueryOptions,
+    select: ({pages}) => pages.flatMap(page => page.json),
+  });
+
+  // Auto-fetch each page, one at a time
+  useEffect(() => {
+    if (!isError && !isFetchingNextPage && hasNextPage) {
+      fetchNextPage();
+    }
+  }, [hasNextPage, fetchNextPage, isError, isFetchingNextPage]);
 
-  const [mutationData, setMutations] = useState<
-    Record<string, Partial<AutofixAutomationSettings>>
-  >({});
+  const {data: integrations, isPending: isPendingIntegrations} = useQuery({
+    ...organizationIntegrationsCodingAgents(organization),
+    select: data => data.json.integrations ?? [],
+  });
 
   const {mutate: updateBulkAutofixAutomationSettings} =
     useUpdateBulkAutofixAutomationSettings({
       onSuccess: (_data, variables) => {
-        const {projectIds, ...rest} = variables;
-        setMutations(prev => {
-          const updated = {...prev};
-          projectIds.forEach(projectId => {
-            updated[projectId] = {
-              ...prev[projectId],
-              ...rest,
-            };
-          });
-          return updated;
+        const {projectIds, ...updates} = variables;
+        const projectIdSet = new Set(projectIds);
+
+        queryClient.setQueryData(autofixSettingsQueryOptions.queryKey, oldData => {
+          if (!oldData) {
+            return oldData;
+          }
+          return {
+            ...oldData,
+            pages: oldData.pages.map(page => ({
+              ...page,
+              json: page.json.map(setting =>
+                projectIdSet.has(String(setting.projectId))
+                  ? {
+                      ...setting,
+                      ...(updates.autofixAutomationTuning !== undefined && {
+                        autofixAutomationTuning: updates.autofixAutomationTuning,
+                      }),
+                      ...(updates.automatedRunStoppingPoint !== undefined && {
+                        automatedRunStoppingPoint: updates.automatedRunStoppingPoint,
+                      }),
+                    }
+                  : setting
+              ),
+            })),
+          };
         });
+
+        for (const projectId of projectIds) {
+          if (updates.autofixAutomationTuning !== undefined) {
+            ProjectsStore.onUpdateSuccess({
+              id: projectId,
+              autofixAutomationTuning: updates.autofixAutomationTuning ?? undefined,
+            });
+          }
+        }
       },
     });
 
   const autofixSettingsByProjectId = useMemo(
     () =>
       new Map(
-        autofixAutomationSettings.flatMap(page =>
-          page.map(setting => [String(setting.projectId), setting])
-        )
+        (autofixAutomationSettings ?? []).map(setting => [
+          String(setting.projectId),
+          setting,
+        ])
       ),
     [autofixAutomationSettings]
   );
@@ -179,14 +219,10 @@ export default function SeerProjectTable() {
           filteredProjects.map(project => (
             <SeerProjectTableRow
               key={project.id}
+              autofixSettings={autofixSettingsByProjectId.get(project.id)}
+              integrations={integrations ?? []}
+              isPendingIntegrations={isPendingIntegrations}
               project={project}
-              isFetchingSettings={isFetchingSettings}
-              autofixSettings={{
-                ...getDefaultAutofixSettings(project.id),
-                ...autofixSettingsByProjectId.get(project.id),
-                ...mutationData[project.id],
-              }}
-              updateBulkAutofixAutomationSettings={updateBulkAutofixAutomationSettings}
             />
           ))
         )}
@@ -251,5 +287,6 @@ const FiltersContainer = styled('div')`
 `;
 
 const SimpleTableWithColumns = styled(SimpleTable)`
-  grid-template-columns: max-content 1fr repeat(4, max-content);
+  grid-template-columns: 3fr minmax(300px, 1fr) repeat(2, max-content);
+  overflow: visible;
 `;