Merge branch 'blank-state' into 'master'

Updated blank state for environments and deployments

## What does this MR do?

Adds a designed blank state to environments and deployments.

@markpundsack do we want to hide the new environments when empty? Looks weird otherwise with the green button at the top.

## What are the relevant issue numbers?

Closes #18661 

## Screenshots (if relevant)

![Screen_Shot_2016-06-21_at_09.55.03](/uploads/cf768aba3fd85a596d24b7be4fe6a6c0/Screen_Shot_2016-06-21_at_09.55.03.png)

![Screen_Shot_2016-06-21_at_09.55.10](/uploads/b7b7dba90b613cfa867b084661b36b06/Screen_Shot_2016-06-21_at_09.55.10.png)

See merge request !4818

6 files changed, 51 insertions, 12 deletions

diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index 3cbddc59f11..a306b8f3f29 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -37,3 +37,4 @@
 @import "framework/timeline.scss";
 @import "framework/typography.scss";
 @import "framework/zen.scss";
+@import "framework/blank";
diff --git a/app/assets/stylesheets/framework/blank.scss b/app/assets/stylesheets/framework/blank.scss
new file mode 100644
index 00000000000..40b5171a8c6
--- /dev/null
+++ b/app/assets/stylesheets/framework/blank.scss
@@ -0,0 +1,23 @@
+.blank-state {
+  padding-top: 20px;
+  padding-bottom: 20px;
+  text-align: center;
+}
+
+.blank-state-no-icon {
+  padding-top: 40px;
+  padding-bottom: 40px;  
+}
+
+.blank-state-title {
+  margin-top: 0;
+  margin-bottom: 5px;
+  font-size: 19px;
+  font-weight: normal;
+}
+
+.blank-state-text {
+  margin-top: 0;
+  margin-bottom: $gl-padding;
+  font-size: 15px;
+}
diff --git a/app/views/projects/environments/index.html.haml b/app/views/projects/environments/index.html.haml
index ae9e77e7d89..a03f117291f 100644
--- a/app/views/projects/environments/index.html.haml
+++ b/app/views/projects/environments/index.html.haml
@@ -3,16 +3,24 @@
 = render "projects/pipelines/head"
 
 %div{ class: (container_class) }
-  - if can?(current_user, :create_environment, @project)
+  - if can?(current_user, :create_environment, @project) && !@environments.blank?
     .top-area
       .nav-controls
         = link_to new_namespace_project_environment_path(@project.namespace, @project), class: 'btn btn-create' do
           New environment
 
   - if @environments.blank?
-    %ul.content-list.environments
-      %li.nothing-here-block
-        No environments to show
+    .blank-state.blank-state-no-icon
+      %h2.blank-state-title
+        You don't have any environments right now.
+      %p.blank-state-text
+        Environments are places where code gets deployed, such as staging or production.
+        %br
+        = succeed "." do
+          = link_to "Read more about environments", help_page_path("ci", "environments")
+      - if can?(current_user, :create_environment, @project)
+        = link_to new_namespace_project_environment_path(@project.namespace, @project), class: 'btn btn-create' do
+          New environment
   - else
     .table-holder
       %table.table.environments
diff --git a/app/views/projects/environments/new.html.haml b/app/views/projects/environments/new.html.haml
index 54465828ba9..da325efecd2 100644
--- a/app/views/projects/environments/new.html.haml
+++ b/app/views/projects/environments/new.html.haml
@@ -4,6 +4,9 @@
   .col-lg-3
     %h4.prepend-top-0
       New Environment
-    %p Environments allow you to track deployments of your application
+    %p
+      Environments allow you to track deployments of your application
+      = succeed "." do
+        = link_to "Read more about environments", help_page_path("ci", "environments")
 
   = render 'form'
diff --git a/app/views/projects/environments/show.html.haml b/app/views/projects/environments/show.html.haml
index 069b77b5adf..4c15e2759d6 100644
--- a/app/views/projects/environments/show.html.haml
+++ b/app/views/projects/environments/show.html.haml
@@ -13,10 +13,14 @@
           = link_to 'Destroy', namespace_project_environment_path(@project.namespace, @project, @environment), data: { confirm: 'Are you sure you want to delete this environment?' }, class: 'btn btn-danger', method: :delete
 
   - if @deployments.blank?
-    %ul.content-list.environments
-      %li.nothing-here-block
-        No deployments for
-        %strong= @environment.name
+    .blank-state.blank-state-no-icon
+      %h2.blank-state-title
+        You don't have any deployments right now.
+      %p.blank-state-text
+        Define environments in the deploy stage(s) in
+        %code .gitlab-ci.yml
+        to track deployments here.
+      = link_to "Read more", help_page_path("ci", "environments"), class: "btn btn-success"
   - else
     .table-holder
       %table.table.environments
diff --git a/spec/features/environments_spec.rb b/spec/features/environments_spec.rb
index 40fea5211e9..7fb28f4174b 100644
--- a/spec/features/environments_spec.rb
+++ b/spec/features/environments_spec.rb
@@ -20,7 +20,7 @@ feature 'Environments', feature: true do
 
     context 'without environments' do
       scenario 'does show no environments' do
-        expect(page).to have_content('No environments to show')
+        expect(page).to have_content('You don\'t have any environments right now.')
       end
     end
 
@@ -61,7 +61,7 @@ feature 'Environments', feature: true do
 
     context 'without deployments' do
       scenario 'does show no deployments' do
-        expect(page).to have_content('No deployments for')
+        expect(page).to have_content('You don\'t have any deployments right now.')
       end
     end
 
@@ -108,7 +108,7 @@ feature 'Environments', feature: true do
         end
 
         scenario 'does create a new pipeline' do
-          expect(page).to have_content('production')
+          expect(page).to have_content('Production')
         end
       end