diff options
Diffstat (limited to 'app/assets/javascripts/vue_merge_request_widget/components/extensions')
3 files changed, 34 insertions, 19 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 684386883c8..f1b89c42fb5 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 @@ -66,7 +66,15 @@ export default { return this.loadingState === LOADING_STATES.expandedLoading; }, isCollapsible() { - return !this.isLoadingSummary && this.loadingState !== LOADING_STATES.collapsedError; + if (!this.isLoadingSummary && this.loadingState !== LOADING_STATES.collapsedError) { + if (this.shouldCollapse) { + return this.shouldCollapse(); + } + + return true; + } + + return false; }, hasFullData() { return this.fullData.length > 0; @@ -86,7 +94,7 @@ export default { ); }, statusIconName() { - if (this.hasFetchError) return EXTENSION_ICONS.error; + if (this.hasFetchError) return EXTENSION_ICONS.failed; if (this.isLoadingSummary) return null; return this.statusIcon(this.collapsedData); @@ -128,7 +136,7 @@ export default { } }), toggleCollapsed(e) { - if (!e?.target?.closest('.btn:not(.btn-icon),a')) { + if (this.isCollapsible && !e?.target?.closest('.btn:not(.btn-icon),a')) { this.isCollapsed = !this.isCollapsed; this.triggerRedisTracking(); @@ -214,7 +222,7 @@ export default { // 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) { + if (up - this.down < 200 && !e?.target?.closest('.btn-icon')) { this.toggleCollapsed(e); } }, @@ -226,7 +234,12 @@ export default { <template> <section class="media-section" data-testid="widget-extension"> - <div class="media gl-p-5 gl-cursor-pointer" @mousedown="onRowMouseDown" @mouseup="onRowMouseUp"> + <div + :class="{ 'gl-cursor-pointer': isCollapsible }" + class="media gl-p-5" + @mousedown="onRowMouseDown" + @mouseup="onRowMouseUp" + > <status-icon :name="$options.label || $options.name" :is-loading="isLoadingSummary" @@ -264,7 +277,7 @@ export default { category="tertiary" data-testid="toggle-button" size="small" - @click.self="toggleCollapsed" + @click="toggleCollapsed" /> </div> </div> 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 5f42c6c7acb..5cfee21dd5e 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 @@ -55,19 +55,21 @@ export default { <div class="gl-display-flex"> <status-icon v-if="data.icon" :icon-name="data.icon.name" :size="12" class="gl-pl-0" /> <div class="gl-w-full"> - <div class="gl-flex-wrap gl-display-flex gl-w-full"> - <div class="gl-mr-4 gl-display-flex gl-align-items-center"> - <p v-safe-html="generateText(data.text)" class="gl-m-0"></p> + <div class="gl-display-flex gl-flex-nowrap"> + <div class="gl-flex-wrap gl-display-flex gl-w-full"> + <div class="gl-mr-4 gl-display-flex gl-align-items-center"> + <p v-safe-html="generateText(data.text)" class="gl-m-0"></p> + </div> + <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> </div> - <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="widgetLabel" :tertiary-buttons="data.actions" class="gl-ml-auto" /> </div> <p 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 8ba13cf8252..5fba070f79c 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 @@ -32,7 +32,7 @@ const textStyleTags = { [getStartTag('critical')]: '<span class="gl-font-weight-bold gl-text-red-800">', [getStartTag('same')]: '<span class="gl-font-weight-bold gl-text-gray-700">', [getStartTag('strong')]: '<span class="gl-font-weight-bold">', - [getStartTag('small')]: '<span class="gl-font-sm">', + [getStartTag('small')]: '<span class="gl-font-sm gl-text-gray-700">', }; export const generateText = (text) => { |