1 files changed, 25 insertions, 6 deletions
diff --git a/app/assets/javascripts/environments/components/empty_state.vue b/app/assets/javascripts/environments/components/empty_state.vue
index 36b9b647af7..563fa6c96fb 100644
--- a/app/assets/javascripts/environments/components/empty_state.vue
+++ b/app/assets/javascripts/environments/components/empty_state.vue
@@ -1,4 +1,7 @@
 <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>