From 877a8fd20c1fec7190097328d9318aefefb8c02d Mon Sep 17 00:00:00 2001
From: "Cornelius A. Ludmann" <cornelius.ludmann@typefox.io>
Date: Thu, 24 Sep 2020 14:55:54 +0000
Subject: [PATCH 1/4] Add Gitpod button to MR page and always show Web IDE
 button

- Previously we would hide this button if the user
  isn't able to collaborate
- Since then, the Web IDE is able to handle issues
  with various user permissions more gracefully
- There are also other use cases besides "creating
  a commit" the user may want to do (especially in Gitpod).
- See https://gitlab.com/gitlab-org/gitlab/-/merge_requests/43352#note_452451011

Changelog: changed
---
 .../components/mr_widget_header.vue           | 38 +++++++------------
 .../stores/mr_widget_store.js                 |  7 ++++
 .../merge_request_widget_entity.rb            | 17 +++++++++
 .../projects/merge_requests/show.html.haml    |  3 ++
 4 files changed, 41 insertions(+), 24 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 5e401fc17e906e..377ed346e35a81 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
@@ -11,9 +11,9 @@ import {
   GlSprintf,
 } from '@gitlab/ui';
 import { mergeUrlParams, webIDEUrl } from '~/lib/utils/url_utility';
-import { s__ } from '~/locale';
 import clipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
+import WebIdeLink from '~/vue_shared/components/web_ide_link.vue';
 import MrWidgetHowToMergeModal from './mr_widget_how_to_merge_modal.vue';
 import MrWidgetIcon from './mr_widget_icon.vue';
 
@@ -30,6 +30,7 @@ export default {
     GlDropdownItem,
     GlLink,
     GlSprintf,
+    WebIdeLink,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -68,14 +69,7 @@ export default {
         );
       }
 
