diff options
Diffstat (limited to 'app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue')
-rw-r--r-- | app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue | 31 |
1 files changed, 25 insertions, 6 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 7322958e6df..a25b4ab54e5 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 @@ -128,10 +128,12 @@ export default { api.trackRedisHllUserEvent(this.$options.expandEvent); } }), - toggleCollapsed() { - this.isCollapsed = !this.isCollapsed; + toggleCollapsed(e) { + if (!e?.target?.closest('.btn:not(.btn-icon),a')) { + this.isCollapsed = !this.isCollapsed; - this.triggerRedisTracking(); + this.triggerRedisTracking(); + } }, initExtensionPolling() { const poll = new Poll({ @@ -139,7 +141,7 @@ export default { fetchData: () => this.fetchCollapsedData(this.$props), }, method: 'fetchData', - successCallback: (data) => { + successCallback: ({ data }) => { if (Object.keys(data).length > 0) { poll.stop(); this.setCollapsedData(data); @@ -207,6 +209,19 @@ export default { this.showFade = true; } }, + onRowMouseDown() { + this.down = Number(new Date()); + }, + onRowMouseUp(e) { + const up = Number(new Date()); + + // To allow for text to be selected we check if the the user is clicking + // or selecting, if they are selecting the time difference should be + // more than 200ms + if (up - this.down < 200) { + this.toggleCollapsed(e); + } + }, generateText, }, EXTENSION_ICON_CLASS, @@ -215,7 +230,7 @@ export default { <template> <section class="media-section" data-testid="widget-extension"> - <div class="media gl-p-5"> + <div class="media gl-p-5 gl-cursor-pointer" @mousedown="onRowMouseDown" @mouseup="onRowMouseUp"> <status-icon :name="$options.label || $options.name" :is-loading="isLoadingSummary" @@ -253,7 +268,7 @@ export default { category="tertiary" data-testid="toggle-button" size="small" - @click="toggleCollapsed" + @click.self="toggleCollapsed" /> </div> </div> @@ -317,9 +332,13 @@ export default { <div v-if="data.link"> <gl-link :href="data.link.href">{{ data.link.text }}</gl-link> </div> + <div v-if="data.supportingText"> + <p v-safe-html="generateText(data.supportingText)" class="gl-m-0"></p> + </div> <gl-badge v-if="data.badge" :variant="data.badge.variant || 'info'"> {{ data.badge.text }} </gl-badge> + <actions :widget="$options.label || $options.name" :tertiary-buttons="data.actions" |