sketch out AbortController approach

Author: jordanverasamy

packages/app/src/cli/services/bulk-operations/execute-bulk-operation.ts

@@ -8,6 +8,7 @@ import {renderSuccess, renderInfo, renderError, renderWarning} from '@shopify/cl
 import {outputContent, outputToken, outputResult} from '@shopify/cli-kit/node/output'
 import {ensureAuthenticatedAdminAsApp} from '@shopify/cli-kit/node/session'
 import {AbortError, BugError} from '@shopify/cli-kit/node/error'
+import {AbortController} from '@shopify/cli-kit/node/abort'
 import {parse} from 'graphql'
 import {readFile, writeFile, fileExists} from '@shopify/cli-kit/node/fs'
 
@@ -76,8 +77,22 @@ export async function executeBulkOperation(input: ExecuteBulkOperationInput): Pr
   const createdOperation = bulkOperationResponse?.bulkOperation
   if (createdOperation) {
     if (watch) {
-      const finishedOperation = await watchBulkOperation(adminSession, createdOperation.id)
-      await renderBulkOperationResult(finishedOperation, outputFile)
+      const abortController = new AbortController()
+      const operation = await watchBulkOperation(
+        adminSession,
+        createdOperation.id,
+        abortController.signal,
+        () => abortController.abort(),
+      )
+
+      if (abortController.signal.aborted) {
+        renderSuccess({
+          headline: `Bulk operation ${operation.id} is still running in the background.`,
+          body: [statusCommandHelpMessage(operation.id)],
+        })
+      } else {
+        await renderBulkOperationResult(operation, outputFile)
+      }
     } else {
       await renderBulkOperationResult(createdOperation, outputFile)
     }
@@ -105,7 +120,11 @@ async function renderBulkOperationResult(operation: BulkOperation, outputFile?:
 
   switch (operation.status) {
     case 'CREATED':
-      renderSuccess({headline: 'Bulk operation started.', customSections})
+      renderSuccess({
+        headline: 'Bulk operation started.',
+        body: [statusCommandHelpMessage(operation.id)],
+        customSections,
+      })
       break
     case 'COMPLETED':
       if (operation.url) {
@@ -147,6 +166,11 @@ function validateGraphQLDocument(graphqlOperation: string, variablesJsonl?: stri
   }
 }
 
+function statusCommandHelpMessage(operationId: string): string {
+  const command = outputToken.cyan(`shopify app bulk status --id="${operationId}"`)
+  return outputContent`Monitor its progress with:\n${command}`.value
+}
+
 function isMutation(graphqlOperation: string): boolean {
   const document = parse(graphqlOperation)
   const operation = document.definitions.find((def) => def.kind === 'OperationDefinition')

packages/app/src/cli/services/bulk-operations/watch-bulk-operation.test.ts

@@ -3,6 +3,7 @@ import {formatBulkOperationStatus} from './format-bulk-operation-status.js'
 import {adminRequestDoc} from '@shopify/cli-kit/node/api/admin'
 import {sleep} from '@shopify/cli-kit/node/system'
 import {renderSingleTask} from '@shopify/cli-kit/node/ui'
+import {AbortController} from '@shopify/cli-kit/node/abort'
 import {describe, test, expect, vi, beforeEach} from 'vitest'
 import {outputContent} from '@shopify/cli-kit/node/output'
 
@@ -44,7 +45,8 @@ describe('watchBulkOperation', () => {
       return task(() => {})
     })
 
-    const result = await watchBulkOperation(mockAdminSession, operationId)
+    const abortController = new AbortController()
+    const result = await watchBulkOperation(mockAdminSession, operationId, abortController.signal, () => {})
 
     expect(result).toEqual(completedOperation)
     expect(adminRequestDoc).toHaveBeenCalledTimes(3)
@@ -69,7 +71,8 @@ describe('watchBulkOperation', () => {
         return task(() => {})
       })
 
-      const result = await watchBulkOperation(mockAdminSession, operationId)
+      const abortController = new AbortController()
+      const result = await watchBulkOperation(mockAdminSession, operationId, abortController.signal, () => {})
 
       expect(result).toEqual(terminalOperation)
       expect(adminRequestDoc).toHaveBeenCalledTimes(3)
@@ -97,7 +100,8 @@ describe('watchBulkOperation', () => {
       return task(mockUpdateStatus)
     })
 
-    await watchBulkOperation(mockAdminSession, operationId)
+    const abortController = new AbortController()
+    await watchBulkOperation(mockAdminSession, operationId, abortController.signal, () => {})
 
     expect(mockUpdateStatus).toHaveBeenNthCalledWith(1, outputContent`processed 10 objects`)
     expect(mockUpdateStatus).toHaveBeenNthCalledWith(2, outputContent`processed 20 objects`)
@@ -111,6 +115,9 @@ describe('watchBulkOperation', () => {
       return task(() => {})
     })
 
-    await expect(watchBulkOperation(mockAdminSession, operationId)).rejects.toThrow('bulk operation not found')
+    const abortController = new AbortController()
+    await expect(watchBulkOperation(mockAdminSession, operationId, abortController.signal, () => {})).rejects.toThrow(
+      'bulk operation not found',
+    )
   })
 })

packages/app/src/cli/services/bulk-operations/watch-bulk-operation.ts

