Added empty state

7 files changed, 103 insertions, 8 deletions

diff --git a/app/assets/javascripts/boards/components/modal/empty_state.js.es6 b/app/assets/javascripts/boards/components/modal/empty_state.js.es6
new file mode 100644
index 00000000000..efea12ef7d8
--- /dev/null
+++ b/app/assets/javascripts/boards/components/modal/empty_state.js.es6
@@ -0,0 +1,65 @@
+/* global Vue */
+(() => {
+  const ModalStore = gl.issueBoards.ModalStore;
+
+  window.gl = window.gl || {};
+  window.gl.issueBoards = window.gl.issueBoards || {};
+
+  gl.issueBoards.ModalEmptyState = Vue.extend({
+    data() {
+      return ModalStore.store;
+    },
+    props: [
+      'image', 'newIssuePath',
+    ],
+    computed: {
+      contents() {
+        const obj = {
+          title: 'You haven\'t added any issues to your project yet',
+          content: `
+            An issue can be a bug, a todo or a feature request that needs to be
+            discussed in a project. Besides, issues are searchable and filterable.
+          `,
+        };
+
+        if (this.activeTab === 'selected') {
+          obj.title = 'You haven\'t selected any issues yet';
+          obj.content = `
+            Go back to <strong>All issues</strong> and select some issues
+            to add to your board.
+          `;
+        }
+
+        return obj;
+      }
+    },
+    template: `
+      <div class="empty-state">
+        <div class="row">
+          <div class="col-xs-12 col-sm-6 col-sm-push-6">
+            <div class="svg-content" v-html="image"></div>
+          </div>
+          <div class="col-xs-12 col-sm-6 col-sm-pull-6">
+            <div class="text-content">
+              <h4>{{ contents.title }}</h4>
+              <p v-html="contents.content"></p>
+              <a
+                :href="newIssuePath"
+                class="btn btn-success btn-inverted"
+                v-if="activeTab === 'all'">
+                Create issue
+              </a>
+              <button
+                type="button"
+                class="btn btn-default"
+                @click="activeTab = 'all'"
+                v-if="activeTab === 'selected'">
+                All issues
+              </button>
+            </div>
+          </div>
+        </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 d2156759785..9d60d59bcb1 100644
--- a/app/assets/javascripts/boards/components/modal/footer.js.es6
+++ b/app/assets/javascripts/boards/components/modal/footer.js.es6
@@ -44,7 +44,8 @@
       'lists-dropdown': gl.issueBoards.ModalFooterListsDropdown,
     },
     template: `
-      <footer class="form-actions add-issues-footer">
+      <footer
+        class="form-actions add-issues-footer">
         <div class="pull-left">
           <button
             class="btn btn-success"
diff --git a/app/assets/javascripts/boards/components/modal/header.js.es6 b/app/assets/javascripts/boards/components/modal/header.js.es6
index a91e3da2060..f6acfed9270 100644
--- a/app/assets/javascripts/boards/components/modal/header.js.es6
+++ b/app/assets/javascripts/boards/components/modal/header.js.es6
@@ -40,10 +40,10 @@
             </button>
           </h2>
         </header>
-        <modal-tabs v-if="!loading"></modal-tabs>
+        <modal-tabs v-if="!loading && issues.length > 0"></modal-tabs>
         <div
-          class="add-issues-search prepend-top-10 append-bottom-10"
-          v-if="activeTab == 'all' && !loading">
+          class="add-issues-search append-bottom-10"
+          v-if="activeTab == 'all' && !loading && issues.length > 0">
           <input
             placeholder="Search issues..."
             class="form-control"
diff --git a/app/assets/javascripts/boards/components/modal/index.js.es6 b/app/assets/javascripts/boards/components/modal/index.js.es6
index 2dfc7f16c21..30fe66703b7 100644
--- a/app/assets/javascripts/boards/components/modal/index.js.es6
+++ b/app/assets/javascripts/boards/components/modal/index.js.es6
@@ -2,6 +2,7 @@
 //= require ./header
 //= require ./list
 //= require ./footer
+//= require ./empty_state
 (() => {
   const ModalStore = gl.issueBoards.ModalStore;
 
@@ -9,6 +10,9 @@
   window.gl.issueBoards = window.gl.issueBoards || {};
 
   gl.issueBoards.IssuesModal = Vue.extend({
+    props: [
+      'blankStateImage', 'newIssuePath',
+    ],
     data() {
       return ModalStore.store;
     },
@@ -48,10 +52,20 @@
         });
       },
     },
+    computed: {
+      showList() {
+        if (this.activeTab === 'selected') {
+          return this.selectedIssues.length > 0;
+        }
+
+        return this.issues.length > 0;
+      },
+    },
     components: {
       'modal-header': gl.issueBoards.IssuesModalHeader,
       'modal-list': gl.issueBoards.ModalList,
       'modal-footer': gl.issueBoards.ModalFooter,
+      'empty-state': gl.issueBoards.ModalEmptyState,
     },
     template: `
       <div
@@ -59,7 +73,11 @@
         v-if="showAddIssuesModal">
         <div class="add-issues-container">
           <modal-header></modal-header>
-          <modal-list v-if="!loading"></modal-list>
+          <modal-list v-if="!loading && showList"></modal-list>
+          <empty-state
+            v-if="(!loading && issues.length === 0) || (activeTab === 'selected' && selectedIssues.length === 0)"
+            :image="blankStateImage"
+            :new-issue-path="newIssuePath"></empty-state>
           <section
             class="add-issues-list text-center"
             v-if="loading">
diff --git a/app/assets/javascripts/boards/components/modal/list.js.es6 b/app/assets/javascripts/boards/components/modal/list.js.es6
index 4f6da0b493c..8180f200649 100644
--- a/app/assets/javascripts/boards/components/modal/list.js.es6
+++ b/app/assets/javascripts/boards/components/modal/list.js.es6
@@ -66,8 +66,7 @@
     template: `
       <div
         class="add-issues-list add-issues-list-columns"
-        ref="list"
-        v-show="!loading">
+        ref="list">
         <div
           v-for="issue in loopIssues"
           v-if="showIssue(issue)"
diff --git a/app/assets/javascripts/boards/components/modal/tabs.js.es6 b/app/assets/javascripts/boards/components/modal/tabs.js.es6
index c165b81a774..fecd92f70ba 100644
--- a/app/assets/javascripts/boards/components/modal/tabs.js.es6
+++ b/app/assets/javascripts/boards/components/modal/tabs.js.es6
@@ -18,7 +18,7 @@
       this.activeTab = 'all';
     },
     template: `
-      <div class="top-area prepend-top-10">
+      <div class="top-area prepend-top-10 append-bottom-10">
         <ul class="nav-links issues-state-filters">
           <li :class="{ 'active': activeTab == 'all' }">
             <a
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 842ae0c083f..04e7aea63fd 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -378,6 +378,18 @@
   background-color: $white-light;
   border-radius: $border-radius-default;
   box-shadow: 0 2px 12px rgba($black, .5);
+
+  .empty-state {
+    display: flex;
+    flex: 1;
+    margin-top: 0;
+
+    > .row {
+      width: 100%;
+      margin-top: auto;
+      margin-bottom: auto;
+    }
+  }
 }
 
 .add-issues-header {