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

2 files changed, 61 insertions, 32 deletions

diff --git a/app/views/projects/jobs/_empty_state.html.haml b/app/views/projects/jobs/_empty_state.html.haml
new file mode 100644
index 00000000000..c66313bdbf3
--- /dev/null
+++ b/app/views/projects/jobs/_empty_state.html.haml
@@ -0,0 +1,17 @@
+- 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
diff --git a/app/views/projects/jobs/show.html.haml b/app/views/projects/jobs/show.html.haml
index fd24bbbb9ba..8b05440fc78 100644
--- a/app/views/projects/jobs/show.html.haml
+++ b/app/views/projects/jobs/show.html.haml
@@ -54,41 +54,53 @@
             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<
+            Showing last
+            %span.js-truncated-info-size.truncated-info-size><
+            of log -
+            %a.js-raw-link.raw-link{ href: raw_project_job_path(@project, @build) }>< Complete Raw
 
-    .build-trace-container.prepend-top-default
-      .top-bar.js-top-bar
-        .js-truncated-info.truncated-info.hidden-xs.pull-left.hidden<
-          Showing last
-          %span.js-truncated-info-size.truncated-info-size><
-          of log -
-          %a.js-raw-link.raw-link{ href: raw_project_job_path(@project, @build) }>< Complete Raw
+          .controllers.pull-right
+            - if @build.has_trace?
+              = link_to raw_project_job_path(@project, @build),
+                      title: 'Show complete raw',
+                      data: { placement: 'top', container: 'body' },
+                      class: 'js-raw-link-controller has-tooltip controllers-buttons' do
+                = icon('file-text-o')
 
-        .controllers.pull-right
-          - if @build.has_trace?
-            = link_to raw_project_job_path(@project, @build),
-                    title: 'Show complete raw',
-                    data: { placement: 'top', container: 'body' },
-                    class: 'js-raw-link-controller has-tooltip controllers-buttons' do
-              = icon('file-text-o')
-
-          - if @build.erasable? && can?(current_user, :erase_build, @build)
-            = link_to erase_project_job_path(@project, @build),
-                      method: :post,
-                      data: { confirm: 'Are you sure you want to erase this build?', placement: 'top', container: 'body' },
-                      title: 'Erase job log',
-                      class: 'has-tooltip js-erase-link controllers-buttons' do
-              = icon('trash')
-          .has-tooltip.controllers-buttons{ title: 'Scroll to top', data: { placement: 'top', container: 'body'} }
-            %button.js-scroll-up.btn-scroll.btn-transparent.btn-blank{ type: 'button', disabled: true }
-              = custom_icon('scroll_up')
-          .has-tooltip.controllers-buttons{ title: 'Scroll to bottom', data: { placement: 'top', container: 'body'} }
-            %button.js-scroll-down.btn-scroll.btn-transparent.btn-blank{ type: 'button', disabled: true }
-              = custom_icon('scroll_down')
-
-      %pre.build-trace#build-trace
-        %code.bash.js-build-output
-        .build-loader-animation.js-build-refresh
+            - if @build.erasable? && can?(current_user, :erase_build, @build)
+              = link_to erase_project_job_path(@project, @build),
+                        method: :post,
+                        data: { confirm: 'Are you sure you want to erase this build?', placement: 'top', container: 'body' },
+                        title: 'Erase job log',
+                        class: 'has-tooltip js-erase-link controllers-buttons' do
+                = icon('trash')
+            .has-tooltip.controllers-buttons{ title: 'Scroll to top', data: { placement: 'top', container: 'body'} }
+              %button.js-scroll-up.btn-scroll.btn-transparent.btn-blank{ type: 'button', disabled: true }
+                = custom_icon('scroll_up')
+            .has-tooltip.controllers-buttons{ title: 'Scroll to bottom', data: { placement: 'top', container: 'body'} }
+              %button.js-scroll-down.btn-scroll.btn-transparent.btn-blank{ type: 'button', disabled: true }
+                = custom_icon('scroll_down')
 
+        %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"