diff options
| -rw-r--r-- | app/assets/javascripts/test_utils/simulate_drag.js | 6 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/boards.scss | 3 | ||||
| -rw-r--r-- | app/views/shared/boards/components/_board.html.haml | 2 | ||||
| -rw-r--r-- | changelogs/unreleased/winh-deduplicate-board-headers.yml | 5 | ||||
| -rw-r--r-- | spec/features/boards/boards_spec.rb | 14 | ||||
| -rw-r--r-- | spec/support/helpers/drag_to_helper.rb | 19 |
6 files changed, 43 insertions, 6 deletions
diff --git a/app/assets/javascripts/test_utils/simulate_drag.js b/app/assets/javascripts/test_utils/simulate_drag.js index be9ebc81c6b..c9bf234fcce 100644 --- a/app/assets/javascripts/test_utils/simulate_drag.js +++ b/app/assets/javascripts/test_utils/simulate_drag.js @@ -153,7 +153,11 @@ export default function simulateDrag(options) { if (progress >= 1) { if (options.ondragend) options.ondragend(); - simulateEvent(toEl, 'mouseup'); + + if (options.performDrop) { + simulateEvent(toEl, 'mouseup'); + } + clearInterval(dragInterval); window.SIMULATE_DRAG_ACTIVE = 0; } diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index 343cca96851..e77a2d1e333 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/pages/boards.scss @@ -86,6 +86,9 @@ } .board { + // the next line cannot be replaced with .d-inline-block because it breaks display: none of SortableJS + // see https://gitlab.com/gitlab-org/gitlab-ce/issues/64828 + display: inline-block; width: calc(85vw - 15px); @include media-breakpoint-up(sm) { diff --git a/app/views/shared/boards/components/_board.html.haml b/app/views/shared/boards/components/_board.html.haml index 5abd4ce0fb9..ffa24d1c041 100644 --- a/app/views/shared/boards/components/_board.html.haml +++ b/app/views/shared/boards/components/_board.html.haml @@ -1,4 +1,4 @@ -.board.d-inline-block.h-100.px-2.align-top.ws-normal{ ":class" => '{ "is-draggable": !list.preset, "is-expandable": list.isExpandable, "is-collapsed": !list.isExpanded, "board-type-assignee": list.type === "assignee" }', +.board.h-100.px-2.align-top.ws-normal{ ":class" => '{ "is-draggable": !list.preset, "is-expandable": list.isExpandable, "is-collapsed": !list.isExpanded, "board-type-assignee": list.type === "assignee" }', ":data-id" => "list.id", data: { qa_selector: "board_list" } } .board-inner.d-flex.flex-column.position-relative.h-100.rounded %header.board-header{ ":class" => '{ "has-border": list.label && list.label.color, "position-relative": list.isExpanded, "position-absolute position-top-0 position-left-0 w-100 h-100": !list.isExpanded }', ":style" => "{ borderTopColor: (list.label && list.label.color ? list.label.color : null) }", data: { qa_selector: "board_list_header" } } diff --git a/changelogs/unreleased/winh-deduplicate-board-headers.yml b/changelogs/unreleased/winh-deduplicate-board-headers.yml new file mode 100644 index 00000000000..009ce59b6bc --- /dev/null +++ b/changelogs/unreleased/winh-deduplicate-board-headers.yml @@ -0,0 +1,5 @@ +--- +title: Hide duplicate board list while dragging +merge_request: 32099 +author: +type: fixed diff --git a/spec/features/boards/boards_spec.rb b/spec/features/boards/boards_spec.rb index 4e7b25115d7..902ecdcd3e8 100644 --- a/spec/features/boards/boards_spec.rb +++ b/spec/features/boards/boards_spec.rb @@ -236,6 +236,15 @@ describe 'Issue Boards', :js do expect(find('.board:nth-child(2)')).to have_content(planning.title) end + it 'dragging does not duplicate list' do + selector = '.board:not(.is-ghost) .board-header' + expect(page).to have_selector(selector, text: development.title, count: 1) + + drag(list_from_index: 2, list_to_index: 1, selector: '.board-header', perform_drop: false) + + expect(page).to have_selector(selector, text: development.title, count: 1) + end + it 'issue moves between lists' do drag(list_from_index: 1, from_index: 1, list_to_index: 2) @@ -576,7 +585,7 @@ describe 'Issue Boards', :js do end end - def drag(selector: '.board-list', list_from_index: 0, from_index: 0, to_index: 0, list_to_index: 0) + def drag(selector: '.board-list', list_from_index: 0, from_index: 0, to_index: 0, list_to_index: 0, perform_drop: true) # ensure there is enough horizontal space for four boards resize_window(2000, 800) @@ -585,7 +594,8 @@ describe 'Issue Boards', :js do list_from_index: list_from_index, from_index: from_index, to_index: to_index, - list_to_index: list_to_index) + list_to_index: list_to_index, + perform_drop: perform_drop) end def wait_for_board_cards(board_number, expected_cards) diff --git a/spec/support/helpers/drag_to_helper.rb b/spec/support/helpers/drag_to_helper.rb index 6099f87323f..2e9932f2e8a 100644 --- a/spec/support/helpers/drag_to_helper.rb +++ b/spec/support/helpers/drag_to_helper.rb @@ -1,8 +1,23 @@ # frozen_string_literal: true module DragTo - def drag_to(list_from_index: 0, from_index: 0, to_index: 0, list_to_index: 0, selector: '', scrollable: 'body', duration: 1000) - evaluate_script("simulateDrag({scrollable: $('#{scrollable}').get(0), duration: #{duration}, from: {el: $('#{selector}').eq(#{list_from_index}).get(0), index: #{from_index}}, to: {el: $('#{selector}').eq(#{list_to_index}).get(0), index: #{to_index}}});") + def drag_to(list_from_index: 0, from_index: 0, to_index: 0, list_to_index: 0, selector: '', scrollable: 'body', duration: 1000, perform_drop: true) + js = <<~JS + simulateDrag({ + scrollable: document.querySelector('#{scrollable}'), + duration: #{duration}, + from: { + el: document.querySelectorAll('#{selector}')[#{list_from_index}], + index: #{from_index} + }, + to: { + el: document.querySelectorAll('#{selector}')[#{list_to_index}], + index: #{to_index} + }, + performDrop: #{perform_drop} + }); + JS + evaluate_script(js) Timeout.timeout(Capybara.default_max_wait_time) do loop while drag_active? |