diff options
Diffstat (limited to 'app/assets/javascripts/ci_variable_list/components/legacy_ci_variable_table.vue')
| -rw-r--r-- | app/assets/javascripts/ci_variable_list/components/legacy_ci_variable_table.vue | 199 |
1 files changed, 199 insertions, 0 deletions
diff --git a/app/assets/javascripts/ci_variable_list/components/legacy_ci_variable_table.vue b/app/assets/javascripts/ci_variable_list/components/legacy_ci_variable_table.vue new file mode 100644 index 00000000000..f078234829a --- /dev/null +++ b/app/assets/javascripts/ci_variable_list/components/legacy_ci_variable_table.vue @@ -0,0 +1,199 @@ +<script> +import { GlTable, GlButton, GlModalDirective, GlIcon, GlTooltipDirective } from '@gitlab/ui'; +import { mapState, mapActions } from 'vuex'; +import { s__, __ } from '~/locale'; +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue'; +import { ADD_CI_VARIABLE_MODAL_ID } from '../constants'; +import CiVariablePopover from './ci_variable_popover.vue'; + +export default { + modalId: ADD_CI_VARIABLE_MODAL_ID, + trueIcon: 'mobile-issue-close', + falseIcon: 'close', + iconSize: 16, + fields: [ + { + key: 'variable_type', + label: s__('CiVariables|Type'), + customStyle: { width: '70px' }, + }, + { + key: 'key', + label: s__('CiVariables|Key'), + tdClass: 'text-plain', + sortable: true, + customStyle: { width: '40%' }, + }, + { + key: 'value', + label: s__('CiVariables|Value'), + customStyle: { width: '40%' }, + }, + { + key: 'protected', + label: s__('CiVariables|Protected'), + customStyle: { width: '100px' }, + }, + { + key: 'masked', + label: s__('CiVariables|Masked'), + customStyle: { width: '100px' }, + }, + { + key: 'environment_scope', + label: s__('CiVariables|Environments'), + customStyle: { width: '20%' }, + }, + { + key: 'actions', + label: '', + tdClass: 'text-right', + customStyle: { width: '35px' }, + }, + ], + components: { + CiVariablePopover, + GlButton, + GlIcon, + GlTable, + TooltipOnTruncate, + }, + directives: { + GlModalDirective, + GlTooltip: GlTooltipDirective, + }, + mixins: [glFeatureFlagsMixin()], + computed: { + ...mapState(['variables', 'valuesHidden', 'isLoading', 'isDeleting']), + valuesButtonText() { + return this.valuesHidden ? __('Reveal values') : __('Hide values'); + }, + isTableEmpty() { + return !this.variables || this.variables.length === 0; + }, + fields() { + return this.$options.fields; + }, + }, + mounted() { + this.fetchVariables(); + }, + methods: { + ...mapActions(['fetchVariables', 'toggleValues', 'editVariable']), + }, +}; +</script> + +<template> + <div class="ci-variable-table" data-testid="ci-variable-table"> + <gl-table + :fields="fields" + :items="variables" + tbody-tr-class="js-ci-variable-row" + data-qa-selector="ci_variable_table_content" + sort-by="key" + sort-direction="asc" + stacked="lg" + table-class="text-secondary" + fixed + show-empty + sort-icon-left + no-sort-reset + > + <template #table-colgroup="scope"> + <col v-for="field in scope.fields" :key="field.key" :style="field.customStyle" /> + </template> + <template #cell(key)="{ item }"> + <div class="gl-display-flex gl-align-items-center"> + <tooltip-on-truncate :title="item.key" truncate-target="child"> + <span + :id="`ci-variable-key-${item.id}`" + class="gl-display-inline-block gl-max-w-full gl-text-truncate" + >{{ item.key }}</span + > + </tooltip-on-truncate> + <gl-button + v-gl-tooltip + category="tertiary" + icon="copy-to-clipboard" + :title="__('Copy key')" + :data-clipboard-text="item.key" + :aria-label="__('Copy to clipboard')" + /> + </div> + </template> + <template #cell(value)="{ item }"> + <div class="gl-display-flex gl-align-items-center"> + <span v-if="valuesHidden">*********************</span> + <span + v-else + :id="`ci-variable-value-${item.id}`" + class="gl-display-inline-block gl-max-w-full gl-text-truncate" + >{{ item.value }}</span + > + <gl-button + v-gl-tooltip + category="tertiary" + icon="copy-to-clipboard" + :title="__('Copy value')" + :data-clipboard-text="item.value" + :aria-label="__('Copy to clipboard')" + /> + </div> + </template> + <template #cell(protected)="{ item }"> + <gl-icon v-if="item.protected" :size="$options.iconSize" :name="$options.trueIcon" /> + <gl-icon v-else :size="$options.iconSize" :name="$options.falseIcon" /> + </template> + <template #cell(masked)="{ item }"> + <gl-icon v-if="item.masked" :size="$options.iconSize" :name="$options.trueIcon" /> + <gl-icon v-else :size="$options.iconSize" :name="$options.falseIcon" /> + </template> + <template #cell(environment_scope)="{ item }"> + <div class="gl-display-flex"> + <span + :id="`ci-variable-env-${item.id}`" + class="gl-display-inline-block gl-max-w-full gl-text-truncate" + >{{ item.environment_scope }}</span + > + <ci-variable-popover + :target="`ci-variable-env-${item.id}`" + :value="item.environment_scope" + :tooltip-text="__('Copy environment')" + /> + </div> + </template> + <template #cell(actions)="{ item }"> + <gl-button + v-gl-modal-directive="$options.modalId" + icon="pencil" + :aria-label="__('Edit')" + data-qa-selector="edit_ci_variable_button" + @click="editVariable(item)" + /> + </template> + <template #empty> + <p class="gl-text-center gl-py-6 gl-text-black-normal gl-mb-0"> + {{ __('There are no variables yet.') }} + </p> + </template> + </gl-table> + <div class="ci-variable-actions gl-display-flex gl-mt-5"> + <gl-button + v-gl-modal-directive="$options.modalId" + class="gl-mr-3" + data-qa-selector="add_ci_variable_button" + variant="confirm" + category="primary" + >{{ __('Add variable') }}</gl-button + > + <gl-button + v-if="!isTableEmpty" + data-qa-selector="reveal_ci_variable_value_button" + @click="toggleValues(!valuesHidden)" + >{{ valuesButtonText }}</gl-button + > + </div> + </div> +</template> |