Fixed bug with empty state showing after search

Fixed users href path being incorrect

app/assets/javascripts/boards/boards_bundle.js.es6

@@ -44,6 +44,7 @@ $(() => {
       boardId: $boardApp.dataset.boardId,
       disabled: $boardApp.dataset.disabled === 'true',
       issueLinkBase: $boardApp.dataset.issueLinkBase,
+      rootPath: $boardApp.dataset.rootPath,
       detailIssue: Store.detail
     },
     computed: {

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

@@ -22,7 +22,8 @@
     props: {
       list: Object,
       disabled: Boolean,
-      issueLinkBase: String
+      issueLinkBase: String,
+      rootPath: String,
     },
     data () {
       return {

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

@@ -18,7 +18,8 @@
       issue: Object,
       issueLinkBase: String,
       disabled: Boolean,
-      index: Number
+      index: Number,
+      rootPath: String,
     },
     data () {
       return {

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

@@ -23,6 +23,7 @@
       issues: Array,
       loading: Boolean,
       issueLinkBase: String,
+      rootPath: String,
     },
     data () {
       return {

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

@@ -65,7 +65,7 @@
       gl.Subscription.bindAll('.subscription');
     },
     components: {
-      'remove-btn': gl.issueBoards.RemoveIssueBtn,
+      removeBtn: gl.issueBoards.RemoveIssueBtn,
     },
   });
 })();

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

@@ -7,7 +7,7 @@
 
   gl.issueBoards.IssueCardInner = Vue.extend({
     props: [
-      'issue', 'issueLinkBase', 'list',
+      'issue', 'issueLinkBase', 'list', 'rootPath',
     ],
     methods: {
       showLabel(label) {
@@ -57,11 +57,11 @@
           <span
             class="card-number"
             v-if="issue.id">
-            #{{issue.id}}
+            #{{ issue.id }}
           </span>
           <a
             class="card-assignee has-tooltip"
-            :href="issue.assignee.username"
+            :href="rootPath + issue.assignee.username"
             :title="'Assigned to ' + issue.assignee.name"
             v-if="issue.assignee"
             data-container="body">
@@ -69,7 +69,8 @@
               class="avatar avatar-inline s20"
               :src="issue.assignee.avatar"
               width="20"
-              height="20" />
+              height="20"
+              :alt="'Avatar for ' + issue.assignee.name" />
           </a>
           <button
             class="label color-label has-tooltip"

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

@@ -31,10 +31,10 @@
       },
     },
     template: `
-      <div class="empty-state">
+      <section 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>
+            <aside class="svg-content" v-html="image"></aside>
           </div>
           <div class="col-xs-12 col-sm-6 col-sm-pull-6">
             <div class="text-content">
@@ -56,7 +56,7 @@
             </div>
           </div>
         </div>
-      </div>
+      </section>
     `,
   });
 })();

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

@@ -27,8 +27,7 @@
       addIssues() {
         const list = this.selectedList;
         const selectedIssues = ModalStore.getSelectedIssues();
-        const issueIds = selectedIssues.filter(issue => issue.selected)
-          .map(issue => issue.globalId);
+        const issueIds = selectedIssues.map(issue => issue.globalId);
 
         // Post the data to the backend
         this.$http.post(this.bulkUpdatePath, {

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

@@ -41,10 +41,10 @@
             </button>
           </h2>
         </header>
-        <modal-tabs v-if="!loading && issues.length > 0"></modal-tabs>
+        <modal-tabs v-if="!loading && issuesCount > 0"></modal-tabs>
         <div
           class="add-issues-search append-bottom-10"
-          v-if="activeTab == 'all' && !loading && issues.length > 0">
+          v-if="activeTab == 'all' && !loading && issuesCount > 0">
           <input
             placeholder="Search issues..."
             class="form-control"

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

@@ -10,6 +10,7 @@
   gl.issueBoards.IssuesModal = Vue.extend({
     props: [
       'blankStateImage', 'newIssuePath', 'bulkUpdatePath', 'issueLinkBase',
+      'rootPath',
     ],
     data() {
       return ModalStore.store;
@@ -57,6 +58,10 @@
           });
 
           this.loadingNewPage = false;
+
+          if (!this.issuesCount) {
+            this.issuesCount = this.issues.length;
+          }
         });
       },
     },
@@ -66,7 +71,7 @@
           return this.selectedIssues.length > 0;
         }
 
