Commit f71bd4e2 authored by Phil Hughes's avatar Phil Hughes

Fixed loading text in MR extensions

Closes https://gitlab.com/gitlab-org/gitlab/-/issues/342645
parent 026d483d
......@@ -7,7 +7,7 @@ import {
GlSafeHtmlDirective,
GlTooltipDirective,
} from '@gitlab/ui';
import { sprintf, s__ } from '~/locale';
import { sprintf, s__, __ } from '~/locale';
import SmartVirtualList from '~/vue_shared/components/smart_virtual_list.vue';
import { EXTENSION_ICON_CLASS } from '../../constants';
import StatusIcon from './status_icon.vue';
......@@ -42,6 +42,12 @@ export default {
};
},
computed: {
widgetLabel() {
return this.$options.i18n?.label || this.$options.name;
},
widgetLoadingText() {
return this.$options.i18n?.loading || __('Loading...');
},
isLoadingSummary() {
return this.loadingState === LOADING_STATES.collapsedLoading;
},
......@@ -60,7 +66,7 @@ export default {
this.isCollapsed
? s__('mrWidget|Show %{widget} details')
: s__('mrWidget|Hide %{widget} details'),
{ widget: this.$options.label || this.$options.name },
{ widget: this.widgetLabel },
);
},
statusIconName() {
......@@ -119,24 +125,15 @@ export default {
<template>
<section class="media-section" data-testid="widget-extension">
<div class="media gl-p-5">
<status-icon
:name="$options.label || $options.name"
:is-loading="isLoadingSummary"
:icon-name="statusIconName"
/>
<status-icon :name="widgetLabel" :is-loading="isLoadingSummary" :icon-name="statusIconName" />
<div
class="media-body gl-display-flex gl-align-self-center gl-align-items-center gl-flex-direction-row!"
>
<div class="gl-flex-grow-1">
<template v-if="isLoadingSummary">
{{ __('Loading...') }}
</template>
<template v-if="isLoadingSummary">{{ widgetLoadingText }}</template>
<div v-else v-safe-html="summary(collapsedData)"></div>
</div>
<actions
:widget="$options.label || $options.name"
:tertiary-buttons="tertiaryActionsButtons"
/>
<actions :widget="widgetLabel" :tertiary-buttons="tertiaryActionsButtons" />
<div
class="gl-float-right gl-align-self-center gl-border-l-1 gl-border-l-solid gl-border-gray-100 gl-ml-3 gl-pl-3"
>
......
......@@ -11,6 +11,7 @@ export const registerExtension = (extension) => {
extends: ExtensionBase,
name: extension.name,
props: extension.props,
i18n: extension.i18n,
computed: {
...Object.keys(extension.computed).reduce(
(acc, computedKey) => ({
......
......@@ -6,8 +6,11 @@ import issuesQuery from './issues.query.graphql';
export default {
// Give the extension a name
// Make it easier to track in Vue dev tools
name: 'Issues',
label: 'Issues',
name: 'WidgetIssues',
i18n: {
label: 'Issues',
loading: 'Loading issues...',
},
// Add an array of props
// These then get mapped to values stored in the MR Widget store
props: ['targetProjectFullPath', 'conflictsDocsPath'],
......
......@@ -6,6 +6,10 @@ import { EXTENSION_ICONS } from '~/vue_merge_request_widget/constants';
export default {
name: 'WidgetBrowserPerformance',
props: ['browserPerformance'],
i18n: {
label: s__('ciReport|Browser Performance'),
loading: s__('ciReport|Browser performance test metrics results are being parsed'),
},
computed: {
summary() {
const { improved, degraded, same } = this.collapsedData;
......
......@@ -5,7 +5,10 @@ import { EXTENSION_ICONS } from '~/vue_merge_request_widget/constants';
export default {
name: 'WidgetLoadPerformance',
label: s__('ciReport|Load Performance'),
i18n: {
label: s__('ciReport|Load Performance'),
loading: s__('ciReport|Load performance test metrics results are being parsed'),
},
props: ['loadPerformance'],
computed: {
summary() {
......
......@@ -40,6 +40,17 @@ describe('Browser performance extension', () => {
});
describe('summary', () => {
it('should render loading text', async () => {
mock.onGet(DEFAULT_BROWSER_PERFORMANCE.head_path).reply(200, headBrowserPerformance);
mock.onGet(DEFAULT_BROWSER_PERFORMANCE.base_path).reply(200, baseBrowserPerformance);
registerExtension(browserPerformanceExtension);
await nextTick();
expect(wrapper.text()).toContain('Browser performance test metrics results are being parsed');
});
it('should render info', async () => {
mock.onGet(DEFAULT_BROWSER_PERFORMANCE.head_path).reply(200, headBrowserPerformance);
mock.onGet(DEFAULT_BROWSER_PERFORMANCE.base_path).reply(200, baseBrowserPerformance);
......
......@@ -40,6 +40,17 @@ describe('Load performance extension', () => {
});
describe('summary', () => {
it('should render loading text', async () => {
mock.onGet(DEFAULT_LOAD_PERFORMANCE.head_path).reply(200, headLoadPerformance);
mock.onGet(DEFAULT_LOAD_PERFORMANCE.base_path).reply(200, baseLoadPerformance);
registerExtension(loadPerformanceExtension);
await nextTick();
expect(wrapper.text()).toContain('Load performance test metrics results are being parsed');
});
it('should render info about all issues', async () => {
mock.onGet(DEFAULT_LOAD_PERFORMANCE.head_path).reply(200, headLoadPerformance);
mock.onGet(DEFAULT_LOAD_PERFORMANCE.base_path).reply(200, baseLoadPerformance);
......
......@@ -39784,6 +39784,12 @@ msgstr ""
msgid "ciReport|Base pipeline codequality artifact not found"
msgstr ""
msgid "ciReport|Browser Performance"
msgstr ""
msgid "ciReport|Browser performance test metrics results are being parsed"
msgstr ""
msgid "ciReport|Browser performance test metrics: "
msgstr ""
......@@ -39875,6 +39881,9 @@ msgid_plural "ciReport|Load performance test metrics detected %{strongStart}%{ch
msgstr[0] ""
msgstr[1] ""
msgid "ciReport|Load performance test metrics results are being parsed"
msgstr ""
msgid "ciReport|Load performance test metrics: "
msgstr ""
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment