1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
<script>
import $ from 'jquery';
import { __ } from '~/locale';
import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
import ActionsButton from '~/vue_shared/components/actions_button.vue';
const KEY_WEB_IDE = 'webide';
const KEY_GITPOD = 'gitpod';
export default {
components: {
ActionsButton,
LocalStorageSync,
},
props: {
webIdeUrl: {
type: String,
required: true,
},
needsToFork: {
type: Boolean,
required: false,
default: false,
},
showWebIdeButton: {
type: Boolean,
required: false,
default: true,
},
showGitpodButton: {
type: Boolean,
required: false,
default: false,
},
gitpodUrl: {
type: String,
required: false,
default: '',
},
gitpodEnabled: {
type: Boolean,
required: false,
default: false,
},
},
data() {
return {
selection: KEY_WEB_IDE,
};
},
computed: {
actions() {
return [this.webIdeAction, this.gitpodAction].filter(x => x);
},
webIdeAction() {
if (!this.showWebIdeButton) {
return null;
}
const handleOptions = this.needsToFork
? { href: '#modal-confirm-fork', handle: () => this.showModal('#modal-confirm-fork') }
: { href: this.webIdeUrl };
return {
key: KEY_WEB_IDE,
text: __('Web IDE'),
secondaryText: __('Quickly and easily edit multiple files in your project.'),
tooltip: '',
attrs: {
'data-qa-selector': 'web_ide_button',
},
...handleOptions,
};
},
gitpodAction() {
if (!this.showGitpodButton) {
return null;
}
const handleOptions = this.gitpodEnabled
? { href: this.gitpodUrl }
: { href: '#modal-enable-gitpod', handle: () => this.showModal('#modal-enable-gitpod') };
const secondaryText = __('Launch a ready-to-code development environment for your project.');
return {
key: KEY_GITPOD,
text: __('Gitpod'),
secondaryText,
tooltip: secondaryText,
attrs: {
'data-qa-selector': 'gitpod_button',
},
...handleOptions,
};
},
},
methods: {
select(key) {
this.selection = key;
},
showModal(id) {
$(id).modal('show');
},
},
};
</script>
<template>
<div>
<actions-button :actions="actions" :selected-key="selection" @select="select" />
<local-storage-sync
storage-key="gl-web-ide-button-selected"
:value="selection"
@input="select"
/>
</div>
</template>
|
