Updated blank state for environments and deployments

Closes #18661

5 files changed, 43 insertions, 9 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..bfd8a11ce93 100644
--- a/app/views/projects/environments/index.html.haml
+++ b/app/views/projects/environments/index.html.haml
@@ -3,16 +3,19 @@
 = 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.
+      = link_to "Read more", help_page_path("ci", "environments"), class: "btn btn-success"
   - 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