Add latest changes from gitlab-org/gitlab@master

1 files changed, 64 insertions, 0 deletions

diff --git a/app/assets/javascripts/notes/components/sort_discussion.vue b/app/assets/javascripts/notes/components/sort_discussion.vue
new file mode 100644
index 00000000000..16eded52763
--- /dev/null
+++ b/app/assets/javascripts/notes/components/sort_discussion.vue
@@ -0,0 +1,64 @@
+<script>
+import { GlIcon } from '@gitlab/ui';
+import { mapActions, mapGetters } from 'vuex';
+import { __ } from '~/locale';
+import { ASC, DESC } from '../constants';
+
+const SORT_OPTIONS = [
+  { key: DESC, text: __('Newest first'), cls: 'js-newest-first' },
+  { key: ASC, text: __('Oldest first'), cls: 'js-oldest-first' },
+];
+
+export default {
+  SORT_OPTIONS,
+  components: {
+    GlIcon,
+  },
+  computed: {
+    ...mapGetters(['sortDirection']),
+    selectedOption() {
+      return SORT_OPTIONS.find(({ key }) => this.sortDirection === key);
+    },
+    dropdownText() {
+      return this.selectedOption.text;
+    },
+  },
+  methods: {
+    ...mapActions(['setDiscussionSortDirection']),
+    fetchSortedDiscussions(direction) {
+      if (this.isDropdownItemActive(direction)) {
+        return;
+      }
+
+      this.setDiscussionSortDirection(direction);
+    },
+    isDropdownItemActive(sortDir) {
+      return sortDir === this.sortDirection;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="mr-2 d-inline-block align-bottom full-width-mobile">
+    <button class="btn btn-sm js-dropdown-text" data-toggle="dropdown" aria-expanded="false">
+      {{ dropdownText }}
+      <gl-icon name="chevron-down" />
+    </button>
+    <div ref="dropdownMenu" class="dropdown-menu dropdown-menu-selectable dropdown-menu-right">
+      <div class="dropdown-content">
+        <ul>
+          <li v-for="{ text, key, cls } in $options.SORT_OPTIONS" :key="key">
+            <button
+              :class="[cls, { 'is-active': isDropdownItemActive(key) }]"
+              type="button"
+              @click="fetchSortedDiscussions(key)"
+            >
+              {{ text }}
+            </button>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>