Merge branch 'master' into 'prettify-all-the-things-4'prettify-all-the-things-4

# Conflicts:
#   app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue

3 files changed, 91 insertions, 7 deletions

diff --git a/app/assets/javascripts/notes/components/discussion_counter.vue b/app/assets/javascripts/notes/components/discussion_counter.vue
index ad6e7cf501d..1f80f24e045 100644
--- a/app/assets/javascripts/notes/components/discussion_counter.vue
+++ b/app/assets/javascripts/notes/components/discussion_counter.vue
@@ -56,10 +56,11 @@ export default {
 </script>
 
 <template>
-  <div class="line-resolve-all-container prepend-top-10">
+  <div
+    v-if="discussionCount > 0"
+    class="line-resolve-all-container prepend-top-8">
     <div>
       <div
-        v-if="discussionCount > 0"
         :class="{ 'has-next-btn': hasNextButton }"
         class="line-resolve-all">
         <span
diff --git a/app/assets/javascripts/notes/components/discussion_filter.vue b/app/assets/javascripts/notes/components/discussion_filter.vue
new file mode 100644
index 00000000000..27972682ca1
--- /dev/null
+++ b/app/assets/javascripts/notes/components/discussion_filter.vue
@@ -0,0 +1,82 @@
+<script>
+import $ from 'jquery';
+import Icon from '~/vue_shared/components/icon.vue';
+import { mapGetters, mapActions } from 'vuex';
+
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    filters: {
+      type: Array,
+      required: true,
+    },
+    defaultValue: {
+      type: Number,
+      default: null,
+      required: false,
+    },
+  },
+  data() {
+    return { currentValue: this.defaultValue };
+  },
+  computed: {
+    ...mapGetters([
+      'getNotesDataByProp',
+    ]),
+    currentFilter() {
+      if (!this.currentValue) return this.filters[0];
+      return this.filters.find(filter => filter.value === this.currentValue);
+    },
+  },
+  methods: {
+    ...mapActions(['filterDiscussion']),
+    selectFilter(value) {
+      const filter = parseInt(value, 10);
+
+      // close dropdown
+      $(this.$refs.dropdownToggle).dropdown('toggle');
+
+      if (filter === this.currentValue) return;
+      this.currentValue = filter;
+      this.filterDiscussion({ path: this.getNotesDataByProp('discussionsPath'), filter });
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="discussion-filter-container d-inline-block align-bottom">
+    <button
+      id="discussion-filter-dropdown"
+      ref="dropdownToggle"
+      class="btn btn-default"
+      data-toggle="dropdown"
+      aria-expanded="false"
+    >
+      {{ currentFilter.title }}
+      <icon name="chevron-down" />
+    </button>
+    <div
+      class="dropdown-menu dropdown-menu-selectable dropdown-menu-right"
+      aria-labelledby="discussion-filter-dropdown">
+      <div class="dropdown-content">
+        <ul>
+          <li
+            v-for="filter in filters"
+            :key="filter.value"
+          >
+            <button
+              :class="{ 'is-active': filter.value === currentValue }"
+              type="button"
+              @click="selectFilter(filter.value)"
+            >
+              {{ filter.title }}
+            </button>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/notes/components/notes_app.vue b/app/assets/javascripts/notes/components/notes_app.vue
index 618a1581d8f..b0faa443a18 100644
--- a/app/assets/javascripts/notes/components/notes_app.vue
+++ b/app/assets/javascripts/notes/components/notes_app.vue
@@ -50,11 +50,11 @@ export default {
   },
   data() {
     return {
-      isLoading: true,
+      currentFilter: null,
     };
   },
   computed: {
-    ...mapGetters(['isNotesFetched', 'discussions', 'getNotesDataByProp', 'discussionCount']),
+    ...mapGetters(['isNotesFetched', 'discussions', 'getNotesDataByProp', 'discussionCount', 'isLoading']),
     noteableType() {
       return this.noteableData.noteableType;
     },
@@ -102,6 +102,7 @@ export default {
   },
   methods: {
     ...mapActions({
+      setLoadingState: 'setLoadingState',
       fetchDiscussions: 'fetchDiscussions',
       poll: 'poll',
       actionToggleAward: 'toggleAward',
@@ -133,19 +134,19 @@ export default {
       return discussion.individual_note ? { note: discussion.notes[0] } : { discussion };
     },
     fetchNotes() {
-      return this.fetchDiscussions(this.getNotesDataByProp('discussionsPath'))
+      return this.fetchDiscussions({ path: this.getNotesDataByProp('discussionsPath') })
         .then(() => {
           this.initPolling();
         })
         .then(() => {
-          this.isLoading = false;
+          this.setLoadingState(false);
           this.setNotesFetchedState(true);
           eventHub.$emit('fetchedNotesData');
         })
         .then(() => this.$nextTick())
         .then(() => this.checkLocationHash())
         .catch(() => {
-          this.isLoading = false;
+          this.setLoadingState(false);
           this.setNotesFetchedState(true);
           Flash('Something went wrong while fetching comments. Please try again.');
         });