diff options
author | jhampton <jhampton@gitlab.com> | 2018-12-03 14:29:05 -0500 |
---|---|---|
committer | jhampton <jhampton@gitlab.com> | 2018-12-03 15:35:44 -0500 |
commit | aaf22b668f5a2489f9729f445eb4eaa769036446 (patch) | |
tree | adac9584a74242db393d176240e9ea300e6b010a /app/assets/javascripts/jobs | |
parent | 9a14844ec0e677a5b4644e9b2bb8eec75532917b (diff) | |
download | gitlab-ce-aaf22b668f5a2489f9729f445eb4eaa769036446.tar.gz |
Conditionally display variable values
We want to hide trigger varialbes values in the UI by default. A toggle
button will be available to maintainers.
Diffstat (limited to 'app/assets/javascripts/jobs')
-rw-r--r-- | app/assets/javascripts/jobs/components/trigger_block.vue | 76 |
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> |