Merge branch 'master' into 42611-removed-branch-link

* master: (1252 commits)
  Render log artifact files in GitLab
  Check disabled_services when finding a service
  Fix invalid parent path on group settings page
  Backport CE changes for: [Frontend only] Batch comments on merge requests
  Add button to insert table in markdown editor
  Update GITALY_SERVER_VERSION
  Updates Laravel.gitlab-ci.yml template
  Update operations metrics empty state
  Fix LFS uploaded images not being rendered
  Prepare admin/projects/show view to allow EE specific feature
  Add timed incremental rollout to Auto DevOps
  Update spec comment to point to correct issue
  Fix documentation for variables
  Document Security and Licence Management features permissions
  Fix time dependent jobs spec
  Use a CTE to remove the query timeout
  Backport changes from gitlab-ee!7538
  Fix CE to EE merge (backport)
  Add changelog entry
  Refactor Feature.flipper method
  ...

23 files changed, 886 insertions, 384 deletions

diff --git a/spec/javascripts/ide/components/changed_file_icon_spec.js b/spec/javascripts/ide/components/changed_file_icon_spec.js
deleted file mode 100644
index 7308219f705..00000000000
--- a/spec/javascripts/ide/components/changed_file_icon_spec.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import Vue from 'vue';
-import changedFileIcon from '~/ide/components/changed_file_icon.vue';
-import createComponent from 'spec/helpers/vue_mount_component_helper';
-
-describe('IDE changed file icon', () => {
-  let vm;
-
-  beforeEach(() => {
-    const component = Vue.extend(changedFileIcon);
-
-    vm = createComponent(component, {
-      file: {
-        tempFile: false,
-        changed: true,
-      },
-    });
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  describe('changedIcon', () => {
-    it('equals file-modified when not a temp file and has changes', () => {
-      expect(vm.changedIcon).toBe('file-modified');
-    });
-
-    it('equals file-addition when a temp file', () => {
-      vm.file.tempFile = true;
-
-      expect(vm.changedIcon).toBe('file-addition');
-    });
-  });
-
-  describe('changedIconClass', () => {
-    it('includes ide-file-modified when not a temp file', () => {
-      expect(vm.changedIconClass).toContain('ide-file-modified');
-    });
-
-    it('includes ide-file-addition when a temp file', () => {
-      vm.file.tempFile = true;
-
-      expect(vm.changedIconClass).toContain('ide-file-addition');
-    });
-  });
-});
diff --git a/spec/javascripts/ide/components/commit_sidebar/list_item_spec.js b/spec/javascripts/ide/components/commit_sidebar/list_item_spec.js
index 41d8bfff7e7..bf48d7bfdad 100644
--- a/spec/javascripts/ide/components/commit_sidebar/list_item_spec.js
+++ b/spec/javascripts/ide/components/commit_sidebar/list_item_spec.js
@@ -30,11 +30,7 @@ describe('Multi-file editor commit sidebar list item', () => {
   });
 
   it('renders file path', () => {
-    expect(vm.$el.querySelector('.multi-file-commit-list-path').textContent.trim()).toBe(f.path);
-  });
-
-  it('renders actionn button', () => {
-    expect(vm.$el.querySelector('.multi-file-discard-btn')).not.toBeNull();
+    expect(vm.$el.querySelector('.multi-file-commit-list-path').textContent).toContain(f.path);
   });
 
   it('opens a closed file in the editor when clicking the file path', done => {
diff --git a/spec/javascripts/ide/components/commit_sidebar/stage_button_spec.js b/spec/javascripts/ide/components/commit_sidebar/stage_button_spec.js
index a5b906da8a1..e09ccbe2a63 100644
--- a/spec/javascripts/ide/components/commit_sidebar/stage_button_spec.js
+++ b/spec/javascripts/ide/components/commit_sidebar/stage_button_spec.js
@@ -29,7 +29,7 @@ describe('IDE stage file button', () => {
   });
 
   it('renders button to discard & stage', () => {
-    expect(vm.$el.querySelectorAll('.btn').length).toBe(2);
+    expect(vm.$el.querySelectorAll('.btn-blank').length).toBe(2);
   });
 
   it('calls store with stage button', () => {
@@ -39,7 +39,7 @@ describe('IDE stage file button', () => {
   });
 
   it('calls store with discard button', () => {
-    vm.$el.querySelector('.dropdown-menu button').click();
+    vm.$el.querySelector('.btn-danger').click();
 
     expect(vm.discardFileChanges).toHaveBeenCalledWith(f.path);
   });
diff --git a/spec/javascripts/ide/components/file_row_extra_spec.js b/spec/javascripts/ide/components/file_row_extra_spec.js
new file mode 100644
index 00000000000..c93a939ad71
--- /dev/null
+++ b/spec/javascripts/ide/components/file_row_extra_spec.js
@@ -0,0 +1,159 @@
+import Vue from 'vue';
+import { createStore } from '~/ide/stores';
+import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import FileRowExtra from '~/ide/components/file_row_extra.vue';
+import { file, resetStore } from '../helpers';
+
+describe('IDE extra file row component', () => {
+  let Component;
+  let vm;
+  let unstagedFilesCount = 0;
+  let stagedFilesCount = 0;
+  let changesCount = 0;
+
+  beforeAll(() => {
+    Component = Vue.extend(FileRowExtra);
+  });
+
+  beforeEach(() => {
+    vm = createComponentWithStore(Component, createStore(), {
+      file: {
+        ...file('test'),
+      },
+      mouseOver: false,
+    });
+
+    spyOnProperty(vm, 'getUnstagedFilesCountForPath').and.returnValue(() => unstagedFilesCount);
+    spyOnProperty(vm, 'getStagedFilesCountForPath').and.returnValue(() => stagedFilesCount);
+    spyOnProperty(vm, 'getChangesInFolder').and.returnValue(() => changesCount);
+
+    vm.$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+    resetStore(vm.$store);
+
+    stagedFilesCount = 0;
+    unstagedFilesCount = 0;
+    changesCount = 0;
+  });
+
+  describe('folderChangesTooltip', () => {
+    it('returns undefined when changes count is 0', () => {
+      expect(vm.folderChangesTooltip).toBe(undefined);
+    });
+
+    it('returns unstaged changes text', () => {
+      changesCount = 1;
+      unstagedFilesCount = 1;
+
+      expect(vm.folderChangesTooltip).toBe('1 unstaged change');
+    });
+
+    it('returns staged changes text', () => {
+      changesCount = 1;
+      stagedFilesCount = 1;
+
+      expect(vm.folderChangesTooltip).toBe('1 staged change');
+    });
+
+    it('returns staged and unstaged changes text', () => {
+      changesCount = 1;
+      stagedFilesCount = 1;
+      unstagedFilesCount = 1;
+
+      expect(vm.folderChangesTooltip).toBe('1 unstaged and 1 staged changes');
+    });
+  });
+
+  describe('show tree changes count', () => {
+    it('does not show for blobs', () => {
+      vm.file.type = 'blob';
+
+      expect(vm.$el.querySelector('.ide-tree-changes')).toBe(null);
+    });
+
+    it('does not show when changes count is 0', () => {
+      vm.file.type = 'tree';
+
+      expect(vm.$el.querySelector('.ide-tree-changes')).toBe(null);
+    });
+
+    it('does not show when tree is open', done => {
+      vm.file.type = 'tree';
+      vm.file.opened = true;
+      changesCount = 1;
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.ide-tree-changes')).toBe(null);
+
+        done();
+      });
+    });
+
+    it('shows for trees with changes', done => {
+      vm.file.type = 'tree';
+      vm.file.opened = false;
+      changesCount = 1;
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.ide-tree-changes')).not.toBe(null);
+
+        done();
+      });
+    });
+  });
+
+  describe('changes file icon', () => {
+    it('hides when file is not changed', () => {
+      expect(vm.$el.querySelector('.file-changed-icon')).toBe(null);
+    });
+
+    it('shows when file is changed', done => {
+      vm.file.changed = true;
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.file-changed-icon')).not.toBe(null);
+
+        done();
+      });
+    });
+
+    it('shows when file is staged', done => {
+      vm.file.staged = true;
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.file-changed-icon')).not.toBe(null);
+
+        done();
+      });
+    });
+
+    it('shows when file is a tempFile', done => {
+      vm.file.tempFile = true;
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.file-changed-icon')).not.toBe(null);
+
+        done();
+      });
+    });
+  });
+
+  describe('merge request icon', () => {
+    it('hides when not a merge request change', () => {
+      expect(vm.$el.querySelector('.ic-git-merge')).toBe(null);
+    });
+
+    it('shows when a merge request change', done => {
+      vm.file.mrChange = true;
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.ic-git-merge')).not.toBe(null);
+
+        done();
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/ide/components/file_templates/bar_spec.js b/spec/javascripts/ide/components/file_templates/bar_spec.js
new file mode 100644
index 00000000000..a688f7f69a6
--- /dev/null
+++ b/spec/javascripts/ide/components/file_templates/bar_spec.js
@@ -0,0 +1,117 @@
+import Vue from 'vue';
+import { createStore } from '~/ide/stores';
+import Bar from '~/ide/components/file_templates/bar.vue';
+import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import { resetStore, file } from '../../helpers';
+
+describe('IDE file templates bar component', () => {
+  let Component;
+  let vm;
+
+  beforeAll(() => {
+    Component = Vue.extend(Bar);
+  });
+
+  beforeEach(() => {
+    const store = createStore();
+
+    store.state.openFiles.push({
+      ...file('file'),
+      opened: true,
+      active: true,
+    });
+
+    vm = mountComponentWithStore(Component, { store });
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+    resetStore(vm.$store);
+  });
+
+  describe('template type dropdown', () => {
+    it('renders dropdown component', () => {
+      expect(vm.$el.querySelector('.dropdown').textContent).toContain('Choose a type');
+    });
+
+    it('calls setSelectedTemplateType when clicking item', () => {
+      spyOn(vm, 'setSelectedTemplateType').and.stub();
+
+      vm.$el.querySelector('.dropdown-content button').click();
+
+      expect(vm.setSelectedTemplateType).toHaveBeenCalledWith({
+        name: '.gitlab-ci.yml',
+        key: 'gitlab_ci_ymls',
+      });
+    });
+  });
+
+  describe('template dropdown', () => {
+    beforeEach(done => {
+      vm.$store.state.fileTemplates.templates = [
+        {
+          name: 'test',
+        },
+      ];
+      vm.$store.state.fileTemplates.selectedTemplateType = {
+        name: '.gitlab-ci.yml',
+        key: 'gitlab_ci_ymls',
+      };
+
+      vm.$nextTick(done);
+    });
+
+    it('renders dropdown component', () => {
+      expect(vm.$el.querySelectorAll('.dropdown')[1].textContent).toContain('Choose a template');
+    });
+
+    it('calls fetchTemplate on click', () => {
+      spyOn(vm, 'fetchTemplate').and.stub();
+
+      vm.$el
+        .querySelectorAll('.dropdown-content')[1]
+        .querySelector('button')
+        .click();
+
+      expect(vm.fetchTemplate).toHaveBeenCalledWith({
+        name: 'test',
+      });
+    });
+  });
+
+  it('shows undo button if updateSuccess is true', done => {
+    vm.$store.state.fileTemplates.updateSuccess = true;
+
+    vm.$nextTick(() => {
+      expect(vm.$el.querySelector('.btn-default').style.display).not.toBe('none');
+
+      done();
+    });
+  });
+
+  it('calls undoFileTemplate when clicking undo button', () => {
+    spyOn(vm, 'undoFileTemplate').and.stub();
+
+    vm.$el.querySelector('.btn-default').click();
+
+    expect(vm.undoFileTemplate).toHaveBeenCalled();
+  });
+
+  it('calls setSelectedTemplateType if activeFile name matches a template', done => {
+    const fileName = '.gitlab-ci.yml';
+
+    spyOn(vm, 'setSelectedTemplateType');
+    vm.$store.state.openFiles[0].name = fileName;
+
+    vm.setInitialType();
+
+    vm.$nextTick(() => {
+      expect(vm.setSelectedTemplateType).toHaveBeenCalledWith({
+        name: fileName,
+        key: 'gitlab_ci_ymls',
+      });
+
+      done();
+    });
+  });
+});
diff --git a/spec/javascripts/ide/components/file_templates/dropdown_spec.js b/spec/javascripts/ide/components/file_templates/dropdown_spec.js
new file mode 100644
index 00000000000..898796f4fa0
--- /dev/null
+++ b/spec/javascripts/ide/components/file_templates/dropdown_spec.js
@@ -0,0 +1,201 @@
+import $ from 'jquery';
+import Vue from 'vue';
+import { createStore } from '~/ide/stores';
+import Dropdown from '~/ide/components/file_templates/dropdown.vue';
+import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import { resetStore } from '../../helpers';
+
+describe('IDE file templates dropdown component', () => {
+  let Component;
+  let vm;
+
+  beforeAll(() => {
+    Component = Vue.extend(Dropdown);
+  });
+
+  beforeEach(() => {
+    const store = createStore();
+
+    vm = createComponentWithStore(Component, store, {
+      label: 'Test',
+    }).$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+    resetStore(vm.$store);
+  });
+
+  describe('async', () => {
+    beforeEach(() => {
+      vm.isAsyncData = true;
+    });
+
+    it('calls async store method on Bootstrap dropdown event', () => {
+      spyOn(vm, 'fetchTemplateTypes').and.stub();
+
+      $(vm.$el).trigger('show.bs.dropdown');
+
+      expect(vm.fetchTemplateTypes).toHaveBeenCalled();
+    });
+
+    it('renders templates when async', done => {
+      vm.$store.state.fileTemplates.templates = [
+        {
+          name: 'test',
+        },
+      ];
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.dropdown-content').textContent).toContain('test');
+
+        done();
+      });
+    });
+
+    it('renders loading icon when isLoading is true', done => {
+      vm.$store.state.fileTemplates.isLoading = true;
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.loading-container')).not.toBe(null);
+
+        done();
+      });
+    });
+
+    it('searches template data', () => {
+      vm.$store.state.fileTemplates.templates = [
+        {
+          name: 'test',
+        },
+      ];
+      vm.searchable = true;
+      vm.search = 'hello';
+
+      expect(vm.outputData).toEqual([]);
+    });
+
+    it('does not filter data is searchable is false', () => {
+      vm.$store.state.fileTemplates.templates = [
+        {
+          name: 'test',
+        },
+      ];
+      vm.search = 'hello';
+
+      expect(vm.outputData).toEqual([
+        {
+          name: 'test',
+        },
+      ]);
+    });
+
+    it('calls clickItem on click', done => {
+      spyOn(vm, 'clickItem').and.stub();
+
+      vm.$store.state.fileTemplates.templates = [
+        {
+          name: 'test',
+        },
+      ];
+
+      vm.$nextTick(() => {
+        vm.$el.querySelector('.dropdown-content button').click();
+
+        expect(vm.clickItem).toHaveBeenCalledWith({
+          name: 'test',
+        });
+
+        done();
+      });
+    });
+
+    it('renders input when searchable is true', done => {
+      vm.searchable = true;
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.dropdown-input')).not.toBe(null);
+
+        done();
+      });
+    });
+
+    it('does not render input when searchable is true & showLoading is true', done => {
+      vm.searchable = true;
+      vm.$store.state.fileTemplates.isLoading = true;
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.dropdown-input')).toBe(null);
+
+        done();
+      });
+    });
+  });
+
+  describe('sync', () => {
+    beforeEach(done => {
+      vm.data = [
+        {
+          name: 'test sync',
+        },
+      ];
+
+      vm.$nextTick(done);
+    });
+
+    it('renders props data', () => {
+      expect(vm.$el.querySelector('.dropdown-content').textContent).toContain('test sync');
+    });
+
+    it('renders input when searchable is true', done => {
+      vm.searchable = true;
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.dropdown-input')).not.toBe(null);
+
+        done();
+      });
+    });
+
+    it('calls clickItem on click', done => {
+      spyOn(vm, 'clickItem').and.stub();
+
+      vm.$nextTick(() => {
+        vm.$el.querySelector('.dropdown-content button').click();
+
+        expect(vm.clickItem).toHaveBeenCalledWith({
+          name: 'test sync',
+        });
+
+        done();
+      });
+    });
+
+    it('searches template data', () => {
+      vm.searchable = true;
+      vm.search = 'hello';
+
+      expect(vm.outputData).toEqual([]);
+    });
+
+    it('does not filter data is searchable is false', () => {
+      vm.search = 'hello';
+
+      expect(vm.outputData).toEqual([
+        {
+          name: 'test sync',
+        },
+      ]);
+    });
+
+    it('renders dropdown title', done => {
+      vm.title = 'Test title';
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.dropdown-title').textContent).toContain('Test title');
+
+        done();
+      });
+    });
+  });
+});
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_commit_section_spec.js b/spec/javascripts/ide/components/repo_commit_section_spec.js
index 30cd92b2ca4..6c726c1e154 100644
--- a/spec/javascripts/ide/components/repo_commit_section_spec.js
+++ b/spec/javascripts/ide/components/repo_commit_section_spec.js
@@ -103,65 +103,6 @@ describe('RepoCommitSection', () => {
     });
   });
 
