Fix context popup error (#17398)

* Fix context popup error

3 files changed, 29 insertions, 2 deletions

diff --git a/web_src/js/features/contextpopup.js b/web_src/js/features/contextpopup.js
index b97f77275a..aa73aad241 100644
--- a/web_src/js/features/contextpopup.js
+++ b/web_src/js/features/contextpopup.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 
 import ContextPopup from '../components/ContextPopup.vue';
+import {parseIssueHref} from '../utils.js';
 
 export default function initContextPopups() {
   const refIssues = $('.ref-issue');
@@ -10,7 +11,9 @@ export default function initContextPopups() {
     if ($(this).hasClass('ref-external-issue')) {
       return;
     }
-    const [index, _issues, repo, owner] = $(this).attr('href').replace(/[#?].*$/, '').split('/').reverse();
+
+    const {owner, repo, index} = parseIssueHref($(this).attr('href'));
+    if (!owner) return;
 
     const el = document.createElement('div');
     el.className = 'ui custom popup hidden';
diff --git a/web_src/js/utils.js b/web_src/js/utils.js
index b555650bc5..6310b2cb99 100644
--- a/web_src/js/utils.js
+++ b/web_src/js/utils.js
@@ -57,3 +57,9 @@ export function mqBinarySearch(feature, minValue, maxValue, step, unit) {
   }
   return mqBinarySearch(feature, minValue, mid - step, step, unit); // feature is < mid
 }
+
+export function parseIssueHref(href) {
+  const path = (href || '').replace(/[#?].*$/, '');
+  const [_, owner, repo, type, index] = /([^/]+)\/([^/]+)\/(issues|pulls)\/([0-9]+)/.exec(path) || [];
+  return {owner, repo, type, index};
+}
diff --git a/web_src/js/utils.test.js b/web_src/js/utils.test.js
index 859046c87c..3f6f921079 100644
--- a/web_src/js/utils.test.js
+++ b/web_src/js/utils.test.js
@@ -1,5 +1,5 @@
 import {
-  basename, extname, isObject, uniq, stripTags, joinPaths,
+  basename, extname, isObject, uniq, stripTags, joinPaths, parseIssueHref,
 } from './utils.js';
 
 test('basename', () => {
@@ -66,3 +66,21 @@ test('uniq', () => {
 test('stripTags', () => {
   expect(stripTags('<a>test</a>')).toEqual('test');
 });
+
+test('parseIssueHref', () => {
+  expect(parseIssueHref('/owner/repo/issues/1')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'});
+  expect(parseIssueHref('/owner/repo/pulls/1?query')).toEqual({owner: 'owner', repo: 'repo', type: 'pulls', index: '1'});
+  expect(parseIssueHref('/owner/repo/issues/1#hash')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'});
+  expect(parseIssueHref('/sub/owner/repo/issues/1')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'});
+  expect(parseIssueHref('/sub/sub2/owner/repo/pulls/1')).toEqual({owner: 'owner', repo: 'repo', type: 'pulls', index: '1'});
+  expect(parseIssueHref('/sub/sub2/owner/repo/issues/1?query')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'});
+  expect(parseIssueHref('/sub/sub2/owner/repo/issues/1#hash')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'});
+  expect(parseIssueHref('https://example.com/owner/repo/issues/1')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'});
+  expect(parseIssueHref('https://example.com/owner/repo/pulls/1?query')).toEqual({owner: 'owner', repo: 'repo', type: 'pulls', index: '1'});
+  expect(parseIssueHref('https://example.com/owner/repo/issues/1#hash')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'});
+  expect(parseIssueHref('https://example.com/sub/owner/repo/issues/1')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'});
+  expect(parseIssueHref('https://example.com/sub/sub2/owner/repo/pulls/1')).toEqual({owner: 'owner', repo: 'repo', type: 'pulls', index: '1'});
+  expect(parseIssueHref('https://example.com/sub/sub2/owner/repo/issues/1?query')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'});
+  expect(parseIssueHref('https://example.com/sub/sub2/owner/repo/issues/1#hash')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'});
+  expect(parseIssueHref('')).toEqual({owner: undefined, repo: undefined, type: undefined, index: undefined});
+});