Automatic merge of gitlab-org/gitlab master

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' && {

doc/development/testing_guide/frontend_testing.md

@@ -146,7 +146,7 @@ it('does not display a dropdown if no metricTypes exist', () => {
 });
 ```
 
-Keep an eye out for these kinds of tests, as they just make updating logic more fragile and tedious than it needs to be. This is also true for other libraries. A rule of thumb here is: if you are checking a `wrapper.vm` property, you should probably stop and rethink the test to check the rendered template instead.
+Keep an eye out for these kinds of tests, as they just make updating logic more fragile and tedious than it needs to be. This is also true for other libraries. A suggestion here is: if you are checking a `wrapper.vm` property, you should probably stop and rethink the test to check the rendered template instead.
 
 Some more examples can be found in the [Frontend unit tests section](testing_levels.md#frontend-unit-tests)
 

ee/app/assets/stylesheets/framework/badges.scss

 .badge.compliance-framework-pill {
   border-radius: $label-border-radius;
-  color: $gray-light;
   display: inline-block;
   font-size: $gl-font-size-sm;
   font-weight: $gl-font-weight-normal;

ee/app/views/compliance_management/compliance_framework/_compliance_framework_badge.html.haml

@@ -3,5 +3,5 @@
 - if show_compliance_framework_badge?(project)
   - framework = project.compliance_framework_setting.compliance_management_framework
 
-  %span.badge.compliance-framework-pill.ml-2.has-tooltip{ style: "background-color: #{framework.color}", data: { container: 'body' }, title: framework.description }
+  %span.badge.compliance-framework-pill.ml-2.has-tooltip{ style: "background-color: #{framework.color}", class: text_color_class_for_bg(framework.color), data: { container: 'body' }, title: framework.description }
     = framework.name

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',