Add Job specific variables

Adds Job specific variables to facilitate specifying variables when
running manual jobs.

5 files changed, 236 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>
diff --git a/app/assets/javascripts/jobs/components/job_app.vue b/app/assets/javascripts/jobs/components/job_app.vue
index 79fb67d38cd..ef9fb6d08d1 100644
--- a/app/assets/javascripts/jobs/components/job_app.vue
+++ b/app/assets/javascripts/jobs/components/job_app.vue
@@ -45,6 +45,11 @@ export default {
       required: false,
       default: null,
     },
+    variablesSettingsUrl: {
+      type: String,
+      required: false,
+      default: null,
+    },
     runnerHelpUrl: {
       type: String,
       required: false,
@@ -313,6 +318,9 @@ export default {
           :title="emptyStateTitle"
           :content="emptyStateIllustration.content"
           :action="emptyStateAction"
+          :playable="job.playable"
+          :scheduled="job.scheduled"
+          :variables-settings-url="variablesSettingsUrl"
         />
         <!-- EO empty state -->
 
diff --git a/app/assets/javascripts/jobs/components/manual_variables_form.vue b/app/assets/javascripts/jobs/components/manual_variables_form.vue
new file mode 100644
index 00000000000..c32a3cac7be
--- /dev/null
+++ b/app/assets/javascripts/jobs/components/manual_variables_form.vue
@@ -0,0 +1,179 @@
+<script>
+import _ from 'underscore';
+import { mapActions } from 'vuex';
+import { GlButton } from '@gitlab/ui';
+import { s__, sprintf } from '~/locale';
+import Icon from '~/vue_shared/components/icon.vue';
+
+export default {
+  name: 'ManualVariablesForm',
+  components: {
+    GlButton,
+    Icon,
+  },
+  props: {
+    action: {
+      type: Object,
+      required: false,
+      default: null,
+      validator(value) {
+        return (
+          value === null ||
+          (_.has(value, 'path') && _.has(value, 'method') && _.has(value, 'button_title'))
+        );
+      },
+    },
+    variablesSettingsUrl: {
+      type: String,
+      required: true,
+      default: '',
+    },
+  },
+  inputTypes: {
+    key: 'key',
+    value: 'value',
+  },
+  i18n: {
+    keyPlaceholder: s__('CiVariables|Input variable key'),
+    valuePlaceholder: s__('CiVariables|Input variable value'),
+  },
+  data() {
+    return {
+      variables: [],
+      key: '',
+      secretValue: '',
+    };
+  },
+  computed: {
+    helpText() {
+      return sprintf(
+        s__(
+          'CiVariables|Specify variable values to be used in this run. The values specified in %{linkStart}CI/CD settings%{linkEnd} will be used as default',
+        ),
+        {
+          linkStart: `<a href="${this.variablesSettingsUrl}">`,
+          linkEnd: '</a>',
+        },
+        false,
+      );
+    },
+  },
+  watch: {
+    key(newVal) {
+      this.handleValueChange(newVal, this.$options.inputTypes.key);
+    },
+    secretValue(newVal) {
+      this.handleValueChange(newVal, this.$options.inputTypes.value);
+    },
+  },
+  methods: {
+    ...mapActions(['triggerManualJob']),
+    handleValueChange(newValue, type) {
+      if (newValue !== '') {
+        this.createNewVariable(type);
+        this.resetForm();
+      }
+    },
+    createNewVariable(type) {
+      const newVariable = {
+        key: this.key,
+        secret_value: this.secretValue,
+        id: _.uniqueId(),
+      };
+
+      this.variables.push(newVariable);
+
+      return this.$nextTick().then(() => {
+        this.$refs[`${this.$options.inputTypes[type]}-${newVariable.id}`][0].focus();
+      });
+    },
+    resetForm() {
+      this.key = '';
+      this.secretValue = '';
+    },
+    deleteVariable(id) {
+      this.variables.splice(this.variables.findIndex(el => el.id === id), 1);
+    },
+  },
+};
+</script>
+<template>
+  <div class="js-manual-vars-form col-12">
+    <label>{{ s__('CiVariables|Variables') }}</label>
+
+    <div class="ci-table">
+      <div class="gl-responsive-table-row table-row-header pb-0 pt-0 border-0" role="row">
+        <div class="table-section section-50" role="rowheader">{{ s__('CiVariables|Key') }}</div>
+        <div class="table-section section-50" role="rowheader">{{ s__('CiVariables|Value') }}</div>
+      </div>
+
+      <div v-for="variable in variables" :key="variable.id" class="gl-responsive-table-row">
+        <div class="table-section section-50">
+          <div class="table-mobile-header" role="rowheader">{{ s__('Pipeline|Key') }}</div>
+          <div class="table-mobile-content append-right-10">
+            <input
+              :ref="`${$options.inputTypes.key}-${variable.id}`"
+              v-model="variable.key"
+              :placeholder="$options.i18n.keyPlaceholder"
+              class="ci-variable-body-item form-control"
+            />
+          </div>
+        </div>
+
+        <div class="table-section section-50">
+          <div class="table-mobile-header" role="rowheader">{{ s__('Pipeline|Value') }}</div>
+          <div class="table-mobile-content append-right-10">
+            <input
+              :ref="`${$options.inputTypes.value}-${variable.id}`"
+              v-model="variable.secret_value"
+              :placeholder="$options.i18n.valuePlaceholder"
+              class="ci-variable-body-item form-control"
+            />
+          </div>
+        </div>
+
+        <div class="table-section section-10">
+          <div class="table-mobile-header" role="rowheader"></div>
+          <div class="table-mobile-content justify-content-end">
+            <gl-button class="btn-transparent btn-blank w-25" @click="deleteVariable(variable.id)">
+              <icon name="clear" />
+            </gl-button>
+          </div>
+        </div>
+      </div>
+      <div class="gl-responsive-table-row">
+        <div class="table-section section-50">
+          <div class="table-mobile-header" role="rowheader">{{ s__('Pipeline|Key') }}</div>
+          <div class="table-mobile-content append-right-10">
+            <input
+              ref="inputKey"
+              v-model="key"
+              class="js-input-key form-control"
+              :placeholder="$options.i18n.keyPlaceholder"
+            />
+          </div>
+        </div>
+
+        <div class="table-section section-50">
+          <div class="table-mobile-header" role="rowheader">{{ s__('Pipeline|Value') }}</div>
+          <div class="table-mobile-content append-right-10">
+            <input
+              ref="inputSecretValue"
+              v-model="secretValue"
+              class="ci-variable-body-item form-control"
+              :placeholder="$options.i18n.valuePlaceholder"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="d-flex prepend-top-default justify-content-center">
+      <p class="text-muted" v-html="helpText"></p>
+    </div>
+    <div class="d-flex justify-content-center">
+      <gl-button variant="primary" @click="triggerManualJob(variables)">
+        {{ action.button_title }}
+      </gl-button>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/jobs/index.js b/app/assets/javascripts/jobs/index.js
index 25132449458..06514fcce1d 100644
--- a/app/assets/javascripts/jobs/index.js
+++ b/app/assets/javascripts/jobs/index.js
@@ -15,6 +15,7 @@ export default () => {
           deploymentHelpUrl: element.dataset.deploymentHelpUrl,
           runnerHelpUrl: element.dataset.runnerHelpUrl,
           runnerSettingsUrl: element.dataset.runnerSettingsUrl,
+          variablesSettingsUrl: element.dataset.variablesSettingsUrl,
           endpoint: element.dataset.endpoint,
           pagePath: element.dataset.buildOptionsPagePath,
           logState: element.dataset.buildOptionsLogState,
diff --git a/app/assets/javascripts/jobs/store/actions.js b/app/assets/javascripts/jobs/store/actions.js
index 12d67a43599..a2daef96a2d 100644
--- a/app/assets/javascripts/jobs/store/actions.js
+++ b/app/assets/javascripts/jobs/store/actions.js
@@ -209,5 +209,19 @@ export const receiveJobsForStageError = ({ commit }) => {
   flash(__('An error occurred while fetching the jobs.'));
 };
 
+export const triggerManualJob = ({ state }, variables) => {
+  const parsedVariables = variables.map(variable => {
+    const copyVar = Object.assign({}, variable);
+    delete copyVar.id;
+    return copyVar;
+  });
+
+  axios
+    .post(state.job.status.action.path, {
+      job_variables_attributes: parsedVariables,
+    })
+    .catch(() => flash(__('An error occurred while triggering the job.')));
+};
+
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};