diff options
Diffstat (limited to 'app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue')
-rw-r--r-- | app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue | 130 |
1 files changed, 130 insertions, 0 deletions
diff --git a/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue b/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue new file mode 100644 index 00000000000..e240323d2c5 --- /dev/null +++ b/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue @@ -0,0 +1,130 @@ +<script> +import { GlTable, GlButton, GlModalDirective, GlIcon } from '@gitlab/ui'; +import { s__, __ } from '~/locale'; +import { mapState, mapActions } from 'vuex'; +import { ADD_CI_VARIABLE_MODAL_ID } from '../constants'; + +export default { + modalId: ADD_CI_VARIABLE_MODAL_ID, + fields: [ + { + key: 'variable_type', + label: s__('CiVariables|Type'), + }, + { + key: 'key', + label: s__('CiVariables|Key'), + }, + { + key: 'value', + label: s__('CiVariables|Value'), + tdClass: 'qa-ci-variable-input-value', + }, + { + key: 'protected', + label: s__('CiVariables|Protected'), + }, + { + key: 'masked', + label: s__('CiVariables|Masked'), + }, + { + key: 'environment_scope', + label: s__('CiVariables|Environment Scope'), + }, + { + key: 'actions', + label: '', + }, + ], + components: { + GlTable, + GlButton, + GlIcon, + }, + directives: { + GlModalDirective, + }, + computed: { + ...mapState(['variables', 'valuesHidden', 'isGroup', 'isLoading', 'isDeleting']), + valuesButtonText() { + return this.valuesHidden ? __('Reveal values') : __('Hide values'); + }, + tableIsNotEmpty() { + return this.variables && this.variables.length > 0; + }, + fields() { + if (this.isGroup) { + return this.$options.fields.filter(field => field.key !== 'environment_scope'); + } + return this.$options.fields; + }, + }, + mounted() { + this.fetchVariables(); + }, + methods: { + ...mapActions(['fetchVariables', 'deleteVariable', 'toggleValues', 'editVariable']), + }, +}; +</script> + +<template> + <div class="ci-variable-table"> + <gl-table + :fields="fields" + :items="variables" + responsive + show-empty + tbody-tr-class="js-ci-variable-row" + > + <template #cell(value)="data"> + <span v-if="valuesHidden">*****************</span> + <span v-else>{{ data.value }}</span> + </template> + <template #cell(actions)="data"> + <gl-button + ref="edit-ci-variable" + v-gl-modal-directive="$options.modalId" + @click="editVariable(data.item)" + > + <gl-icon name="pencil" /> + </gl-button> + <gl-button + ref="delete-ci-variable" + category="secondary" + variant="danger" + @click="deleteVariable(data.item)" + > + <gl-icon name="remove" /> + </gl-button> + </template> + <template #empty> + <p ref="empty-variables" class="settings-message text-center empty-variables"> + {{ + __( + 'There are currently no variables, add a variable with the Add Variable button below.', + ) + }} + </p> + </template> + </gl-table> + <div class="ci-variable-actions d-flex justify-content-end"> + <gl-button + v-if="tableIsNotEmpty" + ref="secret-value-reveal-button" + data-qa-selector="reveal_ci_variable_value" + class="append-right-8" + @click="toggleValues(!valuesHidden)" + >{{ valuesButtonText }}</gl-button + > + <gl-button + ref="add-ci-variable" + v-gl-modal-directive="$options.modalId" + data-qa-selector="add_ci_variable" + variant="success" + >{{ __('Add Variable') }}</gl-button + > + </div> + </div> +</template> |