diff options
Diffstat (limited to 'app/assets/javascripts/ci/ci_variable_list/components')
| -rw-r--r-- | app/assets/javascripts/ci/ci_variable_list/components/ci_variable_drawer.vue | 17 | ||||
| -rw-r--r-- | app/assets/javascripts/ci/ci_variable_list/components/ci_variable_table.vue | 61 |
2 files changed, 50 insertions, 28 deletions
diff --git a/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_drawer.vue b/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_drawer.vue index ad4b7b790d0..1f583a47ec0 100644 --- a/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_drawer.vue +++ b/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_drawer.vue @@ -44,6 +44,8 @@ export const i18n = { cancel: __('Cancel'), defaultScope: __('All (default)'), deleteVariable: s__('CiVariables|Delete variable'), + description: __('Description'), + descriptionHelpText: s__("CiVariables|The description of the variable's value or usage."), editVariable: s__('CiVariables|Edit variable'), saveVariable: __('Save changes'), environments: __('Environments'), @@ -459,6 +461,21 @@ export default { </p> </gl-form-checkbox> </gl-form-group> + <gl-form-group + label-for="ci-variable-description" + :label="$options.i18n.description" + class="gl-border-none gl-mb-n5" + data-testid="ci-variable-description-label" + :description="$options.i18n.descriptionHelpText" + optional + > + <gl-form-input + id="ci-variable-description" + v-model="variable.description" + class="gl-border-none" + data-testid="ci-variable-description" + /> + </gl-form-group> <gl-form-combobox v-model="variable.key" :token-list="$options.awsTokenList" diff --git a/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_table.vue b/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_table.vue index 901bd39930a..025e5a4795b 100644 --- a/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_table.vue +++ b/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_table.vue @@ -278,35 +278,40 @@ export default { <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-flex-start gl-justify-content-end gl-md-justify-content-start gl-mr-n3" - > - <span - :id="`ci-variable-key-${item.id}`" - class="gl-display-inline-block gl-max-w-full gl-word-break-word" - >{{ item.key }}</span - > - <gl-button - v-gl-tooltip - category="tertiary" - icon="copy-to-clipboard" - class="gl-my-n2 gl-ml-2" - size="small" - :title="__('Copy key')" - :data-clipboard-text="item.key" - :aria-label="__('Copy to clipboard')" - /> - </div> - <div data-testid="ci-variable-table-row-attributes" class="gl-mt-2"> - <gl-badge - v-for="attribute in item.attributes" - :key="`${item.key}-${attribute}`" - class="gl-mr-2" - variant="info" - size="sm" + <div data-testid="ci-variable-table-row-variable"> + <div + class="gl-display-flex gl-align-items-flex-start gl-justify-content-end gl-md-justify-content-start gl-mr-n3" > - {{ attribute }} - </gl-badge> + <span + :id="`ci-variable-key-${item.id}`" + class="gl-display-inline-block gl-max-w-full gl-word-break-word" + >{{ item.key }}</span + > + <gl-button + v-gl-tooltip + category="tertiary" + icon="copy-to-clipboard" + class="gl-my-n2 gl-ml-2" + size="small" + :title="__('Copy key')" + :data-clipboard-text="item.key" + :aria-label="__('Copy to clipboard')" + /> + </div> + <div v-if="item.description" class="gl-mt-2 gl-text-secondary gl-font-sm"> + {{ item.description }} + </div> + <div data-testid="ci-variable-table-row-attributes" class="gl-mt-2"> + <gl-badge + v-for="attribute in item.attributes" + :key="`${item.key}-${attribute}`" + class="gl-mr-2" + variant="info" + size="sm" + > + {{ attribute }} + </gl-badge> + </div> </div> </template> <template v-if="!isInheritedGroupVars" #cell(value)="{ item }"> |