Issues links break due to absolute path usage

Summary

I have a different external port that's being used from my personal GitLab installation than the internal port. As a result of this, one of my friends using the instance was unable to view issues and we realized it was because the port number in the URL path changed.

Steps to reproduce

See "Example" Below

Example

If the external port is 45678 and the internal port is 12345, most of the instance works as expected. However, when the user goes to the issues list, the urls are not relative paths but instead absolute:

<a dir="auto" data-qa-selector="issuable_title_link" 
href="https://gitlab.example.com:12345/example-group/example-project/-/issues/15" class="gl-link issue-title-text">
        Issue Title
        <!---->
</a>

However, I would expect it to look like this:

<a dir="auto" data-qa-selector="issuable_title_link" 
href="/example-group/example-project/-/issues/15" class="gl-link issue-title-text">
        Issue Title
        <!---->
</a>

What is the current bug behavior?

See above Example

What is the expected correct behavior?

See above Example

Possible fixes

I'm not very familiar with vue, but I would guess it's related to this part of the code? If not, then hopefully the description of the issue is enough for a quick fix 😄

https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue#L224

EDIT: Appears the tag for ~bug wasn't applied automatically. Secondary bug? ;)

Edited by 🤖 GitLab Bot 🤖