1 files changed, 34 insertions, 5 deletions

diff --git a/app/assets/javascripts/jobs/components/empty_state.vue b/app/assets/javascripts/jobs/components/empty_state.vue
index 04f910b6b80..275ed80146e 100644
--- a/app/assets/javascripts/jobs/components/empty_state.vue
+++ b/app/assets/javascripts/jobs/components/empty_state.vue
@@ -1,9 +1,11 @@
 <script>
 import { GlLink } from '@gitlab/ui';
+import ManualVariablesForm from './manual_variables_form.vue';
 
 export default {
   components: {
     GlLink,
+    ManualVariablesForm,
   },
   props: {
     illustrationPath: {
@@ -23,6 +25,21 @@ export default {
       required: false,
       default: null,
     },
+    playable: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+    scheduled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    variablesSettingsUrl: {
+      type: String,
+      required: false,
+      default: null,
+    },
     action: {
       type: Object,
       required: false,
@@ -37,28 +54,40 @@ export default {
       },
     },
   },
+  computed: {
+    shouldRenderManualVariables() {
+      return this.playable && !this.scheduled;
+    },
+  },
 };
 </script>
 <template>
   <div class="row empty-state">
     <div class="col-12">
-      <div :class="illustrationSizeClass" class="svg-content"><img :src="illustrationPath" /></div>
+      <div :class="illustrationSizeClass" class="svg-content">
+        <img :src="illustrationPath" />
+      </div>
     </div>
 
     <div class="col-12">
       <div class="text-content">
         <h4 class="js-job-empty-state-title text-center">{{ title }}</h4>
 
-        <p v-if="content" class="js-job-empty-state-content text-center">{{ content }}</p>
-
+        <p v-if="content" class="js-job-empty-state-content">{{ content }}</p>
+      </div>
+      <manual-variables-form
+        v-if="shouldRenderManualVariables"
+        :action="action"
+        :variables-settings-url="variablesSettingsUrl"
+      />
+      <div class="text-content">
         <div v-if="action" class="text-center">
           <gl-link
             :href="action.path"
             :data-method="action.method"
             class="js-job-empty-state-action btn btn-primary"
+            >{{ action.button_title }}</gl-link
           >
-            {{ action.button_title }}
-          </gl-link>
         </div>
       </div>
     </div>