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 bd531f0cc8458af088b70b5477f4e4ec377d7c87..24f1c9c5bd0deb07e9096ead366c1953d5bd155e 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
@@ -1,5 +1,5 @@
<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"
>
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 5b41decc1908c5c05f4b930d1a26abd8c9d27e3e..5e3f7a847c1c295aee1080b1a80d344f7c8a116a 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
@@ -1,7 +1,7 @@
<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"
/>
diff --git a/app/assets/javascripts/vue_merge_request_widget/constants.js b/app/assets/javascripts/vue_merge_request_widget/constants.js
index c02783be3851bc00dd33362766ff707c0916beac..284c18b3fbd234c2daaf4a4e0160530d889e8a1d 100644
--- a/app/assets/javascripts/vue_merge_request_widget/constants.js
+++ b/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 };
diff --git a/app/assets/javascripts/vue_merge_request_widget/extensions/issues.js b/app/assets/javascripts/vue_merge_request_widget/extensions/issues.js
index 5eda5c0778fd1b6aefe0646dd24e7d7361fd95f7..3a07bd0c0fb9aabc05f05bc079cd6b9304de94f4 100644
--- a/app/assets/javascripts/vue_merge_request_widget/extensions/issues.js
+++ b/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' && {
diff --git a/spec/frontend/vue_mr_widget/components/extensions/status_icon_spec.js b/spec/frontend/vue_mr_widget/components/extensions/status_icon_spec.js
index 84fd3c7eb2189155eee4180667cb763a33488d7f..f3aa5bb774f2392f3e07718a10afb759d4fc9549 100644
--- a/spec/frontend/vue_mr_widget/components/extensions/status_icon_spec.js
+++ b/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');
});
diff --git a/spec/frontend/vue_mr_widget/mr_widget_options_spec.js b/spec/frontend/vue_mr_widget/mr_widget_options_spec.js
index a474c34af4194bf04afffcc2ed393c45ab27d534..5aba6982886678fe784b60e1d5609e81fb7370db 100644
--- a/spec/frontend/vue_mr_widget/mr_widget_options_spec.js
+++ b/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);
diff --git a/spec/frontend/vue_mr_widget/test_extension.js b/spec/frontend/vue_mr_widget/test_extension.js
index ba354403f2d7736d0bc7a9ab3454ee92af2f8568..a29a4d2fb464fe423c77908a75f31341426e168c 100644
--- a/spec/frontend/vue_mr_widget/test_extension.js
+++ b/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',