Allow dismissing full refresh warning for session (vercel#33868)

x-ref: vercel#31827
x-ref: vercel#34212

![image](https://user-images.githubusercontent.com/1365881/151994766-b9afb349-1a9a-4220-9387-de10165e34e3.png)




## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`


Co-authored-by: JJ Kasper <[email protected]>

packages/next/client/dev/error-overlay/hot-dev-client.js

@@ -350,5 +350,6 @@ function hasAlreadyWarnedAboutFullRefresh() {
 }
 
 function clearFullRefreshStorage() {
-  sessionStorage.removeItem(FULL_REFRESH_STORAGE_KEY)
+  if (sessionStorage.getItem(FULL_REFRESH_STORAGE_KEY) !== 'ignore')
+    sessionStorage.removeItem(FULL_REFRESH_STORAGE_KEY)
 }

packages/react-dev-overlay/src/internal/container/FullRefreshWarning.tsx

@@ -12,11 +12,19 @@ import { noop as css } from '../helpers/noop-template'
 
 export type FullRefreshWarningProps = { reason: string | null }
 
+const FULL_REFRESH_STORAGE_KEY = '_has_warned_about_full_refresh'
+
 export const FullRefreshWarning: React.FC<FullRefreshWarningProps> =
   function FullRefreshWarning({ reason }) {
     const reload = React.useCallback(() => {
       window.location.reload()
     }, [])
+    const change = React.useCallback((e) => {
+      sessionStorage.setItem(
+        FULL_REFRESH_STORAGE_KEY,
+        e.target.checked ? 'ignore' : 'true'
+      )
+    }, [])
 
     return (
       <Overlay fixed>
@@ -42,6 +50,10 @@ export const FullRefreshWarning: React.FC<FullRefreshWarningProps> =
                   </a>
                   .
                 </p>
+                <label>
+                  <input type="checkbox" onChange={change} /> Don't show again
+                  for session
+                </label>
                 <button onClick={reload}>Reload</button>
               </footer>
             </DialogBody>