diff options
author | Simon Knox <psimyn@gmail.com> | 2019-06-11 14:15:08 +1000 |
---|---|---|
committer | Simon Knox <psimyn@gmail.com> | 2019-06-14 23:57:05 +1000 |
commit | 14f27102b696672f02b5d1b2ab45688b711f4024 (patch) | |
tree | eef48bb1366b20a961e6aa4bb61bc357dc77d1c9 /app/assets/javascripts | |
parent | 577832598f1b35187efafc426068ef7ac36ae09f (diff) | |
download | gitlab-ce-14f27102b696672f02b5d1b2ab45688b711f4024.tar.gz |
Add Join meeting button to Issues with Zoom links62966-embed-zoom-call-in-issue-mvc
Detect links containing zoom.us followed by j, s, or my
Add link below Issue title that links to Zoom meeting
Diffstat (limited to 'app/assets/javascripts')
-rw-r--r-- | app/assets/javascripts/issue_show/components/app.vue | 3 | ||||
-rw-r--r-- | app/assets/javascripts/issue_show/components/pinned_links.vue | 52 |
2 files changed, 55 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> |