-  it('adds changed files into staged files', done => {
-    vm.$el.querySelector('.multi-file-discard-btn .btn').click();
-    vm
-      .$nextTick()
-      .then(() => vm.$el.querySelector('.multi-file-discard-btn .btn').click())
-      .then(vm.$nextTick)
-      .then(() => {
-        expect(vm.$el.querySelector('.ide-commit-list-container').textContent).toContain(
-          'No changes',
-        );
-      })
-      .then(done)
-      .catch(done.fail);
-  });
-
-  it('stages a single file', done => {
-    vm.$el.querySelector('.multi-file-discard-btn .btn').click();
-
-    Vue.nextTick(() => {
-      expect(
-        vm.$el
-          .querySelector('.ide-commit-list-container')
-          .querySelectorAll('.multi-file-commit-list > li').length,
-      ).toBe(1);
-
-      done();
-    });
-  });
-
-  it('discards a single file', done => {
-    vm.$el.querySelector('.multi-file-discard-btn .dropdown-menu button').click();
-
-    Vue.nextTick(() => {
-      expect(vm.$el.querySelector('.ide-commit-list-container').textContent).not.toContain('file1');
-      expect(
-        vm.$el
-          .querySelector('.ide-commit-list-container')
-          .querySelectorAll('.multi-file-commit-list > li').length,
-      ).toBe(1);
-
-      done();
-    });
-  });
-
-  it('unstages a single file', done => {
-    vm.$el
-      .querySelectorAll('.multi-file-discard-btn')[2]
-      .querySelector('.btn')
-      .click();
-
-    Vue.nextTick(() => {
-      expect(
-        vm.$el.querySelectorAll('.ide-commit-list-container')[1].querySelectorAll('li').length,
-      ).toBe(1);
-
-      done();
-    });
-  });
-
   describe('mounted', () => {
     it('opens last opened file', () => {
       expect(store.state.openFiles.length).toBe(1);
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/components/repo_file_spec.js b/spec/javascripts/ide/components/repo_file_spec.js
deleted file mode 100644
index fc639a672e2..00000000000
--- a/spec/javascripts/ide/components/repo_file_spec.js
+++ /dev/null
@@ -1,145 +0,0 @@
-import Vue from 'vue';
-import store from '~/ide/stores';
-import repoFile from '~/ide/components/repo_file.vue';
-import router from '~/ide/ide_router';
-import { createComponentWithStore } from '../../helpers/vue_mount_component_helper';
-import { file } from '../helpers';
-
-describe('RepoFile', () => {
-  let vm;
-
-  function createComponent(propsData) {
-    const RepoFile = Vue.extend(repoFile);
-
-    vm = createComponentWithStore(RepoFile, store, propsData);
-
-    vm.$mount();
-  }
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  it('renders link, icon and name', () => {
-    createComponent({
-      file: file('t4'),
-      level: 0,
-    });
-
-    const name = vm.$el.querySelector('.ide-file-name');
-
-    expect(name.href).toMatch('');
-    expect(name.textContent.trim()).toEqual(vm.file.name);
-  });
-
-  it('fires clickFile when the link is clicked', done => {
-    spyOn(router, 'push');
-    createComponent({
-      file: file('t3'),
-      level: 0,
-    });
-
-    vm.$el.querySelector('.file-name').click();
-
-    setTimeout(() => {
-      expect(router.push).toHaveBeenCalledWith(`/project${vm.file.url}`);
-
-      done();
-    });
-  });
-
-  describe('folder', () => {
-    it('renders changes count inside folder', () => {
-      const f = {
-        ...file('folder'),
-        path: 'testing',
-        type: 'tree',
-        branchId: 'master',
-        projectId: 'project',
-      };
-
-      store.state.changedFiles.push({
-        ...file('fileName'),
-        path: 'testing/fileName',
-      });
-
-      createComponent({
-        file: f,
-        level: 0,
-      });
-
-      const treeChangesEl = vm.$el.querySelector('.ide-tree-changes');
-
-      expect(treeChangesEl).not.toBeNull();
-      expect(treeChangesEl.textContent).toContain('1');
-    });
-
-    it('renders action dropdown', done => {
-      createComponent({
-        file: {
-          ...file('t4'),
-          type: 'tree',
-          branchId: 'master',
-          projectId: 'project',
-        },
-        level: 0,
-      });
-
-      setTimeout(() => {
-        expect(vm.$el.querySelector('.ide-new-btn')).not.toBeNull();
-
-        done();
-      });
-    });
-  });
-
-  describe('locked file', () => {
-    let f;
-
-    beforeEach(() => {
-      f = file('locked file');
-      f.file_lock = {
-        user: {
-          name: 'testuser',
-          updated_at: new Date(),
-        },
-      };
-
-      createComponent({
-        file: f,
-        level: 0,
-      });
-    });
-
-    it('renders lock icon', () => {
-      expect(vm.$el.querySelector('.file-status-icon')).not.toBeNull();
-    });
-
-    it('renders a tooltip', () => {
-      expect(
-        vm.$el.querySelector('.ide-file-name span:nth-child(2)').dataset.originalTitle,
-      ).toContain('Locked by testuser');
-    });
-  });
-
-  it('calls scrollIntoView if made active', done => {
-    createComponent({
-      file: {
-        ...file(),
-        type: 'blob',
-        active: false,
-      },
-      level: 0,
-    });
-
-    spyOn(vm, 'scrollIntoView');
-
-    vm.file.active = true;
-
-    vm.$nextTick(() => {
-      expect(vm.scrollIntoView).toHaveBeenCalled();
-
-      done();
-    });
-  });
-});
diff --git a/spec/javascripts/ide/components/repo_loading_file_spec.js b/spec/javascripts/ide/components/repo_loading_file_spec.js
deleted file mode 100644
index 7c20b8302f9..00000000000
--- a/spec/javascripts/ide/components/repo_loading_file_spec.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import Vue from 'vue';
-import store from '~/ide/stores';
-import repoLoadingFile from '~/ide/components/repo_loading_file.vue';
-import { resetStore } from '../helpers';
-
-describe('RepoLoadingFile', () => {
-  let vm;
-
-  function createComponent() {
-    const RepoLoadingFile = Vue.extend(repoLoadingFile);
-
-    return new RepoLoadingFile({
-      store,
-    }).$mount();
-  }
-
-  function assertLines(lines) {
-    lines.forEach((line, n) => {
-      const index = n + 1;
-      expect(line.classList.contains(`skeleton-line-${index}`)).toBeTruthy();
-    });
-  }
-
-  function assertColumns(columns) {
-    columns.forEach(column => {
-      const container = column.querySelector('.animation-container');
-      const lines = [...container.querySelectorAll(':scope > div')];
-
-      expect(container).toBeTruthy();
-      expect(lines.length).toEqual(3);
-      assertLines(lines);
-    });
-  }
-
-  afterEach(() => {
-    vm.$destroy();
-
-    resetStore(vm.$store);
-  });
-
-  it('renders 3 columns of animated LoC', () => {
-    vm = createComponent();
-    const columns = [...vm.$el.querySelectorAll('td')];
-
-    expect(columns.length).toEqual(3);
-    assertColumns(columns);
-  });
-
-  it('renders 1 column of animated LoC if isMini', done => {
-    vm = createComponent();
-    vm.$store.state.leftPanelCollapsed = true;
-    vm.$store.state.openFiles.push('test');
-
-    vm.$nextTick(() => {
-      const columns = [...vm.$el.querySelectorAll('td')];
-
-      expect(columns.length).toEqual(1);
-      assertColumns(columns);
-
-      done();
-    });
-  });
-});
diff --git a/spec/javascripts/ide/components/repo_tab_spec.js b/spec/javascripts/ide/components/repo_tab_spec.js
index 278a0753322..3b52f279bf2 100644
--- a/spec/javascripts/ide/components/repo_tab_spec.js
+++ b/spec/javascripts/ide/components/repo_tab_spec.js
@@ -93,13 +93,13 @@ describe('RepoTab', () => {
 
     Vue.nextTick()
       .then(() => {
-        expect(vm.$el.querySelector('.ide-file-modified')).toBeNull();
+        expect(vm.$el.querySelector('.file-modified')).toBeNull();
 
         vm.$el.dispatchEvent(new Event('mouseout'));
       })
       .then(Vue.nextTick)
       .then(() => {
-        expect(vm.$el.querySelector('.ide-file-modified')).not.toBeNull();
+        expect(vm.$el.querySelector('.file-modified')).not.toBeNull();
 
         done();
       })
diff --git a/spec/javascripts/ide/helpers.js b/spec/javascripts/ide/helpers.js
index c11c482fef8..7e107747346 100644
--- a/spec/javascripts/ide/helpers.js
+++ b/spec/javascripts/ide/helpers.js
@@ -5,6 +5,8 @@ import commitState from '~/ide/stores/modules/commit/state';
 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 = {
@@ -13,6 +15,8 @@ export const resetStore = store => {
     mergeRequests: mergeRequestsState(),
     pipelines: pipelinesState(),
     branches: branchesState(),
+    fileTemplates: fileTemplatesState(),
+    rightPane: paneState(),
   };
   store.replaceState(newState);
 };
diff --git a/spec/javascripts/ide/stores/actions/file_spec.js b/spec/javascripts/ide/stores/actions/file_spec.js
index bca2033ff97..1ca811e996b 100644
--- a/spec/javascripts/ide/stores/actions/file_spec.js
+++ b/spec/javascripts/ide/stores/actions/file_spec.js
@@ -692,21 +692,6 @@ describe('IDE store file actions', () => {
         .then(done)
         .catch(done.fail);
     });
-
-    it('calls scrollToTab', done => {
-      const scrollToTabSpy = jasmine.createSpy('scrollToTab');
-      const oldScrollToTab = store._actions.scrollToTab; // eslint-disable-line
-      store._actions.scrollToTab = [scrollToTabSpy]; // eslint-disable-line
-
-      store
-        .dispatch('openPendingTab', { file: f, keyPrefix: 'pending' })
-        .then(() => {
-          expect(scrollToTabSpy).toHaveBeenCalled();
-          store._actions.scrollToTab = oldScrollToTab; // eslint-disable-line
-        })
-        .then(done)
-        .catch(done.fail);
-    });
   });
 
   describe('removePendingTab', () => {
diff --git a/spec/javascripts/ide/stores/actions_spec.js b/spec/javascripts/ide/stores/actions_spec.js
index d84f1717a61..c9a1158a14e 100644
--- a/spec/javascripts/ide/stores/actions_spec.js
+++ b/spec/javascripts/ide/stores/actions_spec.js
@@ -305,7 +305,11 @@ describe('Multi-file store actions', () => {
 
   describe('stageAllChanges', () => {
     it('adds all files from changedFiles to stagedFiles', done => {
-      store.state.changedFiles.push(file(), file('new'));
+      const openFile = { ...file(), path: 'test' };
+
+      store.state.openFiles.push(openFile);
+      store.state.stagedFiles.push(openFile);
+      store.state.changedFiles.push(openFile, file('new'));
 
       testAction(
         stageAllChanges,
@@ -316,7 +320,12 @@ describe('Multi-file store actions', () => {
           { type: types.STAGE_CHANGE, payload: store.state.changedFiles[0].path },
           { type: types.STAGE_CHANGE, payload: store.state.changedFiles[1].path },
         ],
-        [],
+        [
+          {
+            type: 'openPendingTab',
+            payload: { file: openFile, keyPrefix: 'staged' },
+          },
+        ],
         done,
       );
     });
@@ -324,7 +333,11 @@ describe('Multi-file store actions', () => {
 
   describe('unstageAllChanges', () => {
     it('removes all files from stagedFiles after unstaging', done => {
-      store.state.stagedFiles.push(file(), file('new'));
+      const openFile = { ...file(), path: 'test' };
+
+      store.state.openFiles.push(openFile);
+      store.state.changedFiles.push(openFile);
+      store.state.stagedFiles.push(openFile, file('new'));
 
       testAction(
         unstageAllChanges,
@@ -334,7 +347,12 @@ describe('Multi-file store actions', () => {
           { type: types.UNSTAGE_CHANGE, payload: store.state.stagedFiles[0].path },
           { type: types.UNSTAGE_CHANGE, payload: store.state.stagedFiles[1].path },
         ],
-        [],
+        [
+          {
+            type: 'openPendingTab',
+            payload: { file: openFile, keyPrefix: 'unstaged' },
+          },
+        ],
         done,
       );
     });
diff --git a/spec/javascripts/ide/stores/modules/file_templates/actions_spec.js b/spec/javascripts/ide/stores/modules/file_templates/actions_spec.js
index f831a9f0a5d..734233100ab 100644
--- a/spec/javascripts/ide/stores/modules/file_templates/actions_spec.js
+++ b/spec/javascripts/ide/stores/modules/file_templates/actions_spec.js
@@ -69,11 +69,17 @@ describe('IDE file templates actions', () => {
 
   describe('fetchTemplateTypes', () => {
     describe('success', () => {
+      let nextPage;
+
       beforeEach(() => {
-        mock.onGet(/api\/(.*)\/templates\/licenses/).replyOnce(200, [
-          {
-            name: 'MIT',
-          },
+        mock.onGet(/api\/(.*)\/templates\/licenses/).replyOnce(() => [
+          200,
+          [
+            {
+              name: 'MIT',
+            },
+          ],
+          { 'X-NEXT-PAGE': nextPage },
         ]);
       });
 
@@ -116,6 +122,38 @@ describe('IDE file templates actions', () => {
           done,
         );
       });
+
+      it('dispatches actions for next page', done => {
+        nextPage = '2';
+        state.selectedTemplateType = {
+          key: 'licenses',
+        };
+
+        testAction(
+          actions.fetchTemplateTypes,
+          null,
+          state,
+          [],
+          [
+            {
+              type: 'requestTemplateTypes',
+            },
+            {
+              type: 'receiveTemplateTypesSuccess',
+              payload: [
+                {
+                  name: 'MIT',
+                },
+              ],
+            },
+            {
+              type: 'fetchTemplateTypes',
+              payload: 2,
+            },
+          ],
+          done,
+        );
+      });
     });
 
     describe('error', () => {
@@ -148,14 +186,66 @@ describe('IDE file templates actions', () => {
   });
 
   describe('setSelectedTemplateType', () => {
-    it('commits SET_SELECTED_TEMPLATE_TYPE', done => {
-      testAction(
-        actions.setSelectedTemplateType,
-        'test',
-        state,
-        [{ type: types.SET_SELECTED_TEMPLATE_TYPE, payload: 'test' }],
-        [],
-        done,
+    it('commits SET_SELECTED_TEMPLATE_TYPE', () => {
+      const commit = jasmine.createSpy('commit');
+      const options = {
+        commit,
+        dispatch() {},
+        rootGetters: {
+          activeFile: {
+            name: 'test',
+            prevPath: '',
+          },
+        },
+      };
+
+      actions.setSelectedTemplateType(options, { name: 'test' });
+
+      expect(commit).toHaveBeenCalledWith(types.SET_SELECTED_TEMPLATE_TYPE, { name: 'test' });
+    });
+
+    it('dispatches discardFileChanges if prevPath matches templates name', () => {
+      const dispatch = jasmine.createSpy('dispatch');
+      const options = {
+        commit() {},
+        dispatch,
+        rootGetters: {
+          activeFile: {
+            name: 'test',
+            path: 'test',
+            prevPath: 'test',
+          },
+        },
+      };
+
+      actions.setSelectedTemplateType(options, { name: 'test' });
+
+      expect(dispatch).toHaveBeenCalledWith('discardFileChanges', 'test', { root: true });
+    });
+
+    it('dispatches renameEntry if file name doesnt match', () => {
+      const dispatch = jasmine.createSpy('dispatch');
+      const options = {
+        commit() {},
+        dispatch,
+        rootGetters: {
+          activeFile: {
+            name: 'oldtest',
+            path: 'oldtest',
+            prevPath: '',
+          },
+        },
+      };
+
+      actions.setSelectedTemplateType(options, { name: 'test' });
+
+      expect(dispatch).toHaveBeenCalledWith(
+        'renameEntry',
+        {
+          path: 'oldtest',
+          name: 'test',
+        },
+        { root: true },
       );
     });
   });
@@ -332,5 +422,20 @@ describe('IDE file templates actions', () => {
 
       expect(commit).toHaveBeenCalledWith('SET_UPDATE_SUCCESS', false);
     });
+
+    it('dispatches discardFileChanges if file has prevPath', () => {
+      const dispatch = jasmine.createSpy('dispatch');
+      const rootGetters = {
+        activeFile: { path: 'test', prevPath: 'newtest', raw: 'raw content' },
+      };
+
+      actions.undoFileTemplate({ dispatch, commit() {}, rootGetters });
+
+      expect(dispatch.calls.mostRecent().args).toEqual([
+        'discardFileChanges',
+        'test',
+        { root: true },
+      ]);
+    });
   });
 });
diff --git a/spec/javascripts/ide/stores/modules/file_templates/getters_spec.js b/spec/javascripts/ide/stores/modules/file_templates/getters_spec.js
index e337c3f331b..17cb457881f 100644
--- a/spec/javascripts/ide/stores/modules/file_templates/getters_spec.js
+++ b/spec/javascripts/ide/stores/modules/file_templates/getters_spec.js
@@ -1,3 +1,5 @@
+import createState from '~/ide/stores/state';
+import { activityBarViews } from '~/ide/constants';
 import * as getters from '~/ide/stores/modules/file_templates/getters';
 
 describe('IDE file templates getters', () => {
@@ -8,22 +10,49 @@ describe('IDE file templates getters', () => {
   });
 
   describe('showFileTemplatesBar', () => {
-    it('finds template type by name', () => {
+    let rootState;
+
+    beforeEach(() => {
+      rootState = createState();
+    });
+
+    it('returns true if template is found and currentActivityView is edit', () => {
+      rootState.currentActivityView = activityBarViews.edit;
+
+      expect(
+        getters.showFileTemplatesBar(
+          null,
+          {
+            templateTypes: getters.templateTypes(),
+          },
+          rootState,
+        )('LICENSE'),
+      ).toBe(true);
+    });
+
+    it('returns false if template is found and currentActivityView is not edit', () => {
+      rootState.currentActivityView = activityBarViews.commit;
+
       expect(
-        getters.showFileTemplatesBar(null, {
-          templateTypes: getters.templateTypes(),
-        })('LICENSE'),
-      ).toEqual({
-        name: 'LICENSE',
-        key: 'licenses',
-      });
+        getters.showFileTemplatesBar(
+          null,
+          {
+            templateTypes: getters.templateTypes(),
+          },
+          rootState,
+        )('LICENSE'),
+      ).toBe(false);
     });
 
     it('returns undefined if not found', () => {
       expect(
-        getters.showFileTemplatesBar(null, {
-          templateTypes: getters.templateTypes(),
-        })('test'),
+        getters.showFileTemplatesBar(
+          null,
+          {
+            templateTypes: getters.templateTypes(),
+          },
+          rootState,
+        )('test'),
       ).toBe(undefined);
     });
   });
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,
       );
     });
diff --git a/spec/javascripts/ide/stores/mutations_spec.js b/spec/javascripts/ide/stores/mutations_spec.js
index 6ce76aaa03b..41dd3d3c67f 100644
--- a/spec/javascripts/ide/stores/mutations_spec.js
+++ b/spec/javascripts/ide/stores/mutations_spec.js
@@ -339,5 +339,13 @@ describe('Multi-file store mutations', () => {
 
       expect(localState.entries.parentPath.tree.length).toBe(1);
     });
+
+    it('adds to openFiles if previously opened', () => {
+      localState.entries.oldPath.opened = true;
+
+      mutations.RENAME_ENTRY(localState, { path: 'oldPath', name: 'newPath' });
+
+      expect(localState.openFiles).toEqual([localState.entries.newPath]);
+    });
   });
 });