From 97af34c0f7199d7ee7537c8f079da191dff56f1e Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Wed, 23 Mar 2022 12:50:35 -0600
Subject: [PATCH 1/4] Swap the order of the user avatar and the attention
 request icon

---
 .../assignees/uncollapsed_assignee_list.vue    | 16 ++++++++--------
 .../reviewers/uncollapsed_reviewer_list.vue    | 18 +++++++++---------
 app/assets/stylesheets/framework/sidebar.scss  | 18 ++++++++++++++++++
 3 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue b/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue
index 131d1d2df1fd78..3b37b5a5a00cdf 100644
--- a/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue
@@ -114,18 +114,11 @@ export default {
           'gl-mb-3': index !== users.length - 1 && showVerticalList,
         }"
       >
-        <attention-requested-toggle
-          v-if="showVerticalList"
-          :user="user"
-          type="assignee"
-          class="gl-mr-2"
-          @toggle-attention-requested="toggleAttentionRequested"
-        />
         <assignee-avatar-link
           :user="user"
           :issuable-type="issuableType"
           :tooltip-has-name="!showVerticalList"
-          class="gl-word-break-word"
+          class="grid-column-2 grid-row-1 gl-word-break-word"
         >
           <div
             v-if="showVerticalList"
@@ -136,6 +129,13 @@ export default {
             <span>@{{ user.username }}</span>
           </div>
         </assignee-avatar-link>
+        <attention-requested-toggle
+          v-if="showVerticalList"
+          :user="user"
+          type="assignee"
+          class="grid-column-1 grid-row-1 gl-mr-2"
+          @toggle-attention-requested="toggleAttentionRequested"
+        />
       </div>
     </div>
     <div v-if="renderShowMoreSection" class="user-list-more gl-hover-text-blue-800">
diff --git a/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue b/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue
index 430017246c1592..a51c434b7382d7 100644
--- a/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue
+++ b/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue
@@ -95,27 +95,27 @@ export default {
       v-for="(user, index) in users"
       :key="user.id"
       :class="{ 'gl-mb-3': index !== users.length - 1 }"
+      class="gl-display-grid reviewer-attention-grid"
       data-testid="reviewer"
-      class="gl-display-flex"
     >
-      <attention-requested-toggle
-        v-if="glFeatures.mrAttentionRequests"
-        :user="user"
-        type="reviewer"
-        class="gl-mr-2"
-        @toggle-attention-requested="toggleAttentionRequested"
-      />
       <reviewer-avatar-link
         :user="user"
         :root-path="rootPath"
         :issuable-type="issuableType"
-        class="gl-word-break-word gl-mr-2"
+        class="gl-grid-column-2 gl-grid-row-1 gl-word-break-word gl-mr-2"
       >
         <div class="gl-ml-3 gl-line-height-normal gl-display-grid">
           <span>{{ user.name }}</span>
           <span>@{{ user.username }}</span>
         </div>
       </reviewer-avatar-link>
+      <attention-requested-toggle
+        v-if="glFeatures.mrAttentionRequests"
+        :user="user"
+        type="reviewer"
+        class="grid-column-1 grid-row-1 gl-mr-2"
+        @toggle-attention-requested="toggleAttentionRequested"
+      />
       <gl-icon
         v-if="user.approved"
         v-gl-tooltip.left
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index e77971d5280ac2..813644478daf45 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -226,3 +226,21 @@
 .edit-link {
   margin-right: -$gl-spacing-scale-2;
 }
+
+.reviewer-attention-grid,
+.assignee-attention-grid {
+  grid-template-columns: min-content 1fr min-content;
+  align-items: center;
+}
+
+.grid-column-1 {
+  grid-column: 1;
+}
+
+.grid-row-1 {
+  grid-row: 1;
+}
+
+.grid-column-2 {
+  grid-column: 2;
+}
-- 
GitLab


From 1549ca2277ecf38c425009c8a9bd64893f835fa2 Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Tue, 29 Mar 2022 13:08:22 -0600
Subject: [PATCH 2/4] Use GitLab UI-style class names

---
 .../components/assignees/uncollapsed_assignee_list.vue    | 8 +++++---
 .../components/reviewers/uncollapsed_reviewer_list.vue    | 4 ++--
 app/assets/stylesheets/framework/sidebar.scss             | 7 +++----
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue b/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue
index 3b37b5a5a00cdf..5096d8b94f970a 100644
--- a/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue
@@ -110,15 +110,17 @@ export default {
         :class="{
           'user-item': !showVerticalList,
           'gl-display-inline-block': !showVerticalList,
-          'gl-display-flex': showVerticalList,
+          'gl-display-grid': showVerticalList,
+          'gl-align-items-center': showVerticalList,
           'gl-mb-3': index !== users.length - 1 && showVerticalList,
         }"
+        class="assignee-attention-grid"
       >
         <assignee-avatar-link
           :user="user"
           :issuable-type="issuableType"
           :tooltip-has-name="!showVerticalList"
-          class="grid-column-2 grid-row-1 gl-word-break-word"
+          class="gl-grid-column-2 gl-grid-row-1 gl-word-break-word"
         >
           <div
             v-if="showVerticalList"
@@ -133,7 +135,7 @@ export default {
           v-if="showVerticalList"
           :user="user"
           type="assignee"
-          class="grid-column-1 grid-row-1 gl-mr-2"
+          class="gl-grid-column-1 gl-grid-row-1 gl-mr-2"
           @toggle-attention-requested="toggleAttentionRequested"
         />
       </div>
diff --git a/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue b/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue
index a51c434b7382d7..ef44317b3c0f2c 100644
--- a/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue
+++ b/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue
@@ -95,7 +95,7 @@ export default {
       v-for="(user, index) in users"
       :key="user.id"
       :class="{ 'gl-mb-3': index !== users.length - 1 }"
-      class="gl-display-grid reviewer-attention-grid"
+      class="gl-display-grid gl-align-items-center reviewer-attention-grid"
       data-testid="reviewer"
     >
       <reviewer-avatar-link
@@ -113,7 +113,7 @@ export default {
         v-if="glFeatures.mrAttentionRequests"
         :user="user"
         type="reviewer"
-        class="grid-column-1 grid-row-1 gl-mr-2"
+        class="gl-grid-column-1 gl-grid-row-1 gl-mr-2"
         @toggle-attention-requested="toggleAttentionRequested"
       />
       <gl-icon
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 813644478daf45..ffd1202ee876f8 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -230,17 +230,16 @@
 .reviewer-attention-grid,
 .assignee-attention-grid {
   grid-template-columns: min-content 1fr min-content;
-  align-items: center;
 }
 
-.grid-column-1 {
+.gl-grid-column-1 {
   grid-column: 1;
 }
 
-.grid-row-1 {
+.gl-grid-row-1 {
   grid-row: 1;
 }
 
-.grid-column-2 {
+.gl-grid-column-2 {
   grid-column: 2;
 }
-- 
GitLab


From 6d97adbb62a198d5662c768f8bf5a12375489774 Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Tue, 29 Mar 2022 23:04:47 -0600
Subject: [PATCH 3/4] Add a todo comment into the stylesheet

---
 app/assets/stylesheets/framework/sidebar.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index ffd1202ee876f8..b52d15f59bb184 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -232,6 +232,9 @@
   grid-template-columns: min-content 1fr min-content;
 }
 
+/* TODO: These are non-standardized classes, and should be moved into gitlab-ui
+         Please see: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1780
+*/
 .gl-grid-column-1 {
   grid-column: 1;
 }
-- 
GitLab


From 1e8a1abcc8638dbff7c02bfe9b9b62f09c08acf6 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 1 Apr 2022 08:49:31 +0000
Subject: [PATCH 4/4] Apply 1 suggestion(s) to 1 file(s)

---
 .../sidebar/components/assignees/uncollapsed_assignee_list.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue b/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue
index 5096d8b94f970a..650f6858c0d393 100644
--- a/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue
@@ -110,8 +110,7 @@ export default {
         :class="{
           'user-item': !showVerticalList,
           'gl-display-inline-block': !showVerticalList,
-          'gl-display-grid': showVerticalList,
-          'gl-align-items-center': showVerticalList,
+          'gl-display-grid gl-align-items-center': showVerticalList,
           'gl-mb-3': index !== users.length - 1 && showVerticalList,
         }"
         class="assignee-attention-grid"
-- 
GitLab