Commit 1bfa7425 authored by Phil Hughes's avatar Phil Hughes

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
parent ba92981f
...@@ -16,6 +16,7 @@ require('./components/board'); ...@@ -16,6 +16,7 @@ require('./components/board');
require('./components/board_sidebar'); require('./components/board_sidebar');
require('./components/new_list_dropdown'); require('./components/new_list_dropdown');
require('./components/modal/index'); require('./components/modal/index');
const backlogHelp = require('./components/boards_backlog_help');
require('../vue_shared/vue_resource_interceptor'); require('../vue_shared/vue_resource_interceptor');
$(() => { $(() => {
...@@ -37,6 +38,7 @@ $(() => { ...@@ -37,6 +38,7 @@ $(() => {
'board': gl.issueBoards.Board, 'board': gl.issueBoards.Board,
'board-sidebar': gl.issueBoards.BoardSidebar, 'board-sidebar': gl.issueBoards.BoardSidebar,
'board-add-issues-modal': gl.issueBoards.IssuesModal, 'board-add-issues-modal': gl.issueBoards.IssuesModal,
backlogHelp,
}, },
data: { data: {
state: Store.state, state: Store.state,
...@@ -53,6 +55,11 @@ $(() => { ...@@ -53,6 +55,11 @@ $(() => {
detailIssueVisible () { detailIssueVisible () {
return Object.keys(this.detailIssue.issue).length; return Object.keys(this.detailIssue.issue).length;
}, },
hideHelp() {
if (this.loading) return false;
return !this.state.helpHidden;
},
}, },
created () { created () {
gl.boardService = new BoardService(this.endpoint, this.bulkUpdatePath, this.boardId); gl.boardService = new BoardService(this.endpoint, this.bulkUpdatePath, this.boardId);
......
/* 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>
`,
});
...@@ -25,6 +25,7 @@ ...@@ -25,6 +25,7 @@
label_name: gl.utils.getParameterValues('label_name[]'), label_name: gl.utils.getParameterValues('label_name[]'),
search: '' search: ''
}; };
this.state.helpHidden = Cookies.get('boards_backlog_help_hidden') === 'true';
}, },
addList (listObj) { addList (listObj) {
const list = new List(listObj); const list = new List(listObj);
......
...@@ -522,3 +522,23 @@ ...@@ -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;
}
}
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
.boards-list{ ":class" => "{ 'is-compact': detailIssueVisible }" } .boards-list{ ":class" => "{ 'is-compact': detailIssueVisible }" }
.boards-app-loading.text-center{ "v-if" => "loading" } .boards-app-loading.text-center{ "v-if" => "loading" }
= icon("spinner spin") = icon("spinner spin")
%backlog-help{ "v-if" => "hideHelp" }
%board{ "v-cloak" => true, %board{ "v-cloak" => true,
"v-for" => "list in state.lists", "v-for" => "list in state.lists",
"ref" => "board", "ref" => "board",
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment