1 files changed, 20 insertions, 14 deletions

diff --git a/app/assets/javascripts/issuable_list/components/issuable_item.vue b/app/assets/javascripts/issuable_list/components/issuable_item.vue
index 583e5cb703d..39852eba71a 100644
--- a/app/assets/javascripts/issuable_list/components/issuable_item.vue
+++ b/app/assets/javascripts/issuable_list/components/issuable_item.vue
@@ -1,13 +1,13 @@
 <script>
 import { GlLink, GlIcon, GlLabel, GlFormCheckbox, GlTooltipDirective } from '@gitlab/ui';
 
-import { __, sprintf } from '~/locale';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
-import { getTimeago } from '~/lib/utils/datetime_utility';
 import { isScopedLabel } from '~/lib/utils/common_utils';
-import timeagoMixin from '~/vue_shared/mixins/timeago';
-
+import { getTimeago } from '~/lib/utils/datetime_utility';
+import { isExternal, setUrlFragment } from '~/lib/utils/url_utility';
+import { __, sprintf } from '~/locale';
 import IssuableAssignees from '~/vue_shared/components/issue/issue_assignees.vue';
+import timeagoMixin from '~/vue_shared/mixins/timeago';
 
 export default {
   components: {
@@ -48,17 +48,14 @@ export default {
     author() {
       return this.issuable.author;
     },
+    webUrl() {
+      return this.issuable.gitlabWebUrl || this.issuable.webUrl;
+    },
     authorId() {
       return getIdFromGraphQLId(`${this.author.id}`);
     },
     isIssuableUrlExternal() {
-      // Check if URL is relative, which means it is internal.
-      if (!/^https?:\/\//g.test(this.issuable.webUrl)) {
-        return false;
-      }
-      // In case URL is absolute, it may or may not be internal,
-      // hence use `gon.gitlab_url` which is current instance domain.
-      return !this.issuable.webUrl.includes(gon.gitlab_url);
+      return isExternal(this.webUrl);
     },
     labels() {
       return this.issuable.labels?.nodes || this.issuable.labels || [];
@@ -92,6 +89,9 @@ export default {
         this.hasSlotContents('status') || this.showDiscussions || this.issuable.assignees,
       );
     },
+    issuableNotesLink() {
+      return setUrlFragment(this.webUrl, 'notes');
+    },
   },
   methods: {
     hasSlotContents(slotName) {
@@ -139,7 +139,13 @@ export default {
       <div class="issuable-main-info">
         <div data-testid="issuable-title" class="issue-title title">
           <span class="issue-title-text" dir="auto">
-            <gl-link :href="issuable.webUrl" v-bind="issuableTitleProps"
+            <gl-icon
+              v-if="issuable.confidential"
+              v-gl-tooltip
+              name="eye-slash"
+              :title="__('Confidential')"
+            />
+            <gl-link :href="webUrl" v-bind="issuableTitleProps"
               >{{ issuable.title
               }}<gl-icon v-if="isIssuableUrlExternal" name="external-link" class="gl-ml-2"
             /></gl-link>
@@ -196,12 +202,12 @@ export default {
           <li
             v-if="showDiscussions"
             data-testid="issuable-discussions"
-            class="issuable-comments gl-display-none gl-display-sm-block"
+            class="issuable-comments gl-display-none gl-sm-display-block"
           >
             <gl-link
               v-gl-tooltip:tooltipcontainer.top
               :title="__('Comments')"
-              :href="`${issuable.webUrl}#notes`"
+              :href="issuableNotesLink"
               :class="{ 'no-comments': !issuable.userDiscussionsCount }"
               class="gl-reset-color!"
             >