[DevOverlay] Remove temporary header children (#74490)

### Why? The header children were temporary because they will affect the test utils in the future, we need to change these query selectors from `data-nextjs-dialog-header` to `data-nextjs-dialog-body`: https://github.com/vercel/next.js/blob/bca0bc921bd81f25e6d8f83d676774724a007bfa/test/lib/next-test-utils.ts#L983-L986 This is not a severe blocker, and we may follow up on this during the QA period when we enable CI tests for the new UI. We may even have to unify the target attributes for testing before the change.
vercel · Jan 3, 2025 · a07559f · a07559f
1 parent 1355dfa
commit a07559f
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 46 deletions.
diff --git a/...verlay/_experimental/internal/components/Errors/ErrorOverlayLayout/ErrorOverlayLayout.tsx b/...verlay/_experimental/internal/components/Errors/ErrorOverlayLayout/ErrorOverlayLayout.tsx
@@ -29,8 +29,6 @@ type ErrorOverlayLayoutProps = {
   debugInfo?: DebugInfo
   isBuildError?: boolean
   onClose?: () => void
-  // TODO: remove this
-  temporaryHeaderChildren?: React.ReactNode
   versionInfo?: VersionInfo
   // TODO: better handle receiving
   readyErrors?: ReadyRuntimeError[]
@@ -47,7 +45,6 @@ export function ErrorOverlayLayout({
   debugInfo,
   isBuildError,
   onClose,
-  temporaryHeaderChildren,
   versionInfo,
   readyErrors,
   activeIdx,
@@ -90,7 +87,6 @@ export function ErrorOverlayLayout({
             >
               {errorMessage}
             </p>
-            {temporaryHeaderChildren}
           </DialogHeader>
           <DialogBody className="nextjs-container-errors-body">
             {children}

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
@@ -263,50 +263,46 @@ export function Errors({
       readyErrors={readyErrors}
       activeIdx={activeIdx}
       setActiveIndex={setActiveIndex}
-      temporaryHeaderChildren={
+    >
+      {notes ? (
         <>
-          {notes ? (
-            <>
-              <p
-                id="nextjs__container_errors__notes"
-                className="nextjs__container_errors__notes"
-              >
-                {notes}
-              </p>
-            </>
-          ) : null}
-          {hydrationWarning ? (
-            <p
-              id="nextjs__container_errors__link"
-              className="nextjs__container_errors__link"
-            >
-              <HotlinkedText text="See more info here: https://nextjs.org/docs/messages/react-hydration-error" />
-            </p>
-          ) : null}
-
-          {hydrationWarning &&
-          (activeError.componentStackFrames?.length ||
-            !!errorDetails.reactOutputComponentDiff) ? (
-            <PseudoHtmlDiff
-              className="nextjs__container_errors__component-stack"
-              hydrationMismatchType={hydrationErrorType}
-              componentStackFrames={activeError.componentStackFrames || []}
-              firstContent={serverContent}
-              secondContent={clientContent}
-              reactOutputComponentDiff={errorDetails.reactOutputComponentDiff}
-            />
-          ) : null}
-          {isServerError ? (
-            <div>
-              <small>
-                This error happened while generating the page. Any console logs
-                will be displayed in the terminal window.
-              </small>
-            </div>
-          ) : undefined}
+          <p
+            id="nextjs__container_errors__notes"
+            className="nextjs__container_errors__notes"
+          >
+            {notes}
+          </p>
         </>
-      }
-    >
+      ) : null}
+      {hydrationWarning ? (
+        <p
+          id="nextjs__container_errors__link"
+          className="nextjs__container_errors__link"
+        >
+          <HotlinkedText text="See more info here: https://nextjs.org/docs/messages/react-hydration-error" />
+        </p>
+      ) : null}
+
+      {hydrationWarning &&
+      (activeError.componentStackFrames?.length ||
+        !!errorDetails.reactOutputComponentDiff) ? (
+        <PseudoHtmlDiff
+          className="nextjs__container_errors__component-stack"
+          hydrationMismatchType={hydrationErrorType}
+          componentStackFrames={activeError.componentStackFrames || []}
+          firstContent={serverContent}
+          secondContent={clientContent}
+          reactOutputComponentDiff={errorDetails.reactOutputComponentDiff}
+        />
+      ) : null}
+      {isServerError ? (
+        <div>
+          <small>
+            This error happened while generating the page. Any console logs will
+            be displayed in the terminal window.
+          </small>
+        </div>
+      ) : undefined}
       <RuntimeError key={activeError.id.toString()} error={activeError} />
     </ErrorOverlayLayout>
   )