-      return null;
-    },
-    ideButtonTitle() {
-      return !this.mr.canPushToSourceBranch
-        ? s__(
-            'mrWidget|You are not allowed to edit this project directly. Please fork to make changes.',
-          )
-        : '';
+      return '';
     },
     isFork() {
       return this.mr.sourceProjectFullPath !== this.mr.targetProjectFullPath;
@@ -123,22 +117,18 @@ export default {
 
       <div class="branch-actions d-flex">
         <template v-if="mr.isOpen">
-          <span
+          <web-ide-link
             v-if="!mr.sourceBranchRemoved"
-            v-gl-tooltip
-            :title="ideButtonTitle"
-            class="gl-display-none d-md-inline-block gl-mr-3"
-            :tabindex="ideButtonTitle ? 0 : null"
-          >
-            <gl-button
-              :href="webIdePath"
-              :disabled="!mr.canPushToSourceBranch"
-              class="js-web-ide"
-              data-qa-selector="open_in_web_ide_button"
-            >
-              {{ s__('mrWidget|Open in Web IDE') }}
-            </gl-button>
-          </span>
+            :web-ide-url="webIdePath"
+            :show-web-ide-button="mr.canPushToSourceBranch"
+            :show-gitpod-button="mr.canPushToSourceBranch && mr.showGitpodButton"
+            :gitpod-url="mr.gitpodUrl"
+            :gitpod-enabled="mr.gitpodEnabled"
+            class="js-web-ide d-none d-md-inline-block gl-mr-3"
+            data-placement="bottom"
+            tabindex="0"
+            data-qa-selector="open_in_web_ide_button"
+          />
           <gl-button
             v-gl-modal-directive="'modal-merge-info'"
             :disabled="mr.sourceBranchRemoved"
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 3b99f848c65a5a..035fd51d8e31ef 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
@@ -19,6 +19,7 @@ export default class MergeRequestStore {
     this.setPaths(data);
 
     this.setData(data);
+    this.setGitpodData(data);
   }
 
   setData(data, isRebased) {
@@ -199,6 +200,12 @@ export default class MergeRequestStore {
     }
   }
 
+  setGitpodData(data) {
+    this.showGitpodButton = data.show_gitpod_button;
+    this.gitpodUrl = data.gitpod_url;
+    this.gitpodEnabled = data.gitpod_enabled;
+  }
+
   setState() {
     if (this.mergeOngoing) {
       this.state = 'merging';
diff --git a/app/serializers/merge_request_widget_entity.rb b/app/serializers/merge_request_widget_entity.rb
index c3e8b66fe12cac..50b3ead6f93266 100644
--- a/app/serializers/merge_request_widget_entity.rb
+++ b/app/serializers/merge_request_widget_entity.rb
@@ -137,6 +137,23 @@ class MergeRequestWidgetEntity < Grape::Entity
     merge_request.enabled_reports
   end
 
+  expose :show_gitpod_button do |merge_request|
+    Gitlab::CurrentSettings.gitpod_enabled
+  end
+
+  expose :gitpod_url do |merge_request|
+    next unless Gitlab::CurrentSettings.gitpod_enabled
+
+    gitpod_url = Gitlab::CurrentSettings.gitpod_url
+    context_url = project_merge_request_url(merge_request.project, merge_request)
+
+    "#{gitpod_url}##{context_url}"
+  end
+
+  expose :gitpod_enabled do |merge_request|
+    current_user.gitpod_enabled if current_user
+  end
+
   private
 
   delegate :current_user, to: :request
diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml
index c4ee522bfa738e..d489f0016c58b2 100644
--- a/app/views/projects/merge_requests/show.html.haml
+++ b/app/views/projects/merge_requests/show.html.haml
@@ -83,6 +83,9 @@
         - params = params.merge(diff_head: true)
       = render "projects/merge_requests/tabs/pane", name: "diffs", id: "js-diffs-app", class: "diffs", data: diffs_tab_pane_data(@project, @merge_request, params)
 
+    - unless current_user&.gitpod_enabled
+      = render 'shared/gitpod/enable_gitpod_modal'
+
     .mr-loading-status
       .loading.hide
         .gl-spinner.gl-spinner-md
-- 
GitLab


From 4d4f2a8a4804eb58a7cf74e2b82fb5dc5d2a8eae Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Tue, 10 Aug 2021 14:01:51 -0500
Subject: [PATCH 2/4] fixup! Add Gitpod button to MR page and always show Web
 IDE button

---
 .../components/mr_widget_header.vue           |  36 ++++---
 .../vue_shared/components/web_ide_link.vue    |  40 +++++--
 .../projects/merge_requests/show.html.haml    |   6 +-
 locale/gitlab.pot                             |   6 +-
 .../components/mr_widget_header_spec.js       | 101 ++++++++++--------
 spec/frontend/vue_mr_widget/mock_data.js      |   3 +
 .../stores/mr_widget_store_spec.js            |   8 ++
 .../components/web_ide_link_spec.js           |   8 ++
 .../merge_request_widget_entity_spec.rb       |  41 +++++++
 .../merge_requests/show.html.haml_spec.rb     |  30 ++++++
 10 files changed, 201 insertions(+), 78 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 377ed346e35a81..981f703f79de41 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
@@ -11,6 +11,7 @@ import {
   GlSprintf,
 } from '@gitlab/ui';
 import { mergeUrlParams, webIDEUrl } from '~/lib/utils/url_utility';
+import { s__ } from '~/locale';
 import clipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
 import WebIdeLink from '~/vue_shared/components/web_ide_link.vue';
@@ -57,24 +58,24 @@ export default {
       });
     },
     webIdePath() {
-      if (this.mr.canPushToSourceBranch) {
-        return mergeUrlParams(
-          {
-            target_project:
-              this.mr.sourceProjectFullPath !== this.mr.targetProjectFullPath
-                ? this.mr.targetProjectFullPath
-                : '',
-          },
-          webIDEUrl(`/${this.mr.sourceProjectFullPath}/merge_requests/${this.mr.iid}`),
-        );
-      }
-
-      return '';
+      return mergeUrlParams(
+        {
+          target_project:
+            this.mr.sourceProjectFullPath !== this.mr.targetProjectFullPath
+              ? this.mr.targetProjectFullPath
+              : '',
+        },
+        webIDEUrl(`/${this.mr.sourceProjectFullPath}/merge_requests/${this.mr.iid}`),
+      );
     },
     isFork() {
       return this.mr.sourceProjectFullPath !== this.mr.targetProjectFullPath;
     },
   },
+  i18n: {
+    webIdeText: s__('mrWidget|Open in Web IDE'),
+    gitpodText: s__('mrWidget|Open in Gitpod'),
+  },
 };
 </script>
 <template>
