Add latest changes from gitlab-org/gitlab@master

6 files changed, 670 insertions, 63 deletions

diff --git a/spec/frontend/clusters_list/components/agent_table_spec.js b/spec/frontend/clusters_list/components/agent_table_spec.js
index 27de9b18f4e..dc7f0ebae74 100644
--- a/spec/frontend/clusters_list/components/agent_table_spec.js
+++ b/spec/frontend/clusters_list/components/agent_table_spec.js
@@ -1,65 +1,32 @@
 import { GlLink, GlIcon } from '@gitlab/ui';
+import { sprintf } from '~/locale';
 import AgentTable from '~/clusters_list/components/agent_table.vue';
 import DeleteAgentButton from '~/clusters_list/components/delete_agent_button.vue';
-import { ACTIVE_CONNECTION_TIME } from '~/clusters_list/constants';
+import { I18N_AGENT_TABLE } from '~/clusters_list/constants';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import { stubComponent } from 'helpers/stub_component';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
-
-const connectedTimeNow = new Date();
-const connectedTimeInactive = new Date(connectedTimeNow.getTime() - ACTIVE_CONNECTION_TIME);
+import { clusterAgents, connectedTimeNow, connectedTimeInactive } from './mock_data';
 
 const provideData = {
-  projectPath: 'path/to/project',
+  gitlabVersion: '14.8',
 };
 const propsData = {
-  agents: [
-    {
-      name: 'agent-1',
-      id: 'agent-1-id',
-      configFolder: {
-        webPath: '/agent/full/path',
-      },
-      webPath: '/agent-1',
-      status: 'unused',
-      lastContact: null,
-      tokens: null,
-    },
-    {
-      name: 'agent-2',
-      id: 'agent-2-id',
-      webPath: '/agent-2',
-      status: 'active',
-      lastContact: connectedTimeNow.getTime(),
-      tokens: {
-        nodes: [
-          {
-            lastUsedAt: connectedTimeNow,
-          },
-        ],
-      },
-    },
-    {
-      name: 'agent-3',
-      id: 'agent-3-id',
-      webPath: '/agent-3',
-      status: 'inactive',
-      lastContact: connectedTimeInactive.getTime(),
-      tokens: {
-        nodes: [
-          {
-            lastUsedAt: connectedTimeInactive,
-          },
-        ],
-      },
-    },
-  ],
+  agents: clusterAgents,
 };
 
 const DeleteAgentButtonStub = stubComponent(DeleteAgentButton, {
   template: `<div></div>`,
 });
 
