Allow Sidebar to be Disabled (#2343)

* WIP: based on Issue-1562

* Add changes to swap focus.

* Swap some function names.

Also enforce swapping to the previous split on hide.

browser/src/Input/KeyBindings.ts

@@ -47,6 +47,7 @@ export const applyDefaultKeyBindings = (oni: Oni.Plugin.Api, config: Configurati
         input.bind("<m-h>", "oni.editor.hide")
         input.bind("<c-tab>", "buffer.toggle")
         input.bind("<m-s-f>", "search.searchAllFiles")
+        input.bind("<m-s-e>", "explorer.toggle")
         input.bind("<m-s-_>", "sidebar.decreaseWidth")
         input.bind("<m-s-+>", "sidebar.increaseWidth")
         input.bind("<m-,>", "oni.config.openConfigJs")
@@ -71,6 +72,7 @@ export const applyDefaultKeyBindings = (oni: Oni.Plugin.Api, config: Configurati
         input.bind("<s-c-t>", "language.symbols.document")
         input.bind("<c-tab>", "buffer.toggle")
         input.bind("<s-c-f>", "search.searchAllFiles")
+        input.bind("<s-c-e>", "explorer.toggle")
         input.bind("<c-,>", "oni.config.openConfigJs")
 
         if (config.getValue("editor.clipboard.enabled")) {

browser/src/Services/Explorer/ExplorerView.tsx

@@ -332,7 +332,9 @@ const mapStateToProps = (
     containerProps: IExplorerViewContainerProps,
 ): IExplorerViewProps => {
     const yanked = state.register.yank.map(node => node.id)
-    const { register: { updated, rename } } = state
+    const {
+        register: { updated, rename },
+    } = state
     return {
         ...containerProps,
         isActive: state.hasFocus,

browser/src/Services/Explorer/index.tsx

@@ -30,4 +30,16 @@ export const activate = (
         "files-o",
         new ExplorerSplit(configuration, workspace, commandManager, editorManager),
     )
+
+    const toggleExplorer = () => {
+        sidebarManager.toggleVisibilityById("oni.sidebar.explorer")
+    }
+
+    commandManager.registerCommand({
+        command: "explorer.toggle",
+        name: "Explorer: Toggle Visibility",
+        detail: "Toggles the explorer in the sidebar",
+        execute: toggleExplorer,
+        enabled: () => !!workspace.activeWorkspace,
+    })
 }

browser/src/Services/Search/index.tsx

@@ -135,7 +135,7 @@ export const activate = (
     sidebarManager.add("search", new SearchPane(editorManager, workspace, onFocusEvent))
 
     const searchAllFiles = () => {
-        sidebarManager.setActiveEntry("oni.sidebar.search")
+        sidebarManager.toggleVisibilityById("oni.sidebar.search")
 
         onFocusEvent.dispatch()
     }

browser/src/Services/Sidebar/SidebarStore.ts

@@ -80,13 +80,8 @@ export class SidebarManager {
 
         this.setWidth(this._configuration.getValue("sidebar.width"))
 
-        if (_windowManager) {
         this._iconSplit = this._windowManager.createSplit("left", new SidebarSplit(this))
-            this._contentSplit = this._windowManager.createSplit(
-                "left",
-                new SidebarContentSplit(this),
-            )
-        }
+        this._contentSplit = this._windowManager.createSplit("left", new SidebarContentSplit(this))
     }
 
     public increaseWidth(): void {
@@ -156,6 +151,28 @@ export class SidebarManager {
         }
     }
 
+    public toggleVisibilityById(id: string): void {
+        if (id) {
+            if (id !== this.activeEntryId) {
+                this._store.dispatch({
+                    type: "SET_ACTIVE_ID",
+                    activeEntryId: id,
+                })
+
+                this._contentSplit.show()
+                this._contentSplit.focus()
+            } else {
+                if (this._contentSplit.isVisible) {
+                    this._contentSplit.hide()
+                } else {
+                    // In some cases you can have an ACTIVE entry that is hidden
+                    this._contentSplit.show()
+                    this._contentSplit.focus()
+                }
+            }
+        }
+    }
+
     public enter(): void {
         this._store.dispatch({ type: "ENTER" })
     }
@@ -175,6 +192,11 @@ export class SidebarManager {
             entry,
         })
     }
+
+    public hide(): void {
+        this._contentSplit.hide()
+        this._iconSplit.hide()
+    }
 }
 
 const DefaultSidebarState: ISidebarState = {

browser/src/Services/Sidebar/index.ts

@@ -10,9 +10,17 @@ let _sidebarManager: SidebarManager = null
 export * from "./SidebarStore"
 
 export const activate = (configuration: Configuration, workspace: Workspace) => {
-    if (configuration.getValue("sidebar.enabled")) {
+    // Always create the sidebar to prevent issues. If its disabled, just hide it.
+    // See #1562 for more information.
     _sidebarManager = new SidebarManager(windowManager, configuration)
-        if (!configuration.getValue("sidebar.default.open")) {
+
+    const sideBarEnabled = configuration.getValue("sidebar.enabled")
+
+    if (!sideBarEnabled) {
+        _sidebarManager.hide()
+    }
+
+    if (sideBarEnabled && !configuration.getValue("sidebar.default.open")) {
         _sidebarManager.toggleSidebarVisibility()
     }
 
@@ -36,9 +44,6 @@ export const activate = (configuration: Configuration, workspace: Workspace) =>
         detail: "Show / hide the contents of the sidebar pane.",
         execute: () => _sidebarManager.toggleSidebarVisibility(),
     })
-    } else {
-        _sidebarManager = new SidebarManager(null, configuration)
-    }
 }
 
 export const getInstance = (): SidebarManager => _sidebarManager

browser/src/Services/WindowManager/WindowManager.ts

@@ -52,6 +52,8 @@ export class WindowSplitHandle implements Oni.WindowSplitHandle {
             type: "HIDE_SPLIT",
             splitId: this._id,
         })
+
+        this._windowManager.swapToPreviousSplit(this._id)
     }
 
     public show(): void {
@@ -260,6 +262,13 @@ export class WindowManager {
     }
 
     public close(splitId: string) {
+        this.swapToPreviousSplit(splitId)
+        delete this._idToSplit[splitId]
+    }
+
+    // Swaps focus to the most recently focused window, and hides
+    // the passed split.
+    public swapToPreviousSplit(splitId: string) {
         const currentActiveSplit = this.activeSplit
 
         // Send focus back to most recently focused window
@@ -284,8 +293,6 @@ export class WindowManager {
             type: "SET_PRIMARY_SPLITS",
             splits: state,
         })
-
-        delete this._idToSplit[splitId]
     }
 
     public focusSplit(splitId: string): void {

browser/test/Services/Explorer/ExplorerStoreTests.ts

@@ -588,7 +588,10 @@ describe("ExplorerStore", () => {
             assert.deepEqual(head(newState), testAction)
         })
         describe("Register Reducer test", () => {
-            const { yankRegisterReducer, DefaultExplorerState: { register } } = ExplorerState
+            const {
+                yankRegisterReducer,
+                DefaultExplorerState: { register },
+            } = ExplorerState
 
             it("It should add paste items to both the paste and undo registers", () => {
                 const newState = yankRegisterReducer(clone(register), pasteAction)