Handle when attention requests is turned off with better sidebar source layout

app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue

@@ -113,13 +113,14 @@ export default {
           'gl-display-grid gl-align-items-center': showVerticalList,
           'gl-mb-3': index !== users.length - 1 && showVerticalList,
         }"
-        class="assignee-attention-grid"
+        class="assignee-grid"
       >
         <assignee-avatar-link
           :user="user"
           :issuable-type="issuableType"
           :tooltip-has-name="!showVerticalList"
-          class="gl-grid-column-2 gl-grid-row-1 gl-word-break-word"
+          class="gl-word-break-word"
+          data-css-area="user"
         >
           <div
             v-if="showVerticalList"
@@ -134,7 +135,8 @@ export default {
           v-if="showVerticalList"
           :user="user"
           type="assignee"
-          class="gl-grid-column-1 gl-grid-row-1 gl-mr-2"
+          class="gl-mr-2"
+          data-css-area="attention"
           @toggle-attention-requested="toggleAttentionRequested"
         />
       </div>

app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue

@@ -94,15 +94,19 @@ export default {
     <div
       v-for="(user, index) in users"
       :key="user.id"
-      :class="{ 'gl-mb-3': index !== users.length - 1 }"
-      class="gl-display-grid gl-align-items-center reviewer-attention-grid"
+      :class="{
+        'gl-mb-3': index !== users.length - 1,
+        'attention-requests': glFeatures.mrAttentionRequests,
+      }"
+      class="gl-display-grid gl-align-items-center reviewer-grid"
       data-testid="reviewer"
     >
       <reviewer-avatar-link
         :user="user"
         :root-path="rootPath"
         :issuable-type="issuableType"
-        class="gl-grid-column-2 gl-grid-row-1 gl-word-break-word gl-mr-2"
+        class="gl-word-break-word gl-mr-2"
+        data-css-area="user"
       >
         <div class="gl-ml-3 gl-line-height-normal gl-display-grid">
           <span>{{ user.name }}</span>
@@ -113,7 +117,8 @@ export default {
         v-if="glFeatures.mrAttentionRequests"
         :user="user"
         type="reviewer"
-        class="gl-grid-column-1 gl-grid-row-1 gl-mr-2"
+        class="gl-mr-2"
+        data-css-area="attention"
         @toggle-attention-requested="toggleAttentionRequested"
       />
       <gl-icon

app/assets/stylesheets/framework/sidebar.scss

@@ -227,22 +227,28 @@
   margin-right: -$gl-spacing-scale-2;
 }
 
-.reviewer-attention-grid,
-.assignee-attention-grid {
-  grid-template-columns: min-content 1fr min-content;
+.assignee-grid {
+  grid-template-areas: ' attention   user';
+  grid-template-columns: min-content 1fr;
 }
 
-/* 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;
-}
+.reviewer-grid {
+  grid-template-areas: ' user approval    rerequest';
+  grid-template-columns: 1fr  min-content min-content;
 
-.gl-grid-row-1 {
-  grid-row: 1;
+  &.attention-requests {
+    grid-template-areas: ' attention   user approval';
+    grid-template-columns: min-content 1fr  min-content;
+  }
 }
 
-.gl-grid-column-2 {
-  grid-column: 2;
+.assignee-grid,
+.reviewer-grid {
+  [data-css-area='attention'] {
+    grid-area: attention;
+  }
+
+  [data-css-area='user'] {
+    grid-area: user;
+  }
 }