diff options
Diffstat (limited to 'app/assets/javascripts/jobs/components/trigger_block.vue')
-rw-r--r-- | app/assets/javascripts/jobs/components/trigger_block.vue | 55 |
1 files changed, 35 insertions, 20 deletions
diff --git a/app/assets/javascripts/jobs/components/trigger_block.vue b/app/assets/javascripts/jobs/components/trigger_block.vue index 1d46dd8cea4..f6b98777011 100644 --- a/app/assets/javascripts/jobs/components/trigger_block.vue +++ b/app/assets/javascripts/jobs/components/trigger_block.vue @@ -1,12 +1,31 @@ <script> -import { GlButton } from '@gitlab/ui'; +import { GlButton, GlTable } from '@gitlab/ui'; import { __ } from '~/locale'; -const HIDDEN_VALUE = '••••••'; +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, + GlTable, }, props: { trigger: { @@ -21,7 +40,7 @@ export default { }, computed: { hasVariables() { - return this.trigger.variables && this.trigger.variables.length > 0; + return this.trigger.variables.length > 0; }, getToggleButtonText() { return this.showVariableValues ? __('Hide values') : __('Reveal values'); @@ -35,45 +54,41 @@ export default { this.showVariableValues = !this.showVariableValues; }, getDisplayValue(value) { - return this.showVariableValues ? value : HIDDEN_VALUE; + return this.showVariableValues ? value : '••••••'; }, }, }; </script> <template> - <div class="build-widget block"> + <div class="block"> <p v-if="trigger.short_token" - class="js-short-token" :class="{ 'gl-mb-2': hasVariables, 'gl-mb-0': !hasVariables }" + data-testid="trigger-short-token" > - <span class="font-weight-bold">{{ __('Trigger token:') }}</span> {{ trigger.short_token }} + <span class="gl-font-weight-bold">{{ __('Trigger token:') }}</span> {{ trigger.short_token }} </p> <template v-if="hasVariables"> - <p class="trigger-variables-btn-container d-flex"> - <span class="font-weight-bold">{{ __('Trigger variables:') }}</span> + <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="group js-reveal-variables trigger-variables-btn" + class="gl-mt-2" size="small" + data-testid="trigger-reveal-values-button" @click="toggleValues" >{{ getToggleButtonText }}</gl-button > </p> - <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> + <gl-table :items="trigger.variables" :fields="$options.fields" small bordered> + <template #cell(value)="data"> + {{ getDisplayValue(data.value) }} + </template> + </gl-table> </template> </div> </template> |