Update environments empty state

app/assets/javascripts/environments/components/empty_state.vue

@@ -18,20 +18,20 @@ 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>
 
+      <div class="text-center">
         <a
           v-if="canCreateEnvironment"
           :href="newPath"
@@ -41,4 +41,5 @@ code gets deployed, such as staging or production.`) }}
         </a>
       </div>
     </div>
+  </div>
 </template>

changelogs/unreleased/gt-update-environments-empty-state.yml

+---
+title: Update environments empty state
+merge_request: 22297
+author: George Tsiolis
+type: other

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"

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')

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'),

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');
     });
   });