Creates Vue component for trigger variables block in job log page50101-trigger

Regenerate pot files

Remove `#`

Remove empty lines

4 files changed, 161 insertions, 0 deletions

diff --git a/app/assets/javascripts/jobs/components/trigger_block.vue b/app/assets/javascripts/jobs/components/trigger_block.vue
new file mode 100644
index 00000000000..8a88e5da6aa
--- /dev/null
+++ b/app/assets/javascripts/jobs/components/trigger_block.vue
@@ -0,0 +1,84 @@
+<script>
+  export default {
+    props: {
+      shortToken: {
+        type: String,
+        required: false,
+        default: null,
+      },
+
+      variables: {
+        type: Object,
+        required: false,
+        default: () => ({}),
+      },
+    },
+    data() {
+      return {
+        areVariablesVisible: false,
+      };
+    },
+    computed: {
+      hasVariables() {
+        return Object.keys(this.variables).length > 0;
+      },
+    },
+    methods: {
+      revealVariables() {
+        this.areVariablesVisible = true;
+      },
+    },
+  };
+</script>
+
+<template>
+  <div class="build-widget block">
+    <h4 class="title">
+      {{ __('Trigger') }}
+    </h4>
+
+    <p
+      v-if="shortToken"
+      class="js-short-token"
+    >
+      <span class="build-light-text">
+        {{ __('Token') }}
+      </span>
+      {{ shortToken }}
+    </p>
+
+    <p v-if="hasVariables">
+      <button
+        type="button"
+        class="btn btn-default group js-reveal-variables"
+        @click="revealVariables"
+      >
+        {{ __('Reveal Variables') }}
+      </button>
+
+    </p>
+
+    <dl
+      v-if="areVariablesVisible"
+      class="js-build-variables trigger-build-variables"
+    >
+      <template
+        v-for="(value, key) in variables"
+      >
+        <dt
+          :key="`${key}-variable`"
+          class="js-build-variable trigger-build-variable"
+        >
+          {{ key }}
+        </dt>
+
+        <dd
+          :key="`${key}-value`"
+          class="js-build-value trigger-build-value"
+        >
+          {{ value }}
+        </dd>
+      </template>
+    </dl>
+  </div>
+</template>
diff --git a/changelogs/unreleased/50101-trigger.yml b/changelogs/unreleased/50101-trigger.yml
new file mode 100644
index 00000000000..df4243afa63
--- /dev/null
+++ b/changelogs/unreleased/50101-trigger.yml
@@ -0,0 +1,5 @@
+---
+title: Creates Vue component for trigger variables block in job log page
+merge_request:
+author:
+type: other
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index b01a0068694..f00dce06bac 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -4649,6 +4649,9 @@ msgstr ""
 msgid "Retry verification"
 msgstr ""
 
+msgid "Reveal Variables"
+msgstr ""
+
 msgid "Reveal value"
 msgid_plural "Reveal values"
 msgstr[0] ""
@@ -5784,6 +5787,9 @@ msgstr ""
 msgid "Trending"
 msgstr ""
 
+msgid "Trigger"
+msgstr ""
+
 msgid "Trigger this manual action"
 msgstr ""
 
diff --git a/spec/javascripts/jobs/trigger_value_spec.js b/spec/javascripts/jobs/trigger_value_spec.js
new file mode 100644
index 00000000000..acf91510ed2
--- /dev/null
+++ b/spec/javascripts/jobs/trigger_value_spec.js
@@ -0,0 +1,66 @@
+import Vue from 'vue';
+import component from '~/jobs/components/trigger_block.vue';
+import mountComponent from '../helpers/vue_mount_component_helper';
+
+describe('Trigger block', () => {
+  const Component = Vue.extend(component);
+  let vm;
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('with short token', () => {
+    it('renders short token', () => {
+      vm = mountComponent(Component, {
+        shortToken: '0a666b2',
+      });
+
+      expect(vm.$el.querySelector('.js-short-token').textContent).toContain('0a666b2');
+    });
+  });
+
+  describe('without short token', () => {
+    it('does not render short token', () => {
+      vm = mountComponent(Component, {});
+
+      expect(vm.$el.querySelector('.js-short-token')).toBeNull();
+    });
+  });
+
+  describe('with variables', () => {
+    describe('reveal variables', () => {
+      it('reveals variables on click', done => {
+        vm = mountComponent(Component, {
+          variables: {
+            key: 'value',
+            variable: 'foo',
+          },
+        });
+
+        vm.$el.querySelector('.js-reveal-variables').click();
+
+        vm
+          .$nextTick()
+          .then(() => {
+            expect(vm.$el.querySelector('.js-build-variables')).not.toBeNull();
+            expect(vm.$el.querySelector('.js-build-variables').textContent).toContain('key');
+            expect(vm.$el.querySelector('.js-build-variables').textContent).toContain('value');
+            expect(vm.$el.querySelector('.js-build-variables').textContent).toContain('variable');
+            expect(vm.$el.querySelector('.js-build-variables').textContent).toContain('foo');
+          })
+          .then(done)
+          .catch(done.fail);
+      });
+    });
+  });
+
+  describe('without variables', () => {
+    it('does not render variables', () => {
+      vm = mountComponent(Component);
+
+      expect(vm.$el.querySelector('.js-reveal-variables')).toBeNull();
+      expect(vm.$el.querySelector('.js-build-variables')).toBeNull();
+    });
+  });
+});