Add feature flag and DAG tab

This adds a new tab in the pipeline
view where user will be able to
visualize their DAG graph. This is
behind a feature flag enabled by default.

app/assets/javascripts/pages/projects/pipelines/dag/index.js

+// /dag is an alias for show
+import '../show/index';

app/controllers/projects/pipelines_controller.rb

@@ -13,6 +13,7 @@ class Projects::PipelinesController < Projects::ApplicationController
   before_action do
     push_frontend_feature_flag(:junit_pipeline_view)
     push_frontend_feature_flag(:filter_pipelines_search)
+    push_frontend_feature_flag(:dag_pipeline_tab)
   end
   before_action :ensure_pipeline, only: [:show]
 
@@ -94,6 +95,10 @@ class Projects::PipelinesController < Projects::ApplicationController
     render_show
   end
 
+  def dag
+    render_show
+  end
+
   def failures
     if @pipeline.failed_builds.present?
       render_show

app/views/projects/pipelines/_with_tabs.html.haml

 - test_reports_enabled = Feature.enabled?(:junit_pipeline_view)
+- dag_pipeline_tab_enabled = Feature.enabled?(:dag_pipeline_tab)
 
 .tabs-holder
   %ul.pipelines-tabs.nav-links.no-top.no-bottom.mobile-separator.nav.nav-tabs
@@ -9,6 +10,10 @@
       = link_to builds_project_pipeline_path(@project, @pipeline), data: { target: '#js-tab-builds', action: 'builds', toggle: 'tab' }, class: 'builds-tab' do
         = _('Jobs')
         %span.badge.badge-pill.js-builds-counter= pipeline.total_size
+    - if dag_pipeline_tab_enabled
+      %li.js-dag-tab-link
+        = link_to dag_project_pipeline_path(@project, @pipeline), data: { target: '#js-tab-dag', action: 'dag', toggle: 'tab' }, class: 'dag-tab' do
+          = _('DAG')
     - if @pipeline.failed_builds.present?
       %li.js-failures-tab-link
         = link_to failures_project_pipeline_path(@project, @pipeline), data: { target: '#js-tab-failures', action: 'failures', toggle: 'tab' }, class: 'failures-tab' do
@@ -75,6 +80,9 @@
                     %code.bash.js-build-output
                       = build_summary(build)
 
+  - if dag_pipeline_tab_enabled
+    #js-tab-dag.tab-pane
+
   #js-tab-tests.tab-pane
     #js-pipeline-tests-detail
   = render_if_exists "projects/pipelines/tabs_content", pipeline: @pipeline, project: @project

config/routes/pipelines.rb

@@ -15,6 +15,7 @@ resources :pipelines, only: [:index, :new, :create, :show, :destroy] do
     post :cancel
     post :retry
     get :builds
+    get :dag
     get :failures
     get :status
     get :test_report

ee/app/assets/javascripts/pages/projects/pipelines/dag/index.js

+// /dag is an alias for show
+import '../show/index';

locale/gitlab.pot

@@ -6543,6 +6543,9 @@ msgstr ""
 msgid "CycleAnalytics|stage dropdown"
 msgstr ""
 
+msgid "DAG"
+msgstr ""
+
 msgid "DNS"
 msgstr ""
 

spec/features/projects/pipelines/pipeline_spec.rb

@@ -327,9 +327,10 @@ describe 'Pipeline', :js do
         visit_pipeline
       end
 
-      it 'shows Pipeline, Jobs and Failed Jobs tabs with link' do
+      it 'shows Pipeline, Jobs, DAG and Failed Jobs tabs with link' do
         expect(page).to have_link('Pipeline')
         expect(page).to have_link('Jobs')
+        expect(page).to have_link('DAG')
         expect(page).to have_link('Failed Jobs')
       end
 
@@ -614,6 +615,20 @@ describe 'Pipeline', :js do
         end
       end
     end
+
+    context 'when FF dag_pipeline_tab is disabled' do
+      before do
+        stub_feature_flags(dag_pipeline_tab: false)
+        visit_pipeline
+      end
+
+      it 'does not show DAG link' do
+        expect(page).to have_link('Pipeline')
+        expect(page).to have_link('Jobs')
+        expect(page).not_to have_link('DAG')
+        expect(page).to have_link('Failed Jobs')
+      end
+    end
   end
 
   context 'when user does not have access to read jobs' do
@@ -865,9 +880,10 @@ describe 'Pipeline', :js do
     end
 
     context 'page tabs' do
-      it 'shows Pipeline and Jobs tabs with link' do
+      it 'shows Pipeline, Jobs and DAG tabs with link' do
         expect(page).to have_link('Pipeline')
         expect(page).to have_link('Jobs')
+        expect(page).to have_link('DAG')
       end
 
       it 'shows counter in Jobs tab' do
@@ -1057,6 +1073,37 @@ describe 'Pipeline', :js do
     end
   end
 
+  describe 'GET /:project/pipelines/:id/dag' do
+    include_context 'pipeline builds'
+
+    let(:project) { create(:project, :repository) }
+    let(:pipeline) { create(:ci_pipeline, project: project, ref: 'master', sha: project.commit.id) }
+
+    before do
+      visit dag_project_pipeline_path(project, pipeline)
+    end
+
+    it 'shows DAG tab pane as active' do
+      expect(page).to have_css('#js-tab-dag.active', visible: false)
+    end
+
+    context 'page tabs' do
+      it 'shows Pipeline, Jobs and DAG tabs with link' do
+        expect(page).to have_link('Pipeline')
+        expect(page).to have_link('Jobs')
+        expect(page).to have_link('DAG')
+      end
+
+      it 'shows counter in Jobs tab' do
+        expect(page.find('.js-builds-counter').text).to eq(pipeline.total_size.to_s)
+      end
+
+      it 'shows DAG tab as active' do
+        expect(page).to have_css('li.js-dag-tab-link .active')
+      end
+    end
+  end
+
   context 'when user sees pipeline flags in a pipeline detail page' do
     let(:project) { create(:project, :repository) }