Disable Web IDE button if user is not allowed to push the source branch._acet-disable-ide-button

3 files changed, 67 insertions, 32 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 a4c2289c590..3fae4c1ac0d 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
@@ -48,6 +48,11 @@ export default {
           this.mr.targetProjectFullPath : '',
       }, webIDEUrl(`/${this.mr.sourceProjectFullPath}/merge_requests/${this.mr.iid}`));
     },
+    ideButtonTitle() {
+      return !this.mr.canPushToSourceBranch
+        ? 'You are not allowed to edit this project directly. Please fork to make changes.'
+        : '';
+    },
   },
   methods: {
     isBranchTitleLong(branchTitle) {
@@ -112,13 +117,22 @@ export default {
         v-if="mr.isOpen"
         class="branch-actions"
       >
-        <a
-          v-if="!mr.sourceBranchRemoved"
-          :href="webIdePath"
-          class="btn btn-default inline js-web-ide d-none d-md-inline-block"
+        <span
+          v-tooltip
+          :title="ideButtonTitle"
+          data-placement="bottom"
+          tabindex="0"
         >
-          {{ s__("mrWidget|Open in Web IDE") }}
-        </a>
+          <a
+            v-if="!mr.sourceBranchRemoved"
+            :href="mr.canPushToSourceBranch ? webIdePath : null"
+            :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"
diff --git a/changelogs/unreleased/_acet-disable-ide-button.yml b/changelogs/unreleased/_acet-disable-ide-button.yml
new file mode 100644
index 00000000000..2fff3847052
--- /dev/null
+++ b/changelogs/unreleased/_acet-disable-ide-button.yml
@@ -0,0 +1,5 @@
+---
+title: Disable Web IDE button if user is not allowed to push the source branch.
+merge_request: 21288
+author:
+type: added
diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js
index 8ac2f26979b..19e8c56bc74 100644
--- a/spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/mr_widget_header_spec.js
@@ -128,6 +128,7 @@ describe('MRWidgetHeader', () => {
             targetBranchTreePath: 'foo/bar/tree/path',
             targetBranch: 'master',
             isOpen: true,
+            canPushToSourceBranch: true,
             emailPatchesPath: '/mr/email-patches',
             plainDiffPath: '/mr/plainDiffPath',
             statusPath: 'abc',
@@ -145,43 +146,58 @@ describe('MRWidgetHeader', () => {
         expect(button.getAttribute('data-toggle')).toEqual('modal');
       });
 
-      it('renders web ide button', () => {
-        const button = vm.$el.querySelector('.js-web-ide');
-
-        expect(button.textContent.trim()).toEqual('Open in Web IDE');
-        expect(button.getAttribute('href')).toEqual(
-          '/-/ide/project/root/gitlab-ce/merge_requests/1?target_project=gitlab-org%2Fgitlab-ce',
-        );
-      });
-
-      it('renders web ide button with blank query string if target & source project branch', done => {
-        vm.mr.targetProjectFullPath = 'root/gitlab-ce';
-
-        vm.$nextTick(() => {
+      describe('web ide button', () => {
+        it('renders in enabled state', () => {
           const button = vm.$el.querySelector('.js-web-ide');
 
           expect(button.textContent.trim()).toEqual('Open in Web IDE');
           expect(button.getAttribute('href')).toEqual(
-            '/-/ide/project/root/gitlab-ce/merge_requests/1?target_project=',
+            '/-/ide/project/root/gitlab-ce/merge_requests/1?target_project=gitlab-org%2Fgitlab-ce',
           );
+          expect(button).not.toHaveClass('disabled');
+        });
+
+        it('renders in disabled state with no href value', (done) => {
+          vm.mr.canPushToSourceBranch = false;
 
-          done();
+          vm.$nextTick(() => {
+            const link = vm.$el.querySelector('.js-web-ide');
+            expect(link).toHaveClass('disabled');
+            expect(link).not.toHaveAttr('href');
+
+            done();
+          });
         });
-      });
 
-      it('renders web ide button with relative URL', done => {
-        gon.relative_url_root = '/gitlab';
-        vm.mr.iid = 2;
+        it('renders with blank query string if target & source project branch', done => {
+          vm.mr.targetProjectFullPath = 'root/gitlab-ce';
 
-        vm.$nextTick(() => {
-          const button = vm.$el.querySelector('.js-web-ide');
+          vm.$nextTick(() => {
+            const button = vm.$el.querySelector('.js-web-ide');
 
-          expect(button.textContent.trim()).toEqual('Open in Web IDE');
-          expect(button.getAttribute('href')).toEqual(
-            '/gitlab/-/ide/project/root/gitlab-ce/merge_requests/2?target_project=gitlab-org%2Fgitlab-ce',
-          );
+            expect(button.textContent.trim()).toEqual('Open in Web IDE');
+            expect(button.getAttribute('href')).toEqual(
+              '/-/ide/project/root/gitlab-ce/merge_requests/1?target_project=',
+            );
+
+            done();
+          });
+        });
+
+        it('renders with relative URL', done => {
+          gon.relative_url_root = '/gitlab';
+          vm.mr.iid = 2;
+
+          vm.$nextTick(() => {
+            const button = vm.$el.querySelector('.js-web-ide');
+
+            expect(button.textContent.trim()).toEqual('Open in Web IDE');
+            expect(button.getAttribute('href')).toEqual(
+              '/gitlab/-/ide/project/root/gitlab-ce/merge_requests/2?target_project=gitlab-org%2Fgitlab-ce',
+            );
 
-          done();
+            done();
+          });
         });
       });