Read about our upcoming Code of Conduct on this issue

app.vue 3.69 KB
Newer Older
1
<script>
2
3
4
5
6
7
8
import { s__ } from '~/locale';
import Flash from '~/flash';
import NavigationTabs from '~/vue_shared/components/navigation_tabs.vue';
import eventHub from '../eventhub';
import DeployKeysService from '../service';
import DeployKeysStore from '../store';
import KeysPanel from './keys_panel.vue';
Clement Ho's avatar
Clement Ho committed
9
import { GlLoadingIcon } from '@gitlab/ui';
10

11
12
13
14
export default {
  components: {
    KeysPanel,
    NavigationTabs,
15
    GlLoadingIcon,
16
17
18
19
20
  },
  props: {
    endpoint: {
      type: String,
      required: true,
21
    },
22
23
24
    projectId: {
      type: String,
      required: true,
25
    },
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
  },
  data() {
    return {
      currentTab: 'enabled_keys',
      isLoading: false,
      store: new DeployKeysStore(),
    };
  },
  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() {
      return Object.keys(this.$options.scopes).map(scope => {
        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;
Filipa Lacerda's avatar
Filipa Lacerda committed
54
    },
55
56
    keys() {
      return this.store.keys;
57
    },
58
59
60
  },
  created() {
    this.service = new DeployKeysService(this.endpoint);
Filipa Lacerda's avatar
Filipa Lacerda committed
61

62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
    eventHub.$on('enable.key', this.enableKey);
    eventHub.$on('remove.key', this.disableKey);
    eventHub.$on('disable.key', this.disableKey);
  },
  mounted() {
    this.fetchKeys();
  },
  beforeDestroy() {
    eventHub.$off('enable.key', this.enableKey);
    eventHub.$off('remove.key', this.disableKey);
    eventHub.$off('disable.key', this.disableKey);
  },
  methods: {
    onChangeTab(tab) {
      this.currentTab = tab;
Filipa Lacerda's avatar
Filipa Lacerda committed
77
    },
78
79
80
81
82
83
84
85
86
87
88
89
90
91
    fetchKeys() {
      this.isLoading = true;

      return this.service
        .getKeys()
        .then(data => {
          this.isLoading = false;
          this.store.keys = data;
        })
        .catch(() => {
          this.isLoading = false;
          this.store.keys = {};
          return new Flash(s__('DeployKeys|Error getting deploy keys'));
        });
Filipa Lacerda's avatar
Filipa Lacerda committed
92
    },
93
94
95
96
97
    enableKey(deployKey) {
      this.service
        .enableKey(deployKey.id)
        .then(this.fetchKeys)
        .catch(() => new Flash(s__('DeployKeys|Error enabling deploy key')));
98
    },
99
    disableKey(deployKey, callback) {
100
101
102
103
      if (
        // eslint-disable-next-line no-alert
        window.confirm(s__('DeployKeys|You are going to remove this deploy key. Are you sure?'))
      ) {
104
105
106
107
108
109
110
111
        this.service
          .disableKey(deployKey.id)
          .then(this.fetchKeys)
          .then(callback)
          .catch(() => new Flash(s__('DeployKeys|Error removing deploy key')));
      } else {
        callback();
      }
112
    },
113
114
  },
};
115
116
117
</script>

<template>
118
  <div class="append-bottom-default deploy-keys">
Clement Ho's avatar
Clement Ho committed
119
    <gl-loading-icon
120
      v-if="isLoading && !hasKeys"
121
      :label="s__('DeployKeys|Loading deploy keys')"
Clement Ho's avatar
Clement Ho committed
122
      :size="2"
123
    />
124
125
    <template v-else-if="hasKeys">
      <div class="top-area scrolling-tabs-container inner-page-scroll-tabs">
Mike Greiling's avatar
Mike Greiling committed
126
127
        <div class="fade-left"><i class="fa fa-angle-left" aria-hidden="true"> </i></div>
        <div class="fade-right"><i class="fa fa-angle-right" aria-hidden="true"> </i></div>
128

Mike Greiling's avatar
Mike Greiling committed
129
        <navigation-tabs :tabs="tabs" scope="deployKeys" @onChangeTab="onChangeTab" />
130
      </div>
131
      <keys-panel
132
133
        :project-id="projectId"
        :keys="keys[currentTab]"
134
135
        :store="store"
        :endpoint="endpoint"
136
        data-qa-selector="project_deploy_keys"
137
      />
138
    </template>
139
140
  </div>
</template>