+const outdatedTitle = I18N_AGENT_TABLE.versionOutdatedTitle;
+const mismatchTitle = I18N_AGENT_TABLE.versionMismatchTitle;
+const mismatchOutdatedTitle = I18N_AGENT_TABLE.versionMismatchOutdatedTitle;
+const outdatedText = sprintf(I18N_AGENT_TABLE.versionOutdatedText, {
+  version: provideData.gitlabVersion,
+});
+const mismatchText = I18N_AGENT_TABLE.versionMismatchText;
+
 describe('AgentTable', () => {
   let wrapper;
 
@@ -67,6 +34,7 @@ describe('AgentTable', () => {
   const findStatusIcon = (at) => wrapper.findAllComponents(GlIcon).at(at);
   const findStatusText = (at) => wrapper.findAllByTestId('cluster-agent-connection-status').at(at);
   const findLastContactText = (at) => wrapper.findAllByTestId('cluster-agent-last-contact').at(at);
+  const findVersionText = (at) => wrapper.findAllByTestId('cluster-agent-version').at(at);
   const findConfiguration = (at) =>
     wrapper.findAllByTestId('cluster-agent-configuration-link').at(at);
   const findDeleteAgentButton = () => wrapper.findAllComponents(DeleteAgentButton);
@@ -92,7 +60,7 @@ describe('AgentTable', () => {
       agentName    | link          | lineNumber
       ${'agent-1'} | ${'/agent-1'} | ${0}
       ${'agent-2'} | ${'/agent-2'} | ${1}
-    `('displays agent link', ({ agentName, link, lineNumber }) => {
+    `('displays agent link for $agentName', ({ agentName, link, lineNumber }) => {
       expect(findAgentLink(lineNumber).text()).toBe(agentName);
       expect(findAgentLink(lineNumber).attributes('href')).toBe(link);
     });
@@ -102,33 +70,92 @@ describe('AgentTable', () => {
       ${'Never connected'} | ${'status-neutral'}    | ${0}
       ${'Connected'}       | ${'status-success'}    | ${1}
       ${'Not connected'}   | ${'severity-critical'} | ${2}
-    `('displays agent connection status', ({ status, iconName, lineNumber }) => {
-      expect(findStatusText(lineNumber).text()).toBe(status);
-      expect(findStatusIcon(lineNumber).props('name')).toBe(iconName);
-    });
+    `(
+      'displays agent connection status as "$status" at line $lineNumber',
+      ({ status, iconName, lineNumber }) => {
+        expect(findStatusText(lineNumber).text()).toBe(status);
+        expect(findStatusIcon(lineNumber).props('name')).toBe(iconName);
+      },
+    );
 
     it.each`
       lastContact                                                  | lineNumber
       ${'Never'}                                                   | ${0}
       ${timeagoMixin.methods.timeFormatted(connectedTimeNow)}      | ${1}
       ${timeagoMixin.methods.timeFormatted(connectedTimeInactive)} | ${2}
-    `('displays agent last contact time', ({ lastContact, lineNumber }) => {
-      expect(findLastContactText(lineNumber).text()).toBe(lastContact);
-    });
+    `(
+      'displays agent last contact time as "$lastContact" at line $lineNumber',
+      ({ lastContact, lineNumber }) => {
+        expect(findLastContactText(lineNumber).text()).toBe(lastContact);
+      },
+    );
+
+    describe.each`
+      agent        | version   | podsNumber | versionMismatch | versionOutdated | title                    | texts                           | lineNumber
+      ${'agent-1'} | ${''}     | ${1}       | ${false}        | ${false}        | ${''}                    | ${''}                           | ${0}
+      ${'agent-2'} | ${'14.8'} | ${2}       | ${false}        | ${false}        | ${''}                    | ${''}                           | ${1}
+      ${'agent-3'} | ${'14.5'} | ${1}       | ${false}        | ${true}         | ${outdatedTitle}         | ${[outdatedText]}               | ${2}
+      ${'agent-4'} | ${'14.7'} | ${2}       | ${true}         | ${false}        | ${mismatchTitle}         | ${[mismatchText]}               | ${3}
+      ${'agent-5'} | ${'14.3'} | ${2}       | ${true}         | ${true}         | ${mismatchOutdatedTitle} | ${[mismatchText, outdatedText]} | ${4}
+    `(
+      'agent version column at line $lineNumber',
+      ({
+        agent,
+        version,
+        podsNumber,
+        versionMismatch,
+        versionOutdated,
+        title,
+        texts,
+        lineNumber,
+      }) => {
+        const findIcon = () => findVersionText(lineNumber).find(GlIcon);
+        const findPopover = () => wrapper.findByTestId(`popover-${agent}`);
+        const versionWarning = versionMismatch || versionOutdated;
+
+        it('shows the correct agent version', () => {
+          expect(findVersionText(lineNumber).text()).toBe(version);
+        });
+
+        if (versionWarning) {
+          it(`shows a warning icon when agent versions mismatch is ${versionMismatch} and outdated is ${versionOutdated} and the number of pods is ${podsNumber}`, () => {
+            expect(findIcon().props('name')).toBe('warning');
+          });
+
+          it(`renders correct title for the popover when agent versions mismatch is ${versionMismatch} and outdated is ${versionOutdated}`, () => {
+            expect(findPopover().props('title')).toBe(title);
+          });
+
+          it(`renders correct text for the popover when agent versions mismatch is ${versionMismatch} and outdated is ${versionOutdated}`, () => {
+            texts.forEach((text) => {
+              expect(findPopover().text()).toContain(text);
+            });
+          });
+        } else {
+          it(`doesn't show a warning icon with a popover when agent versions mismatch is ${versionMismatch} and outdated is ${versionOutdated} and the number of pods is ${podsNumber}`, () => {
+            expect(findIcon().exists()).toBe(false);
+            expect(findPopover().exists()).toBe(false);
+          });
+        }
+      },
+    );
 
     it.each`
       agentPath                   | hasLink  | lineNumber
       ${'.gitlab/agents/agent-1'} | ${true}  | ${0}
       ${'.gitlab/agents/agent-2'} | ${false} | ${1}
-    `('displays config file path', ({ agentPath, hasLink, lineNumber }) => {
-      const findLink = findConfiguration(lineNumber).find(GlLink);
+    `(
+      'displays config file path as "$agentPath" at line $lineNumber',
+      ({ agentPath, hasLink, lineNumber }) => {
+        const findLink = findConfiguration(lineNumber).find(GlLink);
 
-      expect(findLink.exists()).toBe(hasLink);
-      expect(findConfiguration(lineNumber).text()).toBe(agentPath);
-    });
+        expect(findLink.exists()).toBe(hasLink);
+        expect(findConfiguration(lineNumber).text()).toBe(agentPath);
+      },
+    );
 
     it('displays actions menu for each agent', () => {
-      expect(findDeleteAgentButton()).toHaveLength(3);
+      expect(findDeleteAgentButton()).toHaveLength(5);
     });
   });
 });
diff --git a/spec/frontend/clusters_list/components/agents_spec.js b/spec/frontend/clusters_list/components/agents_spec.js
index c8b86fb49c1..e1bd0b1a990 100644
--- a/spec/frontend/clusters_list/components/agents_spec.js
+++ b/spec/frontend/clusters_list/components/agents_spec.js
@@ -40,7 +40,13 @@ describe('Agents', () => {
       data: {
         project: {
           id: '1',
-          clusterAgents: { nodes: agents, pageInfo, tokens: { nodes: [] }, count },
+          clusterAgents: {
+            nodes: agents,
+            pageInfo,
+            connections: { nodes: [] },
+            tokens: { nodes: [] },
+            count,
+          },
           repository: { tree: { trees: { nodes: trees, pageInfo } } },
         },
       },
@@ -89,12 +95,14 @@ describe('Agents', () => {
         id: '1',
         name: 'agent-1',
         webPath: '/agent-1',
+        connections: null,
         tokens: null,
       },
       {
         id: '2',
         name: 'agent-2',
         webPath: '/agent-2',
+        connections: null,
         tokens: {
           nodes: [
             {
@@ -125,6 +133,7 @@ describe('Agents', () => {
         configFolder: undefined,
         status: 'unused',
         lastContact: null,
+        connections: null,
         tokens: null,
       },
       {
@@ -138,6 +147,7 @@ describe('Agents', () => {
         webPath: '/agent-2',
         status: 'active',
         lastContact: new Date(testDate).getTime(),
+        connections: null,
         tokens: {
           nodes: [
             {
diff --git a/spec/frontend/clusters_list/components/mock_data.js b/spec/frontend/clusters_list/components/mock_data.js
index e388d791b89..3d18b22d727 100644
--- a/spec/frontend/clusters_list/components/mock_data.js
+++ b/spec/frontend/clusters_list/components/mock_data.js
@@ -1,3 +1,5 @@
+import { ACTIVE_CONNECTION_TIME } from '~/clusters_list/constants';
+
 export const agentConfigurationsResponse = {
   data: {
     project: {
@@ -10,3 +12,113 @@ export const agentConfigurationsResponse = {
     },
   },
 };
+
+export const connectedTimeNow = new Date();
+export const connectedTimeInactive = new Date(connectedTimeNow.getTime() - ACTIVE_CONNECTION_TIME);
+
+export const clusterAgents = [
+  {
+    name: 'agent-1',
+    id: 'agent-1-id',
+    configFolder: {
+      webPath: '/agent/full/path',
+    },
+    webPath: '/agent-1',
+    status: 'unused',
+    lastContact: null,
+    tokens: null,
+  },
+  {
+    name: 'agent-2',
+    id: 'agent-2-id',
+    webPath: '/agent-2',
+    status: 'active',
+    lastContact: connectedTimeNow.getTime(),
+    connections: {
+      nodes: [
+        {
+          metadata: { version: 'v14.8' },
+        },
+        {
+          metadata: { version: 'v14.8' },
+        },
+      ],
+    },
+    tokens: {
+      nodes: [
+        {
+          lastUsedAt: connectedTimeNow,
+        },
+      ],
+    },
+  },
+  {
+    name: 'agent-3',
+    id: 'agent-3-id',
+    webPath: '/agent-3',
+    status: 'inactive',
+    lastContact: connectedTimeInactive.getTime(),
+    connections: {
+      nodes: [
+        {
+          metadata: { version: 'v14.5' },
+        },
+      ],
+    },
+    tokens: {
+      nodes: [
+        {
+          lastUsedAt: connectedTimeInactive,
+        },
+      ],
+    },
+  },
+  {
+    name: 'agent-4',
+    id: 'agent-4-id',
+    webPath: '/agent-4',
+    status: 'inactive',
+    lastContact: connectedTimeInactive.getTime(),
+    connections: {
+      nodes: [
+        {
+          metadata: { version: 'v14.7' },
+        },
+        {
+          metadata: { version: 'v14.8' },
+        },
+      ],
+    },
+    tokens: {
+      nodes: [
+        {
+          lastUsedAt: connectedTimeInactive,
+        },
+      ],
+    },
+  },
+  {
+    name: 'agent-5',
+    id: 'agent-5-id',
+    webPath: '/agent-5',
+    status: 'inactive',
+    lastContact: connectedTimeInactive.getTime(),
+    connections: {
+      nodes: [
+        {
+          metadata: { version: 'v14.5' },
+        },
+        {
+          metadata: { version: 'v14.3' },
+        },
+      ],
+    },
+    tokens: {
+      nodes: [
+        {
+          lastUsedAt: connectedTimeInactive,
+        },
+      ],
+    },
+  },
+];
diff --git a/spec/frontend/clusters_list/mocks/apollo.js b/spec/frontend/clusters_list/mocks/apollo.js
index 4e863e1c1e9..176896215a4 100644
--- a/spec/frontend/clusters_list/mocks/apollo.js
+++ b/spec/frontend/clusters_list/mocks/apollo.js
@@ -10,6 +10,9 @@ const token = {
 const tokens = {
   nodes: [token],
 };
+const connections = {
+  nodes: [],
+};
 const pageInfo = {
   endCursor: '',
   hasNextPage: false,
@@ -23,6 +26,7 @@ export const createAgentResponse = {
     createClusterAgent: {
       clusterAgent: {
         ...agent,
+        connections,
         tokens,
       },
       errors: [],
@@ -35,6 +39,7 @@ export const createAgentErrorResponse = {
     createClusterAgent: {
       clusterAgent: {
         ...agent,
+        connections,
         tokens,
       },
       errors: ['could not create agent'],
@@ -66,7 +71,7 @@ export const getAgentResponse = {
   data: {
     project: {
       id: 'project-1',
-      clusterAgents: { nodes: [{ ...agent, tokens }], pageInfo, count },
+      clusterAgents: { nodes: [{ ...agent, connections, tokens }], pageInfo, count },
       repository: {
         tree: {
           trees: { nodes: [{ ...agent, path: null }], pageInfo },
diff --git a/spec/frontend/pipelines/mock_data.js b/spec/frontend/pipelines/mock_data.js
index 5af76adedde..59d4e808b32 100644
--- a/spec/frontend/pipelines/mock_data.js
+++ b/spec/frontend/pipelines/mock_data.js
@@ -711,3 +711,433 @@ export const mockPipeline = (projectPath) => {
     viewType: 'root',
   };
 };
+
+export const mockPipelineTag = () => {
+  return {
+    pipeline: {
+      id: 311,
+      iid: 37,
+      user: {
+        id: 1,
+        username: 'root',
+        name: 'Administrator',
+        state: 'active',
+        avatar_url:
+          'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+        web_url: 'http://gdk.test:3000/root',
+        show_status: false,
+        path: '/root',
+      },
+      active: false,
+      source: 'push',
+      created_at: '2022-02-02T15:39:04.012Z',
+      updated_at: '2022-02-02T15:40:59.573Z',
+      path: '/root/mr-widgets/-/pipelines/311',
+      flags: {
+        stuck: false,
+        auto_devops: false,
+        merge_request: false,
+        yaml_errors: false,
+        retryable: true,
+        cancelable: false,
+        failure_reason: false,
+        detached_merge_request_pipeline: false,
+        merge_request_pipeline: false,
+        merge_train_pipeline: false,
+        latest: true,
+      },
+      details: {
+        status: {
+          icon: 'status_warning',
+          text: 'passed',
+          label: 'passed with warnings',
+          group: 'success-with-warnings',
+          tooltip: 'passed',
+          has_details: true,
+          details_path: '/root/mr-widgets/-/pipelines/311',
+          illustration: null,
+          favicon:
+            '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+        },
+        stages: [
+          {
+            name: 'accessibility',
+            title: 'accessibility: passed',
+            status: {
+              icon: 'status_success',
+              text: 'passed',
+              label: 'passed',
+              group: 'success',
+              tooltip: 'passed',
+              has_details: true,
+              details_path: '/root/mr-widgets/-/pipelines/311#accessibility',
+              illustration: null,
+              favicon:
+                '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+            },
+            path: '/root/mr-widgets/-/pipelines/311#accessibility',
+            dropdown_path: '/root/mr-widgets/-/pipelines/311/stage.json?stage=accessibility',
+          },
+          {
+            name: 'validate',
+            title: 'validate: passed with warnings',
+            status: {
+              icon: 'status_warning',
+              text: 'passed',
+              label: 'passed with warnings',
+              group: 'success-with-warnings',
+              tooltip: 'passed',
+              has_details: true,
+              details_path: '/root/mr-widgets/-/pipelines/311#validate',
+              illustration: null,
+              favicon:
+                '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+            },
+            path: '/root/mr-widgets/-/pipelines/311#validate',
+            dropdown_path: '/root/mr-widgets/-/pipelines/311/stage.json?stage=validate',
+          },
+          {
+            name: 'test',
+            title: 'test: passed',
+            status: {
+              icon: 'status_success',
+              text: 'passed',
+              label: 'passed',
+              group: 'success',
+              tooltip: 'passed',
+              has_details: true,
+              details_path: '/root/mr-widgets/-/pipelines/311#test',
+              illustration: null,
+              favicon:
+                '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+            },
+            path: '/root/mr-widgets/-/pipelines/311#test',
+            dropdown_path: '/root/mr-widgets/-/pipelines/311/stage.json?stage=test',
+          },
+          {
+            name: 'build',
+            title: 'build: passed',
+            status: {
+              icon: 'status_success',
+              text: 'passed',
+              label: 'passed',
+              group: 'success',
+              tooltip: 'passed',
+              has_details: true,
+              details_path: '/root/mr-widgets/-/pipelines/311#build',
+              illustration: null,
+              favicon:
+                '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+            },
+            path: '/root/mr-widgets/-/pipelines/311#build',
+            dropdown_path: '/root/mr-widgets/-/pipelines/311/stage.json?stage=build',
+          },
+        ],
+        duration: 93,
+        finished_at: '2022-02-02T15:40:59.384Z',
+        name: 'Pipeline',
+        manual_actions: [],
+        scheduled_actions: [],
+      },
+      ref: {
+        name: 'test',
+        path: '/root/mr-widgets/-/commits/test',
+        tag: true,
+        branch: false,
+        merge_request: false,
+      },
+      commit: {
+        id: '9b92b4f730d1611bd9a086ca221ae206d5da1e59',
+        short_id: '9b92b4f7',
+        created_at: '2022-01-13T13:59:03.000+00:00',
+        parent_ids: ['0ba763634114e207dc72c65c8e9459556b1204fb'],
+        title: 'Update hello_world.js',
+        message: 'Update hello_world.js',
+        author_name: 'Administrator',
+        author_email: 'admin@example.com',
+        authored_date: '2022-01-13T13:59:03.000+00:00',
+        committer_name: 'Administrator',
+        committer_email: 'admin@example.com',
+        committed_date: '2022-01-13T13:59:03.000+00:00',
+        trailers: {},
+        web_url:
+          'http://gdk.test:3000/root/mr-widgets/-/commit/9b92b4f730d1611bd9a086ca221ae206d5da1e59',
+        author: {
+          id: 1,
+          username: 'root',
+          name: 'Administrator',
+          state: 'active',
+          avatar_url:
+            'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+          web_url: 'http://gdk.test:3000/root',
+          show_status: false,
+          path: '/root',
+        },
+        author_gravatar_url:
+          'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+        commit_url:
+          'http://gdk.test:3000/root/mr-widgets/-/commit/9b92b4f730d1611bd9a086ca221ae206d5da1e59',
+        commit_path: '/root/mr-widgets/-/commit/9b92b4f730d1611bd9a086ca221ae206d5da1e59',
+      },
+      retry_path: '/root/mr-widgets/-/pipelines/311/retry',
+      delete_path: '/root/mr-widgets/-/pipelines/311',
+      failed_builds: [
+        {
+          id: 1696,
+          name: 'fmt',
+          started: '2022-02-02T15:39:45.192Z',
+          complete: true,
+          archived: false,
+          build_path: '/root/mr-widgets/-/jobs/1696',
+          retry_path: '/root/mr-widgets/-/jobs/1696/retry',
+          playable: false,
+          scheduled: false,
+          created_at: '2022-02-02T15:39:04.136Z',
+          updated_at: '2022-02-02T15:39:57.969Z',
+          status: {
+            icon: 'status_warning',
+            text: 'failed',
+            label: 'failed (allowed to fail)',
+            group: 'failed-with-warnings',
+            tooltip: 'failed - (script failure) (allowed to fail)',
+            has_details: true,
+            details_path: '/root/mr-widgets/-/jobs/1696',
+            illustration: {
+              image:
+                '/assets/illustrations/skipped-job_empty-29a8a37d8a61d1b6f68cf3484f9024e53cd6eb95e28eae3554f8011a1146bf27.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: '/root/mr-widgets/-/jobs/1696/retry',
+              method: 'post',
+              button_title: 'Retry this job',
+            },
+          },
+          recoverable: false,
+        },
+      ],
+      project: {
+        id: 23,
+        name: 'mr-widgets',
+        full_path: '/root/mr-widgets',
+        full_name: 'Administrator / mr-widgets',
+      },
+      triggered_by: null,
+      triggered: [],
+    },
+    pipelineScheduleUrl: 'foo',
+    pipelineKey: 'id',
+    viewType: 'root',
+  };
+};
+
+export const mockPipelineBranch = () => {
+  return {
+    pipeline: {
+      id: 268,
+      iid: 34,
+      user: {
+        id: 1,
+        username: 'root',
+        name: 'Administrator',
+        state: 'active',
+        avatar_url:
+          'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+        web_url: 'http://gdk.test:3000/root',
+        show_status: false,
+        path: '/root',
+      },
+      active: false,
+      source: 'push',
+      created_at: '2022-01-14T17:40:27.866Z',
+      updated_at: '2022-01-14T18:02:35.850Z',
+      path: '/root/mr-widgets/-/pipelines/268',
+      flags: {
+        stuck: false,
+        auto_devops: false,
+        merge_request: false,
+        yaml_errors: false,
+        retryable: true,
+        cancelable: false,
+        failure_reason: false,
+        detached_merge_request_pipeline: false,
+        merge_request_pipeline: false,
+        merge_train_pipeline: false,
+        latest: true,
+      },
+      details: {
+        status: {
+          icon: 'status_warning',
+          text: 'passed',
+          label: 'passed with warnings',
+          group: 'success-with-warnings',
+          tooltip: 'passed',
+          has_details: true,
+          details_path: '/root/mr-widgets/-/pipelines/268',
+          illustration: null,
+          favicon:
+            '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+        },
+        stages: [
+          {
+            name: 'validate',
+            title: 'validate: passed with warnings',
+            status: {
+              icon: 'status_warning',
+              text: 'passed',
+              label: 'passed with warnings',
+              group: 'success-with-warnings',
+              tooltip: 'passed',
+              has_details: true,
+              details_path: '/root/mr-widgets/-/pipelines/268#validate',
+              illustration: null,
+              favicon:
+                '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+            },
+            path: '/root/mr-widgets/-/pipelines/268#validate',
+            dropdown_path: '/root/mr-widgets/-/pipelines/268/stage.json?stage=validate',
+          },
+          {
+            name: 'test',
+            title: 'test: passed',
+            status: {
+              icon: 'status_success',
+              text: 'passed',
+              label: 'passed',
+              group: 'success',
+              tooltip: 'passed',
+              has_details: true,
+              details_path: '/root/mr-widgets/-/pipelines/268#test',
+              illustration: null,
+              favicon:
+                '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+            },
+            path: '/root/mr-widgets/-/pipelines/268#test',
+            dropdown_path: '/root/mr-widgets/-/pipelines/268/stage.json?stage=test',
+          },
+          {
+            name: 'build',
+            title: 'build: passed',
+            status: {
+              icon: 'status_success',
+              text: 'passed',
+              label: 'passed',
+              group: 'success',
+              tooltip: 'passed',
+              has_details: true,
+              details_path: '/root/mr-widgets/-/pipelines/268#build',
+              illustration: null,
+              favicon:
+                '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+            },
+            path: '/root/mr-widgets/-/pipelines/268#build',
+            dropdown_path: '/root/mr-widgets/-/pipelines/268/stage.json?stage=build',
+          },
+        ],
+        duration: 75,
+        finished_at: '2022-01-14T18:02:35.842Z',
+        name: 'Pipeline',
+        manual_actions: [],
+        scheduled_actions: [],
+      },
+      ref: {
+        name: 'update-ci',
+        path: '/root/mr-widgets/-/commits/update-ci',
+        tag: false,
+        branch: true,
+        merge_request: false,
+      },
+      commit: {
+        id: '96aef9ecec5752c09371c1ade5fc77860aafc863',
+        short_id: '96aef9ec',
+        created_at: '2022-01-14T17:40:26.000+00:00',
+        parent_ids: ['06860257572d4cf84b73806250b78169050aed83'],
+        title: 'Update main.tf',
+        message: 'Update main.tf',
+        author_name: 'Administrator',
+        author_email: 'admin@example.com',
+        authored_date: '2022-01-14T17:40:26.000+00:00',
+        committer_name: 'Administrator',
+        committer_email: 'admin@example.com',
+        committed_date: '2022-01-14T17:40:26.000+00:00',
+        trailers: {},
+        web_url:
+          'http://gdk.test:3000/root/mr-widgets/-/commit/96aef9ecec5752c09371c1ade5fc77860aafc863',
+        author: {
+          id: 1,
+          username: 'root',
+          name: 'Administrator',
+          state: 'active',
+          avatar_url:
+            'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+          web_url: 'http://gdk.test:3000/root',
+          show_status: false,
+          path: '/root',
+        },
+        author_gravatar_url:
+          'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+        commit_url:
+          'http://gdk.test:3000/root/mr-widgets/-/commit/96aef9ecec5752c09371c1ade5fc77860aafc863',
+        commit_path: '/root/mr-widgets/-/commit/96aef9ecec5752c09371c1ade5fc77860aafc863',
+      },
+      retry_path: '/root/mr-widgets/-/pipelines/268/retry',
+      delete_path: '/root/mr-widgets/-/pipelines/268',
+      failed_builds: [
+        {
+          id: 1260,
+          name: 'fmt',
+          started: '2022-01-14T17:40:36.435Z',
+          complete: true,
+          archived: false,
+          build_path: '/root/mr-widgets/-/jobs/1260',
+          retry_path: '/root/mr-widgets/-/jobs/1260/retry',
+          playable: false,
+          scheduled: false,
+          created_at: '2022-01-14T17:40:27.879Z',
+          updated_at: '2022-01-14T17:40:42.129Z',
+          status: {
+            icon: 'status_warning',
+            text: 'failed',
+            label: 'failed (allowed to fail)',
+            group: 'failed-with-warnings',
+            tooltip: 'failed - (script failure) (allowed to fail)',
+            has_details: true,
+            details_path: '/root/mr-widgets/-/jobs/1260',
+            illustration: {
+              image:
+                '/assets/illustrations/skipped-job_empty-29a8a37d8a61d1b6f68cf3484f9024e53cd6eb95e28eae3554f8011a1146bf27.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: '/root/mr-widgets/-/jobs/1260/retry',
+              method: 'post',
+              button_title: 'Retry this job',
+            },
+          },
+          recoverable: false,
+        },
+      ],
+      project: {
+        id: 23,
+        name: 'mr-widgets',
+        full_path: '/root/mr-widgets',
+        full_name: 'Administrator / mr-widgets',
+      },
+      triggered_by: null,
+      triggered: [],
+    },
+    pipelineScheduleUrl: 'foo',
+    pipelineKey: 'id',
+    viewType: 'root',
+  };
+};
diff --git a/spec/frontend/pipelines/pipeline_url_spec.js b/spec/frontend/pipelines/pipeline_url_spec.js
index d7423c6614b..2f083faaaa6 100644
--- a/spec/frontend/pipelines/pipeline_url_spec.js
+++ b/spec/frontend/pipelines/pipeline_url_spec.js
@@ -1,7 +1,7 @@
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { trimText } from 'helpers/text_helper';
 import PipelineUrlComponent from '~/pipelines/components/pipelines_list/pipeline_url.vue';
-import { mockPipeline } from './mock_data';
+import { mockPipeline, mockPipelineBranch, mockPipelineTag } from './mock_data';
 
 const projectPath = 'test/test';
 
@@ -22,6 +22,8 @@ describe('Pipeline Url Component', () => {
   const findTrainTag = () => wrapper.findByTestId('pipeline-url-train');
   const findRefName = () => wrapper.findByTestId('merge-request-ref');
   const findCommitShortSha = () => wrapper.findByTestId('commit-short-sha');
+  const findCommitIcon = () => wrapper.findByTestId('commit-icon');
+  const findCommitIconType = () => wrapper.findByTestId('commit-icon-type');
 
   const findCommitTitleContainer = () => wrapper.findByTestId('commit-title-container');
   const findCommitTitle = (commitWrapper) => commitWrapper.find('[data-testid="commit-title"]');
@@ -203,11 +205,32 @@ describe('Pipeline Url Component', () => {
   describe('with the rearrangePipelinesTable feature flag turned on', () => {
     it('should render the commit title, commit reference and commit-short-sha', () => {
       createComponent({}, true);
+
       const commitWrapper = findCommitTitleContainer();
 
       expect(findCommitTitle(commitWrapper).exists()).toBe(true);
       expect(findRefName().exists()).toBe(true);
       expect(findCommitShortSha().exists()).toBe(true);
     });
+
+    it('should render commit icon tooltip', () => {
+      createComponent({}, true);
+
+      expect(findCommitIcon().attributes('title')).toBe('Commit');
+    });
+
+    it.each`
+      pipeline                | expectedTitle
+      ${mockPipelineTag()}    | ${'Tag'}
+      ${mockPipelineBranch()} | ${'Branch'}
+      ${mockPipeline()}       | ${'Merge Request'}
+    `(
+      'should render tooltip $expectedTitle for commit icon type',
+      ({ pipeline, expectedTitle }) => {
+        createComponent(pipeline, true);
+
+        expect(findCommitIconType().attributes('title')).toBe(expectedTitle);
+      },
+    );
   });
 });