Open pipeline list panel when clicking CI icon in Web IDEide-pipeline-icon-open

Closes #47843

1 files changed, 15 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"