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 | 104 |
1 files changed, 79 insertions, 25 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 index e240323d2c5..3f2f89ada6f 100644 --- a/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue +++ b/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue @@ -3,44 +3,58 @@ 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'; +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'), tdClass: 'qa-ci-variable-input-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|Environment Scope'), + label: s__('CiVariables|Environments'), + customStyle: { width: '20%' }, }, { key: 'actions', label: '', + customStyle: { width: '35px' }, }, ], components: { GlTable, GlButton, GlIcon, + CiVariablePopover, }, directives: { GlModalDirective, @@ -64,7 +78,7 @@ export default { this.fetchVariables(); }, methods: { - ...mapActions(['fetchVariables', 'deleteVariable', 'toggleValues', 'editVariable']), + ...mapActions(['fetchVariables', 'toggleValues', 'editVariable']), }, }; </script> @@ -74,42 +88,82 @@ export default { <gl-table :fields="fields" :items="variables" - responsive - show-empty tbody-tr-class="js-ci-variable-row" + sort-by="key" + sort-direction="asc" + stacked="lg" + fixed + show-empty + sort-icon-left + no-sort-reset > - <template #cell(value)="data"> - <span v-if="valuesHidden">*****************</span> - <span v-else>{{ data.value }}</span> + <template #table-colgroup="scope"> + <col v-for="field in scope.fields" :key="field.key" :style="field.customStyle" /> + </template> + <template #cell(key)="{ item }"> + <div class="d-flex truncated-container"> + <span :id="`ci-variable-key-${item.id}`" class="d-inline-block mw-100 text-truncate">{{ + item.key + }}</span> + <ci-variable-popover + :target="`ci-variable-key-${item.id}`" + :value="item.key" + :tooltip-text="__('Copy key')" + /> + </div> + </template> + <template #cell(value)="{ item }"> + <span v-if="valuesHidden">*********************</span> + <div v-else class="d-flex truncated-container"> + <span :id="`ci-variable-value-${item.id}`" class="d-inline-block mw-100 text-truncate">{{ + item.value + }}</span> + <ci-variable-popover + :target="`ci-variable-value-${item.id}`" + :value="item.value" + :tooltip-text="__('Copy value')" + /> + </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(actions)="data"> + <template #cell(environment_scope)="{ item }"> + <div class="d-flex truncated-container"> + <span :id="`ci-variable-env-${item.id}`" class="d-inline-block mw-100 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 ref="edit-ci-variable" v-gl-modal-directive="$options.modalId" - @click="editVariable(data.item)" + @click="editVariable(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-icon :size="$options.iconSize" name="pencil" /> </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 ref="empty-variables" class="text-center empty-variables text-plain"> + {{ __('There are no variables yet.') }} </p> </template> </gl-table> - <div class="ci-variable-actions d-flex justify-content-end"> + <div + class="ci-variable-actions d-flex justify-content-end" + :class="{ 'justify-content-center': !tableIsNotEmpty }" + > <gl-button v-if="tableIsNotEmpty" ref="secret-value-reveal-button" |