fix ui style change

vercel · Dec 19, 2024 · dd4ad2d · dd4ad2d
1 parent 84efbb9
commit dd4ad2d
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 11 deletions.
diff --git a/...verlay/_experimental/internal/components/Errors/ErrorOverlayLayout/ErrorOverlayLayout.tsx b/...verlay/_experimental/internal/components/Errors/ErrorOverlayLayout/ErrorOverlayLayout.tsx
@@ -1,6 +1,10 @@
+import type { ReadyRuntimeError } from '../../../helpers/get-error-by-type'
+import type { DebugInfo } from '../../../../../types'
 import type { VersionInfo } from '../../../../../../../../server/dev/parse-version-info'
 import { Dialog, DialogHeader, DialogBody, DialogContent } from '../../Dialog'
 import { Overlay } from '../../Overlay'
+import { ErrorPagination } from '../ErrorPagination/ErrorPagination'
+import { ToolButtonsGroup } from '../../ToolButtonsGroup/ToolButtonsGroup'
 import { VersionStalenessInfo } from '../../VersionStalenessInfo'
 
 type ErrorOverlayLayoutProps = {
@@ -13,22 +17,33 @@ type ErrorOverlayLayoutProps = {
     | 'Missing Required HTML Tag'
   children?: React.ReactNode
   errorCode?: string
+  error?: Error
+  debugInfo?: DebugInfo
   isBuildError?: boolean
   onClose?: () => void
   // TODO: remove this
   temporaryHeaderChildren?: React.ReactNode
   versionInfo?: VersionInfo
+  // TODO: better handle receiving
+  readyErrors?: ReadyRuntimeError[]
+  activeIdx?: number
+  setActiveIndex?: (index: number) => void
 }
 
 export function ErrorOverlayLayout({
   errorMessage,
   errorType,
   children,
   errorCode,
+  error,
+  debugInfo,
   isBuildError,
   onClose,
   temporaryHeaderChildren,
   versionInfo,
+  readyErrors,
+  activeIdx,
+  setActiveIndex,
 }: ErrorOverlayLayoutProps) {
   return (
     <Overlay fixed={isBuildError}>
@@ -40,6 +55,12 @@ export function ErrorOverlayLayout({
       >
         <DialogContent>
           <DialogHeader className="nextjs-container-errors-header">
+            {/* TODO: better passing data instead of nullish coalescing */}
+            <ErrorPagination
+              readyErrors={readyErrors ?? []}
+              activeIdx={activeIdx ?? 0}
+              onActiveIndexChange={setActiveIndex ?? (() => {})}
+            />
             <div
               className="nextjs__container_errors__error_title"
               // allow assertion in tests before error rating is implemented
@@ -50,7 +71,9 @@ export function ErrorOverlayLayout({
                 className="nextjs__container_errors_label"
               >
                 {errorType}
+                {/* TODO: Need to relocate this so consider data flow. */}
               </h1>
+              <ToolButtonsGroup error={error} debugInfo={debugInfo} />
             </div>
             <VersionStalenessInfo versionInfo={versionInfo} />
             <p

diff --git a/...react-dev-overlay/_experimental/internal/components/ToolButtonsGroup/ToolButtonsGroup.tsx b/...react-dev-overlay/_experimental/internal/components/ToolButtonsGroup/ToolButtonsGroup.tsx
@@ -3,7 +3,7 @@ import { CopyButton } from '../copy-button'
 import { NodejsInspectorCopyButton } from '../nodejs-inspector'
 
 type ToolButtonsGroupProps = {
-  error: Error
+  error: Error | undefined
   debugInfo: DebugInfo | undefined
 }
 
@@ -14,8 +14,8 @@ export function ToolButtonsGroup({ error, debugInfo }: ToolButtonsGroupProps) {
         data-nextjs-data-runtime-error-copy-stack
         actionLabel="Copy error stack"
         successLabel="Copied"
-        content={error.stack || ''}
-        disabled={!error.stack}
+        content={error?.stack || ''}
+        disabled={!error?.stack}
       />
       <NodejsInspectorCopyButton
         devtoolsFrontendUrl={debugInfo?.devtoolsFrontendUrl}

diff --git a/.../next/src/client/components/react-dev-overlay/_experimental/internal/container/Errors.tsx b/.../next/src/client/components/react-dev-overlay/_experimental/internal/container/Errors.tsx
@@ -25,8 +25,6 @@ import {
 } from '../helpers/console-error'
 import { extractNextErrorCode } from '../../../../../../lib/error-telemetry-utils'
 import { ErrorIndicator } from '../components/Errors/ErrorIndicator/ErrorIndicator'
-import { ErrorPagination } from '../components/Errors/ErrorPagination/ErrorPagination'
-import { ToolButtonsGroup } from '../components/ToolButtonsGroup/ToolButtonsGroup'
 import { ErrorOverlayLayout } from '../components/Errors/ErrorOverlayLayout/ErrorOverlayLayout'
 
 export type SupportedErrorEvent = {
@@ -260,14 +258,13 @@ export function Errors({
         <ErrorDescription error={error} hydrationWarning={hydrationWarning} />
       }
       onClose={isServerError ? undefined : minimize}
+      debugInfo={debugInfo}
+      error={error}
+      readyErrors={readyErrors}
+      activeIdx={activeIdx}
+      setActiveIndex={setActiveIndex}
       temporaryHeaderChildren={
         <>
-          <ErrorPagination
-            readyErrors={readyErrors}
-            activeIdx={activeIdx}
-            onActiveIndexChange={setActiveIndex}
-          />
-          <ToolButtonsGroup error={error} debugInfo={debugInfo} />
           {notes ? (
             <>
               <p