feat(seer): Redesign Seer Projects settings page to be easier to follow

Author: ryan953

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

@@ -0,0 +1,50 @@
+import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
+import BooleanField from 'sentry/components/forms/fields/booleanField';
+import {t} from 'sentry/locale';
+import type {Project} from 'sentry/types/project';
+import {useUpdateProject} from 'sentry/utils/project/useUpdateProject';
+
+interface Props {
+  canWrite: boolean;
+  project: Project;
+}
+
+/**
+ * Master toggle for auto-triggered fixes.
+ * This should be placed at the top of the unified settings container.
+ */
+export default function AutoTriggeredFixesToggle({canWrite, project}: Props) {
+  const {mutate: updateProject} = useUpdateProject(project);
+
+  const isEnabled = Boolean(
+    project.autofixAutomationTuning && project.autofixAutomationTuning !== 'off'
+  );
+
+  return (
+    <BooleanField
+      disabled={!canWrite}
+      name="autofixAutomationTuning"
+      label={t('Auto-Triggered Fixes')}
+      help={t(
+        'Automatically analyze highly actionable issues, and create a root cause analysis without a user needing to prompt it.'
+      )}
+      value={isEnabled}
+      onChange={value => {
+        const newValue: Project['autofixAutomationTuning'] = value ? 'medium' : 'off';
+        updateProject(
+          {autofixAutomationTuning: newValue},
+          {
+            onSuccess: () =>
+              addSuccessMessage(
+                value
+                  ? t('Enabled auto-triggered fixes')
+                  : t('Disabled auto-triggered fixes')
+              ),
+            onError: () =>
+              addErrorMessage(t('Failed to update auto-triggered fixes setting')),
+          }
+        );
+      }}
+    />
+  );
+}

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

@@ -48,11 +48,25 @@ function CursorIntegrationFields({
 }: Props) {
   const {mutate: updateProjectSeerPreferences} = useUpdateProjectSeerPreferences(project);
 
+  const isBackgroundAgentEnabled = Boolean(preference?.automation_handoff);
+  const isAutoTriggeredFixesEnabled = Boolean(
+    project.autofixAutomationTuning && project.autofixAutomationTuning !== 'off'
+  );
+
+  const isDisabled =
+    !canWrite || !isAutoTriggeredFixesEnabled || !isBackgroundAgentEnabled;
+
+  let disabledReason: string | null = null;
+  if (!isAutoTriggeredFixesEnabled) {
+    disabledReason = t('Turn on Auto-Triggered Fixes to use this feature.');
+  } else if (isBackgroundAgentEnabled) {
+    disabledReason = t('This setting is not available when using background agents.');
+  }
+
   return (
     <BooleanField
-      disabled={
-        !canWrite || preference?.automation_handoff?.target !== 'cursor_background_agent'
-      }
+      disabled={isDisabled}
+      disabledReason={disabledReason}
       name="cursorAutoCreatePullRequests"
       label={t('Auto-Create Pull Requests')}
       help={t(

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

@@ -29,6 +29,17 @@ export default function BackgroundAgentPicker({
 }: Props) {
   const {mutate: updateProjectSeerPreferences} = useUpdateProjectSeerPreferences(project);
 
+  const isAutoTriggeredFixesEnabled = Boolean(
+    project.autofixAutomationTuning && project.autofixAutomationTuning !== 'off'
+  );
+
+  const isDisabled = !canWrite || !isAutoTriggeredFixesEnabled;
+
+  let disabledReason: string | null = null;
+  if (!isAutoTriggeredFixesEnabled) {
+    disabledReason = t('Turn on Auto-Triggered Fixes to use this feature.');
+  }
+
   if (supportedIntegrations.length === 0) {
     // There are no supported integrations, so we don't need to show anything
     // Users will need to add an integration first (See <BackgroundAgentSetup />)
@@ -43,7 +54,8 @@ export default function BackgroundAgentPicker({
       case 'cursor':
         return (
           <BooleanField
-            disabled={!canWrite}
+            disabled={isDisabled}
+            disabledReason={disabledReason ?? undefined}
             name="connectCursorIntegration"
             label={
               <Flex align="center" gap="sm">

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

@@ -0,0 +1,57 @@
+import {Fragment} from 'react';
+
+import {Flex} from '@sentry/scraps/layout';
+
+import type {ProjectSeerPreferences} from 'sentry/components/events/autofix/types';
+import {useCodingAgentIntegrations} from 'sentry/components/events/autofix/useAutofix';
+import Placeholder from 'sentry/components/placeholder';
+import type {Project} from 'sentry/types/project';
+
+import BackgroundAgentFields from 'getsentry/views/seerAutomation/components/projectDetails/backgroundAgentFields';
+import BackgroundAgentSetup from 'getsentry/views/seerAutomation/components/projectDetails/backgroundAgentSetup';
+
+interface Props {
+  canWrite: boolean;
+  isLoadingIntegrations: boolean;
+  preference: ProjectSeerPreferences;
+  project: Project;
+  selectedIntegration: ReturnType<typeof useCodingAgentIntegrations>['data'] extends
+    | {integrations: Array<infer T>}
+    | undefined
+    ? T | undefined
+    : never;
+  supportedIntegrations: NonNullable<
+    ReturnType<typeof useCodingAgentIntegrations>['data']
+  >['integrations'];
+}
+
+export default function BackgroundAgentSection({
+  canWrite,
+  project,
+  preference,
+  supportedIntegrations,
+  selectedIntegration,
+  isLoadingIntegrations,
+}: Props) {
+  if (isLoadingIntegrations) {
+    return (
+      <Flex justify="center" align="center" padding="xl">
+        <Placeholder height="52px" />
+      </Flex>
+    );
+  }
+
+  return (
+    <Fragment>
+      {selectedIntegration ? (
+        <BackgroundAgentFields
+          canWrite={canWrite}
+          project={project}
+          preference={preference}
+          selectedIntegration={selectedIntegration}
+        />
+      ) : null}
+      <BackgroundAgentSetup supportedIntegrations={supportedIntegrations} />
+    </Fragment>
+  );
+}