Refactor environment empty state to use scope

The empty state reported that you didn't have any environments
regardless of scope, which was a bit misleading if you had many
available environments and no stopped environments.

I have refactored the component to allow the scope to be injected so the
text can change depending on what scope the user is looking at.

I've also refactored the rest of the translations to follow more
up-to-date patterns, and rewritten the tests to utilize the testing
library's queries for finding things by role.

Changelog: fixed

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

 <script>
+import { s__ } from '~/locale';
+import { ENVIRONMENTS_SCOPE } from '../constants';
+
 export default {
   name: 'EnvironmentsEmptyState',
   props: {
@@ -6,6 +9,25 @@ export default {
       type: String,
       required: true,
     },
+    scope: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    title() {
+      return this.$options.i18n.title[this.scope];
+    },
+  },
+  i18n: {
+    title: {
+      [ENVIRONMENTS_SCOPE.AVAILABLE]: s__("Environments|You don't have any environments."),
+      [ENVIRONMENTS_SCOPE.STOPPED]: s__("Environments|You don't have any stopped environments."),
+    },
+    content: s__(
+      'Environments|Environments are places where code gets deployed, such as staging or production.',
+    ),
+    link: s__('Environments|How do I create an environment?'),
   },
 };
 </script>
@@ -13,14 +35,11 @@ export default {
   <div class="empty-state">
     <div class="text-content">
       <h4 class="js-blank-state-title">
-        {{ s__("Environments|You don't have any environments right now") }}
+        {{ title }}
       </h4>
       <p>
-        {{
-          s__(`Environments|Environments are places where
-        code gets deployed, such as staging or production.`)
-        }}
-        <a :href="helpPath"> {{ s__('Environments|More information') }} </a>
+        {{ $options.i18n.content }}
+        <a :href="helpPath"> {{ $options.i18n.link }} </a>
       </p>
     </div>
   </div>

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

@@ -253,7 +253,7 @@ export default {
         @change="resetPolling"
       />
     </template>
-    <empty-state v-else :help-path="helpPagePath" />
+    <empty-state v-else :help-path="helpPagePath" :scope="scope" />
     <gl-pagination
       align="center"
       :total-items="totalItems"

locale/gitlab.pot

@@ -14190,6 +14190,9 @@ msgstr ""
 msgid "Environments|Environments are places where code gets deployed, such as staging or production."
 msgstr ""
 
+msgid "Environments|How do I create an environment?"
+msgstr ""
+
 msgid "Environments|Install Elastic Stack on your cluster to enable advanced querying capabilities such as full text search."
 msgstr ""
 
@@ -14205,9 +14208,6 @@ msgstr ""
 msgid "Environments|Logs from %{start} to %{end}."
 msgstr ""
 
-msgid "Environments|More information"
-msgstr ""
-
 msgid "Environments|New environment"
 msgstr ""
 
@@ -14289,7 +14289,10 @@ msgstr ""
 msgid "Environments|Updated"
 msgstr ""
 
-msgid "Environments|You don't have any environments right now"
+msgid "Environments|You don't have any environments."
+msgstr ""
+
+msgid "Environments|You don't have any stopped environments."
 msgstr ""
 
 msgid "Environments|by %{avatar}"

spec/features/projects/environments/environments_spec.rb

@@ -70,7 +70,7 @@ RSpec.describe 'Environments page', :js do
         it 'shows no environments' do
           visit_environments(project, scope: 'stopped')
 
-          expect(page).to have_content('You don\'t have any environments right now')
+          expect(page).to have_content(s_('Environments|You don\'t have any stopped environments.'))
         end
       end
 
@@ -99,7 +99,7 @@ RSpec.describe 'Environments page', :js do
         it 'shows no environments' do
           visit_environments(project, scope: 'available')
 
-          expect(page).to have_content('You don\'t have any environments right now')
+          expect(page).to have_content(s_('Environments|You don\'t have any environments.'))
         end
       end
 
@@ -120,7 +120,7 @@ RSpec.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(s_('Environments|You don\'t have any environments.'))
 
       expect(page).to have_link("#{_('Available')} 0")
       expect(page).to have_link("#{_('Stopped')} 0")

spec/frontend/environments/empty_state_spec.js

+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import { s__ } from '~/locale';
+import EmptyState from '~/environments/components/empty_state.vue';
+import { ENVIRONMENTS_SCOPE } from '~/environments/constants';
+
+const HELP_PATH = '/help';
+
+describe('~/environments/components/empty_state.vue', () => {
+  let wrapper;
+
+  const createWrapper = ({ propsData = {} } = {}) =>
+    mountExtended(EmptyState, {
+      propsData: {
+        scope: ENVIRONMENTS_SCOPE.AVAILABLE,
+        helpPath: HELP_PATH,
+        ...propsData,
+      },
+    });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('shows an empty state for available environments', () => {
+    wrapper = createWrapper();
+
+    const title = wrapper.findByRole('heading', {
+      name: s__("Environments|You don't have any environments."),
+    });
+
+    expect(title.exists()).toBe(true);
+  });
+
+  it('shows an empty state for stopped environments', () => {
+    wrapper = createWrapper({ propsData: { scope: ENVIRONMENTS_SCOPE.STOPPED } });
+
+    const title = wrapper.findByRole('heading', {
+      name: s__("Environments|You don't have any stopped environments."),
+    });
+
+    expect(title.exists()).toBe(true);
+  });
+
+  it('shows a link to the the help path', () => {
+    wrapper = createWrapper();
+
+    const link = wrapper.findByRole('link', {
+      name: s__('Environments|How do I create an environment?'),
+    });
+
+    expect(link.attributes('href')).toBe(HELP_PATH);
+  });
+});

spec/frontend/environments/emtpy_state_spec.js

-import { shallowMount } from '@vue/test-utils';
-import EmptyState from '~/environments/components/empty_state.vue';
-
-describe('environments empty state', () => {
-  let vm;
-
-  beforeEach(() => {
-    vm = shallowMount(EmptyState, {
-      propsData: {
-        helpPath: 'bar',
-      },
-    });
-  });
-
-  afterEach(() => {
-    vm.destroy();
-  });
-
-  it('renders the empty state', () => {
-    expect(vm.find('.js-blank-state-title').text()).toEqual(
-      "You don't have any environments right now",
-    );
-  });
-});