From ea75b72710d8fdbeaab89d5cb9fbf8f9ea7a83cd Mon Sep 17 00:00:00 2001
From: George Tsiolis <tsiolis.g@gmail.com>
Date: Thu, 11 Oct 2018 20:10:20 +0300
Subject: [PATCH] Update environments empty state

---
 .../environments/components/empty_state.vue   | 29 ++++++++++---------
 .../gt-update-environments-empty-state.yml    |  5 ++++
 locale/gitlab.pot                             |  2 +-
 .../environments/environments_spec.rb         |  2 +-
 .../environments/emtpy_state_spec.js          |  4 +--
 .../environments/environments_app_spec.js     |  4 +--
 6 files changed, 26 insertions(+), 20 deletions(-)
 create mode 100644 changelogs/unreleased/gt-update-environments-empty-state.yml

diff --git a/app/assets/javascripts/environments/components/empty_state.vue b/app/assets/javascripts/environments/components/empty_state.vue
index 28d2dda9e43..2360a52645b 100644
--- a/app/assets/javascripts/environments/components/empty_state.vue
+++ b/app/assets/javascripts/environments/components/empty_state.vue
@@ -18,27 +18,28 @@ export default {
 };
 </script>
 <template>
-  <div class="blank-state-row">
-    <div class="blank-state-center">
-      <h2 class="blank-state-title js-blank-state-title">
-        {{ s__("Environments|You don't have any environments right now.") }}
-      </h2>
+  <div class="empty-state">
+    <div class="text-content">
+      <h4 class="blank-state-title js-blank-state-title">
+        {{ s__("Environments|You don't have any environments right now") }}
+      </h4>
       <p class="blank-state-text">
         {{ s__(`Environments|Environments are places where
-code gets deployed, such as staging or production.`) }}
-        <br />
+        code gets deployed, such as staging or production.`) }}
         <a :href="helpPath">
           {{ s__("Environments|Read more about environments") }}
         </a>
       </p>
 
-      <a
-        v-if="canCreateEnvironment"
-        :href="newPath"
-        class="btn btn-success js-new-environment-button"
-      >
-        {{ s__("Environments|New environment") }}
-      </a>
+      <div class="text-center">
+        <a
+          v-if="canCreateEnvironment"
+          :href="newPath"
+          class="btn btn-success js-new-environment-button"
+        >
+          {{ s__("Environments|New environment") }}
+        </a>
+      </div>
     </div>
   </div>
 </template>
diff --git a/changelogs/unreleased/gt-update-environments-empty-state.yml b/changelogs/unreleased/gt-update-environments-empty-state.yml
new file mode 100644
index 00000000000..dcb477cdbe4
--- /dev/null
+++ b/changelogs/unreleased/gt-update-environments-empty-state.yml
@@ -0,0 +1,5 @@
+---
+title: Update environments empty state
+merge_request: 22297
+author: George Tsiolis
+type: other
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index b8c4eddbec1..ce5c541fc95 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -2597,7 +2597,7 @@ msgstr ""
 msgid "Environments|Updated"
 msgstr ""
 
-msgid "Environments|You don't have any environments right now."
+msgid "Environments|You don't have any environments right now"
 msgstr ""
 
 msgid "Epic"
diff --git a/spec/features/projects/environments/environments_spec.rb b/spec/features/projects/environments/environments_spec.rb
index f0890018286..917ba495f01 100644
--- a/spec/features/projects/environments/environments_spec.rb
+++ b/spec/features/projects/environments/environments_spec.rb
@@ -95,7 +95,7 @@ describe 'Environments page', :js do
     end
 
     it 'does not show environments and counters are set to zero' do
-      expect(page).to have_content('You don\'t have any environments right now.')
+      expect(page).to have_content('You don\'t have any environments right now')
 
       expect(page.find('.js-environments-tab-available .badge').text).to eq('0')
       expect(page.find('.js-environments-tab-stopped .badge').text).to eq('0')
diff --git a/spec/javascripts/environments/emtpy_state_spec.js b/spec/javascripts/environments/emtpy_state_spec.js
index 10a19af4175..d71dfe8197e 100644
--- a/spec/javascripts/environments/emtpy_state_spec.js
+++ b/spec/javascripts/environments/emtpy_state_spec.js
@@ -27,7 +27,7 @@ describe('environments empty state', () => {
     it('renders empty state and new environment button', () => {
       expect(
         vm.$el.querySelector('.js-blank-state-title').textContent.trim(),
-      ).toEqual('You don\'t have any environments right now.');
+      ).toEqual('You don\'t have any environments right now');
 
       expect(
         vm.$el.querySelector('.js-new-environment-button').getAttribute('href'),
@@ -47,7 +47,7 @@ describe('environments empty state', () => {
     it('renders empty state without new button', () => {
       expect(
         vm.$el.querySelector('.js-blank-state-title').textContent.trim(),
-      ).toEqual('You don\'t have any environments right now.');
+      ).toEqual('You don\'t have any environments right now');
 
       expect(
         vm.$el.querySelector('.js-new-environment-button'),
diff --git a/spec/javascripts/environments/environments_app_spec.js b/spec/javascripts/environments/environments_app_spec.js
index 1be983f3592..7edc0ccac0b 100644
--- a/spec/javascripts/environments/environments_app_spec.js
+++ b/spec/javascripts/environments/environments_app_spec.js
@@ -50,7 +50,7 @@ describe('Environment', () => {
 
         expect(
           component.$el.querySelector('.js-blank-state-title').textContent,
-        ).toContain('You don\'t have any environments right now.');
+        ).toContain('You don\'t have any environments right now');
       });
     });
 
@@ -127,7 +127,7 @@ describe('Environment', () => {
     it('should render empty state', () => {
       expect(
         component.$el.querySelector('.js-blank-state-title').textContent,
-      ).toContain('You don\'t have any environments right now.');
+      ).toContain('You don\'t have any environments right now');
     });
   });
 
-- 
GitLab