From 88404ad579fa6ca07f5a2e8b860bcb9516477421 Mon Sep 17 00:00:00 2001
From: Stanislav Lashmanov <slashmanov@gitlab.com>
Date: Thu, 27 Nov 2025 17:30:43 +0400
Subject: [PATCH 1/4] Migrate system_note.vue component in Rapid Diffs
 discussions

---
 .../app/discussions/discussion_notes.vue      |  5 +-
 .../app/discussions/note_author.vue           | 35 +++++++++
 .../app/discussions/note_header.vue           | 17 +----
 .../app/discussions/system_note.vue           | 62 ++++++++++++++++
 .../app/discussions/discussion_notes_spec.js  | 12 ----
 .../app/discussions/note_author_spec.js       | 72 +++++++++++++++++++
 .../app/discussions/note_header_spec.js       | 33 +--------
 .../app/discussions/system_note_spec.js       | 31 ++++++++
 8 files changed, 208 insertions(+), 59 deletions(-)
 create mode 100644 app/assets/javascripts/rapid_diffs/app/discussions/note_author.vue
 create mode 100644 app/assets/javascripts/rapid_diffs/app/discussions/system_note.vue
 create mode 100644 spec/frontend/rapid_diffs/app/discussions/note_author_spec.js
 create mode 100644 spec/frontend/rapid_diffs/app/discussions/system_note_spec.js

diff --git a/app/assets/javascripts/rapid_diffs/app/discussions/discussion_notes.vue b/app/assets/javascripts/rapid_diffs/app/discussions/discussion_notes.vue
index 7a81950d5392c8..35ed20d1dd5702 100644
--- a/app/assets/javascripts/rapid_diffs/app/discussions/discussion_notes.vue
+++ b/app/assets/javascripts/rapid_diffs/app/discussions/discussion_notes.vue
@@ -1,13 +1,12 @@
 <script>
 import ToggleRepliesWidget from '~/notes/components/toggle_replies_widget.vue';
