Merge branch 'afontaine/environment-empty-state' into 'master'

Refactor environment empty state to use scope

See merge request gitlab-org/gitlab!83422

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

@@ -14242,6 +14242,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 ""
 
@@ -14257,9 +14260,6 @@ msgstr ""
 msgid "Environments|Logs from %{start} to %{end}."
 msgstr ""
 
-msgid "Environments|More information"
-msgstr ""
-
 msgid "Environments|New environment"
 msgstr ""
 
@@ -14341,7 +14341,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",
-    );
-  });
-});