From 61382e2cca5bd98472d2fcedc1970bfd7dc06f14 Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Wed, 26 Jun 2024 22:21:31 -0600
Subject: [PATCH 1/6] Move conflict alert to be above the diff file header

---
 .../diffs/components/diff_file.vue            | 94 +++++++++----------
 1 file changed, 47 insertions(+), 47 deletions(-)

diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue
index a751d9514ecacc..927314b8336da2 100644
--- a/app/assets/javascripts/diffs/components/diff_file.vue
+++ b/app/assets/javascripts/diffs/components/diff_file.vue
@@ -408,6 +408,53 @@ export default {
     :data-path="file.new_path"
     class="diff-file file-holder gl-border-none gl-mb-0! gl-pb-5"
   >
+    <gl-alert
+      v-if="!showLoadingIcon && file.conflict_type"
+      variant="danger"
+      :dismissible="false"
+      data-testid="conflictsAlert"
+    >
+      {{ $options.CONFLICT_TEXT[file.conflict_type] }}
+      <template v-if="!canMerge">
+        {{ __('Ask someone with write access to resolve it.') }}
+      </template>
+      <gl-sprintf
+        v-else-if="conflictResolutionPath"
+        :message="
+          __(
+            'You can %{gitlabLinkStart}resolve conflicts on GitLab%{gitlabLinkEnd} or %{resolveLocallyStart}resolve them locally%{resolveLocallyEnd}.',
+          )
+        "
+      >
+        <template #gitlabLink="{ content }">
+          <gl-button
+            :href="conflictResolutionPath"
+            variant="link"
+            class="gl-vertical-align-text-bottom"
+            >{{ content }}</gl-button
+          >
+        </template>
+        <template #resolveLocally="{ content }">
+          <gl-button
+            variant="link"
+            class="gl-vertical-align-text-bottom js-check-out-modal-trigger"
+            >{{ content }}</gl-button
+          >
+        </template>
+      </gl-sprintf>
+      <gl-sprintf
+        v-else
+        :message="__('You can %{resolveLocallyStart}resolve them locally%{resolveLocallyEnd}.')"
+      >
+        <template #resolveLocally="{ content }">
+          <gl-button
+            variant="link"
+            class="gl-vertical-align-text-bottom js-check-out-modal-trigger"
+            >{{ content }}</gl-button
+          >
+        </template>
+      </gl-sprintf>
+    </gl-alert>
     <diff-file-header
       ref="header"
       :can-current-user-fork="canCurrentUserFork"
@@ -459,53 +506,6 @@ export default {
         class="diff-content"
         data-testid="content-area"
       >
-        <gl-alert
-          v-if="!showLoadingIcon && file.conflict_type"
-          variant="danger"
-          :dismissible="false"
-          data-testid="conflictsAlert"
-        >
-          {{ $options.CONFLICT_TEXT[file.conflict_type] }}
-          <template v-if="!canMerge">
-            {{ __('Ask someone with write access to resolve it.') }}
-          </template>
-          <gl-sprintf
-            v-else-if="conflictResolutionPath"
-            :message="
-              __(
-                'You can %{gitlabLinkStart}resolve conflicts on GitLab%{gitlabLinkEnd} or %{resolveLocallyStart}resolve them locally%{resolveLocallyEnd}.',
-              )
-            "
-          >
-            <template #gitlabLink="{ content }">
-              <gl-button
-                :href="conflictResolutionPath"
-                variant="link"
-                class="gl-vertical-align-text-bottom"
-                >{{ content }}</gl-button
-              >
-            </template>
-            <template #resolveLocally="{ content }">
-              <gl-button
-                variant="link"
-                class="gl-vertical-align-text-bottom js-check-out-modal-trigger"
-                >{{ content }}</gl-button
-              >
-            </template>
-          </gl-sprintf>
-          <gl-sprintf
-            v-else
-            :message="__('You can %{resolveLocallyStart}resolve them locally%{resolveLocallyEnd}.')"
-          >
-            <template #resolveLocally="{ content }">
-              <gl-button
-                variant="link"
-                class="gl-vertical-align-text-bottom js-check-out-modal-trigger"
-                >{{ content }}</gl-button
-              >
-            </template>
-          </gl-sprintf>
-        </gl-alert>
         <div v-if="showFileDiscussions" data-testid="file-discussions">
           <div class="diff-file-discussions-wrapper">
             <diff-discussions
-- 
GitLab


From c096d3c50719cb51d34934d79c11c85e3e80268f Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Thu, 27 Jun 2024 19:17:49 -0600
Subject: [PATCH 2/6] Update the diff file styles for the re-organized markup

---
 .../diffs/components/diff_file.vue            | 10 ++++++----
 app/assets/stylesheets/framework/diffs.scss   | 20 +++++++++++++++++++
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue
index 927314b8336da2..daa908581c4288 100644
--- a/app/assets/javascripts/diffs/components/diff_file.vue
+++ b/app/assets/javascripts/diffs/components/diff_file.vue
@@ -400,13 +400,15 @@ export default {
   <div
     :id="file.file_hash"
     :class="{
+      'is-conflict': file.conflict_type,
+      'gl-border-none': !file.conflict_type,
       'comments-disabled': Boolean(file.brokenSymlink),
       'has-body': showBody,
       'is-virtual-scrolling': isVirtualScrollingEnabled,
       'pinned-file': isPinnedFile,
     }"
     :data-path="file.new_path"
-    class="diff-file file-holder gl-border-none gl-mb-0! gl-pb-5"
+    class="diff-file file-holder gl-mb-0 gl-pb-5"
   >
     <gl-alert
       v-if="!showLoadingIcon && file.conflict_type"
@@ -470,8 +472,8 @@ export default {
       :class="[
         hasBodyClasses.header,
         {
-          'gl-border-red-500! gl-bg-red-200!': file.conflict_type,
-          'gl-rounded-bottom-left-none! gl-rounded-bottom-right-none!':
+          'gl-bg-red-200!': file.conflict_type,
+          'gl-rounded-top-left-none! gl-rounded-top-right-none!':
             file.conflict_type && isCollapsed,
         },
       ]"
@@ -502,7 +504,7 @@ export default {
     <template v-else>
       <div
         :id="fileId"
-        :class="[hasBodyClasses.contentByHash, { 'gl-border-red-500': file.conflict_type }]"
+        :class="hasBodyClasses.contentByHash"
         class="diff-content"
         data-testid="content-area"
       >
diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss
index 8110ab50c4827d..c22eb66d602b30 100644
--- a/app/assets/stylesheets/framework/diffs.scss
+++ b/app/assets/stylesheets/framework/diffs.scss
@@ -4,6 +4,26 @@ $diff-file-header: 41px;
 .diff-file {
   margin-bottom: $gl-padding;
 
+  &.is-conflict{
+    @apply gl-border-red-500;
+    @apply gl-pb-0;
+    @apply gl-mb-5;
+
+    .gl-alert{
+      @apply gl-rounded-top-base;
+    }
+
+    .file-title{
+      @apply gl-border-l-0;
+      @apply gl-border-r-0;
+      @apply gl-rounded-0;
+    }
+
+    .diff-content{
+      @apply gl-border-0;
+    }
+  }
+
   table.code tr:last-of-type td:last-of-type {
     border-bottom-right-radius: $gl-border-radius-base-inner;
   }
-- 
GitLab


From deb3f18e058470c0e2e72c0f70f77046eaff37e3 Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Thu, 27 Jun 2024 19:42:37 -0600
Subject: [PATCH 3/6] Remove unnecessary line break (for prettier)

---
 app/assets/javascripts/diffs/components/diff_file.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue
index daa908581c4288..f7bad6bd1c61b3 100644
--- a/app/assets/javascripts/diffs/components/diff_file.vue
+++ b/app/assets/javascripts/diffs/components/diff_file.vue
@@ -473,8 +473,7 @@ export default {
         hasBodyClasses.header,
         {
           'gl-bg-red-200!': file.conflict_type,
-          'gl-rounded-top-left-none! gl-rounded-top-right-none!':
-            file.conflict_type && isCollapsed,
+          'gl-rounded-top-left-none! gl-rounded-top-right-none!': file.conflict_type && isCollapsed,
         },
       ]"
       @toggleFile="handleToggle({ viaUserInteraction: true })"
-- 
GitLab


From 35d685f69aeffae05e19ed7dda8f2646320902c9 Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Mon, 8 Jul 2024 16:55:42 -0600
Subject: [PATCH 4/6] Use JS instead of CSS to modify the styles

---
 .../diffs/components/diff_file.vue            | 19 +++++++++++-------
 app/assets/stylesheets/framework/diffs.scss   | 20 -------------------
 2 files changed, 12 insertions(+), 27 deletions(-)

diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue
index f7bad6bd1c61b3..d3e04fabc93a13 100644
--- a/app/assets/javascripts/diffs/components/diff_file.vue
+++ b/app/assets/javascripts/diffs/components/diff_file.vue
@@ -160,7 +160,7 @@ export default {
       if (this.showBody) {
         domParts.header = 'gl-rounded-bottom-left-none gl-rounded-bottom-right-none';
         domParts.contentByHash =
-          'gl-rounded-none gl-rounded-bottom-left-base gl-rounded-bottom-right-base gl-border-1 gl-border-t-0! gl-border-solid gl-border-gray-100';
+          'gl-rounded-none gl-rounded-bottom-left-base gl-rounded-bottom-right-base gl-border-0';
         domParts.content = 'gl-rounded-bottom-left-base gl-rounded-bottom-right-base';
       }
 
@@ -400,21 +400,21 @@ export default {
   <div
     :id="file.file_hash"
     :class="{
-      'is-conflict': file.conflict_type,
-      'gl-border-none': !file.conflict_type,
+      'gl-border-red-500': file.conflict_type,
       'comments-disabled': Boolean(file.brokenSymlink),
       'has-body': showBody,
       'is-virtual-scrolling': isVirtualScrollingEnabled,
       'pinned-file': isPinnedFile,
     }"
     :data-path="file.new_path"
-    class="diff-file file-holder gl-mb-0 gl-pb-5"
+    class="diff-file file-holder gl-mb-5 gl-border-1 gl-border-solid gl-border-gray-100"
   >
     <gl-alert
       v-if="!showLoadingIcon && file.conflict_type"
       variant="danger"
       :dismissible="false"
       data-testid="conflictsAlert"
+      class="gl-rounded-top-base"
     >
       {{ $options.CONFLICT_TEXT[file.conflict_type] }}
       <template v-if="!canMerge">
@@ -468,11 +468,11 @@ export default {
       :view-diffs-file-by-file="viewDiffsFileByFile"
       :show-local-file-reviews="showLocalFileReviews"
       :pinned="isPinnedFile"
-      class="js-file-title file-title gl-border-1 gl-border-solid gl-border-gray-100"
+      class="js-file-title file-title gl-border-0"
       :class="[
         hasBodyClasses.header,
         {
-          'gl-bg-red-200!': file.conflict_type,
+          'gl-bg-red-200! gl-rounded-0!': file.conflict_type,
           'gl-rounded-top-left-none! gl-rounded-top-right-none!': file.conflict_type && isCollapsed,
         },
       ]"
@@ -503,9 +503,14 @@ export default {
     <template v-else>
       <div
         :id="fileId"
-        :class="hasBodyClasses.contentByHash"
         class="diff-content"
         data-testid="content-area"
+        :class="[
+          hasBodyClasses.contentByHash,
+          {
+            'gl-border-0!': file.conflict_type,
+          },
+        ]"
       >
         <div v-if="showFileDiscussions" data-testid="file-discussions">
           <div class="diff-file-discussions-wrapper">
diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss
index c22eb66d602b30..8110ab50c4827d 100644
--- a/app/assets/stylesheets/framework/diffs.scss
+++ b/app/assets/stylesheets/framework/diffs.scss
@@ -4,26 +4,6 @@ $diff-file-header: 41px;
 .diff-file {
   margin-bottom: $gl-padding;
 
-  &.is-conflict{
-    @apply gl-border-red-500;
-    @apply gl-pb-0;
-    @apply gl-mb-5;
-
-    .gl-alert{
-      @apply gl-rounded-top-base;
-    }
-
-    .file-title{
-      @apply gl-border-l-0;
-      @apply gl-border-r-0;
-      @apply gl-rounded-0;
-    }
-
-    .diff-content{
-      @apply gl-border-0;
-    }
-  }
-
   table.code tr:last-of-type td:last-of-type {
     border-bottom-right-radius: $gl-border-radius-base-inner;
   }
-- 
GitLab


From 4c7bc12903e57e10faded0b47f58c861e79995fc Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Tue, 9 Jul 2024 20:23:05 -0600
Subject: [PATCH 5/6] Review notes to avoid diff file double border when
 collapsed

---
 app/assets/javascripts/diffs/components/diff_file.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue
index d3e04fabc93a13..6e7fd4ce59c439 100644
--- a/app/assets/javascripts/diffs/components/diff_file.vue
+++ b/app/assets/javascripts/diffs/components/diff_file.vue
@@ -407,7 +407,7 @@ export default {
       'pinned-file': isPinnedFile,
     }"
     :data-path="file.new_path"
-    class="diff-file file-holder gl-mb-5 gl-border-1 gl-border-solid gl-border-gray-100"
+    class="diff-file file-holder gl-mb-5"
   >
     <gl-alert
       v-if="!showLoadingIcon && file.conflict_type"
@@ -468,7 +468,7 @@ export default {
       :view-diffs-file-by-file="viewDiffsFileByFile"
       :show-local-file-reviews="showLocalFileReviews"
       :pinned="isPinnedFile"
-      class="js-file-title file-title gl-border-0"
+      class="js-file-title file-title gl-border-0!"
       :class="[
         hasBodyClasses.header,
         {
-- 
GitLab


From cccbcd37af8e84f8befd509b80a1d512be195134 Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Thu, 11 Jul 2024 11:49:13 -0600
Subject: [PATCH 6/6] Change border assignments based on review feedback

---
 app/assets/javascripts/diffs/components/diff_file.vue        | 3 ++-
 app/assets/javascripts/diffs/components/diff_file_header.vue | 2 +-
 app/assets/javascripts/notes/components/diff_with_note.vue   | 1 +
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue
index 6e7fd4ce59c439..83e4abc166da15 100644
--- a/app/assets/javascripts/diffs/components/diff_file.vue
+++ b/app/assets/javascripts/diffs/components/diff_file.vue
@@ -468,12 +468,13 @@ export default {
       :view-diffs-file-by-file="viewDiffsFileByFile"
       :show-local-file-reviews="showLocalFileReviews"
       :pinned="isPinnedFile"
-      class="js-file-title file-title gl-border-0!"
+      class="js-file-title file-title"
       :class="[
         hasBodyClasses.header,
         {
           'gl-bg-red-200! gl-rounded-0!': file.conflict_type,
           'gl-rounded-top-left-none! gl-rounded-top-right-none!': file.conflict_type && isCollapsed,
+          'gl-border-0!': file.conflict_type || isCollapsed,
         },
       ]"
       @toggleFile="handleToggle({ viaUserInteraction: true })"
diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue
index 7fa8adcf4442ee..5150624cc3409b 100644
--- a/app/assets/javascripts/diffs/components/diff_file_header.vue
+++ b/app/assets/javascripts/diffs/components/diff_file_header.vue
@@ -291,7 +291,7 @@ export default {
     :class="{
       'gl-z-dropdown-menu!': idState.moreActionsShown,
     }"
-    class="js-file-title file-title file-title-flex-parent gl-border"
+    class="js-file-title file-title file-title-flex-parent"
     data-testid="file-title-container"
     :data-qa-file-name="filePath"
     @click.self="handleToggleFile"
diff --git a/app/assets/javascripts/notes/components/diff_with_note.vue b/app/assets/javascripts/notes/components/diff_with_note.vue
index 8c66549d058a80..5e3b89a6be50a8 100644
--- a/app/assets/javascripts/notes/components/diff_with_note.vue
+++ b/app/assets/javascripts/notes/components/diff_with_note.vue
@@ -102,6 +102,7 @@ export default {
       :discussion-path="discussion.discussion_path"
       :diff-file="discussion.diff_file"
       :can-current-user-fork="false"
+      class="gl-border"
       :expanded="!isCollapsed"
     />
     <div v-if="isTextFile" class="diff-content">
-- 
GitLab