diff --git a/app/assets/javascripts/boards/filters/due_date_filters.js.es6 b/app/assets/javascripts/boards/filters/due_date_filters.js.es6
index 5c1519986c1605c4c027986742be4b525580c6a2..50ef19110224348cfaf0989ba921771d0444c6fa 100644
--- a/app/assets/javascripts/boards/filters/due_date_filters.js.es6
+++ b/app/assets/javascripts/boards/filters/due_date_filters.js.es6
@@ -1,4 +1,4 @@
 Vue.filter('due-date', (value) => {
-  const date = new Date(value.replace(new RegExp('-', 'g'), ','));
+  const date = new Date(value);
   return $.datepicker.formatDate('M d, yy', date);
 });
diff --git a/app/assets/javascripts/users_select.js b/app/assets/javascripts/users_select.js
index 67a71f6c3812d643b5db89792362c33a0420c9ba..82c75c614b191a785eb288797954525d84aaca82 100644
--- a/app/assets/javascripts/users_select.js
+++ b/app/assets/javascripts/users_select.js
@@ -48,7 +48,7 @@
           $block.on('click', '.js-assign-yourself', function(e) {
             e.preventDefault();
 
-            if ($dropdown.hasClass('js-issue-board-assignee')) {
+            if ($dropdown.hasClass('js-issue-board-sidebar')) {
               Vue.set(gl.issueBoards.BoardsStore.detail.issue, 'assignee', new ListUser({
                 id: _this.currentUser.id,
                 username: _this.currentUser.username,
diff --git a/app/views/projects/boards/components/sidebar/_assignee.html.haml b/app/views/projects/boards/components/sidebar/_assignee.html.haml
index 92f2a931668ec916ff182052c5692379865bfee9..4307e8e7626619446b3598e6ac612bab51dac110 100644
--- a/app/views/projects/boards/components/sidebar/_assignee.html.haml
+++ b/app/views/projects/boards/components/sidebar/_assignee.html.haml
@@ -28,7 +28,7 @@
         ":value" => "issue.assignee.id",
         "v-if" => "issue.assignee" }
       .dropdown
-        %button.dropdown-menu-toggle.js-user-search.js-author-search.js-issue-board-sidebar{ data: { toggle: "dropdown", field_name: "issue[assignee_id]", first_user: (current_user.username if current_user), current_user: "true", project_id: @project.id, field_name: "issue[assignee_id]", null_user: "true" },
+        %button.dropdown-menu-toggle.js-user-search.js-author-search.js-issue-board-sidebar{ data: { toggle: "dropdown", field_name: "issue[assignee_id]", first_user: (current_user.username if current_user), current_user: "true", project_id: @project.id, null_user: "true" },
           ":data-issuable-id" => "issue.id",
           ":data-issue-update" => "'#{namespace_project_issues_path(@project.namespace, @project)}/' + issue.id + '.json'" }
           Select assignee
diff --git a/spec/features/boards/sidebar_spec.rb b/spec/features/boards/sidebar_spec.rb
new file mode 100644
index 0000000000000000000000000000000000000000..2e754287f3a5c8c0fcf33141dafc4f856514db12
--- /dev/null
+++ b/spec/features/boards/sidebar_spec.rb
@@ -0,0 +1,297 @@
+require 'rails_helper'
+
+describe 'Issue Boards', feature: true, js: true do
+  include WaitForAjax
+  include WaitForVueResource
+
+  let(:project)     { create(:project_with_board, :public) }
+  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)
+    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
+end