diff options
Diffstat (limited to 'app/assets/javascripts/deploy_keys/components')
4 files changed, 121 insertions, 49 deletions
diff --git a/app/assets/javascripts/deploy_keys/components/action_btn.vue b/app/assets/javascripts/deploy_keys/components/action_btn.vue index af7c391ab70..7bc1eb5d652 100644 --- a/app/assets/javascripts/deploy_keys/components/action_btn.vue +++ b/app/assets/javascripts/deploy_keys/components/action_btn.vue @@ -1,10 +1,10 @@ <script> -import { GlLoadingIcon } from '@gitlab/ui'; +import { GlButton } from '@gitlab/ui'; import eventHub from '../eventhub'; export default { components: { - GlLoadingIcon, + GlButton, }, props: { deployKey: { @@ -15,10 +15,20 @@ export default { type: String, required: true, }, - btnCssClass: { + category: { type: String, required: false, - default: 'btn-default', + default: 'tertiary', + }, + variant: { + type: String, + required: false, + default: 'default', + }, + icon: { + type: String, + required: false, + default: '', }, }, data() { @@ -39,13 +49,14 @@ export default { </script> <template> - <button - :class="[{ disabled: isLoading }, btnCssClass]" - :disabled="isLoading" + <gl-button + :category="category" + :variant="variant" + :icon="icon" + :loading="isLoading" class="btn" @click="doAction" > <slot></slot> - <gl-loading-icon v-if="isLoading" :inline="true" /> - </button> + </gl-button> </template> diff --git a/app/assets/javascripts/deploy_keys/components/app.vue b/app/assets/javascripts/deploy_keys/components/app.vue index 425cca13ae8..02c57164f47 100644 --- a/app/assets/javascripts/deploy_keys/components/app.vue +++ b/app/assets/javascripts/deploy_keys/components/app.vue @@ -6,10 +6,12 @@ import NavigationTabs from '~/vue_shared/components/navigation_tabs.vue'; import eventHub from '../eventhub'; import DeployKeysService from '../service'; import DeployKeysStore from '../store'; +import ConfirmModal from './confirm_modal.vue'; import KeysPanel from './keys_panel.vue'; export default { components: { + ConfirmModal, KeysPanel, NavigationTabs, GlLoadingIcon, @@ -30,6 +32,9 @@ export default { currentTab: 'enabled_keys', isLoading: false, store: new DeployKeysStore(), + removeKey: () => {}, + cancel: () => {}, + confirmModalVisible: false, }; }, scopes: { @@ -61,16 +66,16 @@ export default { this.service = new DeployKeysService(this.endpoint); eventHub.$on('enable.key', this.enableKey); - eventHub.$on('remove.key', this.disableKey); - eventHub.$on('disable.key', this.disableKey); + eventHub.$on('remove.key', this.confirmRemoveKey); + eventHub.$on('disable.key', this.confirmRemoveKey); }, mounted() { this.fetchKeys(); }, beforeDestroy() { eventHub.$off('enable.key', this.enableKey); - eventHub.$off('remove.key', this.disableKey); - eventHub.$off('disable.key', this.disableKey); + eventHub.$off('remove.key', this.confirmRemoveKey); + eventHub.$off('disable.key', this.confirmRemoveKey); }, methods: { onChangeTab(tab) { @@ -97,19 +102,20 @@ export default { .then(this.fetchKeys) .catch(() => new Flash(s__('DeployKeys|Error enabling deploy key'))); }, - disableKey(deployKey, callback) { - if ( - // eslint-disable-next-line no-alert - window.confirm(s__('DeployKeys|You are going to remove this deploy key. Are you sure?')) - ) { + confirmRemoveKey(deployKey, callback) { + const hideModal = () => { + this.confirmModalVisible = false; + callback?.(); + }; + this.removeKey = () => { this.service .disableKey(deployKey.id) .then(this.fetchKeys) - .then(callback) + .then(hideModal) .catch(() => new Flash(s__('DeployKeys|Error removing deploy key'))); - } else { - callback(); - } + }; + this.cancel = hideModal; + this.confirmModalVisible = true; }, }, }; @@ -117,6 +123,7 @@ export default { <template> <div class="gl-mb-3 deploy-keys"> + <confirm-modal :visible="confirmModalVisible" @remove="removeKey" @cancel="cancel" /> <gl-loading-icon v-if="isLoading && !hasKeys" :label="s__('DeployKeys|Loading deploy keys')" @@ -124,8 +131,12 @@ export default { /> <template v-else-if="hasKeys"> <div class="top-area scrolling-tabs-container inner-page-scroll-tabs"> - <div class="fade-left"><gl-icon name="chevron-lg-left" :size="12" /></div> - <div class="fade-right"><gl-icon name="chevron-lg-right" :size="12" /></div> + <div class="fade-left"> + <gl-icon name="chevron-lg-left" :size="12" /> + </div> + <div class="fade-right"> + <gl-icon name="chevron-lg-right" :size="12" /> + </div> <navigation-tabs :tabs="tabs" scope="deployKeys" @onChangeTab="onChangeTab" /> </div> @@ -134,7 +145,7 @@ export default { :keys="keys[currentTab]" :store="store" :endpoint="endpoint" - data-qa-selector="project_deploy_keys" + data-qa-selector="project_deploy_keys_container" /> </template> </div> diff --git a/app/assets/javascripts/deploy_keys/components/confirm_modal.vue b/app/assets/javascripts/deploy_keys/components/confirm_modal.vue new file mode 100644 index 00000000000..1932435c42a --- /dev/null +++ b/app/assets/javascripts/deploy_keys/components/confirm_modal.vue @@ -0,0 +1,46 @@ +<script> +import { GlModal } from '@gitlab/ui'; +import { __ } from '~/locale'; + +export default { + components: { + GlModal, + }, + props: { + visible: { + type: Boolean, + required: false, + default: false, + }, + }, + i18n: { + body: __( + 'Are you sure you want to remove this deploy key? If anything is still using this key, it will stop working.', + ), + }, + modalOptions: { + title: __('Do you want to remove this deploy key?'), + actionPrimary: { + text: __('Remove deploy key'), + attributes: [{ variant: 'danger' }], + }, + actionSecondary: { + text: __('Cancel'), + attributes: [{ category: 'tertiary' }], + }, + static: true, + modalId: 'confirm-remove-deploy-key', + }, +}; +</script> +<template> + <gl-modal + v-bind="$options.modalOptions" + :visible="visible" + @primary="$emit('remove')" + @secondary="$emit('cancel')" + @hidden="$emit('cancel')" + > + {{ $options.i18n.body }} + </gl-modal> +</template> diff --git a/app/assets/javascripts/deploy_keys/components/key.vue b/app/assets/javascripts/deploy_keys/components/key.vue index e70ca18bb71..8a7d3430063 100644 --- a/app/assets/javascripts/deploy_keys/components/key.vue +++ b/app/assets/javascripts/deploy_keys/components/key.vue @@ -1,5 +1,5 @@ <script> -import { GlIcon, GlTooltipDirective } from '@gitlab/ui'; +import { GlIcon, GlLink, GlTooltipDirective, GlButton } from '@gitlab/ui'; import { head, tail } from 'lodash'; import { s__, sprintf } from '~/locale'; import timeagoMixin from '~/vue_shared/mixins/timeago'; @@ -9,7 +9,9 @@ import actionBtn from './action_btn.vue'; export default { components: { actionBtn, + GlButton, GlIcon, + GlLink, }, directives: { GlTooltip: GlTooltipDirective, @@ -111,9 +113,9 @@ export default { <div class="gl-responsive-table-row deploy-key"> <div class="table-section section-40"> <div role="rowheader" class="table-mobile-header">{{ s__('DeployKeys|Deploy key') }}</div> - <div class="table-mobile-content qa-key"> - <strong class="title qa-key-title"> {{ deployKey.title }} </strong> - <div class="fingerprint" data-qa-selector="key_md5_fingerprint"> + <div class="table-mobile-content" data-qa-selector="key_container"> + <strong class="title" data-qa-selector="key_title_content"> {{ deployKey.title }} </strong> + <div class="fingerprint" data-qa-selector="key_md5_fingerprint_content"> {{ __('MD5') }}:{{ deployKey.fingerprint }} </div> <div class="fingerprint">{{ __('SHA256') }}:{{ deployKey.fingerprint_sha256 }}</div> @@ -123,15 +125,15 @@ export default { <div role="rowheader" class="table-mobile-header">{{ s__('DeployKeys|Project usage') }}</div> <div class="table-mobile-content deploy-project-list"> <template v-if="projects.length > 0"> - <a + <gl-link v-gl-tooltip :title="projectTooltipTitle(firstProject)" class="label deploy-project-label" > <span> {{ firstProject.project.full_name }} </span> <gl-icon :name="firstProject.can_push ? 'lock-open' : 'lock'" /> - </a> - <a + </gl-link> + <gl-link v-if="isExpandable" v-gl-tooltip :title="restProjectsTooltip" @@ -139,8 +141,8 @@ export default { @click="toggleExpanded" > <span>{{ restProjectsLabel }}</span> - </a> - <a + </gl-link> + <gl-link v-for="deployKeysProject in restProjects" v-else-if="isExpanded" :key="deployKeysProject.project.full_path" @@ -151,7 +153,7 @@ export default { > <span> {{ deployKeysProject.project.full_name }} </span> <gl-icon :name="deployKeysProject.can_push ? 'lock-open' : 'lock'" /> - </a> + </gl-link> </template> <span v-else class="text-secondary">{{ __('None') }}</span> </div> @@ -166,41 +168,43 @@ export default { </div> <div class="table-section section-15 table-button-footer deploy-key-actions"> <div class="btn-group table-action-buttons"> - <action-btn v-if="!isEnabled" :deploy-key="deployKey" type="enable"> + <action-btn v-if="!isEnabled" :deploy-key="deployKey" type="enable" category="secondary"> {{ __('Enable') }} </action-btn> - <a + <gl-button v-if="deployKey.can_edit" v-gl-tooltip :href="editDeployKeyPath" :title="__('Edit')" - class="btn btn-default text-secondary" + :aria-label="__('Edit')" data-container="body" - > - <gl-icon name="pencil" /> - </a> + icon="pencil" + category="secondary" + /> <action-btn v-if="isRemovable" v-gl-tooltip :deploy-key="deployKey" :title="__('Remove')" - btn-css-class="btn-danger" + :aria-label="__('Remove')" + category="primary" + variant="danger" + icon="remove" type="remove" data-container="body" - > - <gl-icon name="remove" /> - </action-btn> + /> <action-btn v-else-if="isEnabled" v-gl-tooltip :deploy-key="deployKey" :title="__('Disable')" - btn-css-class="btn-warning" + :aria-label="__('Disable')" type="disable" data-container="body" - > - <gl-icon name="cancel" /> - </action-btn> + icon="cancel" + category="primary" + variant="danger" + /> </div> </div> </div> |