Merge branch '22643-manual-job-page' into 'master'

Resolve "Improve non-triggered manual action job detail page"

Closes #22643 and #37843

See merge request gitlab-org/gitlab-ce!15991

app/assets/javascripts/jobs/components/header.vue

@@ -30,6 +30,9 @@
       shouldRenderContent() {
         return !this.isLoading && Object.keys(this.job).length;
       },
+      jobStarted() {
+        return this.job.started;
+      },
     },
     methods: {
       getActions() {
@@ -63,7 +66,8 @@
       :time="job.created_at"
       :user="job.user"
       :actions="actions"
-      :hasSidebarButton="true"
+      :has-sidebar-button="true"
+      :should-render-triggered-label="jobStarted"
     />
     <loading-icon
       v-if="isLoading"

app/assets/javascripts/vue_shared/components/header_ci_component.vue

@@ -45,6 +45,11 @@ export default {
       required: false,
       default: false,
     },
+    shouldRenderTriggeredLabel: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
 
   directives: {
@@ -82,7 +87,12 @@ export default {
         {{itemName}} #{{itemId}}
       </strong>
 
+      <template v-if="shouldRenderTriggeredLabel">
         triggered
+      </template>
+      <template v-else>
+        created
+      </template>
 
       <timeago-tooltip :time="time" />
 

app/assets/stylesheets/framework/images.scss

@@ -20,10 +20,13 @@
     width: 100%;
   }
 
-  &.svg-250 {
+  $image-widths: 250 306 394;
+  @each $width in $image-widths {
+    &.svg-#{$width} {
       img,
       svg {
-      width: 250px;
+        width: #{$width + 'px'};
+      }
     }
   }
 }

app/serializers/job_entity.rb

@@ -4,6 +4,8 @@ class JobEntity < Grape::Entity
   expose :id
   expose :name
 
+  expose :started?, as: :started
+
   expose :build_path do |build|
     build.target_url || path_to(:namespace_project_job, build)
   end

app/views/projects/jobs/_empty_state.html.haml

+- illustration = local_assigns.fetch(:illustration)
+- illustration_size = local_assigns.fetch(:illustration_size)
+- title = local_assigns.fetch(:title)
+- content = local_assigns.fetch(:content)
+- action = local_assigns.fetch(:action, nil)
+
+.row.empty-state
+  .col-xs-12
+    .svg-content{ class: illustration_size }
+      = image_tag illustration
+  .col-xs-12
+    .text-content
+      %h4.text-center= title
+      %p= content
+      - if action
+        .text-center
+          = action

app/views/projects/jobs/show.html.haml

@@ -54,7 +54,7 @@
             Job has been erased by #{link_to(@build.erased_by_name, user_path(@build.erased_by))} #{time_ago_with_tooltip(@build.erased_at)}
           - else
             Job has been erased #{time_ago_with_tooltip(@build.erased_at)}
-
+    - if @build.started?
       .build-trace-container.prepend-top-default
         .top-bar.js-top-bar
           .js-truncated-info.truncated-info.hidden-xs.pull-left.hidden<
@@ -88,7 +88,19 @@
         %pre.build-trace#build-trace
           %code.bash.js-build-output
           .build-loader-animation.js-build-refresh
-
+    - elsif @build.playable?
+      = render 'empty_state',
+        illustration: 'illustrations/manual_action.svg',
+        illustration_size: 'svg-394',
+        title: _('This job requires a manual action'),
+        content: _('This job depends on a user to trigger its process. Often they are used to deploy code to production environments.'),
+        action: ( link_to _('Trigger this manual action'), play_project_job_path(@project, @build), class: 'btn btn-primary', title: _('Trigger this manual action') )
+    - else
+      = render 'empty_state',
+        illustration: 'illustrations/job_not_triggered.svg',
+        illustration_size: 'svg-306',
+        title: _('This job has not been triggered yet'),
+        content: _('This job depends on upstream jobs that need to succeed in order for this job to be triggered.')
 
   = render "sidebar"
 

features/steps/shared/builds.rb

@@ -11,7 +11,7 @@ module SharedBuilds
 
   step 'project has a recent build' do
     @pipeline = create(:ci_empty_pipeline, project: @project, sha: @project.commit.sha, ref: 'master')
-    @build = create(:ci_build, :coverage, pipeline: @pipeline)
+    @build = create(:ci_build, :running, :coverage, pipeline: @pipeline)
   end
 
   step 'recent build is successful' do

spec/factories/ci/builds.rb

@@ -7,12 +7,10 @@ FactoryBot.define do
     stage_idx 0
     ref 'master'
     tag false
-    status 'pending'
-    created_at 'Di 29. Okt 09:50:00 CET 2013'
-    started_at 'Di 29. Okt 09:51:28 CET 2013'
-    finished_at 'Di 29. Okt 09:53:28 CET 2013'
     commands 'ls -a'
     protected false
+    created_at 'Di 29. Okt 09:50:00 CET 2013'
+    pending
 
     options do
       {
@@ -29,23 +27,37 @@ FactoryBot.define do
 
     pipeline factory: :ci_pipeline
 
+    trait :started do
+      started_at 'Di 29. Okt 09:51:28 CET 2013'
+    end
+
+    trait :finished do
+      started
+      finished_at 'Di 29. Okt 09:53:28 CET 2013'
+    end
+
     trait :success do
+      finished
       status 'success'
     end
 
     trait :failed do
+      finished
       status 'failed'
     end
 
     trait :canceled do
+      finished
       status 'canceled'
     end
 
     trait :skipped do
+      started
       status 'skipped'
     end
 
     trait :running do
+      started
       status 'running'
     end
 
@@ -114,11 +126,6 @@ FactoryBot.define do
       build.project ||= build.pipeline.project
     end
 
-    factory :ci_not_started_build do
-      started_at nil
-      finished_at nil
-    end
-
     trait :tag do
       tag true
     end

spec/features/projects/jobs/user_browses_job_spec.rb

 require 'spec_helper'
 
 describe 'User browses a job', :js do
-  let!(:build) { create(:ci_build, :coverage, pipeline: pipeline) }
+  let!(:build) { create(:ci_build, :running, :coverage, pipeline: pipeline) }
   let(:pipeline) { create(:ci_empty_pipeline, project: project, sha: project.commit.sha, ref: 'master') }
   let(:project) { create(:project, :repository, namespace: user.namespace) }
   let(:user) { create(:user) }

spec/features/projects/jobs_spec.rb

@@ -369,6 +369,34 @@ feature 'Jobs' do
         end
       end
     end
+
+    context 'Playable manual action' do
+      let(:job) { create(:ci_build, :playable, pipeline: pipeline) }
+
+      before do
+        project.add_developer(user)
+        visit project_job_path(project, job)
+      end
+
+      it 'shows manual action empty state' do
+        expect(page).to have_content('This job requires a manual action')
+        expect(page).to have_content('This job depends on a user to trigger its process. Often they are used to deploy code to production environments.')
+        expect(page).to have_link('Trigger this manual action')
+      end
+    end
+
+    context 'Non triggered job' do
+      let(:job) { create(:ci_build, :created, pipeline: pipeline) }
+
+      before do
+        visit project_job_path(project, job)
+      end
+
+      it 'shows manual action empty state' do
+        expect(page).to have_content('This job has not been triggered yet')
+        expect(page).to have_content('This job depends on upstream jobs that need to succeed in order for this job to be triggered.')
+      end
+    end
   end
 
   describe "POST /:project/jobs/:id/cancel", :js do

spec/javascripts/jobs/header_spec.js

 import Vue from 'vue';
 import headerComponent from '~/jobs/components/header.vue';
+import mountComponent from '../helpers/vue_mount_component_helper';
 
 describe('Job details header', () => {
   let HeaderComponent;
@@ -35,7 +36,7 @@ describe('Job details header', () => {
       isLoading: false,
     };
 
-    vm = new HeaderComponent({ propsData: props }).$mount();
+    vm = mountComponent(HeaderComponent, props);
   });
 
   afterEach(() => {

spec/javascripts/vue_shared/components/header_ci_component_spec.js

 import Vue from 'vue';
 import headerCi from '~/vue_shared/components/header_ci_component.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
 
 describe('Header CI Component', () => {
   let HeaderCi;
@@ -8,7 +9,6 @@ describe('Header CI Component', () => {
 
   beforeEach(() => {
     HeaderCi = Vue.extend(headerCi);
-
     props = {
       status: {
         group: 'failed',
@@ -45,16 +45,17 @@ describe('Header CI Component', () => {
       ],
       hasSidebarButton: true,
     };
-
-    vm = new HeaderCi({
-      propsData: props,
-    }).$mount();
   });
 
   afterEach(() => {
     vm.$destroy();
   });
 
+  describe('render', () => {
+    beforeEach(() => {
+      vm = mountComponent(HeaderCi, props);
+    });
+
     it('should render status badge', () => {
       expect(vm.$el.querySelector('.ci-failed')).toBeDefined();
       expect(vm.$el.querySelector('.ci-status-icon-failed svg')).toBeDefined();
@@ -95,4 +96,14 @@ describe('Header CI Component', () => {
     it('should render sidebar toggle button', () => {
       expect(vm.$el.querySelector('.js-sidebar-build-toggle')).toBeDefined();
     });
+  });
+
+  describe('shouldRenderTriggeredLabel', () => {
+    it('should rendered created keyword when the shouldRenderTriggeredLabel is false', () => {
+      vm = mountComponent(HeaderCi, { ...props, shouldRenderTriggeredLabel: false });
+
+      expect(vm.$el.textContent).toContain('created');
+      expect(vm.$el.textContent).not.toContain('triggered');
+    });
+  });
 });

spec/lib/gitlab/cycle_analytics/events_spec.rb

@@ -122,17 +122,18 @@ describe 'cycle analytics events' do
     let(:stage) { :test }
 
     let(:merge_request) { MergeRequest.first }
+
     let!(:pipeline) do
       create(:ci_pipeline,
              ref: merge_request.source_branch,
              sha: merge_request.diff_head_sha,
-             project: context.project,
+             project: project,
              head_pipeline_of: merge_request)
     end
 
     before do
-      create(:ci_build, pipeline: pipeline, status: :success, author: user)
-      create(:ci_build, pipeline: pipeline, status: :success, author: user)
+      create(:ci_build, :success, pipeline: pipeline, author: user)
+      create(:ci_build, :success, pipeline: pipeline, author: user)
 
       pipeline.run!
       pipeline.succeed!
@@ -219,17 +220,18 @@ describe 'cycle analytics events' do
   describe '#staging_events' do
     let(:stage) { :staging }
     let(:merge_request) { MergeRequest.first }
+
     let!(:pipeline) do
       create(:ci_pipeline,
              ref: merge_request.source_branch,
              sha: merge_request.diff_head_sha,
-             project: context.project,
+             project: project,
              head_pipeline_of: merge_request)
     end
 
     before do
-      create(:ci_build, pipeline: pipeline, status: :success, author: user)
-      create(:ci_build, pipeline: pipeline, status: :success, author: user)
+      create(:ci_build, :success, pipeline: pipeline, author: user)
+      create(:ci_build, :success, pipeline: pipeline, author: user)
 
       pipeline.run!
       pipeline.succeed!

spec/requests/api/jobs_spec.rb

@@ -11,7 +11,7 @@ describe API::Jobs do
                                ref: project.default_branch)
   end
 
-  let!(:job) { create(:ci_build, pipeline: pipeline) }
+  let!(:job) { create(:ci_build, :success, pipeline: pipeline) }
 
   let(:user) { create(:user) }
   let(:api_user) { user }
@@ -443,7 +443,7 @@ describe API::Jobs do
       context 'user with :update_build persmission' do
         it 'cancels running or pending job' do
           expect(response).to have_gitlab_http_status(201)
-          expect(project.builds.first.status).to eq('canceled')
+          expect(project.builds.first.status).to eq('success')
         end
       end