Hide shortcuts in ConcurrentOutput when aborted

Author: matteodepalo

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

@@ -239,6 +239,8 @@ describe('ConcurrentOutput', () => {
       "0000-00-00 00:00:00 │ backend │ first backend message
       0000-00-00 00:00:00 │ backend │ second backend message
       0000-00-00 00:00:00 │ backend │ third backend message
+
+      Preview URL: https://shopify.com
       "
     `)
 
@@ -286,11 +288,13 @@ describe('ConcurrentOutput', () => {
       "0000-00-00 00:00:00 │ backend │ first backend message
       0000-00-00 00:00:00 │ backend │ second backend message
       0000-00-00 00:00:00 │ backend │ third backend message
+
+      Preview URL: https://shopify.com
       "
     `)
   })
 
-  test("doesn't render the footer when the processes resolve", async () => {
+  test("doesn't render the shortcuts when the processes resolve", async () => {
     // Given
     const backendProcess = {
       prefix: 'backend',
@@ -329,6 +333,8 @@ describe('ConcurrentOutput', () => {
       "0000-00-00 00:00:00 │ backend │ first backend message
       0000-00-00 00:00:00 │ backend │ second backend message
       0000-00-00 00:00:00 │ backend │ third backend message
+
+      Preview URL: https://shopify.com
       "
     `)
   })

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

@@ -120,15 +120,17 @@ const ConcurrentOutput: FunctionComponent<ConcurrentOutputProps> = ({
     )
   }
 
+  const {isAborted} = useAbortSignal(abortSignal)
+
+  const useShortcuts = isRawModeSupported && state === ConcurrentOutputState.Running && !isAborted
+
   useInput(
     (input, key) => {
       handleCtrlC(input, key)
 
       onInput!(input, key, () => treeKill('SIGINT'))
     },
-    // isRawModeSupported can be undefined even if the type doesn't say so
-    // Ink is checking that isActive is actually === false, not falsey
-    {isActive: typeof onInput !== 'undefined' && Boolean(isRawModeSupported)},
+    {isActive: typeof onInput !== 'undefined' && useShortcuts},
   )
 
   useAsyncAndUnmount(runProcesses, {
@@ -140,8 +142,6 @@ const ConcurrentOutput: FunctionComponent<ConcurrentOutputProps> = ({
     },
   })
 
-  const {isAborted} = useAbortSignal(abortSignal)
-
   return (
     <>
       <Static items={processOutput}>
@@ -181,9 +181,9 @@ const ConcurrentOutput: FunctionComponent<ConcurrentOutputProps> = ({
           )
         }}
       </Static>
-      {state === ConcurrentOutputState.Running && !isAborted && footer ? (
+      {footer ? (
         <Box marginY={1} flexDirection="column" flexGrow={1}>
-          {isRawModeSupported ? (
+          {useShortcuts ? (
             <Box flexDirection="column">
               {footer.shortcuts.map((shortcut, index) => (
                 <Text key={index}>
@@ -193,7 +193,7 @@ const ConcurrentOutput: FunctionComponent<ConcurrentOutputProps> = ({
             </Box>
           ) : null}
           {footer.subTitle ? (
-            <Box marginTop={isRawModeSupported ? 1 : 0}>
+            <Box marginTop={useShortcuts ? 1 : 0}>
               <Text>{footer.subTitle}</Text>
             </Box>
           ) : null}