Add latest changes from gitlab-org/gitlab@master

4 files changed, 122 insertions, 6 deletions

diff --git a/app/assets/javascripts/releases/components/app_index_apollo_client.vue b/app/assets/javascripts/releases/components/app_index_apollo_client.vue
index b915ec9c98f..df2a3c76efc 100644
--- a/app/assets/javascripts/releases/components/app_index_apollo_client.vue
+++ b/app/assets/javascripts/releases/components/app_index_apollo_client.vue
@@ -4,13 +4,14 @@ import createFlash from '~/flash';
 import { getParameterByName } from '~/lib/utils/common_utils';
 import { scrollUp } from '~/lib/utils/scroll_utils';
 import { __ } from '~/locale';
-import { PAGE_SIZE } from '~/releases/constants';
+import { PAGE_SIZE, RELEASED_AT_DESC } from '~/releases/constants';
 import allReleasesQuery from '~/releases/graphql/queries/all_releases.query.graphql';
 import { convertAllReleasesGraphQLResponse } from '~/releases/util';
 import ReleaseBlock from './release_block.vue';
 import ReleaseSkeletonLoader from './release_skeleton_loader.vue';
 import ReleasesEmptyState from './releases_empty_state.vue';
 import ReleasesPaginationApolloClient from './releases_pagination_apollo_client.vue';
