Merge branch '220935' into 'master'

Update pinned links to use GlButton

See merge request gitlab-org/gitlab!34620

app/assets/javascripts/issue_show/components/pinned_links.vue

 <script>
-import { GlLink } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlButton } from '@gitlab/ui';
+import { STATUS_PAGE_PUBLISHED, JOIN_ZOOM_MEETING } from '../constants';
 
 export default {
   components: {
-    Icon,
-    GlLink,
+    GlButton,
   },
   props: {
     zoomMeetingUrl: {
@@ -19,32 +18,46 @@ export default {
       default: '',
     },
   },
+  computed: {
+    pinnedLinks() {
+      return [
+        {
+          id: 'publishedIncidentUrl',
+          url: this.publishedIncidentUrl,
+          text: STATUS_PAGE_PUBLISHED,
+          icon: 'tanuki',
+        },
+        {
+          id: 'zoomMeetingUrl',
+          url: this.zoomMeetingUrl,
+          text: JOIN_ZOOM_MEETING,
+          icon: 'brand-zoom',
+        },
+      ];
+    },
+  },
+  methods: {
+    needsPaddingClass(i) {
+      return i < this.pinnedLinks.length - 1;
+    },
+  },
 };
 </script>
 
 <template>
   <div class="border-bottom gl-mb-6 gl-display-flex gl-justify-content-start">
-    <div v-if="publishedIncidentUrl" class="gl-pr-3">
-      <gl-link
-        :href="publishedIncidentUrl"
-        target="_blank"
-        class="btn btn-inverted btn-secondary btn-sm text-dark mb-3"
-        data-testid="publishedIncidentUrl"
-      >
-        <icon name="tanuki" :size="14" />
-        <strong class="vertical-align-top">{{ __('Published on status page') }}</strong>
-      </gl-link>
-    </div>
-    <div v-if="zoomMeetingUrl">
-      <gl-link
-        :href="zoomMeetingUrl"
-        target="_blank"
-        class="btn btn-inverted btn-secondary btn-sm text-dark mb-3"
-        data-testid="zoomMeetingUrl"
-      >
-        <icon name="brand-zoom" :size="14" />
-        <strong class="vertical-align-top">{{ __('Join Zoom meeting') }}</strong>
-      </gl-link>
-    </div>
+    <template v-for="(link, i) in pinnedLinks">
+      <div v-if="link.url" :key="link.id" :class="{ 'gl-pr-3': needsPaddingClass(i) }">
+        <gl-button
+          :href="link.url"
+          target="_blank"
+          :icon="link.icon"
+          size="small"
+          class="gl-font-weight-bold gl-mb-5"
+          :data-testid="link.id"
+          >{{ link.text }}</gl-button
+        >
+      </div>
+    </template>
   </div>
 </template>

app/assets/javascripts/issue_show/constants.js

@@ -15,3 +15,6 @@ export const IssuableType = {
   Epic: 'epic',
   MergeRequest: 'merge_request',
 };
+
+export const STATUS_PAGE_PUBLISHED = __('Published on status page');
+export const JOIN_ZOOM_MEETING = __('Join Zoom meeting');

changelogs/unreleased/220935.yml

+---
+title: Update pinned links to use GlButton
+merge_request: 34620
+author:
+type: other

spec/frontend/issue_show/components/pinned_links_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlLink } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 import PinnedLinks from '~/issue_show/components/pinned_links.vue';
+import { STATUS_PAGE_PUBLISHED, JOIN_ZOOM_MEETING } from '~/issue_show/constants';
 
 const plainZoomUrl = 'https://zoom.us/j/123456789';
 const plainStatusUrl = 'https://status.com';
@@ -8,7 +9,7 @@ const plainStatusUrl = 'https://status.com';
 describe('PinnedLinks', () => {
   let wrapper;
 
-  const findLinks = () => wrapper.findAll(GlLink);
+  const findButtons = () => wrapper.findAll(GlButton);
 
   const createComponent = props => {
     wrapper = shallowMount(PinnedLinks, {
@@ -26,10 +27,10 @@ describe('PinnedLinks', () => {
     });
 
     expect(
-      findLinks()
+      findButtons()
         .at(0)
         .text(),
-    ).toBe('Join Zoom meeting');
+    ).toBe(JOIN_ZOOM_MEETING);
   });
 
   it('displays Status link', () => {
@@ -38,10 +39,10 @@ describe('PinnedLinks', () => {
     });
 
     expect(
-      findLinks()
+      findButtons()
         .at(0)
         .text(),
-    ).toBe('Published on status page');
+    ).toBe(STATUS_PAGE_PUBLISHED);
   });
 
   it('does not render if there are no links', () => {
@@ -50,6 +51,6 @@ describe('PinnedLinks', () => {
       publishedIncidentUrl: '',
     });
 
-    expect(wrapper.find(GlLink).exists()).toBe(false);
+    expect(findButtons()).toHaveLength(0);
   });
 });