Disable Web IDE button if user is not allowed to push the source branch.

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue

@@ -4,6 +4,7 @@ import { n__, s__, sprintf } from '~/locale';
 import { mergeUrlParams, webIDEUrl } from '~/lib/utils/url_utility';
 import Icon from '~/vue_shared/components/icon.vue';
 import clipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
 
 export default {
@@ -13,6 +14,9 @@ export default {
     clipboardButton,
     TooltipOnTruncate,
   },
+  directives: {
+    tooltip,
+  },
   props: {
     mr: {
       type: Object,
@@ -40,10 +44,19 @@ 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 null;
+    },
+    ideButtonTitle() {
+      return !this.mr.canPushToSourceBranch
+        ? s__('mrWidget|You are not allowed to edit this project directly. Please fork to make changes.')
+        : '';
     },
   },
 };
@@ -92,14 +105,23 @@ export default {
       <div
         v-if="mr.isOpen"
         class="branch-actions"
+      >
+        <span
+          v-tooltip
+          :title="ideButtonTitle"
+          data-placement="bottom"
+          tabindex="0"
         >
           <a
             v-if="!mr.sourceBranchRemoved"
             :href="webIdePath"
+            :class="{ disabled: !mr.canPushToSourceBranch }"
             class="btn btn-default inline js-web-ide d-none d-md-inline-block"
+            role="button"
           >
             {{ s__("mrWidget|Open in Web IDE") }}
           </a>
+        </span>
         <button
           :disabled="mr.sourceBranchRemoved"
           data-target="#modal_merge_info"

changelogs/unreleased/_acet-disable-ide-button.yml

+---
+title: Disable Web IDE button if user is not allowed to push the source branch.
+merge_request: 21288
+author:
+type: added

locale/gitlab.pot

@@ -6796,6 +6796,9 @@ msgstr ""
 msgid "mrWidget|This project is archived, write access has been disabled"
 msgstr ""
 
+msgid "mrWidget|You are not allowed to edit this project directly. Please fork to make changes."
+msgstr ""
+
 msgid "mrWidget|You can merge this merge request manually using the"
 msgstr ""
 

spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js

@@ -114,13 +114,7 @@ describe('MRWidgetHeader', () => {
     });
 
     describe('with an open merge request', () => {
-      afterEach(() => {
-        vm.$destroy();
-      });
-
-      beforeEach(() => {
-        vm = mountComponent(Component, {
-          mr: {
+      const mrDefaultOptions = {
         iid: 1,
         divergedCommitsCount: 12,
         sourceBranch: 'mr-widget-refactor',
@@ -130,12 +124,21 @@ describe('MRWidgetHeader', () => {
         targetBranchTreePath: 'foo/bar/tree/path',
         targetBranch: 'master',
         isOpen: true,
+        canPushToSourceBranch: true,
         emailPatchesPath: '/mr/email-patches',
         plainDiffPath: '/mr/plainDiffPath',
         statusPath: 'abc',
         sourceProjectFullPath: 'root/gitlab-ce',
         targetProjectFullPath: 'gitlab-org/gitlab-ce',
-          },
+      };
+
+      afterEach(() => {
+        vm.$destroy();
+      });
+
+      beforeEach(() => {
+        vm = mountComponent(Component, {
+          mr: Object.assign({}, mrDefaultOptions),
         });
       });
 
@@ -151,11 +154,21 @@ describe('MRWidgetHeader', () => {
         const button = vm.$el.querySelector('.js-web-ide');
 
         expect(button.textContent.trim()).toEqual('Open in Web IDE');
+        expect(button.classList.contains('disabled')).toBe(false);
         expect(button.getAttribute('href')).toEqual(
           '/-/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', () => {
+        const mr = Object.assign({}, mrDefaultOptions, { canPushToSourceBranch: false });
+        vm = mountComponent(Component, { mr });
+
+        const link = vm.$el.querySelector('.js-web-ide');
+        expect(link.classList.contains('disabled')).toBe(true);
+        expect(link.getAttribute('href')).toBeNull();
+      });
+
       it('renders web ide button with blank query string if target & source project branch', done => {
         vm.mr.targetProjectFullPath = 'root/gitlab-ce';