add open close dispatch action

Author: devjiwonchoi

packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.tsx

@@ -12,7 +12,9 @@ import {
 import {
   ACTION_DEVTOOLS_PANEL_TOGGLE,
   ACTION_ERROR_OVERLAY_TOGGLE,
+  ACTION_ERROR_OVERLAY_CLOSE,
   STORAGE_KEY_POSITION,
+  ACTION_DEVTOOLS_PANEL_CLOSE,
 } from '../../shared'
 import { getInitialPosition } from '../errors/dev-tools-indicator/dev-tools-info/preferences'
 import { Draggable } from '../errors/dev-tools-indicator/draggable'
@@ -38,10 +40,12 @@ export function DevToolsIndicator({
   const [vertical, horizontal] = position.split('-', 2)
 
   const toggleErrorOverlay = () => {
+    dispatch({ type: ACTION_DEVTOOLS_PANEL_CLOSE })
     dispatch({ type: ACTION_ERROR_OVERLAY_TOGGLE })
   }
 
   const toggleDevToolsPanel = () => {
+    dispatch({ type: ACTION_ERROR_OVERLAY_CLOSE })
     dispatch({ type: ACTION_DEVTOOLS_PANEL_TOGGLE })
   }
 

packages/next/src/next-devtools/dev-overlay/shared.ts

@@ -43,13 +43,18 @@ export const ACTION_UNHANDLED_ERROR = 'unhandled-error'
 export const ACTION_UNHANDLED_REJECTION = 'unhandled-rejection'
 export const ACTION_DEBUG_INFO = 'debug-info'
 export const ACTION_DEV_INDICATOR = 'dev-indicator'
+
 export const ACTION_ERROR_OVERLAY_OPEN = 'error-overlay-open'
 export const ACTION_ERROR_OVERLAY_CLOSE = 'error-overlay-close'
 export const ACTION_ERROR_OVERLAY_TOGGLE = 'error-overlay-toggle'
+
 export const ACTION_BUILDING_INDICATOR_SHOW = 'building-indicator-show'
 export const ACTION_BUILDING_INDICATOR_HIDE = 'building-indicator-hide'
 export const ACTION_RENDERING_INDICATOR_SHOW = 'rendering-indicator-show'
 export const ACTION_RENDERING_INDICATOR_HIDE = 'rendering-indicator-hide'
+
+export const ACTION_DEVTOOLS_PANEL_OPEN = 'dev-tools-panel-open'
+export const ACTION_DEVTOOLS_PANEL_CLOSE = 'dev-tools-panel-close'
 export const ACTION_DEVTOOLS_PANEL_TOGGLE = 'dev-tools-panel-toggle'
 
 export const STORAGE_KEY_THEME = '__nextjs-dev-tools-theme'
@@ -123,6 +128,12 @@ export interface RenderingIndicatorHideAction {
   type: typeof ACTION_RENDERING_INDICATOR_HIDE
 }
 
+export interface DevToolsPanelOpenAction {
+  type: typeof ACTION_DEVTOOLS_PANEL_OPEN
+}
+export interface DevToolsPanelCloseAction {
+  type: typeof ACTION_DEVTOOLS_PANEL_CLOSE
+}
 export interface DevToolsPanelToggleAction {
   type: typeof ACTION_DEVTOOLS_PANEL_TOGGLE
 }
@@ -145,6 +156,8 @@ export type DispatcherEvent =
   | BuildingIndicatorHideAction
   | RenderingIndicatorShowAction
   | RenderingIndicatorHideAction
+  | DevToolsPanelOpenAction
+  | DevToolsPanelCloseAction
   | DevToolsPanelToggleAction
 
 const REACT_ERROR_STACK_BOTTOM_FRAME_REGEX =
@@ -347,6 +360,12 @@ export function useErrorOverlayReducer(
         case ACTION_RENDERING_INDICATOR_HIDE: {
           return { ...state, renderingIndicator: false }
         }
+        case ACTION_DEVTOOLS_PANEL_OPEN: {
+          return { ...state, isDevToolsPanelOpen: true }
+        }
+        case ACTION_DEVTOOLS_PANEL_CLOSE: {
+          return { ...state, isDevToolsPanelOpen: false }
+        }
         case ACTION_DEVTOOLS_PANEL_TOGGLE: {
           return { ...state, isDevToolsPanelOpen: !state.isDevToolsPanelOpen }
         }