Merge branch 'optimistic-todos' into 'master'

Adds small AJAX optimistic functionality to todos.

Fixes #13656 <br/>
A good first step and boring solution. <br/>
Will make ajax call to remove each issue.  <br/>
If issue is last in group of issues will refresh page.  <br/>
If issues remain in group will remove row with JS.  <br/>
Adds loading spinner to button and disables. <br/>

![todos-optimistic](/uploads/c6aec4a688e5125d4df55a2a3a55d4d7/todos-optimistic.gif) <br/>

cc @dzaporozhets @JobV @dbalexandre 

See merge request !2946

2 files changed, 11 insertions, 5 deletions

diff --git a/app/views/dashboard/todos/_todo.html.haml b/app/views/dashboard/todos/_todo.html.haml
index 45cfe3da188..4c848a50181 100644
--- a/app/views/dashboard/todos/_todo.html.haml
+++ b/app/views/dashboard/todos/_todo.html.haml
@@ -16,7 +16,9 @@
 
     - if todo.pending?
       .todo-actions.pull-right
-        = link_to 'Done', [:dashboard, todo], method: :delete, class: 'btn'
+        = link_to [:dashboard, todo], method: :delete, class: 'btn btn-loading done-todo' do
+          Done
+          = icon('spinner spin')
 
     .todo-body
       .todo-note
diff --git a/app/views/dashboard/todos/index.html.haml b/app/views/dashboard/todos/index.html.haml
index 946d7df3933..623381375a5 100644
--- a/app/views/dashboard/todos/index.html.haml
+++ b/app/views/dashboard/todos/index.html.haml
@@ -3,13 +3,15 @@
 
 .top-area
   %ul.nav-links
-    %li{class: ('active' if params[:state].blank? || params[:state] == 'pending')}
+    - todo_pending_active = ('active' if params[:state].blank? || params[:state] == 'pending')
+    %li{class: "todos-pending #{todo_pending_active}"}
       = link_to todos_filter_path(state: 'pending') do
         %span
           To do
         %span{class: 'badge'}
           = todos_pending_count
-    %li{class: ('active' if params[:state] == 'done')}
+    - todo_done_active = ('active' if params[:state] == 'done')
+    %li{class: "todos-done #{todo_done_active}"}
       = link_to todos_filter_path(state: 'done') do
         %span
           Done
@@ -18,7 +20,9 @@
 
   .nav-controls
     - if @todos.any?(&:pending?)
-      = link_to 'Mark all as done', destroy_all_dashboard_todos_path(todos_filter_params), class: 'btn', method: :delete
+      = link_to destroy_all_dashboard_todos_path(todos_filter_params), class: 'btn btn-loading js-todos-mark-all', method: :delete do
+        Mark all as done
+        = icon('spinner spin')
 
 .todos-filters
   .gray-content-block.second-block
@@ -42,7 +46,7 @@
 .prepend-top-default
   - if @todos.any?
     - @todos.group_by(&:project).each do |group|
-      .panel.panel-default.panel-small
+      .panel.panel-default.panel-small.js-todos-list
         - project = group[0]
         .panel-heading
           = link_to project.name_with_namespace, namespace_project_path(project.namespace, project)