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