Add latest changes from gitlab-org/gitlab@master

5 files changed, 89 insertions, 116 deletions

diff --git a/app/assets/javascripts/notes/components/discussion_filter.vue b/app/assets/javascripts/notes/components/discussion_filter.vue
index 15887c2738d..10e651033e8 100644
--- a/app/assets/javascripts/notes/components/discussion_filter.vue
+++ b/app/assets/javascripts/notes/components/discussion_filter.vue
@@ -2,6 +2,9 @@
 import { GlDropdown, GlDropdownItem, GlDropdownDivider } from '@gitlab/ui';
 import { mapGetters, mapActions } from 'vuex';
 import { getLocationHash, doesHashExistInUrl } from '~/lib/utils/url_utility';
+import { __ } from '~/locale';
+import Tracking from '~/tracking';
+import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import {
   DISCUSSION_FILTERS_DEFAULT_VALUE,
   HISTORY_ONLY_FILTER_VALUE,
@@ -9,15 +12,25 @@ import {
   DISCUSSION_TAB_LABEL,
   DISCUSSION_FILTER_TYPES,
   NOTE_UNDERSCORE,
+  ASC,
+  DESC,
 } from '../constants';
 import notesEventHub from '../event_hub';
 
+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: {
     GlDropdown,
     GlDropdownItem,
     GlDropdownDivider,
+    LocalStorageSync,
   },
+  mixins: [Tracking.mixin()],
   props: {
     filters: {
       type: Array,
@@ -39,11 +52,24 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['getNotesDataByProp', 'timelineEnabled', 'isLoading']),
+    ...mapGetters([
+      'getNotesDataByProp',
+      'timelineEnabled',
+      'isLoading',
+      'sortDirection',
+      'persistSortOrder',
+      'noteableType',
+    ]),
     currentFilter() {
       if (!this.currentValue) return this.filters[0];
       return this.filters.find((filter) => filter.value === this.currentValue);
     },
+    selectedSortOption() {
+      return SORT_OPTIONS.find(({ key }) => this.sortDirection === key);
+    },
+    sortStorageKey() {
+      return `sort_direction_${this.noteableType.toLowerCase()}`;
+    },
   },
   created() {
     if (window.mrTabs) {
@@ -69,6 +95,7 @@ export default {
       'setCommentsDisabled',
       'setTargetNoteHash',
       'setTimelineView',
+      'setDiscussionSortDirection',
     ]),
     selectFilter(value, persistFilter = true) {
       const filter = parseInt(value, 10);
@@ -108,31 +135,73 @@ export default {
       }
       return DISCUSSION_FILTER_TYPES.HISTORY;
     },
+    fetchSortedDiscussions(direction) {
+      if (this.isSortDropdownItemActive(direction)) {
+        return;
+      }
+
+      this.setDiscussionSortDirection({ direction });
+      this.track('change_discussion_sort_direction', { property: direction });
+    },
+    isSortDropdownItemActive(sortDir) {
+      return sortDir === this.sortDirection;
+    },
   },
 };
 </script>
 
 <template>
-  <gl-dropdown
+  <div
     v-if="displayFilters"
-    id="discussion-filter-dropdown"
-    class="full-width-mobile discussion-filter-container js-discussion-filter-container"
-    data-qa-selector="discussion_filter_dropdown"
-    :text="currentFilter.title"
-    :disabled="isLoading"
+    id="discussion-preferences"
+    data-testid="discussion-preferences"
+    class="gl-display-inline-block gl-vertical-align-bottom full-width-mobile"
   >
-    <div v-for="filter in filters" :key="filter.value" class="dropdown-item-wrapper">
-      <gl-dropdown-item
-        :is-check-item="true"
-        :is-checked="filter.value === currentValue"
-        :class="{ 'is-active': filter.value === currentValue }"
-        :data-filter-type="filterType(filter.value)"
-        data-qa-selector="filter_menu_item"
-        @click.prevent="selectFilter(filter.value)"
+    <local-storage-sync
+      :value="sortDirection"
+      :storage-key="sortStorageKey"
+      :persist="persistSortOrder"
+      as-string
+      @input="setDiscussionSortDirection({ direction: $event })"
+    />
+    <gl-dropdown
+      id="discussion-preferences-dropdown"
+      class="full-width-mobile"
+      data-qa-selector="discussion_preferences_dropdown"
+      text="Sort or filter"
+      :disabled="isLoading"
+      right
+    >
+      <div id="discussion-sort">
+        <gl-dropdown-item
+          v-for="{ text, key, cls } in $options.SORT_OPTIONS"
+          :key="text"
+          :class="cls"
+          :is-check-item="true"
+          :is-checked="isSortDropdownItemActive(key)"
+          @click="fetchSortedDiscussions(key)"
+        >
+          {{ text }}
+        </gl-dropdown-item>
+      </div>
+      <gl-dropdown-divider />
+      <div
+        id="discussion-filter"
+        class="discussion-filter-container js-discussion-filter-container"
       >
