Add onAbort to DevSessionUI

Author: isaacroldan

packages/app/src/cli/services/dev/ui/components/DevSessionUI.test.tsx

@@ -26,6 +26,8 @@ const initialStatus: DevSessionStatus = {
   graphiqlURL: 'https://graphiql.shopify.com',
 }
 
+const onAbort = vi.fn()
+
 describe('DevSessionUI', () => {
   beforeEach(() => {
     devSessionStatusManager = new DevSessionStatusManager()
@@ -76,6 +78,7 @@ describe('DevSessionUI', () => {
         processes={[backendProcess, frontendProcess]}
         abortController={new AbortController()}
         devSessionStatusManager={devSessionStatusManager}
+        onAbort={onAbort}
       />,
     )
 
@@ -111,6 +114,7 @@ describe('DevSessionUI', () => {
         processes={[]}
         abortController={new AbortController()}
         devSessionStatusManager={devSessionStatusManager}
+        onAbort={onAbort}
       />,
     )
 
@@ -130,6 +134,7 @@ describe('DevSessionUI', () => {
         processes={[]}
         abortController={new AbortController()}
         devSessionStatusManager={devSessionStatusManager}
+        onAbort={onAbort}
       />,
     )
 
@@ -153,6 +158,7 @@ describe('DevSessionUI', () => {
         processes={[]}
         abortController={abortController}
         devSessionStatusManager={devSessionStatusManager}
+        onAbort={onAbort}
       />,
     )
 
@@ -179,6 +185,7 @@ describe('DevSessionUI', () => {
         processes={[]}
         abortController={abortController}
         devSessionStatusManager={devSessionStatusManager}
+        onAbort={onAbort}
       />,
     )
 
@@ -220,6 +227,7 @@ describe('DevSessionUI', () => {
         processes={[backendProcess]}
         abortController={abortController}
         devSessionStatusManager={devSessionStatusManager}
+        onAbort={onAbort}
       />,
     )
 
@@ -265,6 +273,7 @@ describe('DevSessionUI', () => {
         processes={[]}
         abortController={new AbortController()}
         devSessionStatusManager={devSessionStatusManager}
+        onAbort={onAbort}
       />,
     )
 
@@ -297,6 +306,7 @@ describe('DevSessionUI', () => {
         processes={[]}
         abortController={new AbortController()}
         devSessionStatusManager={devSessionStatusManager}
+        onAbort={onAbort}
       />,
     )
 
@@ -338,6 +348,7 @@ describe('DevSessionUI', () => {
         processes={[errorProcess]}
         abortController={abortController}
         devSessionStatusManager={devSessionStatusManager}
+        onAbort={onAbort}
       />,
     )
 

packages/app/src/cli/services/dev/ui/components/DevSessionUI.tsx

@@ -18,9 +18,15 @@ interface DevSesionUIProps {
   processes: OutputProcess[]
   abortController: AbortController
   devSessionStatusManager: DevSessionStatusManager
+  onAbort: () => Promise<void>
 }
 
-const DevSessionUI: FunctionComponent<DevSesionUIProps> = ({abortController, processes, devSessionStatusManager}) => {
+const DevSessionUI: FunctionComponent<DevSesionUIProps> = ({
+  abortController,
+  processes,
+  devSessionStatusManager,
+  onAbort,
+}) => {
   const {isRawModeSupported: canUseShortcuts} = useStdin()
 
   const [isShuttingDownMessage, setIsShuttingDownMessage] = useState<string | undefined>(undefined)
@@ -39,6 +45,7 @@ const DevSessionUI: FunctionComponent<DevSesionUIProps> = ({abortController, pro
         })
       }, 2000)
     }
+    await onAbort()
   })
 
   const errorHandledProcesses = useMemo(() => {