Open pipeline list panel when clicking CI icon in Web IDE

Closes #47843

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"

changelogs/unreleased/ide-pipeline-icon-open.yml

+---
+title: Clicking CI icon in Web IDE now opens up pipelines panel
+merge_request:
+author:
+type: added

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);
+    });
+  });
 });

spec/javascripts/ide/mock_data.js

@@ -9,6 +9,9 @@ export const projectData = {
     master: {
       treeId: 'abcproject/master',
       can_push: true,
+      commit: {
+        id: '123',
+      },
     },
   },
   mergeRequests: {},