Merge branch 'issue-board-sidebar' into 'master'

Issue board sidebar

## What does this MR do?

Adds a sidebar when clicking an issue in the issue boards lists. This allows user to easily update other parts of the issue details without having to visit the issue itself. Same functionality as on issue page.

When creating a new issue the sidebar automatically opens.

## Screenshots (if relevant)

![Screen_Shot_2016-10-07_at_13.10.16](/uploads/ad08785f407d8ac3fe9cb078868a7839/Screen_Shot_2016-10-07_at_13.10.16.png)

## What are the relevant issue numbers?

Closes #21219

See merge request !6690

2 files changed, 327 insertions, 0 deletions

diff --git a/spec/features/boards/new_issue_spec.rb b/spec/features/boards/new_issue_spec.rb
index 67d6da5f39a..760a8967123 100644
--- a/spec/features/boards/new_issue_spec.rb
+++ b/spec/features/boards/new_issue_spec.rb
@@ -66,6 +66,21 @@ describe 'Issue Boards new issue', feature: true, js: true do
         expect(page).to have_content('1')
       end
     end
+
+    it 'shows sidebar when creating new issue' do
+      page.within(first('.board')) do
+        find('.board-issue-count-holder .btn').click
+      end
+
+      page.within(first('.board-new-issue-form')) do
+        find('.form-control').set('bug')
+        click_button 'Submit issue'
+      end
+
+      wait_for_vue_resource
+
+      expect(page).to have_selector('.issue-boards-sidebar')
+    end
   end
 
   context 'unauthorized user' do
