1 files changed, 37 insertions, 3 deletions
diff --git a/app/assets/javascripts/ci_settings_pipeline_triggers/components/triggers_list.vue b/app/assets/javascripts/ci_settings_pipeline_triggers/components/triggers_list.vue
index 1f8096da94d..a1b264cfe54 100644
--- a/app/assets/javascripts/ci_settings_pipeline_triggers/components/triggers_list.vue
+++ b/app/assets/javascripts/ci_settings_pipeline_triggers/components/triggers_list.vue
@@ -8,7 +8,8 @@ import {
   GlTable,
   GlTooltipDirective,
 } from '@gitlab/ui';
-import { s__ } from '~/locale';
+import { __, s__ } from '~/locale';
+import { thWidthPercent } from '~/lib/utils/table_utility';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
@@ -43,43 +44,70 @@ export default {
       default: () => [],
     },
   },
+  data() {
+    return {
+      areValuesHidden: true,
+    };
+  },
   fields: [
     {
       key: 'token',
       label: s__('Pipelines|Token'),
+      thClass: thWidthPercent(70),
     },
     {
       key: 'description',
       label: s__('Pipelines|Description'),
+      thClass: thWidthPercent(15),
     },
     {
       key: 'owner',
       label: s__('Pipelines|Owner'),
+      thClass: thWidthPercent(5),
     },
     {
       key: 'lastUsed',
       label: s__('Pipelines|Last Used'),
+      thClass: thWidthPercent(5),
     },
     {
       key: 'actions',
       label: '',
       tdClass: 'gl-text-right gl-white-space-nowrap',
+      thClass: thWidthPercent(5),
     },
   ],
+  computed: {
+    valuesButtonText() {
+      return this.areValuesHidden ? __('Reveal values') : __('Hide values');
+    },
+    hasTriggers() {
+      return this.triggers.length;
+    },
+    maskedToken() {
+      return '*'.repeat(47);
+    },
+  },
+  methods: {
+    toggleHiddenState() {
+      this.areValuesHidden = !this.areValuesHidden;
+    },
+  },
 };
 </script>
 
 <template>
   <div>
     <gl-table
-      v-if="triggers.length"
+      v-if="hasTriggers"
       :fields="$options.fields"
       :items="triggers"
       class="triggers-list"
       responsive
     >
       <template #cell(token)="{ item }">
-        {{ item.token }}
+        <span v-if="!areValuesHidden">{{ item.token }}</span>
+        <span v-else>{{ maskedToken }}</span>
         <clipboard-button
           v-if="item.hasTokenExposed"
           :text="item.token"
@@ -157,5 +185,11 @@ export default {
     >
       {{ s__('Pipelines|No triggers have been created yet. Add one using the form above.') }}
     </gl-alert>
+    <gl-button
+      v-if="hasTriggers"
+      data-testid="reveal-hide-values-button"
+      @click="toggleHiddenState"
+      >{{ valuesButtonText }}</gl-button
+    >
   </div>
 </template>