@@ -119,12 +120,15 @@ export default {
         <template v-if="mr.isOpen">
           <web-ide-link
             v-if="!mr.sourceBranchRemoved"
+            :show-edit-button="false"
+            :show-web-ide-button="true"
             :web-ide-url="webIdePath"
-            :show-web-ide-button="mr.canPushToSourceBranch"
-            :show-gitpod-button="mr.canPushToSourceBranch && mr.showGitpodButton"
+            :web-ide-text="$options.i18n.webIdeText"
+            :show-gitpod-button="mr.showGitpodButton"
             :gitpod-url="mr.gitpodUrl"
             :gitpod-enabled="mr.gitpodEnabled"
-            class="js-web-ide d-none d-md-inline-block gl-mr-3"
+            :gitpod-text="$options.i18n.gitpodText"
+            class="d-none d-md-inline-block gl-mr-3"
             data-placement="bottom"
             tabindex="0"
             data-qa-selector="open_in_web_ide_button"
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 5ba7c107c127d1..396867e47ec4db 100644
--- a/app/assets/javascripts/vue_shared/components/web_ide_link.vue
+++ b/app/assets/javascripts/vue_shared/components/web_ide_link.vue
@@ -59,11 +59,21 @@ export default {
       required: false,
       default: '',
     },
+    webIdeText: {
+      type: String,
+      required: false,
+      default: '',
+    },
     gitpodUrl: {
       type: String,
       required: false,
       default: '',
     },
+    gitpodText: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -99,6 +109,17 @@ export default {
         ...handleOptions,
       };
     },