-        return this.issues.length > 0;
+        return this.issuesCount > 0;
       },
     },
     components: {
@@ -83,9 +88,10 @@
           <modal-header></modal-header>
           <modal-list
             :issue-link-base="issueLinkBase"
+            :root-path="rootPath"
             v-if="!loading && showList"></modal-list>
           <empty-state
-            v-if="(!loading && issues.length === 0) || (activeTab === 'selected' && selectedIssues.length === 0)"
+            v-if="(!loading && issuesCount === 0) || (activeTab === 'selected' && selectedIssues.length === 0)"
             :image="blankStateImage"
             :new-issue-path="newIssuePath"></empty-state>
           <section

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

@@ -7,7 +7,7 @@
 
   gl.issueBoards.ModalList = Vue.extend({
     props: [
-      'issueLinkBase',
+      'issueLinkBase', 'rootPath',
     ],
     data() {
       return ModalStore.store;
@@ -97,7 +97,7 @@
       issueCardInner: gl.issueBoards.IssueCardInner,
     },
     template: `
-      <div
+      <section
         class="add-issues-list add-issues-list-columns"
         ref="list">
         <div
@@ -110,16 +110,19 @@
             @click="toggleIssue($event, issue)">
             <issue-card-inner
               :issue="issue"
-              :issue-link-base="issueLinkBase">
+              :issue-link-base="issueLinkBase"
+              :root-path="rootPath">
             </issue-card-inner>
             <span
+              :aria-label="'Issue #' + issue.id + ' selected'"
+              aria-checked="true"
               v-if="issue.selected"
               class="issue-card-selected text-center">
               <i class="fa fa-check"></i>
             </span>
           </div>
         </div>
-      </div>
+      </section>
     `,
   });
 })();

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

@@ -24,7 +24,7 @@
               @click.prevent="activeTab = 'all'">
               <span>All issues</span>
               <span class="badge">
-                {{ issues.length }}
+                {{ issuesCount }}
               </span>
             </a>
           </li>

app/assets/javascripts/boards/services/board_service.js.es6

@@ -13,7 +13,7 @@ class BoardService {
       generate: {
         method: 'POST',
         url: `${root}/${boardId}/lists/generate.json`
-      },
+      }
     });
     this.issue = Vue.resource(`${root}/${boardId}/issues{/id}`, {});
     this.issues = Vue.resource(`${root}/${boardId}/lists{/id}/issues`, {});

app/assets/javascripts/boards/stores/boards_store.js.es6

@@ -115,9 +115,6 @@
     },
     updateFiltersUrl () {
       history.pushState(null, null, `?${$.param(this.state.filters)}`);
-    },
-    modalSelectedCount() {
-      return this.modal.selectedIssues.length;
-    },
+    }
   };
 })();

app/assets/javascripts/boards/stores/modal_store.js.es6

@@ -6,6 +6,7 @@
     constructor() {
       this.store = {
         issues: [],
+        issuesCount: false,
         selectedIssues: [],
         showAddIssuesModal: false,
         activeTab: 'all',
@@ -19,7 +20,7 @@
     }
 
     selectedCount() {
-      return this.store.selectedIssues.filter(issue => issue.selected).length;
+      return this.getSelectedIssues().length;
     }
 
     toggleIssue(issueObj) {

app/helpers/boards_helper.rb

@@ -6,7 +6,8 @@ module BoardsHelper
       endpoint: namespace_project_boards_path(@project.namespace, @project),
       board_id: board.id,
       disabled: "#{!can?(current_user, :admin_list, @project)}",
-      issue_link_base: namespace_project_issues_path(@project.namespace, @project)
+      issue_link_base: namespace_project_issues_path(@project.namespace, @project),
+      root_path: root_path,
     }
   end
 end

app/views/projects/boards/_show.html.haml

@@ -24,9 +24,11 @@
       ":list" => "list",
       ":disabled" => "disabled",
       ":issue-link-base" => "issueLinkBase",
+      ":root-path" => "rootPath",
       ":key" => "_uid" }
   = render "projects/boards/components/sidebar"
   %board-add-issues-modal{ "blank-state-image" => render('shared/empty_states/icons/issues.svg'),
     "new-issue-path" => new_namespace_project_issue_path(@project.namespace, @project),
     "bulk-update-path" => bulk_update_namespace_project_issues_path(@project.namespace, @project),
-    ":issue-link-base" => "issueLinkBase" }
+    ":issue-link-base" => "issueLinkBase",
+    ":root-path" => "rootPath" }

app/views/projects/boards/components/_board.html.haml

@@ -29,6 +29,7 @@
       ":loading" => "list.loading",
       ":disabled" => "disabled",
       ":issue-link-base" => "issueLinkBase",
+      ":root-path" => "rootPath",
       "ref" => "board-list" }
     - if can?(current_user, :admin_list, @project)
       = render "projects/boards/components/blank_state"

app/views/projects/boards/components/_board_list.html.haml

@@ -34,6 +34,7 @@
       ":list" => "list",
       ":issue" => "issue",
       ":issue-link-base" => "issueLinkBase",
+      ":root-path" => "rootPath",
       ":disabled" => "disabled",
       ":key" => "issue.id" }
     %li.board-list-count.text-center{ "v-if" => "showCount" }

app/views/projects/boards/components/_card.html.haml

@@ -6,4 +6,5 @@
   "@mouseup" => "showIssue($event)" }
   %issue-card-inner{ ":list" => "list",
     ":issue" => "issue",
-    ":issue-link-base" => "issueLinkBase" }
+    ":issue-link-base" => "issueLinkBase",
+    ":root-path" => "rootPath" }

spec/features/boards/add_issues_modal_spec.rb

@@ -90,6 +90,7 @@ describe 'Issue Boards add issue modal', :feature, :js do
           find('.form-control').native.send_keys('testing search')
 
           expect(page).not_to have_selector('.card')
+          expect(page).not_to have_content("You haven't added any issues to your project yet")
         end
       end
     end