Added help box where backlog list used to be

This is to ease the transition for users who were used to having the
backlog list

Closes #27933

5 files changed, 85 insertions, 0 deletions

diff --git a/app/assets/javascripts/boards/boards_bundle.js.es6 b/app/assets/javascripts/boards/boards_bundle.js.es6
index c345fb6ce14..1fd5ed948aa 100644
--- a/app/assets/javascripts/boards/boards_bundle.js.es6
+++ b/app/assets/javascripts/boards/boards_bundle.js.es6
@@ -16,6 +16,7 @@ require('./components/board');
 require('./components/board_sidebar');
 require('./components/new_list_dropdown');
 require('./components/modal/index');
+const backlogHelp = require('./components/boards_backlog_help');
 require('../vue_shared/vue_resource_interceptor');
 
 $(() => {
@@ -37,6 +38,7 @@ $(() => {
       'board': gl.issueBoards.Board,
       'board-sidebar': gl.issueBoards.BoardSidebar,
       'board-add-issues-modal': gl.issueBoards.IssuesModal,
+      backlogHelp,
     },
     data: {
       state: Store.state,
@@ -53,6 +55,11 @@ $(() => {
       detailIssueVisible () {
         return Object.keys(this.detailIssue.issue).length;
       },
+      hideHelp() {
+        if (this.loading) return false;
+
+        return !this.state.helpHidden;
+      },
     },
     created () {
       gl.boardService = new BoardService(this.endpoint, this.bulkUpdatePath, this.boardId);
diff --git a/app/assets/javascripts/boards/components/boards_backlog_help.js.es6 b/app/assets/javascripts/boards/components/boards_backlog_help.js.es6
new file mode 100644
index 00000000000..b14d99e12a3
--- /dev/null
+++ b/app/assets/javascripts/boards/components/boards_backlog_help.js.es6
@@ -0,0 +1,56 @@
+/* global Cookies */
+const Vue = require('vue');
+
+const Store = gl.issueBoards.BoardsStore;
+const ModalStore = gl.issueBoards.ModalStore;
+
+module.exports = Vue.extend({
+  mixins: [gl.issueBoards.ModalMixins],
+  data() {
+    return ModalStore.store;
+  },
+  methods: {
+    closeHelp(openModal) {
+      Store.state.helpHidden = true;
+      Cookies.set('boards_backlog_help_hidden', true);
+
+      if (openModal) {
+        this.toggleModal(true);
+      }
+    },
+  },
+  computed: {
+    disabled() {
+      return !Store.state.lists
+        .filter(list => list.type !== 'blank' && list.type !== 'done').length;
+    },
+  },
+  template: `
+    <div class="boards-backlog-help">
+      <h4>
+        We removed the Backlog
+        <button
+          type="button"
+          class="close"
+          aria-label="Close backlog help"
+          @click="closeHelp(false)">
+          <i class="fa fa-times"></i>
+        </button>
+      </h4>
+      <p>
+        <a href="http://docs.gitlab.com/ce/user/project/issue_board.html">Read the docs</a> to find out why
+      </p>
+      <p>
+        You can populate your board using this button
+      </p>
+      <div class="text-center">
+        <button
+          class="btn btn-success"
+          type="button"
+          @click="closeHelp(true)">
+          Add issues
+        </button>
+      </div>
+    </div>
+  `,
+});
diff --git a/app/assets/javascripts/boards/stores/boards_store.js.es6 b/app/assets/javascripts/boards/stores/boards_store.js.es6
index 50842ecbaaa..82c6cf89c73 100644
--- a/app/assets/javascripts/boards/stores/boards_store.js.es6
+++ b/app/assets/javascripts/boards/stores/boards_store.js.es6
@@ -25,6 +25,7 @@
         label_name: gl.utils.getParameterValues('label_name[]'),
         search: ''
       };
+      this.state.helpHidden = Cookies.get('boards_backlog_help_hidden') === 'true';
     },
     addList (listObj) {
       const list = new List(listObj);
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index b362cc758cc..315124d6de3 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -522,3 +522,23 @@
     }
   }
 }
+
+.boards-backlog-help {
+  display: inline-block;
+  width: 250px;
+  padding: 15px;
+  border: 1px solid $border-color;
+  border-radius: 2px;
+  white-space: normal;
+
+  > h4 {
+    margin-top: 0;
+    font-size: 14px;
+  }
+
+  .close {
+    padding: 2px 0;
+    font-size: 12px;
+    line-height: 0;
+  }
+}
diff --git a/app/views/projects/boards/_show.html.haml b/app/views/projects/boards/_show.html.haml
index 05fe504d1c9..0aa6cf54f92 100644
--- a/app/views/projects/boards/_show.html.haml
+++ b/app/views/projects/boards/_show.html.haml
@@ -18,6 +18,7 @@
   .boards-list{ ":class" => "{ 'is-compact': detailIssueVisible }" }
     .boards-app-loading.text-center{ "v-if" => "loading" }
       = icon("spinner spin")
+    %backlog-help{ "v-if" => "hideHelp" }
     %board{ "v-cloak" => true,
       "v-for" => "list in state.lists",
       "ref" => "board",