@@ -8,35 +8,43 @@ import {sleep} from '@shopify/cli-kit/node/system'
 import {AdminSession} from '@shopify/cli-kit/node/session'
 import {outputContent} from '@shopify/cli-kit/node/output'
 import {renderSingleTask} from '@shopify/cli-kit/node/ui'
+import {AbortSignal} from '@shopify/cli-kit/node/abort'
 
 const TERMINAL_STATUSES = ['COMPLETED', 'FAILED', 'CANCELED', 'EXPIRED']
 const POLL_INTERVAL_SECONDS = 5
 const API_VERSION = '2026-01'
 
 export type BulkOperation = NonNullable<GetBulkOperationByIdQuery['bulkOperation']>
 
-export async function watchBulkOperation(adminSession: AdminSession, operationId: string): Promise<BulkOperation> {
+export async function watchBulkOperation(
+  adminSession: AdminSession,
+  operationId: string,
+  signal: AbortSignal,
+  onCtrlC: () => void,
+): Promise<BulkOperation> {
   return renderSingleTask<BulkOperation>({
     title: outputContent`Polling bulk operation...`,
     task: async (updateStatus) => {
-      const poller = pollBulkOperation(adminSession, operationId)
+      const poller = pollBulkOperation(adminSession, operationId, signal)
 
       while (true) {
         // eslint-disable-next-line no-await-in-loop
         const {value: latestOperationState, done} = await poller.next()
-        if (done) {
+        if (signal.aborted || done) {
           return latestOperationState
         } else {
           updateStatus(formatBulkOperationStatus(latestOperationState))
         }
       }
     },
+    onCtrlC,
   })
 }
 
 async function* pollBulkOperation(
   adminSession: AdminSession,
   operationId: string,
+  signal: AbortSignal,
 ): AsyncGenerator<BulkOperation, BulkOperation> {
   while (true) {
     // eslint-disable-next-line no-await-in-loop
@@ -48,14 +56,17 @@ async function* pollBulkOperation(
 
     const latestOperationState = response.bulkOperation
 
-    if (TERMINAL_STATUSES.includes(latestOperationState.status)) {
+    if (TERMINAL_STATUSES.includes(latestOperationState.status) || signal.aborted) {
       return latestOperationState
     } else {
       yield latestOperationState
     }
 
     // eslint-disable-next-line no-await-in-loop
-    await sleep(POLL_INTERVAL_SECONDS)
+    await Promise.race([
+      sleep(POLL_INTERVAL_SECONDS),
+      new Promise((resolve) => signal.addEventListener('abort', resolve)),
+    ])
   }
 }
 

packages/cli-kit/src/private/node/ui/components/SingleTask.tsx

@@ -1,21 +1,35 @@
 import {LoadingBar} from './LoadingBar.js'
-import {useExitOnCtrlC} from '../hooks/use-exit-on-ctrl-c.js'
+import {handleCtrlC} from '../../ui.js'
 import {TokenizedString} from '../../../../public/node/output.js'
 import React, {useEffect, useState} from 'react'
-import {useApp} from 'ink'
+import {useApp, useInput, useStdin} from 'ink'
 
 interface SingleTaskProps<T> {
   title: TokenizedString
   task: (updateStatus: (status: TokenizedString) => void) => Promise<T>
   onComplete?: (result: T) => void
+  onCtrlC?: () => void
   noColor?: boolean
 }
 
-const SingleTask = <T,>({task, title, onComplete, noColor}: SingleTaskProps<T>) => {
+const SingleTask = <T,>({task, title, onComplete, onCtrlC, noColor}: SingleTaskProps<T>) => {
   const [status, setStatus] = useState(title)
   const [isDone, setIsDone] = useState(false)
   const {exit: unmountInk} = useApp()
-  useExitOnCtrlC()
+  const {isRawModeSupported} = useStdin()
+
+  useInput(
+    (input, key) => {
+      if (onCtrlC) {
+        handleCtrlC(input, key, () => {
+          onCtrlC()
+        })
+      } else {
+        handleCtrlC(input, key)
+      }
+    },
+    {isActive: Boolean(isRawModeSupported)},
+  )
 
   useEffect(() => {
     task(setStatus)

packages/cli-kit/src/public/node/ui.tsx

@@ -490,6 +490,7 @@ export async function renderTasks<TContext>(
 export interface RenderSingleTaskOptions<T> {
   title: TokenizedString
   task: (updateStatus: (status: TokenizedString) => void) => Promise<T>
+  onCtrlC?: () => void
   renderOptions?: RenderOptions
 }
 
@@ -504,10 +505,15 @@ export interface RenderSingleTaskOptions<T> {
  * ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
  * Loading app ...
  */
-export async function renderSingleTask<T>({title, task, renderOptions}: RenderSingleTaskOptions<T>): Promise<T> {
+export async function renderSingleTask<T>({
+  title,
+  task,
+  onCtrlC,
+  renderOptions,
+}: RenderSingleTaskOptions<T>): Promise<T> {
   // eslint-disable-next-line max-params
   return new Promise<T>((resolve, reject) => {
-    render(<SingleTask title={title} task={task} onComplete={resolve} />, {
+    render(<SingleTask title={title} task={task} onComplete={resolve} onCtrlC={onCtrlC} />, {
       ...renderOptions,
       exitOnCtrlC: false,
     }).catch(reject)