diff options
Diffstat (limited to 'app/assets/javascripts/vue_merge_request_widget/components/extensions')
5 files changed, 53 insertions, 8 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue index f1b89c42fb5..0bc17de638b 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue @@ -47,6 +47,8 @@ export default { fullData: [], isCollapsed: true, showFade: false, + modalData: undefined, + modalName: undefined, }; }, computed: { @@ -116,6 +118,9 @@ export default { return summary; }, + modalId() { + return this.modalName || `modal${this.$options.name}`; + }, }, watch: { isCollapsed(newVal) { @@ -249,7 +254,7 @@ export default { class="media-body gl-display-flex gl-flex-direction-row! gl-align-self-center" data-testid="widget-extension-top-level" > - <div class="gl-flex-grow-1"> + <div class="gl-flex-grow-1" data-testid="widget-extension-top-level-summary"> <template v-if="isLoadingSummary">{{ widgetLoadingText }}</template> <template v-else-if="hasFetchError">{{ widgetErrorText }}</template> <div v-else> @@ -306,12 +311,20 @@ export default { data-testid="extension-list-item" > <gl-intersection-observer - :options="{ rootMargin: '100px', thresholds: 0.1 }" + :options="/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */ { + rootMargin: '100px', + thresholds: 0.1, + } /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */" class="gl-w-full" @appear="appear(index)" @disappear="disappear(index)" > - <child-content :data="item" :widget-label="widgetLabel" :level="2" /> + <child-content + :data="item" + :widget-label="widgetLabel" + :modal-id="modalId" + :level="2" + /> </gl-intersection-observer> </div> </dynamic-scroller-item> @@ -322,5 +335,8 @@ export default { class="fade mr-extenson-scrim gl-absolute gl-left-0 gl-bottom-0 gl-w-full gl-h-7 gl-pointer-events-none" ></div> </div> + <div v-if="$options.modalComponent && modalData"> + <component :is="$options.modalComponent" :modal-id="modalId" v-bind="modalData" /> + </div> </section> </template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue index 5cfee21dd5e..0ca4c92a5ae 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue @@ -1,5 +1,5 @@ <script> -import { GlBadge, GlLink, GlSafeHtmlDirective } from '@gitlab/ui'; +import { GlBadge, GlLink, GlSafeHtmlDirective, GlModalDirective } from '@gitlab/ui'; import StatusIcon from './status_icon.vue'; import Actions from './actions.vue'; import { generateText } from './utils'; @@ -14,6 +14,7 @@ export default { }, directives: { SafeHtml: GlSafeHtmlDirective, + GlModal: GlModalDirective, }, props: { data: { @@ -24,6 +25,11 @@ export default { type: String, required: true, }, + modalId: { + type: String, + required: false, + default: null, + }, level: { type: Number, required: true, @@ -63,6 +69,11 @@ export default { <div v-if="data.link"> <gl-link :href="data.link.href">{{ data.link.text }}</gl-link> </div> + <div v-if="data.modal"> + <gl-link v-gl-modal="modalId" @click="data.modal.onClick"> + {{ data.modal.text }} + </gl-link> + </div> <div v-if="data.supportingText"> <p v-safe-html="generateText(data.supportingText)" class="gl-m-0"></p> </div> @@ -87,6 +98,7 @@ export default { :key="childData.id" :data="childData" :widget-label="widgetLabel" + :modal-id="modalId" :level="3" data-testid="child-content" /> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/index.js b/app/assets/javascripts/vue_merge_request_widget/components/extensions/index.js index 8438f3492b2..65273678fb9 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/index.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/index.js @@ -14,6 +14,7 @@ export const registerExtension = (extension) => { i18n: extension.i18n, expandEvent: extension.expandEvent, enablePolling: extension.enablePolling, + modalComponent: extension.modalComponent, computed: { ...Object.keys(extension.computed).reduce( (acc, computedKey) => ({ diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/status_icon.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/status_icon.vue index 01d8de132e7..456a1f17aae 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/status_icon.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/status_icon.vue @@ -49,7 +49,7 @@ export default { ]" class="gl-rounded-full gl-mr-3 gl-relative gl-p-2" > - <gl-loading-icon v-if="isLoading" size="md" inline class="gl-display-block" /> + <gl-loading-icon v-if="isLoading" size="lg" inline class="gl-display-block" /> <gl-icon v-else :name="$options.EXTENSION_ICON_NAMES[iconName]" diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/utils.js b/app/assets/javascripts/vue_merge_request_widget/components/extensions/utils.js index 5fba070f79c..cba12507eba 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/utils.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/utils.js @@ -35,9 +35,7 @@ const textStyleTags = { [getStartTag('small')]: '<span class="gl-font-sm gl-text-gray-700">', }; -export const generateText = (text) => { - if (typeof text !== 'string') return null; - +const createText = (text) => { return text .replace( new RegExp( @@ -60,3 +58,21 @@ export const generateText = (text) => { ) .replace(/%{([a-z]|_)+}/g, ''); // Filter out any tags we don't know about }; + +export const generateText = (text) => { + if (typeof text === 'string') { + return createText(text); + } else if ( + typeof text === 'object' && + typeof text.text === 'string' && + typeof text.href === 'string' + ) { + return createText( + `${ + text.prependText ? `${text.prependText} ` : '' + }<a class="gl-text-decoration-underline" href="${text.href}">${text.text}</a>`, + ); + } + + return null; +}; |