diff --git a/spec/features/boards/sidebar_spec.rb b/spec/features/boards/sidebar_spec.rb
new file mode 100644
index 00000000000..f160052a844
--- /dev/null
+++ b/spec/features/boards/sidebar_spec.rb
@@ -0,0 +1,312 @@
+require 'rails_helper'
+
+describe 'Issue Boards', feature: true, js: true do
+  include WaitForAjax
+  include WaitForVueResource
+
+  let(:project)     { create(:empty_project, :public) }
+  let(:board)       { create(:board, project: project) }
+  let(:user)        { create(:user) }
+  let!(:label)      { create(:label, project: project) }
+  let!(:label2)     { create(:label, project: project) }
+  let!(:milestone)  { create(:milestone, project: project) }
+  let!(:issue2)     { create(:labeled_issue, project: project, assignee: user, milestone: milestone, labels: [label]) }
+  let!(:issue)      { create(:issue, project: project) }
+
+  before do
+    project.team << [user, :master]
+
+    login_as(user)
+
+    visit namespace_project_board_path(project.namespace, project, board)
+    wait_for_vue_resource
+  end
+
+  it 'shows sidebar when clicking issue' do
+    page.within(first('.board')) do
+      first('.card').click
+    end
+
+    expect(page).to have_selector('.issue-boards-sidebar')
+  end
+
+  it 'closes sidebar when clicking issue' do
+    page.within(first('.board')) do
+      first('.card').click
+    end
+
+    expect(page).to have_selector('.issue-boards-sidebar')
+
+    page.within(first('.board')) do
+      first('.card').click
+    end
+
+    expect(page).not_to have_selector('.issue-boards-sidebar')
+  end
+
+  it 'closes sidebar when clicking close button' do
+    page.within(first('.board')) do
+      first('.card').click
+    end
+
+    expect(page).to have_selector('.issue-boards-sidebar')
+
+    find('.gutter-toggle').click
+
+    expect(page).not_to have_selector('.issue-boards-sidebar')
+  end
+
+  it 'shows issue details when sidebar is open' do
+    page.within(first('.board')) do
+      first('.card').click
+    end
+
+    page.within('.issue-boards-sidebar') do
+      expect(page).to have_content(issue.title)
+      expect(page).to have_content(issue.to_reference)
+    end
+  end
+
+  context 'assignee' do
+    it 'updates the issues assignee' do
+      page.within(first('.board')) do
+        first('.card').click
+      end
+
+      page.within('.assignee') do
+        click_link 'Edit'
+
+        wait_for_ajax
+
+        page.within('.dropdown-menu-user') do
+          click_link user.name
+
+          wait_for_vue_resource
+        end
+
+        expect(page).to have_content(user.name)
+      end
+
+      page.within(first('.board')) do
+        page.within(first('.card')) do
+          expect(page).to have_selector('.avatar')
+        end
+      end
+    end
+
+    it 'removes the assignee' do
+      page.within(first('.board')) do
+        find('.card:nth-child(2)').click
+      end
+
+      page.within('.assignee') do
+        click_link 'Edit'
+
+        wait_for_ajax
+
+        page.within('.dropdown-menu-user') do
+          click_link 'Unassigned'
+
+          wait_for_vue_resource
+        end
+
+        expect(page).to have_content('No assignee')
+      end
+
+      page.within(first('.board')) do
+        page.within(find('.card:nth-child(2)')) do
+          expect(page).not_to have_selector('.avatar')
+        end
+      end
+    end
+
+    it 'assignees to current user' do
+      page.within(first('.board')) do
+        first('.card').click
+      end
+
+      page.within('.assignee') do
+        click_link 'assign yourself'
+
+        wait_for_vue_resource
+
+        expect(page).to have_content(user.name)
+      end
+
+      page.within(first('.board')) do
+        page.within(first('.card')) do
+          expect(page).to have_selector('.avatar')
+        end
+      end
+    end
+  end
+
+  context 'milestone' do
+    it 'adds a milestone' do
+      page.within(first('.board')) do
+        first('.card').click
+      end
+
+      page.within('.milestone') do
+        click_link 'Edit'
+
+        wait_for_ajax
+
+        click_link milestone.title
+
+        wait_for_vue_resource
+
+        page.within('.value') do
+          expect(page).to have_content(milestone.title)
+        end
+      end
+    end
+
+    it 'removes a milestone' do
+      page.within(first('.board')) do
+        find('.card:nth-child(2)').click
+      end
+
+      page.within('.milestone') do
+        click_link 'Edit'
+
+        wait_for_ajax
+
+        click_link "No Milestone"
+
+        wait_for_vue_resource
+
+        page.within('.value') do
+          expect(page).not_to have_content(milestone.title)
+        end
+      end
+    end
+  end
+
+  context 'due date' do
+    it 'updates due date' do
+      page.within(first('.board')) do
+        first('.card').click
+      end
+
+      page.within('.due_date') do
+        click_link 'Edit'
+
+        click_link Date.today.day
+
+        wait_for_vue_resource
+
+        expect(page).to have_content(Date.today.to_s(:medium))
+      end
+    end
+  end
+
+  context 'labels' do
+    it 'adds a single label' do
+      page.within(first('.board')) do
+        first('.card').click
+      end
+
+      page.within('.labels') do
+        click_link 'Edit'
+
+        wait_for_ajax
+
+        click_link label.title
+
+        wait_for_vue_resource
+
+        find('.dropdown-menu-close-icon').click
+
+        page.within('.value') do
+          expect(page).to have_selector('.label', count: 1)
+          expect(page).to have_content(label.title)
+        end
+      end
+
+      page.within(first('.board')) do
+        page.within(first('.card')) do
+          expect(page).to have_selector('.label', count: 1)
+          expect(page).to have_content(label.title)
+        end
+      end
+    end
+
+    it 'adds a multiple labels' do
+      page.within(first('.board')) do
+        first('.card').click
+      end
+
+      page.within('.labels') do
+        click_link 'Edit'
+
+        wait_for_ajax
+
+        click_link label.title
+        click_link label2.title
+
+        wait_for_vue_resource
+
+        find('.dropdown-menu-close-icon').click
+
+        page.within('.value') do
+          expect(page).to have_selector('.label', count: 2)
+          expect(page).to have_content(label.title)
+          expect(page).to have_content(label2.title)
+        end
+      end
+
+      page.within(first('.board')) do
+        page.within(first('.card')) do
+          expect(page).to have_selector('.label', count: 2)
+          expect(page).to have_content(label.title)
+          expect(page).to have_content(label2.title)
+        end
+      end
+    end
+
+    it 'removes a label' do
+      page.within(first('.board')) do
+        find('.card:nth-child(2)').click
+      end
+
+      page.within('.labels') do
+        click_link 'Edit'
+
+        wait_for_ajax
+
+        click_link label.title
+
+        wait_for_vue_resource
+
+        find('.dropdown-menu-close-icon').click
+
+        page.within('.value') do
+          expect(page).to have_selector('.label', count: 0)
+          expect(page).not_to have_content(label.title)
+        end
+      end
+
+      page.within(first('.board')) do
+        page.within(find('.card:nth-child(2)')) do
+          expect(page).not_to have_selector('.label', count: 1)
+          expect(page).not_to have_content(label.title)
+        end
+      end
+    end
+  end
+
+  context 'subscription' do
+    it 'changes issue subscription' do
+      page.within(first('.board')) do
+        first('.card').click
+      end
+
+      page.within('.subscription') do
+        click_button 'Subscribe'
+
+        expect(page).to have_content("You're receiving notifications because you're subscribed to this thread.")
+      end
+    end
+  end
+end