1 files changed, 98 insertions, 0 deletions
diff --git a/app/assets/javascripts/jobs/components/job/sidebar/trigger_block.vue b/app/assets/javascripts/jobs/components/job/sidebar/trigger_block.vue
new file mode 100644
index 00000000000..1afc1c9a595
--- /dev/null
+++ b/app/assets/javascripts/jobs/components/job/sidebar/trigger_block.vue
@@ -0,0 +1,98 @@
+<script>
+import { GlButton, GlTableLite } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+const DEFAULT_TD_CLASSES = 'gl-w-half gl-font-sm! gl-border-gray-200!';
+const DEFAULT_TH_CLASSES =
+  'gl-bg-transparent! gl-border-b-solid! gl-border-b-gray-200! gl-border-b-1!';
+
+export default {
+  fields: [
+    {
+      key: 'key',
+      label: __('Key'),
+      tdAttr: { 'data-testid': 'trigger-build-key' },
+      tdClass: DEFAULT_TD_CLASSES,
+      thClass: DEFAULT_TH_CLASSES,
+    },
+    {
+      key: 'value',
+      label: __('Value'),
+      tdAttr: { 'data-testid': 'trigger-build-value' },
+      tdClass: DEFAULT_TD_CLASSES,
+      thClass: DEFAULT_TH_CLASSES,
+    },
+  ],
+  components: {
+    GlButton,
+    GlTableLite,
+  },
+  props: {
+    trigger: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      showVariableValues: false,
+    };
+  },
+  computed: {
+    hasVariables() {
+      return this.trigger.variables.length > 0;
+    },
+    getToggleButtonText() {
+      return this.showVariableValues ? __('Hide values') : __('Reveal values');
+    },
+    hasValues() {
+      return this.trigger.variables.some((v) => v.value);
+    },
+  },
+  methods: {
+    toggleValues() {
+      this.showVariableValues = !this.showVariableValues;
+    },
+    getDisplayValue(value) {
+      return this.showVariableValues ? value : '••••••';
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <p
+      v-if="trigger.short_token"
+      :class="{ 'gl-mb-2': hasVariables, 'gl-mb-0': !hasVariables }"
+      data-testid="trigger-short-token"
+    >
+      <span class="gl-font-weight-bold">{{ __('Trigger token:') }}</span> {{ trigger.short_token }}
+    </p>
+
+    <template v-if="hasVariables">
+      <p class="gl-display-flex gl-justify-content-space-between gl-align-items-center">
+        <span class="gl-font-weight-bold">{{ __('Trigger variables:') }}</span>
+
+        <gl-button
+          v-if="hasValues"
+          class="gl-mt-2"
+          size="small"
+          data-testid="trigger-reveal-values-button"
+          @click="toggleValues"
+          >{{ getToggleButtonText }}</gl-button
+        >
+      </p>
+
+      <gl-table-lite :items="trigger.variables" :fields="$options.fields" small bordered fixed>
+        <template #cell(key)="{ item }">
+          <span class="gl-overflow-break-word">{{ item.key }}</span>
+        </template>
+
+        <template #cell(value)="data">
+          <span class="gl-overflow-break-word">{{ getDisplayValue(data.value) }}</span>
+        </template>
+      </gl-table-lite>
+    </template>
+  </div>
+</template>