Merge branch 'master-ce' into scheduled-manual-jobs

28 files changed, 2125 insertions, 486 deletions

diff --git a/spec/javascripts/boards/board_new_issue_spec.js b/spec/javascripts/boards/board_new_issue_spec.js
index ee37821ad08..1245e3e099a 100644
--- a/spec/javascripts/boards/board_new_issue_spec.js
+++ b/spec/javascripts/boards/board_new_issue_spec.js
@@ -69,7 +69,6 @@ describe('Issue boards new issue form', () => {
         vm.$el.querySelector('.btn-success').click();
 
         expect(vm.submit.calls.count()).toBe(1);
-        expect(vm.$refs['submit-button']).toBe(vm.$el.querySelector('.btn-success'));
       })
       .then(done)
       .catch(done.fail);
diff --git a/spec/javascripts/diffs/components/app_spec.js b/spec/javascripts/diffs/components/app_spec.js
index cf7d8df5405..a3a714678af 100644
--- a/spec/javascripts/diffs/components/app_spec.js
+++ b/spec/javascripts/diffs/components/app_spec.js
@@ -44,7 +44,8 @@ describe('diffs/components/app', () => {
   it('shows comments message, with commit', done => {
     vm.$store.state.diffs.commit = getDiffWithCommit().commit;
 
-    vm.$nextTick()
+    vm
+      .$nextTick()
       .then(() => {
         expect(vm.$el).toContainText('Only comments from the following commit are shown below');
         expect(vm.$el).toContainElement('.blob-commit-info');
@@ -55,10 +56,14 @@ describe('diffs/components/app', () => {
 
   it('shows comments message, with old mergeRequestDiff', done => {
     vm.$store.state.diffs.mergeRequestDiff = { latest: false };
+    vm.$store.state.diffs.targetBranch = 'master';
 
-    vm.$nextTick()
+    vm
+      .$nextTick()
       .then(() => {
-        expect(vm.$el).toContainText("Not all comments are displayed because you're viewing an old version of the diff.");
+        expect(vm.$el).toContainText(
+          "Not all comments are displayed because you're viewing an old version of the diff.",
+        );
       })
       .then(done)
       .catch(done.fail);
@@ -67,9 +72,12 @@ describe('diffs/components/app', () => {
   it('shows comments message, with startVersion', done => {
     vm.$store.state.diffs.startVersion = 'test';
 
-    vm.$nextTick()
+    vm
+      .$nextTick()
       .then(() => {
-        expect(vm.$el).toContainText("Not all comments are displayed because you're comparing two versions of the diff.");
+        expect(vm.$el).toContainText(
+          "Not all comments are displayed because you're comparing two versions of the diff.",
+        );
       })
       .then(done)
       .catch(done.fail);
diff --git a/spec/javascripts/diffs/components/changed_files_spec.js b/spec/javascripts/diffs/components/changed_files_spec.js
deleted file mode 100644
index 7f21273a991..00000000000
--- a/spec/javascripts/diffs/components/changed_files_spec.js
+++ /dev/null
@@ -1,105 +0,0 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
-import { mountComponentWithStore } from 'spec/helpers';
-import diffsModule from '~/diffs/store/modules';
-import changedFiles from '~/diffs/components/changed_files.vue';
-
-describe('ChangedFiles', () => {
-  const Component = Vue.extend(changedFiles);
-  const store = new Vuex.Store({
-    modules: {
-      diffs: diffsModule(),
-    },
-  });
-
-  let vm;
-
-  beforeEach(() => {
-    setFixtures(`
-      <div id="dummy-element"></div>
-      <div class="js-tabs-affix"></div>
-    `);
-
-    const props = {
-      diffFiles: [
-        {
-          addedLines: 10,
-          removedLines: 20,
-          blob: {
-            path: 'some/code.txt',
-          },
-          filePath: 'some/code.txt',
-        },
-      ],
-    };
-
-    vm = mountComponentWithStore(Component, { props, store });
-  });
-
-  describe('with single file added', () => {
-    it('shows files changes', () => {
-      expect(vm.$el).toContainText('1 changed file');
-    });
-
-    it('shows file additions and deletions', () => {
-      expect(vm.$el).toContainText('10 additions');
-      expect(vm.$el).toContainText('20 deletions');
-    });
-  });
-
-  describe('diff view mode buttons', () => {
-    let inlineButton;
-    let parallelButton;
-
-    beforeEach(() => {
-      inlineButton = vm.$el.querySelector('.js-inline-diff-button');
-      parallelButton = vm.$el.querySelector('.js-parallel-diff-button');
-    });
-
-    it('should have Inline and Side-by-side buttons', () => {
-      expect(inlineButton).toBeDefined();
-      expect(parallelButton).toBeDefined();
-    });
-
-    it('should add active class to Inline button', done => {
-      vm.$store.state.diffs.diffViewType = 'inline';
-
-      vm.$nextTick(() => {
-        expect(inlineButton.classList.contains('active')).toEqual(true);
-        expect(parallelButton.classList.contains('active')).toEqual(false);
-
-        done();
-      });
-    });
-
-    it('should toggle active state of buttons when diff view type changed', done => {
-      vm.$store.state.diffs.diffViewType = 'parallel';
-
-      vm.$nextTick(() => {
-        expect(inlineButton.classList.contains('active')).toEqual(false);
-        expect(parallelButton.classList.contains('active')).toEqual(true);
-
-        done();
-      });
-    });
-
-    describe('clicking them', () => {
-      it('should toggle the diff view type', done => {
-        parallelButton.click();
-
-        vm.$nextTick(() => {
-          expect(inlineButton.classList.contains('active')).toEqual(false);
-          expect(parallelButton.classList.contains('active')).toEqual(true);
-
-          inlineButton.click();
-
-          vm.$nextTick(() => {
-            expect(inlineButton.classList.contains('active')).toEqual(true);
-            expect(parallelButton.classList.contains('active')).toEqual(false);
-            done();
-          });
-        });
-      });
-    });
-  });
-});
diff --git a/spec/javascripts/diffs/components/file_row_stats_spec.js b/spec/javascripts/diffs/components/file_row_stats_spec.js
new file mode 100644
index 00000000000..a8a7f3f1d82
--- /dev/null
+++ b/spec/javascripts/diffs/components/file_row_stats_spec.js
@@ -0,0 +1,33 @@
+import Vue from 'vue';
+import FileRowStats from '~/diffs/components/file_row_stats.vue';
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
+
+describe('Diff file row stats', () => {
+  let Component;
+  let vm;
+
+  beforeAll(() => {
+    Component = Vue.extend(FileRowStats);
+  });
+
+  beforeEach(() => {
+    vm = mountComponent(Component, {
+      file: {
+        addedLines: 20,
+        removedLines: 10,
+      },
+    });
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders added lines count', () => {
+    expect(vm.$el.querySelector('.cgreen').textContent).toContain('+20');
+  });
+
+  it('renders removed lines count', () => {
+    expect(vm.$el.querySelector('.cred').textContent).toContain('-10');
+  });
+});
diff --git a/spec/javascripts/diffs/components/tree_list_spec.js b/spec/javascripts/diffs/components/tree_list_spec.js
new file mode 100644
index 00000000000..08e25d2004e
--- /dev/null
+++ b/spec/javascripts/diffs/components/tree_list_spec.js
@@ -0,0 +1,120 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import TreeList from '~/diffs/components/tree_list.vue';
+import createStore from '~/diffs/store/modules';
+import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+
+describe('Diffs tree list component', () => {
+  let Component;
+  let vm;
+
+  beforeAll(() => {
+    Component = Vue.extend(TreeList);
+  });
+
+  beforeEach(() => {
+    Vue.use(Vuex);
+
+    const store = new Vuex.Store({
+      modules: {
+        diffs: createStore(),
+      },
+    });
+
+    // Setup initial state
+    store.state.diffs.addedLines = 10;
+    store.state.diffs.removedLines = 20;
+    store.state.diffs.diffFiles.push('test');
+
+    vm = mountComponentWithStore(Component, { store });
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders diff stats', () => {
+    expect(vm.$el.textContent).toContain('1 changed file');
+    expect(vm.$el.textContent).toContain('10 additions');
+    expect(vm.$el.textContent).toContain('20 deletions');
+  });
+
+  it('renders empty text', () => {
+    expect(vm.$el.textContent).toContain('No files found');
+  });
+
+  describe('with files', () => {
+    beforeEach(done => {
+      Object.assign(vm.$store.state.diffs.treeEntries, {
+        'index.js': {
+          addedLines: 0,
+          changed: true,
+          deleted: false,
+          fileHash: 'test',
+          key: 'index.js',
+          name: 'index.js',
+          path: 'index.js',
+          removedLines: 0,
+          tempFile: true,
+          type: 'blob',
+        },
+        app: {
+          key: 'app',
+          path: 'app',
+          name: 'app',
+          type: 'tree',
+          tree: [],
+        },
+      });
+      vm.$store.state.diffs.tree = [
+        vm.$store.state.diffs.treeEntries['index.js'],
+        vm.$store.state.diffs.treeEntries.app,
+      ];
+
+      vm.$nextTick(done);
+    });
+
+    it('renders tree', () => {
+      expect(vm.$el.querySelectorAll('.file-row').length).toBe(2);
+      expect(vm.$el.querySelectorAll('.file-row')[0].textContent).toContain('index.js');
+      expect(vm.$el.querySelectorAll('.file-row')[1].textContent).toContain('app');
+    });
+
+    it('filters tree list to blobs matching search', done => {
+      vm.search = 'index';
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelectorAll('.file-row').length).toBe(1);
+        expect(vm.$el.querySelectorAll('.file-row')[0].textContent).toContain('index.js');
+
+        done();
+      });
+    });
+
+    it('calls toggleTreeOpen when clicking folder', () => {
+      spyOn(vm.$store, 'dispatch').and.stub();
+
+      vm.$el.querySelectorAll('.file-row')[1].click();
+
+      expect(vm.$store.dispatch).toHaveBeenCalledWith('diffs/toggleTreeOpen', 'app');
+    });
+
+    it('calls scrollToFile when clicking blob', () => {
+      spyOn(vm.$store, 'dispatch').and.stub();
+
+      vm.$el.querySelector('.file-row').click();
+
+      expect(vm.$store.dispatch).toHaveBeenCalledWith('diffs/scrollToFile', 'index.js');
+    });
+  });
+
+  describe('clearSearch', () => {
+    it('resets search', () => {
+      vm.search = 'test';
+
+      vm.$el.querySelector('.tree-list-clear-icon').click();
+
+      expect(vm.search).toBe('');
+    });
+  });
+});
diff --git a/spec/javascripts/diffs/mock_data/diff_file.js b/spec/javascripts/diffs/mock_data/diff_file.js
index 372b8f066cf..2aa2f8f3528 100644
--- a/spec/javascripts/diffs/mock_data/diff_file.js
+++ b/spec/javascripts/diffs/mock_data/diff_file.js
@@ -33,7 +33,7 @@ export default {
   contentSha: 'c48ee0d1bf3b30453f5b32250ce03134beaa6d13',
   storedExternally: null,
   externalStorage: null,
-  oldPathHtml: ['CHANGELOG', 'CHANGELOG'],
+  oldPathHtml: 'CHANGELOG',
   newPathHtml: 'CHANGELOG',
   editPath: '/gitlab-org/gitlab-test/edit/spooky-stuff/CHANGELOG',
   viewPath: '/gitlab-org/gitlab-test/blob/spooky-stuff/CHANGELOG',
diff --git a/spec/javascripts/diffs/store/actions_spec.js b/spec/javascripts/diffs/store/actions_spec.js
index 05b39bad6ea..aacad7a479b 100644
--- a/spec/javascripts/diffs/store/actions_spec.js
+++ b/spec/javascripts/diffs/store/actions_spec.js
@@ -22,6 +22,9 @@ import actions, {
   expandAllFiles,
   toggleFileDiscussions,
   saveDiffDiscussion,
+  toggleTreeOpen,
+  scrollToFile,
+  toggleShowTreeList,
 } from '~/diffs/store/actions';
 import * as types from '~/diffs/store/mutation_types';
 import { reduceDiscussionsToLineCodes } from '~/notes/stores/utils';
@@ -608,4 +611,88 @@ describe('DiffsStoreActions', () => {
         .catch(done.fail);
     });
   });
+
+  describe('toggleTreeOpen', () => {
+    it('commits TOGGLE_FOLDER_OPEN', done => {
+      testAction(
+        toggleTreeOpen,
+        'path',
+        {},
+        [{ type: types.TOGGLE_FOLDER_OPEN, payload: 'path' }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('scrollToFile', () => {
+    let commit;
+
+    beforeEach(() => {
+      commit = jasmine.createSpy();
+      jasmine.clock().install();
+    });
+
+    afterEach(() => {
+      jasmine.clock().uninstall();
+    });
+
+    it('updates location hash', () => {
+      const state = {
+        treeEntries: {
+          path: {
+            fileHash: 'test',
+          },
+        },
+      };
+
+      scrollToFile({ state, commit }, 'path');
+
+      expect(document.location.hash).toBe('#test');
+    });
+
+    it('commits UPDATE_CURRENT_DIFF_FILE_ID', () => {
+      const state = {
+        treeEntries: {
+          path: {
+            fileHash: 'test',
+          },
+        },
+      };
+
+      scrollToFile({ state, commit }, 'path');
+
+      expect(commit).toHaveBeenCalledWith(types.UPDATE_CURRENT_DIFF_FILE_ID, 'test');
+    });
+
+    it('resets currentDiffId after timeout', () => {
+      const state = {
+        treeEntries: {
+          path: {
+            fileHash: 'test',
+          },
+        },
+      };
+
+      scrollToFile({ state, commit }, 'path');
+
+      jasmine.clock().tick(1000);
+
+      expect(commit.calls.argsFor(1)).toEqual([types.UPDATE_CURRENT_DIFF_FILE_ID, '']);
+    });
+  });
+
+  describe('toggleShowTreeList', () => {
+    it('commits toggle', done => {
+      testAction(toggleShowTreeList, null, {}, [{ type: types.TOGGLE_SHOW_TREE_LIST }], [], done);
+    });
+
+    it('updates localStorage', () => {
+      spyOn(localStorage, 'setItem');
+
+      toggleShowTreeList({ commit() {}, state: { showTreeList: true } });
+
+      expect(localStorage.setItem).toHaveBeenCalledWith('mr_tree_show', true);
+    });
+  });
 });
diff --git a/spec/javascripts/diffs/store/getters_spec.js b/spec/javascripts/diffs/store/getters_spec.js
index 4747e437c4e..cfeaaec6980 100644
--- a/spec/javascripts/diffs/store/getters_spec.js
+++ b/spec/javascripts/diffs/store/getters_spec.js
@@ -291,4 +291,31 @@ describe('Diffs Module Getters', () => {
       expect(getters.getDiffFileByHash(localState)('123')).toBeUndefined();
     });
   });
+
+  describe('allBlobs', () => {
+    it('returns an array of blobs', () => {
+      localState.treeEntries = {
+        file: {
+          type: 'blob',
+        },
+        tree: {
+          type: 'tree',
+        },
+      };
+
+      expect(getters.allBlobs(localState)).toEqual([
+        {
+          type: 'blob',
+        },
+      ]);
+    });
+  });
+
+  describe('diffFilesLength', () => {
+    it('returns length of diff files', () => {
+      localState.diffFiles.push('test', 'test 2');
+
+      expect(getters.diffFilesLength(localState)).toBe(2);
+    });
+  });
 });
diff --git a/spec/javascripts/diffs/store/mutations_spec.js b/spec/javascripts/diffs/store/mutations_spec.js
index 9a5d8dfbd15..cc8d5dc4bac 100644
--- a/spec/javascripts/diffs/store/mutations_spec.js
+++ b/spec/javascripts/diffs/store/mutations_spec.js
@@ -1,3 +1,4 @@
+import createState from '~/diffs/store/modules/diff_state';
 import mutations from '~/diffs/store/mutations';
 import * as types from '~/diffs/store/mutation_types';
 import { INLINE_DIFF_VIEW_TYPE } from '~/diffs/constants';
@@ -356,4 +357,44 @@ describe('DiffsStoreMutations', () => {
       expect(state.diffFiles[0].highlightedDiffLines[0].discussions.length).toEqual(0);
     });
   });
+
+  describe('TOGGLE_FOLDER_OPEN', () => {
+    it('toggles entry opened prop', () => {
+      const state = {
+        treeEntries: {
+          path: {
+            opened: false,
+          },
+        },
+      };
+
+      mutations[types.TOGGLE_FOLDER_OPEN](state, 'path');
+
+      expect(state.treeEntries.path.opened).toBe(true);
+    });
+  });
+
+  describe('TOGGLE_SHOW_TREE_LIST', () => {
+    it('toggles showTreeList', () => {
+      const state = createState();
+
+      mutations[types.TOGGLE_SHOW_TREE_LIST](state);
+
+      expect(state.showTreeList).toBe(false, 'Failed to toggle showTreeList to false');
+
+      mutations[types.TOGGLE_SHOW_TREE_LIST](state);
+
+      expect(state.showTreeList).toBe(true, 'Failed to toggle showTreeList to true');
+    });
+  });
+
+  describe('UPDATE_CURRENT_DIFF_FILE_ID', () => {
+    it('updates currentDiffFileId', () => {
+      const state = createState();
+
+      mutations[types.UPDATE_CURRENT_DIFF_FILE_ID](state, 'somefileid');
+
+      expect(state.currentDiffFileId).toBe('somefileid');
+    });
+  });
 });
diff --git a/spec/javascripts/diffs/store/utils_spec.js b/spec/javascripts/diffs/store/utils_spec.js
index 897cd1483aa..e660f94c72e 100644
--- a/spec/javascripts/diffs/store/utils_spec.js
+++ b/spec/javascripts/diffs/store/utils_spec.js
@@ -421,4 +421,113 @@ describe('DiffsStoreUtils', () => {
       ).toBe(false);
     });
   });
+
+  describe('generateTreeList', () => {
+    let files;
+
+    beforeAll(() => {
+      files = [
+        {
+          newPath: 'app/index.js',
+          deletedFile: false,
+          newFile: false,
+          removedLines: 10,
+          addedLines: 0,
+          fileHash: 'test',
+        },
+        {
+          newPath: 'app/test/index.js',
+          deletedFile: false,
+          newFile: true,
+          removedLines: 0,
+          addedLines: 0,
+          fileHash: 'test',
+        },
+        {
+          newPath: 'package.json',
+          deletedFile: true,
+          newFile: false,
+          removedLines: 0,
+          addedLines: 0,
+          fileHash: 'test',
+        },
+      ];
+    });
+
+    it('creates a tree of files', () => {
+      const { tree } = utils.generateTreeList(files);
+
+      expect(tree).toEqual([
+        {
+          key: 'app',
+          path: 'app',
+          name: 'app',
+          type: 'tree',
+          tree: [
+            {
+              addedLines: 0,
+              changed: true,
+              deleted: false,
+              fileHash: 'test',
+              key: 'app/index.js',
+              name: 'index.js',
+              path: 'app/index.js',
+              removedLines: 10,
+              tempFile: false,
+              type: 'blob',
+              tree: [],
+            },
+            {
+              key: 'app/test',
+              path: 'app/test',
+              name: 'test',
+              type: 'tree',
+              opened: true,
+              tree: [
+                {
+                  addedLines: 0,
+                  changed: true,
+                  deleted: false,
+                  fileHash: 'test',
+                  key: 'app/test/index.js',
+                  name: 'index.js',
+                  path: 'app/test/index.js',
+                  removedLines: 0,
+                  tempFile: true,
+                  type: 'blob',
+                  tree: [],
+                },
+              ],
+            },
+          ],
+          opened: true,
+        },
+        {
+          key: 'package.json',
+          path: 'package.json',
+          name: 'package.json',
+          type: 'blob',
+          changed: true,
+          tempFile: false,
+          deleted: true,
+          fileHash: 'test',
+          addedLines: 0,
+          removedLines: 0,
+          tree: [],
+        },
+      ]);
+    });
+
+    it('creates flat list of blobs & folders', () => {
+      const { treeEntries } = utils.generateTreeList(files);
+
+      expect(Object.keys(treeEntries)).toEqual([
+        'app',
+        'app/index.js',
+        'app/test',
+        'app/test/index.js',
+        'package.json',
+      ]);
+    });
+  });
 });
diff --git a/spec/javascripts/filtered_search/dropdown_utils_spec.js b/spec/javascripts/filtered_search/dropdown_utils_spec.js
index 8792e99d461..68bbbf838da 100644
--- a/spec/javascripts/filtered_search/dropdown_utils_spec.js
+++ b/spec/javascripts/filtered_search/dropdown_utils_spec.js
@@ -288,13 +288,13 @@ describe('Dropdown Utils', () => {
 
   describe('setDataValueIfSelected', () => {
     beforeEach(() => {
-      spyOn(FilteredSearchDropdownManager, 'addWordToInput')
-        .and.callFake(() => {});
+      spyOn(FilteredSearchDropdownManager, 'addWordToInput').and.callFake(() => {});
     });
 
     it('calls addWordToInput when dataValue exists', () => {
       const selected = {
         getAttribute: () => 'value',
+        hasAttribute: () => false,
       };
 
       DropdownUtils.setDataValueIfSelected(null, selected);
@@ -304,6 +304,7 @@ describe('Dropdown Utils', () => {
     it('returns true when dataValue exists', () => {
       const selected = {
         getAttribute: () => 'value',
+        hasAttribute: () => false,
       };
 
       const result = DropdownUtils.setDataValueIfSelected(null, selected);
diff --git a/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js b/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js
index 756a654765b..53a6d1d62b0 100644
--- a/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js
+++ b/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js
@@ -240,13 +240,17 @@ describe('Filtered Search Visual Tokens', () => {
     beforeEach(() => {
       setFixtures(`
         <div class="test-area">
-        ${subject.createVisualTokenElementHTML()}
+        ${subject.createVisualTokenElementHTML('custom-token')}
         </div>
       `);
 
       tokenElement = document.querySelector('.test-area').firstElementChild;
     });
 
+    it('should add class name to token element', () => {
+      expect(document.querySelector('.test-area .custom-token')).toBeDefined();
+    });
+
     it('contains name div', () => {
       expect(tokenElement.querySelector('.name')).toEqual(jasmine.anything());
     });
@@ -280,7 +284,7 @@ describe('Filtered Search Visual Tokens', () => {
 
   describe('addVisualTokenElement', () => {
     it('renders search visual tokens', () => {
-      subject.addVisualTokenElement('search term', null, true);
+      subject.addVisualTokenElement('search term', null, { isSearchTerm: true });
       const token = tokensContainer.querySelector('.js-visual-token');
 
       expect(token.classList.contains('filtered-search-term')).toEqual(true);
diff --git a/spec/javascripts/ide/components/file_row_extra_spec.js b/spec/javascripts/ide/components/file_row_extra_spec.js
index 60dabe28045..c93a939ad71 100644
--- a/spec/javascripts/ide/components/file_row_extra_spec.js
+++ b/spec/javascripts/ide/components/file_row_extra_spec.js
@@ -107,14 +107,14 @@ describe('IDE extra file row component', () => {
 
   describe('changes file icon', () => {
     it('hides when file is not changed', () => {
-      expect(vm.$el.querySelector('.ide-file-changed-icon')).toBe(null);
+      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('.ide-file-changed-icon')).not.toBe(null);
+        expect(vm.$el.querySelector('.file-changed-icon')).not.toBe(null);
 
         done();
       });
@@ -124,7 +124,7 @@ describe('IDE extra file row component', () => {
       vm.file.staged = true;
 
       vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.ide-file-changed-icon')).not.toBe(null);
+        expect(vm.$el.querySelector('.file-changed-icon')).not.toBe(null);
 
         done();
       });
@@ -134,7 +134,7 @@ describe('IDE extra file row component', () => {
       vm.file.tempFile = true;
 
       vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.ide-file-changed-icon')).not.toBe(null);
+        expect(vm.$el.querySelector('.file-changed-icon')).not.toBe(null);
 
         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/job_spec.js b/spec/javascripts/job_spec.js
index 2fcb5566ebc..d6b5dec9e47 100644
--- a/spec/javascripts/job_spec.js
+++ b/spec/javascripts/job_spec.js
@@ -57,25 +57,6 @@ describe('Job', () => {
         expect(job.buildStage).toBe('test');
         expect(job.state).toBe('');
       });
-
-      it('only shows the jobs matching the current stage', () => {
-        expect($('.build-job[data-stage="build"]').is(':visible')).toBe(false);
-        expect($('.build-job[data-stage="test"]').is(':visible')).toBe(true);
-        expect($('.build-job[data-stage="deploy"]').is(':visible')).toBe(false);
-      });
-
-      it('selects the current stage in the build dropdown menu', () => {
-        expect($('.stage-selection').text()).toBe('test');
-      });
-
-      it('updates the jobs when the build dropdown changes', () => {
-        $('.stage-item:contains("build")').click();
-
-        expect($('.stage-selection').text()).toBe('build');
-        expect($('.build-job[data-stage="build"]').is(':visible')).toBe(true);
-        expect($('.build-job[data-stage="test"]').is(':visible')).toBe(false);
-        expect($('.build-job[data-stage="deploy"]').is(':visible')).toBe(false);
-      });
     });
 
     describe('running build', () => {
diff --git a/spec/javascripts/jobs/components/environments_block_spec.js b/spec/javascripts/jobs/components/environments_block_spec.js
index 015c26be9fc..7d836129b13 100644
--- a/spec/javascripts/jobs/components/environments_block_spec.js
+++ b/spec/javascripts/jobs/components/environments_block_spec.js
@@ -5,19 +5,16 @@ import mountComponent from '../../helpers/vue_mount_component_helper';
 describe('Environments block', () => {
   const Component = Vue.extend(component);
   let vm;
-  const icon = {
+  const status = {
     group: 'success',
     icon: 'status_success',
     label: 'passed',
     text: 'passed',
     tooltip: 'passed',
   };
-  const deployment = {
-    path: 'deployment',
-    name: 'deployment name',
-  };
+
   const environment = {
-    path: '/environment',
+    environment_path: '/environment',
     name: 'environment',
   };
 
@@ -25,15 +22,14 @@ describe('Environments block', () => {
     vm.$destroy();
   });
 
-  describe('with latest deployment', () => {
+  describe('with last deployment', () => {
     it('renders info for most recent deployment', () => {
       vm = mountComponent(Component, {
         deploymentStatus: {
-          status: 'latest',
-          icon,
-          deployment,
+          status: 'last',
           environment,
         },
+        iconStatus: status,
       });
 
       expect(vm.$el.textContent.trim()).toEqual(
@@ -48,17 +44,17 @@ describe('Environments block', () => {
         vm = mountComponent(Component, {
           deploymentStatus: {
             status: 'out_of_date',
-            icon,
-            deployment,
             environment: Object.assign({}, environment, {
-              last_deployment: { name: 'deployment', path: 'last_deployment' },
+              last_deployment: { iid: 'deployment', deployable: { build_path: 'bar' } },
             }),
           },
+          iconStatus: status,
         });
 
         expect(vm.$el.textContent.trim()).toEqual(
-          'This job is an out-of-date deployment to environment. View the most recent deployment deployment.',
+          'This job is an out-of-date deployment to environment. View the most recent deployment #deployment.',
         );
+        expect(vm.$el.querySelector('.js-job-deployment-link').getAttribute('href')).toEqual('bar');
       });
     });
 
@@ -67,10 +63,9 @@ describe('Environments block', () => {
         vm = mountComponent(Component, {
           deploymentStatus: {
             status: 'out_of_date',
-            icon,
-            deployment: null,
             environment,
           },
+          iconStatus: status,
         });
 
         expect(vm.$el.textContent.trim()).toEqual(
@@ -85,10 +80,9 @@ describe('Environments block', () => {
       vm = mountComponent(Component, {
         deploymentStatus: {
           status: 'failed',
-          icon,
-          deployment: null,
           environment,
         },
+        iconStatus: status,
       });
 
       expect(vm.$el.textContent.trim()).toEqual(
@@ -99,21 +93,24 @@ describe('Environments block', () => {
 
   describe('creating deployment', () => {
     describe('with last deployment', () => {
-      it('renders info about creating deployment and overriding lastest deployment', () => {
+      it('renders info about creating deployment and overriding latest deployment', () => {
         vm = mountComponent(Component, {
           deploymentStatus: {
             status: 'creating',
-            icon,
-            deployment,
             environment: Object.assign({}, environment, {
-              last_deployment: { name: 'deployment', path: 'last_deployment' },
+              last_deployment: {
+                iid: 'deployment',
+                deployable: { build_path: 'foo' },
+              },
             }),
           },
+          iconStatus: status,
         });
 
         expect(vm.$el.textContent.trim()).toEqual(
-          'This job is creating a deployment to environment and will overwrite the last deployment.',
+          'This job is creating a deployment to environment and will overwrite the latest deployment.',
         );
+        expect(vm.$el.querySelector('.js-job-deployment-link').getAttribute('href')).toEqual('foo');
       });
     });
 
@@ -122,10 +119,9 @@ describe('Environments block', () => {
         vm = mountComponent(Component, {
           deploymentStatus: {
             status: 'creating',
-            icon,
-            deployment: null,
             environment,
           },
+          iconStatus: status,
         });
 
         expect(vm.$el.textContent.trim()).toEqual(
@@ -133,5 +129,18 @@ describe('Environments block', () => {
         );
       });
     });
+
+    describe('without environment', () => {
+      it('does not render environment link', () => {
+        vm = mountComponent(Component, {
+          deploymentStatus: {
+            status: 'creating',
+            environment: null,
+          },
+          iconStatus: status,
+        });
+        expect(vm.$el.querySelector('.js-environment-link')).toBeNull();
+      });
+    });
   });
 });
diff --git a/spec/javascripts/jobs/components/header_spec.js b/spec/javascripts/jobs/components/header_spec.js
deleted file mode 100644
index e21e2c6d6e3..00000000000
--- a/spec/javascripts/jobs/components/header_spec.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import Vue from 'vue';
-import headerComponent from '~/jobs/components/header.vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-
-describe('Job details header', () => {
-  let HeaderComponent;
-  let vm;
-  let props;
-
-  beforeEach(() => {
-    HeaderComponent = Vue.extend(headerComponent);
-
-    const threeWeeksAgo = new Date();
-    threeWeeksAgo.setDate(threeWeeksAgo.getDate() - 21);
-
-    const twoDaysAgo = new Date();
-    twoDaysAgo.setDate(twoDaysAgo.getDate() - 2);
-
-    props = {
-      job: {
-        status: {
-          group: 'failed',
-          icon: 'status_failed',
-          label: 'failed',
-          text: 'failed',
-          details_path: 'path',
-        },
-        id: 123,
-        created_at: threeWeeksAgo.toISOString(),
-        user: {
-          web_url: 'path',
-          name: 'Foo',
-          username: 'foobar',
-          email: 'foo@bar.com',
-          avatar_url: 'link',
-        },
-        started: twoDaysAgo.toISOString(),
-        new_issue_path: 'path',
-      },
-      isLoading: false,
-    };
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  describe('job reason', () => {
-    it('should not render the reason when reason is absent', () => {
-      vm = mountComponent(HeaderComponent, props);
-
-      expect(vm.shouldRenderReason).toBe(false);
-    });
-
-    it('should render the reason when reason is present', () => {
-      props.job.callout_message = 'There is an unknown failure, please try again';
-
-      vm = mountComponent(HeaderComponent, props);
-
-      expect(vm.shouldRenderReason).toBe(true);
-    });
-  });
-
-  describe('triggered job', () => {
-    beforeEach(() => {
-      vm = mountComponent(HeaderComponent, props);
-    });
-
-    it('should render provided job information', () => {
-      expect(
-        vm.$el
-          .querySelector('.header-main-content')
-          .textContent.replace(/\s+/g, ' ')
-          .trim(),
-      ).toEqual('failed Job #123 triggered 2 days ago by Foo');
-    });
-
-    it('should render new issue link', () => {
-      expect(vm.$el.querySelector('.js-new-issue').getAttribute('href')).toEqual(
-        props.job.new_issue_path,
-      );
-    });
-  });
-
-  describe('created job', () => {
-    it('should render created key', () => {
-      props.job.started = false;
-      vm = mountComponent(HeaderComponent, props);
-
-      expect(
-        vm.$el
-          .querySelector('.header-main-content')
-          .textContent.replace(/\s+/g, ' ')
-          .trim(),
-      ).toEqual('failed Job #123 created 3 weeks ago by Foo');
-    });
-  });
-});
diff --git a/spec/javascripts/jobs/components/job_app_spec.js b/spec/javascripts/jobs/components/job_app_spec.js
new file mode 100644
index 00000000000..c31fa6f9887
--- /dev/null
+++ b/spec/javascripts/jobs/components/job_app_spec.js
@@ -0,0 +1,185 @@
+import Vue from 'vue';
+import jobApp from '~/jobs/components/job_app.vue';
+import createStore from '~/jobs/store';
+import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+
+describe('Job App ', () => {
+  const Component = Vue.extend(jobApp);
+  let store;
+  let vm;
+
+  const threeWeeksAgo = new Date();
+  threeWeeksAgo.setDate(threeWeeksAgo.getDate() - 21);
+
+  const twoDaysAgo = new Date();
+  twoDaysAgo.setDate(twoDaysAgo.getDate() - 2);
+
+  const job = {
+    status: {
+      group: 'failed',
+      icon: 'status_failed',
+      label: 'failed',
+      text: 'failed',
+      details_path: 'path',
+    },
+    id: 123,
+    created_at: threeWeeksAgo.toISOString(),
+    user: {
+      web_url: 'path',
+      name: 'Foo',
+      username: 'foobar',
+      email: 'foo@bar.com',
+      avatar_url: 'link',
+    },
+    started: twoDaysAgo.toISOString(),
+    new_issue_path: 'path',
+    runners: {
+      available: false,
+    },
+    tags: ['docker'],
+  };
+
+  const props = {
+    runnerHelpUrl: 'help/runners',
+  };
+
+  beforeEach(() => {
+    store = createStore();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('Header section', () => {
+    describe('job callout message', () => {
+      it('should not render the reason when reason is absent', () => {
+        store.dispatch('receiveJobSuccess', job);
+
+        vm = mountComponentWithStore(Component, {
+          props,
+          store,
+        });
+
+        expect(vm.shouldRenderCalloutMessage).toBe(false);
+      });
+
+      it('should render the reason when reason is present', () => {
+        store.dispatch(
+          'receiveJobSuccess',
+          Object.assign({}, job, {
+            callout_message: 'There is an unknown failure, please try again',
+          }),
+        );
+
+        vm = mountComponentWithStore(Component, {
+          props,
+          store,
+        });
+
+        expect(vm.shouldRenderCalloutMessage).toBe(true);
+      });
+    });
+
+    describe('triggered job', () => {
+      beforeEach(() => {
+        store.dispatch('receiveJobSuccess', job);
+
+        vm = mountComponentWithStore(Component, {
+          props,
+          store,
+        });
+      });
+
+      it('should render provided job information', () => {
+        expect(
+          vm.$el
+            .querySelector('.header-main-content')
+            .textContent.replace(/\s+/g, ' ')
+            .trim(),
+        ).toEqual('failed Job #123 triggered 2 days ago by Foo');
+      });
+
+      it('should render new issue link', () => {
+        expect(vm.$el.querySelector('.js-new-issue').getAttribute('href')).toEqual(
+          job.new_issue_path,
+        );
+      });
+    });
+
+    describe('created job', () => {
+      it('should render created key', () => {
+        store.dispatch('receiveJobSuccess', Object.assign({}, job, { started: false }));
+
+        vm = mountComponentWithStore(Component, {
+          props,
+          store,
+        });
+
+        expect(
+          vm.$el
+            .querySelector('.header-main-content')
+            .textContent.replace(/\s+/g, ' ')
+            .trim(),
+        ).toEqual('failed Job #123 created 3 weeks ago by Foo');
+      });
+    });
+  });
+
+  describe('stuck block', () => {
+    it('renders stuck block when there are no runners', () => {
+      store.dispatch(
+        'receiveJobSuccess',
+        Object.assign({}, job, {
+          status: {
+            group: 'pending',
+            icon: 'status_pending',
+            label: 'pending',
+            text: 'pending',
+            details_path: 'path',
+          },
+        }),
+      );
+
+      vm = mountComponentWithStore(Component, {
+        props,
+        store,
+      });
+
+      expect(vm.$el.querySelector('.js-job-stuck')).not.toBeNull();
+    });
+
+    it('renders tags in stuck block when there are no runners', () => {
+      store.dispatch(
+        'receiveJobSuccess',
+        Object.assign({}, job, {
+          status: {
+            group: 'pending',
+            icon: 'status_pending',
+            label: 'pending',
+            text: 'pending',
+            details_path: 'path',
+          },
+        }),
+      );
+
+      vm = mountComponentWithStore(Component, {
+        props,
+        store,
+      });
+
+      expect(vm.$el.querySelector('.js-job-stuck').textContent).toContain(job.tags[0]);
+    });
+
+    it(' does not renders stuck block when there are no runners', () => {
+      store.dispatch('receiveJobSuccess', Object.assign({}, job, { runners: { available: true } }));
+
+      vm = mountComponentWithStore(Component, {
+        props,
+        store,
+      });
+
+      expect(vm.$el.querySelector('.js-job-stuck')).toBeNull();
+    });
+  });
+});
diff --git a/spec/javascripts/jobs/components/jobs_container_spec.js b/spec/javascripts/jobs/components/jobs_container_spec.js
index f3f8ff0d031..fa3a2c4c266 100644
--- a/spec/javascripts/jobs/components/jobs_container_spec.js
+++ b/spec/javascripts/jobs/components/jobs_container_spec.js
@@ -2,7 +2,7 @@ import Vue from 'vue';
 import component from '~/jobs/components/jobs_container.vue';
 import mountComponent from '../../helpers/vue_mount_component_helper';
 
-describe('Artifacts block', () => {
+describe('Jobs List block', () => {
   const Component = Vue.extend(component);
   let vm;
 
@@ -16,8 +16,7 @@ describe('Artifacts block', () => {
       text: 'passed',
       tooltip: 'passed',
     },
-    path: 'job/233432756',
-    id: '233432756',
+    id: 233432756,
     tooltip: 'build - passed',
     retried: true,
   };
@@ -33,8 +32,7 @@ describe('Artifacts block', () => {
       text: 'passed',
       tooltip: 'passed',
     },
-    path: 'job/2322756',
-    id: '2322756',
+    id: 2322756,
     tooltip: 'build - passed',
     active: true,
   };
@@ -50,8 +48,7 @@ describe('Artifacts block', () => {
       text: 'passed',
       tooltip: 'passed',
     },
-    path: 'job/232153',
-    id: '232153',
+    id: 232153,
     tooltip: 'build - passed',
   };
 
@@ -62,14 +59,16 @@ describe('Artifacts block', () => {
   it('renders list of jobs', () => {
     vm = mountComponent(Component, {
       jobs: [job, retried, active],
+      jobId: 12313,
     });
 
     expect(vm.$el.querySelectorAll('a').length).toEqual(3);
   });
 
-  it('renders arrow right when job is active', () => {
+  it('renders arrow right when job id matches `jobId`', () => {
     vm = mountComponent(Component, {
       jobs: [active],
+      jobId: active.id,
     });
 
     expect(vm.$el.querySelector('a .js-arrow-right')).not.toBeNull();
@@ -78,6 +77,7 @@ describe('Artifacts block', () => {
   it('does not render arrow right when job is not active', () => {
     vm = mountComponent(Component, {
       jobs: [job],
+      jobId: active.id,
     });
 
     expect(vm.$el.querySelector('a .js-arrow-right')).toBeNull();
@@ -86,6 +86,7 @@ describe('Artifacts block', () => {
   it('renders job name when present', () => {
     vm = mountComponent(Component, {
       jobs: [job],
+      jobId: active.id,
     });
 
     expect(vm.$el.querySelector('a').textContent.trim()).toContain(job.name);
@@ -95,6 +96,7 @@ describe('Artifacts block', () => {
   it('renders job id when job name is not available', () => {
     vm = mountComponent(Component, {
       jobs: [retried],
+      jobId: active.id,
     });
 
     expect(vm.$el.querySelector('a').textContent.trim()).toContain(retried.id);
@@ -103,14 +105,16 @@ describe('Artifacts block', () => {
   it('links to the job page', () => {
     vm = mountComponent(Component, {
       jobs: [job],
+      jobId: active.id,
     });
 
-    expect(vm.$el.querySelector('a').getAttribute('href')).toEqual(job.path);
+    expect(vm.$el.querySelector('a').getAttribute('href')).toEqual(job.status.details_path);
   });
 
   it('renders retry icon when job was retried', () => {
     vm = mountComponent(Component, {
       jobs: [retried],
+      jobId: active.id,
     });
 
     expect(vm.$el.querySelector('.js-retry-icon')).not.toBeNull();
@@ -119,6 +123,7 @@ describe('Artifacts block', () => {
   it('does not render retry icon when job was not retried', () => {
     vm = mountComponent(Component, {
       jobs: [job],
+      jobId: active.id,
     });
 
     expect(vm.$el.querySelector('.js-retry-icon')).toBeNull();
diff --git a/spec/javascripts/jobs/components/sidebar_details_block_spec.js b/spec/javascripts/jobs/components/sidebar_details_block_spec.js
deleted file mode 100644
index ba19534dac2..00000000000
--- a/spec/javascripts/jobs/components/sidebar_details_block_spec.js
+++ /dev/null
@@ -1,139 +0,0 @@
-import Vue from 'vue';
-import sidebarDetailsBlock from '~/jobs/components/sidebar_details_block.vue';
-import job from '../mock_data';
-import mountComponent from '../../helpers/vue_mount_component_helper';
-
-describe('Sidebar details block', () => {
-  let SidebarComponent;
-  let vm;
-
-  function trimWhitespace(element) {
-    return element.textContent.replace(/\s+/g, ' ').trim();
-  }
-
-  beforeEach(() => {
-    SidebarComponent = Vue.extend(sidebarDetailsBlock);
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  describe('when it is loading', () => {
-    it('should render a loading spinner', () => {
-      vm = mountComponent(SidebarComponent, {
-        job: {},
-        isLoading: true,
-      });
-      expect(vm.$el.querySelector('.fa-spinner')).toBeDefined();
-    });
-  });
-
-  describe('when there is no retry path retry', () => {
-    it('should not render a retry button', () => {
-      vm = mountComponent(SidebarComponent, {
-        job: {},
-        isLoading: false,
-      });
-
-      expect(vm.$el.querySelector('.js-retry-job')).toBeNull();
-    });
-  });
-
-  describe('without terminal path', () => {
-    it('does not render terminal link', () => {
-      vm = mountComponent(SidebarComponent, {
-        job,
-        isLoading: false,
-      });
-
-      expect(vm.$el.querySelector('.js-terminal-link')).toBeNull();
-    });
-  });
-
-  describe('with terminal path', () => {
-    it('renders terminal link', () => {
-      vm = mountComponent(SidebarComponent, {
-        job,
-        isLoading: false,
-        terminalPath: 'job/43123/terminal',
-      });
-
-      expect(vm.$el.querySelector('.js-terminal-link')).not.toBeNull();
-    });
-  });
-
-  beforeEach(() => {
-    vm = mountComponent(SidebarComponent, {
-      job,
-      isLoading: false,
-    });
-  });
-
-  describe('actions', () => {
-    it('should render link to new issue', () => {
-      expect(vm.$el.querySelector('.js-new-issue').getAttribute('href')).toEqual(
-        job.new_issue_path,
-      );
-      expect(vm.$el.querySelector('.js-new-issue').textContent.trim()).toEqual('New issue');
-    });
-
-    it('should render link to retry job', () => {
-      expect(vm.$el.querySelector('.js-retry-job').getAttribute('href')).toEqual(job.retry_path);
-    });
-
-    it('should render link to cancel job', () => {
-      expect(vm.$el.querySelector('.js-cancel-job').getAttribute('href')).toEqual(job.cancel_path);
-    });
-  });
-
-  describe('information', () => {
-    it('should render merge request link', () => {
-      expect(trimWhitespace(vm.$el.querySelector('.js-job-mr'))).toEqual('Merge Request: !2');
-
-      expect(vm.$el.querySelector('.js-job-mr a').getAttribute('href')).toEqual(
-        job.merge_request.path,
-      );
-    });
-
-    it('should render job duration', () => {
-      expect(trimWhitespace(vm.$el.querySelector('.js-job-duration'))).toEqual(
-        'Duration: 6 seconds',
-      );
-    });
-
-    it('should render erased date', () => {
-      expect(trimWhitespace(vm.$el.querySelector('.js-job-erased'))).toEqual('Erased: 3 weeks ago');
-    });
-
-    it('should render finished date', () => {
-      expect(trimWhitespace(vm.$el.querySelector('.js-job-finished'))).toEqual(
-        'Finished: 3 weeks ago',
-      );
-    });
-
-    it('should render queued date', () => {
-      expect(trimWhitespace(vm.$el.querySelector('.js-job-queued'))).toEqual('Queued: 9 seconds');
-    });
-
-    it('should render runner ID', () => {
-      expect(trimWhitespace(vm.$el.querySelector('.js-job-runner'))).toEqual(
-        'Runner: local ci runner (#1)',
-      );
-    });
-
-    it('should render timeout information', () => {
-      expect(trimWhitespace(vm.$el.querySelector('.js-job-timeout'))).toEqual(
-        'Timeout: 1m 40s (from runner)',
-      );
-    });
-
-    it('should render coverage', () => {
-      expect(trimWhitespace(vm.$el.querySelector('.js-job-coverage'))).toEqual('Coverage: 20%');
-    });
-
-    it('should render tags', () => {
-      expect(trimWhitespace(vm.$el.querySelector('.js-job-tags'))).toEqual('Tags: tag');
-    });
-  });
-});
diff --git a/spec/javascripts/jobs/components/sidebar_spec.js b/spec/javascripts/jobs/components/sidebar_spec.js
new file mode 100644
index 00000000000..2f5c4245ced
--- /dev/null
+++ b/spec/javascripts/jobs/components/sidebar_spec.js
@@ -0,0 +1,196 @@
+import Vue from 'vue';
+import sidebarDetailsBlock from '~/jobs/components/sidebar.vue';
+import createStore from '~/jobs/store';
+import job, { stages, jobsInStage } from '../mock_data';
+import { mountComponentWithStore } from '../../helpers/vue_mount_component_helper';
+import { trimText } from '../../helpers/vue_component_helper';
+
+describe('Sidebar details block', () => {
+  const SidebarComponent = Vue.extend(sidebarDetailsBlock);
+  let vm;
+  let store;
+
+  beforeEach(() => {
+    store = createStore();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('when it is loading', () => {
+    it('should render a loading spinner', () => {
+      store.dispatch('requestJob');
+      vm = mountComponentWithStore(SidebarComponent, { store });
+
+      expect(vm.$el.querySelector('.fa-spinner')).toBeDefined();
+    });
+  });
+
+  describe('when there is no retry path retry', () => {
+    it('should not render a retry button', () => {
+      const copy = Object.assign({}, job);
+      delete copy.retry_path;
+
+      store.dispatch('receiveJobSuccess', copy);
+      vm = mountComponentWithStore(SidebarComponent, {
+        store,
+      });
+
+      expect(vm.$el.querySelector('.js-retry-job')).toBeNull();
+    });
+  });
+
+  describe('without terminal path', () => {
+    it('does not render terminal link', () => {
+      store.dispatch('receiveJobSuccess', job);
+      vm = mountComponentWithStore(SidebarComponent, { store });
+
+      expect(vm.$el.querySelector('.js-terminal-link')).toBeNull();
+    });
+  });
+
+  describe('with terminal path', () => {
+    it('renders terminal link', () => {
+      store.dispatch('receiveJobSuccess', job);
+      vm = mountComponentWithStore(SidebarComponent, {
+        store,
+        props: {
+          terminalPath: 'job/43123/terminal',
+        },
+      });
+
+      expect(vm.$el.querySelector('.js-terminal-link')).not.toBeNull();
+    });
+  });
+
+  beforeEach(() => {
+    store.dispatch('receiveJobSuccess', job);
+    vm = mountComponentWithStore(SidebarComponent, { store });
+  });
+
+  describe('actions', () => {
+    it('should render link to new issue', () => {
+      expect(vm.$el.querySelector('.js-new-issue').getAttribute('href')).toEqual(
+        job.new_issue_path,
+      );
+      expect(vm.$el.querySelector('.js-new-issue').textContent.trim()).toEqual('New issue');
+    });
+
+    it('should render link to retry job', () => {
+      expect(vm.$el.querySelector('.js-retry-job').getAttribute('href')).toEqual(job.retry_path);
+    });
+
+    it('should render link to cancel job', () => {
+      expect(vm.$el.querySelector('.js-cancel-job').getAttribute('href')).toEqual(job.cancel_path);
+    });
+  });
+
+  describe('information', () => {
+    it('should render merge request link', () => {
+      expect(trimText(vm.$el.querySelector('.js-job-mr').textContent)).toEqual('Merge Request: !2');
+
+      expect(vm.$el.querySelector('.js-job-mr a').getAttribute('href')).toEqual(
+        job.merge_request.path,
+      );
+    });
+
+    it('should render job duration', () => {
+      expect(trimText(vm.$el.querySelector('.js-job-duration').textContent)).toEqual(
+        'Duration: 6 seconds',
+      );
+    });
+
+    it('should render erased date', () => {
+      expect(trimText(vm.$el.querySelector('.js-job-erased').textContent)).toEqual(
+        'Erased: 3 weeks ago',
+      );
+    });
+
+    it('should render finished date', () => {
+      expect(trimText(vm.$el.querySelector('.js-job-finished').textContent)).toEqual(
+        'Finished: 3 weeks ago',
+      );
+    });
+
+    it('should render queued date', () => {
+      expect(trimText(vm.$el.querySelector('.js-job-queued').textContent)).toEqual(
+        'Queued: 9 seconds',
+      );
+    });
+
+    it('should render runner ID', () => {
+      expect(trimText(vm.$el.querySelector('.js-job-runner').textContent)).toEqual(
+        'Runner: local ci runner (#1)',
+      );
+    });
+
+    it('should render timeout information', () => {
+      expect(trimText(vm.$el.querySelector('.js-job-timeout').textContent)).toEqual(
+        'Timeout: 1m 40s (from runner)',
+      );
+    });
+
+    it('should render coverage', () => {
+      expect(trimText(vm.$el.querySelector('.js-job-coverage').textContent)).toEqual(
+        'Coverage: 20%',
+      );
+    });
+
+    it('should render tags', () => {
+      expect(trimText(vm.$el.querySelector('.js-job-tags').textContent)).toEqual('Tags: tag');
+    });
+  });
+
+  describe('stages dropdown', () => {
+    beforeEach(() => {
+      store.dispatch('receiveJobSuccess', job);
+    });
+
+    describe('while fetching stages', () => {
+      it('renders dropdown with More label', () => {
+        vm = mountComponentWithStore(SidebarComponent, { store });
+
+        expect(vm.$el.querySelector('.js-selected-stage').textContent.trim()).toEqual('More');
+      });
+    });
+
+    describe('with stages', () => {
+      beforeEach(() => {
+        store.dispatch('receiveStagesSuccess', stages);
+        vm = mountComponentWithStore(SidebarComponent, { store });
+      });
+
+      it('renders first stage as selected', () => {
+        expect(vm.$el.querySelector('.js-selected-stage').textContent.trim()).toEqual(
+          stages[0].name,
+        );
+      });
+    });
+
+    describe('without jobs for stages', () => {
+      beforeEach(() => {
+        store.dispatch('receiveJobSuccess', job);
+        store.dispatch('receiveStagesSuccess', stages);
+        vm = mountComponentWithStore(SidebarComponent, { store });
+      });
+
+      it('does not render job container', () => {
+        expect(vm.$el.querySelector('.js-jobs-container')).toBeNull();
+      });
+    });
+
+    describe('with jobs for stages', () => {
+      beforeEach(() => {
+        store.dispatch('receiveJobSuccess', job);
+        store.dispatch('receiveStagesSuccess', stages);
+        store.dispatch('receiveJobsForStageSuccess', jobsInStage.latest_statuses);
+        vm = mountComponentWithStore(SidebarComponent, { store });
+      });
+
+      it('renders list of jobs', () => {
+        expect(vm.$el.querySelector('.js-jobs-container')).not.toBeNull();
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/jobs/components/stages_dropdown_spec.js b/spec/javascripts/jobs/components/stages_dropdown_spec.js
index 402289345aa..aa6cc0f1b1a 100644
--- a/spec/javascripts/jobs/components/stages_dropdown_spec.js
+++ b/spec/javascripts/jobs/components/stages_dropdown_spec.js
@@ -8,10 +8,25 @@ describe('Artifacts block', () => {
 
   beforeEach(() => {
     vm = mountComponent(Component, {
-      pipelineId: 28029444,
-      pipelinePath: 'pipeline/28029444',
-      pipelineRef: '50101-truncated-job-information',
-      pipelineRefPath: 'commits/50101-truncated-job-information',
+      pipeline: {
+        id: 28029444,
+        details: {
+          status: {
+            details_path: '/gitlab-org/gitlab-ce/pipelines/28029444',
+            group: 'success',
+            has_details: true,
+            icon: 'status_success',
+            label: 'passed',
+            text: 'passed',
+            tooltip: 'passed',
+          },
+        },
+        path: 'pipeline/28029444',
+      },
+      ref: {
+        path: 'commits/50101-truncated-job-information',
+        name: '50101-truncated-job-information',
+      },
       stages: [
         {
           name: 'build',
@@ -20,15 +35,6 @@ describe('Artifacts block', () => {
           name: 'test',
         },
       ],
-      pipelineStatus: {
-        details_path: '/gitlab-org/gitlab-ce/pipelines/28029444',
-        group: 'success',
-        has_details: true,
-        icon: 'status_success',
-        label: 'passed',
-        text: 'passed',
-        tooltip: 'passed',
-      },
     });
   });
 
diff --git a/spec/javascripts/jobs/mock_data.js b/spec/javascripts/jobs/mock_data.js
index 8fdd9b309b7..4269b42e8b6 100644
--- a/spec/javascripts/jobs/mock_data.js
+++ b/spec/javascripts/jobs/mock_data.js
@@ -20,7 +20,8 @@ export default {
     group: 'success',
     has_details: true,
     details_path: '/root/ci-mock/-/jobs/4757',
-    favicon: '/assets/ci_favicons/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.png',
+    favicon:
+      '/assets/ci_favicons/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.png',
     action: {
       icon: 'retry',
       title: 'Retry',
@@ -37,7 +38,8 @@ export default {
     username: 'root',
     id: 1,
     state: 'active',
-    avatar_url: 'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
+    avatar_url:
+      'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
     web_url: 'http://localhost:3000/root',
   },
   erase_path: '/root/ci-mock/-/jobs/4757/erase',
@@ -54,7 +56,8 @@ export default {
       username: 'root',
       id: 1,
       state: 'active',
-      avatar_url: 'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
+      avatar_url:
+        'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
       web_url: 'http://localhost:3000/root',
     },
     active: false,
@@ -78,7 +81,8 @@ export default {
         group: 'success',
         has_details: true,
         details_path: '/root/ci-mock/pipelines/140',
-        favicon: '/assets/ci_favicons/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.png',
+        favicon:
+          '/assets/ci_favicons/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.png',
       },
       duration: 6,
       finished_at: '2017-06-01T17:32:00.042Z',
@@ -107,11 +111,14 @@ export default {
         username: 'root',
         id: 1,
         state: 'active',
-        avatar_url: 'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
+        avatar_url:
+          'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
         web_url: 'http://localhost:3000/root',
       },
-      author_gravatar_url: 'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
-      commit_url: 'http://localhost:3000/root/ci-mock/commit/c58647773a6b5faf066d4ad6ff2c9fbba5f180f6',
+      author_gravatar_url:
+        'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
+      commit_url:
+        'http://localhost:3000/root/ci-mock/commit/c58647773a6b5faf066d4ad6ff2c9fbba5f180f6',
       commit_path: '/root/ci-mock/commit/c58647773a6b5faf066d4ad6ff2c9fbba5f180f6',
     },
   },
@@ -125,3 +132,1029 @@ export default {
   },
   raw_path: '/root/ci-mock/builds/4757/raw',
 };
+
+export const stages = [
+  {
+    name: 'build',
+    title: 'build: running',
+    groups: [
+      {
+        name: 'build:linux',
+        size: 1,
+        status: {
+          icon: 'status_pending',
+          text: 'pending',
+          label: 'pending',
+          group: 'pending',
+          tooltip: 'pending',
+          has_details: true,
+          details_path: '/gitlab-org/gitlab-shell/-/jobs/1180',
+          illustration: {
+            image: 'illustrations/pending_job_empty.svg',
+            size: 'svg-430',
+            title: 'This job has not started yet',
+            content: 'This job is in pending state and is waiting to be picked by a runner',
+          },
+          favicon:
+            '/assets/ci_favicons/favicon_status_pending-5bdf338420e5221ca24353b6bff1c9367189588750632e9a871b7af09ff6a2ae.png',
+          action: {
+            icon: 'cancel',
+            title: 'Cancel',
+            path: '/gitlab-org/gitlab-shell/-/jobs/1180/cancel',
+            method: 'post',
+          },
+        },
+        jobs: [
+          {
+            id: 1180,
+            name: 'build:linux',
+            started: false,
+            build_path: '/gitlab-org/gitlab-shell/-/jobs/1180',
+            cancel_path: '/gitlab-org/gitlab-shell/-/jobs/1180/cancel',
+            playable: false,
+            created_at: '2018-09-28T11:09:57.229Z',
+            updated_at: '2018-09-28T11:09:57.503Z',
+            status: {
+              icon: 'status_pending',
+              text: 'pending',
+              label: 'pending',
+              group: 'pending',
+              tooltip: 'pending',
+              has_details: true,
+              details_path: '/gitlab-org/gitlab-shell/-/jobs/1180',
+              illustration: {
+                image: 'illustrations/pending_job_empty.svg',
+                size: 'svg-430',
+                title: 'This job has not started yet',
+                content: 'This job is in pending state and is waiting to be picked by a runner',
+              },
+              favicon:
+                '/assets/ci_favicons/favicon_status_pending-5bdf338420e5221ca24353b6bff1c9367189588750632e9a871b7af09ff6a2ae.png',
+              action: {
+                icon: 'cancel',
+                title: 'Cancel',
+                path: '/gitlab-org/gitlab-shell/-/jobs/1180/cancel',
+                method: 'post',
+              },
+            },
+          },
+        ],
+      },
+      {
+        name: 'build:osx',
+        size: 1,
+        status: {
+          icon: 'status_success',
+          text: 'passed',
+          label: 'passed',
+          group: 'success',
+          tooltip: 'passed',
+          has_details: true,
+          details_path: '/gitlab-org/gitlab-shell/-/jobs/444',
+          illustration: {
+            image: 'illustrations/skipped-job_empty.svg',
+            size: 'svg-430',
+            title: 'This job does not have a trace.',
+          },
+          favicon:
+            '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+          action: {
+            icon: 'retry',
+            title: 'Retry',
+            path: '/gitlab-org/gitlab-shell/-/jobs/444/retry',
+            method: 'post',
+          },
+        },
+        jobs: [
+          {
+            id: 444,
+            name: 'build:osx',
+            started: '2018-05-18T05:32:20.655Z',
+            build_path: '/gitlab-org/gitlab-shell/-/jobs/444',
+            retry_path: '/gitlab-org/gitlab-shell/-/jobs/444/retry',
+            playable: false,
+            created_at: '2018-05-18T15:32:54.364Z',
+            updated_at: '2018-05-18T15:32:54.364Z',
+            status: {
+              icon: 'status_success',
+              text: 'passed',
+              label: 'passed',
+              group: 'success',
+              tooltip: 'passed',
+              has_details: true,
+              details_path: '/gitlab-org/gitlab-shell/-/jobs/444',
+              illustration: {
+                image: 'illustrations/skipped-job_empty.svg',
+                size: 'svg-430',
+                title: 'This job does not have a trace.',
+              },
+              favicon:
+                '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+              action: {
+                icon: 'retry',
+                title: 'Retry',
+                path: '/gitlab-org/gitlab-shell/-/jobs/444/retry',
+                method: 'post',
+              },
+            },
+          },
+        ],
+      },
+    ],
+    status: {
+      icon: 'status_running',
+      text: 'running',
+      label: 'running',
+      group: 'running',
+      tooltip: 'running',
+      has_details: true,
+      details_path: '/gitlab-org/gitlab-shell/pipelines/27#build',
+      illustration: null,
+      favicon:
+        '/assets/ci_favicons/favicon_status_running-9c635b2419a8e1ec991c993061b89cc5aefc0743bb238ecd0c381e7741a70e8c.png',
+    },
+    path: '/gitlab-org/gitlab-shell/pipelines/27#build',
+    dropdown_path: '/gitlab-org/gitlab-shell/pipelines/27/stage.json?stage=build',
+  },
+  {
+    name: 'test',
+    title: 'test: passed with warnings',
+    groups: [
+      {
+        name: 'jenkins',
+        size: 1,
+        status: {
+          icon: 'status_success',
+          text: 'passed',
+          label: null,
+          group: 'success',
+          tooltip: null,
+          has_details: false,
+          details_path: null,
+          illustration: null,
+          favicon:
+            '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+        },
+        jobs: [
+          {
+            id: 459,
+            name: 'jenkins',
+            started: '2018-05-18T09:32:20.658Z',
+            build_path: '/gitlab-org/gitlab-shell/-/jobs/459',
+            playable: false,
+            created_at: '2018-05-18T15:32:55.330Z',
+            updated_at: '2018-05-18T15:32:55.330Z',
+            status: {
+              icon: 'status_success',
+              text: 'passed',
+              label: null,
+              group: 'success',
+              tooltip: null,
+              has_details: false,
+              details_path: null,
+              illustration: null,
+              favicon:
+                '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+            },
+          },
+        ],
+      },
+      {
+        name: 'rspec:linux',
+        size: 3,
+        status: {
+          icon: 'status_success',
+          text: 'passed',
+          label: 'passed',
+          group: 'success',
+          tooltip: 'passed',
+          has_details: false,
+          details_path: null,
+          illustration: null,
+          favicon:
+            '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+        },
+        jobs: [
+          {
+            id: 445,
+            name: 'rspec:linux 0 3',
+            started: '2018-05-18T07:32:20.655Z',
+            build_path: '/gitlab-org/gitlab-shell/-/jobs/445',
+            retry_path: '/gitlab-org/gitlab-shell/-/jobs/445/retry',
+            playable: false,
+            created_at: '2018-05-18T15:32:54.425Z',
+            updated_at: '2018-05-18T15:32:54.425Z',
+            status: {
+              icon: 'status_success',
+              text: 'passed',
+              label: 'passed',
+              group: 'success',
+              tooltip: 'passed',
+              has_details: true,
+              details_path: '/gitlab-org/gitlab-shell/-/jobs/445',
+              illustration: {
+                image: 'illustrations/skipped-job_empty.svg',
+                size: 'svg-430',
+                title: 'This job does not have a trace.',
+              },
+              favicon:
+                '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+              action: {
+                icon: 'retry',
+                title: 'Retry',
+                path: '/gitlab-org/gitlab-shell/-/jobs/445/retry',
+                method: 'post',
+              },
+            },
+          },
+          {
+            id: 446,
+            name: 'rspec:linux 1 3',
+            started: '2018-05-18T07:32:20.655Z',
+            build_path: '/gitlab-org/gitlab-shell/-/jobs/446',
+            retry_path: '/gitlab-org/gitlab-shell/-/jobs/446/retry',
+            playable: false,
+            created_at: '2018-05-18T15:32:54.506Z',
+            updated_at: '2018-05-18T15:32:54.506Z',
+            status: {
+              icon: 'status_success',
+              text: 'passed',
+              label: 'passed',
+              group: 'success',
+              tooltip: 'passed',
+              has_details: true,
+              details_path: '/gitlab-org/gitlab-shell/-/jobs/446',
+              illustration: {
+                image: 'illustrations/skipped-job_empty.svg',
+                size: 'svg-430',
+                title: 'This job does not have a trace.',
+              },
+              favicon:
+                '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+              action: {
+                icon: 'retry',
+                title: 'Retry',
+                path: '/gitlab-org/gitlab-shell/-/jobs/446/retry',
+                method: 'post',
+              },
+            },
+          },
+          {
+            id: 447,
+            name: 'rspec:linux 2 3',
+            started: '2018-05-18T07:32:20.656Z',
+            build_path: '/gitlab-org/gitlab-shell/-/jobs/447',
+            retry_path: '/gitlab-org/gitlab-shell/-/jobs/447/retry',
+            playable: false,
+            created_at: '2018-05-18T15:32:54.572Z',
+            updated_at: '2018-05-18T15:32:54.572Z',
+            status: {
+              icon: 'status_success',
+              text: 'passed',
+              label: 'passed',
+              group: 'success',
+              tooltip: 'passed',
+              has_details: true,
+              details_path: '/gitlab-org/gitlab-shell/-/jobs/447',
+              illustration: {
+                image: 'illustrations/skipped-job_empty.svg',
+                size: 'svg-430',
+                title: 'This job does not have a trace.',
+              },
+              favicon:
+                '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+              action: {
+                icon: 'retry',
+                title: 'Retry',
+                path: '/gitlab-org/gitlab-shell/-/jobs/447/retry',
+                method: 'post',
+              },
+            },
+          },
+        ],
+      },
+      {
+        name: 'rspec:osx',
+        size: 1,
+        status: {
+          icon: 'status_success',
+          text: 'passed',
+          label: 'passed',
+          group: 'success',
+          tooltip: 'passed',
+          has_details: true,
+          details_path: '/gitlab-org/gitlab-shell/-/jobs/452',
+          illustration: {
+            image: 'illustrations/skipped-job_empty.svg',
+            size: 'svg-430',
+            title: 'This job does not have a trace.',
+          },
+          favicon:
+            '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+          action: {
+            icon: 'retry',
+            title: 'Retry',
+            path: '/gitlab-org/gitlab-shell/-/jobs/452/retry',
+            method: 'post',
+          },
+        },
+        jobs: [
+          {
+            id: 452,
+            name: 'rspec:osx',
+            started: '2018-05-18T07:32:20.657Z',
+            build_path: '/gitlab-org/gitlab-shell/-/jobs/452',
+            retry_path: '/gitlab-org/gitlab-shell/-/jobs/452/retry',
+            playable: false,
+            created_at: '2018-05-18T15:32:54.920Z',
+            updated_at: '2018-05-18T15:32:54.920Z',
+            status: {
+              icon: 'status_success',
+              text: 'passed',
+              label: 'passed',
+              group: 'success',
+              tooltip: 'passed',
+              has_details: true,
+              details_path: '/gitlab-org/gitlab-shell/-/jobs/452',
+              illustration: {
+                image: 'illustrations/skipped-job_empty.svg',
+                size: 'svg-430',
+                title: 'This job does not have a trace.',
+              },
+              favicon:
+                '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+              action: {
+                icon: 'retry',
+                title: 'Retry',
+                path: '/gitlab-org/gitlab-shell/-/jobs/452/retry',
+                method: 'post',
+              },
+            },
+          },
+        ],
+      },
+      {
+        name: 'rspec:windows',
+        size: 3,
+        status: {
+          icon: 'status_success',
+          text: 'passed',
+          label: 'passed',
+          group: 'success',
+          tooltip: 'passed',
+          has_details: false,
+          details_path: null,
+          illustration: null,
+          favicon:
+            '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+        },
+        jobs: [
+          {
+            id: 448,
+            name: 'rspec:windows 0 3',
+            started: '2018-05-18T07:32:20.656Z',
+            build_path: '/gitlab-org/gitlab-shell/-/jobs/448',
+            retry_path: '/gitlab-org/gitlab-shell/-/jobs/448/retry',
+            playable: false,
+            created_at: '2018-05-18T15:32:54.639Z',
+            updated_at: '2018-05-18T15:32:54.639Z',
+            status: {
+              icon: 'status_success',
+              text: 'passed',
+              label: 'passed',
+              group: 'success',
+              tooltip: 'passed',
+              has_details: true,
+              details_path: '/gitlab-org/gitlab-shell/-/jobs/448',
+              illustration: {
+                image: 'illustrations/skipped-job_empty.svg',
+                size: 'svg-430',
+                title: 'This job does not have a trace.',
+              },
+              favicon:
+                '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+              action: {
+                icon: 'retry',
+                title: 'Retry',
+                path: '/gitlab-org/gitlab-shell/-/jobs/448/retry',
+                method: 'post',
+              },
+            },
+          },
+          {
+            id: 449,
+            name: 'rspec:windows 1 3',
+            started: '2018-05-18T07:32:20.656Z',
+            build_path: '/gitlab-org/gitlab-shell/-/jobs/449',
+            retry_path: '/gitlab-org/gitlab-shell/-/jobs/449/retry',
+            playable: false,
+            created_at: '2018-05-18T15:32:54.703Z',
+            updated_at: '2018-05-18T15:32:54.703Z',
+            status: {
+              icon: 'status_success',
+              text: 'passed',
+              label: 'passed',
+              group: 'success',
+              tooltip: 'passed',
+              has_details: true,
+              details_path: '/gitlab-org/gitlab-shell/-/jobs/449',
+              illustration: {
+                image: 'illustrations/skipped-job_empty.svg',
+                size: 'svg-430',
+                title: 'This job does not have a trace.',
+              },
+              favicon:
+                '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+              action: {
+                icon: 'retry',
+                title: 'Retry',
+                path: '/gitlab-org/gitlab-shell/-/jobs/449/retry',
+                method: 'post',
+              },
+            },
+          },
+          {
+            id: 451,
+            name: 'rspec:windows 2 3',
+            started: '2018-05-18T07:32:20.657Z',
+            build_path: '/gitlab-org/gitlab-shell/-/jobs/451',
+            retry_path: '/gitlab-org/gitlab-shell/-/jobs/451/retry',
+            playable: false,
+            created_at: '2018-05-18T15:32:54.853Z',
+            updated_at: '2018-05-18T15:32:54.853Z',
+            status: {
+              icon: 'status_success',
+              text: 'passed',
+              label: 'passed',
+              group: 'success',
+              tooltip: 'passed',
+              has_details: true,
+              details_path: '/gitlab-org/gitlab-shell/-/jobs/451',
+              illustration: {
+                image: 'illustrations/skipped-job_empty.svg',
+                size: 'svg-430',
+                title: 'This job does not have a trace.',
+              },
+              favicon:
+                '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+              action: {
+                icon: 'retry',
+                title: 'Retry',
+                path: '/gitlab-org/gitlab-shell/-/jobs/451/retry',
+                method: 'post',
+              },
+            },
+          },
+        ],
+      },
+      {
+        name: 'spinach:linux',
+        size: 1,
+        status: {
+          icon: 'status_success',
+          text: 'passed',
+          label: 'passed',
+          group: 'success',
+          tooltip: 'passed',
+          has_details: true,
+          details_path: '/gitlab-org/gitlab-shell/-/jobs/453',
+          illustration: {
+            image: 'illustrations/skipped-job_empty.svg',
+            size: 'svg-430',
+            title: 'This job does not have a trace.',
+          },
+          favicon:
+            '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+          action: {
+            icon: 'retry',
+            title: 'Retry',
+            path: '/gitlab-org/gitlab-shell/-/jobs/453/retry',
+            method: 'post',
+          },
+        },
+        jobs: [
+          {
+            id: 453,
+            name: 'spinach:linux',
+            started: '2018-05-18T07:32:20.657Z',
+            build_path: '/gitlab-org/gitlab-shell/-/jobs/453',
+            retry_path: '/gitlab-org/gitlab-shell/-/jobs/453/retry',
+            playable: false,
+            created_at: '2018-05-18T15:32:54.993Z',
+            updated_at: '2018-05-18T15:32:54.993Z',
+            status: {
+              icon: 'status_success',
+              text: 'passed',
+              label: 'passed',
+              group: 'success',
+              tooltip: 'passed',
+              has_details: true,
+              details_path: '/gitlab-org/gitlab-shell/-/jobs/453',
+              illustration: {
+                image: 'illustrations/skipped-job_empty.svg',
+                size: 'svg-430',
+                title: 'This job does not have a trace.',
+              },
+              favicon:
+                '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+              action: {
+                icon: 'retry',
+                title: 'Retry',
+                path: '/gitlab-org/gitlab-shell/-/jobs/453/retry',
+                method: 'post',
+              },
+            },
+          },
+        ],
+      },
+      {
+        name: 'spinach:osx',
+        size: 1,
+        status: {
+          icon: 'status_warning',
+          text: 'failed',
+          label: 'failed (allowed to fail)',
+          group: 'failed_with_warnings',
+          tooltip: 'failed - (unknown failure) (allowed to fail)',
+          has_details: true,
+          details_path: '/gitlab-org/gitlab-shell/-/jobs/454',
+          illustration: {
+            image: 'illustrations/skipped-job_empty.svg',
+            size: 'svg-430',
+            title: 'This job does not have a trace.',
+          },
+          favicon:
+            '/assets/ci_favicons/favicon_status_failed-41304d7f7e3828808b0c26771f0309e55296819a9beea3ea9fbf6689d9857c12.png',
+          action: {
+            icon: 'retry',
+            title: 'Retry',
+            path: '/gitlab-org/gitlab-shell/-/jobs/454/retry',
+            method: 'post',
+          },
+        },
+        jobs: [
+          {
+            id: 454,
+            name: 'spinach:osx',
+            started: '2018-05-18T07:32:20.657Z',
+            build_path: '/gitlab-org/gitlab-shell/-/jobs/454',
+            retry_path: '/gitlab-org/gitlab-shell/-/jobs/454/retry',
+            playable: false,
+            created_at: '2018-05-18T15:32:55.053Z',
+            updated_at: '2018-05-18T15:32:55.053Z',
+            status: {
+              icon: 'status_warning',
+              text: 'failed',
+              label: 'failed (allowed to fail)',
+              group: 'failed_with_warnings',
+              tooltip: 'failed - (unknown failure) (allowed to fail)',
+              has_details: true,
+              details_path: '/gitlab-org/gitlab-shell/-/jobs/454',
+              illustration: {
+                image: 'illustrations/skipped-job_empty.svg',
+                size: 'svg-430',
+                title: 'This job does not have a trace.',
+              },
+              favicon:
+                '/assets/ci_favicons/favicon_status_failed-41304d7f7e3828808b0c26771f0309e55296819a9beea3ea9fbf6689d9857c12.png',
+              action: {
+                icon: 'retry',
+                title: 'Retry',
+                path: '/gitlab-org/gitlab-shell/-/jobs/454/retry',
+                method: 'post',
+              },
+            },
+            callout_message: 'There is an unknown failure, please try again',
+            recoverable: true,
+          },
+        ],
+      },
+    ],
+    status: {
+      icon: 'status_warning',
+      text: 'passed',
+      label: 'passed with warnings',
+      group: 'success_with_warnings',
+      tooltip: 'passed',
+      has_details: true,
+      details_path: '/gitlab-org/gitlab-shell/pipelines/27#test',
+      illustration: null,
+      favicon:
+        '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+    },
+    path: '/gitlab-org/gitlab-shell/pipelines/27#test',
+    dropdown_path: '/gitlab-org/gitlab-shell/pipelines/27/stage.json?stage=test',
+  },
+  {
+    name: 'deploy',
+    title: 'deploy: running',
+    groups: [
+      {
+        name: 'production',
+        size: 1,
+        status: {
+          icon: 'status_created',
+          text: 'created',
+          label: 'created',
+          group: 'created',
+          tooltip: 'created',
+          has_details: true,
+          details_path: '/gitlab-org/gitlab-shell/-/jobs/457',
+          illustration: {
+            image: 'illustrations/job_not_triggered.svg',
+            size: 'svg-306',
+            title: 'This job has not been triggered yet',
+            content:
+              'This job depends on upstream jobs that need to succeed in order for this job to be triggered',
+          },
+          favicon:
+            '/assets/ci_favicons/favicon_status_created-4b975aa976d24e5a3ea7cd9a5713e6ce2cd9afd08b910415e96675de35f64955.png',
+          action: {
+            icon: 'cancel',
+            title: 'Cancel',
+            path: '/gitlab-org/gitlab-shell/-/jobs/457/cancel',
+            method: 'post',
+          },
+        },
+        jobs: [
+          {
+            id: 457,
+            name: 'production',
+            started: false,
+            build_path: '/gitlab-org/gitlab-shell/-/jobs/457',
+            cancel_path: '/gitlab-org/gitlab-shell/-/jobs/457/cancel',
+            playable: false,
+            created_at: '2018-05-18T15:32:55.259Z',
+            updated_at: '2018-09-28T11:09:57.454Z',
+            status: {
+              icon: 'status_created',
+              text: 'created',
+              label: 'created',
+              group: 'created',
+              tooltip: 'created',
+              has_details: true,
+              details_path: '/gitlab-org/gitlab-shell/-/jobs/457',
+              illustration: {
+                image: 'illustrations/job_not_triggered.svg',
+                size: 'svg-306',
+                title: 'This job has not been triggered yet',
+                content:
+                  'This job depends on upstream jobs that need to succeed in order for this job to be triggered',
+              },
+              favicon:
+                '/assets/ci_favicons/favicon_status_created-4b975aa976d24e5a3ea7cd9a5713e6ce2cd9afd08b910415e96675de35f64955.png',
+              action: {
+                icon: 'cancel',
+                title: 'Cancel',
+                path: '/gitlab-org/gitlab-shell/-/jobs/457/cancel',
+                method: 'post',
+              },
+            },
+          },
+        ],
+      },
+      {
+        name: 'staging',
+        size: 1,
+        status: {
+          icon: 'status_success',
+          text: 'passed',
+          label: 'passed',
+          group: 'success',
+          tooltip: 'passed',
+          has_details: true,
+          details_path: '/gitlab-org/gitlab-shell/-/jobs/455',
+          illustration: {
+            image: 'illustrations/skipped-job_empty.svg',
+            size: 'svg-430',
+            title: 'This job does not have a trace.',
+          },
+          favicon:
+            '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+          action: {
+            icon: 'retry',
+            title: 'Retry',
+            path: '/gitlab-org/gitlab-shell/-/jobs/455/retry',
+            method: 'post',
+          },
+        },
+        jobs: [
+          {
+            id: 455,
+            name: 'staging',
+            started: '2018-05-18T09:32:20.658Z',
+            build_path: '/gitlab-org/gitlab-shell/-/jobs/455',
+            retry_path: '/gitlab-org/gitlab-shell/-/jobs/455/retry',
+            playable: false,
+            created_at: '2018-05-18T15:32:55.119Z',
+            updated_at: '2018-05-18T15:32:55.119Z',
+            status: {
+              icon: 'status_success',
+              text: 'passed',
+              label: 'passed',
+              group: 'success',
+              tooltip: 'passed',
+              has_details: true,
+              details_path: '/gitlab-org/gitlab-shell/-/jobs/455',
+              illustration: {
+                image: 'illustrations/skipped-job_empty.svg',
+                size: 'svg-430',
+                title: 'This job does not have a trace.',
+              },
+              favicon:
+                '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+              action: {
+                icon: 'retry',
+                title: 'Retry',
+                path: '/gitlab-org/gitlab-shell/-/jobs/455/retry',
+                method: 'post',
+              },
+            },
+          },
+        ],
+      },
+      {
+        name: 'stop staging',
+        size: 1,
+        status: {
+          icon: 'status_created',
+          text: 'created',
+          label: 'created',
+          group: 'created',
+          tooltip: 'created',
+          has_details: true,
+          details_path: '/gitlab-org/gitlab-shell/-/jobs/456',
+          illustration: {
+            image: 'illustrations/job_not_triggered.svg',
+            size: 'svg-306',
+            title: 'This job has not been triggered yet',
+            content:
+              'This job depends on upstream jobs that need to succeed in order for this job to be triggered',
+          },
+          favicon:
+            '/assets/ci_favicons/favicon_status_created-4b975aa976d24e5a3ea7cd9a5713e6ce2cd9afd08b910415e96675de35f64955.png',
+          action: {
+            icon: 'cancel',
+            title: 'Cancel',
+            path: '/gitlab-org/gitlab-shell/-/jobs/456/cancel',
+            method: 'post',
+          },
+        },
+        jobs: [
+          {
+            id: 456,
+            name: 'stop staging',
+            started: false,
+            build_path: '/gitlab-org/gitlab-shell/-/jobs/456',
+            cancel_path: '/gitlab-org/gitlab-shell/-/jobs/456/cancel',
+            playable: false,
+            created_at: '2018-05-18T15:32:55.205Z',
+            updated_at: '2018-09-28T11:09:57.396Z',
+            status: {
+              icon: 'status_created',
+              text: 'created',
+              label: 'created',
+              group: 'created',
+              tooltip: 'created',
+              has_details: true,
+              details_path: '/gitlab-org/gitlab-shell/-/jobs/456',
+              illustration: {
+                image: 'illustrations/job_not_triggered.svg',
+                size: 'svg-306',
+                title: 'This job has not been triggered yet',
+                content:
+                  'This job depends on upstream jobs that need to succeed in order for this job to be triggered',
+              },
+              favicon:
+                '/assets/ci_favicons/favicon_status_created-4b975aa976d24e5a3ea7cd9a5713e6ce2cd9afd08b910415e96675de35f64955.png',
+              action: {
+                icon: 'cancel',
+                title: 'Cancel',
+                path: '/gitlab-org/gitlab-shell/-/jobs/456/cancel',
+                method: 'post',
+              },
+            },
+          },
+        ],
+      },
+    ],
+    status: {
+      icon: 'status_running',
+      text: 'running',
+      label: 'running',
+      group: 'running',
+      tooltip: 'running',
+      has_details: true,
+      details_path: '/gitlab-org/gitlab-shell/pipelines/27#deploy',
+      illustration: null,
+      favicon:
+        '/assets/ci_favicons/favicon_status_running-9c635b2419a8e1ec991c993061b89cc5aefc0743bb238ecd0c381e7741a70e8c.png',
+    },
+    path: '/gitlab-org/gitlab-shell/pipelines/27#deploy',
+    dropdown_path: '/gitlab-org/gitlab-shell/pipelines/27/stage.json?stage=deploy',
+  },
+  {
+    name: 'notify',
+    title: 'notify: manual action',
+    groups: [
+      {
+        name: 'slack',
+        size: 1,
+        status: {
+          icon: 'status_manual',
+          text: 'manual',
+          label: 'manual play action',
+          group: 'manual',
+          tooltip: 'manual action',
+          has_details: true,
+          details_path: '/gitlab-org/gitlab-shell/-/jobs/458',
+          illustration: {
+            image: 'illustrations/manual_action.svg',
+            size: 'svg-394',
+            title: 'This job requires a manual action',
+            content:
+              'This job depends on a user to trigger its process. Often they are used to deploy code to production environments',
+          },
+          favicon:
+            '/assets/ci_favicons/favicon_status_manual-829a0804612cef47d9efc1618dba38325483657c847dba0546c3b9f0295bb36c.png',
+          action: {
+            icon: 'play',
+            title: 'Play',
+            path: '/gitlab-org/gitlab-shell/-/jobs/458/play',
+            method: 'post',
+          },
+        },
+        jobs: [
+          {
+            id: 458,
+            name: 'slack',
+            started: null,
+            build_path: '/gitlab-org/gitlab-shell/-/jobs/458',
+            play_path: '/gitlab-org/gitlab-shell/-/jobs/458/play',
+            playable: true,
+            created_at: '2018-05-18T15:32:55.303Z',
+            updated_at: '2018-05-18T15:34:08.535Z',
+            status: {
+              icon: 'status_manual',
+              text: 'manual',
+              label: 'manual play action',
+              group: 'manual',
+              tooltip: 'manual action',
+              has_details: true,
+              details_path: '/gitlab-org/gitlab-shell/-/jobs/458',
+              illustration: {
+                image: 'illustrations/manual_action.svg',
+                size: 'svg-394',
+                title: 'This job requires a manual action',
+                content:
+                  'This job depends on a user to trigger its process. Often they are used to deploy code to production environments',
+              },
+              favicon:
+                '/assets/ci_favicons/favicon_status_manual-829a0804612cef47d9efc1618dba38325483657c847dba0546c3b9f0295bb36c.png',
+              action: {
+                icon: 'play',
+                title: 'Play',
+                path: '/gitlab-org/gitlab-shell/-/jobs/458/play',
+                method: 'post',
+              },
+            },
+          },
+        ],
+      },
+    ],
+    status: {
+      icon: 'status_manual',
+      text: 'manual',
+      label: 'manual action',
+      group: 'manual',
+      tooltip: 'manual action',
+      has_details: true,
+      details_path: '/gitlab-org/gitlab-shell/pipelines/27#notify',
+      illustration: null,
+      favicon:
+        '/assets/ci_favicons/favicon_status_manual-829a0804612cef47d9efc1618dba38325483657c847dba0546c3b9f0295bb36c.png',
+    },
+    path: '/gitlab-org/gitlab-shell/pipelines/27#notify',
+    dropdown_path: '/gitlab-org/gitlab-shell/pipelines/27/stage.json?stage=notify',
+  },
+];
+
+export const jobsInStage = {
+  name: 'build',
+  title: 'build: running',
+  latest_statuses: [
+    {
+      id: 1180,
+      name: 'build:linux',
+      started: false,
+      build_path: '/gitlab-org/gitlab-shell/-/jobs/1180',
+      cancel_path: '/gitlab-org/gitlab-shell/-/jobs/1180/cancel',
+      playable: false,
+      created_at: '2018-09-28T11:09:57.229Z',
+      updated_at: '2018-09-28T11:09:57.503Z',
+      status: {
+        icon: 'status_pending',
+        text: 'pending',
+        label: 'pending',
+        group: 'pending',
+        tooltip: 'pending',
+        has_details: true,
+        details_path: '/gitlab-org/gitlab-shell/-/jobs/1180',
+        illustration: {
+          image: 'illustrations/pending_job_empty.svg',
+          size: 'svg-430',
+          title: 'This job has not started yet',
+          content: 'This job is in pending state and is waiting to be picked by a runner',
+        },
+        favicon:
+          '/assets/ci_favicons/favicon_status_pending-5bdf338420e5221ca24353b6bff1c9367189588750632e9a871b7af09ff6a2ae.png',
+        action: {
+          icon: 'cancel',
+          title: 'Cancel',
+          path: '/gitlab-org/gitlab-shell/-/jobs/1180/cancel',
+          method: 'post',
+        },
+      },
+    },
+    {
+      id: 444,
+      name: 'build:osx',
+      started: '2018-05-18T05:32:20.655Z',
+      build_path: '/gitlab-org/gitlab-shell/-/jobs/444',
+      retry_path: '/gitlab-org/gitlab-shell/-/jobs/444/retry',
+      playable: false,
+      created_at: '2018-05-18T15:32:54.364Z',
+      updated_at: '2018-05-18T15:32:54.364Z',
+      status: {
+        icon: 'status_success',
+        text: 'passed',
+        label: 'passed',
+        group: 'success',
+        tooltip: 'passed',
+        has_details: true,
+        details_path: '/gitlab-org/gitlab-shell/-/jobs/444',
+        illustration: {
+          image: 'illustrations/skipped-job_empty.svg',
+          size: 'svg-430',
+          title: 'This job does not have a trace.',
+        },
+        favicon:
+          '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+        action: {
+          icon: 'retry',
+          title: 'Retry',
+          path: '/gitlab-org/gitlab-shell/-/jobs/444/retry',
+          method: 'post',
+        },
+      },
+    },
+  ],
+  retried: [
+    {
+      id: 443,
+      name: 'build:linux',
+      started: '2018-05-18T06:32:20.655Z',
+      build_path: '/gitlab-org/gitlab-shell/-/jobs/443',
+      retry_path: '/gitlab-org/gitlab-shell/-/jobs/443/retry',
+      playable: false,
+      created_at: '2018-05-18T15:32:54.296Z',
+      updated_at: '2018-05-18T15:32:54.296Z',
+      status: {
+        icon: 'status_success',
+        text: 'passed',
+        label: 'passed',
+        group: 'success',
+        tooltip: 'passed (retried)',
+        has_details: true,
+        details_path: '/gitlab-org/gitlab-shell/-/jobs/443',
+        illustration: {
+          image: 'illustrations/skipped-job_empty.svg',
+          size: 'svg-430',
+          title: 'This job does not have a trace.',
+        },
+        favicon:
+          '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+        action: {
+          icon: 'retry',
+          title: 'Retry',
+          path: '/gitlab-org/gitlab-shell/-/jobs/443/retry',
+          method: 'post',
+        },
+      },
+    },
+  ],
+  status: {
+    icon: 'status_running',
+    text: 'running',
+    label: 'running',
+    group: 'running',
+    tooltip: 'running',
+    has_details: true,
+    details_path: '/gitlab-org/gitlab-shell/pipelines/27#build',
+    illustration: null,
+    favicon:
+      '/assets/ci_favicons/favicon_status_running-9c635b2419a8e1ec991c993061b89cc5aefc0743bb238ecd0c381e7741a70e8c.png',
+  },
+  path: '/gitlab-org/gitlab-shell/pipelines/27#build',
+  dropdown_path: '/gitlab-org/gitlab-shell/pipelines/27/stage.json?stage=build',
+};
diff --git a/spec/javascripts/jobs/store/actions_spec.js b/spec/javascripts/jobs/store/actions_spec.js
index 5042718dfa0..5ab1f75d0d6 100644
--- a/spec/javascripts/jobs/store/actions_spec.js
+++ b/spec/javascripts/jobs/store/actions_spec.js
@@ -27,7 +27,6 @@ import {
   receiveStagesSuccess,
   receiveStagesError,
   requestJobsForStage,
-  setSelectedStage,
   fetchJobsForStage,
   receiveJobsForStageSuccess,
   receiveJobsForStageError,
@@ -236,7 +235,8 @@ describe('Job State actions', () => {
             },
             {
               payload: {
-                html: 'I, [2018-08-17T22:57:45.707325 #1841]  INFO -- :', complete: true,
+                html: 'I, [2018-08-17T22:57:45.707325 #1841]  INFO -- :',
+                complete: true,
               },
               type: 'receiveTraceSuccess',
             },
@@ -421,7 +421,9 @@ describe('Job State actions', () => {
     let mock;
 
     beforeEach(() => {
-      mockedState.stagesEndpoint = `${TEST_HOST}/endpoint.json`;
+      mockedState.job.pipeline = {
+        path: `${TEST_HOST}/endpoint.json/stages`,
+      };
       mock = new MockAdapter(axios);
     });
 
@@ -430,8 +432,10 @@ describe('Job State actions', () => {
     });
 
     describe('success', () => {
-      it('dispatches requestStages and receiveStagesSuccess ', done => {
-        mock.onGet(`${TEST_HOST}/endpoint.json`).replyOnce(200, [{ id: 121212, name: 'build' }]);
+      it('dispatches requestStages and receiveStagesSuccess, fetchJobsForStage ', done => {
+        mock
+          .onGet(`${TEST_HOST}/endpoint.json/stages`)
+          .replyOnce(200, { details: { stages: [{ id: 121212, name: 'build' }] } });
 
         testAction(
           fetchStages,
@@ -446,6 +450,10 @@ describe('Job State actions', () => {
               payload: [{ id: 121212, name: 'build' }],
               type: 'receiveStagesSuccess',
             },
+            {
+              payload: { id: 121212, name: 'build' },
+              type: 'fetchJobsForStage',
+            },
           ],
           done,
         );
@@ -516,24 +524,10 @@ describe('Job State actions', () => {
     });
   });
 
-  describe('setSelectedStage', () => {
-    it('should commit SET_SELECTED_STAGE mutation ', done => {
-      testAction(
-        setSelectedStage,
-        { name: 'build' },
-        mockedState,
-        [{ type: types.SET_SELECTED_STAGE, payload: { name: 'build' } }],
-        [],
-        done,
-      );
-    });
-  });
-
   describe('fetchJobsForStage', () => {
     let mock;
 
     beforeEach(() => {
-      mockedState.stageJobsEndpoint = `${TEST_HOST}/endpoint.json`;
       mock = new MockAdapter(axios);
     });
 
@@ -542,20 +536,18 @@ describe('Job State actions', () => {
     });
 
     describe('success', () => {
-      it('dispatches setSelectedStage, requestJobsForStage and receiveJobsForStageSuccess ', done => {
-        mock.onGet(`${TEST_HOST}/endpoint.json`).replyOnce(200, [{ id: 121212, name: 'build' }]);
+      it('dispatches requestJobsForStage and receiveJobsForStageSuccess ', done => {
+        mock
+          .onGet(`${TEST_HOST}/jobs.json`)
+          .replyOnce(200, { latest_statuses: [{ id: 121212, name: 'build' }], retried: [] });
 
         testAction(
           fetchJobsForStage,
-          null,
+          { dropdown_path: `${TEST_HOST}/jobs.json` },
           mockedState,
           [],
           [
             {
-              type: 'setSelectedStage',
-              payload: null,
-            },
-            {
               type: 'requestJobsForStage',
             },
             {
@@ -570,21 +562,17 @@ describe('Job State actions', () => {
 
     describe('error', () => {
       beforeEach(() => {
-        mock.onGet(`${TEST_HOST}/endpoint.json`).reply(500);
+        mock.onGet(`${TEST_HOST}/jobs.json`).reply(500);
       });
 
-      it('dispatches setSelectedStage, requestJobsForStage and receiveJobsForStageError', done => {
+      it('dispatches requestJobsForStage and receiveJobsForStageError', done => {
         testAction(
           fetchJobsForStage,
-          null,
+          { dropdown_path: `${TEST_HOST}/jobs.json` },
           mockedState,
           [],
           [
             {
-              payload: null,
-              type: 'setSelectedStage',
-            },
-            {
               type: 'requestJobsForStage',
             },
             {
diff --git a/spec/javascripts/jobs/store/getters_spec.js b/spec/javascripts/jobs/store/getters_spec.js
new file mode 100644
index 00000000000..63ef4135d83
--- /dev/null
+++ b/spec/javascripts/jobs/store/getters_spec.js
@@ -0,0 +1,121 @@
+import * as getters from '~/jobs/store/getters';
+import state from '~/jobs/store/state';
+
+describe('Job Store Getters', () => {
+  let localState;
+
+  beforeEach(() => {
+    localState = state();
+  });
+
+  describe('headerActions', () => {
+    describe('with new issue path', () => {
+      it('returns an array with action to create a new issue', () => {
+        localState.job.new_issue_path = 'issues/new';
+
+        expect(getters.headerActions(localState)).toEqual([
+          {
+            label: 'New issue',
+            path: localState.job.new_issue_path,
+            cssClass:
+              'js-new-issue btn btn-success btn-inverted d-none d-md-block d-lg-block d-xl-block',
+            type: 'link',
+          },
+        ]);
+      });
+    });
+
+    describe('without new issue path', () => {
+      it('returns an empty array', () => {
+        expect(getters.headerActions(localState)).toEqual([]);
+      });
+    });
+  });
+
+  describe('headerTime', () => {
+    describe('when the job has started key', () => {
+      it('returns started key', () => {
+        const started = '2018-08-31T16:20:49.023Z';
+        localState.job.started = started;
+
+        expect(getters.headerTime(localState)).toEqual(started);
+      });
+    });
+
+    describe('when the job does not have started key', () => {
+      it('returns created_at key', () => {
+        const created = '2018-08-31T16:20:49.023Z';
+        localState.job.created_at = created;
+        expect(getters.headerTime(localState)).toEqual(created);
+      });
+    });
+  });
+
+  describe('shouldRenderCalloutMessage', () => {
+    describe('with status and callout message', () => {
+      it('returns true', () => {
+        localState.job.callout_message = 'Callout message';
+        localState.job.status = { icon: 'passed' };
+
+        expect(getters.shouldRenderCalloutMessage(localState)).toEqual(true);
+      });
+    });
+
+    describe('without status & with callout message', () => {
+      it('returns false', () => {
+        localState.job.callout_message = 'Callout message';
+        expect(getters.shouldRenderCalloutMessage(localState)).toEqual(false);
+      });
+    });
+
+    describe('with status & without callout message', () => {
+      it('returns false', () => {
+        localState.job.status = { icon: 'passed' };
+
+        expect(getters.shouldRenderCalloutMessage(localState)).toEqual(false);
+      });
+    });
+  });
+
+  describe('jobHasStarted', () => {
+    describe('when started equals false', () => {
+      it('returns false', () => {
+        localState.job.started = false;
+        expect(getters.jobHasStarted(localState)).toEqual(false);
+      });
+    });
+
+    describe('when started equals string', () => {
+      it('returns true', () => {
+        localState.job.started = '2018-08-31T16:20:49.023Z';
+        expect(getters.jobHasStarted(localState)).toEqual(true);
+      });
+    });
+  });
+
+  describe('hasEnvironment', () => {
+    describe('without `deployment_status`', () => {
+      it('returns false', () => {
+        expect(getters.hasEnvironment(localState)).toEqual(false);
+      });
+    });
+    describe('with an empty object for `deployment_status`', () => {
+      it('returns false', () => {
+        localState.job.deployment_status = {};
+        expect(getters.hasEnvironment(localState)).toEqual(false);
+      });
+    });
+    describe('when `deployment_status` is defined and not empty', () => {
+      it('returns true', () => {
+        localState.job.deployment_status = {
+          status: 'creating',
+          environment: {
+            last_deployment: {},
+          },
+        };
+
+        expect(getters.hasEnvironment(localState)).toEqual(true);
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/notes/components/noteable_discussion_spec.js b/spec/javascripts/notes/components/noteable_discussion_spec.js
index 2a01bd85520..40b5f009ceb 100644
--- a/spec/javascripts/notes/components/noteable_discussion_spec.js
+++ b/spec/javascripts/notes/components/noteable_discussion_spec.js
@@ -133,4 +133,29 @@ describe('noteable_discussion component', () => {
       });
     });
   });
+
+  describe('componentData', () => {
+    it('should return first note object for placeholder note', () => {
+      const data = {
+        isPlaceholderNote: true,
+        notes: [
+          { body: 'hello world!' },
+        ],
+      };
+
+      const note = vm.componentData(data);
+      expect(note).toEqual(data.notes[0]);
+    });
+
+    it('should return given note for nonplaceholder notes', () => {
+      const data = {
+        notes: [
+          { id: 12 },
+        ],
+      };
+
+      const note = vm.componentData(data);
+      expect(note).toEqual(data);
+    });
+  });
 });
diff --git a/spec/javascripts/sidebar/components/time_tracking/time_tracker_spec.js b/spec/javascripts/sidebar/components/time_tracking/time_tracker_spec.js
index 9dff52a9d49..0e30759c41d 100644
--- a/spec/javascripts/sidebar/components/time_tracking/time_tracker_spec.js
+++ b/spec/javascripts/sidebar/components/time_tracking/time_tracker_spec.js
@@ -8,7 +8,10 @@ describe('Issuable Time Tracker', () => {
   let initialData;
   let vm;
 
-  const initTimeTrackingComponent = opts => {
+  const initTimeTrackingComponent = ({ timeEstimate,
+                                         timeSpent,
+                                         timeEstimateHumanReadable,
+                                         timeSpentHumanReadable }) => {
     setFixtures(`
     <div>
       <div id="mock-container"></div>
@@ -16,10 +19,10 @@ describe('Issuable Time Tracker', () => {
   `);
 
     initialData = {
-      time_estimate: opts.timeEstimate,
-      time_spent: opts.timeSpent,
-      human_time_estimate: opts.timeEstimateHumanReadable,
-      human_time_spent: opts.timeSpentHumanReadable,
+      timeEstimate,
+      timeSpent,
+      humanTimeEstimate: timeEstimateHumanReadable,
+      humanTimeSpent: timeSpentHumanReadable,
       rootPath: '/',
     };
 
@@ -43,8 +46,8 @@ describe('Issuable Time Tracker', () => {
   describe('Initialization', () => {
     beforeEach(() => {
       initTimeTrackingComponent({
-        timeEstimate: 100000,
-        timeSpent: 5000,
+        timeEstimate: 10000, // 2h 46m
+        timeSpent: 5000, // 1h 23m
         timeEstimateHumanReadable: '2h 46m',
         timeSpentHumanReadable: '1h 23m',
       });
@@ -56,14 +59,14 @@ describe('Issuable Time Tracker', () => {
 
     it('should correctly set timeEstimate', done => {
       Vue.nextTick(() => {
-        expect(vm.timeEstimate).toBe(initialData.time_estimate);
+        expect(vm.timeEstimate).toBe(initialData.timeEstimate);
         done();
       });
     });
 
     it('should correctly set time_spent', done => {
       Vue.nextTick(() => {
-        expect(vm.timeSpent).toBe(initialData.time_spent);
+        expect(vm.timeSpent).toBe(initialData.timeSpent);
         done();
       });
     });
@@ -74,8 +77,8 @@ describe('Issuable Time Tracker', () => {
       describe('Comparison pane', () => {
         beforeEach(() => {
           initTimeTrackingComponent({
-            timeEstimate: 100000,
-            timeSpent: 5000,
+            timeEstimate: 100000, // 1d 3h
+            timeSpent: 5000, // 1h 23m
             timeEstimateHumanReadable: '',
             timeSpentHumanReadable: '',
           });
@@ -106,8 +109,8 @@ describe('Issuable Time Tracker', () => {
           });
 
           it('should display the remaining meter with the correct background color when over estimate', done => {
-            vm.time_estimate = 100000;
-            vm.time_spent = 20000000;
+            vm.timeEstimate = 10000; // 2h 46m
+            vm.timeSpent = 20000000; // 231 days
             Vue.nextTick(() => {
               expect(vm.$el.querySelector('.time-tracking-comparison-pane .progress[variant="danger"]')).not.toBeNull();
               done();
@@ -119,7 +122,7 @@ describe('Issuable Time Tracker', () => {
       describe('Estimate only pane', () => {
         beforeEach(() => {
           initTimeTrackingComponent({
-            timeEstimate: 100000,
+            timeEstimate: 10000, // 2h 46m
             timeSpent: 0,
             timeEstimateHumanReadable: '2h 46m',
             timeSpentHumanReadable: '',
@@ -142,7 +145,7 @@ describe('Issuable Time Tracker', () => {
         beforeEach(() => {
           initTimeTrackingComponent({
             timeEstimate: 0,
-            timeSpent: 5000,
+            timeSpent: 5000, // 1h 23m
             timeEstimateHumanReadable: '2h 46m',
             timeSpentHumanReadable: '1h 23m',
           });
diff --git a/spec/javascripts/ide/components/changed_file_icon_spec.js b/spec/javascripts/vue_shared/components/changed_file_icon_spec.js
index 7308219f705..5b1038840c7 100644
--- a/spec/javascripts/ide/components/changed_file_icon_spec.js
+++ b/spec/javascripts/vue_shared/components/changed_file_icon_spec.js
@@ -1,8 +1,8 @@
 import Vue from 'vue';
-import changedFileIcon from '~/ide/components/changed_file_icon.vue';
+import changedFileIcon from '~/vue_shared/components/changed_file_icon.vue';
 import createComponent from 'spec/helpers/vue_mount_component_helper';
 
-describe('IDE changed file icon', () => {
+describe('Changed file icon', () => {
   let vm;
 
   beforeEach(() => {
@@ -33,14 +33,14 @@ describe('IDE changed file icon', () => {
   });
 
   describe('changedIconClass', () => {
-    it('includes ide-file-modified when not a temp file', () => {
-      expect(vm.changedIconClass).toContain('ide-file-modified');
+    it('includes file-modified when not a temp file', () => {
+      expect(vm.changedIconClass).toContain('file-modified');
     });
 
-    it('includes ide-file-addition when a temp file', () => {
+    it('includes file-addition when a temp file', () => {
       vm.file.tempFile = true;
 
-      expect(vm.changedIconClass).toContain('ide-file-addition');
+      expect(vm.changedIconClass).toContain('file-addition');
     });
   });
 });