Merge branch 'no-backlog-help' into '8-17-stable'

Added help box where backlog list used to be

See merge request !9106

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);
@@ -104,7 +111,7 @@ $(() => {
         class="btn btn-create pull-right prepend-left-10 has-tooltip"
         type="button"
         :disabled="disabled"
-        @click="toggleModal(true)">
+        @click="toggleModal(true, false)">
         Add issues
       </button>
     `,

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

+const Vue = require('vue');
+const checkmarkIcon = require('../icons/checkmark');
+
+const Store = gl.issueBoards.BoardsStore;
+const ModalStore = gl.issueBoards.ModalStore;
+
+module.exports = Vue.extend({
+  mixins: [gl.issueBoards.ModalMixins],
+  data() {
+    return ModalStore.store;
+  },
+  computed: {
+    disabled() {
+      return !Store.state.lists
+        .filter(list => list.type !== 'blank' && list.type !== 'done').length;
+    },
+  },
+  template: `
+    <div class="boards-backlog-help text-center">
+      <h4>
+        We moved the Backlog
+        <button
+          type="button"
+          class="close"
+          aria-label="Close backlog help"
+          @click="toggleModal(false)">
+          <i
+            class="fa fa-times"
+            aria-hidden="true">
+          </i>
+        </button>
+      </h4>
+      <div class="backlog-help-icon">${checkmarkIcon}</div>
+      <p>
+        <a href="http://docs.gitlab.com/ce/user/project/issue_board.html">Read the docs</a> for more details
+      </p>
+      <p>
+        Populate the board using this button
+      </p>
+      <div class="text-center">
+        <button
+          class="btn btn-success"
+          type="button"
+          :disabled="disabled"
+          @click="toggleModal(true, false)">
+          Add issues
+        </button>
+      </div>
+    </div>
+  `,
+});

app/assets/javascripts/boards/components/modal/footer.js.es6

@@ -74,7 +74,7 @@ require('./lists_dropdown');
         <button
           class="btn btn-default pull-right"
           type="button"
-          @click="toggleModal(false)">
+          @click="toggleModal(false, false)">
           Cancel
         </button>
       </footer>

app/assets/javascripts/boards/components/modal/header.js.es6

@@ -57,7 +57,7 @@ const modalFilters = require('./filters');
               class="close"
               data-dismiss="modal"
               aria-label="Close"
-              @click="toggleModal(false)">
+              @click="toggleModal(false, false)">
               <span aria-hidden="true">×</span>
             </button>
           </h2>

app/assets/javascripts/boards/icons/checkmark.js

+module.exports = '<svg viewBox="0 0 28 22" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="m45.4978994 24.9892046c0 .4726429-.1654225.8743833-.4962726 1.2052333l-15.2426565 15.2426565c-.33085.33085-.7325904.4962725-1.2052333.4962725-.4726428 0-.8743833-.1654225-1.2052333-.4962725l-8.8265615-8.8265616c-.33085-.33085-.4962726-.7325904-.4962726-1.2052333 0-.4726428.1654226-.8743833.4962726-1.2052333l2.4104666-2.4104666c.33085-.33085.7325904-.4962725 1.2052333-.4962725s.8743833.1654225 1.2052333.4962725l5.2108616 5.2285857 11.6269566-11.6446806c.33085-.33085.7325905-.4962726 1.2052333-.4962726.4726429 0 .8743833.1654226 1.2052333.4962726l2.4104666 2.4104666c.3308501.33085.4962726.7325904.4962726 1.2052333z"/><mask id="b" fill="#fff" height="21.0561348" width="27.4722297" x="0" y="0"><use xlink:href="#a"/></mask></defs><use fill="none" mask="url(#b)" stroke="#1a97d5" stroke-width="2" transform="translate(-18 -20)" xlink:href="#a"/></svg>';

app/assets/javascripts/boards/mixins/modal_mixins.js.es6

+/* global Cookies */
 (() => {
+  const Store = gl.issueBoards.BoardsStore;
   const ModalStore = gl.issueBoards.ModalStore;
 
   gl.issueBoards.ModalMixins = {
     methods: {
-      toggleModal(toggle) {
-        ModalStore.store.showAddIssuesModal = toggle;
+      toggleModal(toggleModal, setCookie = true) {
+        if (setCookie) {
+          Cookies.set('boards_backlog_help_hidden', true);
+          Store.state.helpHidden = true;
+        }
+
+        ModalStore.store.showAddIssuesModal = toggleModal;
       },
       changeTab(tab) {
         ModalStore.store.activeTab = tab;

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);

app/assets/stylesheets/pages/boards.scss

@@ -522,3 +522,39 @@
     }
   }
 }
+
+.boards-backlog-help {
+  display: inline-block;
+  width: 260px;
+  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;
+  }
+}
+
+.backlog-help-icon {
+  display: -webkit-flex;
+  display: flex;
+  margin: 15px auto;
+  width: 60px;
+  height: 60px;
+  border: 1px solid $blue-normal;
+  border-radius: 50%;
+
+  > svg {
+    width: 35px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}

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",

spec/features/boards/add_issues_modal_spec.rb

@@ -25,13 +25,13 @@ describe 'Issue Boards add issue modal', :feature, :js do
 
   context 'modal interaction' do
     it 'opens modal' do
-      click_button('Add issues')
+      click_add_issues
 
       expect(page).to have_selector('.add-issues-modal')
     end
 
     it 'closes modal' do
-      click_button('Add issues')
+      click_add_issues
 
       page.within('.add-issues-modal') do
         find('.close').click
@@ -41,7 +41,7 @@ describe 'Issue Boards add issue modal', :feature, :js do
     end
 
     it 'closes modal if cancel button clicked' do
-      click_button('Add issues')
+      click_add_issues
 
       page.within('.add-issues-modal') do
         click_button 'Cancel'
@@ -53,7 +53,7 @@ describe 'Issue Boards add issue modal', :feature, :js do
 
   context 'issues list' do
     before do
-      click_button('Add issues')
+      click_add_issues
 
       wait_for_vue_resource
     end
@@ -86,7 +86,7 @@ describe 'Issue Boards add issue modal', :feature, :js do
 
         first('.board-delete').click
 
-        click_button('Add issues')
+        click_add_issues
 
         wait_for_vue_resource
 
@@ -230,4 +230,10 @@ describe 'Issue Boards add issue modal', :feature, :js do
       end
     end
   end
+
+  def click_add_issues
+    page.within('.issue-boards-search') do
+      click_button('Add issues')
+    end
+  end
 end

spec/features/boards/backlog_help_spec.rb

+require 'rails_helper'
+
+describe 'Issue Boards', :feature, :js do
+  include WaitForVueResource
+
+  let(:project) { create(:empty_project, :public) }
+  let(:board) { create(:board, project: project) }
+  let(:user) { create(:user) }
+  let!(:issue) { create(:issue, project: project) }
+  let!(:planning) { create(:label, project: project, name: 'Planning') }
+  let!(:list1) { create(:list, board: board, label: planning, position: 0) }
+
+  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 backlog help box' do
+    expect(page).to have_selector('.boards-backlog-help')
+  end
+
+  it 'closes backlog help box' do
+    page.within '.boards-backlog-help' do
+      find('.close').click
+    end
+
+    expect(page).not_to have_selector('.boards-backlog-help')
+  end
+
+  it 'closes backlog help box after adding issues' do
+    page.within '.boards-backlog-help' do
+      click_button 'Add issues'
+    end
+
+    page.within('.add-issues-modal') do
+      find('.card').click
+
+      click_button 'Add 1 issue'
+    end
+
+    expect(page).not_to have_selector('.boards-backlog-help')
+  end
+end

spec/features/boards/boards_spec.rb

@@ -80,6 +80,10 @@ describe 'Issue Boards', feature: true, js: true do
 
       wait_for_vue_resource
 
+      page.within('.boards-backlog-help') do
+        find('.close').click
+      end
+
       expect(page).to have_selector('.board', count: 3)
       expect(find('.board:nth-child(1)')).to have_selector('.card')
       expect(find('.board:nth-child(2)')).to have_selector('.card')

spec/features/boards/modal_filter_spec.rb

@@ -254,6 +254,10 @@ describe 'Issue Boards add issue modal filtering', :feature, :js do
     visit namespace_project_board_path(project.namespace, project, board)
     wait_for_vue_resource
 
+    page.within '.boards-backlog-help' do
+      find('.close').click
+    end
+
     click_button('Add issues')
   end
 end

spec/features/boards/new_issue_spec.rb

@@ -18,6 +18,10 @@ describe 'Issue Boards new issue', feature: true, js: true do
       visit namespace_project_board_path(project.namespace, project, board)
       wait_for_vue_resource
 
+      page.within('.boards-backlog-help') do
+        find('.close').click
+      end
+
       expect(page).to have_selector('.board', count: 2)
     end