1 files changed, 19 insertions, 30 deletions
diff --git a/app/assets/javascripts/releases/components/releases_empty_state.vue b/app/assets/javascripts/releases/components/releases_empty_state.vue
index 800497c186a..ae94bd6872e 100644
--- a/app/assets/javascripts/releases/components/releases_empty_state.vue
+++ b/app/assets/javascripts/releases/components/releases_empty_state.vue
@@ -1,44 +1,33 @@
 <script>
-import { GlEmptyState, GlLink } from '@gitlab/ui';
-import { __ } from '~/locale';
+import { GlEmptyState } from '@gitlab/ui';
+import { s__ } from '~/locale';
 
 export default {
   name: 'ReleasesEmptyState',
   components: {
     GlEmptyState,
-    GlLink,
-  },
-  inject: {
-    documentationPath: {
-      default: '',
-    },
-    illustrationPath: {
-      default: '',
-    },
   },
+  inject: ['documentationPath', 'illustrationPath', 'newReleasePath'],
   i18n: {
-    emptyStateTitle: __('Getting started with releases'),
-    emptyStateText: __(
-      "Releases are based on Git tags and mark specific points in a project's development history. They can contain information about the type of changes and can also deliver binaries, like compiled versions of your software.",
+    emptyStateTitle: s__('Release|Getting started with releases'),
+    emptyStateText: s__(
+      "Release|Releases are based on Git tags and mark specific points in a project's development history. They can contain information about the type of changes and can also deliver binaries, like compiled versions of your software.",
     ),
-    releasesDocumentation: __('Releases documentation'),
-    moreInformation: __('More information'),
+    releasesDocumentation: s__('Release|Learn more about releases'),
+    moreInformation: s__('Release|More information'),
+    newRelease: s__('Release|Create a new release'),
   },
 };
 </script>
 <template>
-  <gl-empty-state :title="$options.i18n.emptyStateTitle" :svg-path="illustrationPath">
-    <template #description>
-      <span id="releases-description">
-        {{ $options.i18n.emptyStateText }}
-        <gl-link
-          :href="documentationPath"
-          :aria-label="$options.i18n.releasesDocumentation"
-          target="_blank"
-        >
-          {{ $options.i18n.moreInformation }}
-        </gl-link>
-      </span>
-    </template>
-  </gl-empty-state>
+  <gl-empty-state
+    class="gl-layout-w-limited"
+    :title="$options.i18n.emptyStateTitle"
+    :description="$options.i18n.emptyStateText"
+    :svg-path="illustrationPath"
+    :primary-button-link="newReleasePath"
+    :primary-button-text="$options.i18n.newRelease"
+    :secondary-button-link="documentationPath"
+    :secondary-button-text="$options.i18n.releasesDocumentation"
+  />
 </template>