1 files changed, 38 insertions, 24 deletions

diff --git a/app/assets/javascripts/jobs/components/trigger_block.vue b/app/assets/javascripts/jobs/components/trigger_block.vue
index 4a9b2903eec..3cd3b743108 100644
--- a/app/assets/javascripts/jobs/components/trigger_block.vue
+++ b/app/assets/javascripts/jobs/components/trigger_block.vue
@@ -1,6 +1,9 @@
 <script>
+import { __ } from '~/locale';
 import { GlButton } from '@gitlab/ui';
 
+const HIDDEN_VALUE = '••••••';
+
 export default {
   components: {
     GlButton,
@@ -13,17 +16,26 @@ export default {
   },
   data() {
     return {
-      areVariablesVisible: false,
+      showVariableValues: false,
     };
   },
   computed: {
     hasVariables() {
       return this.trigger.variables && this.trigger.variables.length > 0;
     },
+    getToggleButtonText() {
+      return this.showVariableValues ? __('Hide values') : __('Reveal values');
+    },
+    hasValues() {
+      return this.trigger.variables.some(v => v.value);
+    },
   },
   methods: {
-    revealVariables() {
-      this.areVariablesVisible = true;
+    toggleValues() {
+      this.showVariableValues = !this.showVariableValues;
+    },
+    getDisplayValue(value) {
+      return this.showVariableValues ? value : HIDDEN_VALUE;
     },
   },
 };
@@ -33,31 +45,33 @@ export default {
   <div class="build-widget block">
     <h4 class="title">{{ __('Trigger') }}</h4>
 
-    <p v-if="trigger.short_token" class="js-short-token">
+    <p
+      v-if="trigger.short_token"
+      class="js-short-token"
+      :class="{ 'append-bottom-0': !hasVariables }"
+    >
       <span class="build-light-text"> {{ __('Token') }} </span> {{ trigger.short_token }}
     </p>
 
-    <p v-if="hasVariables">
-      <gl-button
-        v-if="!areVariablesVisible"
-        type="button"
-        class="btn btn-default group js-reveal-variables"
-        @click="revealVariables"
-      >
-        {{ __('Reveal Variables') }}
-      </gl-button>
-    </p>
+    <template v-if="hasVariables">
+      <p class="trigger-variables-btn-container">
+        <span class="build-light-text"> {{ __('Variables:') }} </span>
 
-    <dl v-if="areVariablesVisible" class="js-build-variables trigger-build-variables">
-      <template v-for="variable in trigger.variables">
-        <dt :key="`${variable.key}-variable`" class="js-build-variable trigger-build-variable">
-          {{ variable.key }}
-        </dt>
+        <gl-button v-if="hasValues" class="group js-reveal-variables" @click="toggleValues">
+          {{ getToggleButtonText }}
+        </gl-button>
+      </p>
 
-        <dd :key="`${variable.key}-value`" class="js-build-value trigger-build-value">
-          {{ variable.value }}
-        </dd>
-      </template>
-    </dl>
+      <table class="js-build-variables trigger-build-variables">
+        <tr v-for="(variable, index) in trigger.variables" :key="`${variable.key}-${index}`">
+          <td class="js-build-variable trigger-build-variable trigger-variables-table-cell">
+            {{ variable.key }}
+          </td>
+          <td class="js-build-value trigger-build-value trigger-variables-table-cell">
+            {{ getDisplayValue(variable.value) }}
+          </td>
+        </tr>
+      </table>
+    </template>
   </div>
 </template>