showing multiple sheets

Summary:
The sheet was only used for the bug-reporter before and we had an explicit boolean flag in the redux store to keep track if the bug reporter is shown.

Changing this it an `activeSheet` property, which allows us to show arbitrary sheets, while making sure to only show one at a time.

Reviewed By: jknoxville

Differential Revision: D13516985

fbshipit-source-id: 3e83f719e2b61d0b2229268ebfdc910123b403d2

src/reducers/application.js

@@ -7,71 +7,82 @@
 
 import {remote} from 'electron';
 
+export type ActiveSheet = 'BUG_REPORTER' | 'PLUGIN_DEBUGGER' | null;
+
 export type State = {
   leftSidebarVisible: boolean,
   rightSidebarVisible: boolean,
   rightSidebarAvailable: boolean,
-  bugDialogVisible: boolean,
   windowIsFocused: boolean,
-  pluginManagerVisible: boolean,
+  activeSheet: ActiveSheet,
 };
 
-type ActionType =
+type BooleanActionType =
   | 'leftSidebarVisible'
   | 'rightSidebarVisible'
   | 'rightSidebarAvailable'
-  | 'bugDialogVisible'
-  | 'windowIsFocused'
-  | 'pluginManagerVisible';
+  | 'windowIsFocused';
 
-export type Action = {
-  type: ActionType,
-  payload?: boolean,
-};
+export type Action =
+  | {
+      type: BooleanActionType,
+      payload?: boolean,
+    }
+  | {
+      type: 'SET_ACTIVE_SHEET',
+      payload: ActiveSheet,
+    };
 
 const initialState: () => State = () => ({
   leftSidebarVisible: true,
   rightSidebarVisible: true,
   rightSidebarAvailable: false,
-  bugDialogVisible: false,
   windowIsFocused: remote.getCurrentWindow().isFocused(),
-  pluginManagerVisible: false,
+  activeSheet: null,
 });
 
 export default function reducer(state: State, action: Action): State {
   state = state || initialState();
-  const {payload, type} = action;
-  const newValue = typeof payload === 'undefined' ? !state[type] : payload;
-
   if (
-    type === 'leftSidebarVisible' ||
-    type === 'rightSidebarVisible' ||
-    type === 'rightSidebarAvailable' ||
-    type === 'bugDialogVisible' ||
-    type === 'windowIsFocused' ||
-    type === 'pluginManagerVisible'
+    action.type === 'leftSidebarVisible' ||
+    action.type === 'rightSidebarVisible' ||
+    action.type === 'rightSidebarAvailable' ||
+    action.type === 'windowIsFocused'
   ) {
-    if (state[type] === newValue) {
+    const newValue =
+      typeof action.payload === 'undefined'
+        ? !state[action.type]
+        : action.payload;
+
+    if (state[action.type] === newValue) {
       // value hasn't changed
       return state;
     } else {
       return {
         ...state,
-        [type]: newValue,
+        [action.type]: newValue,
       };
     }
+  } else if (action.type === 'SET_ACTIVE_SHEET') {
+    return {
+      ...state,
+      activeSheet: action.payload,
+    };
   } else {
     return state;
   }
 }
 
-export const toggleAction = (type: ActionType, payload?: boolean): Action => ({
+export const toggleAction = (
+  type: BooleanActionType,
+  payload?: boolean,
+): Action => ({
   type,
   payload,
 });
 
-export const toggleBugDialogVisible = (payload?: boolean): Action => ({
-  type: 'bugDialogVisible',
+export const setActiveSheet = (payload: ActiveSheet): Action => ({
+  type: 'SET_ACTIVE_SHEET',
   payload,
 });
 
@@ -89,8 +100,3 @@ export const toggleRightSidebarAvailable = (payload?: boolean): Action => ({
   type: 'rightSidebarAvailable',
   payload,
 });
-
-export const togglePluginManagerVisible = (payload?: boolean): Action => ({
-  type: 'pluginManagerVisible',
-  payload,
-});