diff options
Diffstat (limited to 'app/assets/javascripts/ci_variable_list')
7 files changed, 51 insertions, 49 deletions
diff --git a/app/assets/javascripts/ci_variable_list/ajax_variable_list.js b/app/assets/javascripts/ci_variable_list/ajax_variable_list.js index 470649e63fb..b8bf363fc9d 100644 --- a/app/assets/javascripts/ci_variable_list/ajax_variable_list.js +++ b/app/assets/javascripts/ci_variable_list/ajax_variable_list.js @@ -1,7 +1,7 @@ import { escape } from 'lodash'; import axios from '../lib/utils/axios_utils'; import { s__ } from '../locale'; -import Flash from '../flash'; +import { deprecatedCreateFlash as Flash } from '../flash'; import { parseBoolean } from '../lib/utils/common_utils'; import statusCodes from '../lib/utils/http_status'; import VariableList from './ci_variable_list'; diff --git a/app/assets/javascripts/ci_variable_list/components/ci_environments_dropdown.vue b/app/assets/javascripts/ci_variable_list/components/ci_environments_dropdown.vue index 175e89a454b..d22fef27964 100644 --- a/app/assets/javascripts/ci_variable_list/components/ci_environments_dropdown.vue +++ b/app/assets/javascripts/ci_variable_list/components/ci_environments_dropdown.vue @@ -1,20 +1,20 @@ <script> import { - GlDropdown, - GlDropdownItem, - GlDropdownDivider, + GlDeprecatedDropdown, + GlDeprecatedDropdownItem, + GlDeprecatedDropdownDivider, GlSearchBoxByType, GlIcon, } from '@gitlab/ui'; -import { __, sprintf } from '~/locale'; import { mapGetters } from 'vuex'; +import { __, sprintf } from '~/locale'; export default { name: 'CiEnvironmentsDropdown', components: { - GlDropdown, - GlDropdownItem, - GlDropdownDivider, + GlDeprecatedDropdown, + GlDeprecatedDropdownItem, + GlDeprecatedDropdownDivider, GlSearchBoxByType, GlIcon, }, @@ -66,9 +66,9 @@ export default { }; </script> <template> - <gl-dropdown :text="value"> + <gl-deprecated-dropdown :text="value"> <gl-search-box-by-type v-model.trim="searchTerm" class="m-2" /> - <gl-dropdown-item + <gl-deprecated-dropdown-item v-for="environment in filteredResults" :key="environment" @click="selectEnvironment(environment)" @@ -79,15 +79,15 @@ export default { class="vertical-align-middle" /> {{ environment }} - </gl-dropdown-item> - <gl-dropdown-item v-if="!filteredResults.length" ref="noMatchingResults">{{ + </gl-deprecated-dropdown-item> + <gl-deprecated-dropdown-item v-if="!filteredResults.length" ref="noMatchingResults">{{ __('No matching results') - }}</gl-dropdown-item> + }}</gl-deprecated-dropdown-item> <template v-if="shouldRenderCreateButton"> - <gl-dropdown-divider /> - <gl-dropdown-item @click="createClicked"> + <gl-deprecated-dropdown-divider /> + <gl-deprecated-dropdown-item @click="createClicked"> {{ composedCreateButtonLabel }} - </gl-dropdown-item> + </gl-deprecated-dropdown-item> </template> - </gl-dropdown> + </gl-deprecated-dropdown> </template> diff --git a/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue b/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue index 0ba58430de1..fbf19847e9d 100644 --- a/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue +++ b/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue @@ -3,7 +3,6 @@ import { GlAlert, GlButton, GlCollapse, - GlDeprecatedButton, GlFormCheckbox, GlFormCombobox, GlFormGroup, @@ -39,7 +38,6 @@ export default { GlAlert, GlButton, GlCollapse, - GlDeprecatedButton, GlFormCheckbox, GlFormCombobox, GlFormGroup, @@ -210,6 +208,7 @@ export default { v-model="key" :token-list="$options.tokenList" :label-text="__('Key')" + data-qa-selector="ci_variable_key_field" /> <gl-form-group v-else :label="__('Key')" label-for="ci-variable-key"> @@ -242,7 +241,7 @@ export default { <gl-form-group :label="__('Type')" label-for="ci-variable-type" - class="w-50 append-right-15" + class="w-50 gl-mr-5" :class="{ 'w-100': isGroup }" > <gl-form-select id="ci-variable-type" v-model="variable_type" :options="typeOptions" /> @@ -339,24 +338,25 @@ export default { </gl-alert> </gl-collapse> <template #modal-footer> - <gl-deprecated-button @click="hideModal">{{ __('Cancel') }}</gl-deprecated-button> - <gl-deprecated-button + <gl-button @click="hideModal">{{ __('Cancel') }}</gl-button> + <gl-button v-if="variableBeingEdited" ref="deleteCiVariable" - category="secondary" variant="danger" + category="secondary" data-qa-selector="ci_variable_delete_button" @click="deleteVarAndClose" - >{{ __('Delete variable') }}</gl-deprecated-button + >{{ __('Delete variable') }}</gl-button > - <gl-deprecated-button + <gl-button ref="updateOrAddVariable" :disabled="!canSubmit" variant="success" + category="primary" data-qa-selector="ci_variable_save_button" @click="updateOrAddVariable" >{{ modalActionText }} - </gl-deprecated-button> + </gl-button> </template> </gl-modal> </template> diff --git a/app/assets/javascripts/ci_variable_list/components/ci_variable_popover.vue b/app/assets/javascripts/ci_variable_list/components/ci_variable_popover.vue index 07b0d55bd4c..431819124c2 100644 --- a/app/assets/javascripts/ci_variable_list/components/ci_variable_popover.vue +++ b/app/assets/javascripts/ci_variable_list/components/ci_variable_popover.vue @@ -1,12 +1,11 @@ <script> -import { GlPopover, GlIcon, GlDeprecatedButton, GlTooltipDirective } from '@gitlab/ui'; +import { GlPopover, GlButton, GlTooltipDirective } from '@gitlab/ui'; export default { maxTextLength: 95, components: { GlPopover, - GlIcon, - GlDeprecatedButton, + GlButton, }, directives: { GlTooltip: GlTooltipDirective, @@ -39,16 +38,18 @@ export default { <template> <div id="popover-container"> <gl-popover :target="target" triggers="hover" placement="top" container="popover-container"> - <div class="d-flex justify-content-between position-relative"> - <div class="pr-5 w-100 ci-popover-value">{{ displayValue }}</div> - <gl-deprecated-button + <div class="gl-display-flex gl-justify-content-space-between gl-align-items-center"> + <div class="ci-popover-value gl-pr-3"> + {{ displayValue }} + </div> + <gl-button v-gl-tooltip - class="btn-transparent btn-clipboard position-absolute position-top-0 position-right-0" + category="tertiary" + icon="copy-to-clipboard" :title="tooltipText" :data-clipboard-text="value" - > - <gl-icon name="copy-to-clipboard" /> - </gl-deprecated-button> + :aria-label="__('Copy to clipboard')" + /> </div> </gl-popover> </div> diff --git a/app/assets/javascripts/ci_variable_list/components/ci_variable_settings.vue b/app/assets/javascripts/ci_variable_list/components/ci_variable_settings.vue index ed1240c247f..12bc5ad3549 100644 --- a/app/assets/javascripts/ci_variable_list/components/ci_variable_settings.vue +++ b/app/assets/javascripts/ci_variable_list/components/ci_variable_settings.vue @@ -1,7 +1,7 @@ <script> +import { mapState, mapActions } from 'vuex'; import CiVariableModal from './ci_variable_modal.vue'; import CiVariableTable from './ci_variable_table.vue'; -import { mapState, mapActions } from 'vuex'; export default { components: { 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 7b703c5ede1..018704bff74 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 @@ -1,7 +1,7 @@ <script> -import { GlTable, GlDeprecatedButton, GlModalDirective, GlIcon } from '@gitlab/ui'; -import { s__, __ } from '~/locale'; +import { GlTable, GlButton, GlModalDirective, GlIcon } from '@gitlab/ui'; import { mapState, mapActions } from 'vuex'; +import { s__, __ } from '~/locale'; import { ADD_CI_VARIABLE_MODAL_ID } from '../constants'; import CiVariablePopover from './ci_variable_popover.vue'; @@ -51,7 +51,7 @@ export default { ], components: { GlTable, - GlDeprecatedButton, + GlButton, GlIcon, CiVariablePopover, }, @@ -147,14 +147,14 @@ export default { </div> </template> <template #cell(actions)="{ item }"> - <gl-deprecated-button + <gl-button ref="edit-ci-variable" v-gl-modal-directive="$options.modalId" + icon="pencil" + :aria-label="__('Edit')" data-qa-selector="edit_ci_variable_button" @click="editVariable(item)" - > - <gl-icon :size="$options.iconSize" name="pencil" /> - </gl-deprecated-button> + /> </template> <template #empty> <p ref="empty-variables" class="text-center empty-variables text-plain"> @@ -166,20 +166,21 @@ export default { class="ci-variable-actions d-flex justify-content-end" :class="{ 'justify-content-center': !tableIsNotEmpty }" > - <gl-deprecated-button + <gl-button v-if="tableIsNotEmpty" ref="secret-value-reveal-button" data-qa-selector="reveal_ci_variable_value_button" class="gl-mr-3" @click="toggleValues(!valuesHidden)" - >{{ valuesButtonText }}</gl-deprecated-button + >{{ valuesButtonText }}</gl-button > - <gl-deprecated-button + <gl-button ref="add-ci-variable" v-gl-modal-directive="$options.modalId" data-qa-selector="add_ci_variable_button" variant="success" - >{{ __('Add Variable') }}</gl-deprecated-button + category="primary" + >{{ __('Add Variable') }}</gl-button > </div> </div> diff --git a/app/assets/javascripts/ci_variable_list/store/actions.js b/app/assets/javascripts/ci_variable_list/store/actions.js index 60c7a480769..e3e9dac0a79 100644 --- a/app/assets/javascripts/ci_variable_list/store/actions.js +++ b/app/assets/javascripts/ci_variable_list/store/actions.js @@ -1,7 +1,7 @@ import * as types from './mutation_types'; import axios from '~/lib/utils/axios_utils'; import Api from '~/api'; -import createFlash from '~/flash'; +import { deprecatedCreateFlash as createFlash } from '~/flash'; import { __ } from '~/locale'; import { prepareDataForApi, prepareDataForDisplay, prepareEnvironments } from './utils'; |