diff options
Diffstat (limited to 'app/assets/javascripts/vue_merge_request_widget/components/extensions')
4 files changed, 39 insertions, 22 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 414c5bf9691..300e2a672cb 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 @@ -13,6 +13,7 @@ import Poll from '~/lib/utils/poll'; import { normalizeHeaders } from '~/lib/utils/common_utils'; import { EXTENSION_ICON_CLASS, EXTENSION_ICONS } from '../../constants'; import Actions from '../action_buttons.vue'; +import StateContainer from '../state_container.vue'; import StatusIcon from './status_icon.vue'; import ChildContent from './child_content.vue'; import { createTelemetryHub } from './telemetry'; @@ -36,6 +37,7 @@ export default { ChildContent, DynamicScroller, DynamicScrollerItem, + StateContainer, }, directives: { SafeHtml: GlSafeHtmlDirective, @@ -307,19 +309,20 @@ export default { </script> <template> - <section class="media-section" data-testid="widget-extension"> - <div + <section + class="media-section" + data-testid="widget-extension" + data-qa-selector="mr_widget_extension" + > + <state-container + :mr="mr" + :status="statusIconName" + :is-loading="isLoadingSummary" :class="{ 'gl-cursor-pointer': isCollapsible }" - class="media gl-p-5" + class="gl-p-5" @mousedown="onRowMouseDown" @mouseup="onRowMouseUp" > - <status-icon - :level="1" - :name="$options.label || $options.name" - :is-loading="isLoadingSummary" - :icon-name="statusIconName" - /> <div class="media-body gl-display-flex gl-flex-direction-row! gl-align-self-center" data-testid="widget-extension-top-level" @@ -352,12 +355,13 @@ export default { :icon="isCollapsed ? 'chevron-lg-down' : 'chevron-lg-up'" category="tertiary" data-testid="toggle-button" + data-qa-selector="toggle_button" size="small" @click="toggleCollapsed" /> </div> </div> - </div> + </state-container> <div v-if="!isCollapsed" class="mr-widget-grouped-section gl-relative" 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 1eccc7de660..52c9f047b76 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 @@ -62,7 +62,9 @@ export default { <strong v-else v-safe-html="generateText(data.header)"></strong> </div> <div class="gl-display-flex"> - <status-icon v-if="data.icon" :icon-name="data.icon.name" :size="12" class="gl-pl-0" /> + <div v-if="data.icon" class="report-block-child-icon gl-display-flex"> + <status-icon :icon-name="data.icon.name" :size="12" class="gl-m-auto" /> + </div> <div class="gl-w-full"> <div class="gl-display-flex gl-flex-nowrap"> <div class="gl-flex-wrap gl-display-flex gl-w-full"> @@ -109,6 +111,7 @@ export default { :modal-id="modalId" :level="3" data-testid="child-content" + data-qa-selector="child_content" @clickedAction="onClickedAction" /> </li> 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 dc748ba44f2..f9d0986d60d 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,18 +49,28 @@ export default { <div :class="[ $options.EXTENSION_ICON_CLASS[iconName], - { 'mr-widget-extension-icon gl-w-6': !isLoading && level === 1 }, + { 'gl-w-6': !isLoading && level === 1 }, { 'gl-p-2': isLoading || level === 1 }, ]" - class="gl-rounded-full gl-mr-3 gl-relative gl-p-2" + class="gl-mr-3 gl-p-2" > - <gl-loading-icon v-if="isLoading" size="sm" inline class="gl-display-block" /> - <gl-icon - v-else - :name="$options.EXTENSION_ICON_NAMES[iconName]" - :size="size" - :aria-label="iconAriaLabel" - class="gl-display-block" - /> + <div + class="gl-rounded-full gl-relative gl-display-flex" + :class="{ 'mr-widget-extension-icon': !isLoading && level === 1 }" + > + <div class="gl-absolute gl-top-half gl-left-50p gl-translate-x-n50 gl-display-flex gl-m-auto"> + <div class="gl-display-flex gl-m-auto gl-translate-y-n50"> + <gl-loading-icon v-if="isLoading" size="md" inline /> + <gl-icon + v-else + :name="$options.EXTENSION_ICON_NAMES[iconName]" + :size="size" + :aria-label="iconAriaLabel" + :data-qa-selector="`status_${iconName}_icon`" + class="gl-display-block" + /> + </div> + </div> + </div> </div> </template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/telemetry.js b/app/assets/javascripts/vue_merge_request_widget/components/extensions/telemetry.js index bc84459e298..d67ff11f297 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/telemetry.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/telemetry.js @@ -24,7 +24,7 @@ const nonStandardEvents = { }, issues: { uniqueUser: { - expand: ['i_testing_load_performance_widget_total'], + expand: ['i_testing_issues_widget_total'], }, counter: {}, }, |