Add Join meeting button to Issues with Zoom links

Detect links containing zoom.us followed by j, s, or my
Add link below Issue title that links to Zoom meeting

3 files changed, 56 insertions, 0 deletions

diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue
index e88ca4747c5..de2a9664cde 100644
--- a/app/assets/javascripts/issue_show/components/app.vue
+++ b/app/assets/javascripts/issue_show/components/app.vue
@@ -11,6 +11,7 @@ import titleComponent from './title.vue';
 import descriptionComponent from './description.vue';
 import editedComponent from './edited.vue';
 import formComponent from './form.vue';
+import PinnedLinks from './pinned_links.vue';
 import recaptchaModalImplementor from '../../vue_shared/mixins/recaptcha_modal_implementor';
 
 export default {
@@ -19,6 +20,7 @@ export default {
     titleComponent,
     editedComponent,
     formComponent,
+    PinnedLinks,
   },
   mixins: [recaptchaModalImplementor],
   props: {
@@ -340,6 +342,7 @@ export default {
         :title-text="state.titleText"
         :show-inline-edit-button="showInlineEditButton"
       />
+      <pinned-links :description-html="state.descriptionHtml" />
       <description-component
         v-if="state.descriptionHtml"
         :can-update="canUpdate"
diff --git a/app/assets/javascripts/issue_show/components/pinned_links.vue b/app/assets/javascripts/issue_show/components/pinned_links.vue
new file mode 100644
index 00000000000..7a54b26bc2b
--- /dev/null
+++ b/app/assets/javascripts/issue_show/components/pinned_links.vue
@@ -0,0 +1,52 @@
+<script>
+import { GlLink } from '@gitlab/ui';
+import Icon from '~/vue_shared/components/icon.vue';
+
+export default {
+  components: {
+    Icon,
+    GlLink,
+  },
+  props: {
+    descriptionHtml: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    linksInDescription() {
+      const el = document.createElement('div');
+      el.innerHTML = this.descriptionHtml;
+      return [...el.querySelectorAll('a')].map(a => a.href);
+    },
+    // Detect links matching the following formats:
+    // Zoom Start links: https://zoom.us/s/<meeting-id>
+    // Zoom Join links: https://zoom.us/j/<meeting-id>
+    // Personal Zoom links: https://zoom.us/my/<meeting-id>
+    // Vanity Zoom links: https://gitlab.zoom.us/j/<meeting-id> (also /s and /my)
+    zoomHref() {
+      const zoomRegex = /^https:\/\/([\w\d-]+\.)?zoom\.us\/(s|j|my)\/.+/;
+      return this.linksInDescription.reduce((acc, currentLink) => {
+        let lastLink = acc;
+        if (zoomRegex.test(currentLink)) {
+          lastLink = currentLink;
+        }
+        return lastLink;
+      }, '');
+    },
+  },
+};
+</script>
+
+<template>
+  <div v-if="zoomHref" class="border-bottom mb-3 mt-n2">
+    <gl-link
+      :href="zoomHref"
+      target="_blank"
+      class="btn btn-inverted btn-secondary btn-sm text-dark mb-3"
+    >
+      <icon name="brand-zoom" :size="14" />
+      <strong class="vertical-align-top">{{ __('Join Zoom meeting') }}</strong>
+    </gl-link>
+  </div>
+</template>
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index db09118ba15..1bd5043ed10 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -416,6 +416,7 @@ img.emoji {
 .center { text-align: center; }
 .block { display: block; }
 .flex { display: flex; }
+.vertical-align-top { vertical-align: top; }
 .vertical-align-middle { vertical-align: middle; }
 .vertical-align-sub { vertical-align: sub; }
 .flex-align-self-center { align-self: center; }