diff options
Diffstat (limited to 'app')
8 files changed, 83 insertions, 23 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue index 235a200b747..8cdaa3316ee 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue @@ -119,6 +119,8 @@ export default { :show-gitpod-button="mr.showGitpodButton" :gitpod-url="mr.gitpodUrl" :gitpod-enabled="mr.gitpodEnabled" + :user-preferences-gitpod-path="mr.userPreferencesGitpodPath" + :user-profile-enable-gitpod-path="mr.userProfileEnableGitpodPath" :gitpod-text="$options.i18n.gitpodText" class="gl-display-none gl-md-display-inline-block gl-mr-3" data-placement="bottom" diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js index d95982eb74c..5378dabf638 100644 --- a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js +++ b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js @@ -222,6 +222,8 @@ export default class MergeRequestStore { this.showGitpodButton = data.show_gitpod_button; this.gitpodUrl = data.gitpod_url; this.gitpodEnabled = data.gitpod_enabled; + this.userPreferencesGitpodPath = data.user_preferences_gitpod_path; + this.userProfileEnableGitpodPath = data.user_profile_enable_gitpod_path; } setState() { 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..d6bde261bd7 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, @@ -78,6 +102,7 @@ export default { data() { return { selection: KEY_WEB_IDE, + showEnableGitpodModal: false, }; }, computed: { @@ -94,7 +119,7 @@ export default { href: '#modal-confirm-fork-edit', handle: () => { this.$emit('edit', 'simple'); - this.showModal('#modal-confirm-fork-edit'); + this.showJQueryModal('#modal-confirm-fork-edit'); }, } : { href: this.editUrl }; @@ -133,7 +158,7 @@ export default { href: '#modal-confirm-fork-webide', handle: () => { this.$emit('edit', 'ide'); - this.showModal('#modal-confirm-fork-webide'); + this.showJQueryModal('#modal-confirm-fork-webide'); }, } : { href: this.webIdeUrl }; @@ -154,14 +179,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 +210,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 +258,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> diff --git a/app/helpers/tree_helper.rb b/app/helpers/tree_helper.rb index d089b540282..4437f309a9c 100644 --- a/app/helpers/tree_helper.rb +++ b/app/helpers/tree_helper.rb @@ -191,7 +191,10 @@ module TreeHelper web_ide_url: web_ide_url, edit_url: edit_url(options), - gitpod_url: gitpod_url + + gitpod_url: gitpod_url, + user_preferences_gitpod_path: profile_preferences_path(anchor: 'user_gitpod_enabled'), + user_profile_enable_gitpod_path: profile_path(user: { gitpod_enabled: true }) } end diff --git a/app/views/projects/merge_requests/_widget.html.haml b/app/views/projects/merge_requests/_widget.html.haml index 0c8af873095..a9cf86659b3 100644 --- a/app/views/projects/merge_requests/_widget.html.haml +++ b/app/views/projects/merge_requests/_widget.html.haml @@ -20,5 +20,7 @@ window.gl.mrWidgetData.codequality_help_path = '#{help_page_path("user/project/merge_requests/code_quality", anchor: "code-quality-reports")}'; window.gl.mrWidgetData.false_positive_doc_url = '#{help_page_path('user/application_security/vulnerabilities/index')}'; window.gl.mrWidgetData.can_view_false_positive = '#{@merge_request.project.licensed_feature_available?(:sast_fp_reduction).to_s}'; + window.gl.mrWidgetData.user_preferences_gitpod_path = '#{profile_preferences_path(anchor: 'user_gitpod_enabled')}'; + window.gl.mrWidgetData.user_profile_enable_gitpod_path = '#{profile_path(user: { gitpod_enabled: true })}'; #js-vue-mr-widget.mr-widget diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml index eb1c9712c52..a0e78b7570a 100644 --- a/app/views/projects/merge_requests/show.html.haml +++ b/app/views/projects/merge_requests/show.html.haml @@ -97,6 +97,4 @@ #js-review-bar = render 'projects/invite_members_modal', project: @project -- if Gitlab::CurrentSettings.gitpod_enabled && !current_user&.gitpod_enabled - = render 'shared/gitpod/enable_gitpod_modal' = render 'shared/web_ide_path' diff --git a/app/views/shared/_web_ide_button.html.haml b/app/views/shared/_web_ide_button.html.haml index f9c6afcbc32..82af52cdd59 100644 --- a/app/views/shared/_web_ide_button.html.haml +++ b/app/views/shared/_web_ide_button.html.haml @@ -6,5 +6,3 @@ = render 'shared/confirm_fork_modal', fork_path: fork_and_edit_path(@project, @ref, @path), type: 'edit' - if show_web_ide_button? = render 'shared/confirm_fork_modal', fork_path: ide_fork_and_edit_path(@project, @ref, @path), type: 'webide' -- if show_gitpod_button? - = render 'shared/gitpod/enable_gitpod_modal' diff --git a/app/views/shared/gitpod/_enable_gitpod_modal.html.haml b/app/views/shared/gitpod/_enable_gitpod_modal.html.haml deleted file mode 100644 index 6a8ff98a09e..00000000000 --- a/app/views/shared/gitpod/_enable_gitpod_modal.html.haml +++ /dev/null @@ -1,12 +0,0 @@ -#modal-enable-gitpod.modal.qa-enable-gitpod-modal - .modal-dialog - .modal-content - .modal-header - %h3.page-title= _('Enable Gitpod?') - %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') } - %span{ "aria-hidden": "true" } × - .modal-body.p-3 - %p= (_("To use Gitpod you must first enable the feature in the integrations section of your %{user_prefs}.") % { user_prefs: link_to(_('user preferences'), profile_preferences_path(anchor: 'gitpod')) }).html_safe - .modal-footer - = link_to _('Cancel'), '#', class: "gl-button btn btn-default btn-cancel", "data-dismiss" => "modal" - = link_to _('Enable Gitpod'), profile_path(user: { gitpod_enabled: true}), class: 'gl-button btn btn-confirm', method: :put |