+    webIdeActionText() {
+      if (this.webIdeText) {
+        return this.webIdeText;
+      } else if (this.isBlob) {
+        return __('Edit in Web IDE');
+      } else if (this.isFork) {
+        return __('Edit fork in Web IDE');
+      }
+
+      return __('Web IDE');
+    },
     webIdeAction() {
       if (!this.showWebIdeButton) {
         return null;
@@ -111,17 +132,9 @@ export default {
           }
         : { href: this.webIdeUrl };
 
-      let text = __('Web IDE');
-
-      if (this.isBlob) {
-        text = __('Edit in Web IDE');
-      } else if (this.isFork) {
-        text = __('Edit fork in Web IDE');
-      }
-
       return {
         key: KEY_WEB_IDE,
-        text,
+        text: this.webIdeActionText,
         secondaryText: __('Quickly and easily edit multiple files in your project.'),
         tooltip: '',
         attrs: {
@@ -132,6 +145,13 @@ export default {
         ...handleOptions,
       };
     },
+    gitpodActionText() {
+      if (this.gitpodText) {
+        return this.gitpodText;
+      }
+
+      return __('Gitpod');
+    },
     gitpodAction() {
       if (!this.showGitpodButton) {
         return null;
@@ -145,7 +165,7 @@ export default {
 
       return {
         key: KEY_GITPOD,
-        text: __('Gitpod'),
+        text: this.gitpodActionText,
         secondaryText,
         tooltip: secondaryText,
         attrs: {
diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml
index d489f0016c58b2..6d1ba9e693b431 100644
--- a/app/views/projects/merge_requests/show.html.haml
+++ b/app/views/projects/merge_requests/show.html.haml
@@ -83,9 +83,6 @@
         - params = params.merge(diff_head: true)
       = render "projects/merge_requests/tabs/pane", name: "diffs", id: "js-diffs-app", class: "diffs", data: diffs_tab_pane_data(@project, @merge_request, params)
 
-    - unless current_user&.gitpod_enabled
-      = render 'shared/gitpod/enable_gitpod_modal'
-
     .mr-loading-status
       .loading.hide
         .gl-spinner.gl-spinner-md
@@ -100,4 +97,5 @@
 #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'
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index eedf84beaf1bd5..99fd1a42b0cb67 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -39678,6 +39678,9 @@ msgstr ""
 msgid "mrWidget|More information"
 msgstr ""
 
+msgid "mrWidget|Open in Gitpod"
+msgstr ""
+
 msgid "mrWidget|Open in Web IDE"
 msgstr ""
 
@@ -39783,9 +39786,6 @@ msgstr ""
 msgid "mrWidget|Use %{linkStart}CI pipelines to test your code%{linkEnd} by simply adding a GitLab CI configuration file to your project. It only takes a minute to make your code more secure and robust."
 msgstr ""
 
-msgid "mrWidget|You are not allowed to edit this project directly. Please fork to make changes."
-msgstr ""
-
 msgid "mrWidget|You can merge after removing denied licenses"
 msgstr ""
 
diff --git a/spec/frontend/vue_mr_widget/components/mr_widget_header_spec.js b/spec/frontend/vue_mr_widget/components/mr_widget_header_spec.js
index f44f0b982079a3..a09269e869ce7d 100644
--- a/spec/frontend/vue_mr_widget/components/mr_widget_header_spec.js
+++ b/spec/frontend/vue_mr_widget/components/mr_widget_header_spec.js
@@ -1,6 +1,7 @@
 import { shallowMount, mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import Header from '~/vue_merge_request_widget/components/mr_widget_header.vue';
+import WebIdeLink from '~/vue_shared/components/web_ide_link.vue';
 
 describe('MRWidgetHeader', () => {
   let wrapper;
@@ -35,6 +36,8 @@ describe('MRWidgetHeader', () => {
     statusPath: 'abc',
   };
 
+  const findWebIdeButton = () => wrapper.findComponent(WebIdeLink);
+
   describe('computed', () => {
     describe('shouldShowCommitsBehindText', () => {
       it('return true when there are divergedCommitsCount', () => {
@@ -147,73 +150,81 @@ describe('MRWidgetHeader', () => {
         statusPath: 'abc',
         sourceProjectFullPath: 'root/gitlab-ce',
         targetProjectFullPath: 'gitlab-org/gitlab-ce',
+        gitpodEnabled: true,
+        showGitpodButton: true,
+        gitpodUrl: 'http://gitpod.localhost',
       };
 
-      beforeEach(() => {
+      it('renders checkout branch button with modal trigger', () => {
         createComponent({
           mr: { ...mrDefaultOptions },
         });
-      });
 
-      it('renders checkout branch button with modal trigger', () => {
         const button = wrapper.find('.js-check-out-branch');
 
         expect(button.text().trim()).toBe('Check out branch');
       });
 
-      it('renders web ide button', async () => {
-        const button = wrapper.find('.js-web-ide');
-
-        await nextTick();
-
-        expect(button.text().trim()).toBe('Open in Web IDE');
-        expect(button.classes('disabled')).toBe(false);
-        expect(button.attributes('href')).toBe(
-          '/-/ide/project/root/gitlab-ce/merge_requests/1?target_project=gitlab-org%2Fgitlab-ce',
-        );
-      });
-
-      it('renders web ide button in disabled state with no href', async () => {
-        const mr = { ...mrDefaultOptions, canPushToSourceBranch: false };
-        createComponent({ mr });
-
-        await nextTick();
-
-        const link = wrapper.find('.js-web-ide');
-
-        expect(link.attributes('disabled')).toBe('true');
-        expect(link.attributes('href')).toBeUndefined();
-      });
-
-      it('renders web ide button with blank query string if target & source project branch', async () => {
-        createComponent({ mr: { ...mrDefaultOptions, targetProjectFullPath: 'root/gitlab-ce' } });
+      it.each([
+        [
+          'renders web ide button',
+          {
+            mrProps: {},
+            relativeUrl: '',
+            webIdeUrl:
+              '/-/ide/project/root/gitlab-ce/merge_requests/1?target_project=gitlab-org%2Fgitlab-ce',
+          },
+        ],
+        [
+          'renders web ide button with blank target_project, when mr has same target project',
+          {
+            mrProps: { targetProjectFullPath: 'root/gitlab-ce' },
+            relativeUrl: '',
+            webIdeUrl: '/-/ide/project/root/gitlab-ce/merge_requests/1?target_project=',
+          },
+        ],
+        [
+          'renders web ide button with relative url',
+          {
+            mrProps: { iid: 2 },
+            relativeUrl: '/gitlab',
+            webIdeUrl:
+              '/gitlab/-/ide/project/root/gitlab-ce/merge_requests/2?target_project=gitlab-org%2Fgitlab-ce',
+          },
+        ],
+      ])('%s', async (_, { mrProps, relativeUrl, webIdeUrl }) => {
+        gon.relative_url_root = relativeUrl;
+        createComponent({
+          mr: { ...mrDefaultOptions, ...mrProps },
+        });
 
         await nextTick();
 
-        const button = wrapper.find('.js-web-ide');
-
-        expect(button.text().trim()).toBe('Open in Web IDE');
-        expect(button.attributes('href')).toBe(
-          '/-/ide/project/root/gitlab-ce/merge_requests/1?target_project=',
-        );
+        expect(findWebIdeButton().props()).toMatchObject({
+          showEditButton: false,
+          showWebIdeButton: true,
+          webIdeText: 'Open in Web IDE',
+          gitpodText: 'Open in Gitpod',
+          gitpodEnabled: true,
+          showGitpodButton: true,
+          gitpodUrl: 'http://gitpod.localhost',
+          webIdeUrl,
+        });
       });
 
-      it('renders web ide button with relative URL', async () => {
-        gon.relative_url_root = '/gitlab';
-
-        createComponent({ mr: { ...mrDefaultOptions, iid: 2 } });
+      it('does not render web ide button if source branch is removed', async () => {
+        createComponent({ mr: { ...mrDefaultOptions, sourceBranchRemoved: true } });
 
         await nextTick();
 
-        const button = wrapper.find('.js-web-ide');
-
-        expect(button.text().trim()).toBe('Open in Web IDE');
-        expect(button.attributes('href')).toBe(
-          '/gitlab/-/ide/project/root/gitlab-ce/merge_requests/2?target_project=gitlab-org%2Fgitlab-ce',
-        );
+        expect(findWebIdeButton().exists()).toBe(false);
       });
 
       it('renders download dropdown with links', () => {
+        createComponent({
+          mr: { ...mrDefaultOptions },
+        });
+
         expectDownloadDropdownItems();
       });
     });
diff --git a/spec/frontend/vue_mr_widget/mock_data.js b/spec/frontend/vue_mr_widget/mock_data.js
index 15dcbb99623d1f..f356f6fb5bf042 100644
--- a/spec/frontend/vue_mr_widget/mock_data.js
+++ b/spec/frontend/vue_mr_widget/mock_data.js
@@ -281,6 +281,9 @@ export default {
   security_reports_docs_path: 'security-reports-docs-path',
   sast_comparison_path: '/sast_comparison_path',
   secret_scanning_comparison_path: '/secret_scanning_comparison_path',
+  gitpod_enabled: true,
+  show_gitpod_button: true,
+  gitpod_url: 'http://gitpod.localhost',
 };
 
 export const mockStore = {
diff --git a/spec/frontend/vue_mr_widget/stores/mr_widget_store_spec.js b/spec/frontend/vue_mr_widget/stores/mr_widget_store_spec.js
index cfc846075ea3f5..bf0179aa425ccc 100644
--- a/spec/frontend/vue_mr_widget/stores/mr_widget_store_spec.js
+++ b/spec/frontend/vue_mr_widget/stores/mr_widget_store_spec.js
@@ -10,6 +10,14 @@ describe('MergeRequestStore', () => {
     store = new MergeRequestStore(mockData);
   });
 
+  it('should initialize gitpod attributes', () => {
+    expect(store).toMatchObject({
+      gitpodEnabled: mockData.gitpod_enabled,
+      showGitpodButton: mockData.show_gitpod_button,
+      gitpodUrl: mockData.gitpod_url,
+    });
+  });
+
   describe('setData', () => {
     it('should set isSHAMismatch when the diff SHA changes', () => {
       store.setData({ ...mockData, diff_head_sha: 'a-different-string' });
diff --git a/spec/frontend/vue_shared/components/web_ide_link_spec.js b/spec/frontend/vue_shared/components/web_ide_link_spec.js
index 0fd4d0dab87113..5fe4eeb60614c4 100644
--- a/spec/frontend/vue_shared/components/web_ide_link_spec.js
+++ b/spec/frontend/vue_shared/components/web_ide_link_spec.js
@@ -84,6 +84,10 @@ describe('Web IDE link component', () => {
       props: {},
       expectedActions: [ACTION_WEB_IDE, ACTION_EDIT],
     },
+    {
+      props: { webIdeText: 'Test Web IDE' },
+      expectedActions: [{ ...ACTION_WEB_IDE_EDIT_FORK, text: 'Test Web IDE' }, ACTION_EDIT],
+    },
     {
       props: { isFork: true },
       expectedActions: [ACTION_WEB_IDE_EDIT_FORK, ACTION_EDIT],
@@ -104,6 +108,10 @@ describe('Web IDE link component', () => {
       props: { showGitpodButton: true, gitpodEnabled: false },
       expectedActions: [ACTION_WEB_IDE, ACTION_EDIT, ACTION_GITPOD_ENABLE],
     },
+    {
+      props: { showEditButton: false, showGitpodButton: true, gitpodText: 'Test Gitpod' },
+      expectedActions: [ACTION_WEB_IDE, { ...ACTION_GITPOD_ENABLE, text: 'Test Gitpod' }],
+    },
     {
       props: { showEditButton: false },
       expectedActions: [ACTION_WEB_IDE],
diff --git a/spec/serializers/merge_request_widget_entity_spec.rb b/spec/serializers/merge_request_widget_entity_spec.rb
index 926b33e8e1f723..fb1d157b36011a 100644
--- a/spec/serializers/merge_request_widget_entity_spec.rb
+++ b/spec/serializers/merge_request_widget_entity_spec.rb
@@ -354,4 +354,45 @@
       end
     end
   end
+
+  describe 'when gitpod is disabled' do
+    before do
+      allow(Gitlab::CurrentSettings).to receive(:gitpod_enabled).and_return(false)
+    end
+
+    it 'exposes gitpod attributes' do
+      expect(subject).to include(
+        show_gitpod_button: false,
+        gitpod_url: nil,
+        gitpod_enabled: false
+      )
+    end
+  end
+
+  describe 'when gitpod is enabled' do
+    before do
+      allow(Gitlab::CurrentSettings).to receive(:gitpod_enabled).and_return(true)
+      allow(Gitlab::CurrentSettings).to receive(:gitpod_url).and_return("https://gitpod.example.com")
+    end
+
+    it 'exposes gitpod attributes' do
+      mr_url = Gitlab::Routing.url_helpers.project_merge_request_url(resource.project, resource)
+
+      expect(subject).to include(
+        show_gitpod_button: true,
+        gitpod_url: "https://gitpod.example.com##{mr_url}",
+        gitpod_enabled: false
+      )
+    end
+
+    describe 'when gitpod is enabled for user' do
+      before do
+        allow(user).to receive(:gitpod_enabled).and_return(true)
+      end
+
+      it 'exposes gitpod_enabled as true' do
+        expect(subject[:gitpod_enabled]).to be(true)
+      end
+    end
+  end
 end
diff --git a/spec/views/projects/merge_requests/show.html.haml_spec.rb b/spec/views/projects/merge_requests/show.html.haml_spec.rb
index 40d11342ec49cd..6b6bc1f0b144f0 100644
--- a/spec/views/projects/merge_requests/show.html.haml_spec.rb
+++ b/spec/views/projects/merge_requests/show.html.haml_spec.rb
@@ -3,6 +3,8 @@
 require 'spec_helper'
 
 RSpec.describe 'projects/merge_requests/show.html.haml', :aggregate_failures do
+  using RSpec::Parameterized::TableSyntax
+
   include_context 'merge request show action'
 
   before do
@@ -43,4 +45,32 @@
       end
     end
   end
+
+  describe 'gitpod modal' do
+    let(:gitpod_modal_selector) { '#modal-enable-gitpod' }
+    let(:user) { create(:user) }
+    let(:user_gitpod_enabled) { create(:user).tap { |x| x.update!(gitpod_enabled: true) } }
+
+    where(:site_enabled, :current_user, :should_show) do
+      false | ref(:user) | false
+      true  | ref(:user) | true
+      true  | nil | true
+      true  | ref(:user_gitpod_enabled) | false
+    end
+
+    with_them do
+      it 'handles rendering gitpod user enable modal' do
+        allow(Gitlab::CurrentSettings).to receive(:gitpod_enabled).and_return(site_enabled)
+        allow(view).to receive(:current_user).and_return(current_user)
+
+        render
+
+        if should_show
+          expect(rendered).to have_css(gitpod_modal_selector)
+        else
+          expect(rendered).to have_no_css(gitpod_modal_selector)
+        end
+      end
+    end
+  end
 end
-- 
GitLab


From 5781e712845169b61a4671ac8ea3270386c7150f Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Wed, 11 Aug 2021 12:33:45 -0500
Subject: [PATCH 3/4] fixup! Add Gitpod button to MR page and always show Web
 IDE button

---
 .../components/mr_widget_header.vue                         | 2 +-
 .../javascripts/vue_shared/components/web_ide_link.vue      | 6 +-----
 2 files changed, 2 insertions(+), 6 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 981f703f79de41..966262944ad2ba 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
@@ -128,7 +128,7 @@ export default {
             :gitpod-url="mr.gitpodUrl"
             :gitpod-enabled="mr.gitpodEnabled"
             :gitpod-text="$options.i18n.gitpodText"
-            class="d-none d-md-inline-block gl-mr-3"
+            class="gl-display-none gl-md-display-inline-block gl-mr-3"
             data-placement="bottom"
             tabindex="0"
             data-qa-selector="open_in_web_ide_button"
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 396867e47ec4db..df0981aea7a565 100644
--- a/app/assets/javascripts/vue_shared/components/web_ide_link.vue
+++ b/app/assets/javascripts/vue_shared/components/web_ide_link.vue
@@ -146,11 +146,7 @@ export default {
       };
     },
     gitpodActionText() {
-      if (this.gitpodText) {
-        return this.gitpodText;
-      }
-
-      return __('Gitpod');
+      return this.gitpodText || __('Gitpod');
     },
     gitpodAction() {
       if (!this.showGitpodButton) {
-- 
GitLab


From 82643bb9fb96f264f4e281eb1665aa4e79fd04d4 Mon Sep 17 00:00:00 2001
From: Kerri Miller <kerrizor@kerrizor.com>
Date: Fri, 13 Aug 2021 20:08:22 +0000
Subject: [PATCH 4/4] fixup! Add Gitpod button to MR page and always show Web
 IDE button

---
 app/serializers/merge_request_widget_entity.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/serializers/merge_request_widget_entity.rb b/app/serializers/merge_request_widget_entity.rb
index 50b3ead6f93266..232e14fad1c8f8 100644
--- a/app/serializers/merge_request_widget_entity.rb
+++ b/app/serializers/merge_request_widget_entity.rb
@@ -151,7 +151,7 @@ class MergeRequestWidgetEntity < Grape::Entity
   end
 
   expose :gitpod_enabled do |merge_request|
-    current_user.gitpod_enabled if current_user
+    current_user&.gitpod_enabled || false
   end
 
   private
-- 
GitLab