From bce4130c6121e5df6a8421aea928b368156430bd Mon Sep 17 00:00:00 2001
From: GitLab Bot <leipert@gitlab.com>
Date: Thu, 6 Jun 2024 13:13:56 +0200
Subject: [PATCH 1/2] Reapply "Fix loading spinner spacing on child issues and
 epics"

This reverts commit 23928e64d9db3c9636b301f07770cce248384562 and
reintroduces https://gitlab.com/gitlab-org/gitlab/-/merge_requests/154467
---
 .../components/tree_item.vue                  | 12 ++++++++---
 .../related_items_tree/constants.js           |  2 +-
 .../mixins/tree_dd_mixin.js                   |  4 ++--
 .../components/related_items_tree.scss        | 20 +------------------
 .../components/tree_item_spec.js              |  4 ++--
 .../components/tree_root_spec.js              |  4 ++--
 6 files changed, 17 insertions(+), 29 deletions(-)

diff --git a/ee/app/assets/javascripts/related_items_tree/components/tree_item.vue b/ee/app/assets/javascripts/related_items_tree/components/tree_item.vue
index 6949e155aba0dee1..1f168e536fba53b2 100644
--- a/ee/app/assets/javascripts/related_items_tree/components/tree_item.vue
+++ b/ee/app/assets/javascripts/related_items_tree/components/tree_item.vue
@@ -5,7 +5,7 @@ import { mapGetters, mapActions, mapState } from 'vuex';
 
 import { __ } from '~/locale';
 
-import { ChildType } from '../constants';
+import { ChildType, treeItemChevronBtnKey } from '../constants';
 import TreeItemBody from './tree_item_body.vue';
 
 export default {
@@ -69,6 +69,7 @@ export default {
       });
     },
   },
+  treeItemChevronBtnKey,
 };
 </script>
 
