Fixed loading text in MR extensions

Closes https://gitlab.com/gitlab-org/gitlab/-/issues/342645

app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue

@@ -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"
         >

app/assets/javascripts/vue_merge_request_widget/components/extensions/index.js

@@ -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) => ({

app/assets/javascripts/vue_merge_request_widget/extensions/issues.js

@@ -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',
+  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'],

ee/app/assets/javascripts/vue_merge_request_widget/extensions/browser_performance/index.js

@@ -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;

ee/app/assets/javascripts/vue_merge_request_widget/extensions/load_performance/index.js

@@ -5,7 +5,10 @@ import { EXTENSION_ICONS } from '~/vue_merge_request_widget/constants';
 
 export default {
   name: 'WidgetLoadPerformance',
+  i18n: {
     label: s__('ciReport|Load Performance'),
+    loading: s__('ciReport|Load performance test metrics results are being parsed'),
+  },
   props: ['loadPerformance'],
   computed: {
     summary() {

ee/spec/frontend/vue_mr_widget/extensions/browser_performance/index_spec.js

@@ -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);

ee/spec/frontend/vue_mr_widget/extensions/load_performance/index_spec.js

@@ -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);

locale/gitlab.pot

@@ -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 ""