Changes after review

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

@@ -30,7 +30,7 @@
       shouldRenderContent() {
         return !this.isLoading && Object.keys(this.job).length;
       },
-      wasTriggered() {
+      jobStarted() {
         return this.job.started;
       },
     },
@@ -67,8 +67,8 @@
       :user="job.user"
       :actions="actions"
       :has-sidebar-button="true"
-      :triggered="wasTriggered"
-      />
+      :should-render-triggered-label="jobStarted"
+    />
     <loading-icon
       v-if="isLoading"
       size="2"

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

@@ -45,7 +45,7 @@ export default {
       required: false,
       default: false,
     },
-    triggered: {
+    shouldRenderTriggeredLabel: {
       type: Boolean,
       required: false,
       default: true,
@@ -87,7 +87,7 @@ export default {
         {{itemName}} #{{itemId}}
       </strong>
-      <template v-if="triggered">
+      <template v-if="shouldRenderTriggeredLabel">
         triggered
       </template>
       <template v-else>

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

+- illustration = locals.fetch(:illustration)
+- illustration_size = locals.fetch(:illustration_size)
+- title = locals.fetch(:title)
+- content = locals.fetch(:content)
+- action = locals.fetch(:action)
+
+.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

@@ -88,22 +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
-      - illustration = @build.playable? ? 'illustrations/manual_action.svg' : 'illustrations/job_not_triggered.svg'
-      - illustration_size = @build.playable? ? 'svg-394' : 'svg-306'
-      - title = @build.playable? ? _('This job requires a manual action') : _('This job has not been triggered yet')
-      - content = @build.playable? ? _('This job depends on a user to trigger its process. Often they are used to deploy code to production environments.') : _('This job depends on upstream jobs that need to succeed in order for this job to be triggered.')
-      .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 @build.playable?
-              .text-center
-                = link_to _('Trigger this manual action'), play_project_job_path(@project, @build), class: 'btn btn-primary', title: _('Trigger this manual action')
+      = render 'empty_state',
+        illustration: 'illustrations/job_not_triggered.svg',
+        illustration_size: 'svg-306',
+        title: _('This job has not been triggered yet'),
+        content: _('This job has not been triggered yet')
   = render "sidebar"

spec/javascripts/vue_shared/components/header_ci_component_spec.js

@@ -98,9 +98,9 @@ describe('Header CI Component', () => {
     });
   });
-  describe('triggered', () => {
-    it('should rendered created keyword when the triggered is false', () => {
-      vm = mountComponent(HeaderCi, { ...props, triggered: false });
+  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');