| ... | @@ -3,44 +3,58 @@ import { GlTable, GlButton, GlModalDirective, GlIcon } from '@gitlab/ui'; |
... | @@ -3,44 +3,58 @@ import { GlTable, GlButton, GlModalDirective, GlIcon } from '@gitlab/ui'; |
|
|
import { s__, __ } from '~/locale';
|
|
import { s__, __ } from '~/locale';
|
|
|
import { mapState, mapActions } from 'vuex';
|
|
import { mapState, mapActions } from 'vuex';
|
|
|
import { ADD_CI_VARIABLE_MODAL_ID } from '../constants';
|
|
import { ADD_CI_VARIABLE_MODAL_ID } from '../constants';
|
|
|
|
import CiVariablePopover from './ci_variable_popover.vue';
|
|
|
|
|
|
|
|
export default {
|
|
export default {
|
|
|
modalId: ADD_CI_VARIABLE_MODAL_ID,
|
|
modalId: ADD_CI_VARIABLE_MODAL_ID,
|
|
|
|
trueIcon: 'mobile-issue-close',
|
|
|
|
falseIcon: 'close',
|
|
|
|
iconSize: 16,
|
|
|
fields: [
|
|
fields: [
|
|
|
{
|
|
{
|
|
|
key: 'variable_type',
|
|
key: 'variable_type',
|
|
|
label: s__('CiVariables|Type'),
|
|
label: s__('CiVariables|Type'),
|
|
|
|
customStyle: { width: '70px' },
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
key: 'key',
|
|
key: 'key',
|
|
|
label: s__('CiVariables|Key'),
|
|
label: s__('CiVariables|Key'),
|
|
|
|
tdClass: 'text-plain',
|
|
|
|
sortable: true,
|
|
|
|
customStyle: { width: '40%' },
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
key: 'value',
|
|
key: 'value',
|
|
|
label: s__('CiVariables|Value'),
|
|
label: s__('CiVariables|Value'),
|
|
|
tdClass: 'qa-ci-variable-input-value',
|
|
tdClass: 'qa-ci-variable-input-value',
|
|
|
|
customStyle: { width: '40%' },
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
key: 'protected',
|
|
key: 'protected',
|
|
|
label: s__('CiVariables|Protected'),
|
|
label: s__('CiVariables|Protected'),
|
|
|
|
customStyle: { width: '100px' },
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
key: 'masked',
|
|
key: 'masked',
|
|
|
label: s__('CiVariables|Masked'),
|
|
label: s__('CiVariables|Masked'),
|
|
|
|
customStyle: { width: '100px' },
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
key: 'environment_scope',
|
|
key: 'environment_scope',
|
|
|
label: s__('CiVariables|Environment Scope'),
|
|
label: s__('CiVariables|Environments'),
|
|
|
|
customStyle: { width: '20%' },
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
key: 'actions',
|
|
key: 'actions',
|
|
|
label: '',
|
|
label: '',
|
|
|
|
customStyle: { width: '35px' },
|
|
|
},
|
|
},
|
|
|
],
|
|
],
|
|
|
components: {
|
|
components: {
|
|
|
GlTable,
|
|
GlTable,
|
|
|
GlButton,
|
|
GlButton,
|
|
|
GlIcon,
|
|
GlIcon,
|
|
|
|
CiVariablePopover,
|
|
|
},
|
|
},
|
|
|
directives: {
|
|
directives: {
|
|
|
GlModalDirective,
|
|
GlModalDirective,
|
| ... | @@ -64,7 +78,7 @@ export default { |
... | @@ -64,7 +78,7 @@ export default { |
|
|
this.fetchVariables();
|
|
this.fetchVariables();
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
...mapActions(['fetchVariables', 'deleteVariable', 'toggleValues', 'editVariable']),
|
|
...mapActions(['fetchVariables', 'toggleValues', 'editVariable']),
|
|
|
},
|
|
},
|
|
|
};
|
|
};
|
|
|
</script>
|
|
</script>
|
| ... | @@ -74,42 +88,82 @@ export default { |
... | @@ -74,42 +88,82 @@ export default { |
|
|
<gl-table
|
|
<gl-table
|
|
|
:fields="fields"
|
|
:fields="fields"
|
|
|
:items="variables"
|
|
:items="variables"
|
|
|
responsive
|
|
|
|
|
show-empty
|
|
|
|
|
tbody-tr-class="js-ci-variable-row"
|
|
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">
|
|
<template #table-colgroup="scope">
|
|
|
<span v-if="valuesHidden">*****************</span>
|
|
<col v-for="field in scope.fields" :key="field.key" :style="field.customStyle" />
|
|
|
<span v-else>{{ data.value }}</span>
|
|
</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>
|
|
|
<template #cell(actions)="data">
|
|
<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="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
|
|
<gl-button
|
|
|
ref="edit-ci-variable"
|
|
ref="edit-ci-variable"
|
|
|
v-gl-modal-directive="$options.modalId"
|
|
v-gl-modal-directive="$options.modalId"
|
|
|
@click="editVariable(data.item)"
|
|
@click="editVariable(item)"
|
|
|
>
|
|
>
|
|
|
<gl-icon name="pencil" />
|
|
<gl-icon :size="$options.iconSize" name="pencil" />
|
|
|
</gl-button>
|
|
|
|
|
<gl-button
|
|
|
|
|
ref="delete-ci-variable"
|
|
|
|
|
category="secondary"
|
|
|
|
|
variant="danger"
|
|
|
|
|
@click="deleteVariable(data.item)"
|
|
|
|
|
>
|
|
|
|
|
<gl-icon name="remove" />
|
|
|
|
|
</gl-button>
|
|
</gl-button>
|
|
|
</template>
|
|
</template>
|
|
|
<template #empty>
|
|
<template #empty>
|
|
|
<p ref="empty-variables" class="settings-message text-center empty-variables">
|
|
<p ref="empty-variables" class="text-center empty-variables text-plain">
|
|
|
{{
|
|
{{ __('There are no variables yet.') }}
|
|
|
__(
|
|
|
|
|
'There are currently no variables, add a variable with the Add Variable button below.',
|
|
|
|
|
)
|
|
|
|
|
}}
|
|
|
|
|
</p>
|
|
</p>
|
|
|
</template>
|
|
</template>
|
|
|
</gl-table>
|
|
</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
|
|
<gl-button
|
|
|
v-if="tableIsNotEmpty"
|
|
v-if="tableIsNotEmpty"
|
|
|
ref="secret-value-reveal-button"
|
|
ref="secret-value-reveal-button"
|
| ... | |
... | |
| ... | | ... | |