Allow filtering app dev logs by type

Author: gonzaloriestra

.changeset/filter-app-dev-logs.md

@@ -0,0 +1,7 @@
+---
+'@shopify/app': patch
+'@shopify/cli': patch
+'@shopify/cli-kit': patch
+---
+
+Add an interactive log filter to `shopify app dev`.

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

@@ -12,6 +12,7 @@ import React from 'react'
 import {beforeEach, describe, expect, test, vi} from 'vitest'
 import {unstyled} from '@shopify/cli-kit/node/output'
 import {openURL} from '@shopify/cli-kit/node/system'
+import {useConcurrentOutputContext} from '@shopify/cli-kit/node/ui/components'
 import {Writable} from 'stream'
 
 vi.mock('@shopify/cli-kit/node/system', async () => {
@@ -176,6 +177,95 @@ describe('DevSessionUI', () => {
     renderInstance.unmount()
   })
 
+  test('cycles through log prefixes and only renders output for the selected prefix', async () => {
+    let processesStartedResolve: () => void
+    const processesStarted = new Promise<void>((resolve) => {
+      processesStartedResolve = resolve
+    })
+    let releaseProcesses = () => {}
+    const processesReleased = new Promise<void>((resolve) => {
+      releaseProcesses = resolve
+    })
+    let startedProcessCount = 0
+    const processStarted = () => {
+      startedProcessCount++
+      if (startedProcessCount === 3) processesStartedResolve()
+    }
+    const appPreviewProcess = {
+      prefix: 'app-preview',
+      action: async (stdout: Writable) => {
+        stdout.write('app preview message')
+        useConcurrentOutputContext({outputPrefix: 'app_home'}, () => {
+          stdout.write('app home message')
+        })
+        processStarted()
+        await processesReleased
+      },
+    }
+    const webProcess = {
+      prefix: 'React Router',
+      action: async (stdout: Writable) => {
+        stdout.write('react router message')
+        processStarted()
+        await processesReleased
+      },
+    }
+    const graphiqlProcess = {
+      prefix: 'graphiql',
+      action: async (stdout: Writable) => {
+        stdout.write('graphiql message')
+        processStarted()
+        await processesReleased
+      },
+    }
+
+    const renderInstance = render(
+      <DevSessionUI
+        processes={[appPreviewProcess, webProcess, graphiqlProcess]}
+        abortController={new AbortController()}
+        devSessionStatusManager={devSessionStatusManager}
+        shopFqdn="mystore.myshopify.com"
+        onAbort={onAbort}
+      />,
+    )
+    await processesStarted
+    await waitForContent(renderInstance, 'app home message')
+
+    let output = unstyled(renderInstance.lastFrame()!)
+    expect(output).toContain('(f) Filter logs: all')
+    expect(output).toContain('app preview message')
+    expect(output).toContain('react router message')
+    expect(output).toContain('app home message')
+    expect(output).toContain('graphiql message')
+
+    await sendInputAndWait(renderInstance, 10, 'f')
+    output = unstyled(renderInstance.lastFrame()!)
+    expect(output).toContain('(f) Filter logs: app-previ')
+    expect(output).toContain('app preview message')
+    expect(output).not.toContain('react router message')
+    expect(output).not.toContain('app home message')
+    expect(output).not.toContain('graphiql message')
+
+    await sendInputAndWait(renderInstance, 10, 'f', 'f', 'f')
+    output = unstyled(renderInstance.lastFrame()!)
+    expect(output).toContain('(f) Filter logs: app_home')
+    expect(output).not.toContain('app preview message')
+    expect(output).not.toContain('react router message')
+    expect(output).toContain('app home message')
+    expect(output).not.toContain('graphiql message')
+
+    await sendInputAndWait(renderInstance, 10, 'f')
+    output = unstyled(renderInstance.lastFrame()!)
+    expect(output).toContain('(f) Filter logs: all')
+    expect(output).toContain('app preview message')
+    expect(output).toContain('react router message')
+    expect(output).toContain('app home message')
+    expect(output).toContain('graphiql message')
+
+    releaseProcesses()
+    renderInstance.unmount()
+  })
+
   test('opens the previewURL when p is pressed', async () => {
     // When
     const renderInstance = render(

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

@@ -6,7 +6,7 @@ import {buildDevConsoleURL} from '../../../../utilities/app/app-url.js'
 import {OutputProcess} from '@shopify/cli-kit/node/output'
 import {Alert, ConcurrentOutput, Link, LoadingIndicator, TabularData} from '@shopify/cli-kit/node/ui/components'
 import {useAbortSignal} from '@shopify/cli-kit/node/ui/hooks'
-import React, {FunctionComponent, useEffect, useMemo, useState} from 'react'
+import React, {FunctionComponent, useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {AbortController, AbortSignal} from '@shopify/cli-kit/node/abort'
 import {Box, MouseProvider, Text, useInput, useStdin} from '@shopify/cli-kit/node/ink'
 import {handleCtrlC} from '@shopify/cli-kit/node/ui'
@@ -62,6 +62,30 @@ const DevSessionUI: FunctionComponent<DevSesionUIProps> = ({
   const [error, setError] = useState<string | undefined>(undefined)
   const [status, setStatus] = useState<DevSessionStatus>(devSessionStatusManager.status)
   const [shouldShowPersistentDevInfo, setShouldShowPersistentDevInfo] = useState<boolean>(false)
+  const [availableLogPrefixes, setAvailableLogPrefixes] = useState<string[]>(() => [
+    ...new Set(processes.map(({prefix}) => prefix)),
+  ])
+  const availableLogPrefixesRef = useRef(new Set(availableLogPrefixes))
+  const [selectedLogPrefix, setSelectedLogPrefix] = useState<string | undefined>()
+
+  const addAvailableLogPrefix = useCallback((prefix: string) => {
+    if (availableLogPrefixesRef.current.has(prefix)) return
+
+    availableLogPrefixesRef.current.add(prefix)
+    setAvailableLogPrefixes((currentPrefixes) => [...currentPrefixes, prefix])
+  }, [])
+
+  const filterOutputByPrefix = useCallback(
+    (prefix: string) => selectedLogPrefix === undefined || prefix === selectedLogPrefix,
+    [selectedLogPrefix],
+  )
+
+  const selectNextLogPrefix = () => {
+    setSelectedLogPrefix((currentPrefix) => {
+      const currentPrefixIndex = currentPrefix === undefined ? -1 : availableLogPrefixes.indexOf(currentPrefix)
+      return availableLogPrefixes[currentPrefixIndex + 1]
+    })
+  }
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const {isAborted} = useAbortSignal(abortController.signal, async (err: any) => {
@@ -101,6 +125,10 @@ const DevSessionUI: FunctionComponent<DevSesionUIProps> = ({
     }
   }, [])
 
+  useEffect(() => {
+    processes.forEach(({prefix}) => addAvailableLogPrefix(prefix))
+  }, [addAvailableLogPrefix, processes])
+
   useInput(
     (input, key) => {
       handleCtrlC(input, key, () => abortController.abort())
@@ -234,6 +262,13 @@ const DevSessionUI: FunctionComponent<DevSesionUIProps> = ({
         </Box>
       ),
     },
+    // eslint-disable-next-line id-length
+    f: {
+      label: `Filter logs: ${selectedLogPrefix ?? 'all'}`,
+      action: async () => {
+        selectNextLogPrefix()
+      },
+    },
     q: {
       label: 'Quit',
       action: async () => {
@@ -250,6 +285,8 @@ const DevSessionUI: FunctionComponent<DevSesionUIProps> = ({
         abortSignal={abortController.signal}
         keepRunningAfterProcessesResolve={true}
         useAlternativeColorPalette={true}
+        outputFilter={canUseShortcuts ? filterOutputByPrefix : undefined}
+        onOutputPrefix={canUseShortcuts ? addAvailableLogPrefix : undefined}
       />
       {shouldShowPersistentDevInfo && (
         <Box marginTop={1} flexDirection="column">
@@ -295,8 +332,8 @@ const DevSessionUI: FunctionComponent<DevSesionUIProps> = ({
     </>
   )
 
-  return canUseShortcuts && !isAborted ? (
-    <MouseProvider allowTerminalScrolling trackMouseMovement={false}>
+  return canUseShortcuts ? (
+    <MouseProvider allowTerminalScrolling isActive={!isAborted} trackMouseMovement={false}>
       {content}
     </MouseProvider>
   ) : (

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

@@ -157,6 +157,16 @@ describe('TabPanel', () => {
     renderInstance.unmount()
   })
 
+  test('executes tab action when action tab is clicked', async () => {
+    const renderInstance = render(<TabPanel tabs={sampleTabs} initialActiveTab="a" />)
+
+    await waitForInputsToBeReady()
+    await sendInputAndWait(renderInstance, 10, ...mouseClick(100, 2))
+
+    expect(mockAction).toHaveBeenCalledOnce()
+    renderInstance.unmount()
+  })
+
   test('executes shortcut action when shortcut key is pressed', async () => {
     const renderInstance = render(<TabPanel tabs={sampleTabs} initialActiveTab="a" />)
 

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

@@ -4,7 +4,7 @@ import {AbortController, AbortSignal} from '../../../../public/node/abort.js'
 import {unstyled} from '../../../../public/node/output.js'
 
 import React from 'react'
-import {describe, expect, test} from 'vitest'
+import {describe, expect, test, vi} from 'vitest'
 
 import {Writable} from 'stream'
 
@@ -177,6 +177,58 @@ describe('ConcurrentOutput', () => {
     gate.resolve()
   })
 
+  test('filters existing output by prefix without restarting processes', async () => {
+    const outputSync = new Synchronizer()
+    const gate = new Synchronizer()
+    const abortSignal = new AbortController().signal
+    const observedPrefixes: string[] = []
+    const backendAction = vi.fn(async (stdout: Writable) => {
+      stdout.write('backend message')
+      await gate.promise
+    })
+    const frontendAction = vi.fn(async (stdout: Writable) => {
+      useConcurrentOutputContext({outputPrefix: 'custom-frontend'}, () => {
+        stdout.write('frontend message')
+      })
+      outputSync.resolve()
+      await gate.promise
+    })
+    const processes = [
+      {prefix: 'backend', action: backendAction},
+      {prefix: 'frontend', action: frontendAction},
+    ]
+
+    const renderInstance = render(
+      <ConcurrentOutput
+        processes={processes}
+        abortSignal={abortSignal}
+        outputFilter={() => true}
+        onOutputPrefix={(prefix) => observedPrefixes.push(prefix)}
+      />,
+    )
+    await outputSync.promise
+    await waitForContent(renderInstance, 'frontend message')
+
+    renderInstance.rerender(
+      <ConcurrentOutput
+        processes={processes}
+        abortSignal={abortSignal}
+        outputFilter={(prefix) => prefix === 'backend'}
+        onOutputPrefix={(prefix) => observedPrefixes.push(prefix)}
+      />,
+    )
+    await waitForContent(renderInstance, 'backend message')
+
+    const output = unstyled(renderInstance.lastFrame()!)
+    expect(output).toContain('backend message')
+    expect(output).not.toContain('frontend message')
+    expect(observedPrefixes).toEqual(['backend', 'custom-frontend'])
+    expect(backendAction).toHaveBeenCalledOnce()
+    expect(frontendAction).toHaveBeenCalledOnce()
+
+    gate.resolve()
+  })
+
   test('renders prefix column width based on prefixColumnSize', async () => {
     // Given
     const processSync1 = new Synchronizer()

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

@@ -1,7 +1,7 @@
 import {OutputProcess} from '../../../../public/node/output.js'
 import {AbortSignal} from '../../../../public/node/abort.js'
 import {useComplete} from '../../ui.js'
-import React, {FunctionComponent, useCallback, useEffect, useMemo, useState} from 'react'
+import React, {FunctionComponent, useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {Box, Static, Text, TextProps} from 'ink'
 import figures from 'figures'
 import stripAnsi from 'strip-ansi'
@@ -16,12 +16,17 @@ export interface ConcurrentOutputProps {
   showTimestamps?: boolean
   keepRunningAfterProcessesResolve?: boolean
   useAlternativeColorPalette?: boolean
+  /** Filters both existing and future output by its displayed prefix. */
+  outputFilter?: (prefix: string) => boolean
+  /** Called when output is received, including output with a contextual prefix. */
+  onOutputPrefix?: (prefix: string) => void
 }
 
 interface Chunk {
   color: TextProps['color']
   prefix: string
   lines: string[]
+  timestamp: string
 }
 
 function addLeadingZero(number: number) {
@@ -91,9 +96,13 @@ const ConcurrentOutput: FunctionComponent<ConcurrentOutputProps> = ({
   showTimestamps = true,
   keepRunningAfterProcessesResolve = false,
   useAlternativeColorPalette = false,
+  outputFilter,
+  onOutputPrefix,
 }) => {
   const [processOutput, setProcessOutput] = useState<Chunk[]>([])
   const [completionResult, setCompletionResult] = useState<{error?: Error} | null>(null)
+  const onOutputPrefixRef = useRef(onOutputPrefix)
+  onOutputPrefixRef.current = onOutputPrefix
   const complete = useComplete()
   const concurrentColors: TextProps['color'][] = useMemo(
     () =>
@@ -144,12 +153,14 @@ const ConcurrentOutput: FunctionComponent<ConcurrentOutputProps> = ({
           const index = addPrefix(prefix, prefixes)
 
           const lines = shouldStripAnsi ? stripAnsi(log).split(/\n/) : log.split(/\n/)
+          onOutputPrefixRef.current?.(prefix)
           setProcessOutput((previousProcessOutput) => [
             ...previousProcessOutput,
             {
               color: lineColor(index),
               prefix,
               lines,
+              timestamp: currentTime(),
             },
           ])
           next()
@@ -203,31 +214,32 @@ const ConcurrentOutput: FunctionComponent<ConcurrentOutputProps> = ({
 
   const {lineVertical} = figures
 
-  return (
-    <Static items={processOutput}>
-      {(chunk, index) => {
-        return (
-          <Box flexDirection="column" key={index}>
-            {chunk.lines.map((line, index) => (
-              <Box key={index} flexDirection="row">
-                <Text>
-                  {showTimestamps ? (
-                    <Text>
-                      {currentTime()} {lineVertical}{' '}
-                    </Text>
-                  ) : null}
-                  <Text color={chunk.color}>{formatPrefix(chunk.prefix)}</Text>
-                  <Text>
-                    {' '}
-                    {lineVertical} {line}
-                  </Text>
-                </Text>
-              </Box>
-            ))}
-          </Box>
-        )
-      }}
-    </Static>
+  const renderChunk = (chunk: Chunk, index: number) => (
+    <Box flexDirection="column" key={index}>
+      {chunk.lines.map((line, index) => (
+        <Box key={index} flexDirection="row">
+          <Text>
+            {showTimestamps ? (
+              <Text>
+                {chunk.timestamp} {lineVertical}{' '}
+              </Text>
+            ) : null}
+            <Text color={chunk.color}>{formatPrefix(chunk.prefix)}</Text>
+            <Text>
+              {' '}
+              {lineVertical} {line}
+            </Text>
+          </Text>
+        </Box>
+      ))}
+    </Box>
   )
+
+  if (outputFilter) {
+    // Ink's Static output is immutable once written, so filterable output must remain in the live render tree.
+    return <Box flexDirection="column">{processOutput.filter(({prefix}) => outputFilter(prefix)).map(renderChunk)}</Box>
+  }
+
+  return <Static items={processOutput}>{renderChunk}</Static>
 }
 export {ConcurrentOutput, ConcurrentOutputContext, useConcurrentOutputContext}