feat: DevToolsIndicator (#74679)

Adding a `DevToolsIndicator` to the bottom left corner of the screen, replacing the old `ErrorIndicator` and `StaticIndicator`. This PR brings us 80% of the way to our goal. The remaining tasks are marked with TODOs. https://github.com/user-attachments/assets/40061638-7184-4051-85ec-ec6e80ca5102
vercel · Jan 9, 2025 · f612720 · f612720
1 parent 3d23109
commit f612720
Show file tree

Hide file tree

Showing 10 changed files with 641 additions and 123 deletions.
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/app/ReactDevOverlay.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/app/ReactDevOverlay.tsx
@@ -6,7 +6,6 @@ import React from 'react'
 import { ShadowPortal } from '../internal/components/ShadowPortal'
 import { BuildError } from '../internal/container/BuildError'
 import { Errors } from '../internal/container/Errors'
-import { StaticIndicator } from '../internal/container/StaticIndicator'
 import { Base } from '../internal/styles/Base'
 import { ComponentStyles } from '../internal/styles/ComponentStyles'
 import { CssReset } from '../internal/styles/CssReset'
@@ -37,7 +36,7 @@ export default class ReactDevOverlay extends React.PureComponent<
   }
 
   render() {
-    const { state, children, dispatcher } = this.props
+    const { state, children } = this.props
     const { isReactError } = this.state
 
     const hasBuildError = state.buildError != null
@@ -73,6 +72,7 @@ export default class ReactDevOverlay extends React.PureComponent<
             <>
               {hasRuntimeErrors ? (
                 <Errors
+                  isTurbopackEnabled={!!process.env.TURBOPACK}
                   isAppDir={true}
                   initialDisplayState={
                     isReactError ? 'fullscreen' : 'minimized'
@@ -83,10 +83,6 @@ export default class ReactDevOverlay extends React.PureComponent<
                   debugInfo={debugInfo}
                 />
               ) : null}
-
-              {hasStaticIndicator && (
-                <StaticIndicator dispatcher={dispatcher} />
-              )}
             </>
           )}
         </ShadowPortal>

diff --git a/...ct-dev-overlay/_experimental/internal/components/Errors/ErrorIndicator/ErrorIndicator.tsx b/...ct-dev-overlay/_experimental/internal/components/Errors/ErrorIndicator/ErrorIndicator.tsx
diff --git a/...ErrorIndicator/ErrorIndicator.stories.tsx → ...indicator/dev-tools-indicator.stories.tsx b/...ErrorIndicator/ErrorIndicator.stories.tsx → ...indicator/dev-tools-indicator.stories.tsx
@@ -1,18 +1,25 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import { ErrorIndicator } from './ErrorIndicator'
+import { DevToolsIndicator } from './dev-tools-indicator'
 import { withShadowPortal } from '../../../storybook/with-shadow-portal'
+import type { VersionInfo } from '../../../../../../../../server/dev/parse-version-info'
 
-const meta: Meta<typeof ErrorIndicator> = {
-  title: 'ErrorIndicator',
-  component: ErrorIndicator,
+const meta: Meta<typeof DevToolsIndicator> = {
+  title: 'DevToolsIndicator',
+  component: DevToolsIndicator,
   parameters: {
     layout: 'centered',
   },
   decorators: [withShadowPortal],
 }
 
 export default meta
-type Story = StoryObj<typeof ErrorIndicator>
+type Story = StoryObj<typeof DevToolsIndicator>
+
+// Mock version info for stories
+const mockVersionInfo: VersionInfo = {
+  installed: '15.1.2',
+  staleness: 'stale-major',
+}
 
 // Mock error for stories
 const mockError = {
@@ -42,6 +49,7 @@ export const SingleError: Story = {
     readyErrors: [mockError],
     fullscreen: () => console.log('Fullscreen clicked'),
     hide: () => console.log('Hide clicked'),
+    versionInfo: mockVersionInfo,
   },
 }
 
@@ -51,6 +59,7 @@ export const MultipleErrors: Story = {
     readyErrors: [mockError, { ...mockError, id: 2 }, { ...mockError, id: 3 }],
     fullscreen: () => console.log('Fullscreen clicked'),
     hide: () => console.log('Hide clicked'),
+    versionInfo: mockVersionInfo,
   },
 }
 
@@ -60,5 +69,6 @@ export const WithStaticIndicator: Story = {
     readyErrors: [mockError],
     fullscreen: () => console.log('Fullscreen clicked'),
     hide: () => console.log('Hide clicked'),
+    versionInfo: mockVersionInfo,
   },
 }