Conditionally display variable values

We want to hide trigger varialbes values in the UI by default. A toggle
button will be available to maintainers.

1 files changed, 51 insertions, 25 deletions

diff --git a/app/assets/javascripts/jobs/components/trigger_block.vue b/app/assets/javascripts/jobs/components/trigger_block.vue
index 4a9b2903eec..8aded3192f7 100644
--- a/app/assets/javascripts/jobs/components/trigger_block.vue
+++ b/app/assets/javascripts/jobs/components/trigger_block.vue
@@ -1,6 +1,12 @@
 <script>
 import { GlButton } from '@gitlab/ui';
 
+const HIDDEN_VALUE = '••••••';
+const TOGGLE_BUTTON_TEXT = {
+  HIDE: 'Hide',
+  REVEAL: 'Reveal',
+};
+
 export default {
   components: {
     GlButton,
@@ -13,17 +19,27 @@ export default {
   },
   data() {
     return {
-      areVariablesVisible: false,
+      showVariableValues: false,
     };
   },
   computed: {
     hasVariables() {
-      return this.trigger.variables && this.trigger.variables.length > 0;
+      return Array.isArray(this.trigger.variables) && this.trigger.variables.length > 0;
+    },
+    getToggleButtonText() {
+      const { HIDE, REVEAL } = TOGGLE_BUTTON_TEXT;
+      return `${this.showVariableValues ? HIDE : 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 +49,41 @@ 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"
+          type="button"
+          class="btn btn-default 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-variables-table trigger-build-variables">
+        <tr v-for="variable in trigger.variables">
+          <td
+            v-bind:key="`${variable.key}-variable`"
+            class="js-build-variable trigger-build-variable"
+          >
+            {{ variable.key }}
+          </td>
+          <td v-bind:key="`${variable.key}-value`" class="js-build-value trigger-build-value">
+            {{ getDisplayValue(variable.value) }}
+          </td>
+        </tr>
+      </table>
+    </template>
   </div>
 </template>