Add latest changes from gitlab-org/gitlab@master

2 files changed, 39 insertions, 16 deletions

diff --git a/app/assets/javascripts/releases/components/app_index.vue b/app/assets/javascripts/releases/components/app_index.vue
index b9e80899e25..511b3cda9c8 100644
--- a/app/assets/javascripts/releases/components/app_index.vue
+++ b/app/assets/javascripts/releases/components/app_index.vue
@@ -1,11 +1,12 @@
 <script>
 import { mapState, mapActions } from 'vuex';
-import { GlSkeletonLoading, GlEmptyState } from '@gitlab/ui';
+import { GlSkeletonLoading, GlEmptyState, GlLink } from '@gitlab/ui';
 import {
   getParameterByName,
   historyPushState,
   buildUrlWithCurrentLocation,
 } from '~/lib/utils/common_utils';
+import { __ } from '~/locale';
 import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
 import ReleaseBlock from './release_block.vue';
 
@@ -16,13 +17,14 @@ export default {
     GlEmptyState,
     ReleaseBlock,
     TablePagination,
+    GlLink,
   },
   props: {
     projectId: {
       type: String,
       required: true,
     },
-    documentationLink: {
+    documentationPath: {
       type: String,
       required: true,
     },
@@ -30,6 +32,11 @@ export default {
       type: String,
       required: true,
     },
+    newReleasePath: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   computed: {
     ...mapState('list', ['isLoading', 'releases', 'hasError', 'pageInfo']),
@@ -39,6 +46,11 @@ export default {
     shouldRenderSuccessState() {
       return this.releases.length && !this.isLoading && !this.hasError;
     },
+    emptyStateText() {
+      return __(
+        "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.",
+      );
+    },
   },
   created() {
     this.fetchReleases({
@@ -56,7 +68,16 @@ export default {
 };
 </script>
 <template>
-  <div class="prepend-top-default">
+  <div class="flex flex-column mt-2">
+    <gl-link
+      v-if="newReleasePath"
+      :href="newReleasePath"
+      :aria-describedby="shouldRenderEmptyState && 'releases-description'"
+      class="btn btn-success align-self-end mb-2 js-new-release-btn"
+    >
+      {{ __('New release') }}
+    </gl-link>
+
     <gl-skeleton-loading v-if="isLoading" class="js-loading" />
 
     <gl-empty-state
@@ -64,14 +85,20 @@ export default {
       class="js-empty-state"
       :title="__('Getting started with releases')"
       :svg-path="illustrationPath"
-      :description="
-        __(
-          '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.',
-        )
-      "
-      :primary-button-link="documentationLink"
-      :primary-button-text="__('Open Documentation')"
-    />
+    >
+      <template #description>
+        <span id="releases-description">
+          {{ emptyStateText }}
+          <gl-link
+            :href="documentationPath"
+            :aria-label="__('Releases documentation')"
+            target="_blank"
+          >
+            {{ __('More information') }}
+          </gl-link>
+        </span>
+      </template>
+    </gl-empty-state>
 
     <div v-else-if="shouldRenderSuccessState" class="js-success-state">
       <release-block
diff --git a/app/assets/javascripts/releases/mount_index.js b/app/assets/javascripts/releases/mount_index.js
index ad82d9a65d6..5f0bf3b6459 100644
--- a/app/assets/javascripts/releases/mount_index.js
+++ b/app/assets/javascripts/releases/mount_index.js
@@ -15,11 +15,7 @@ export default () => {
     }),
     render: h =>
       h(ReleaseListApp, {
-        props: {
-          projectId: el.dataset.projectId,
-          documentationLink: el.dataset.documentationPath,
-          illustrationPath: el.dataset.illustrationPath,
-        },
+        props: el.dataset,
       }),
   });
 };