Merge branch 'ph/341043/mrWidgetExtensionLevel2Icons' into 'master'

Adds support for level 2-3 general icons

See merge request gitlab-org/gitlab!71397

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

 <script>
-import { GlButton, GlLoadingIcon, GlIcon, GlLink, GlBadge, GlSafeHtmlDirective } from '@gitlab/ui';
+import { GlButton, GlLoadingIcon, GlLink, GlBadge, GlSafeHtmlDirective } from '@gitlab/ui';
 import SmartVirtualList from '~/vue_shared/components/smart_virtual_list.vue';
 import { EXTENSION_ICON_CLASS } from '../../constants';
 import StatusIcon from './status_icon.vue';
@@ -14,7 +14,6 @@ export default {
   components: {
     GlButton,
     GlLoadingIcon,
-    GlIcon,
     GlLink,
     GlBadge,
     SmartVirtualList,
@@ -139,9 +138,7 @@ export default {
         class="report-block-container"
       >
         <li v-for="data in fullData" :key="data.id" class="d-flex align-items-center">
-          <div v-if="data.icon" :class="data.icon.class" class="d-flex">
-            <gl-icon :name="data.icon.name" :size="24" />
-          </div>
+          <status-icon v-if="data.icon" :icon-name="data.icon.name" :size="12" />
           <div
             class="gl-mt-2 gl-mb-2 align-content-around align-items-start flex-wrap align-self-center d-flex"
           >

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

 <script>
 import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
-import { EXTENSION_ICON_CLASS, EXTENSION_ICONS } from '../../constants';
+import { EXTENSION_ICON_CLASS, EXTENSION_ICON_NAMES } from '../../constants';
 
 export default {
   components: {
@@ -11,41 +11,48 @@ export default {
   props: {
     name: {
       type: String,
-      required: true,
+      required: false,
+      default: '',
     },
     isLoading: {
       type: Boolean,
-      required: true,
+      required: false,
+      default: false,
     },
     iconName: {
       type: String,
       required: false,
       default: null,
     },
+    size: {
+      type: Number,
+      required: false,
+      default: 16,
+    },
   },
   computed: {
     iconAriaLabel() {
-      const statusLabel = Object.keys(EXTENSION_ICONS).find(
-        (k) => EXTENSION_ICONS[k] === this.iconName,
-      );
-
-      return `${capitalizeFirstCharacter(statusLabel)} ${this.name}`;
+      return `${capitalizeFirstCharacter(this.iconName)} ${this.name}`;
     },
   },
+  EXTENSION_ICON_NAMES,
   EXTENSION_ICON_CLASS,
 };
 </script>
 
 <template>
   <div
-    :class="[$options.EXTENSION_ICON_CLASS[iconName], { 'mr-widget-extension-icon': !isLoading }]"
+    :class="[
+      $options.EXTENSION_ICON_CLASS[iconName],
+      { 'mr-widget-extension-icon': !isLoading && size === 16 },
+    ]"
     class="align-self-center gl-rounded-full gl-mr-3 gl-relative gl-p-2"
   >
     <gl-loading-icon v-if="isLoading" size="md" inline class="gl-display-block" />
     <gl-icon
       v-else
-      :name="iconName"
-      :size="16"
+      :name="$options.EXTENSION_ICON_NAMES[iconName]"
+      :size="size"
       :aria-label="iconAriaLabel"
       class="gl-display-block"
     />

app/assets/javascripts/vue_merge_request_widget/constants.js

@@ -93,17 +93,30 @@ export const stateToComponentMap = {
 };
 
 export const EXTENSION_ICONS = {
+  failed: 'failed',
+  warning: 'warning',
+  success: 'success',
+  neutral: 'neutral',
+  error: 'error',
+  notice: 'notice',
+};
+
+export const EXTENSION_ICON_NAMES = {
   failed: 'status-failed',
   warning: 'status-alert',
   success: 'status-success',
   neutral: 'status-neutral',
+  error: 'status-alert',
+  notice: 'status-alert',
 };
 
 export const EXTENSION_ICON_CLASS = {
-  [EXTENSION_ICONS.failed]: 'gl-text-red-500',
-  [EXTENSION_ICONS.warning]: 'gl-text-orange-500',
-  [EXTENSION_ICONS.success]: 'gl-text-green-500',
-  [EXTENSION_ICONS.neutral]: 'gl-text-gray-400',
+  failed: 'gl-text-red-500',
+  warning: 'gl-text-orange-500',
+  success: 'gl-text-green-500',
+  neutral: 'gl-text-gray-400',
+  error: 'gl-text-red-500',
+  notice: 'gl-text-gray-500',
 };
 
 export { STATE_MACHINE };

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

@@ -45,10 +45,7 @@ export default {
             // Icon to get rendered on the side of each row
             icon: {
               // Required: Name maps to an icon in GitLabs SVG
-              name:
-                issue.state === 'closed' ? 'status_failed_borderless' : 'status_success_borderless',
-              // Optional: An extra class to be added to the icon for additional styling
-              class: issue.state === 'closed' ? 'text-danger' : 'text-success',
+              name: issue.state === 'closed' ? EXTENSION_ICONS.error : EXTENSION_ICONS.success,
             },
             // Badges get rendered next to the text on each row
             badge: issue.state === 'closed' && {

spec/frontend/vue_mr_widget/components/extensions/status_icon_spec.js

@@ -16,20 +16,20 @@ describe('MR widget extensions status icon', () => {
   });
 
   it('renders loading icon', () => {
-    factory({ name: 'test', isLoading: true, iconName: 'status-failed' });
+    factory({ name: 'test', isLoading: true, iconName: 'failed' });
 
     expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
   });
 
   it('renders status icon', () => {
-    factory({ name: 'test', isLoading: false, iconName: 'status-failed' });
+    factory({ name: 'test', isLoading: false, iconName: 'failed' });
 
     expect(wrapper.findComponent(GlIcon).exists()).toBe(true);
     expect(wrapper.findComponent(GlIcon).props('name')).toBe('status-failed');
   });
 
   it('sets aria-label for status icon', () => {
-    factory({ name: 'test', isLoading: false, iconName: 'status-failed' });
+    factory({ name: 'test', isLoading: false, iconName: 'failed' });
 
     expect(wrapper.findComponent(GlIcon).props('ariaLabel')).toBe('Failed test');
   });

spec/frontend/vue_mr_widget/mr_widget_options_spec.js

@@ -919,7 +919,7 @@ describe('MrWidgetOptions', () => {
 
       // Renders icon in the row
       expect(collapsedSection.find(GlIcon).exists()).toBe(true);
-      expect(collapsedSection.find(GlIcon).props('name')).toBe('status_failed_borderless');
+      expect(collapsedSection.find(GlIcon).props('name')).toBe('status-failed');
 
       // Renders badge in the row
       expect(collapsedSection.find(GlBadge).exists()).toBe(true);

spec/frontend/vue_mr_widget/test_extension.js

@@ -21,8 +21,7 @@ export default {
           id: 1,
           text: 'Hello world',
           icon: {
-            name: 'status_failed_borderless',
-            class: 'text-danger',
+            name: EXTENSION_ICONS.failed,
           },
           badge: {
             text: 'Closed',