+import ReleasesSortApolloClient from './releases_sort_apollo_client.vue';
 
 export default {
   name: 'ReleasesIndexApolloClientApp',
@@ -20,6 +21,7 @@ export default {
     ReleaseSkeletonLoader,
     ReleasesEmptyState,
     ReleasesPaginationApolloClient,
+    ReleasesSortApolloClient,
   },
   inject: {
     projectPath: {
@@ -56,6 +58,7 @@ export default {
         before: getParameterByName('before'),
         after: getParameterByName('after'),
       },
+      sort: RELEASED_AT_DESC,
     };
   },
   computed: {
@@ -76,6 +79,7 @@ export default {
       return {
         fullPath: this.projectPath,
         ...paginationParams,
+        sort: this.sort,
       };
     },
     isLoading() {
@@ -124,6 +128,9 @@ export default {
     window.removeEventListener('popstate', this.updateQueryParamsFromUrl);
   },
   methods: {
+    getReleaseKey(release, index) {
+      return [release.tagNamerstrs, release.name, index].join('|');
+    },
     updateQueryParamsFromUrl() {
       this.cursors.before = getParameterByName('before');
       this.cursors.after = getParameterByName('after');
@@ -148,6 +155,8 @@ export default {
 <template>
   <div class="flex flex-column mt-2">
     <div class="gl-align-self-end gl-mb-3">
+      <releases-sort-apollo-client v-model="sort" class="gl-mr-2" />
+
       <gl-button
         v-if="newReleasePath"
         :href="newReleasePath"
@@ -165,7 +174,7 @@ export default {
     <div v-else-if="shouldRenderSuccessState">
       <release-block
         v-for="(release, index) in releases"
-        :key="index"
+        :key="getReleaseKey(release, index)"
         :release="release"
         :class="{ 'linked-card': releases.length > 1 && index !== releases.length - 1 }"
       />
diff --git a/app/assets/javascripts/releases/components/releases_sort.vue b/app/assets/javascripts/releases/components/releases_sort.vue
index 4988904a2cd..d4210dad19c 100644
--- a/app/assets/javascripts/releases/components/releases_sort.vue
+++ b/app/assets/javascripts/releases/components/releases_sort.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlSorting, GlSortingItem } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
-import { ASCENDING_ODER, DESCENDING_ORDER, SORT_OPTIONS } from '../constants';
+import { ASCENDING_ORDER, DESCENDING_ORDER, SORT_OPTIONS } from '../constants';
 
 export default {
   name: 'ReleasesSort',
@@ -22,13 +22,13 @@ export default {
       return option.label;
     },
     isSortAscending() {
-      return this.sort === ASCENDING_ODER;
+      return this.sort === ASCENDING_ORDER;
     },
   },
   methods: {
     ...mapActions('index', ['setSorting']),
     onDirectionChange() {
-      const sort = this.isSortAscending ? DESCENDING_ORDER : ASCENDING_ODER;
+      const sort = this.isSortAscending ? DESCENDING_ORDER : ASCENDING_ORDER;
       this.setSorting({ sort });
       this.$emit('sort:changed');
     },
diff --git a/app/assets/javascripts/releases/components/releases_sort_apollo_client.vue b/app/assets/javascripts/releases/components/releases_sort_apollo_client.vue
new file mode 100644
index 00000000000..c102a2765c9
--- /dev/null
+++ b/app/assets/javascripts/releases/components/releases_sort_apollo_client.vue
@@ -0,0 +1,90 @@
+<script>
+import { GlSorting, GlSortingItem } from '@gitlab/ui';
+import {
+  ASCENDING_ORDER,
+  DESCENDING_ORDER,
+  SORT_OPTIONS,
+  RELEASED_AT,
+  CREATED_AT,
+  RELEASED_AT_ASC,
+  RELEASED_AT_DESC,
+  CREATED_ASC,
+  ALL_SORTS,
+  SORT_MAP,
+} from '../constants';
+
+export default {
+  name: 'ReleasesSortApolloclient',
+  components: {
+    GlSorting,
+    GlSortingItem,
+  },
+  props: {
+    value: {
+      type: String,
+      required: true,
+      validator: (sort) => ALL_SORTS.includes(sort),
+    },
+  },
+  computed: {
+    orderBy() {
+      if (this.value === RELEASED_AT_ASC || this.value === RELEASED_AT_DESC) {
+        return RELEASED_AT;
+      }
+
+      return CREATED_AT;
+    },
+    direction() {
+      if (this.value === RELEASED_AT_ASC || this.value === CREATED_ASC) {
+        return ASCENDING_ORDER;
+      }
+
+      return DESCENDING_ORDER;
+    },
+    sortOptions() {
+      return SORT_OPTIONS;
+    },
+    sortText() {
+      return this.sortOptions.find((s) => s.orderBy === this.orderBy).label;
+    },
+    isDirectionAscending() {
+      return this.direction === ASCENDING_ORDER;
+    },
+  },
+  methods: {
+    onDirectionChange() {
+      const direction = this.isDirectionAscending ? DESCENDING_ORDER : ASCENDING_ORDER;
+      this.emitInputEventIfChanged(this.orderBy, direction);
+    },
+    onSortItemClick(item) {
+      this.emitInputEventIfChanged(item.orderBy, this.direction);
+    },
+    isActiveSortItem(item) {
+      return this.orderBy === item.orderBy;
+    },
+    emitInputEventIfChanged(orderBy, direction) {
+      const newSort = SORT_MAP[orderBy][direction];
+      if (newSort !== this.value) {
+        this.$emit('input', SORT_MAP[orderBy][direction]);
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-sorting
+    :text="sortText"
+    :is-ascending="isDirectionAscending"
+    @sortDirectionChange="onDirectionChange"
+  >
+    <gl-sorting-item
+      v-for="item of sortOptions"
+      :key="item.orderBy"
+      :active="isActiveSortItem(item)"
+      @click="onSortItemClick(item)"
+    >
+      {{ item.label }}
+    </gl-sorting-item>
+  </gl-sorting>
+</template>
diff --git a/app/assets/javascripts/releases/constants.js b/app/assets/javascripts/releases/constants.js
index f9653e0befa..ac31b2a3384 100644
--- a/app/assets/javascripts/releases/constants.js
+++ b/app/assets/javascripts/releases/constants.js
@@ -15,7 +15,7 @@ export const DEFAULT_ASSET_LINK_TYPE = ASSET_LINK_TYPE.OTHER;
 
 export const PAGE_SIZE = 10;
 
-export const ASCENDING_ODER = 'asc';
+export const ASCENDING_ORDER = 'asc';
 export const DESCENDING_ORDER = 'desc';
 export const RELEASED_AT = 'released_at';
 export const CREATED_AT = 'created_at';
@@ -30,3 +30,20 @@ export const SORT_OPTIONS = [
     label: __('Created date'),
   },
 ];
+
+export const RELEASED_AT_ASC = 'RELEASED_AT_ASC';
+export const RELEASED_AT_DESC = 'RELEASED_AT_DESC';
+export const CREATED_ASC = 'CREATED_ASC';
+export const CREATED_DESC = 'CREATED_DESC';
+export const ALL_SORTS = [RELEASED_AT_ASC, RELEASED_AT_DESC, CREATED_ASC, CREATED_DESC];
+
+export const SORT_MAP = {
+  [RELEASED_AT]: {
+    [ASCENDING_ORDER]: RELEASED_AT_ASC,
+    [DESCENDING_ORDER]: RELEASED_AT_DESC,
+  },
+  [CREATED_AT]: {
+    [ASCENDING_ORDER]: CREATED_ASC,
+    [DESCENDING_ORDER]: CREATED_DESC,
+  },
+};