From 3caa996096efba17a312c98517d750c2a56167f1 Mon Sep 17 00:00:00 2001
From: Arsalan Khattak <37709578+eKhattak@users.noreply.github.com>
Date: Thu, 30 Jul 2020 09:57:29 +0500
Subject: [PATCH] Error overlay should not be dismissable for a server error
 (#14011)

---
 .../src/internal/components/Dialog/Dialog.tsx |  2 +-
 .../LeftRightDialogHeader.tsx                 | 66 ++++++++++---------
 .../src/internal/container/Errors.tsx         |  4 +-
 3 files changed, 37 insertions(+), 35 deletions(-)

diff --git a/packages/react-dev-overlay/src/internal/components/Dialog/Dialog.tsx b/packages/react-dev-overlay/src/internal/components/Dialog/Dialog.tsx
index 3ca74bb08eea4..e1891f9e695ac 100644
--- a/packages/react-dev-overlay/src/internal/components/Dialog/Dialog.tsx
+++ b/packages/react-dev-overlay/src/internal/components/Dialog/Dialog.tsx
@@ -5,7 +5,7 @@ export type DialogProps = {
   type: 'error' | 'warning'
   'aria-labelledby': string
   'aria-describedby': string
-  onClose: (e: MouseEvent | TouchEvent) => void
+  onClose?: (e: MouseEvent | TouchEvent) => void
 }
 
 const Dialog: React.FC<DialogProps> = function Dialog({
diff --git a/packages/react-dev-overlay/src/internal/components/LeftRightDialogHeader/LeftRightDialogHeader.tsx b/packages/react-dev-overlay/src/internal/components/LeftRightDialogHeader/LeftRightDialogHeader.tsx
index 94360108a1030..c1bc4d31fc63d 100644
--- a/packages/react-dev-overlay/src/internal/components/LeftRightDialogHeader/LeftRightDialogHeader.tsx
+++ b/packages/react-dev-overlay/src/internal/components/LeftRightDialogHeader/LeftRightDialogHeader.tsx
@@ -4,7 +4,7 @@ export type LeftRightDialogHeaderProps = {
   className?: string
   previous: (() => void) | null
   next: (() => void) | null
-  close: () => void
+  close?: () => void
 }
 
 const LeftRightDialogHeader: React.FC<LeftRightDialogHeaderProps> = function LeftRightDialogHeader({
@@ -142,37 +142,39 @@ const LeftRightDialogHeader: React.FC<LeftRightDialogHeaderProps> = function Lef
         &nbsp;
         {children}
       </nav>
-      <button
-        ref={buttonClose}
-        type="button"
-        onClick={close}
-        aria-label="Close"
-      >
-        <span aria-hidden="true">
-          <svg
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M18 6L6 18"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-            <path
-              d="M6 6L18 18"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
-        </span>
-      </button>
+      {close && (
+        <button
+          ref={buttonClose}
+          type="button"
+          onClick={close}
+          aria-label="Close"
+        >
+          <span aria-hidden="true">
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M18 6L6 18"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <path
+                d="M6 6L18 18"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </span>
+        </button>
+      )}
     </div>
   )
 }
diff --git a/packages/react-dev-overlay/src/internal/container/Errors.tsx b/packages/react-dev-overlay/src/internal/container/Errors.tsx
index 951e414f50a88..d1e0d002ee0c3 100644
--- a/packages/react-dev-overlay/src/internal/container/Errors.tsx
+++ b/packages/react-dev-overlay/src/internal/container/Errors.tsx
@@ -252,14 +252,14 @@ export const Errors: React.FC<ErrorsProps> = function Errors({ errors }) {
         type="error"
         aria-labelledby="nextjs__container_errors_label"
         aria-describedby="nextjs__container_errors_desc"
-        onClose={minimize}
+        onClose={!isServerError && minimize}
       >
         <DialogContent>
           <DialogHeader className="nextjs-container-errors-header">
             <LeftRightDialogHeader
               previous={activeIdx > 0 ? previous : null}
               next={activeIdx < readyErrors.length - 1 ? next : null}
-              close={minimize}
+              close={!isServerError && minimize}
             >
               <small>
                 <span>{activeIdx + 1}</span> of{' '}