Keep IDE RightPane views aliveide-keep-right-pane-tabs-alive

**Why?**
- This is needed for the Web Terminal feature.
  https://gitlab.com/gitlab-org/gitlab-ee/issues/5426

**Notes:**
- Introduces a `pane` Vuex module.
- Some views should not be kept alive (i.e. job details).
  This is why a `keepAlive` flag was introduced for views.

8 files changed, 215 insertions, 20 deletions

diff --git a/spec/javascripts/ide/components/ide_status_bar_spec.js b/spec/javascripts/ide/components/ide_status_bar_spec.js
index 0e93c5193a1..47d6492a7a6 100644
--- a/spec/javascripts/ide/components/ide_status_bar_spec.js
+++ b/spec/javascripts/ide/components/ide_status_bar_spec.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import store from '~/ide/stores';
 import ideStatusBar from '~/ide/components/ide_status_bar.vue';
+import { rightSidebarViews } from '~/ide/constants';
 import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import { resetStore } from '../helpers';
 import { projectData } from '../mock_data';
@@ -64,7 +65,7 @@ describe('ideStatusBar', () => {
 
   describe('pipeline status', () => {
     it('opens right sidebar on clicking icon', done => {
-      spyOn(vm, 'setRightPane');
+      spyOn(vm, 'openRightPane');
       Vue.set(vm.$store.state.pipelines, 'latestPipeline', {
         details: {
           status: {
@@ -80,7 +81,7 @@ describe('ideStatusBar', () => {
         .then(() => {
           vm.$el.querySelector('.ide-status-pipeline button').click();
 
-          expect(vm.setRightPane).toHaveBeenCalledWith('pipelines-list');
+          expect(vm.openRightPane).toHaveBeenCalledWith(rightSidebarViews.pipelines);
         })
         .then(done)
         .catch(done.fail);
diff --git a/spec/javascripts/ide/components/panes/right_spec.js b/spec/javascripts/ide/components/panes/right_spec.js
index c75975d2af6..4899f850cf4 100644
--- a/spec/javascripts/ide/components/panes/right_spec.js
+++ b/spec/javascripts/ide/components/panes/right_spec.js
@@ -25,7 +25,8 @@ describe('IDE right pane', () => {
 
   describe('active', () => {
     it('renders merge request button as active', done => {
-      vm.$store.state.rightPane = rightSidebarViews.mergeRequestInfo;
+      vm.$store.state.rightPane.isOpen = true;
+      vm.$store.state.rightPane.currentView = rightSidebarViews.mergeRequestInfo.name;
       vm.$store.state.currentMergeRequestId = '123';
       vm.$store.state.currentProjectId = 'gitlab-ce';
       vm.$store.state.currentMergeRequestId = 1;
@@ -41,20 +42,21 @@ describe('IDE right pane', () => {
         },
       };
 
-      vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.ide-sidebar-link.active')).not.toBe(null);
-        expect(
-          vm.$el.querySelector('.ide-sidebar-link.active').getAttribute('data-original-title'),
-        ).toBe('Merge Request');
-
-        done();
-      });
+      vm.$nextTick()
+        .then(() => {
+          expect(vm.$el.querySelector('.ide-sidebar-link.active')).not.toBe(null);
+          expect(
+            vm.$el.querySelector('.ide-sidebar-link.active').getAttribute('data-original-title'),
+          ).toBe('Merge Request');
+        })
+        .then(done)
+        .catch(done.fail);
     });
   });
 
   describe('click', () => {
     beforeEach(() => {
-      spyOn(vm, 'setRightPane');
+      spyOn(vm, 'open');
     });
 
     it('sets view to merge request', done => {
@@ -63,7 +65,7 @@ describe('IDE right pane', () => {
       vm.$nextTick(() => {
         vm.$el.querySelector('.ide-sidebar-link').click();
 
-        expect(vm.setRightPane).toHaveBeenCalledWith(rightSidebarViews.mergeRequestInfo);
+        expect(vm.open).toHaveBeenCalledWith(rightSidebarViews.mergeRequestInfo);
 
         done();
       });
diff --git a/spec/javascripts/ide/components/repo_editor_spec.js b/spec/javascripts/ide/components/repo_editor_spec.js
index 0e2e246defd..991fb750876 100644
--- a/spec/javascripts/ide/components/repo_editor_spec.js
+++ b/spec/javascripts/ide/components/repo_editor_spec.js
@@ -319,8 +319,8 @@ describe('RepoEditor', () => {
       });
     });
 
-    it('calls updateDimensions when rightPane is updated', done => {
-      vm.$store.state.rightPane = 'testing';
+    it('calls updateDimensions when rightPane is opened', done => {
+      vm.$store.state.rightPane.isOpen = true;
 
       vm.$nextTick(() => {
         expect(vm.editor.updateDimensions).toHaveBeenCalled();
diff --git a/spec/javascripts/ide/helpers.js b/spec/javascripts/ide/helpers.js
index 3ce9c9fcda1..7e107747346 100644
--- a/spec/javascripts/ide/helpers.js
+++ b/spec/javascripts/ide/helpers.js
@@ -6,6 +6,7 @@ import mergeRequestsState from '~/ide/stores/modules/merge_requests/state';
 import pipelinesState from '~/ide/stores/modules/pipelines/state';
 import branchesState from '~/ide/stores/modules/branches/state';
 import fileTemplatesState from '~/ide/stores/modules/file_templates/state';
+import paneState from '~/ide/stores/modules/pane/state';
 
 export const resetStore = store => {
   const newState = {
@@ -15,6 +16,7 @@ export const resetStore = store => {
     pipelines: pipelinesState(),
     branches: branchesState(),
     fileTemplates: fileTemplatesState(),
+    rightPane: paneState(),
   };
   store.replaceState(newState);
 };
diff --git a/spec/javascripts/ide/stores/modules/pane/actions_spec.js b/spec/javascripts/ide/stores/modules/pane/actions_spec.js
new file mode 100644
index 00000000000..f150ded6df5
--- /dev/null
+++ b/spec/javascripts/ide/stores/modules/pane/actions_spec.js
@@ -0,0 +1,87 @@
+import * as actions from '~/ide/stores/modules/pane/actions';
+import * as types from '~/ide/stores/modules/pane/mutation_types';
+import testAction from 'spec/helpers/vuex_action_helper';
+
+describe('IDE pane module actions', () => {
+  const TEST_VIEW = { name: 'test' };
+  const TEST_VIEW_KEEP_ALIVE = { name: 'test-keep-alive', keepAlive: true };
+
+  describe('toggleOpen', () => {
+    it('dispatches open if closed', done => {
+      testAction(
+        actions.toggleOpen,
+        TEST_VIEW,
+        { isOpen: false },
+        [],
+        [{ type: 'open', payload: TEST_VIEW }],
+        done,
+      );
+    });
+
+    it('dispatches close if opened', done => {
+      testAction(
+        actions.toggleOpen,
+        TEST_VIEW,
+        { isOpen: true },
+        [],
+        [{ type: 'close' }],
+        done,
+      );
+    });
+  });
+
+  describe('open', () => {
+    it('commits SET_OPEN', done => {
+      testAction(
+        actions.open,
+        null,
+        {},
+        [{ type: types.SET_OPEN, payload: true }],
+        [],
+        done,
+      );
+    });
+
+    it('commits SET_CURRENT_VIEW if view is given', done => {
+      testAction(
+        actions.open,
+        TEST_VIEW,
+        {},
+        [
+          { type: types.SET_OPEN, payload: true },
+          { type: types.SET_CURRENT_VIEW, payload: TEST_VIEW.name },
+        ],
+        [],
+        done,
+      );
+    });
+
+    it('commits KEEP_ALIVE_VIEW if keepAlive is true', done => {
+      testAction(
+        actions.open,
+        TEST_VIEW_KEEP_ALIVE,
+        {},
+        [
+          { type: types.SET_OPEN, payload: true },
+          { type: types.SET_CURRENT_VIEW, payload: TEST_VIEW_KEEP_ALIVE.name },
+          { type: types.KEEP_ALIVE_VIEW, payload: TEST_VIEW_KEEP_ALIVE.name },
+        ],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('close', () => {
+    it('commits SET_OPEN', done => {
+      testAction(
+        actions.close,
+        null,
+        {},
+        [{ type: types.SET_OPEN, payload: false }],
+        [],
+        done,
+      );
+    });
+  });
+});
diff --git a/spec/javascripts/ide/stores/modules/pane/getters_spec.js b/spec/javascripts/ide/stores/modules/pane/getters_spec.js
new file mode 100644
index 00000000000..2060863b5d6
--- /dev/null
+++ b/spec/javascripts/ide/stores/modules/pane/getters_spec.js
@@ -0,0 +1,61 @@
+import * as getters from '~/ide/stores/modules/pane/getters';
+import state from '~/ide/stores/modules/pane/state';
+
+describe('IDE pane module getters', () => {
+  const TEST_VIEW = 'test-view';
+  const TEST_KEEP_ALIVE_VIEWS = {
+    [TEST_VIEW]: true,
+  };
+
+  describe('isActiveView', () => {
+    it('returns true if given view matches currentView', () => {
+      const result = getters.isActiveView({ currentView: 'A' })('A');
+
+      expect(result).toBe(true);
+    });
+
+    it('returns false if given view does not match currentView', () => {
+      const result = getters.isActiveView({ currentView: 'A' })('B');
+
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('isAliveView', () => {
+    it('returns true if given view is in keepAliveViews', () => {
+      const result = getters.isAliveView(
+        { keepAliveViews: TEST_KEEP_ALIVE_VIEWS },
+        {},
+      )(TEST_VIEW);
+
+      expect(result).toBe(true);
+    });
+
+    it('returns true if given view is active view and open', () => {
+      const result = getters.isAliveView(
+        { ...state(), isOpen: true },
+        { isActiveView: () => true },
+      )(TEST_VIEW);
+
+      expect(result).toBe(true);
+    });
+
+    it('returns false if given view is active view and closed', () => {
+      const result = getters.isAliveView(
+        state(),
+        { isActiveView: () => true },
+      )(TEST_VIEW);
+
+      expect(result).toBe(false);
+    });
+
+    it('returns false if given view is not activeView', () => {
+      const result = getters.isAliveView(
+        { ...state(), isOpen: true },
+        { isActiveView: () => false },
+      )(TEST_VIEW);
+
+      expect(result).toBe(false);
+    });
+  });
+});
diff --git a/spec/javascripts/ide/stores/modules/pane/mutations_spec.js b/spec/javascripts/ide/stores/modules/pane/mutations_spec.js
new file mode 100644
index 00000000000..b5fcd35912e
--- /dev/null
+++ b/spec/javascripts/ide/stores/modules/pane/mutations_spec.js
@@ -0,0 +1,42 @@
+import state from '~/ide/stores/modules/pane/state';
+import mutations from '~/ide/stores/modules/pane/mutations';
+import * as types from '~/ide/stores/modules/pane/mutation_types';
+
+describe('IDE pane module mutations', () => {
+  const TEST_VIEW = 'test-view';
+  let mockedState;
+
+  beforeEach(() => {
+    mockedState = state();
+  });
+
+  describe('SET_OPEN', () => {
+    it('sets isOpen', () => {
+      mockedState.isOpen = false;
+
+      mutations[types.SET_OPEN](mockedState, true);
+
+      expect(mockedState.isOpen).toBe(true);
+    });
+  });
+
+  describe('SET_CURRENT_VIEW', () => {
+    it('sets currentView', () => {
+      mockedState.currentView = null;
+
+      mutations[types.SET_CURRENT_VIEW](mockedState, TEST_VIEW);
+
+      expect(mockedState.currentView).toEqual(TEST_VIEW);
+    });
+  });
+
+  describe('KEEP_ALIVE_VIEW', () => {
+    it('adds entry to keepAliveViews', () => {
+      mutations[types.KEEP_ALIVE_VIEW](mockedState, TEST_VIEW);
+
+      expect(mockedState.keepAliveViews).toEqual({
+        [TEST_VIEW]: true,
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/ide/stores/modules/pipelines/actions_spec.js b/spec/javascripts/ide/stores/modules/pipelines/actions_spec.js
index 91edb388791..d85354c3681 100644
--- a/spec/javascripts/ide/stores/modules/pipelines/actions_spec.js
+++ b/spec/javascripts/ide/stores/modules/pipelines/actions_spec.js
@@ -315,29 +315,29 @@ describe('IDE pipelines actions', () => {
         'job',
         mockedState,
         [{ type: types.SET_DETAIL_JOB, payload: 'job' }],
-        [{ type: 'setRightPane', payload: 'jobs-detail' }],
+        [{ type: 'rightPane/open', payload: rightSidebarViews.jobsDetail }],
         done,
       );
     });
 
-    it('dispatches setRightPane as pipeline when job is null', done => {
+    it('dispatches rightPane/open as pipeline when job is null', done => {
       testAction(
         setDetailJob,
         null,
         mockedState,
         [{ type: types.SET_DETAIL_JOB, payload: null }],
-        [{ type: 'setRightPane', payload: rightSidebarViews.pipelines }],
+        [{ type: 'rightPane/open', payload: rightSidebarViews.pipelines }],
         done,
       );
     });
 
-    it('dispatches setRightPane as job', done => {
+    it('dispatches rightPane/open as job', done => {
       testAction(
         setDetailJob,
         'job',
         mockedState,
         [{ type: types.SET_DETAIL_JOB, payload: 'job' }],
-        [{ type: 'setRightPane', payload: rightSidebarViews.jobsDetail }],
+        [{ type: 'rightPane/open', payload: rightSidebarViews.jobsDetail }],
         done,
       );
     });