From 34900ae4957821316b8b60a646f38255768f1db2 Mon Sep 17 00:00:00 2001
From: devjiwonchoi <devjiwonchoi@gmail.com>
Date: Sat, 4 Jan 2025 01:24:07 +0900
Subject: [PATCH] [DevOverlay] Pass footer message from error containers

---
 .../ErrorOverlayLayout/ErrorOverlayLayout.tsx       |  7 ++++++-
 .../error-overlay-footer/error-overlay-footer.tsx   |  6 +++---
 .../Errors/error-overlay-footer/styles.ts           |  9 +++++++++
 .../_experimental/internal/container/BuildError.tsx |  9 +--------
 .../_experimental/internal/container/Errors.tsx     | 13 +++++--------
 5 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/ErrorOverlayLayout/ErrorOverlayLayout.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/ErrorOverlayLayout/ErrorOverlayLayout.tsx
index f3496964fba1b..5e230f6e5e2b9 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/ErrorOverlayLayout/ErrorOverlayLayout.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/ErrorOverlayLayout/ErrorOverlayLayout.tsx
@@ -34,6 +34,7 @@ type ErrorOverlayLayoutProps = {
   readyErrors?: ReadyRuntimeError[]
   activeIdx?: number
   setActiveIndex?: (index: number) => void
+  footerMessage?: string
 }
 
 export function ErrorOverlayLayout({
@@ -49,6 +50,7 @@ export function ErrorOverlayLayout({
   readyErrors,
   activeIdx,
   setActiveIndex,
+  footerMessage,
 }: ErrorOverlayLayoutProps) {
   return (
     <Overlay fixed={isBuildError}>
@@ -94,7 +96,10 @@ export function ErrorOverlayLayout({
           <DialogFooter>
             {/* TODO: Replace message from BuildError.tsx */}
             {/* TODO: errorCode should not be undefined whatsoever */}
-            <ErrorOverlayFooter message={''} errorCode={errorCode!} />
+            <ErrorOverlayFooter
+              footerMessage={footerMessage}
+              errorCode={errorCode!}
+            />
           </DialogFooter>
         </DialogContent>
       </Dialog>
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-footer/error-overlay-footer.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-footer/error-overlay-footer.tsx
index 724ce8cb4a381..409d7a94b8319 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-footer/error-overlay-footer.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-footer/error-overlay-footer.tsx
@@ -2,16 +2,16 @@ import { ErrorFeedback } from './error-feedback/error-feedback'
 
 export type ErrorOverlayFooterProps = {
   errorCode: string
-  message: string
+  footerMessage?: string
 }
 
 export function ErrorOverlayFooter({
   errorCode,
-  message,
+  footerMessage,
 }: ErrorOverlayFooterProps) {
   return (
     <footer className="error-overlay-footer">
-      <p>{message}</p>
+      <p className="error-overlay-footer-message">{footerMessage}</p>
       <ErrorFeedback errorCode={errorCode} />
     </footer>
   )
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-footer/styles.ts b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-footer/styles.ts
index 4cb499f333cf5..a9d9c26237e61 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-footer/styles.ts
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-footer/styles.ts
@@ -10,6 +10,15 @@ const styles = css`
   .error-overlay-footer p {
     color: var(--color-gray-900);
     margin: 0;
+    line-height: var(--size-font-big);
+  }
+
+  .error-overlay-footer-message {
+    color: var(--color-gray-900);
+    margin: 0;
+    font-size: var(--size-font-small);
+    font-weight: 400;
+    line-height: var(--size-font-big);
   }
 
   .error-feedback {
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/BuildError.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/BuildError.tsx
index 2411c696f037f..cc0c985028056 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/BuildError.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/BuildError.tsx
@@ -17,16 +17,9 @@ export const BuildError: React.FC<BuildErrorProps> = function BuildError({
       errorMessage="Failed to compile"
       onClose={noop}
       versionInfo={versionInfo}
+      footerMessage="This error occurred during the build process and can only be dismissed by fixing the error."
     >
       <Terminal content={message} />
-      <footer>
-        <p id="nextjs__container_build_error_desc">
-          <small>
-            This error occurred during the build process and can only be
-            dismissed by fixing the error.
-          </small>
-        </p>
-      </footer>
     </ErrorOverlayLayout>
   )
 }
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/Errors.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/Errors.tsx
index ae4d56ad3141b..442bfe1d6a7c3 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/Errors.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/Errors.tsx
@@ -244,6 +244,10 @@ export function Errors({
 
   const errorCode = extractNextErrorCode(error)
 
+  const footerMessage = isServerError
+    ? 'This error happened while generating the page. Any console logs will be displayed in the terminal window.'
+    : undefined
+
   return (
     <ErrorOverlayLayout
       errorCode={errorCode}
@@ -263,6 +267,7 @@ export function Errors({
       readyErrors={readyErrors}
       activeIdx={activeIdx}
       setActiveIndex={setActiveIndex}
+      footerMessage={footerMessage}
     >
       {notes ? (
         <>
@@ -295,14 +300,6 @@ export function Errors({
           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>
   )