feat(investigations): Apply update_detector action requests

Part of a series that adds follow-up actions to Seer investigations: when a run completes, Seer suggests one next step, and the user can apply a typed action, such as a monitor change, with one click.

This adds an Apply button to a suggested monitor change. When the card shows, it asks the backend with a dry run whether the change would apply, and says why when it can't, so the user only clicks a change that will save.

Depends on #128681 and #128723

Author: wedamija

static/app/views/investigations/__stories__/investigationFixtureApi.tsx

@@ -23,7 +23,9 @@ import {
   InvestigationQueryOutputFixture,
   InvestigationTranscriptBlockFixture,
 } from 'sentry/views/investigations/fixtures';
+import {getSourceMonitor} from 'sentry/views/investigations/source';
 import type {
+  InvestigationActionRequest,
   InvestigationComment,
   InvestigationDetail,
   InvestigationExecutionDetail,
@@ -455,6 +457,50 @@ function handleFixtureRequest(
     };
   }
 
+  if (
+    parts[1] === 'action-requests' &&
+    parts[3] === 'apply' &&
+    parts.length === 4 &&
+    method === 'POST'
+  ) {
+    const detail = getFixtureDetail(state, investigationId);
+    const actionRequest = detail.actionRequests?.find(
+      candidate => candidate.id === parts[2]
+    );
+    if (!actionRequest?.action) {
+      throw new Error(`Unknown fixture action request: ${parts[2]}`);
+    }
+    if (data.dryRun === true) {
+      return {body: {actionRequest: cloneFixture(actionRequest)}};
+    }
+    const {action} = actionRequest;
+    const applied: InvestigationActionRequest = {
+      ...actionRequest,
+      state: 'applied',
+      appliedBy: state.viewer,
+      appliedDetails:
+        action.kind === 'update_detector'
+          ? {
+              detectorId: action.detectorId,
+              detectorName:
+                getSourceMonitor(detail.source, action.detectorId)?.name ??
+                action.detectorId,
+              fields: Object.keys(action.changes),
+            }
+          : null,
+      canApply: false,
+      cannotApplyReason: 'not_suggested',
+      dateApplied: new Date().toISOString(),
+    };
+    setFixtureDetail(state, {
+      ...detail,
+      actionRequests: detail.actionRequests?.map(candidate =>
+        candidate.id === applied.id ? applied : candidate
+      ),
+    });
+    return {body: {actionRequest: cloneFixture(applied)}};
+  }
+
   if (parts[1] === 'title-generation' && method === 'GET') {
     const detail = getFixtureDetail(state, investigationId);
     return {

static/app/views/investigations/actionRequests/actionRequestCard.tsx

@@ -2,9 +2,20 @@ import {useId} from 'react';
 
 import {Stack} from '@sentry/scraps/layout';
 import {Heading, Text} from '@sentry/scraps/text';
+import {toast} from '@sentry/scraps/toast';
 
-import {tct} from 'sentry/locale';
-import {ActionRequestDetails} from 'sentry/views/investigations/actionRequests/actionRequestDetails';
+import {t, tct} from 'sentry/locale';
+import {useOrganization} from 'sentry/utils/useOrganization';
+import {
+  ActionRequestApply,
+  ActionRequestDetails,
+  getApplySuccessMessage,
+  useApplyCheck,
+} from 'sentry/views/investigations/actionRequests/actionRequestDetails';
+import {
+  parseApplyError,
+  useApplyInvestigationActionRequestMutation,
+} from 'sentry/views/investigations/api';
 import {ensureSentenceEnd} from 'sentry/views/investigations/sentence';
 import type {
   InvestigationActionRequest,
@@ -13,16 +24,35 @@ import type {
 
 type ActionRequestCardProps = {
   actionRequest: InvestigationActionRequest;
+  investigationId: string;
   heading?: string;
   source?: InvestigationDetail['source'];
 };
 
 export function ActionRequestCard({
   actionRequest,
   heading,
+  investigationId,
   source,
 }: ActionRequestCardProps) {
   const headingId = useId();
+  const organization = useOrganization();
+  const check = useApplyCheck(investigationId, actionRequest);
+  const applyMutation = useApplyInvestigationActionRequestMutation(
+    organization.slug,
+    investigationId,
+    {
+      onSuccess: (_response, applied) => {
+        const message = getApplySuccessMessage(applied.action);
+        if (message) {
+          toast.success(message);
+        }
+      },
+      onError: error => {
+        toast.error(parseApplyError(error)?.detail ?? t('Unable to apply this change.'));
+      },
+    }
+  );
 
   if (actionRequest.state !== 'suggested' && actionRequest.state !== 'withdrawn') {
     return null;
@@ -63,6 +93,14 @@ export function ActionRequestCard({
         })}
       </Text>
       <ActionRequestDetails actionRequest={actionRequest} source={source} />
+      <ActionRequestApply
+        actionRequest={actionRequest}
+        applying={
+          applyMutation.isPending && applyMutation.variables?.id === actionRequest.id
+        }
+        check={check}
+        onApply={() => applyMutation.mutate(actionRequest)}
+      />
     </Stack>
   );
 }

static/app/views/investigations/actionRequests/actionRequestDetails.tsx

@@ -1,8 +1,22 @@
+import {IconSiren} from '@sentry/icons/siren';
+import {useQuery, useQueryClient} from '@tanstack/react-query';
+
 import {Text} from '@sentry/scraps/text';
 
+import {t} from 'sentry/locale';
+import {useOrganization} from 'sentry/utils/useOrganization';
+import {ApplyButton} from 'sentry/views/investigations/actionRequests/applyButton';
 import {MonitorChanges} from 'sentry/views/investigations/actionRequests/monitorChanges';
+import {
+  actionRequestDryRunQueryOptions,
+  getInvestigationDetailQueryOptions,
+  parseApplyError,
+  type ApplyError,
+} from 'sentry/views/investigations/api';
 import {getSourceMonitor} from 'sentry/views/investigations/source';
 import type {
+  InvestigationAction,
+  InvestigationActionCannotApplyReason,
   InvestigationActionRequest,
   InvestigationDetail,
 } from 'sentry/views/investigations/types';
@@ -32,3 +46,94 @@ export function ActionRequestDetails({actionRequest, source}: ActionRequestDetai
       ) : null;
   }
 }
+
+type ActionRequestApplyProps = {
+  actionRequest: InvestigationActionRequest;
+  applying: boolean;
+  check: ApplyError | null;
+  onApply: () => void;
+};
+
+export function ActionRequestApply({
+  actionRequest,
+  applying,
+  check,
+  onApply,
+}: ActionRequestApplyProps) {
+  switch (actionRequest.action?.kind) {
+    case 'update_detector':
+      return (
+        <ApplyButton
+          actionRequest={actionRequest}
+          applying={applying}
+          check={check}
+          onApply={onApply}
+          icon={<IconSiren />}
+          label={t('Update monitor')}
+          busyLabel={t('Updating monitor…')}
+          cannotApplyMessage={getMonitorCannotApplyMessage(
+            actionRequest.cannotApplyReason
+          )}
+        />
+      );
+    default:
+      return null;
+  }
+}
+
+export function useApplyCheck(
+  investigationId: string,
+  actionRequest: InvestigationActionRequest
+): ApplyError | null {
+  const organization = useOrganization();
+  const queryClient = useQueryClient();
+  const investigationVersion = queryClient.getQueryData(
+    getInvestigationDetailQueryOptions(organization.slug, investigationId).queryKey
+  )?.json.version;
+  const {error} = useQuery({
+    ...actionRequestDryRunQueryOptions(
+      organization.slug,
+      investigationId,
+      actionRequest.id,
+      investigationVersion
+    ),
+    enabled:
+      hasApplyCheck(actionRequest) &&
+      actionRequest.state === 'suggested' &&
+      actionRequest.canApply,
+  });
+  return error ? parseApplyError(error) : null;
+}
+
+function hasApplyCheck(actionRequest: InvestigationActionRequest) {
+  switch (actionRequest.action?.kind) {
+    case 'update_detector':
+      return true;
+    default:
+      return false;
+  }
+}
+
+export function getApplySuccessMessage(action: InvestigationAction | null) {
+  switch (action?.kind) {
+    case 'update_detector':
+      return t('Monitor updated.');
+    default:
+      return null;
+  }
+}
+
+function getMonitorCannotApplyMessage(
+  reason: InvestigationActionCannotApplyReason | null
+) {
+  switch (reason) {
+    case 'permission_denied':
+      return t("You don't have permission to edit this monitor.");
+    case 'detector_not_found':
+      return t('This monitor is no longer available.');
+    case 'not_target_detector':
+      return t('This change targets a different monitor than this investigation.');
+    default:
+      return null;
+  }
+}

static/app/views/investigations/actionRequests/applyButton.tsx

@@ -0,0 +1,71 @@
+import {Button} from '@sentry/scraps/button';
+import {Flex} from '@sentry/scraps/layout';
+import {Text} from '@sentry/scraps/text';
+
+import {t} from 'sentry/locale';
+import type {ApplyError} from 'sentry/views/investigations/api';
+import type {
+  InvestigationActionCannotApplyReason,
+  InvestigationActionRequest,
+} from 'sentry/views/investigations/types';
+
+type ApplyButtonProps = {
+  actionRequest: InvestigationActionRequest;
+  applying: boolean;
+  busyLabel: string;
+  cannotApplyMessage: string | null;
+  check: ApplyError | null;
+  icon: React.ReactNode;
+  label: string;
+  onApply: () => void;
+};
+
+export function ApplyButton({
+  actionRequest,
+  applying,
+  busyLabel,
+  cannotApplyMessage,
+  check,
+  icon,
+  label,
+  onApply,
+}: ApplyButtonProps) {
+  const {canApply, cannotApplyReason, state} = actionRequest;
+  const message =
+    !canApply && state === 'suggested'
+      ? (cannotApplyMessage ?? getCannotApplyMessage(cannotApplyReason))
+      : (check?.detail ?? null);
+  return (
+    <Flex align="center" gap="md" wrap="wrap">
+      <Button
+        variant="primary"
+        icon={icon}
+        busy={applying}
+        disabled={applying || !canApply || check !== null}
+        onClick={onApply}
+      >
+        {applying ? busyLabel : label}
+      </Button>
+      {message ? (
+        <Text size="sm" variant="muted">
+          {message}
+        </Text>
+      ) : null}
+    </Flex>
+  );
+}
+
+function getCannotApplyMessage(reason: InvestigationActionCannotApplyReason | null) {
+  switch (reason) {
+    case 'investigation_archived':
+      return t('Archived investigations are read-only.');
+    case 'not_suggested':
+      return t('This can no longer be applied.');
+    case 'unsupported_action':
+      return t("Seer can't apply this kind of change yet.");
+    case 'no_access':
+      return t("You don't have access to apply this.");
+    default:
+      return t("This change can't be applied.");
+  }
+}