-        {{ filter.title }}
-      </gl-dropdown-item>
-      <gl-dropdown-divider v-if="filter.value === defaultValue" />
-    </div>
-  </gl-dropdown>
+        <gl-dropdown-item
+          v-for="filter in filters"
+          :key="filter.value"
+          :is-check-item="true"
+          :is-checked="filter.value === currentValue"
+          :class="{ 'is-active': filter.value === currentValue }"
+          :data-filter-type="filterType(filter.value)"
+          data-qa-selector="filter_menu_item"
+          @click.prevent="selectFilter(filter.value)"
+        >
+          {{ filter.title }}
+        </gl-dropdown-item>
+      </div>
+    </gl-dropdown>
+  </div>
 </template>
diff --git a/app/assets/javascripts/notes/components/sort_discussion.vue b/app/assets/javascripts/notes/components/sort_discussion.vue
deleted file mode 100644
index bcc5d12b7c8..00000000000
--- a/app/assets/javascripts/notes/components/sort_discussion.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<script>
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
-import { mapActions, mapGetters } from 'vuex';
-import { __ } from '~/locale';
-import Tracking from '~/tracking';
-import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
-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: {
-    GlDropdown,
-    GlDropdownItem,
-    LocalStorageSync,
-  },
-  mixins: [Tracking.mixin()],
-  computed: {
-    ...mapGetters(['sortDirection', 'persistSortOrder', 'noteableType']),
-    selectedOption() {
-      return SORT_OPTIONS.find(({ key }) => this.sortDirection === key);
-    },
-    dropdownText() {
-      return this.selectedOption.text;
-    },
-    storageKey() {
-      return `sort_direction_${this.noteableType.toLowerCase()}`;
-    },
-  },
-  methods: {
-    ...mapActions(['setDiscussionSortDirection']),
-    fetchSortedDiscussions(direction) {
-      if (this.isDropdownItemActive(direction)) {
-        return;
-      }
-
-      this.setDiscussionSortDirection({ direction });
-      this.track('change_discussion_sort_direction', { property: direction });
-    },
-    isDropdownItemActive(sortDir) {
-      return sortDir === this.sortDirection;
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    data-testid="sort-discussion-filter"
-    class="gl-mr-3 gl-display-inline-block gl-vertical-align-bottom full-width-mobile"
-  >
-    <local-storage-sync
-      :value="sortDirection"
-      :storage-key="storageKey"
-      :persist="persistSortOrder"
-      as-string
-      @input="setDiscussionSortDirection({ direction: $event })"
-    />
-    <gl-dropdown :text="dropdownText" class="js-dropdown-text full-width-mobile">
-      <gl-dropdown-item
-        v-for="{ text, key, cls } in $options.SORT_OPTIONS"
-        :key="key"
-        :class="cls"
-        :is-check-item="true"
-        :is-checked="isDropdownItemActive(key)"
-        @click="fetchSortedDiscussions(key)"
-      >
-        {{ text }}
-      </gl-dropdown-item>
-    </gl-dropdown>
-  </div>
-</template>
diff --git a/app/assets/javascripts/notes/components/timeline_toggle.vue b/app/assets/javascripts/notes/components/timeline_toggle.vue
index e4d89f54652..8632eea5d8e 100644
--- a/app/assets/javascripts/notes/components/timeline_toggle.vue
+++ b/app/assets/javascripts/notes/components/timeline_toggle.vue
@@ -53,7 +53,6 @@ export default {
     :selected="timelineEnabled"
     :title="tooltip"
     :aria-label="tooltip"
-    class="gl-mr-3"
     @click="toggleTimeline"
   />
 </template>
diff --git a/app/assets/javascripts/notes/index.js b/app/assets/javascripts/notes/index.js
index 19fa484d659..bd1bacecddb 100644
--- a/app/assets/javascripts/notes/index.js
+++ b/app/assets/javascripts/notes/index.js
@@ -1,7 +1,6 @@
 import Vue from 'vue';
 import notesApp from './components/notes_app.vue';
 import initDiscussionFilters from './discussion_filters';
-import initSortDiscussions from './sort_discussions';
 import { store } from './stores';
 import initTimelineToggle from './timeline';
 
@@ -61,6 +60,5 @@ export default () => {
   });
 
   initDiscussionFilters(store);
-  initSortDiscussions(store);
   initTimelineToggle(store);
 };
diff --git a/app/assets/javascripts/notes/sort_discussions.js b/app/assets/javascripts/notes/sort_discussions.js
deleted file mode 100644
index ca8df880fe4..00000000000
--- a/app/assets/javascripts/notes/sort_discussions.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import Vue from 'vue';
-import SortDiscussion from './components/sort_discussion.vue';
-
-export default (store) => {
-  const el = document.getElementById('js-vue-sort-issue-discussions');
-
-  if (!el) return null;
-
-  return new Vue({
-    el,
-    name: 'SortDiscussionRoot',
-    store,
-    render(createElement) {
-      return createElement(SortDiscussion);
-    },
-  });
-};