Add tooltip and commit title to pipeline editor's status header

Changelog: changed

app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue

 <script>
-import { GlButton, GlIcon, GlLink, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
+import { GlButton, GlIcon, GlLink, GlLoadingIcon, GlSprintf, GlTooltipDirective } from '@gitlab/ui';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { truncateSha } from '~/lib/utils/text_utility';
 import { s__ } from '~/locale';
@@ -20,6 +20,7 @@ export const i18n = {
     `Pipeline|Pipeline %{idStart}#%{idEnd} %{statusStart}%{statusEnd} for %{commitStart}%{commitEnd}`,
   ),
   viewBtn: s__('Pipeline|View pipeline'),
+  viewCommit: s__('Pipeline|View commit'),
   pipelineNotTriggeredMsg: s__(
     'Pipeline|No pipeline was triggered for the latest changes due to the current CI/CD configuration.',
   ),
@@ -36,6 +37,9 @@ export default {
     GlSprintf,
     PipelineEditorMiniGraph,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   inject: ['projectFullPath'],
   props: {
     commitSha: {
@@ -60,13 +64,13 @@ export default {
         };
       },
       update(data) {
-        const { id, iid, commitPath = '', detailedStatus = {}, stages, status } =
+        const { id, iid, commit = {}, detailedStatus = {}, stages, status } =
           data.project?.pipeline || {};
 
         return {
           id,
           iid,
-          commitPath,
+          commit,
           detailedStatus,
           stages,
           status,
@@ -95,6 +99,16 @@ export default {
     };
   },
   computed: {
+    commitText() {
+      const shortSha = truncateSha(this.commitSha);
+      const commitTitle = this.pipeline.commit.title || '';
+
+      if (commitTitle.length > 0) {
+        return `${shortSha}: ${commitTitle}`;
+      }
+
+      return shortSha;
+    },
     hasPipelineData() {
       return Boolean(this.pipeline?.id);
     },
@@ -146,7 +160,7 @@ export default {
       </div>
     </template>
     <template v-else>
-      <div>
+      <div class="gl-text-truncate gl-md-max-w-50p gl-mr-1">
         <a :href="status.detailsPath" class="gl-mr-auto">
           <ci-icon :status="status" :size="16" data-testid="pipeline-status-icon" />
         </a>
@@ -158,12 +172,12 @@ export default {
             <template #status>{{ status.text }}</template>
             <template #commit>
               <gl-link
-                :href="pipeline.commitPath"
-                class="commit-sha gl-font-weight-normal"
-                target="_blank"
+                v-gl-tooltip.hover
+                :href="pipeline.commit.webPath"
+                :title="$options.i18n.viewCommit"
                 data-testid="pipeline-commit"
               >
-                {{ shortSha }}
+                {{ commitText }}
               </gl-link>
             </template>
           </gl-sprintf>
@@ -173,7 +187,6 @@ export default {
         <pipeline-editor-mini-graph :pipeline="pipeline" v-on="$listeners" />
         <gl-button
           class="gl-mt-2 gl-md-mt-0"
-          target="_blank"
           category="secondary"
           variant="confirm"
           :href="status.detailsPath"

app/assets/javascripts/pipeline_editor/graphql/queries/client/pipeline.graphql

 query getPipeline($fullPath: ID!, $sha: String!) {
   project(fullPath: $fullPath) {
     pipeline(sha: $sha) {
-      commitPath
       id
       iid
       status
+      commit {
+        title
+        webPath
+      }
       detailedStatus {
         detailsPath
         icon

app/assets/stylesheets/utilities.scss

@@ -290,3 +290,10 @@ $gl-line-height-42: px-to-rem(42px);
 .gl-focus-ring-border-1-gray-900\! {
   @include gl-focus($gl-border-size-1, $gray-900, true);
 }
+
+// Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2476
+.gl-md-max-w-50p {
+  @include gl-media-breakpoint-up(md) {
+    max-width: 50%;
+  }
+}

locale/gitlab.pot

@@ -25707,6 +25707,9 @@ msgstr ""
 msgid "Pipeline|Variables"
 msgstr ""
 
+msgid "Pipeline|View commit"
+msgstr ""
+
 msgid "Pipeline|View pipeline"
 msgstr ""
 

spec/frontend/pipeline_editor/components/header/pipeline_status_spec.js

@@ -96,12 +96,13 @@ describe('Pipeline Status', () => {
       it('renders pipeline data', () => {
         const {
           id,
+          commit: { title },
           detailedStatus: { detailsPath },
         } = mockProjectPipeline().pipeline;
 
         expect(findStatusIcon().exists()).toBe(true);
         expect(findPipelineId().text()).toBe(`#${id.match(/\d+/g)[0]}`);
-        expect(findPipelineCommit().text()).toBe(mockCommitSha);
+        expect(findPipelineCommit().text()).toBe(`${mockCommitSha}: ${title}`);
         expect(findPipelineViewBtn().attributes('href')).toBe(detailsPath);
       });
 

spec/frontend/pipeline_editor/mock_data.js

@@ -285,11 +285,14 @@ export const mockProjectPipeline = ({ hasStages = true } = {}) => {
 
   return {
     pipeline: {
-      commitPath: '/-/commit/aabbccdd',
       id: 'gid://gitlab/Ci::Pipeline/118',
       iid: '28',
       shortSha: mockCommitSha,
       status: 'SUCCESS',
+      commit: {
+        title: 'Update .gitlabe-ci.yml',
+        webPath: '/-/commit/aabbccdd',
+      },
       detailedStatus: {
         detailsPath: '/root/sample-ci-project/-/pipelines/118',
         group: 'success',