Rearrange pipelines page

This changes the pipelines page, consolidating columns
and increasing the size of some of them, the changes
are behind the rearrange_pipelines_table feature flag

app/assets/javascripts/pipelines/components/pipelines_list/pipeline_triggerer.vue

@@ -26,7 +26,7 @@ export default {
       v-if="user"
       :link-href="user.path"
       :img-src="user.avatar_url"
-      :img-size="26"
+      :img-size="32"
       :tooltip-text="user.name"
       class="gl-ml-3 js-pipeline-url-user"
     />

app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue

 <script>
-import { GlLink, GlPopover, GlSprintf, GlTooltipDirective, GlBadge } from '@gitlab/ui';
+import { GlIcon, GlLink, GlPopover, GlSprintf, GlTooltipDirective, GlBadge } from '@gitlab/ui';
+import { __, sprintf } from '~/locale';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
 import { SCHEDULE_ORIGIN } from '../../constants';
 
 export default {
   components: {
+    GlIcon,
     GlLink,
     GlPopover,
     GlSprintf,
     GlBadge,
+    TooltipOnTruncate,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -33,11 +37,12 @@ export default {
       type: String,
       required: true,
     },
+    viewType: {
+      type: String,
+      required: true,
+    },
   },
   computed: {
-    user() {
-      return this.pipeline.user;
-    },
     isScheduled() {
       return this.pipeline.source === SCHEDULE_ORIGIN;
     },
@@ -53,12 +58,144 @@ export default {
     autoDevopsHelpPath() {
       return helpPagePath('topics/autodevops/index.md');
     },
+    mergeRequestRef() {
+      return this.pipeline?.merge_request;
+    },
+    commitRef() {
+      return this.pipeline?.ref;
+    },
+    commitTag() {
+      return this.commitRef?.tag;
+    },
+    commitUrl() {
+      return this.pipeline?.commit?.commit_path;
+    },
+    commitShortSha() {
+      return this.pipeline?.commit?.short_id;
+    },
+    refUrl() {
+      return this.commitRef?.ref_url || this.commitRef?.path;
+    },
+    tooltipTitle() {
+      return this.mergeRequestRef?.title || this.commitRef?.name;
+    },
+    commitAuthor() {
+      let commitAuthorInformation;
+      const pipelineCommit = this.pipeline?.commit;
+      const pipelineCommitAuthor = pipelineCommit?.author;
+
+      if (!pipelineCommit) {
+        return null;
+      }
+
+      // 1. person who is an author of a commit might be a GitLab user
+      if (pipelineCommitAuthor) {
+        // 2. if person who is an author of a commit is a GitLab user
+        // they can have a GitLab avatar
+        if (pipelineCommitAuthor?.avatar_url) {
+          commitAuthorInformation = pipelineCommitAuthor;
+
+          // 3. If GitLab user does not have avatar, they might have a Gravatar
+        } else if (pipelineCommit.author_gravatar_url) {
+          commitAuthorInformation = {
+            ...pipelineCommitAuthor,
+            avatar_url: pipelineCommit.author_gravatar_url,
+          };
+        }
+        // 4. If committer is not a GitLab User, they can have a Gravatar
+      } else {
+        commitAuthorInformation = {
+          avatar_url: pipelineCommit.author_gravatar_url,
+          path: `mailto:${pipelineCommit.author_email}`,
+          username: pipelineCommit.author_name,
+        };
+      }
+
+      return commitAuthorInformation;
+    },
+    commitIcon() {
+      let name = '';
+
+      if (this.commitTag) {
+        name = 'tag';
+      } else if (this.mergeRequestRef) {
+        name = 'git-merge';
+      } else {
+        name = 'branch';
+      }
+
+      return name;
+    },
+    commitTitle() {
+      return this.pipeline?.commit?.title;
+    },
+    hasAuthor() {
+      return (
+        this.commitAuthor?.avatar_url && this.commitAuthor?.path && this.commitAuthor?.username
+      );
+    },
+    userImageAltDescription() {
+      return this.commitAuthor?.username
+        ? sprintf(__("%{username}'s avatar"), { username: this.commitAuthor.username })
+        : null;
+    },
+    rearrangePipelinesTable() {
+      return this.glFeatures?.rearrangePipelinesTable;
+    },
   },
 };
 </script>
 <template>
   <div class="pipeline-tags" data-testid="pipeline-url-table-cell">
+    <template v-if="rearrangePipelinesTable">
+      <div class="commit-title gl-mb-2" data-testid="commit-title-container">
+        <span v-if="commitTitle" class="gl-display-flex">
+          <tooltip-on-truncate :title="commitTitle" class="flex-truncate-child gl-flex-grow-1">
+            <gl-link
+              :href="commitUrl"
+              class="commit-row-message gl-text-gray-900"
+              data-testid="commit-title"
+              >{{ commitTitle }}</gl-link
+            >
+          </tooltip-on-truncate>
+        </span>
+        <span v-else>{{ __("Can't find HEAD commit for this branch") }}</span>
+      </div>
+      <div class="gl-mb-2">
+        <gl-link
+          :href="pipeline.path"
+          class="gl-text-decoration-underline gl-text-blue-600!"
+          data-testid="pipeline-url-link"
+          data-qa-selector="pipeline_url_link"
+        >
+          #{{ pipeline[pipelineKey] }}
+        </gl-link>
+        <!--Commit row-->
+        <div class="icon-container gl-display-inline-block">
+          <gl-icon :name="commitIcon" />
+        </div>
+        <tooltip-on-truncate :title="tooltipTitle" truncate-target="child" placement="top">
+          <gl-link
+            v-if="mergeRequestRef"
+            :href="mergeRequestRef.path"
+            class="ref-name"
+            data-testid="merge-request-ref"
+            >{{ mergeRequestRef.iid }}</gl-link
+          >
+          <gl-link v-else :href="refUrl" class="ref-name" data-testid="commit-ref-name">{{
+            commitRef.name
+          }}</gl-link>
+        </tooltip-on-truncate>
+        <gl-icon name="commit" class="commit-icon" />
+
+        <gl-link :href="commitUrl" class="commit-sha mr-0" data-testid="commit-short-sha">{{
+          commitShortSha
+        }}</gl-link>
+        <!--End of commit row-->
+      </div>
+    </template>
     <gl-link
+      v-if="!rearrangePipelinesTable"
       :href="pipeline.path"
       class="gl-text-decoration-underline"
       data-testid="pipeline-url-link"
@@ -66,7 +203,7 @@ export default {
     >
       #{{ pipeline[pipelineKey] }}
     </gl-link>
-    <div class="label-container">
+    <div class="label-container gl-mt-1">
       <gl-badge
         v-if="isScheduled"
         v-gl-tooltip

app/assets/javascripts/pipelines/components/pipelines_list/pipelines_status_badge.vue

@@ -3,12 +3,16 @@ import CodeQualityWalkthrough from '~/code_quality_walkthrough/components/step.v
 import { PIPELINE_STATUSES } from '~/code_quality_walkthrough/constants';
 import { CHILD_VIEW } from '~/pipelines/constants';
 import CiBadge from '~/vue_shared/components/ci_badge_link.vue';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import PipelinesTimeago from './time_ago.vue';
 
 export default {
   components: {
     CodeQualityWalkthrough,
     CiBadge,
+    PipelinesTimeago,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     pipeline: {
       type: Object,
@@ -40,6 +44,9 @@ export default {
     codeQualityBuildPath() {
       return this.pipeline?.details?.code_quality_build_path;
     },
+    rearrangePipelinesTable() {
+      return this.glFeatures?.rearrangePipelinesTable;
+    },
   },
 };
 </script>
@@ -48,11 +55,13 @@ export default {
   <div>
     <ci-badge
       id="js-code-quality-walkthrough"
+      class="gl-mb-3"
       :status="pipelineStatus"
       :show-text="!isChildView"
       :icon-classes="'gl-vertical-align-middle!'"
       data-qa-selector="pipeline_commit_status"
     />
+    <pipelines-timeago v-if="rearrangePipelinesTable" class="gl-mt-3" :pipeline="pipeline" />
     <code-quality-walkthrough
       v-if="shouldRenderCodeQualityWalkthrough"
       :step="codeQualityStep"

app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue

 <script>
 import { GlTableLite, GlTooltipDirective } from '@gitlab/ui';
-import { s__ } from '~/locale';
+import { s__, __ } from '~/locale';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import eventHub from '../../event_hub';
 import PipelineMiniGraph from './pipeline_mini_graph.vue';
 import PipelineOperations from './pipeline_operations.vue';
@@ -33,6 +34,7 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  mixins: [glFeatureFlagMixin()],
   props: {
     pipelines: {
       type: Array,
@@ -72,16 +74,18 @@ export default {
           key: 'status',
           label: s__('Pipeline|Status'),
           thClass: DEFAULT_TH_CLASSES,
-          columnClass: 'gl-w-10p',
+          columnClass: this.rearrangePipelinesTable ? 'gl-w-15p' : 'gl-w-10p',
           tdClass: DEFAULT_TD_CLASS,
           thAttr: { 'data-testid': 'status-th' },
         },
         {
           key: 'pipeline',
-          label: this.pipelineKeyOption.label,
+          label: this.rearrangePipelinesTable ? __('Pipeline') : this.pipelineKeyOption.label,
           thClass: DEFAULT_TH_CLASSES,
-          tdClass: `${DEFAULT_TD_CLASS} ${HIDE_TD_ON_MOBILE}`,
-          columnClass: 'gl-w-10p',
+          tdClass: this.rearrangePipelinesTable
+            ? `${DEFAULT_TD_CLASS}`
+            : `${DEFAULT_TD_CLASS} ${HIDE_TD_ON_MOBILE}`,
+          columnClass: this.rearrangePipelinesTable ? 'gl-w-30p' : 'gl-w-10p',
           thAttr: { 'data-testid': 'pipeline-th' },
         },
         {
@@ -113,7 +117,7 @@ export default {
           label: s__('Pipeline|Duration'),
           thClass: DEFAULT_TH_CLASSES,
           tdClass: DEFAULT_TD_CLASS,
-          columnClass: 'gl-w-15p',
+          columnClass: this.rearrangePipelinesTable ? 'gl-w-5p' : 'gl-w-15p',
           thAttr: { 'data-testid': 'timeago-th' },
         },
         {
@@ -124,7 +128,13 @@ export default {
           thAttr: { 'data-testid': 'actions-th' },
         },
       ];
-      return fields;
+
+      return !this.rearrangePipelinesTable
+        ? fields
+        : fields.filter((field) => !['commit', 'timeago'].includes(field.key));
+    },
+    rearrangePipelinesTable() {
+      return this.glFeatures?.rearrangePipelinesTable;
     },
   },
   watch: {
@@ -182,6 +192,7 @@ export default {
           :pipeline="item"
           :pipeline-schedule-url="pipelineScheduleUrl"
           :pipeline-key="pipelineKeyOption.key"
+          :view-type="viewType"
         />
       </template>
 

app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue

@@ -54,11 +54,14 @@ export default {
     showSkipped() {
       return !this.duration && !this.finishedTime && this.skipped;
     },
+    shouldDisplayAsBlock() {
+      return this.glFeatures?.rearrangePipelinesTable;
+    },
   },
 };
 </script>
 <template>
-  <div>
+  <div class="{ 'gl-display-block': shouldDisplayAsBlock }">
     <span v-if="showInProgress" data-testid="pipeline-in-progress">
       <gl-icon v-if="stuck" name="warning" class="gl-mr-2" :size="12" data-testid="warning-icon" />
       <gl-icon

app/controllers/projects/merge_requests_controller.rb

@@ -44,6 +44,7 @@ class Projects::MergeRequestsController < Projects::MergeRequests::ApplicationCo
     push_frontend_feature_flag(:mr_attention_requests, project, default_enabled: :yaml)
     push_frontend_feature_flag(:refactor_mr_widgets_extensions, @project, default_enabled: :yaml)
     push_frontend_feature_flag(:rebase_without_ci_ui, @project, default_enabled: :yaml)
+    push_frontend_feature_flag(:rearrange_pipelines_table, project, default_enabled: :yaml)
     # Usage data feature flags
     push_frontend_feature_flag(:users_expanding_widgets_usage_data, @project, default_enabled: :yaml)
     push_frontend_feature_flag(:diff_settings_usage_data, default_enabled: :yaml)

app/controllers/projects/pipelines_controller.rb

@@ -13,6 +13,9 @@ class Projects::PipelinesController < Projects::ApplicationController
   before_action :authorize_create_pipeline!, only: [:new, :create, :config_variables]
   before_action :authorize_update_pipeline!, only: [:retry, :cancel]
   before_action :ensure_pipeline, only: [:show, :downloadable_artifacts]
+  before_action do
+    push_frontend_feature_flag(:rearrange_pipelines_table, project, default_enabled: :yaml)
+  end
 
   before_action do
     push_frontend_feature_flag(:jobs_tab_vue, @project, default_enabled: :yaml)

config/feature_flags/development/rearrange_pipelines_table.yml

+---
+name: rearrange_pipelines_table
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/72545
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/343286
+milestone: '14.8'
+type: development
+group: group::pipeline execution
+default_enabled: false

qa/qa/page/project/pipeline/index.rb

@@ -26,11 +26,11 @@ module QA
           end
 
           def wait_for_latest_pipeline_succeeded
-            wait_for_latest_pipeline_status { has_text?('passed') }
+            wait_for_latest_pipeline_status { has_selector?(".ci-status-icon-success") }
           end
 
           def wait_for_latest_pipeline_completed
-            wait_for_latest_pipeline_status { has_text?('passed') || has_text?('failed') }
+            wait_for_latest_pipeline_status { has_selector?(".ci-status-icon-success") || has_selector?(".ci-status-icon-failed") }
           end
 
           def wait_for_latest_pipeline_status

spec/features/merge_request/user_sees_pipelines_spec.rb

@@ -125,6 +125,7 @@ RSpec.describe 'Merge request > User sees pipelines', :js do
 
       before do
         stub_feature_flags(ci_disallow_to_create_merge_request_pipelines_in_target_project: false)
+        stub_feature_flags(rearrange_pipelines_table: false)
       end
 
       it 'creates a pipeline in the parent project when user proceeds with the warning' do

spec/features/projects/pipelines/pipelines_spec.rb

@@ -159,7 +159,7 @@ RSpec.describe 'Pipelines', :js do
         end
       end
 
-      context 'when pipeline is detached merge request pipeline' do
+      context 'when pipeline is detached merge request pipeline, with rearrange_pipelines_table feature flag turned off' do
         let(:merge_request) do
           create(:merge_request,
             :with_detached_merge_request_pipeline,
@@ -172,6 +172,8 @@ RSpec.describe 'Pipelines', :js do
         let(:target_project) { project }
 
         before do
+          stub_feature_flags(rearrange_pipelines_table: false)
+
           visit project_pipelines_path(source_project)
         end
 
@@ -201,7 +203,47 @@ RSpec.describe 'Pipelines', :js do
         end
       end
 
-      context 'when pipeline is merge request pipeline' do
+      context 'when pipeline is detached merge request pipeline, with rearrange_pipelines_table feature flag turned on' do
+        let(:merge_request) do
+          create(:merge_request,
+                 :with_detached_merge_request_pipeline,
+                 source_project: source_project,
+                 target_project: target_project)
+        end
+
+        let!(:pipeline) { merge_request.all_pipelines.first }
+        let(:source_project) { project }
+        let(:target_project) { project }
+
+        before do
+          stub_feature_flags(rearrange_pipelines_table: true)
+
+          visit project_pipelines_path(source_project)
+        end
+
+        shared_examples_for 'detached merge request pipeline' do
+          it 'shows pipeline information without pipeline ref', :sidekiq_might_not_need_inline do
+            within '.pipeline-tags' do
+              expect(page).to have_content('detached')
+
+              expect(page).to have_link(merge_request.iid,
+                                        href: project_merge_request_path(project, merge_request))
+
+              expect(page).not_to have_link(pipeline.ref)
+            end
+          end
+        end
+
+        it_behaves_like 'detached merge request pipeline'
+
+        context 'when source project is a forked project' do
+          let(:source_project) { fork_project(project, user, repository: true) }
+
+          it_behaves_like 'detached merge request pipeline'
+        end
+      end
+
+      context 'when pipeline is merge request pipeline, with rearrange_pipelines_table feature flag turned off' do
         let(:merge_request) do
           create(:merge_request,
             :with_merge_request_pipeline,
@@ -215,6 +257,8 @@ RSpec.describe 'Pipelines', :js do
         let(:target_project) { project }
 
         before do
+          stub_feature_flags(rearrange_pipelines_table: false)
+
           visit project_pipelines_path(source_project)
         end
 
@@ -244,6 +288,47 @@ RSpec.describe 'Pipelines', :js do
         end
       end
 
+      context 'when pipeline is merge request pipeline, with rearrange_pipelines_table feature flag turned on' do
+        let(:merge_request) do
+          create(:merge_request,
+                 :with_merge_request_pipeline,
+                 source_project: source_project,
+                 target_project: target_project,
+                 merge_sha: target_project.commit.sha)
+        end
+
+        let!(:pipeline) { merge_request.all_pipelines.first }
+        let(:source_project) { project }
+        let(:target_project) { project }
+
+        before do
+          stub_feature_flags(rearrange_pipelines_table: true)
+
+          visit project_pipelines_path(source_project)
+        end
+
+        shared_examples_for 'Correct merge request pipeline information' do
+          it 'does not show detached tag for the pipeline, and shows the link of the merge request, and does not show the ref of the pipeline', :sidekiq_might_not_need_inline do
+            within '.pipeline-tags' do
+              expect(page).not_to have_content('detached')
+
+              expect(page).to have_link(merge_request.iid,
+                                        href: project_merge_request_path(project, merge_request))
+
+              expect(page).not_to have_link(pipeline.ref)
+            end
+          end
+        end
+
+        it_behaves_like 'Correct merge request pipeline information'
+
+        context 'when source project is a forked project' do
+          let(:source_project) { fork_project(project, user, repository: true) }
+
+          it_behaves_like 'Correct merge request pipeline information'
+        end
+      end
+
       context 'when pipeline has configuration errors' do
         let(:pipeline) do
           create(:ci_pipeline, :invalid, project: project)
@@ -587,6 +672,7 @@ RSpec.describe 'Pipelines', :js do
 
       context 'with pipeline key selection' do
         before do
+          stub_feature_flags(rearrange_pipelines_table: false)
           visit project_pipelines_path(project)
           wait_for_requests
         end
@@ -604,6 +690,27 @@ RSpec.describe 'Pipelines', :js do
           expect(page.find('[data-testid="pipeline-url-link"]')).to have_content "##{pipeline.iid}"
         end
       end
+
+      context 'with pipeline key selection and rearrange_pipelines_table ff on' do
+        before do
+          stub_feature_flags(rearrange_pipelines_table: true)
+          visit project_pipelines_path(project)
+          wait_for_requests
+        end
+
+        it 'changes the Pipeline ID column for Pipeline IID' do
+          page.find('[data-testid="pipeline-key-dropdown"]').click
+
+          within '.gl-new-dropdown-contents' do
+            dropdown_options = page.find_all '.gl-new-dropdown-item'
+
+            dropdown_options[1].click
+          end
+
+          expect(page.find('[data-testid="pipeline-th"]')).to have_content 'Pipeline'
+          expect(page.find('[data-testid="pipeline-url-link"]')).to have_content "##{pipeline.iid}"
+        end
+      end
     end
 
     describe 'GET /:project/-/pipelines/show' do

spec/frontend/pipelines/mock_data.js

@@ -634,3 +634,80 @@ export const mockPipelineJobsQueryResponse = {
     },
   },
 };
+
+export const mockPipeline = (projectPath) => {
+  return {
+    pipeline: {
+      id: 1,
+      user: {
+        id: 1,
+        name: 'Administrator',
+        username: 'root',
+        state: 'active',
+        avatar_url: '',
+        web_url: 'http://0.0.0.0:3000/root',
+        show_status: false,
+        path: '/root',
+      },
+      active: false,
+      source: 'merge_request_event',
+      created_at: '2021-10-19T21:17:38.698Z',
+      updated_at: '2021-10-21T18:00:42.758Z',
+      path: 'foo',
+      flags: {},
+      merge_request: {
+        iid: 1,
+        path: `/${projectPath}/1`,
+        title: 'commit',
+        source_branch: 'test-commit-name',
+        source_branch_path: `/${projectPath}`,
+        target_branch: 'main',
+        target_branch_path: `/${projectPath}/-/commit/main`,
+      },
+      ref: {
+        name: 'refs/merge-requests/1/head',
+        path: `/${projectPath}/-/commits/refs/merge-requests/1/head`,
+        tag: false,
+        branch: false,
+        merge_request: true,
+      },
+      commit: {
+        id: 'fd6df5b3229e213c97d308844a6f3e7fd71e8f8c',
+        short_id: 'fd6df5b3',
+        created_at: '2021-10-19T21:17:12.000+00:00',
+        parent_ids: ['7147906b84306e83cb3fec6582a25390b75713c6'],
+        title: 'Commit',
+        message: 'Commit',
+        author_name: 'Administrator',
+        author_email: 'admin@example.com',
+        authored_date: '2021-10-19T21:17:12.000+00:00',
+        committer_name: 'Administrator',
+        committer_email: 'admin@example.com',
+        committed_date: '2021-10-19T21:17:12.000+00:00',
+        trailers: {},
+        web_url: '',
+        author: {
+          id: 1,
+          name: 'Administrator',
+          username: 'root',
+          state: 'active',
+          avatar_url: '',
+          web_url: '',
+          show_status: false,
+          path: '/root',
+        },
+        author_gravatar_url: '',
+        commit_url: `/${projectPath}/fd6df5b3229e213c97d308844a6f3e7fd71e8f8c`,
+        commit_path: `/${projectPath}/commit/fd6df5b3229e213c97d308844a6f3e7fd71e8f8c`,
+      },
+      project: {
+        full_path: `/${projectPath}`,
+      },
+      triggered_by: null,
+      triggered: [],
+    },
+    pipelineScheduleUrl: 'foo',
+    pipelineKey: 'id',
+    viewType: 'root',
+  };
+};

spec/frontend/pipelines/pipeline_url_spec.js

-import { shallowMount } from '@vue/test-utils';
+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';
 
 const projectPath = 'test/test';
 
 describe('Pipeline Url Component', () => {
   let wrapper;
 
-  const findTableCell = () => wrapper.find('[data-testid="pipeline-url-table-cell"]');
-  const findPipelineUrlLink = () => wrapper.find('[data-testid="pipeline-url-link"]');
-  const findScheduledTag = () => wrapper.find('[data-testid="pipeline-url-scheduled"]');
-  const findLatestTag = () => wrapper.find('[data-testid="pipeline-url-latest"]');
-  const findYamlTag = () => wrapper.find('[data-testid="pipeline-url-yaml"]');
-  const findFailureTag = () => wrapper.find('[data-testid="pipeline-url-failure"]');
-  const findAutoDevopsTag = () => wrapper.find('[data-testid="pipeline-url-autodevops"]');
-  const findAutoDevopsTagLink = () => wrapper.find('[data-testid="pipeline-url-autodevops-link"]');
-  const findStuckTag = () => wrapper.find('[data-testid="pipeline-url-stuck"]');
-  const findDetachedTag = () => wrapper.find('[data-testid="pipeline-url-detached"]');
-  const findForkTag = () => wrapper.find('[data-testid="pipeline-url-fork"]');
-  const findTrainTag = () => wrapper.find('[data-testid="pipeline-url-train"]');
-
-  const defaultProps = {
-    pipeline: {
-      id: 1,
-      path: 'foo',
-      project: { full_path: `/${projectPath}` },
-      flags: {},
-    },
-    pipelineScheduleUrl: 'foo',
-    pipelineKey: 'id',
-  };
-
-  const createComponent = (props) => {
-    wrapper = shallowMount(PipelineUrlComponent, {
+  const findTableCell = () => wrapper.findByTestId('pipeline-url-table-cell');
+  const findPipelineUrlLink = () => wrapper.findByTestId('pipeline-url-link');
+  const findScheduledTag = () => wrapper.findByTestId('pipeline-url-scheduled');
+  const findLatestTag = () => wrapper.findByTestId('pipeline-url-latest');
+  const findYamlTag = () => wrapper.findByTestId('pipeline-url-yaml');
+  const findFailureTag = () => wrapper.findByTestId('pipeline-url-failure');
+  const findAutoDevopsTag = () => wrapper.findByTestId('pipeline-url-autodevops');
+  const findAutoDevopsTagLink = () => wrapper.findByTestId('pipeline-url-autodevops-link');
+  const findStuckTag = () => wrapper.findByTestId('pipeline-url-stuck');
+  const findDetachedTag = () => wrapper.findByTestId('pipeline-url-detached');
+  const findForkTag = () => wrapper.findByTestId('pipeline-url-fork');
+  const findTrainTag = () => wrapper.findByTestId('pipeline-url-train');
+  const findRefName = () => wrapper.findByTestId('merge-request-ref');
+  const findCommitShortSha = () => wrapper.findByTestId('commit-short-sha');
+
+  const findCommitTitleContainer = () => wrapper.findByTestId('commit-title-container');
+  const findCommitTitle = (commitWrapper) => commitWrapper.find('[data-testid="commit-title"]');
+
+  const defaultProps = mockPipeline(projectPath);
+
+  const createComponent = (props, rearrangePipelinesTable = false) => {
+    wrapper = shallowMountExtended(PipelineUrlComponent, {
       propsData: { ...defaultProps, ...props },
       provide: {
         targetProjectFullPath: projectPath,
+        glFeatures: {
+          rearrangePipelinesTable,
+        },
       },
     });
   };
@@ -45,158 +45,169 @@ describe('Pipeline Url Component', () => {
     wrapper = null;
   });
 
-  it('should render pipeline url table cell', () => {
-    createComponent();
+  describe('with the rearrangePipelinesTable feature flag turned off', () => {
+    it('should render pipeline url table cell', () => {
+      createComponent();
 
-    expect(findTableCell().exists()).toBe(true);
-  });
+      expect(findTableCell().exists()).toBe(true);
+    });
 
-  it('should render a link the provided path and id', () => {
-    createComponent();
+    it('should render a link the provided path and id', () => {
+      createComponent();
 
-    expect(findPipelineUrlLink().attributes('href')).toBe('foo');
+      expect(findPipelineUrlLink().attributes('href')).toBe('foo');
 
-    expect(findPipelineUrlLink().text()).toBe('#1');
-  });
+      expect(findPipelineUrlLink().text()).toBe('#1');
+    });
 
-  it('should not render tags when flags are not set', () => {
-    createComponent();
-
-    expect(findStuckTag().exists()).toBe(false);
-    expect(findLatestTag().exists()).toBe(false);
-    expect(findYamlTag().exists()).toBe(false);
-    expect(findAutoDevopsTag().exists()).toBe(false);
-    expect(findFailureTag().exists()).toBe(false);
-    expect(findScheduledTag().exists()).toBe(false);
-    expect(findForkTag().exists()).toBe(false);
-    expect(findTrainTag().exists()).toBe(false);
-  });
+    it('should not render tags when flags are not set', () => {
+      createComponent();
+
+      expect(findStuckTag().exists()).toBe(false);
+      expect(findLatestTag().exists()).toBe(false);
+      expect(findYamlTag().exists()).toBe(false);
+      expect(findAutoDevopsTag().exists()).toBe(false);
+      expect(findFailureTag().exists()).toBe(false);
+      expect(findScheduledTag().exists()).toBe(false);
+      expect(findForkTag().exists()).toBe(false);
+      expect(findTrainTag().exists()).toBe(false);
+    });
 
-  it('should render the stuck tag when flag is provided', () => {
-    createComponent({
-      pipeline: {
-        flags: {
-          stuck: true,
-        },
-      },
+    it('should render the stuck tag when flag is provided', () => {
+      const stuckPipeline = defaultProps.pipeline;
+      stuckPipeline.flags.stuck = true;
+
+      createComponent({
+        ...stuckPipeline.pipeline,
+      });
+
+      expect(findStuckTag().text()).toContain('stuck');
     });
 
-    expect(findStuckTag().text()).toContain('stuck');
-  });
+    it('should render latest tag when flag is provided', () => {
+      const latestPipeline = defaultProps.pipeline;
+      latestPipeline.flags.latest = true;
 
-  it('should render latest tag when flag is provided', () => {
-    createComponent({
-      pipeline: {
-        flags: {
-          latest: true,
-        },
-      },
+      createComponent({
+        ...latestPipeline,
+      });
+
+      expect(findLatestTag().text()).toContain('latest');
     });
 
-    expect(findLatestTag().text()).toContain('latest');
-  });
+    it('should render a yaml badge when it is invalid', () => {
+      const yamlPipeline = defaultProps.pipeline;
+      yamlPipeline.flags.yaml_errors = true;
 
-  it('should render a yaml badge when it is invalid', () => {
-    createComponent({
-      pipeline: {
-        flags: {
-          yaml_errors: true,
-        },
-      },
+      createComponent({
+        ...yamlPipeline,
+      });
+
+      expect(findYamlTag().text()).toContain('yaml invalid');
     });
 
-    expect(findYamlTag().text()).toContain('yaml invalid');
-  });
+    it('should render an autodevops badge when flag is provided', () => {
+      const autoDevopsPipeline = defaultProps.pipeline;
+      autoDevopsPipeline.flags.auto_devops = true;
 
-  it('should render an autodevops badge when flag is provided', () => {
-    createComponent({
-      pipeline: {
-        ...defaultProps.pipeline,
-        flags: {
-          auto_devops: true,
-        },
-      },
+      createComponent({
+        ...autoDevopsPipeline,
+      });
+
+      expect(trimText(findAutoDevopsTag().text())).toBe('Auto DevOps');
+
+      expect(findAutoDevopsTagLink().attributes()).toMatchObject({
+        href: '/help/topics/autodevops/index.md',
+        target: '_blank',
+      });
     });
 
-    expect(trimText(findAutoDevopsTag().text())).toBe('Auto DevOps');
+    it('should render a detached badge when flag is provided', () => {
+      const detachedMRPipeline = defaultProps.pipeline;
+      detachedMRPipeline.flags.detached_merge_request_pipeline = true;
 
-    expect(findAutoDevopsTagLink().attributes()).toMatchObject({
-      href: '/help/topics/autodevops/index.md',
-      target: '_blank',
+      createComponent({
+        ...detachedMRPipeline,
+      });
+
+      expect(findDetachedTag().text()).toContain('detached');
     });
-  });
 
-  it('should render a detached badge when flag is provided', () => {
-    createComponent({
-      pipeline: {
-        flags: {
-          detached_merge_request_pipeline: true,
-        },
-      },
+    it('should render error badge when pipeline has a failure reason set', () => {
+      const failedPipeline = defaultProps.pipeline;
+      failedPipeline.flags.failure_reason = true;
+      failedPipeline.failure_reason = 'some reason';
+
+      createComponent({
+        ...failedPipeline,
+      });
+
+      expect(findFailureTag().text()).toContain('error');
+      expect(findFailureTag().attributes('title')).toContain('some reason');
     });
 
-    expect(findDetachedTag().text()).toContain('detached');
-  });
+    it('should render scheduled badge when pipeline was triggered by a schedule', () => {
+      const scheduledPipeline = defaultProps.pipeline;
+      scheduledPipeline.source = 'schedule';
 
-  it('should render error badge when pipeline has a failure reason set', () => {
-    createComponent({
-      pipeline: {
-        flags: {
-          failure_reason: true,
-        },
-        failure_reason: 'some reason',
-      },
+      createComponent({
+        ...scheduledPipeline,
+      });
+
+      expect(findScheduledTag().exists()).toBe(true);
+      expect(findScheduledTag().text()).toContain('Scheduled');
     });
 
-    expect(findFailureTag().text()).toContain('error');
-    expect(findFailureTag().attributes('title')).toContain('some reason');
-  });
+    it('should render the fork badge when the pipeline was run in a fork', () => {
+      const forkedPipeline = defaultProps.pipeline;
+      forkedPipeline.project.full_path = '/test/forked';
 
-  it('should render scheduled badge when pipeline was triggered by a schedule', () => {
-    createComponent({
-      pipeline: {
-        flags: {},
-        source: 'schedule',
-      },
+      createComponent({
+        ...forkedPipeline,
+      });
+
+      expect(findForkTag().exists()).toBe(true);
+      expect(findForkTag().text()).toBe('fork');
     });
 
-    expect(findScheduledTag().exists()).toBe(true);
-    expect(findScheduledTag().text()).toContain('Scheduled');
-  });
+    it('should render the train badge when the pipeline is a merge train pipeline', () => {
+      const mergeTrainPipeline = defaultProps.pipeline;
+      mergeTrainPipeline.flags.merge_train_pipeline = true;
 
-  it('should render the fork badge when the pipeline was run in a fork', () => {
-    createComponent({
-      pipeline: {
-        flags: {},
-        project: { fullPath: '/test/forked' },
-      },
+      createComponent({
+        ...mergeTrainPipeline,
+      });
+
+      expect(findTrainTag().text()).toContain('train');
     });
 
-    expect(findForkTag().exists()).toBe(true);
-    expect(findForkTag().text()).toBe('fork');
-  });
+    it('should not render the train badge when the pipeline is not a merge train pipeline', () => {
+      const mergeTrainPipeline = defaultProps.pipeline;
+      mergeTrainPipeline.flags.merge_train_pipeline = false;
 
-  it('should render the train badge when the pipeline is a merge train pipeline', () => {
-    createComponent({
-      pipeline: {
-        flags: {
-          merge_train_pipeline: true,
-        },
-      },
+      createComponent({
+        ...mergeTrainPipeline,
+      });
+
+      expect(findTrainTag().exists()).toBe(false);
     });
 
-    expect(findTrainTag().text()).toContain('train');
-  });
+    it('should not render the commit wrapper and commit-short-sha', () => {
+      createComponent();
 
-  it('should not render the train badge when the pipeline is not a merge train pipeline', () => {
-    createComponent({
-      pipeline: {
-        flags: {
-          merge_train_pipeline: false,
-        },
-      },
+      expect(findCommitTitleContainer().exists()).toBe(false);
+      expect(findCommitShortSha().exists()).toBe(false);
     });
+  });
+
+  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(findTrainTag().exists()).toBe(false);
+      expect(findCommitTitle(commitWrapper).exists()).toBe(true);
+      expect(findRefName().exists()).toBe(true);
+      expect(findCommitShortSha().exists()).toBe(true);
+    });
   });
 });

spec/frontend/pipelines/pipelines_table_spec.js

@@ -33,13 +33,18 @@ describe('Pipelines Table', () => {
     return pipelines.find((p) => p.user !== null && p.commit !== null);
   };
 
-  const createComponent = (props = {}) => {
+  const createComponent = (props = {}, rearrangePipelinesTable = false) => {
     wrapper = extendedWrapper(
       mount(PipelinesTable, {
         propsData: {
           ...defaultProps,
           ...props,
         },
+        provide: {
+          glFeatures: {
+            rearrangePipelinesTable,
+          },
+        },
       }),
     );
   };
@@ -71,7 +76,7 @@ describe('Pipelines Table', () => {
     wrapper = null;
   });
 
-  describe('Pipelines Table', () => {
+  describe('Pipelines Table with rearrangePipelinesTable feature flag turned off', () => {
     beforeEach(() => {
       createComponent({ pipelines: [pipeline], viewType: 'root' });
     });
@@ -189,4 +194,29 @@ describe('Pipelines Table', () => {
       });
     });
   });
+
+  describe('Pipelines Table with rearrangePipelinesTable feature flag turned on', () => {
+    beforeEach(() => {
+      createComponent({ pipelines: [pipeline], viewType: 'root' }, true);
+    });
+
+    it('should render table head with correct columns', () => {
+      expect(findStatusTh().text()).toBe('Status');
+      expect(findPipelineTh().text()).toBe('Pipeline');
+      expect(findStagesTh().text()).toBe('Stages');
+      expect(findActionsTh().text()).toBe('Actions');
+    });
+
+    describe('triggerer cell', () => {
+      it('should render the pipeline triggerer', () => {
+        expect(findTriggerer().exists()).toBe(true);
+      });
+    });
+
+    describe('commit cell', () => {
+      it('should not render commit information', () => {
+        expect(findCommit().exists()).toBe(false);
+      });
+    });
+  });
 });