Merge branch '24716-fix-ctrl-click-links' into 'master'

Fix Ctrl+Click support for Todos and Merge Request page tabs

Closes #24716

See merge request !8898

3 files changed, 38 insertions, 4 deletions

diff --git a/app/assets/javascripts/lib/utils/common_utils.js.es6 b/app/assets/javascripts/lib/utils/common_utils.js.es6
index 1f735e13391..5becf688652 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js.es6
+++ b/app/assets/javascripts/lib/utils/common_utils.js.es6
@@ -137,6 +137,14 @@
       return e.metaKey || e.ctrlKey || e.altKey || e.shiftKey;
     };
 
+    gl.utils.isMetaClick = function(e) {
+      // Identify following special clicks
+      // 1) Cmd + Click on Mac (e.metaKey)
+      // 2) Ctrl + Click on PC (e.ctrlKey)
+      // 3) Middle-click or Mouse Wheel Click (e.which is 2)
+      return e.metaKey || e.ctrlKey || e.which === 2;
+    };
+
     gl.utils.scrollToElement = function($el) {
       var top = $el.offset().top;
       gl.navBarHeight = gl.navBarHeight || $('.navbar-gitlab').height();
diff --git a/app/assets/javascripts/merge_request_tabs.js.es6 b/app/assets/javascripts/merge_request_tabs.js.es6
index 107e85f1225..af1ba9ecaf3 100644
--- a/app/assets/javascripts/merge_request_tabs.js.es6
+++ b/app/assets/javascripts/merge_request_tabs.js.es6
@@ -82,12 +82,18 @@ require('./flash');
       $(document)
         .on('shown.bs.tab', '.merge-request-tabs a[data-toggle="tab"]', this.tabShown)
         .on('click', '.js-show-tab', this.showTab);
+
+      $('.merge-request-tabs a[data-toggle="tab"]')
+        .on('click', this.clickTab);
     }
 
     unbindEvents() {
       $(document)
         .off('shown.bs.tab', '.merge-request-tabs a[data-toggle="tab"]', this.tabShown)
         .off('click', '.js-show-tab', this.showTab);
+
+      $('.merge-request-tabs a[data-toggle="tab"]')
+        .off('click', this.clickTab);
     }
 
     showTab(e) {
@@ -95,6 +101,14 @@ require('./flash');
       this.activateTab($(e.target).data('action'));
     }
 
+    clickTab(e) {
+      if (e.target && gl.utils.isMetaClick(e)) {
+        const targetLink = e.target.getAttribute('href');
+        e.stopImmediatePropagation();
+        window.open(targetLink, '_blank');
+      }
+    }
+
     tabShown(e) {
       const $target = $(e.target);
       const action = $target.data('action');
diff --git a/app/assets/javascripts/todos.js.es6 b/app/assets/javascripts/todos.js.es6
index 96c7d927509..b07e62a8c30 100644
--- a/app/assets/javascripts/todos.js.es6
+++ b/app/assets/javascripts/todos.js.es6
@@ -146,14 +146,26 @@
     }
 
     goToTodoUrl(e) {
-      const todoLink = $(this).data('url');
+      const todoLink = this.dataset.url;
+      let targetLink = e.target.getAttribute('href');
+
+      if (e.target.tagName === 'IMG') { // See if clicked target was Avatar
+        targetLink = e.target.parentElement.getAttribute('href'); // Parent of Avatar is link
+      }
+
       if (!todoLink) {
         return;
       }
-      // Allow Meta-Click or Mouse3-click to open in a new tab
-      if (e.metaKey || e.which === 2) {
+
+      if (gl.utils.isMetaClick(e)) {
         e.preventDefault();
-        return window.open(todoLink, '_blank');
+        // Meta-Click on username leads to different URL than todoLink.
+        // Turbolinks can resolve that URL, but window.open requires URL manually.
+        if (targetLink !== todoLink) {
+          return window.open(targetLink, '_blank');
+        } else {
+          return window.open(todoLink, '_blank');
+        }
       } else {
         return gl.utils.visitUrl(todoLink);
       }