make DragTo support VueDraggable

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

• Close this issue

Using the VueDraggable component (rather than Selectable) the drag triggers slightly differently.

The following discussion from !18855 (merged) should be addressed:

• @psimyn started a discussion: (+2 comments)

  tried adding this feature spec but it didn't move the cards (after drag/drop the order was the same).

  diff --git a/ee/spec/features/dashboards/operations_spec.rb b/ee/spec/features/dashboards/operations_spec.rb
  index 1687cbffdbc..471824a016f 100644
  --- a/ee/spec/features/dashboards/operations_spec.rb
  +++ b/ee/spec/features/dashboards/operations_spec.rb
  @@ -3,6 +3,8 @@
   require 'spec_helper'
   
   describe 'Dashboard operations', :js do
  +  include DragTo
  +
     it 'displays information about the last pipeline to an authenticated developer on the project' do
       stub_licensed_features(operations_dashboard: true)
       user = create(:user)
  @@ -21,6 +23,35 @@ describe 'Dashboard operations', :js do
       expect(page).to have_text(pipeline.status)
     end
   
  +  it 'allows dragging projects to reorder' do
  +    stub_licensed_features(operations_dashboard: true)
  +    user = create(:user)
  +    project = create(:project, :repository, name: 'Good Project')
  +    other_project = create(:project, :repository, name: 'Great Project')
  +    project.add_developer(user)
  +    other_project.add_developer(user)
  +    user.update(ops_dashboard_projects: [project, other_project])
  +    sign_in(user)
  +
  +    visit operations_path
  +
  +    project_title = card_text(project)
  +    other_project_title = card_text(other_project)
  +
  +    expect(project_cards).to eq([other_project_title, project_title])
  +
  +    drag_to(selector: '.dashboard-cards',
  +        from_index: 0,
  +        to_index: 1)
  +
  +    expect(project_cards).to eq([project_title, other_project_title])
  +
  +    # persists after reload
  +    visit operations_path
  +
  +    expect(project_cards).to eq([project_title, other_project_title])
  +  end
  +
     context 'when opened on gitlab.com' do
       before do
         stub_application_setting(check_namespace_plan: true)
  @@ -61,10 +92,6 @@ describe 'Dashboard operations', :js do
         assert_available(public_card, public_project, public_pipeline)
       end
   
  -    def project_card(project)
  -      page.find('.js-dashboard-project', text: "#{project.namespace.name} / #{project.name}")
  -    end
  -
       def assert_available(card, project, pipeline)
         expect(card).to have_text(project.name)
         expect(card).to have_text(pipeline.ref)
  @@ -82,4 +109,16 @@ describe 'Dashboard operations', :js do
         expect(card).not_to have_text(pipeline.status)
       end
     end
  +
  +  def card_text(project)
  +    "#{project.namespace.name} / #{project.name}"
  +  end
  +
  +  def project_cards()
  +    page.find_all('.js-dashboard-project .js-project-link').map(&:text)
  +  end
  +
  +  def project_card(project)
  +    page.find('.js-dashboard-project', text: "#{project.namespace.name} / #{project.name}")
  +  end
   end