Added blank state

app/assets/javascripts/boards/boards_bundle.js.es6

@@ -17,7 +17,18 @@ $(function () {
     ready: function () {
       service.all()
         .then((resp) => {
-          resp.json().forEach((board) => {
+          const boards = resp.json();
+
+          // Add blank state board
+          if (boards.length === 2) {
+            boards.splice(1, 0, {
+              id: 'blank',
+              title: 'Welcome to your Issue Board!',
+              index: 1
+            });
+          }
+
+          boards.forEach((board) => {
             BoardsStore.new(board);
           });
         });

app/assets/javascripts/boards/components/board.js.es6

@@ -37,4 +37,4 @@
   });
 
   Vue.component('board', Board)
-}());
+})();

app/assets/javascripts/boards/components/board_blank_state.js.es6

+(() => {
+  const BoardBlankState = Vue.extend({
+    methods: {
+      addDefaultLists: function () {
+        
+      },
+      clearBlankState: function () {
+        BoardsStore.removeList('blank');
+      }
+    }
+  });
+
+  Vue.component('board-blank-state', BoardBlankState);
+})();

app/assets/javascripts/boards/components/board_delete.js.es6

@@ -15,4 +15,4 @@
   });
 
   Vue.component('board-delete', BoardDelete);
-}());
+})();

app/assets/javascripts/boards/components/board_list.js.es6

@@ -88,4 +88,4 @@
   });
 
   Vue.component('board-list', BoardList);
-}());
+})();

app/assets/javascripts/boards/stores/boards_store.js.es6

@@ -30,7 +30,9 @@
         return list.id === id;
       });
 
+      if (id !== 'blank') {
         this.getDoneList().index = this.state.lists.length - 1;
+      }
     },
     moveList: function (oldIndex, newIndex) {
       const listFrom = _.find(this.state.lists, (list) => {

app/assets/javascripts/copy_to_clipboard.js

@@ -34,9 +34,12 @@
 
   $(function() {
     var clipboard;
+
+    if ($('body').attr('data-page') !== 'projects:boards:index') {
       clipboard = new Clipboard('[data-clipboard-target], [data-clipboard-text]');
       clipboard.on('success', genericSuccess);
       return clipboard.on('error', genericError);
+    }
   });
 
 }).call(this);

app/assets/stylesheets/pages/boards.scss

@@ -137,6 +137,30 @@
   }
 }
 
+.board-blank-state {
+  height: 100%;
+  padding: $gl-padding;
+  background-color: #fff;
+}
+
+.board-blank-state-list {
+  list-style: none;
+
+  > li:not(:last-child) {
+    margin-bottom: 8px;
+  }
+
+  .label-color {
+    position: relative;
+    top: 2px;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    margin-right: 3px;
+    border-radius: $border-radius-default;
+  }
+}
+
 .board-list {
   flex: 1;
   margin: 0;

app/views/projects/boards/components/_blank_state.html.haml

+%board-blank-state{ "inline-template" => true, "v-if" => "board.id == 'blank'" }
+  .board-blank-state
+    %p
+      Add the following default lists to your Issue Board with one click:
+    %ul.board-blank-state-list
+      %li
+        %span.label-color{ style: "background-color: red;" }
+        Development
+    %p
+      Starting out with the default set of lists will get you right on the way to making the most of your board.
+    %button.btn.btn-create.btn-inverted.btn-block{ type: "button", "@click" => "addDefaultLists" }
+      Add default lists
+    %button.btn.btn-default.btn-block{ type: "button", "@click" => "clearBlankState" }
+      Nevermind, i'll use my own

app/views/projects/boards/components/_board.html.haml

@@ -14,6 +14,7 @@
         = icon("search", class: "board-search-icon", "v-show" => "!query")
         %button.board-search-clear-btn{ type: "button", role: "button", "aria-label" => "Clear search", "@click" => "clearSearch", "v-show" => "query" }
           = icon("times", class: "board-search-clear")
-      %board-list{ "inline-template" => true, ":board-id" => "board.id", ":issues" => "board.issues", ":disabled" => "#{current_user.nil?}", ":query" => "query", ":filters" => "filters" }
+      %board-list{ "inline-template" => true, "v-if" => "board.id != 'blank'", ":board-id" => "board.id", ":issues" => "board.issues", ":disabled" => "#{current_user.nil?}", ":query" => "query", ":filters" => "filters" }
         %ul.board-list{ "v-el:list" => true, ":data-board" => "boardId" }
           = render "projects/boards/components/card"
+      = render "projects/boards/components/blank_state"

app/views/projects/boards/components/_card.html.haml

-%li.card{ ":data-issue" => "issue.id", "v-for" => "issue in issues | filterBy query in 'title' | filterBy customFilter" }
+%li.card{ ":data-issue" => "issue.id", "v-for" => "issue in issues | filterBy query in 'title' | filterBy customFilter", "track-by" => "id" }
   %h4.card-title
     %a{ href: "#", ":title" => "issue.title" }
       {{ issue.title }}