From b70e2514c4fe95da6f4ccf457991493b9be94c16 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Tue, 13 Aug 2024 14:32:56 -0600
Subject: [PATCH 1/2] Rewrite system note CSS

- Use utility classes
- Create new_notes.scss
- Update existing unique classes

Changelog: changed
---
 .../components/notes/system_note.vue          | 38 +++++---
 .../stylesheets/page_bundles/issuable.scss    |  1 +
 .../page_bundles/notes/system_notes_v2.scss   | 97 +++++++++++++++++++
 .../stylesheets/page_bundles/work_items.scss  |  1 +
 app/assets/stylesheets/pages/notes.scss       |  4 -
 .../features/epics/referencing_epics_spec.rb  |  4 +-
 .../components/notes/system_note_spec.js      |  6 +-
 spec/features/issues/notes_on_issues_spec.rb  |  4 +-
 .../user_sees_system_notes_spec.rb            |  4 +-
 .../discussion_comments_shared_example.rb     |  2 +-
 10 files changed, 132 insertions(+), 29 deletions(-)
 create mode 100644 app/assets/stylesheets/page_bundles/notes/system_notes_v2.scss

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 c10a4e4c58e514..00b3674ae6f80a 100644
--- a/app/assets/javascripts/vue_shared/components/notes/system_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
@@ -148,27 +148,28 @@ export default {
   <timeline-entry-item
     :id="noteAnchorId"
     :class="{ target: isTargetNote, 'pr-0': shouldShowDescriptionVersion }"
-    class="note system-note note-wrapper"
+    class="system-note-v2"
   >
     <div
       :class="[
         iconBgClass,
         {
-          'system-note-icon': isAllowedIcon,
-          'system-note-tiny-dot !gl-bg-gray-900': !isAllowedIcon,
+          'system-note-icon-v2 gl-h-6 gl-w-6 gl-ml-2 -gl-mt-1': isAllowedIcon,
+          'system-note-dot gl-h-3 gl-w-3 gl-mt-3 -gl-top-1 gl-ml-4 gl-border-2 gl-border-gray-50 gl-border-solid gl-bg-gray-900':
+            !isAllowedIcon,
         },
       ]"
-      class="timeline-icon gl-relative gl-float-left gl-flex gl-items-center gl-justify-center gl-rounded-full"
+      class="gl-relative gl-float-left gl-flex gl-items-center gl-justify-center gl-rounded-full"
     >
       <gl-icon
         v-if="isAllowedIcon"
         :name="systemNoteIconName"
-        :size="12"
+        :size="14"
         data-testid="timeline-icon"
       />
     </div>
-    <div class="timeline-content">
-      <div class="note-header">
+    <div class="gl-ml-7">
+      <div class="gl-flex gl-justify-between gl-items-start">
         <note-header
           :author="note.author"
           :created-at="note.created_at"
@@ -203,29 +204,36 @@ export default {
           </template>
         </note-header>
       </div>
-      <div class="note-body">
+      <div class="note-body-v2 gl-pl-3 gl-pb-3">
         <div
           v-safe-html="note.note_html"
-          :class="{ 'system-note-commit-list': hasMoreCommits, 'hide-shade': expanded }"
-          class="note-text md"
+          :class="{
+            'gl-block gl-overflow-hidden': hasMoreCommits,
+            'system-note-commit-list-v2': hasMoreCommits && !expanded,
+          }"
+          class="note-text-v2 md"
         ></div>
         <div v-if="hasMoreCommits" class="flex-list">
           <div
-            class="system-note-commit-list-toggler flex-row gl-pl-4 gl-pt-3"
+            class="flex-row gl-pl-4 gl-pt-3 gl-text-blue-500 gl-cursor-pointer hover:gl-underline gl-relative gl-z-2"
             @click="expanded = !expanded"
           >
             <gl-icon :name="toggleIcon" :size="12" class="gl-mr-2" />
             <span>{{ __('Toggle commit list') }}</span>
           </div>
         </div>
-        <div v-if="shouldShowDescriptionVersion" class="description-version gl-relative !gl-pt-3">
+        <div
+          v-if="shouldShowDescriptionVersion"
+          class="gl-relative !gl-pt-3"
+          data-testid="description-version"
+        >
           <pre v-if="isLoadingDescriptionVersion" class="loading-state">
             <gl-skeleton-loader />
           </pre>
           <pre
             v-else
             v-safe-html="descriptionVersion"
-            class="wrapper gl-mt-3 gl-whitespace-pre-wrap gl-pr-7"
+            class="gl-mt-3 gl-whitespace-pre-wrap gl-pr-7"
           ></pre>
           <gl-button
             v-if="displayDeleteButton"
