Move ErrorIndicator to separate file

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/ErrorIndicator/ErrorIndicator.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ErrorIndicator } from './ErrorIndicator'
+import { withShadowPortal } from '../../storybook/with-shadow-portal'
+
+const meta: Meta<typeof ErrorIndicator> = {
+  title: 'ErrorIndicator',
+  component: ErrorIndicator,
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [withShadowPortal],
+}
+
+export default meta
+type Story = StoryObj<typeof ErrorIndicator>
+
+// Mock error for stories
+const mockError = {
+  id: 1,
+  runtime: true as const,
+  error: new Error('Test error'),
+  frames: [
+    {
+      error: true,
+      reason: null,
+      external: false,
+      ignored: false,
+      sourceStackFrame: {
+        file: 'test.js',
+        methodName: '<unknown>',
+        arguments: [],
+        lineNumber: 1,
+        column: 1,
+      },
+    },
+  ],
+}
+
+export const SingleError: Story = {
+  args: {
+    hasStaticIndicator: false,
+    readyErrors: [mockError],
+    fullscreen: () => console.log('Fullscreen clicked'),
+    hide: () => console.log('Hide clicked'),
+  },
+}
+
+export const MultipleErrors: Story = {
+  args: {
+    hasStaticIndicator: false,
+    readyErrors: [mockError, { ...mockError, id: 2 }, { ...mockError, id: 3 }],
+    fullscreen: () => console.log('Fullscreen clicked'),
+    hide: () => console.log('Hide clicked'),
+  },
+}
+
+export const WithStaticIndicator: Story = {
+  args: {
+    hasStaticIndicator: true,
+    readyErrors: [mockError],
+    fullscreen: () => console.log('Fullscreen clicked'),
+    hide: () => console.log('Hide clicked'),
+  },
+}

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/ErrorIndicator/ErrorIndicator.tsx

@@ -0,0 +1,58 @@
+import type { ReadyRuntimeError } from '../../helpers/get-error-by-type'
+import { Toast } from '../Toast'
+import { CloseIcon } from '../../icons/CloseIcon'
+
+type ErrorIndicatorProps = {
+  readyErrors: ReadyRuntimeError[]
+  fullscreen: () => void
+  hide: () => void
+  hasStaticIndicator?: boolean
+}
+
+export function ErrorIndicator({
+  hasStaticIndicator,
+  readyErrors,
+  fullscreen,
+  hide,
+}: ErrorIndicatorProps) {
+  return (
+    <Toast
+      data-nextjs-toast
+      className={`nextjs-toast-errors-parent${hasStaticIndicator ? ' nextjs-error-with-static' : ''}`}
+      onClick={fullscreen}
+    >
+      <div className="nextjs-toast-errors">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <circle cx="12" cy="12" r="10"></circle>
+          <line x1="12" y1="8" x2="12" y2="12"></line>
+          <line x1="12" y1="16" x2="12.01" y2="16"></line>
+        </svg>
+        <span>
+          {readyErrors.length} issue{readyErrors.length > 1 ? 's' : ''}
+        </span>
+        <button
+          data-nextjs-toast-errors-hide-button
+          className="nextjs-toast-hide-button"
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation()
+            hide()
+          }}
+          aria-label="Hide Issues"
+        >
+          <CloseIcon />
+        </button>
+      </div>
+    </Toast>
+  )
+}

packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/Errors.tsx

@@ -14,11 +14,9 @@ import {
 } from '../components/Dialog'
 import { LeftRightDialogHeader } from '../components/LeftRightDialogHeader'
 import { Overlay } from '../components/Overlay'
-import { Toast } from '../components/Toast'
 import { getErrorByType } from '../helpers/get-error-by-type'
 import type { ReadyRuntimeError } from '../helpers/get-error-by-type'
 import { noop as css } from '../helpers/noop-template'
-import { CloseIcon } from '../icons/CloseIcon'
 import { RuntimeError } from './RuntimeError'
 import { VersionStalenessInfo } from '../components/VersionStalenessInfo'
 import type { VersionInfo } from '../../../../../../server/dev/parse-version-info'
@@ -36,6 +34,7 @@ import {
   isUnhandledConsoleOrRejection,
 } from '../helpers/console-error'
 import { extractNextErrorCode } from '../../../../../../lib/error-telemetry-utils'
+import { ErrorIndicator } from '../components/ErrorIndicator/ErrorIndicator'
 
 export type SupportedErrorEvent = {
   id: number
@@ -234,44 +233,12 @@ export function Errors({
 
   if (displayState === 'minimized') {
     return (
-      <Toast
-        data-nextjs-toast
-        className={`nextjs-toast-errors-parent${hasStaticIndicator ? ' nextjs-error-with-static' : ''}`}
-        onClick={fullscreen}
-      >
-        <div className="nextjs-toast-errors">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          >
-            <circle cx="12" cy="12" r="10"></circle>
-            <line x1="12" y1="8" x2="12" y2="12"></line>
-            <line x1="12" y1="16" x2="12.01" y2="16"></line>
-          </svg>
-          <span>
-            {readyErrors.length} issue{readyErrors.length > 1 ? 's' : ''}
-          </span>
-          <button
-            data-nextjs-toast-errors-hide-button
-            className="nextjs-toast-hide-button"
-            type="button"
-            onClick={(e) => {
-              e.stopPropagation()
-              hide()
-            }}
-            aria-label="Hide Issues"
-          >
-            <CloseIcon />
-          </button>
-        </div>
-      </Toast>
+      <ErrorIndicator
+        hasStaticIndicator={hasStaticIndicator}
+        readyErrors={readyErrors}
+        fullscreen={fullscreen}
+        hide={hide}
+      />
     )
   }