Use gitlab_web_url in issuable.vue

app/assets/javascripts/issues_list/components/issuable.vue

@@ -25,7 +25,7 @@ import {
   newDateAsLocaleTime,
 } from '~/lib/utils/datetime_utility';
 import { convertToCamelCase } from '~/lib/utils/text_utility';
-import { mergeUrlParams } from '~/lib/utils/url_utility';
+import { mergeUrlParams, setUrlFragment, isExternal } from '~/lib/utils/url_utility';
 import { sprintf, __ } from '~/locale';
 import initUserPopovers from '~/user_popovers';
 import IssueAssignees from '~/vue_shared/components/issue/issue_assignees.vue';
@@ -102,8 +102,14 @@ export default {
     isJiraIssue() {
       return this.issuable.external_tracker === 'jira';
     },
+    webUrl() {
+      return this.issuable.gitlab_web_url || this.issuable.web_url;
+    },
+    isIssuableUrlExternal() {
+      return isExternal(this.webUrl);
+    },
     linkTarget() {
-      return this.isJiraIssue ? '_blank' : null;
+      return this.isIssuableUrlExternal ? '_blank' : null;
     },
     issueCreatedToday() {
       return getDayDifference(new Date(this.issuable.created_at), new Date()) < 1;
@@ -188,7 +194,7 @@ export default {
           value: this.issuable.blocking_issues_count,
           title: __('Blocking issues'),
           dataTestId: 'blocking-issues',
-          href: `${this.issuable.web_url}#related-issues`,
+          href: setUrlFragment(this.webUrl, 'related-issues'),
           icon: 'issue-block',
         },
         {
@@ -197,7 +203,7 @@ export default {
           value: this.issuable.user_notes_count,
           title: __('Comments'),
           dataTestId: 'notes-count',
-          href: `${this.issuable.web_url}#notes`,
+          href: setUrlFragment(this.webUrl, 'notes'),
           class: { 'no-comments': !this.issuable.user_notes_count, 'issuable-comments': true },
           icon: 'comments',
         },
@@ -252,7 +258,7 @@ export default {
     :class="{ today: issueCreatedToday, closed: isClosed }"
     :data-id="issuable.id"
     :data-labels="labelIdsString"
-    :data-url="issuable.web_url"
+    :data-url="webUrl"
     data-qa-selector="issue_container"
     :data-qa-issue-title="issuable.title"
   >
@@ -284,13 +290,14 @@ export default {
               :aria-label="$options.confidentialTooltipText"
             />
             <gl-link
-              :href="issuable.web_url"
+              :href="webUrl"
               :target="linkTarget"
               data-testid="issuable-title"
               data-qa-selector="issue_link"
-              >{{ issuable.title
-              }}<gl-icon
-                v-if="isJiraIssue"
+            >
+              {{ issuable.title }}
+              <gl-icon
+                v-if="isIssuableUrlExternal"
                 name="external-link"
                 class="gl-vertical-align-text-bottom gl-ml-2"
               />

changelogs/unreleased/fix-web-url-jira.yml

+---
+title: Use gitlab_web_url (if it exists) for issue title links in Issue lists
+merge_request: 55021
+author:
+type: fixed

spec/frontend/issues_list/components/issuable_spec.js

-import { GlSprintf, GlLabel, GlIcon } from '@gitlab/ui';
+import { GlSprintf, GlLabel, GlIcon, GlLink } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { TEST_HOST } from 'helpers/test_constants';
 import { trimText } from 'helpers/text_helper';
@@ -31,6 +31,7 @@ const TEST_MILESTONE = {
 };
 const TEXT_CLOSED = 'CLOSED';
 const TEST_META_COUNT = 100;
+const MOCK_GITLAB_URL = 'http://0.0.0.0:3000';
 
 describe('Issuable component', () => {
   let issuable;
@@ -54,6 +55,7 @@ describe('Issuable component', () => {
 
   beforeEach(() => {
     issuable = { ...simpleIssue };
+    gon.gitlab_url = MOCK_GITLAB_URL;
   });
 
   afterEach(() => {
@@ -199,6 +201,33 @@ describe('Issuable component', () => {
     it('renders no comments', () => {
       expect(findNotes().classes('no-comments')).toBe(true);
     });
+
+    it.each`
+      gitlabWebUrl           | webUrl                        | expectedHref                  | expectedTarget | isExternal
+      ${undefined}           | ${`${MOCK_GITLAB_URL}/issue`} | ${`${MOCK_GITLAB_URL}/issue`} | ${undefined}   | ${false}
+      ${undefined}           | ${'https://jira.com/issue'}   | ${'https://jira.com/issue'}   | ${'_blank'}    | ${true}
+      ${'/gitlab-org/issue'} | ${'https://jira.com/issue'}   | ${'/gitlab-org/issue'}        | ${undefined}   | ${false}
+    `(
+      'renders issuable title correctly when `gitlabWebUrl` is `$gitlabWebUrl` and webUrl is `$webUrl`',
+      async ({ webUrl, gitlabWebUrl, expectedHref, expectedTarget, isExternal }) => {
+        factory({
+          issuable: {
+            ...issuable,
+            web_url: webUrl,
+            gitlab_web_url: gitlabWebUrl,
+          },
+        });
+
+        const titleEl = findIssuableTitle();
+
+        expect(titleEl.exists()).toBe(true);
+        expect(titleEl.find(GlLink).attributes('href')).toBe(expectedHref);
+        expect(titleEl.find(GlLink).attributes('target')).toBe(expectedTarget);
+        expect(titleEl.find(GlLink).text()).toBe(issuable.title);
+
+        expect(titleEl.find(GlIcon).exists()).toBe(isExternal);
+      },
+    );
   });
 
   describe('with confidential issuable', () => {