+import SystemNote from './system_note.vue';
 import NoteableNote from './noteable_note.vue';
 
 export default {
   name: 'DiscussionNotes',
   components: {
-    // System note is not migrated yet since we don't need it
-    // Refactor this to static import once the component is migrated
-    SystemNote: () => import('~/vue_shared/components/notes/system_note.vue'),
+    SystemNote,
     NoteableNote,
     ToggleRepliesWidget,
   },
diff --git a/app/assets/javascripts/rapid_diffs/app/discussions/note_author.vue b/app/assets/javascripts/rapid_diffs/app/discussions/note_author.vue
new file mode 100644
index 00000000000000..72071267d922da
--- /dev/null
+++ b/app/assets/javascripts/rapid_diffs/app/discussions/note_author.vue
@@ -0,0 +1,35 @@
+<script>
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+
+export default {
+  name: 'NoteAuthor',
+  props: {
+    author: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    authorId() {
+      return getIdFromGraphQLId(this.author.id);
+    },
+  },
+};
+</script>
+
+<template>
+  <a
+    :href="author.path || author.webUrl"
+    class="js-user-link gl-overflow-hidden gl-break-words gl-text-default hover:gl-text-link focus:gl-focus"
+    :data-user-id="authorId"
+    :data-username="author.username"
+  >
+    <span class="gl-font-bold" data-testid="author-name" v-text="author.name"></span
+    ><span
+      class="gl-ml-2 gl-inline-block gl-max-w-full gl-truncate gl-whitespace-nowrap gl-align-bottom @max-sm/discussion:gl-hidden"
+    >
+      <span v-if="author.username" class="gl-text-subtle">@{{ author.username }}</span>
+      <slot name="note-header-info"></slot>
+    </span>
+  </a>
+</template>
diff --git a/app/assets/javascripts/rapid_diffs/app/discussions/note_header.vue b/app/assets/javascripts/rapid_diffs/app/discussions/note_header.vue
index 0563bf483c1c51..828fda253442e4 100644
--- a/app/assets/javascripts/rapid_diffs/app/discussions/note_header.vue
+++ b/app/assets/javascripts/rapid_diffs/app/discussions/note_header.vue
@@ -4,6 +4,7 @@ import { isGid, getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { s__ } from '~/locale';
 import ImportedBadge from '~/vue_shared/components/imported_badge.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import NoteAuthor from './note_author.vue';
 
 export default {
   name: 'NoteHeader',
@@ -14,6 +15,7 @@ export default {
     GlLoadingIcon,
     GlAvatarLink,
     GlAvatar,
+    NoteAuthor,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -98,20 +100,7 @@ export default {
           <slot name="avatar-badge"></slot>
         </gl-avatar-link>
       </span>
-      <a
-        :href="author.path || author.webUrl"
-        class="js-user-link gl-overflow-hidden gl-break-words gl-text-default hover:gl-text-link focus:gl-focus"
-        :data-user-id="authorId"
-        :data-username="author.username"
-      >
-        <span class="gl-font-bold" data-testid="author-name" v-text="author.name"></span
-        ><span
-          class="gl-ml-2 gl-inline-block gl-max-w-full gl-truncate gl-whitespace-nowrap gl-align-bottom @max-sm/discussion:gl-hidden"
-        >
-          <span class="gl-text-subtle">@{{ author.username }}</span>
-          <slot name="note-header-info"></slot>
-        </span>
-      </a>
+      <note-author :author="author" />
     </template>
     <span v-else>{{ __('A deleted user') }}</span>
     <span class="gl-flex gl-flex-wrap gl-items-center gl-gap-1 gl-text-subtle">
diff --git a/app/assets/javascripts/rapid_diffs/app/discussions/system_note.vue b/app/assets/javascripts/rapid_diffs/app/discussions/system_note.vue
new file mode 100644
index 00000000000000..871d8d5f62da54
--- /dev/null
+++ b/app/assets/javascripts/rapid_diffs/app/discussions/system_note.vue
@@ -0,0 +1,62 @@
+<script>
+import SafeHtml from '~/vue_shared/directives/safe_html';
+import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
+import NoteAuthor from './note_author.vue';
+
+export default {
+  name: 'SystemNote',
+  components: {
+    NoteAuthor,
+    TimelineEntryItem,
+  },
+  directives: {
+    SafeHtml,
+  },
+  props: {
+    note: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <timeline-entry-item :id="`note_${note.id}`">
+    <div class="gl-flex gl-gap-6 gl-px-6">
+      <div
+        class="gl-relative gl-top-[calc(0.5em-1px)] gl-h-3 gl-w-3 gl-rounded-full gl-border-2 gl-border-solid gl-border-subtle gl-bg-[var(--gl-status-neutral-icon-color)] gl-text-subtle"
+      ></div>
+      <div class="gl-flex gl-flex-wrap gl-gap-3">
+        <note-author v-if="note.author" :author="note.author" />
+        <span v-else>{{ __('A deleted user') }}</span>
+        <div
+          v-safe-html="note.note_html"
+          class="system-note-message gl-inline gl-overflow-hidden gl-break-words"
+          data-testid="system-note-content"
+        ></div>
+      </div>
+    </div>
+  </timeline-entry-item>
+</template>
+
+<style>
+.system-note-message {
+  p {
+    display: inline;
+    margin: 0;
+  }
+
+  a {
+    @apply gl-text-link;
+  }
+
+  .gfm-project_member {
+    color: var(--gl-link-mention-text-color-default);
+
+    &.current-user {
+      color: var(--gl-link-mention-text-color-current);
+    }
+  }
+}
+</style>
diff --git a/spec/frontend/rapid_diffs/app/discussions/discussion_notes_spec.js b/spec/frontend/rapid_diffs/app/discussions/discussion_notes_spec.js
index 6196ca0b6edf4b..09fdc64fcd85ef 100644
--- a/spec/frontend/rapid_diffs/app/discussions/discussion_notes_spec.js
+++ b/spec/frontend/rapid_diffs/app/discussions/discussion_notes_spec.js
@@ -5,15 +5,6 @@ import NoteableNote from '~/rapid_diffs/app/discussions/noteable_note.vue';
 import SystemNote from '~/vue_shared/components/notes/system_note.vue';
 import ToggleRepliesWidget from '~/notes/components/toggle_replies_widget.vue';
 
-jest.mock('~/vue_shared/components/notes/system_note.vue', () => {
-  return {
-    props: jest.requireActual('~/vue_shared/components/notes/system_note.vue').default.props,
-    render() {
-      return null;
-    },
-  };
-});
-
 describe('DiscussionNotes', () => {
   let wrapper;
 
@@ -28,9 +19,6 @@ describe('DiscussionNotes', () => {
       propsData,
       provide: merge(defaultProvisions, provide),
       scopedSlots,
-      stubs: {
-        SystemNote,
-      },
     });
   };
 
diff --git a/spec/frontend/rapid_diffs/app/discussions/note_author_spec.js b/spec/frontend/rapid_diffs/app/discussions/note_author_spec.js
new file mode 100644
index 00000000000000..45350e12212a44
--- /dev/null
+++ b/spec/frontend/rapid_diffs/app/discussions/note_author_spec.js
@@ -0,0 +1,72 @@
+import { shallowMount } from '@vue/test-utils';
+import NoteAuthor from '~/rapid_diffs/app/discussions/note_author.vue';
+
+describe('NoteAuthor', () => {
+  let wrapper;
+
+  const createComponent = (props = {}, slots = {}) => {
+    wrapper = shallowMount(NoteAuthor, {
+      propsData: props,
+      slots,
+    });
+  };
+
+  const findAuthorLink = () => wrapper.find('a');
+
+  it('renders link with author path', () => {
+    const author = {
+      id: 'gid://gitlab/User/123',
+      name: 'John Doe',
+      username: 'johndoe',
+      path: '/johndoe',
+    };
+    createComponent({ author });
+
+    const link = findAuthorLink();
+    expect(link.exists()).toBe(true);
+    expect(link.attributes('href')).toBe('/johndoe');
+    expect(link.text()).toBe('John Doe@johndoe');
+    expect(link.attributes('data-user-id')).toBe('123');
+    expect(link.attributes('data-username')).toBe('johndoe');
+  });
+
+  it('skips username when not present', () => {
+    const author = {
+      id: 'gid://gitlab/User/123',
+      name: 'John Doe',
+      username: undefined,
+      path: '/johndoe',
+    };
+    createComponent({ author });
+
+    const link = findAuthorLink();
+    expect(link.text()).toBe('John Doe');
+  });
+
+  it('uses webUrl when path is not available', () => {
+    const author = {
+      id: 'gid://gitlab/User/123',
+      name: 'John Doe',
+      username: 'johndoe',
+      webUrl: 'https://example.com/johndoe',
+    };
+    createComponent({ author });
+
+    expect(findAuthorLink().attributes('href')).toBe('https://example.com/johndoe');
+  });
+
+  it('renders note-header-info slot content', () => {
+    const author = {
+      id: 'gid://gitlab/User/123',
+      name: 'John Doe',
+      username: 'johndoe',
+      path: '/johndoe',
+    };
+    createComponent(
+      { author },
+      { 'note-header-info': '<span class="custom-info">Custom Info</span>' },
+    );
+
+    expect(wrapper.html()).toContain('Custom Info');
+  });
+});
diff --git a/spec/frontend/rapid_diffs/app/discussions/note_header_spec.js b/spec/frontend/rapid_diffs/app/discussions/note_header_spec.js
index 5338401bfa5003..8036c848172f1f 100644
--- a/spec/frontend/rapid_diffs/app/discussions/note_header_spec.js
+++ b/spec/frontend/rapid_diffs/app/discussions/note_header_spec.js
@@ -3,6 +3,7 @@ import { GlAvatar, GlAvatarLink, GlBadge, GlLoadingIcon } from '@gitlab/ui';
 import NoteHeader from '~/rapid_diffs/app/discussions/note_header.vue';
 import ImportedBadge from '~/vue_shared/components/imported_badge.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import NoteAuthor from '~/rapid_diffs/app/discussions/note_author.vue';
 
 describe('NoteHeader', () => {
   let wrapper;
@@ -42,7 +43,7 @@ describe('NoteHeader', () => {
       });
     });
 
-    it('shows author name and username', () => {
+    it('shows author', () => {
       const author = {
         id: 'gid://gitlab/User/123',
         name: 'John Doe',
@@ -50,35 +51,7 @@ describe('NoteHeader', () => {
         path: '/johndoe',
       };
       createComponent({ author });
-      const authorLink = findAuthorLink();
-      expect(authorLink.exists()).toBe(true);
-      expect(authorLink.attributes('href')).toBe('/johndoe');
-      expect(authorLink.attributes('data-user-id')).toBe('123');
-      expect(authorLink.attributes('data-username')).toBe('johndoe');
-      expect(authorLink.text()).toContain('John Doe');
-      expect(authorLink.text()).toContain('@johndoe');
-    });
-
-    it('uses webUrl when path is not available', () => {
-      const author = {
-        id: 'gid://gitlab/User/123',
-        name: 'John Doe',
-        username: 'johndoe',
-        webUrl: 'https://example.com/johndoe',
-      };
-      createComponent({ author });
-      expect(findAuthorLink().attributes('href')).toBe('https://example.com/johndoe');
-    });
-
-    it('shows username', () => {
-      const author = {
-        id: 'gid://gitlab/User/123',
-        name: 'John Doe',
-        username: 'johndoe',
-        path: '/johndoe',
-      };
-      createComponent({ author });
-      expect(wrapper.text()).toContain(author.username);
+      expect(wrapper.findComponent(NoteAuthor).props('author')).toStrictEqual(author);
     });
 
     it('shows deleted user message instead of user link when no author is provided', () => {
diff --git a/spec/frontend/rapid_diffs/app/discussions/system_note_spec.js b/spec/frontend/rapid_diffs/app/discussions/system_note_spec.js
new file mode 100644
index 00000000000000..ad69b5960958ad
--- /dev/null
+++ b/spec/frontend/rapid_diffs/app/discussions/system_note_spec.js
@@ -0,0 +1,31 @@
+import { shallowMount } from '@vue/test-utils';
+import SystemNote from '~/rapid_diffs/app/discussions/system_note.vue';
+import NoteAuthor from '~/rapid_diffs/app/discussions/note_author.vue';
+
+describe('SystemNote', () => {
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(SystemNote, {
+      propsData: props,
+    });
+  };
+
+  it('shows system message', () => {
+    const note = { note_html: '<p id="test">test</p>' };
+    createComponent({ note });
+    expect(wrapper.find('p#test').text()).toBe('test');
+  });
+
+  it('shows message author', () => {
+    const note = { note_html: 'test', author: { username: 'user' } };
+    createComponent({ note });
+    expect(wrapper.findComponent(NoteAuthor).props('author')).toStrictEqual(note.author);
+  });
+
+  it('shows deleted author', () => {
+    const note = { note_html: 'test' };
+    createComponent({ note });
+    expect(wrapper.text()).toContain('A deleted user');
+  });
+});
-- 
GitLab


From 5506201da4b91dfbf0745255215ef7a9508b23b1 Mon Sep 17 00:00:00 2001
From: Stanislav Lashmanov <slashmanov@gitlab.com>
Date: Fri, 28 Nov 2025 15:04:40 +0400
Subject: [PATCH 2/4] Remove unnecessary slot

---
 .../rapid_diffs/app/discussions/note_author.vue   |  7 +++----
 .../app/discussions/note_author_spec.js           | 15 ---------------
 2 files changed, 3 insertions(+), 19 deletions(-)

diff --git a/app/assets/javascripts/rapid_diffs/app/discussions/note_author.vue b/app/assets/javascripts/rapid_diffs/app/discussions/note_author.vue
index 72071267d922da..718f155a89e843 100644
--- a/app/assets/javascripts/rapid_diffs/app/discussions/note_author.vue
+++ b/app/assets/javascripts/rapid_diffs/app/discussions/note_author.vue
@@ -26,10 +26,9 @@ export default {
   >
     <span class="gl-font-bold" data-testid="author-name" v-text="author.name"></span
     ><span
-      class="gl-ml-2 gl-inline-block gl-max-w-full gl-truncate gl-whitespace-nowrap gl-align-bottom @max-sm/discussion:gl-hidden"
+      v-if="author.username"
+      class="gl-ml-2 gl-inline-block gl-max-w-full gl-truncate gl-whitespace-nowrap gl-align-bottom gl-text-subtle @max-sm/discussion:gl-hidden"
+      >@{{ author.username }}</span
     >
-      <span v-if="author.username" class="gl-text-subtle">@{{ author.username }}</span>
-      <slot name="note-header-info"></slot>
-    </span>
   </a>
 </template>
diff --git a/spec/frontend/rapid_diffs/app/discussions/note_author_spec.js b/spec/frontend/rapid_diffs/app/discussions/note_author_spec.js
index 45350e12212a44..a3c56440e976aa 100644
--- a/spec/frontend/rapid_diffs/app/discussions/note_author_spec.js
+++ b/spec/frontend/rapid_diffs/app/discussions/note_author_spec.js
@@ -54,19 +54,4 @@ describe('NoteAuthor', () => {
 
     expect(findAuthorLink().attributes('href')).toBe('https://example.com/johndoe');
   });
-
-  it('renders note-header-info slot content', () => {
-    const author = {
-      id: 'gid://gitlab/User/123',
-      name: 'John Doe',
-      username: 'johndoe',
-      path: '/johndoe',
-    };
-    createComponent(
-      { author },
-      { 'note-header-info': '<span class="custom-info">Custom Info</span>' },
-    );
-
-    expect(wrapper.html()).toContain('Custom Info');
-  });
 });
-- 
GitLab


From 52cfe21ac30791580b980efdd81a83dbf38ca0ab Mon Sep 17 00:00:00 2001
From: Stanislav Lashmanov <slashmanov@gitlab.com>
Date: Fri, 28 Nov 2025 15:18:50 +0400
Subject: [PATCH 3/4] Add timestamp

---
 .../rapid_diffs/app/discussions/system_note.vue            | 7 +++++--
 .../rapid_diffs/app/discussions/system_note_spec.js        | 7 +++++++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/rapid_diffs/app/discussions/system_note.vue b/app/assets/javascripts/rapid_diffs/app/discussions/system_note.vue
index 871d8d5f62da54..cc181349d911ff 100644
--- a/app/assets/javascripts/rapid_diffs/app/discussions/system_note.vue
+++ b/app/assets/javascripts/rapid_diffs/app/discussions/system_note.vue
@@ -1,11 +1,13 @@
 <script>
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import NoteAuthor from './note_author.vue';
 
 export default {
   name: 'SystemNote',
   components: {
+    TimeAgoTooltip,
     NoteAuthor,
     TimelineEntryItem,
   },
@@ -25,9 +27,9 @@ export default {
   <timeline-entry-item :id="`note_${note.id}`">
     <div class="gl-flex gl-gap-6 gl-px-6">
       <div
-        class="gl-relative gl-top-[calc(0.5em-1px)] gl-h-3 gl-w-3 gl-rounded-full gl-border-2 gl-border-solid gl-border-subtle gl-bg-[var(--gl-status-neutral-icon-color)] gl-text-subtle"
+        class="gl-relative gl-top-[calc(0.5em-1px)] gl-h-3 gl-w-3 gl-rounded-full gl-border-2 gl-border-solid gl-border-subtle gl-bg-[var(--gl-status-neutral-icon-color)]"
       ></div>
-      <div class="gl-flex gl-flex-wrap gl-gap-3">
+      <div class="gl-flex gl-flex-wrap gl-gap-3 gl-text-subtle">
         <note-author v-if="note.author" :author="note.author" />
         <span v-else>{{ __('A deleted user') }}</span>
         <div
@@ -35,6 +37,7 @@ export default {
           class="system-note-message gl-inline gl-overflow-hidden gl-break-words"
           data-testid="system-note-content"
         ></div>
+        <time-ago-tooltip :time="note.created_at" />
       </div>
     </div>
   </timeline-entry-item>
diff --git a/spec/frontend/rapid_diffs/app/discussions/system_note_spec.js b/spec/frontend/rapid_diffs/app/discussions/system_note_spec.js
index ad69b5960958ad..6a49d2f0cab7d6 100644
--- a/spec/frontend/rapid_diffs/app/discussions/system_note_spec.js
+++ b/spec/frontend/rapid_diffs/app/discussions/system_note_spec.js
@@ -1,6 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 import SystemNote from '~/rapid_diffs/app/discussions/system_note.vue';
 import NoteAuthor from '~/rapid_diffs/app/discussions/note_author.vue';
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
 describe('SystemNote', () => {
   let wrapper;
@@ -28,4 +29,10 @@ describe('SystemNote', () => {
     createComponent({ note });
     expect(wrapper.text()).toContain('A deleted user');
   });
+
+  it('shows timestamp', () => {
+    const note = { note_html: 'test', created_at: Date.now().toString() };
+    createComponent({ note });
+    expect(wrapper.findComponent(TimeAgoTooltip).props('time')).toBe(note.created_at);
+  });
 });
-- 
GitLab


From b2f1933f75308219abac6cd1a04c02d3f4aaa036 Mon Sep 17 00:00:00 2001
From: Stanislav Lashmanov <slashmanov@gitlab.com>
Date: Fri, 28 Nov 2025 15:24:52 +0400
Subject: [PATCH 4/4] Hide username on system notes

---
 .../rapid_diffs/app/discussions/note_author.vue     |  7 ++++++-
 .../rapid_diffs/app/discussions/system_note.vue     |  2 +-
 .../rapid_diffs/app/discussions/note_author_spec.js | 13 +++++++++++++
 .../rapid_diffs/app/discussions/system_note_spec.js |  4 +++-
 4 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/rapid_diffs/app/discussions/note_author.vue b/app/assets/javascripts/rapid_diffs/app/discussions/note_author.vue
index 718f155a89e843..8dfdd908ed8abb 100644
--- a/app/assets/javascripts/rapid_diffs/app/discussions/note_author.vue
+++ b/app/assets/javascripts/rapid_diffs/app/discussions/note_author.vue
@@ -8,6 +8,11 @@ export default {
       type: Object,
       required: true,
     },
+    showUsername: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   computed: {
     authorId() {
@@ -26,7 +31,7 @@ export default {
   >
     <span class="gl-font-bold" data-testid="author-name" v-text="author.name"></span
     ><span
-      v-if="author.username"
+      v-if="showUsername && author.username"
       class="gl-ml-2 gl-inline-block gl-max-w-full gl-truncate gl-whitespace-nowrap gl-align-bottom gl-text-subtle @max-sm/discussion:gl-hidden"
       >@{{ author.username }}</span
     >
diff --git a/app/assets/javascripts/rapid_diffs/app/discussions/system_note.vue b/app/assets/javascripts/rapid_diffs/app/discussions/system_note.vue
index cc181349d911ff..c47d5b47a1189d 100644
--- a/app/assets/javascripts/rapid_diffs/app/discussions/system_note.vue
+++ b/app/assets/javascripts/rapid_diffs/app/discussions/system_note.vue
@@ -30,7 +30,7 @@ export default {
         class="gl-relative gl-top-[calc(0.5em-1px)] gl-h-3 gl-w-3 gl-rounded-full gl-border-2 gl-border-solid gl-border-subtle gl-bg-[var(--gl-status-neutral-icon-color)]"
       ></div>
       <div class="gl-flex gl-flex-wrap gl-gap-3 gl-text-subtle">
-        <note-author v-if="note.author" :author="note.author" />
+        <note-author v-if="note.author" :author="note.author" :show-username="false" />
         <span v-else>{{ __('A deleted user') }}</span>
         <div
           v-safe-html="note.note_html"
diff --git a/spec/frontend/rapid_diffs/app/discussions/note_author_spec.js b/spec/frontend/rapid_diffs/app/discussions/note_author_spec.js
index a3c56440e976aa..8e709c14462585 100644
--- a/spec/frontend/rapid_diffs/app/discussions/note_author_spec.js
+++ b/spec/frontend/rapid_diffs/app/discussions/note_author_spec.js
@@ -43,6 +43,19 @@ describe('NoteAuthor', () => {
     expect(link.text()).toBe('John Doe');
   });
 
+  it('skips username when showUsername is false', () => {
+    const author = {
+      id: 'gid://gitlab/User/123',
+      name: 'John Doe',
+      username: 'johndoe',
+      path: '/johndoe',
+    };
+    createComponent({ author, showUsername: false });
+
+    const link = findAuthorLink();
+    expect(link.text()).toBe('John Doe');
+  });
+
   it('uses webUrl when path is not available', () => {
     const author = {
       id: 'gid://gitlab/User/123',
diff --git a/spec/frontend/rapid_diffs/app/discussions/system_note_spec.js b/spec/frontend/rapid_diffs/app/discussions/system_note_spec.js
index 6a49d2f0cab7d6..6cd7beabbd499d 100644
--- a/spec/frontend/rapid_diffs/app/discussions/system_note_spec.js
+++ b/spec/frontend/rapid_diffs/app/discussions/system_note_spec.js
@@ -21,7 +21,9 @@ describe('SystemNote', () => {
   it('shows message author', () => {
     const note = { note_html: 'test', author: { username: 'user' } };
     createComponent({ note });
-    expect(wrapper.findComponent(NoteAuthor).props('author')).toStrictEqual(note.author);
+    const author = wrapper.findComponent(NoteAuthor);
+    expect(author.props('author')).toStrictEqual(note.author);
+    expect(author.props('showUsername')).toBe(false);
   });
 
   it('shows deleted author', () => {
-- 
GitLab