Merge branch 'issues-blank-state' into 'master'

Added blank state to issues

## What does this MR do?

Adds new blank state to issues when no issues exist.

Part of #18519 

## Screenshots (if relevant)

![Screen_Shot_2016-06-24_at_16.37.12](/uploads/0c3f385615b29216ef1137bd6fac06af/Screen_Shot_2016-06-24_at_16.37.12.png)

See merge request !4908

10 files changed, 71 insertions, 40 deletions

diff --git a/app/assets/stylesheets/framework/blank.scss b/app/assets/stylesheets/framework/blank.scss
index 40b5171a8c6..d28cda6d62d 100644
--- a/app/assets/stylesheets/framework/blank.scss
+++ b/app/assets/stylesheets/framework/blank.scss
@@ -1,3 +1,12 @@
+.blank-state-welcome {
+  text-align: center;
+  border-bottom: 1px solid $border-color;
+
+  .blank-state-text {
+    margin-bottom: 0;
+  }
+}
+
 .blank-state {
   padding-top: 20px;
   padding-bottom: 20px;
@@ -6,7 +15,15 @@
 
 .blank-state-no-icon {
   padding-top: 40px;
-  padding-bottom: 40px;  
+  padding-bottom: 40px;
+}
+
+.blank-state-icon {
+  padding-bottom: 20px;
+
+  path {
+    fill: $gray-darkest;
+  }
 }
 
 .blank-state-title {
@@ -21,3 +38,7 @@
   margin-bottom: $gl-padding;
   font-size: 15px;
 }
+
+.blank-state-welcome-title {
+  font-size: 24px;
+}
diff --git a/app/helpers/appearances_helper.rb b/app/helpers/appearances_helper.rb
index f240584ccbf..950f323e383 100644
--- a/app/helpers/appearances_helper.rb
+++ b/app/helpers/appearances_helper.rb
@@ -31,7 +31,7 @@ module AppearancesHelper
     end
   end
 
-  def navbar_icon(icon_name)
-    render "shared/icons/#{icon_name}.svg"
+  def navbar_icon(icon_name, size: 16)
+    render "shared/icons/#{icon_name}.svg", size: size
   end
 end
diff --git a/app/views/projects/issues/index.html.haml b/app/views/projects/issues/index.html.haml
index 7ce4c1e5555..312bd86ed04 100644
--- a/app/views/projects/issues/index.html.haml
+++ b/app/views/projects/issues/index.html.haml
@@ -6,21 +6,37 @@
   - if current_user
     = auto_discovery_link_tag(:atom, namespace_project_issues_url(@project.namespace, @project, :atom, private_token: current_user.private_token), title: "#{@project.name} issues")
 
-%div{ class: container_class }
-  .top-area
-    = render 'shared/issuable/nav', type: :issues
-    .nav-controls
-      - if current_user
-        = link_to namespace_project_issues_path(@project.namespace, @project, :atom, { private_token: current_user.private_token }), class: 'btn append-right-10' do
-          = icon('rss')
-          %span.icon-label
-            Subscribe
-      = render 'shared/issuable/search_form', path: namespace_project_issues_path(@project.namespace, @project)
+%div{ class: (container_class) }
+  - if @project.issues.any?
+    .top-area
+      = render 'shared/issuable/nav', type: :issues
+      .nav-controls
+        - if current_user
+          = link_to namespace_project_issues_path(@project.namespace, @project, :atom, { private_token: current_user.private_token }), class: 'btn append-right-10' do
+            = icon('rss')
+            %span.icon-label
+              Subscribe
+        = render 'shared/issuable/search_form', path: namespace_project_issues_path(@project.namespace, @project)
+        - if can? current_user, :create_issue, @project
+          = link_to new_namespace_project_issue_path(@project.namespace, @project, issue: { assignee_id: @issuable_finder.assignee.try(:id), milestone_id: @issuable_finder.milestones.try(:first).try(:id) }), class: "btn btn-new", title: "New Issue", id: "new_issue_link" do
+            New Issue
+    = render 'shared/issuable/filter', type: :issues
+
+    .issues-holder
+      = render "issues"
+  - else
+    .blank-state.blank-state-welcome
+      %h2.blank-state-title.blank-state-welcome-title
+        Welcome to GitLab Issues
+      %p.blank-state-text
+        Code, test, and deploy together
+    .blank-state
+      .blank-state-icon
+        = navbar_icon("issues", size: 50)
+      %h3.blank-state-title
+        You don't have any issues right now.
+      %p.blank-state-text
+        Issues are the best way to track your project progress
       - if can? current_user, :create_issue, @project
-        = link_to new_namespace_project_issue_path(@project.namespace, @project, issue: { assignee_id: @issuable_finder.assignee.try(:id), milestone_id: @issuable_finder.milestones.try(:first).try(:id) }), class: "btn btn-new", title: "New Issue", id: "new_issue_link" do
+        = link_to new_namespace_project_issue_path(@project.namespace, @project), class: "btn btn-new", title: "New Issue", id: "new_issue_link" do
           New Issue
-
-  = render 'shared/issuable/filter', type: :issues
-
-  .issues-holder
-    = render "issues"
diff --git a/app/views/shared/icons/_issues.svg b/app/views/shared/icons/_issues.svg
deleted file mode 100644
index 2682c27ade9..00000000000
--- a/app/views/shared/icons/_issues.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 3.7.2 (28276) - http://www.bohemiancoding.com/sketch -->
-    <title>Group</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Group" fill="#7E7C7C">
-            <path d="M8,0 C3.581,0 0,3.581 0,8 C0,12.419 3.581,16 8,16 C12.419,16 16,12.419 16,8 C16,3.581 12.419,0 8,0 M8,2 C11.308,2 14,4.692 14,8 C14,11.308 11.308,14 8,14 C4.692,14 2,11.308 2,8 C2,4.692 4.692,2 8,2" id="Fill-1"></path>
-            <path d="M7.1597,4 L8.8887,4 L8.8887,8 L7.1107,8 L7.1597,4 Z M7.1597,9.6667 L8.8887,9.6667 L8.8887,11.4447 L7.1107,11.4447 L7.1597,9.6667 Z" id="Combined-Shape"></path>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/app/views/shared/icons/_issues.svg.erb b/app/views/shared/icons/_issues.svg.erb
new file mode 100644
index 00000000000..fa8655b5609
--- /dev/null
+++ b/app/views/shared/icons/_issues.svg.erb
@@ -0,0 +1,4 @@
+<svg width="<%= size %>" height="<%= size %>" viewBox="0 0 16 16" class="gitlab-icon">
+  <path fill="#7E7C7C" d="M8,0 C3.581,0 0,3.581 0,8 C0,12.419 3.581,16 8,16 C12.419,16 16,12.419 16,8 C16,3.581 12.419,0 8,0 M8,2 C11.308,2 14,4.692 14,8 C14,11.308 11.308,14 8,14 C4.692,14 2,11.308 2,8 C2,4.692 4.692,2 8,2"></path>
+  <path fill="#7E7C7C" d="M7.1597,4 L8.8887,4 L8.8887,8 L7.1107,8 L7.1597,4 Z M7.1597,9.6667 L8.8887,9.6667 L8.8887,11.4447 L7.1107,11.4447 L7.1597,9.6667 Z"></path>
+</svg>
diff --git a/features/dashboard/dashboard.feature b/features/dashboard/dashboard.feature
index db73309804c..1f4c9020731 100644
--- a/features/dashboard/dashboard.feature
+++ b/features/dashboard/dashboard.feature
@@ -7,6 +7,7 @@ Feature: Dashboard
     And project "Shop" has CI enabled
     And project "Shop" has CI build
     And project "Shop" has labels: "bug", "feature", "enhancement"
+    And project "Shop" has issue: "bug report"
     And I visit dashboard page
 
   Scenario: I should see projects list
diff --git a/features/project/merge_requests.feature b/features/project/merge_requests.feature
index 0e97e4d5954..21768c15c17 100644
--- a/features/project/merge_requests.feature
+++ b/features/project/merge_requests.feature
@@ -89,13 +89,6 @@ Feature: Project Merge Requests
     Then The list should be sorted by "Oldest updated"
 
   @javascript
-  Scenario: Visiting Issues after being sorted the list
-    Given I visit project "Shop" merge requests page
-    And I sort the list by "Oldest updated"
-    And I visit project "Shop" issues page
-    Then The list should be sorted by "Oldest updated"
-
-  @javascript
   Scenario: Visiting Merge Requests from a differente Project after sorting
     Given I visit project "Shop" merge requests page
     And I sort the list by "Oldest updated"
diff --git a/features/steps/shared/project.rb b/features/steps/shared/project.rb
index b3411c03118..0b4920883b8 100644
--- a/features/steps/shared/project.rb
+++ b/features/steps/shared/project.rb
@@ -223,6 +223,11 @@ module SharedProject
     create(:label, project: project, title: 'enhancement')
   end
 
+  step 'project "Shop" has issue: "bug report"' do
+    project = Project.find_by(name: "Shop")
+    create(:issue, project: project, title: "bug report")
+  end
+
   step 'project "Shop" has CI enabled' do
     project = Project.find_by(name: "Shop")
     project.enable_ci
diff --git a/spec/features/issues/filter_issues_spec.rb b/spec/features/issues/filter_issues_spec.rb
index 006a06b8235..4b9b5394b61 100644
--- a/spec/features/issues/filter_issues_spec.rb
+++ b/spec/features/issues/filter_issues_spec.rb
@@ -7,6 +7,7 @@ describe 'Filter issues', feature: true do
   let!(:user)      { create(:user)}
   let!(:milestone) { create(:milestone, project: project) }
   let!(:label)     { create(:label, project: project) }
+  let!(:issue1)    { create(:issue, project: project) }
 
   before do
     project.team << [user, :master]
@@ -196,6 +197,7 @@ describe 'Filter issues', feature: true do
         page.within '.labels-filter' do
           click_link 'bug'
         end
+        find('.dropdown-menu-close-icon').click
 
         page.within '.issues-list' do
           expect(page).to have_selector('.issue', count: 1)
@@ -287,7 +289,7 @@ describe 'Filter issues', feature: true do
       wait_for_ajax
 
       page.within '.issues-list' do
-        expect(first('.issue')).to have_content('Frontend')
+        expect(page).to have_content('Frontend')
       end
     end
   end
diff --git a/spec/features/search_spec.rb b/spec/features/search_spec.rb
index 85923f0a19d..d0a301038c4 100644
--- a/spec/features/search_spec.rb
+++ b/spec/features/search_spec.rb
@@ -3,6 +3,8 @@ require 'spec_helper'
 describe "Search", feature: true  do
   let(:user) { create(:user) }
   let(:project) { create(:project, namespace: user.namespace) }
+  let!(:issue) { create(:issue, project: project, assignee: user) }
+  let!(:issue2) { create(:issue, project: project, author: user) }
 
   before do
     login_with(user)