diff --git a/app/assets/javascripts/jobs/components/trigger_block.vue b/app/assets/javascripts/jobs/components/trigger_block.vue
index 8aded3192f773a4e1df0fd4ed4d92dd47db18ce6..ce98474256fff66f7c04bd7a7a5ac9d86d3184ad 100644
--- a/app/assets/javascripts/jobs/components/trigger_block.vue
+++ b/app/assets/javascripts/jobs/components/trigger_block.vue
@@ -1,11 +1,8 @@
 <script>
+import { __ } from '~/locale';
 import { GlButton } from '@gitlab/ui';
 
 const HIDDEN_VALUE = '••••••';
-const TOGGLE_BUTTON_TEXT = {
-  HIDE: 'Hide',
-  REVEAL: 'Reveal',
-};
 
 export default {
   components: {
@@ -24,14 +21,13 @@ export default {
   },
   computed: {
     hasVariables() {
-      return Array.isArray(this.trigger.variables) && this.trigger.variables.length > 0;
+      return this.trigger.variables && this.trigger.variables.length > 0;
     },
     getToggleButtonText() {
-      const { HIDE, REVEAL } = TOGGLE_BUTTON_TEXT;
-      return `${this.showVariableValues ? HIDE : REVEAL} Values`;
+      return this.showVariableValues ? __('Hide values') : __('Reveal values');
     },
     hasValues() {
-      return (this.trigger.variables || []).some(v => v.value);
+      return this.trigger.variables.some(v => v.value);
     },
   },
   methods: {
@@ -61,25 +57,23 @@ export default {
       <p class="trigger-variables-btn-container">
         <span class="build-light-text"> {{ __('Variables:') }} </span>
 
-        <gl-button
-          v-if="hasValues"
-          type="button"
-          class="btn btn-default group js-reveal-variables"
-          @click="toggleValues"
-        >
-          {{ __(getToggleButtonText) }}
+        <gl-button v-if="hasValues" class="group js-reveal-variables" @click="toggleValues">
+          {{ getToggleButtonText }}
         </gl-button>
       </p>
 
-      <table class="js-build-variables trigger-variables-table trigger-build-variables">
+      <table class="js-build-variables trigger-build-variables">
         <tr v-for="variable in trigger.variables">
           <td
-            v-bind:key="`${variable.key}-variable`"
-            class="js-build-variable trigger-build-variable"
+            :key="`${variable.key}-variable`"
+            class="js-build-variable trigger-build-variable trigger-variables-table-cell"
           >
             {{ variable.key }}
           </td>
-          <td v-bind:key="`${variable.key}-value`" class="js-build-value trigger-build-value">
+          <td
+            :key="`${variable.key}-value`"
+            class="js-build-value trigger-build-value trigger-variables-table-cell"
+          >
             {{ getDisplayValue(variable.value) }}
           </td>
         </tr>