Add latest changes from gitlab-org/gitlab@13-5-stable-eev13.5.0-rc32

9 files changed, 108 insertions, 63 deletions

diff --git a/app/assets/javascripts/releases/components/app_edit_new.vue b/app/assets/javascripts/releases/components/app_edit_new.vue
index e1edf3d689d..3080dd0e424 100644
--- a/app/assets/javascripts/releases/components/app_edit_new.vue
+++ b/app/assets/javascripts/releases/components/app_edit_new.vue
@@ -1,8 +1,7 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import { mapState, mapActions, mapGetters } from 'vuex';
-import { GlButton, GlFormInput, GlFormGroup } from '@gitlab/ui';
-import { __, sprintf } from '~/locale';
+import { GlButton, GlFormInput, GlFormGroup, GlSprintf } from '@gitlab/ui';
+import { __ } from '~/locale';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
 import { BACK_URL_PARAM } from '~/releases/constants';
 import { getParameterByName } from '~/lib/utils/common_utils';
@@ -17,6 +16,7 @@ export default {
     GlFormInput,
     GlFormGroup,
     GlButton,
+    GlSprintf,
     MarkdownField,
     AssetLinksForm,
     MilestoneCombobox,
@@ -41,18 +41,6 @@ export default {
     showForm() {
       return Boolean(!this.isFetchingRelease && !this.fetchError && this.release);
     },
-    subtitleText() {
-      return sprintf(
-        __(
-          'Releases are based on Git tags. We recommend tags that use semantic versioning, for example %{codeStart}v1.0%{codeEnd}, %{codeStart}v2.0-pre%{codeEnd}.',
-        ),
-        {
-          codeStart: '<code>',
-          codeEnd: '</code>',
-        },
-        false,
-      );
-    },
     releaseTitle: {
       get() {
         return this.$store.state.detail.release.name;
@@ -127,7 +115,19 @@ export default {
 </script>
 <template>
   <div class="d-flex flex-column">
-    <p class="pt-3 js-subtitle-text" v-html="subtitleText"></p>
+    <p class="pt-3 js-subtitle-text">
+      <gl-sprintf
+        :message="
+          __(
+            'Releases are based on Git tags. We recommend tags that use semantic versioning, for example %{codeStart}v1.0%{codeEnd}, %{codeStart}v2.0-pre%{codeEnd}.',
+          )
+        "
+      >
+        <template #code="{ content }">
+          <code>{{ content }}</code>
+        </template>
+      </gl-sprintf>
+    </p>
     <form v-if="showForm" class="js-quick-submit" @submit.prevent="submitForm">
       <tag-field />
       <gl-form-group>
@@ -150,7 +150,7 @@ export default {
           />
         </div>
       </gl-form-group>
-      <gl-form-group>
+      <gl-form-group data-testid="release-notes">
         <label for="release-notes">{{ __('Release notes') }}</label>
         <div class="bordered-box pr-3 pl-3">
           <markdown-field
@@ -158,6 +158,7 @@ export default {
             :markdown-preview-path="markdownPreviewPath"
             :markdown-docs-path="markdownDocsPath"
             :add-spacing-classes="false"
+            :textarea-value="releaseNotes"
             class="gl-mt-3 gl-mb-3"
           >
             <template #textarea>
diff --git a/app/assets/javascripts/releases/components/app_index.vue b/app/assets/javascripts/releases/components/app_index.vue
index b8cf6ce478f..422d8bf630d 100644
--- a/app/assets/javascripts/releases/components/app_index.vue
+++ b/app/assets/javascripts/releases/components/app_index.vue
@@ -1,29 +1,21 @@
 <script>
 import { mapState, mapActions } from 'vuex';
-import {
-  GlDeprecatedSkeletonLoading as GlSkeletonLoading,
-  GlEmptyState,
-  GlLink,
-  GlButton,
-} from '@gitlab/ui';
-import {
-  getParameterByName,
-  historyPushState,
-  buildUrlWithCurrentLocation,
-} from '~/lib/utils/common_utils';
+import { GlEmptyState, GlLink, GlButton } from '@gitlab/ui';
+import { getParameterByName } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
-import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
 import ReleaseBlock from './release_block.vue';
+import ReleasesPagination from './releases_pagination.vue';
+import ReleaseSkeletonLoader from './release_skeleton_loader.vue';
 
 export default {
   name: 'ReleasesApp',
   components: {
-    GlSkeletonLoading,
     GlEmptyState,
-    ReleaseBlock,
-    TablePagination,
     GlLink,
     GlButton,
+    ReleaseBlock,
+    ReleasesPagination,
+    ReleaseSkeletonLoader,
   },
   computed: {
     ...mapState('list', [
@@ -33,7 +25,6 @@ export default {
       'isLoading',
       'releases',
       'hasError',
-      'pageInfo',
     ]),
     shouldRenderEmptyState() {
       return !this.releases.length && !this.hasError && !this.isLoading;
@@ -48,15 +39,23 @@ export default {
     },
   },
   created() {
-    this.fetchReleases({
-      page: getParameterByName('page'),
-    });
+    this.fetchReleases();
+
+    window.addEventListener('popstate', this.fetchReleases);
   },
   methods: {
-    ...mapActions('list', ['fetchReleases']),
-    onChangePage(page) {
-      historyPushState(buildUrlWithCurrentLocation(`?page=${page}`));
-      this.fetchReleases({ page });
+    ...mapActions('list', {
+      fetchReleasesStoreAction: 'fetchReleases',
+    }),
+    fetchReleases() {
+      this.fetchReleasesStoreAction({
+        // these two parameters are only used in "GraphQL mode"
+        before: getParameterByName('before'),
+        after: getParameterByName('after'),
+
+        // this parameter is only used when in "REST mode"
+        page: getParameterByName('page'),
+      });
     },
   },
 };
@@ -74,7 +73,7 @@ export default {
       {{ __('New release') }}
     </gl-button>
 
-    <gl-skeleton-loading v-if="isLoading" class="js-loading" />
+    <release-skeleton-loader v-if="isLoading" class="js-loading" />
 
     <gl-empty-state
       v-else-if="shouldRenderEmptyState"
@@ -105,7 +104,7 @@ export default {
       />
     </div>
 
-    <table-pagination v-if="!isLoading" :change="onChangePage" :page-info="pageInfo" />
+    <releases-pagination v-if="!isLoading" />
   </div>
 </template>
 <style>
diff --git a/app/assets/javascripts/releases/components/app_show.vue b/app/assets/javascripts/releases/components/app_show.vue
index 8b89f0cf3fc..9ef38503c10 100644
--- a/app/assets/javascripts/releases/components/app_show.vue
+++ b/app/assets/javascripts/releases/components/app_show.vue
@@ -1,13 +1,13 @@
 <script>
 import { mapState, mapActions } from 'vuex';
-import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
 import ReleaseBlock from './release_block.vue';
+import ReleaseSkeletonLoader from './release_skeleton_loader.vue';
 
 export default {
   name: 'ReleaseShowApp',
   components: {
-    GlSkeletonLoading,
     ReleaseBlock,
+    ReleaseSkeletonLoader,
   },
   computed: {
     ...mapState('detail', ['isFetchingRelease', 'fetchError', 'release']),
@@ -22,7 +22,7 @@ export default {
 </script>
 <template>
   <div class="gl-mt-3">
-    <gl-skeleton-loading v-if="isFetchingRelease" />
+    <release-skeleton-loader v-if="isFetchingRelease" />
 
     <release-block v-else-if="!fetchError" :release="release" />
   </div>
diff --git a/app/assets/javascripts/releases/components/evidence_block.vue b/app/assets/javascripts/releases/components/evidence_block.vue
index 3724162f6d5..6e6017637d4 100644
--- a/app/assets/javascripts/releases/components/evidence_block.vue
+++ b/app/assets/javascripts/releases/components/evidence_block.vue
@@ -83,11 +83,7 @@ export default {
             <span class="js-expanded monospace gl-pl-2">{{ sha(index) }}</span>
           </template>
         </expand-button>
-        <clipboard-button
-          :title="__('Copy evidence SHA')"
-          :text="sha(index)"
-          css-class="btn-default btn-transparent btn-clipboard"
-        />
+        <clipboard-button :title="__('Copy evidence SHA')" :text="sha(index)" category="tertiary" />
       </div>
 
       <div class="d-flex align-items-center text-muted">
diff --git a/app/assets/javascripts/releases/components/release_block_assets.vue b/app/assets/javascripts/releases/components/release_block_assets.vue
index 8824cbefd7e..60d2b3adfc9 100644
--- a/app/assets/javascripts/releases/components/release_block_assets.vue
+++ b/app/assets/javascripts/releases/components/release_block_assets.vue
@@ -119,7 +119,7 @@ export default {
               {{ section.title }}
             </h5>
             <ul :key="`section-body-${index}`" class="list-unstyled gl-m-0">
-              <li v-for="link in section.links" :key="link.url">
+              <li v-for="link in section.links" :key="link.url" class="gl-display-flex">
                 <gl-link
                   :href="link.directAssetUrl || link.url"
                   class="gl-display-flex gl-align-items-center gl-line-height-24"
diff --git a/app/assets/javascripts/releases/components/release_block_header.vue b/app/assets/javascripts/releases/components/release_block_header.vue
index 95292a26bce..87538244f1a 100644
--- a/app/assets/javascripts/releases/components/release_block_header.vue
+++ b/app/assets/javascripts/releases/components/release_block_header.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlTooltipDirective, GlLink, GlBadge, GlButton, GlIcon } from '@gitlab/ui';
+import { GlTooltipDirective, GlLink, GlBadge, GlButton } from '@gitlab/ui';
 import { BACK_URL_PARAM } from '~/releases/constants';
 import { setUrlParams } from '~/lib/utils/url_utility';
 
@@ -8,7 +8,6 @@ export default {
   components: {
     GlLink,
     GlBadge,
-    GlIcon,
     GlButton,
   },
   directives: {
@@ -55,11 +54,10 @@ export default {
       v-gl-tooltip
       category="primary"
       variant="default"
+      icon="pencil"
       class="gl-mr-3 js-edit-button ml-2 pb-2"
       :title="__('Edit this release')"
       :href="editLink"
-    >
-      <gl-icon name="pencil" />
-    </gl-button>
+    />
   </div>
 </template>
diff --git a/app/assets/javascripts/releases/components/release_skeleton_loader.vue b/app/assets/javascripts/releases/components/release_skeleton_loader.vue
new file mode 100644
index 00000000000..054620af636
--- /dev/null
+++ b/app/assets/javascripts/releases/components/release_skeleton_loader.vue
@@ -0,0 +1,51 @@
+<script>
+import { GlSkeletonLoader } from '@gitlab/ui';
+
+export default {
+  name: 'ReleaseSkeletonLoader',
+  components: { GlSkeletonLoader },
+};
+</script>
+<template>
+  <gl-skeleton-loader :width="1248" :height="420">
+    <!-- Outside border -->
+    <path
+      d="M 4.5 0 C 2.0156486 0 0 2.0156486 0 4.5 L 0 415.5 C 0 417.98435 2.0156486 420 4.5 420 L 1243.5 420 C 1245.9844 420 1248 417.98435 1248 415.5 L 1248 4.5 C 1248 2.0156486 1245.9844 0 1243.5 0 L 4.5 0 z M 4.5 1 L 1243.5 1 C 1245.4476 1 1247 2.5523514 1247 4.5 L 1247 415.5 C 1247 417.44765 1245.4476 419 1243.5 419 L 4.5 419 C 2.5523514 419 1 417.44765 1 415.5 L 1 4.5 C 1 2.5523514 2.5523514 1 4.5 1 z "
+    />
+
+    <!-- Header bottom border -->
+    <rect x="0" y="63.5" width="1248" height="1" />
+
+    <!-- Release title -->
+    <rect x="16" y="20" width="293" height="24" />
+
+    <!-- Edit (pencil) button -->
+    <rect x="1207" y="16" rx="4" width="32" height="32" />
+
+    <!-- Asset link 1 -->
+    <rect x="40" y="121" rx="4" width="16" height="16" />
+    <rect x="60" y="125" width="116" height="8" />
+
+    <!-- Asset link 2 -->
+    <rect x="40" y="145" rx="4" width="16" height="16" />
+    <rect x="60" y="149" width="132" height="8" />
+
+    <!-- Asset link 3 -->
+    <rect x="40" y="169" rx="4" width="16" height="16" />
+    <rect x="60" y="173" width="140" height="8" />
+
+    <!-- Asset link 4 -->
+    <rect x="40" y="193" rx="4" width="16" height="16" />
+    <rect x="60" y="197" width="112" height="8" />
+
+    <!-- Release notes -->
+    <rect x="16" y="228" width="480" height="8" />
+    <rect x="16" y="252" width="560" height="8" />
+    <rect x="16" y="276" width="480" height="8" />
+    <rect x="16" y="300" width="560" height="8" />
+    <rect x="16" y="324" width="320" height="8" />
+
+    <!-- Footer top border -->
+    <rect x="0" y="373" width="1248" height="1" />
+  </gl-skeleton-loader>
+</template>
diff --git a/app/assets/javascripts/releases/components/releases_pagination_graphql.vue b/app/assets/javascripts/releases/components/releases_pagination_graphql.vue
index a4fe407a5bd..cb6f1fa18a1 100644
--- a/app/assets/javascripts/releases/components/releases_pagination_graphql.vue
+++ b/app/assets/javascripts/releases/components/releases_pagination_graphql.vue
@@ -13,14 +13,14 @@ export default {
     },
   },
   methods: {
-    ...mapActions('list', ['fetchReleasesGraphQl']),
+    ...mapActions('list', ['fetchReleases']),
     onPrev(before) {
       historyPushState(buildUrlWithCurrentLocation(`?before=${before}`));
-      this.fetchReleasesGraphQl({ before });
+      this.fetchReleases({ before });
     },
     onNext(after) {
       historyPushState(buildUrlWithCurrentLocation(`?after=${after}`));
-      this.fetchReleasesGraphQl({ after });
+      this.fetchReleases({ after });
     },
   },
 };
diff --git a/app/assets/javascripts/releases/components/releases_pagination_rest.vue b/app/assets/javascripts/releases/components/releases_pagination_rest.vue
index 992cc4cd469..334458a2302 100644
--- a/app/assets/javascripts/releases/components/releases_pagination_rest.vue
+++ b/app/assets/javascripts/releases/components/releases_pagination_rest.vue
@@ -7,18 +7,18 @@ export default {
   name: 'ReleasesPaginationRest',
   components: { TablePagination },
   computed: {
-    ...mapState('list', ['pageInfo']),
+    ...mapState('list', ['restPageInfo']),
   },
   methods: {
-    ...mapActions('list', ['fetchReleasesRest']),
+    ...mapActions('list', ['fetchReleases']),
     onChangePage(page) {
       historyPushState(buildUrlWithCurrentLocation(`?page=${page}`));
-      this.fetchReleasesRest({ page });
+      this.fetchReleases({ page });
     },
   },
 };
 </script>
 
 <template>
-  <table-pagination :change="onChangePage" :page-info="pageInfo" />
+  <table-pagination :change="onChangePage" :page-info="restPageInfo" />
 </template>