diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/web_ide_link.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/web_ide_link.vue | 96 |
1 files changed, 88 insertions, 8 deletions
diff --git a/app/assets/javascripts/vue_shared/components/web_ide_link.vue b/app/assets/javascripts/vue_shared/components/web_ide_link.vue index 6da2d39a95a..f02cd5c4e2e 100644 --- a/app/assets/javascripts/vue_shared/components/web_ide_link.vue +++ b/app/assets/javascripts/vue_shared/components/web_ide_link.vue @@ -1,6 +1,7 @@ <script> import $ from 'jquery'; -import { __ } from '~/locale'; +import { GlModal, GlSprintf, GlLink } from '@gitlab/ui'; +import { s__, __ } from '~/locale'; import ActionsButton from '~/vue_shared/components/actions_button.vue'; import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue'; @@ -12,6 +13,19 @@ export default { components: { ActionsButton, LocalStorageSync, + GlModal, + GlSprintf, + GlLink, + }, + i18n: { + modal: { + title: __('Enable Gitpod?'), + content: s__( + 'Gitpod|To use Gitpod you must first enable the feature in the integrations section of your %{linkStart}user preferences%{linkEnd}.', + ), + actionCancelText: __('Cancel'), + actionPrimaryText: __('Enable Gitpod'), + }, }, props: { isFork: { @@ -49,6 +63,16 @@ export default { required: false, default: false, }, + userPreferencesGitpodPath: { + type: String, + required: false, + default: '', + }, + userProfileEnableGitpodPath: { + type: String, + required: false, + default: '', + }, editUrl: { type: String, required: false, @@ -74,10 +98,16 @@ export default { required: false, default: '', }, + disableForkModal: { + type: Boolean, + required: false, + default: false, + }, }, data() { return { selection: KEY_WEB_IDE, + showEnableGitpodModal: false, }; }, computed: { @@ -93,8 +123,12 @@ export default { ? { href: '#modal-confirm-fork-edit', handle: () => { - this.$emit('edit', 'simple'); - this.showModal('#modal-confirm-fork-edit'); + if (this.disableForkModal) { + this.$emit('edit', 'simple'); + return; + } + + this.showJQueryModal('#modal-confirm-fork-edit'); }, } : { href: this.editUrl }; @@ -132,8 +166,12 @@ export default { ? { href: '#modal-confirm-fork-webide', handle: () => { - this.$emit('edit', 'ide'); - this.showModal('#modal-confirm-fork-webide'); + if (this.disableForkModal) { + this.$emit('edit', 'ide'); + return; + } + + this.showJQueryModal('#modal-confirm-fork-webide'); }, } : { href: this.webIdeUrl }; @@ -154,14 +192,23 @@ export default { gitpodActionText() { return this.gitpodText || __('Gitpod'); }, + computedShowGitpodButton() { + return ( + this.showGitpodButton && this.userPreferencesGitpodPath && this.userProfileEnableGitpodPath + ); + }, gitpodAction() { - if (!this.showGitpodButton) { + if (!this.computedShowGitpodButton) { return null; } const handleOptions = this.gitpodEnabled ? { href: this.gitpodUrl } - : { href: '#modal-enable-gitpod', handle: () => this.showModal('#modal-enable-gitpod') }; + : { + handle: () => { + this.showModal('showEnableGitpodModal'); + }, + }; const secondaryText = __('Launch a ready-to-code development environment for your project.'); @@ -176,14 +223,36 @@ export default { ...handleOptions, }; }, + enableGitpodModalProps() { + return { + 'modal-id': 'enable-gitpod-modal', + size: 'sm', + title: this.$options.i18n.modal.title, + 'action-cancel': { + text: this.$options.i18n.modal.actionCancelText, + }, + 'action-primary': { + text: this.$options.i18n.modal.actionPrimaryText, + attributes: { + variant: 'confirm', + category: 'primary', + href: this.userProfileEnableGitpodPath, + 'data-method': 'put', + }, + }, + }; + }, }, methods: { select(key) { this.selection = key; }, - showModal(id) { + showJQueryModal(id) { $(id).modal('show'); }, + showModal(dataKey) { + this[dataKey] = true; + }, }, }; </script> @@ -202,5 +271,16 @@ export default { :value="selection" @input="select" /> + <gl-modal + v-if="computedShowGitpodButton && !gitpodEnabled" + v-model="showEnableGitpodModal" + v-bind="enableGitpodModalProps" + > + <gl-sprintf :message="$options.i18n.modal.content"> + <template #link="{ content }"> + <gl-link :href="userPreferencesGitpodPath">{{ content }}</gl-link> + </template> + </gl-sprintf> + </gl-modal> </div> </template> |