diff options
-rw-r--r-- | app/assets/javascripts/ide/components/ide_status_bar.vue | 21 | ||||
-rw-r--r-- | changelogs/unreleased/ide-pipeline-icon-open.yml | 5 | ||||
-rw-r--r-- | spec/javascripts/ide/components/ide_status_bar_spec.js | 26 | ||||
-rw-r--r-- | spec/javascripts/ide/mock_data.js | 3 |
4 files changed, 49 insertions, 6 deletions
diff --git a/app/assets/javascripts/ide/components/ide_status_bar.vue b/app/assets/javascripts/ide/components/ide_status_bar.vue index 0582ad32e92..715dc1bfb42 100644 --- a/app/assets/javascripts/ide/components/ide_status_bar.vue +++ b/app/assets/javascripts/ide/components/ide_status_bar.vue @@ -5,6 +5,7 @@ import tooltip from '~/vue_shared/directives/tooltip'; import timeAgoMixin from '~/vue_shared/mixins/timeago'; import CiIcon from '../../vue_shared/components/ci_icon.vue'; import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue'; +import { rightSidebarViews } from '../constants'; export default { components: { @@ -49,6 +50,7 @@ export default { this.stopPipelinePolling(); }, methods: { + ...mapActions(['setRightPane']), ...mapActions('pipelines', ['fetchLatestPipeline', 'stopPipelinePolling']), startTimer() { this.intervalId = setInterval(() => { @@ -69,24 +71,31 @@ export default { return `${this.currentProject.web_url}/commit/${shortSha}`; }, }, + rightSidebarViews, }; </script> <template> <footer class="ide-status-bar"> <div - v-if="lastCommit && lastCommitFormatedAge" + v-if="lastCommit" class="ide-status-branch" > <span v-if="latestPipeline && latestPipeline.details" class="ide-status-pipeline" > - <ci-icon - v-tooltip - :status="latestPipeline.details.status" - :title="latestPipeline.details.status.text" - /> + <button + type="button" + class="p-0 border-0 h-50" + @click="setRightPane($options.rightSidebarViews.pipelines)" + > + <ci-icon + v-tooltip + :status="latestPipeline.details.status" + :title="latestPipeline.details.status.text" + /> + </button> Pipeline <a :href="latestPipeline.details.status.details_path" diff --git a/changelogs/unreleased/ide-pipeline-icon-open.yml b/changelogs/unreleased/ide-pipeline-icon-open.yml new file mode 100644 index 00000000000..3a73ff2170f --- /dev/null +++ b/changelogs/unreleased/ide-pipeline-icon-open.yml @@ -0,0 +1,5 @@ +--- +title: Clicking CI icon in Web IDE now opens up pipelines panel +merge_request: +author: +type: added diff --git a/spec/javascripts/ide/components/ide_status_bar_spec.js b/spec/javascripts/ide/components/ide_status_bar_spec.js index 770dca9cb0f..9895682f388 100644 --- a/spec/javascripts/ide/components/ide_status_bar_spec.js +++ b/spec/javascripts/ide/components/ide_status_bar_spec.js @@ -13,6 +13,7 @@ describe('ideStatusBar', () => { store.state.currentProjectId = 'abcproject'; store.state.projects.abcproject = projectData; + store.state.currentBranchId = 'master'; vm = createComponentWithStore(Component, store).$mount(); }); @@ -60,4 +61,29 @@ describe('ideStatusBar', () => { expect(vm.getCommitPath('abc123de')).toBe('/commit/abc123de'); }); }); + + describe('pipeline status', () => { + it('opens right sidebar on clicking icon', done => { + spyOn(vm, 'setRightPane'); + Vue.set(vm.$store.state.pipelines, 'latestPipeline', { + details: { + status: { + text: 'success', + details_path: 'test', + icon: 'success', + }, + }, + }); + + vm + .$nextTick() + .then(() => { + vm.$el.querySelector('.ide-status-pipeline button').click(); + + expect(vm.setRightPane).toHaveBeenCalledWith('pipelines-list'); + }) + .then(done) + .catch(done.fail); + }); + }); }); diff --git a/spec/javascripts/ide/mock_data.js b/spec/javascripts/ide/mock_data.js index 80bf664d491..4bbda4c8e80 100644 --- a/spec/javascripts/ide/mock_data.js +++ b/spec/javascripts/ide/mock_data.js @@ -9,6 +9,9 @@ export const projectData = { master: { treeId: 'abcproject/master', can_push: true, + commit: { + id: '123', + }, }, }, mergeRequests: {}, |