@@ -91,12 +92,17 @@ export default {
         :aria-label="chevronTooltip"
         :class="chevronType"
         variant="link"
-        class="btn-tree-item-chevron align-self-start"
+        :data-button-type="$options.treeItemChevronBtnKey"
+        class="gl-mr-2 gl-mb-2 !gl-py-3 !gl-line-height-0 gl-align-self-start !gl-text-black-normal gl-hover-border-gray-100 hover:!gl-bg-gray-100"
         @click="handleChevronClick"
       >
         <gl-icon :name="chevronType" />
       </gl-button>
-      <gl-loading-icon v-if="childrenFetchInProgress" class="loading-icon" size="sm" />
+      <gl-loading-icon
+        v-if="childrenFetchInProgress"
+        class="gl-mr-2 gl-mb-2 gl-py-3 gl-align-self-start"
+        size="sm"
+      />
       <tree-item-body
         class="tree-item-row gl-mb-3"
         :parent-item="parentItem"
diff --git a/ee/app/assets/javascripts/related_items_tree/constants.js b/ee/app/assets/javascripts/related_items_tree/constants.js
index a262edd9bdd1c2f8..750e436f41546c45 100644
--- a/ee/app/assets/javascripts/related_items_tree/constants.js
+++ b/ee/app/assets/javascripts/related_items_tree/constants.js
@@ -52,7 +52,7 @@ export const EXPAND_DELAY = 1000;
 
 export const itemRemoveModalId = 'item-remove-confirmation';
 
-export const treeItemChevronBtnClassName = 'btn-tree-item-chevron';
+export const treeItemChevronBtnKey = 'btn-tree-item-chevron';
 
 export const trackingAddedIssue = 'g_project_management_users_epic_issue_added_from_epic';
 
diff --git a/ee/app/assets/javascripts/related_items_tree/mixins/tree_dd_mixin.js b/ee/app/assets/javascripts/related_items_tree/mixins/tree_dd_mixin.js
index 9fec78953ee5ffd2..3c9d0b76b371e608 100644
--- a/ee/app/assets/javascripts/related_items_tree/mixins/tree_dd_mixin.js
+++ b/ee/app/assets/javascripts/related_items_tree/mixins/tree_dd_mixin.js
@@ -2,7 +2,7 @@ import Draggable from 'vuedraggable';
 
 import { defaultSortableOptions, DRAG_DELAY } from '~/sortable/constants';
 import { ESC_KEY_CODE } from '~/lib/utils/keycodes';
-import { idProp, relativePositions, treeItemChevronBtnClassName } from '../constants';
+import { idProp, relativePositions, treeItemChevronBtnKey } from '../constants';
 
 export default {
   computed: {
@@ -24,7 +24,7 @@ export default {
         // This filters out/ignores all the chevron buttons (used for
         // expanding and collapsing epic tree items) so the drag action
         // can only be performed on the actual item card.
-        filter: `.${treeItemChevronBtnClassName}`,
+        filter: `[data-button-type=${treeItemChevronBtnKey}]`,
       };
 
       return this.userSignedIn ? options : {};
diff --git a/ee/app/assets/stylesheets/components/related_items_tree.scss b/ee/app/assets/stylesheets/components/related_items_tree.scss
index 7ec57bd56f4fb9e8..4b35f40ed33154a1 100644
--- a/ee/app/assets/stylesheets/components/related_items_tree.scss
+++ b/ee/app/assets/stylesheets/components/related_items_tree.scss
@@ -30,28 +30,10 @@
     .item-meta {
       line-height: $gl-line-height-18;
     }
-
-    .btn-tree-item-chevron {
-      margin-bottom: $gl-padding-4;
-      margin-right: $gl-padding-4;
-      padding: $gl-padding-8 0;
-      line-height: 0;
-      color: $gl-text-color;
-
-      &:hover {
-        border-color: $border-color;
-        background-color: $border-color;
-      }
-    }
-
+    
     .tree-item-noexpand {
       margin-left: $gl-sidebar-padding - 2;
     }
-
-    .loading-icon {
-      margin-left: $gl-padding-4 / 2;
-      margin-right: $gl-padding-4;
-    }
   }
 }
 
diff --git a/ee/spec/frontend/related_items_tree/components/tree_item_spec.js b/ee/spec/frontend/related_items_tree/components/tree_item_spec.js
index 91c6406dc53811f0..07329bc49dd2c9cb 100644
--- a/ee/spec/frontend/related_items_tree/components/tree_item_spec.js
+++ b/ee/spec/frontend/related_items_tree/components/tree_item_spec.js
@@ -8,7 +8,7 @@ import TreeItem from 'ee/related_items_tree/components/tree_item.vue';
 import TreeItemBody from 'ee/related_items_tree/components/tree_item_body.vue';
 import TreeRoot from 'ee/related_items_tree/components/tree_root.vue';
 
-import { ChildType, treeItemChevronBtnClassName } from 'ee/related_items_tree/constants';
+import { ChildType, treeItemChevronBtnKey } from 'ee/related_items_tree/constants';
 import createDefaultStore from 'ee/related_items_tree/store';
 import * as epicUtils from 'ee/related_items_tree/utils/epic_utils';
 import { PathIdSeparator } from '~/related_issues/constants';
@@ -81,7 +81,7 @@ describe('RelatedItemsTree', () => {
 
     describe('default', () => {
       it('has the proper class on the expand/collapse button to avoid dragging', () => {
-        expect(findChevronButton().attributes('class')).toContain(treeItemChevronBtnClassName);
+        expect(findChevronButton().attributes('data-button-type')).toEqual(treeItemChevronBtnKey);
       });
 
       it('calls `toggleItem` action with `item` as a param when clicked', async () => {
diff --git a/ee/spec/frontend/related_items_tree/components/tree_root_spec.js b/ee/spec/frontend/related_items_tree/components/tree_root_spec.js
index 28e9769cad4d964f..cb35d2520e7f5dff 100644
--- a/ee/spec/frontend/related_items_tree/components/tree_root_spec.js
+++ b/ee/spec/frontend/related_items_tree/components/tree_root_spec.js
@@ -7,7 +7,7 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { ESC_KEY_CODE } from '~/lib/utils/keycodes';
 import { DRAG_DELAY } from '~/sortable/constants';
 import TreeRoot from 'ee/related_items_tree/components/tree_root.vue';
-import { treeItemChevronBtnClassName } from 'ee/related_items_tree/constants';
+import { treeItemChevronBtnKey } from 'ee/related_items_tree/constants';
 import createDefaultStore from 'ee/related_items_tree/store';
 import * as epicUtils from 'ee/related_items_tree/utils/epic_utils';
 import { gqClient } from 'ee/related_items_tree/utils/epic_utils';
@@ -117,7 +117,7 @@ describe('RelatedItemsTree', () => {
                   tag: 'ul',
                   'data-parent-reference': mockParentItem.reference,
                   'data-parent-id': mockParentItem.id,
-                  filter: `.${treeItemChevronBtnClassName}`,
+                  filter: `[data-button-type=${treeItemChevronBtnKey}]`,
                 }),
               );
             });
-- 
GitLab


From a7542b6605db2f066f604c5e035aeb03a8da9095 Mon Sep 17 00:00:00 2001
From: Chad Lavimoniere <clavimoniere@gitlab.com>
Date: Thu, 6 Jun 2024 10:38:59 -0400
Subject: [PATCH 2/2] Fix tailwind modifier on legacy class usage

Replace legacy util classes that were using the tailwind important
modifier with tailwind classes.

Changelog: fixed
---
 .../javascripts/related_items_tree/components/tree_item.vue   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ee/app/assets/javascripts/related_items_tree/components/tree_item.vue b/ee/app/assets/javascripts/related_items_tree/components/tree_item.vue
index 1f168e536fba53b2..73077f5a0cd2bcd6 100644
--- a/ee/app/assets/javascripts/related_items_tree/components/tree_item.vue
+++ b/ee/app/assets/javascripts/related_items_tree/components/tree_item.vue
@@ -93,14 +93,14 @@ export default {
         :class="chevronType"
         variant="link"
         :data-button-type="$options.treeItemChevronBtnKey"
-        class="gl-mr-2 gl-mb-2 !gl-py-3 !gl-line-height-0 gl-align-self-start !gl-text-black-normal gl-hover-border-gray-100 hover:!gl-bg-gray-100"
+        class="gl-mr-2 gl-mb-2 !gl-py-3 !gl-leading-[0px] gl-self-start !gl-text-gray-900 hover:gl-border-gray-100 hover:!gl-bg-gray-100"
         @click="handleChevronClick"
       >
         <gl-icon :name="chevronType" />
       </gl-button>
       <gl-loading-icon
         v-if="childrenFetchInProgress"
-        class="gl-mr-2 gl-mb-2 gl-py-3 gl-align-self-start"
+        class="gl-mr-2 gl-mb-2 gl-py-3 gl-self-start"
         size="sm"
       />
       <tree-item-body
-- 
GitLab