Add kill action to trigger runs (#1054)

craigmarker · claude · donovanlopez · web-flow · commit db2de881ed0c · 2026-04-22T14:47:18.000-07:00
Wires kill lifecycle action into the trigger run list view
using the existing ActionsPopover/ActionConfig system. Actions are
always
visible but disabled with a hover tooltip when not applicable — only
RUNNING and PAUSED runs can be killed.

Each action opens a confirmation dialog backed by UpdateTriggerRun via
useStudioMutation. Exposes UpdateTriggerRun in the RPC handler registry.

Add stopCircle icon for Kill.

**What type of PR is this? (check all applicable)**
- [ ] Refactor
- [x] Feature
- [ ] Bug Fix
- [ ] Optimization
- [ ] Documentation Update


Co-authored-by: Claude Sonnet 4.6 &lt;noreply@anthropic.com&gt;
Co-authored-by: donovan.lopez &lt;donovan.lopez@uber.com&gt;
diff --git a/javascript/app/icons/icons.tsx b/javascript/app/icons/icons.tsx
@@ -21,6 +21,7 @@ import SearchIcon from '@mui/icons-material/Search';
 import SettingsIcon from '@mui/icons-material/Settings';
 import ShowChartIcon from '@mui/icons-material/ShowChart';
 import SkipNextIcon from '@mui/icons-material/SkipNext';
+import StopCircleIcon from '@mui/icons-material/StopCircle';
 
 import { createMuiIconAdapter } from './mui-icon-adapter';
 
@@ -39,6 +40,7 @@ export const ICONS = {
   close: createMuiIconAdapter(CloseIcon),
   deleteAlt: createMuiIconAdapter(CancelIcon),
   diamondEmpty: createMuiIconAdapter(CropSquareIcon),
+  stopCircle: createMuiIconAdapter(StopCircleIcon),
   menu: createMuiIconAdapter(MenuIcon),
   overflowMenu: createMuiIconAdapter(MoreVertIcon),
   playerNext: createMuiIconAdapter(SkipNextIcon),
diff --git a/javascript/packages/core/components/actions/__tests__/actions-popover.test.tsx b/javascript/packages/core/components/actions/__tests__/actions-popover.test.tsx
@@ -257,7 +257,9 @@ describe('ActionsPopover', () => {
       await screen.findByText('Cannot delete');
       await user.hover(archiveOption);
       expect(await screen.findByText('Cannot archive')).toBeInTheDocument();
-      expect(screen.queryByText('Cannot delete')).not.toBeInTheDocument();
+      await waitFor(() => {
+        expect(screen.queryByText('Cannot delete')).not.toBeInTheDocument();
+      });
     });
 
     it('does not show the tooltip from auto-highlight when the menu opens', async () => {
diff --git a/javascript/packages/core/config/entities/pipeline/pipeline.ts b/javascript/packages/core/config/entities/pipeline/pipeline.ts
@@ -14,8 +14,8 @@ export const PIPELINE_ENTITY_CONFIG: PhaseEntityConfig = {
   actions: [
     {
       display: { label: 'Run', icon: 'playerPlay' },
-      component: CreatePipelineRunForm,
       hierarchy: ActionHierarchy.PRIMARY,
+      component: CreatePipelineRunForm,
     },
   ],
 };
diff --git a/javascript/packages/core/config/entities/trigger/__tests__/trigger-run-action-form.test.tsx b/javascript/packages/core/config/entities/trigger/__tests__/trigger-run-action-form.test.tsx
@@ -0,0 +1,113 @@
+import { useState } from 'react';
+import { render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { buildWrapper } from '#core/test/wrappers/build-wrapper';
+import { getBaseProviderWrapper } from '#core/test/wrappers/get-base-provider-wrapper';
+import { getErrorProviderWrapper } from '#core/test/wrappers/get-error-provider-wrapper';
+import { getIconProviderWrapper } from '#core/test/wrappers/get-icon-provider-wrapper';
+import { getRouterWrapper } from '#core/test/wrappers/get-router-wrapper';
+import {
+  createQueryMockRouter,
+  getServiceProviderWrapper,
+} from '#core/test/wrappers/get-service-provider-wrapper';
+import { KillTriggerRunForm } from '../trigger-run-action-form';
+import { TriggerRunAction, TriggerRunState } from '../types';
+
+import type { ActionComponentProps } from '#core/components/actions/types';
+import type { TriggerRun } from '../types';
+
+// Provides real isOpen state so FormDialog can close on success.
+function FormWrapper({
+  Form,
+}: {
+  Form: (props: ActionComponentProps<TriggerRun>) => React.ReactElement | null;
+}) {
+  const [isOpen, setIsOpen] = useState(true);
+  const record: TriggerRun = {
+    metadata: { name: 'my-trigger', namespace: 'test-ns' },
+    spec: {
+      pipeline: { name: 'test-pipeline', namespace: 'test-ns' },
+      revision: { name: 'test-revision', namespace: 'test-ns' },
+      actor: { name: 'test-user' },
+      sourceTriggerName: '',
+      autoFlip: false,
+      notifications: [],
+      kill: false,
+      action: TriggerRunAction.NO_ACTION,
+    },
+    status: { state: TriggerRunState.RUNNING },
+  };
+  return <Form record={record} isOpen={isOpen} onClose={() => setIsOpen(false)} />;
+}
+
+it.each([
+  {
+    Form: KillTriggerRunForm,
+    dialogName: 'Kill Trigger Run',
+    buttonLabel: 'Kill',
+    action: TriggerRunAction.KILL,
+  },
+])(
+  '$dialogName: submits UpdateTriggerRun with correct action and closes dialog',
+  async ({ Form, dialogName, buttonLabel, action }) => {
+    const user = userEvent.setup();
+    const mockRequest = createQueryMockRouter({
+      UpdateTriggerRun: { triggerRun: { metadata: { name: 'my-trigger' } } },
+    });
+
+    render(
+      <FormWrapper Form={Form} />,
+      buildWrapper([
+        getBaseProviderWrapper(),
+        getIconProviderWrapper(),
+        getErrorProviderWrapper(),
+        getRouterWrapper({ location: '/test-ns/triggers' }),
+        getServiceProviderWrapper({ request: mockRequest }),
+      ])
+    );
+
+    const dialog = await screen.findByRole('dialog', { name: dialogName });
+    await user.click(within(dialog).getByRole('button', { name: buttonLabel }));
+
+    await waitFor(() => {
+      expect(mockRequest).toHaveBeenCalledWith(
+        'UpdateTriggerRun',
+        expect.objectContaining({
+          triggerRun: expect.objectContaining({
+            spec: expect.objectContaining({ action }) as Record<string, unknown>,
+          }) as Record<string, unknown>,
+        })
+      );
+    });
+
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+  }
+);
+
+describe('KillTriggerRunForm', () => {
+  it('keeps dialog open and displays error when submission fails', async () => {
+    const user = userEvent.setup();
+    const mockRequest = createQueryMockRouter({ UpdateTriggerRun: new Error('test') });
+
+    render(
+      <FormWrapper Form={KillTriggerRunForm} />,
+      buildWrapper([
+        getBaseProviderWrapper(),
+        getIconProviderWrapper(),
+        getErrorProviderWrapper(),
+        getRouterWrapper({ location: '/test-ns/triggers' }),
+        getServiceProviderWrapper({ request: mockRequest }),
+      ])
+    );
+
+    const dialog = await screen.findByRole('dialog');
+    await user.click(within(dialog).getByRole('button', { name: 'Kill' }));
+
+    await within(dialog).findByText(/Test error/);
+    expect(mockRequest).toHaveBeenCalledTimes(1);
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+  });
+});
diff --git a/javascript/packages/core/config/entities/trigger/trigger-run-action-form.tsx b/javascript/packages/core/config/entities/trigger/trigger-run-action-form.tsx
@@ -0,0 +1,75 @@
+import { useQueryClient } from '@tanstack/react-query';
+
+import { FormDialog } from '#core/components/form/components/form-dialog/form-dialog';
+import { StringField } from '#core/components/form/fields/string/string-field';
+import { useStudioMutation } from '#core/hooks/use-studio-mutation';
+import { TriggerRunAction } from './types';
+
+import type { ActionComponentProps } from '#core/components/actions/types';
+import type { TriggerRun } from './types';
+
+const ACTION_TO_ENUM = {
+  kill: TriggerRunAction.KILL,
+} as const;
+
+const ACTION_CONFIG = {
+  kill: { heading: 'Kill Trigger Run', submitLabel: 'Kill' },
+} as const;
+
+type Action = keyof typeof ACTION_CONFIG;
+
+function TriggerRunActionForm({
+  record,
+  isOpen,
+  onClose,
+  action,
+}: ActionComponentProps<TriggerRun> & { action: Action }) {
+  const queryClient = useQueryClient();
+
+  const config = ACTION_CONFIG[action];
+
+  const mutation = useStudioMutation<{ triggerRun: TriggerRun }, { triggerRun: TriggerRun }>({
+    mutationName: 'UpdateTriggerRun',
+  });
+
+  const initialValues: TriggerRun = {
+    ...record,
+    spec: { ...record.spec, action: ACTION_TO_ENUM[action] },
+  };
+
+  const handleSubmit = async (values: TriggerRun) => {
+    await mutation.mutateAsync({ triggerRun: values });
+
+    // We wait a few seconds before invalidating the queries so that the action can be processed
+    setTimeout(() => {
+      void queryClient.invalidateQueries({
+        queryKey: [
+          'GetTriggerRun',
+          { name: record.metadata.name, namespace: record.metadata.namespace },
+        ],
+      });
+      void queryClient.invalidateQueries({ queryKey: ['ListTriggerRun'] });
+    }, 2000);
+  };
+
+  return (
+    <FormDialog<TriggerRun>
+      isOpen={isOpen}
+      onDismiss={onClose}
+      heading={config.heading}
+      onSubmit={handleSubmit}
+      submitLabel={config.submitLabel}
+      initialValues={initialValues}
+    >
+      <p>
+        Kill run <strong>{record.metadata.name}</strong> in pipeline{' '}
+        <strong>{record.spec.pipeline.name}</strong>? This action cannot be undone.
+      </p>
+      <StringField name="metadata.name" label="Trigger Run Name" readOnly />
+    </FormDialog>
+  );
+}
+
+export const KillTriggerRunForm = (props: ActionComponentProps<TriggerRun>) => (
+  <TriggerRunActionForm {...props} action="kill" />
+);
diff --git a/javascript/packages/core/config/entities/trigger/trigger.ts b/javascript/packages/core/config/entities/trigger/trigger.ts
@@ -1,12 +1,37 @@
+import { ActionHierarchy } from '#core/components/actions/types';
+import { interpolate } from '#core/interpolation/interpolate';
 import { TRIGGER_DETAIL_CONFIG } from './detail';
 import { TRIGGER_LIST_CONFIG } from './list';
+import { KillTriggerRunForm } from './trigger-run-action-form';
+import { TriggerRunState } from './types';
 
 import type { PhaseEntityConfig } from '#core/types/common/studio-types';
+import type { TriggerRun } from './types';
+
+const isKillable = (record: unknown) => {
+  const state = (record as TriggerRun).status?.state;
+  return state === TriggerRunState.RUNNING || state === TriggerRunState.PAUSED;
+};
 
 export const TRIGGER_ENTITY_CONFIG: PhaseEntityConfig = {
   id: 'triggers',
   name: 'Triggers',
   service: 'triggerRun',
   state: 'active',
   views: [TRIGGER_LIST_CONFIG, TRIGGER_DETAIL_CONFIG],
+  actions: [
+    {
+      display: { label: 'Kill', icon: 'stopCircle' },
+      component: KillTriggerRunForm,
+      hierarchy: interpolate(({ data }) =>
+        isKillable(data) ? ActionHierarchy.SECONDARY : ActionHierarchy.TERTIARY
+      ),
+      disabled: [
+        {
+          condition: interpolate(({ data }) => !isKillable(data)),
+          message: 'Only running or paused trigger runs can be killed',
+        },
+      ],
+    },
+  ],
 };
diff --git a/javascript/packages/core/config/entities/trigger/types.ts b/javascript/packages/core/config/entities/trigger/types.ts
@@ -1,3 +1,8 @@
+/**
+ * Mirrors generated types from @michelangelo/rpc trigger_run_pb.
+ * Update alongside proto/api/v2/trigger_run.proto.
+ */
+
 export type Trigger = {
   metadata: {
     name: string;
@@ -10,3 +15,44 @@ export type Trigger = {
     };
   };
 };
+
+export type TriggerRun = {
+  metadata: {
+    name: string;
+    namespace: string;
+  };
+  spec: {
+    pipeline: { name: string; namespace: string };
+    revision: { name: string; namespace: string };
+    actor: { name: string };
+    sourceTriggerName: string;
+    autoFlip: boolean;
+    notifications: unknown[];
+    /** @deprecated Use action instead (proto field 11). */
+    kill: boolean;
+    /** proto field 11 — replaces deprecated kill boolean */
+    action: TriggerRunAction;
+  };
+  status: {
+    state: TriggerRunState;
+  };
+};
+
+/** Mirrors proto TriggerRunAction enum (trigger_run.proto). */
+export enum TriggerRunAction {
+  NO_ACTION = 0,
+  KILL = 1,
+  PAUSE = 2,
+  RESUME = 3,
+}
+
+/** Mirrors proto TriggerRunState enum (trigger_run.proto). */
+export enum TriggerRunState {
+  INVALID = 0,
+  RUNNING = 1,
+  KILLED = 2,
+  FAILED = 3,
+  SUCCEEDED = 4,
+  PENDING_KILL = 5,
+  PAUSED = 6,
+}
diff --git a/javascript/packages/rpc/handlers.ts b/javascript/packages/rpc/handlers.ts
@@ -32,6 +32,9 @@ async function createHandlers() {
     GetTriggerRun: services.TriggerRunService.getTriggerRun as ExtractUnaryRpc<
       typeof services.TriggerRunService.getTriggerRun
     >,
+    UpdateTriggerRun: services.TriggerRunService.updateTriggerRun as ExtractUnaryRpc<
+      typeof services.TriggerRunService.updateTriggerRun
+    >,
     CreatePipelineRun: services.PipelineRunService.createPipelineRun as ExtractUnaryRpc<
       typeof services.PipelineRunService.createPipelineRun
     >,
