debian-mirror-gitlab/app/assets/javascripts/deploy_keys/components/app.vue

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

163 lines
4.2 KiB
Vue
Raw Normal View History

2017-08-17 22:00:37 +05:30
<script>
2020-11-24 15:15:51 +05:30
import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
2021-09-30 23:02:18 +05:30
import createFlash from '~/flash';
2021-03-11 19:13:27 +05:30
import { s__ } from '~/locale';
2018-10-15 14:42:47 +05:30
import NavigationTabs from '~/vue_shared/components/navigation_tabs.vue';
import eventHub from '../eventhub';
import DeployKeysService from '../service';
import DeployKeysStore from '../store';
2021-06-08 01:23:25 +05:30
import ConfirmModal from './confirm_modal.vue';
2018-10-15 14:42:47 +05:30
import KeysPanel from './keys_panel.vue';
2017-08-17 22:00:37 +05:30
2018-10-15 14:42:47 +05:30
export default {
components: {
2021-06-08 01:23:25 +05:30
ConfirmModal,
2018-10-15 14:42:47 +05:30
KeysPanel,
NavigationTabs,
2018-12-13 13:39:08 +05:30
GlLoadingIcon,
2020-11-24 15:15:51 +05:30
GlIcon,
2018-10-15 14:42:47 +05:30
},
props: {
endpoint: {
type: String,
required: true,
2017-08-17 22:00:37 +05:30
},
2018-10-15 14:42:47 +05:30
projectId: {
type: String,
required: true,
2017-08-17 22:00:37 +05:30
},
2018-10-15 14:42:47 +05:30
},
data() {
return {
currentTab: 'enabled_keys',
isLoading: false,
store: new DeployKeysStore(),
2021-06-08 01:23:25 +05:30
removeKey: () => {},
cancel: () => {},
confirmModalVisible: false,
2018-10-15 14:42:47 +05:30
};
},
scopes: {
enabled_keys: s__('DeployKeys|Enabled deploy keys'),
available_project_keys: s__('DeployKeys|Privately accessible deploy keys'),
public_keys: s__('DeployKeys|Publicly accessible deploy keys'),
},
computed: {
tabs() {
2021-03-08 18:12:59 +05:30
return Object.keys(this.$options.scopes).map((scope) => {
2018-10-15 14:42:47 +05:30
const count = Array.isArray(this.keys[scope]) ? this.keys[scope].length : null;
return {
name: this.$options.scopes[scope],
scope,
isActive: scope === this.currentTab,
count,
};
});
},
hasKeys() {
return Object.keys(this.keys).length;
2018-03-17 18:26:18 +05:30
},
2018-10-15 14:42:47 +05:30
keys() {
return this.store.keys;
2017-08-17 22:00:37 +05:30
},
2018-10-15 14:42:47 +05:30
},
created() {
this.service = new DeployKeysService(this.endpoint);
2018-03-17 18:26:18 +05:30
2018-10-15 14:42:47 +05:30
eventHub.$on('enable.key', this.enableKey);
2021-06-08 01:23:25 +05:30
eventHub.$on('remove.key', this.confirmRemoveKey);
eventHub.$on('disable.key', this.confirmRemoveKey);
2018-10-15 14:42:47 +05:30
},
mounted() {
this.fetchKeys();
},
beforeDestroy() {
eventHub.$off('enable.key', this.enableKey);
2021-06-08 01:23:25 +05:30
eventHub.$off('remove.key', this.confirmRemoveKey);
eventHub.$off('disable.key', this.confirmRemoveKey);
2018-10-15 14:42:47 +05:30
},
methods: {
onChangeTab(tab) {
this.currentTab = tab;
2018-03-17 18:26:18 +05:30
},
2018-10-15 14:42:47 +05:30
fetchKeys() {
this.isLoading = true;
return this.service
.getKeys()
2021-03-08 18:12:59 +05:30
.then((data) => {
2018-10-15 14:42:47 +05:30
this.isLoading = false;
this.store.keys = data;
})
.catch(() => {
this.isLoading = false;
this.store.keys = {};
2021-09-30 23:02:18 +05:30
return createFlash({
message: s__('DeployKeys|Error getting deploy keys'),
});
2018-10-15 14:42:47 +05:30
});
2018-03-17 18:26:18 +05:30
},
2018-10-15 14:42:47 +05:30
enableKey(deployKey) {
this.service
.enableKey(deployKey.id)
.then(this.fetchKeys)
2021-09-30 23:02:18 +05:30
.catch(() =>
createFlash({
message: s__('DeployKeys|Error enabling deploy key'),
}),
);
2017-08-17 22:00:37 +05:30
},
2021-06-08 01:23:25 +05:30
confirmRemoveKey(deployKey, callback) {
const hideModal = () => {
this.confirmModalVisible = false;
callback?.();
};
this.removeKey = () => {
2018-10-15 14:42:47 +05:30
this.service
.disableKey(deployKey.id)
.then(this.fetchKeys)
2021-06-08 01:23:25 +05:30
.then(hideModal)
2021-09-30 23:02:18 +05:30
.catch(() =>
createFlash({
message: s__('DeployKeys|Error removing deploy key'),
}),
);
2021-06-08 01:23:25 +05:30
};
this.cancel = hideModal;
this.confirmModalVisible = true;
2017-08-17 22:00:37 +05:30
},
2018-10-15 14:42:47 +05:30
},
};
2017-08-17 22:00:37 +05:30
</script>
<template>
2020-07-28 23:09:34 +05:30
<div class="gl-mb-3 deploy-keys">
2021-06-08 01:23:25 +05:30
<confirm-modal :visible="confirmModalVisible" @remove="removeKey" @cancel="cancel" />
2018-12-05 23:21:45 +05:30
<gl-loading-icon
2017-09-10 17:25:29 +05:30
v-if="isLoading && !hasKeys"
2018-10-15 14:42:47 +05:30
:label="s__('DeployKeys|Loading deploy keys')"
2020-04-22 19:07:51 +05:30
size="lg"
2017-09-10 17:25:29 +05:30
/>
2018-10-15 14:42:47 +05:30
<template v-else-if="hasKeys">
<div class="top-area scrolling-tabs-container inner-page-scroll-tabs">
2021-06-08 01:23:25 +05:30
<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>
2018-10-15 14:42:47 +05:30
2019-02-15 15:39:39 +05:30
<navigation-tabs :tabs="tabs" scope="deployKeys" @onChangeTab="onChangeTab" />
2018-10-15 14:42:47 +05:30
</div>
2017-08-17 22:00:37 +05:30
<keys-panel
2018-10-15 14:42:47 +05:30
:project-id="projectId"
:keys="keys[currentTab]"
2017-09-10 17:25:29 +05:30
:store="store"
:endpoint="endpoint"
2021-06-08 01:23:25 +05:30
data-qa-selector="project_deploy_keys_container"
2017-09-10 17:25:29 +05:30
/>
2018-10-15 14:42:47 +05:30
</template>
2017-08-17 22:00:37 +05:30
</div>
</template>