diff --git a/app/assets/javascripts/vue_shared/components/notes/system_note.vue b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
index 81cbbf951ad01d0f1058f7f093b967a40f4ca53f..abebdb84c1784d71bc8a5bd22fd9bbfdc601b719 100644
--- a/app/assets/javascripts/vue_shared/components/notes/system_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
@@ -30,12 +30,10 @@ import { renderGFM } from '~/behaviors/markdown/render_gfm';
import TimelineEntryItem from './timeline_entry_item.vue';
const MAX_VISIBLE_COMMIT_LIST_COUNT = 3;
-const MR_ICON_COLORS = {
+const ICON_COLORS = {
check: 'gl-bg-green-100 gl-text-green-700',
'merge-request-close': 'gl-bg-red-100 gl-text-red-700',
merge: 'gl-bg-blue-100 gl-text-blue-700',
-};
-const ICON_COLORS = {
'issue-close': 'gl-bg-blue-100 gl-text-blue-700',
};
@@ -76,6 +74,9 @@ export default {
noteAnchorId() {
return `note_${this.note.id}`;
},
+ isAllowedIcon() {
+ return Object.keys(ICON_COLORS).includes(this.note.system_note_icon_name);
+ },
isTargetNote() {
return this.targetNoteHash === this.noteAnchorId;
},
@@ -95,15 +96,8 @@ export default {
isMergeRequest() {
return this.getNoteableData.noteableType === 'MergeRequest';
},
- hasIconColors() {
- if (!this.isMergeRequest) return true;
-
- return this.isMergeRequest && MR_ICON_COLORS[this.note.system_note_icon_name];
- },
iconBgClass() {
- const colors = this.isMergeRequest ? MR_ICON_COLORS : ICON_COLORS;
-
- return colors[this.note.system_note_icon_name] || 'gl-bg-gray-50 gl-text-gray-600';
+ return ICON_COLORS[this.note.system_note_icon_name] || 'gl-bg-gray-50 gl-text-gray-600';
},
},
mounted() {
@@ -140,17 +134,16 @@ export default {
:class="[
iconBgClass,
{
- 'mr-system-note-empty gl-bg-gray-900!': !hasIconColors,
- 'gl-w-6 gl-h-6 gl-mt-n1 gl-ml-2': !isMergeRequest,
- 'mr-system-note-icon': isMergeRequest,
+ 'system-note-icon': isAllowedIcon,
+ 'system-note-tiny-dot gl-bg-gray-900!': !isAllowedIcon,
},
]"
class="gl-float-left gl--flex-center gl-rounded-full gl-relative timeline-icon"
>
diff --git a/app/assets/stylesheets/page_bundles/issuable.scss b/app/assets/stylesheets/page_bundles/issuable.scss
index 07614c5271a6518985d27269fb5380d8502e8543..93aa156d96ab29a1ffeb6219127235f25cb7b909 100644
--- a/app/assets/stylesheets/page_bundles/issuable.scss
+++ b/app/assets/stylesheets/page_bundles/issuable.scss
@@ -156,3 +156,61 @@
@include gl-font-weight-normal;
}
}
+
+.system-note-tiny-dot {
+ width: 8px;
+ height: 8px;
+ margin-top: 6px;
+ margin-left: 12px;
+ margin-right: 8px;
+ border: 2px solid var(--gray-50, $gray-50);
+}
+
+
+.system-note-icon {
+ width: 20px;
+ height: 20px;
+ margin-left: 6px;
+
+ &.gl-bg-green-100 {
+ --bg-color: var(--green-100, #{$green-100});
+ }
+
+ &.gl-bg-red-100 {
+ --bg-color: var(--red-100, #{$red-100});
+ }
+
+ &.gl-bg-blue-100 {
+ --bg-color: var(--blue-100, #{$blue-100});
+ }
+}
+
+.system-note-icon:not(.mr-system-note-empty)::before {
+ content: '';
+ display: block;
+ position: absolute;
+ left: calc(50% - 1px);
+ bottom: 100%;
+ width: 2px;
+ height: 20px;
+ background: linear-gradient(to bottom, transparent, var(--bg-color));
+
+ .system-note:first-child & {
+ display: none;
+ }
+}
+
+.system-note-icon:not(.mr-system-note-empty)::after {
+ content: '';
+ display: block;
+ position: absolute;
+ left: calc(50% - 1px);
+ top: 100%;
+ width: 2px;
+ height: 20px;
+ background: linear-gradient(to bottom, var(--bg-color), transparent);
+
+ .system-note:last-child & {
+ display: none;
+ }
+}
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index 3b97ab2cc4fab95d8a30aac53f241995759c9005..8027ffb1968141531c29def53438da7a373d278c 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -1194,63 +1194,6 @@ $tabs-holder-z-index: 250;
}
}
-.mr-system-note-icon {
- width: 20px;
- height: 20px;
- margin-left: 6px;
-
- &.gl-bg-green-100 {
- --bg-color: var(--green-100, #{$green-100});
- }
-
- &.gl-bg-red-100 {
- --bg-color: var(--red-100, #{$red-100});
- }
-
- &.gl-bg-blue-100 {
- --bg-color: var(--blue-100, #{$blue-100});
- }
-}
-
-.mr-system-note-icon:not(.mr-system-note-empty)::before {
- content: '';
- display: block;
- position: absolute;
- left: calc(50% - 1px);
- bottom: 100%;
- width: 2px;
- height: 20px;
- background: linear-gradient(to bottom, transparent, var(--bg-color));
-
- .system-note:first-child & {
- display: none;
- }
-}
-
-.mr-system-note-icon:not(.mr-system-note-empty)::after {
- content: '';
- display: block;
- position: absolute;
- left: calc(50% - 1px);
- top: 100%;
- width: 2px;
- height: 20px;
- background: linear-gradient(to bottom, var(--bg-color), transparent);
-
- .system-note:last-child & {
- display: none;
- }
-}
-
-.mr-system-note-empty {
- width: 8px;
- height: 8px;
- margin-top: 6px;
- margin-left: 12px;
- margin-right: 8px;
- border: 2px solid var(--gray-50, $gray-50);
-}
-
.diff-file-discussions-wrapper {
@include gl-w-full;
diff --git a/spec/frontend/vue_shared/components/notes/system_note_spec.js b/spec/frontend/vue_shared/components/notes/system_note_spec.js
index 7f3912dcadb6835b43b5e8673e041421a7588c6d..ade97290004508aab04526d591e61438a1142576 100644
--- a/spec/frontend/vue_shared/components/notes/system_note_spec.js
+++ b/spec/frontend/vue_shared/components/notes/system_note_spec.js
@@ -61,10 +61,16 @@ describe('system note component', () => {
expect(vm.classes()).toContain('target');
});
- it('should render svg icon', () => {
+ it('should render svg icon only for certain icons', () => {
+ const ALLOWED_ICONS = ['check', 'merge', 'merge-request-close', 'issue-close'];
createComponent(props);
- expect(vm.find('[data-testid="timeline-icon"]').exists()).toBe(true);
+ expect(vm.find('[data-testid="timeline-icon"]').exists()).toBe(false);
+
+ ALLOWED_ICONS.forEach((icon) => {
+ createComponent({ note: { ...props.note, system_note_icon_name: icon } });
+ expect(vm.find('[data-testid="timeline-icon"]').exists()).toBe(true);
+ });
});
// Redcarpet Markdown renderer wraps text in `` tags