diff options
author | Filipa Lacerda <lacerda.filipa@gmail.com> | 2017-02-14 10:54:58 +0000 |
---|---|---|
committer | Filipa Lacerda <lacerda.filipa@gmail.com> | 2017-02-14 10:54:58 +0000 |
commit | e6f512657e0307ed927493035ecce977f774a1bd (patch) | |
tree | 671ed09177ba402d78acb74552f152e9f92576a4 | |
parent | ba92981ff8faa36a2aa2a09adbc656c169a61620 (diff) | |
parent | 95cc64369c75300d2c930808111a148e92250c8a (diff) | |
download | gitlab-ce-e6f512657e0307ed927493035ecce977f774a1bd.tar.gz |
Merge branch 'no-backlog-help' into '8-17-stable'
Added help box where backlog list used to be
See merge request !9106
-rw-r--r-- | app/assets/javascripts/boards/boards_bundle.js.es6 | 9 | ||||
-rw-r--r-- | app/assets/javascripts/boards/components/boards_backlog_help.js.es6 | 51 | ||||
-rw-r--r-- | app/assets/javascripts/boards/components/modal/footer.js.es6 | 2 | ||||
-rw-r--r-- | app/assets/javascripts/boards/components/modal/header.js.es6 | 2 | ||||
-rw-r--r-- | app/assets/javascripts/boards/icons/checkmark.js | 1 | ||||
-rw-r--r-- | app/assets/javascripts/boards/mixins/modal_mixins.js.es6 | 11 | ||||
-rw-r--r-- | app/assets/javascripts/boards/stores/boards_store.js.es6 | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/boards.scss | 36 | ||||
-rw-r--r-- | app/views/projects/boards/_show.html.haml | 1 | ||||
-rw-r--r-- | spec/features/boards/add_issues_modal_spec.rb | 16 | ||||
-rw-r--r-- | spec/features/boards/backlog_help_spec.rb | 47 | ||||
-rw-r--r-- | spec/features/boards/boards_spec.rb | 4 | ||||
-rw-r--r-- | spec/features/boards/modal_filter_spec.rb | 4 | ||||
-rw-r--r-- | spec/features/boards/new_issue_spec.rb | 4 |
14 files changed, 179 insertions, 10 deletions
diff --git a/app/assets/javascripts/boards/boards_bundle.js.es6 b/app/assets/javascripts/boards/boards_bundle.js.es6 index c345fb6ce14..0df72023107 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); @@ -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> `, 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..832fb91a272 --- /dev/null +++ b/app/assets/javascripts/boards/components/boards_backlog_help.js.es6 @@ -0,0 +1,51 @@ +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> + `, +}); diff --git a/app/assets/javascripts/boards/components/modal/footer.js.es6 b/app/assets/javascripts/boards/components/modal/footer.js.es6 index 1cbc422c961..5a2887552df 100644 --- a/app/assets/javascripts/boards/components/modal/footer.js.es6 +++ b/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> diff --git a/app/assets/javascripts/boards/components/modal/header.js.es6 b/app/assets/javascripts/boards/components/modal/header.js.es6 index 70c088f9054..99f9da104fe 100644 --- a/app/assets/javascripts/boards/components/modal/header.js.es6 +++ b/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> diff --git a/app/assets/javascripts/boards/icons/checkmark.js b/app/assets/javascripts/boards/icons/checkmark.js new file mode 100644 index 00000000000..03f2d4c02aa --- /dev/null +++ b/app/assets/javascripts/boards/icons/checkmark.js @@ -0,0 +1 @@ +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>'; diff --git a/app/assets/javascripts/boards/mixins/modal_mixins.js.es6 b/app/assets/javascripts/boards/mixins/modal_mixins.js.es6 index d378b7d4baf..abc1eb333fd 100644 --- a/app/assets/javascripts/boards/mixins/modal_mixins.js.es6 +++ b/app/assets/javascripts/boards/mixins/modal_mixins.js.es6 @@ -1,10 +1,17 @@ +/* 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; 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..cb2bc1998e8 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/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; + } +} 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", diff --git a/spec/features/boards/add_issues_modal_spec.rb b/spec/features/boards/add_issues_modal_spec.rb index 2875fc1e533..d37d1581476 100644 --- a/spec/features/boards/add_issues_modal_spec.rb +++ b/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 diff --git a/spec/features/boards/backlog_help_spec.rb b/spec/features/boards/backlog_help_spec.rb new file mode 100644 index 00000000000..c074c71bced --- /dev/null +++ b/spec/features/boards/backlog_help_spec.rb @@ -0,0 +1,47 @@ +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 diff --git a/spec/features/boards/boards_spec.rb b/spec/features/boards/boards_spec.rb index 34f47daf0e5..4b6e69ef8ec 100644 --- a/spec/features/boards/boards_spec.rb +++ b/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') diff --git a/spec/features/boards/modal_filter_spec.rb b/spec/features/boards/modal_filter_spec.rb index 1cf0d11d448..ce2f26e813a 100644 --- a/spec/features/boards/modal_filter_spec.rb +++ b/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 diff --git a/spec/features/boards/new_issue_spec.rb b/spec/features/boards/new_issue_spec.rb index 6d14a8cf483..33f7ffea4e7 100644 --- a/spec/features/boards/new_issue_spec.rb +++ b/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 |