@@ -243,7 +251,7 @@ export default {
         </div>
         <div
           v-if="lines.length && showLines"
-          class="diff-content outdated-lines-wrapper gl-mt-4 gl-overflow-hidden gl-rounded-small gl-border-1 gl-border-solid gl-border-gray-200"
+          class="gl-pl-0 gl-overflow-visible gl-my-2 gl-mr-5 gl-overflow-hidden gl-rounded-small gl-border-1 gl-border-solid gl-border-gray-200"
         >
           <table
             :class="$options.userColorSchemeClass"
@@ -268,7 +276,7 @@ export default {
             </tr>
           </table>
         </div>
-        <div v-else-if="showLines" class="mt-4">
+        <div v-else-if="showLines" class="gl-mt-4">
           <gl-skeleton-loader />
         </div>
       </div>
diff --git a/app/assets/stylesheets/page_bundles/issuable.scss b/app/assets/stylesheets/page_bundles/issuable.scss
index 526c5bc86f2591..cde0103b4db66d 100644
--- a/app/assets/stylesheets/page_bundles/issuable.scss
+++ b/app/assets/stylesheets/page_bundles/issuable.scss
@@ -1,5 +1,6 @@
 @import 'mixins_and_variables_and_functions';
 @import 'system_note_styles';
+@import './notes/system_notes_v2';
 
 .issuable-details {
   section {
diff --git a/app/assets/stylesheets/page_bundles/notes/system_notes_v2.scss b/app/assets/stylesheets/page_bundles/notes/system_notes_v2.scss
new file mode 100644
index 00000000000000..24534559ff1d7b
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/notes/system_notes_v2.scss
@@ -0,0 +1,97 @@
+// System notes on main activity feed
+
+@mixin activity-line-gradient($color-1, $color-2) {
+  content: '';
+  display: block;
+  position: absolute;
+  left: calc(50% - 1px);
+  width: 2px;
+  height: 20px;
+  background: linear-gradient(to bottom, $color-1, $color-2);
+}
+
+.system-note-v2 {
+  .note-text-v2 {
+    p:first-child {
+      display: none;
+    }
+
+    ul {
+      margin: $gl-spacing-scale-2 0;
+    }
+  }
+
+  .note-body-v2 {
+    p {
+      margin-left: $gl-spacing-scale-5;
+    }
+  }
+
+  .system-note-message {
+    a {
+      color: $blue-500;
+    }
+
+    .gfm-project_member {
+      color: $blue-700;
+    }
+  }
+}
+
+.system-note-icon-v2 {
+  // stylelint-disable-next-line gitlab/no-gl-class
+  &.gl-bg-green-100 {
+    --bg-color: var(--green-100, #{$green-100});
+  }
+
+  // stylelint-disable-next-line gitlab/no-gl-class
+  &.gl-bg-red-100 {
+    --bg-color: var(--red-100, #{$red-100});
+  }
+
+  // stylelint-disable-next-line gitlab/no-gl-class
+  &.gl-bg-blue-100 {
+    --bg-color: var(--blue-100, #{$blue-100});
+  }
+
+  &:not(.mr-system-note-empty) {
+    &::before {
+      @include activity-line-gradient(transparent, var(--bg-color));
+      bottom: 100%;
+    }
+
+    &::after {
+      @include activity-line-gradient(var(--bg-color), transparent);
+      top: 100%;
+    }
+  }
+}
+
+.system-note-v2:first-child :is(.system-note-icon-v2::before, .system-note-icon-v2::after) {
+  display: none;
+}
+
+.system-note-commit-list-v2 {
+  max-height: 70px;
+
+  &::after {
+    content: '';
+    height: 70px;
+    position: absolute;
+    left: $gl-spacing-scale-2;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(rgba($white, 0.1) -50px, $body-bg 100%);
+  }
+}
+
+
+// System notes on diffs
+
+.discussion-notes {
+  .system-note-dot {
+    top: 0;
+    margin-top: $gl-spacing-scale-4;
+    margin-left: $gl-spacing-scale-5;
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/work_items.scss b/app/assets/stylesheets/page_bundles/work_items.scss
index ec872b6842582d..9c1c0b79c2f254 100644
--- a/app/assets/stylesheets/page_bundles/work_items.scss
+++ b/app/assets/stylesheets/page_bundles/work_items.scss
@@ -1,5 +1,6 @@
 @import 'mixins_and_variables_and_functions';
 @import 'system_note_styles';
+@import './notes/system_notes_v2';
 
 $work-item-field-inset-shadow: inset 0 0 0 $gl-border-size-1 var(--gray-200, $gray-200) !important;
 $work-item-overview-right-sidebar-width: 20rem;
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index b53c368c53981a..5f1d26bb4ad2a1 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -496,10 +496,6 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
   .diff-content {
     margin-left: 2.5rem;
 
-    &.outdated-lines-wrapper {
-      margin-left: 0;
-    }
-
     .line_holder td:first-of-type {
       @include gl-border-l;
     }
diff --git a/ee/spec/features/epics/referencing_epics_spec.rb b/ee/spec/features/epics/referencing_epics_spec.rb
index 56519d607e40d3..f02b19c6e078f8 100644
--- a/ee/spec/features/epics/referencing_epics_spec.rb
+++ b/ee/spec/features/epics/referencing_epics_spec.rb
@@ -114,7 +114,7 @@
 
         find('div#notes li.note div.note-text a').click
 
-        page.within('div#notes li.note .system-note-message') do
+        page.within('div#notes li.system-note-v2 .system-note-message') do
           expect(page).to have_content('mentioned in issue')
           expect(page.find('a')).to have_content(issue.to_reference(full: true))
         end
@@ -140,7 +140,7 @@
 
           find('div#notes li.note div.note-text a').click
 
-          page.within('div#notes li.note.system-note .system-note-message') do
+          page.within('div#notes li.system-note-v2 .system-note-message') do
             expect(page).to have_content('mentioned in epic')
             expect(page.find('a')).to have_content(epic.to_reference(full: true))
           end
diff --git a/ee/spec/frontend/vue_shared/components/notes/system_note_spec.js b/ee/spec/frontend/vue_shared/components/notes/system_note_spec.js
index e20958136bf99b..931a8623bec465 100644
--- a/ee/spec/frontend/vue_shared/components/notes/system_note_spec.js
+++ b/ee/spec/frontend/vue_shared/components/notes/system_note_spec.js
@@ -17,9 +17,9 @@ describe('system note component', () => {
 
   </span><span class="idiff addition">dsaf</span><span class="idiff">
   more text
-  
+
   hello
-  
+
   foobar</span>`;
 
   function mockFetchDiff() {
@@ -35,7 +35,7 @@ describe('system note component', () => {
 
   const findBlankBtn = () => wrapper.find('[data-testid="compare-btn"]');
 
-  const findDescriptionVersion = () => wrapper.find('.description-version');
+  const findDescriptionVersion = () => wrapper.find('[data-testid="description-version"]');
 
   const findDeleteDescriptionVersionButton = () =>
     wrapper.find('[data-testid="delete-description-version-button"]');
diff --git a/spec/features/issues/notes_on_issues_spec.rb b/spec/features/issues/notes_on_issues_spec.rb
index 00ad3c89c86c8f..41657a11702ec8 100644
--- a/spec/features/issues/notes_on_issues_spec.rb
+++ b/spec/features/issues/notes_on_issues_spec.rb
@@ -31,7 +31,7 @@ def submit_comment(text)
 
       find('div#notes li.note div.note-text a').click
 
-      page.within('div#notes li.note .system-note-message') do
+      page.within('div#notes li.system-note-v2 .system-note-message') do
         expect(page).to have_content('mentioned in issue')
         expect(page.find('a')).to have_content(issue.to_reference)
       end
@@ -120,7 +120,7 @@ def submit_comment(text)
       it 'shows the user the reference' do
         visit project_issue_path(project, issue)
 
-        page.within('div#notes li.note .system-note-message') do
+        page.within('div#notes li.system-note-v2 .system-note-message') do
           expect(page).to have_content('closed with')
           expect(page.find('a')).to have_content(reference_content)
         end
diff --git a/spec/features/merge_request/user_sees_system_notes_spec.rb b/spec/features/merge_request/user_sees_system_notes_spec.rb
index d547aa84bdd12f..b05a8ec3ce29ac 100644
--- a/spec/features/merge_request/user_sees_system_notes_spec.rb
+++ b/spec/features/merge_request/user_sees_system_notes_spec.rb
@@ -19,7 +19,7 @@
     it 'shows the system note' do
       visit project_merge_request_path(public_project, merge_request)
 
-      expect(page).to have_css('.system-note')
+      expect(page).to have_css('.system-note-v2')
     end
   end
 
@@ -27,7 +27,7 @@
     it 'hides the system note' do
       visit project_merge_request_path(public_project, merge_request)
 
-      expect(page).not_to have_css('.system-note')
+      expect(page).not_to have_css('.system-note-v2')
     end
   end
 end
diff --git a/spec/support/shared_examples/features/discussion_comments_shared_example.rb b/spec/support/shared_examples/features/discussion_comments_shared_example.rb
index 3e8b86cd8abbe5..e6d745a2b68b16 100644
--- a/spec/support/shared_examples/features/discussion_comments_shared_example.rb
+++ b/spec/support/shared_examples/features/discussion_comments_shared_example.rb
@@ -309,7 +309,7 @@ def submit_reply(text)
           expect(page).to have_content(comment)
           expect(page).to have_content "#{user.name} closed"
 
-          new_discussion = all(comments_selector)[-2]
+          new_discussion = all(comments_selector)[-1]
 
           expect(new_discussion).to have_selector '.discussion'
         end
-- 
GitLab


From 6f059b588a0ce61751289bc5c054697446237ae9 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Thu, 22 Aug 2024 06:06:17 -0600
Subject: [PATCH 2/2] Update class names

---
 .../notes/components/discussion_notes.vue     |  1 +
 .../components/notes/system_note.vue          | 23 +++++++++++++------
 ...em_notes_v2.scss => _system_notes_v2.scss} | 11 ++++-----
 3 files changed, 21 insertions(+), 14 deletions(-)
 rename app/assets/stylesheets/page_bundles/notes/{system_notes_v2.scss => _system_notes_v2.scss} (86%)

diff --git a/app/assets/javascripts/notes/components/discussion_notes.vue b/app/assets/javascripts/notes/components/discussion_notes.vue
index 79157c3f99cb63..71674169af0083 100644
--- a/app/assets/javascripts/notes/components/discussion_notes.vue
+++ b/app/assets/javascripts/notes/components/discussion_notes.vue
@@ -201,6 +201,7 @@ export default {
           :is-overview-tab="isOverviewTab"
           :should-scroll-to-note="shouldScrollToNote"
           :internal-note="isDiscussionInternal"
+          :variant="diffLine ? 'diff' : ''"
           @handleDeleteNote="$emit('deleteNote')"
         >
           <template #avatar-badge>
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 00b3674ae6f80a..20879a8cdfb3a1 100644
--- a/app/assets/javascripts/vue_shared/components/notes/system_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
@@ -31,12 +31,12 @@ import TimelineEntryItem from './timeline_entry_item.vue';
 
 const MAX_VISIBLE_COMMIT_LIST_COUNT = 3;
 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',
-  'issue-close': 'gl-bg-blue-100 gl-text-blue-700',
-  issues: 'gl-bg-green-100 gl-text-green-700',
-  error: 'gl-bg-red-100 gl-text-red-700',
+  check: 'gl-bg-green-100 gl-text-green-700 icon-success',
+  'merge-request-close': 'gl-bg-red-100 gl-text-red-700 icon-danger',
+  merge: 'gl-bg-blue-100 gl-text-blue-700 icon-info',
+  'issue-close': 'gl-bg-blue-100 gl-text-blue-700 icon-info',
+  issues: 'gl-bg-green-100 gl-text-green-700 icon-success',
+  error: 'gl-bg-red-100 gl-text-red-700 icon-danger',
 };
 
 export default {
@@ -61,6 +61,11 @@ export default {
       type: Object,
       required: true,
     },
+    variant: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -147,7 +152,11 @@ export default {
 <template>
   <timeline-entry-item
     :id="noteAnchorId"
-    :class="{ target: isTargetNote, 'pr-0': shouldShowDescriptionVersion }"
+    :class="{
+      target: isTargetNote,
+      'pr-0': shouldShowDescriptionVersion,
+      [`system-note-variant-${variant}`]: variant,
+    }"
     class="system-note-v2"
   >
     <div
diff --git a/app/assets/stylesheets/page_bundles/notes/system_notes_v2.scss b/app/assets/stylesheets/page_bundles/notes/_system_notes_v2.scss
similarity index 86%
rename from app/assets/stylesheets/page_bundles/notes/system_notes_v2.scss
rename to app/assets/stylesheets/page_bundles/notes/_system_notes_v2.scss
index 24534559ff1d7b..c61125eaa5dc41 100644
--- a/app/assets/stylesheets/page_bundles/notes/system_notes_v2.scss
+++ b/app/assets/stylesheets/page_bundles/notes/_system_notes_v2.scss
@@ -39,18 +39,15 @@
 }
 
 .system-note-icon-v2 {
-  // stylelint-disable-next-line gitlab/no-gl-class
-  &.gl-bg-green-100 {
+  &.icon-success{
     --bg-color: var(--green-100, #{$green-100});
   }
 
-  // stylelint-disable-next-line gitlab/no-gl-class
-  &.gl-bg-red-100 {
+  &.icon-danger {
     --bg-color: var(--red-100, #{$red-100});
   }
 
-  // stylelint-disable-next-line gitlab/no-gl-class
-  &.gl-bg-blue-100 {
+  &.icon-info {
     --bg-color: var(--blue-100, #{$blue-100});
   }
 
@@ -88,7 +85,7 @@
 
 // System notes on diffs
 
-.discussion-notes {
+.system-note-variant-diff {
   .system-note-dot {
     top: 0;
     margin-top: $gl-spacing-scale-4;
-- 
GitLab