Show icon when author is external

- add utility function for determining
whether a URL is external to GitLab
- Add icon next to author avatar if they
exist in an external system (e.g. Jira)

app/assets/javascripts/issuable_show/components/issuable_header.vue

@@ -3,6 +3,7 @@ import { GlIcon, GlButton, GlTooltipDirective, GlAvatarLink, GlAvatarLabeled } f
 
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import { isExternal } from '~/lib/utils/url_utility';
 
 export default {
   components: {
@@ -49,6 +50,9 @@ export default {
     authorId() {
       return getIdFromGraphQLId(`${this.author.id}`);
     },
+    isAuthorExternal() {
+      return isExternal(this.author.webUrl);
+    },
   },
   mounted() {
     this.toggleSidebarButtonEl = document.querySelector('.js-toggle-right-sidebar-button');
@@ -98,7 +102,11 @@ export default {
             :src="author.avatarUrl"
             :label="author.name"
             class="d-none d-sm-inline-flex gl-ml-1"
-          />
+          >
+            <template #meta>
+              <gl-icon v-if="isAuthorExternal" name="external-link" />
+            </template>
+          </gl-avatar-labeled>
           <strong class="author d-sm-none d-inline">@{{ author.username }}</strong>
         </gl-avatar-link>
       </div>

app/assets/javascripts/lib/utils/url_utility.js

@@ -309,6 +309,20 @@ export function isAbsoluteOrRootRelative(url) {
   return isAbsolute(url) || isRootRelative(url);
 }
 
+/**
+ * Returns true if url is an external URL
+ *
+ * @param {String} url
+ * @returns {Boolean}
+ */
+export function isExternal(url) {
+  if (isRootRelative(url)) {
+    return false;
+  }
+
+  return !url.includes(gon.gitlab_url);
+}
+
 /**
  * Converts a relative path to an absolute or a root relative path depending
  * on what is passed as a basePath.

spec/frontend/issuable_show/components/issuable_header_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { GlIcon, GlAvatarLabeled } from '@gitlab/ui';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 
 import IssuableHeader from '~/issuable_show/components/issuable_header.vue';
 
@@ -10,7 +11,8 @@ const issuableHeaderProps = {
   ...mockIssuableShowProps,
 };
 
-const createComponent = (propsData = issuableHeaderProps) =>
+const createComponent = (propsData = issuableHeaderProps, { stubs } = {}) =>
+  extendedWrapper(
     shallowMount(IssuableHeader, {
       propsData,
       slots: {
@@ -20,11 +22,12 @@ const createComponent = (propsData = issuableHeaderProps) =>
         <a class="js-new" href="/gitlab-org/gitlab-shell/-/issues/new">New issuable</a>
       `,
       },
-  });
+      stubs,
+    }),
+  );
 
 describe('IssuableHeader', () => {
   let wrapper;
-  const findByTestId = (testId) => wrapper.find(`[data-testid="${testId}"]`);
 
   beforeEach(() => {
     wrapper = createComponent();
@@ -63,7 +66,7 @@ describe('IssuableHeader', () => {
 
   describe('template', () => {
     it('renders issuable status icon and text', () => {
-      const statusBoxEl = findByTestId('status');
+      const statusBoxEl = wrapper.findByTestId('status');
 
       expect(statusBoxEl.exists()).toBe(true);
       expect(statusBoxEl.find(GlIcon).props('name')).toBe(mockIssuableShowProps.statusIcon);
@@ -77,7 +80,7 @@ describe('IssuableHeader', () => {
 
       await wrapper.vm.$nextTick();
 
-      const blockedEl = findByTestId('blocked');
+      const blockedEl = wrapper.findByTestId('blocked');
 
       expect(blockedEl.exists()).toBe(true);
       expect(blockedEl.find(GlIcon).props('name')).toBe('lock');
@@ -90,7 +93,7 @@ describe('IssuableHeader', () => {
 
       await wrapper.vm.$nextTick();
 
-      const confidentialEl = findByTestId('confidential');
+      const confidentialEl = wrapper.findByTestId('confidential');
 
       expect(confidentialEl.exists()).toBe(true);
       expect(confidentialEl.find(GlIcon).props('name')).toBe('eye-slash');
@@ -105,7 +108,7 @@ describe('IssuableHeader', () => {
         href: webUrl,
         target: '_blank',
       };
-      const avatarEl = findByTestId('avatar');
+      const avatarEl = wrapper.findByTestId('avatar');
       expect(avatarEl.exists()).toBe(true);
       expect(avatarEl.attributes()).toMatchObject(avatarElAttrs);
       expect(avatarEl.find(GlAvatarLabeled).attributes()).toMatchObject({
@@ -113,20 +116,46 @@ describe('IssuableHeader', () => {
         src: avatarUrl,
         label: name,
       });
+      expect(avatarEl.find(GlAvatarLabeled).find(GlIcon).exists()).toBe(false);
     });
 
     it('renders sidebar toggle button', () => {
-      const toggleButtonEl = findByTestId('sidebar-toggle');
+      const toggleButtonEl = wrapper.findByTestId('sidebar-toggle');
 
       expect(toggleButtonEl.exists()).toBe(true);
       expect(toggleButtonEl.props('icon')).toBe('chevron-double-lg-left');
     });
 
     it('renders header actions', () => {
-      const actionsEl = findByTestId('header-actions');
+      const actionsEl = wrapper.findByTestId('header-actions');
 
       expect(actionsEl.find('button.js-close').exists()).toBe(true);
       expect(actionsEl.find('a.js-new').exists()).toBe(true);
     });
+
+    describe('when author exists outside of GitLab', () => {
+      it("renders 'external-link' icon in avatar label", () => {
+        wrapper = createComponent(
+          {
+            ...issuableHeaderProps,
+            author: {
+              ...issuableHeaderProps.author,
+              webUrl: 'https://jira.com/test-user/author.jpg',
+            },
+          },
+          {
+            stubs: {
+              GlAvatarLabeled,
+            },
+          },
+        );
+
+        const avatarEl = wrapper.findComponent(GlAvatarLabeled);
+        const icon = avatarEl.find(GlIcon);
+
+        expect(icon.exists()).toBe(true);
+        expect(icon.props('name')).toBe('external-link');
+      });
+    });
   });
 });

spec/frontend/lib/utils/url_utility_spec.js

@@ -492,6 +492,28 @@ describe('URL utility', () => {
     });
   });
 
+  describe('isExternal', () => {
+    const gitlabUrl = 'https://gitlab.com/';
+
+    beforeEach(() => {
+      gon.gitlab_url = gitlabUrl;
+    });
+
+    afterEach(() => {
+      gon.gitlab_url = '';
+    });
+
+    it.each`
+      url                                        | urlType                    | external
+      ${'/gitlab-org/gitlab-test/-/issues/2'}    | ${'relative'}              | ${false}
+      ${gitlabUrl}                               | ${'absolute and internal'} | ${false}
+      ${`${gitlabUrl}/gitlab-org/gitlab-test`}   | ${'absolute and internal'} | ${false}
+      ${'http://jira.atlassian.net/browse/IG-1'} | ${'absolute and external'} | ${true}
+    `('returns $external for $url ($urlType)', ({ url, external }) => {
+      expect(urlUtils.isExternal(url)).toBe(external);
+    });
+  });
+
   describe('isBase64DataUrl', () => {
     it.each`
       url                                                      | valid