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

1 files changed, 60 insertions, 0 deletions

diff --git a/app/assets/javascripts/notes/components/timeline_toggle.vue b/app/assets/javascripts/notes/components/timeline_toggle.vue
new file mode 100644
index 00000000000..d1ffe0a3601
--- /dev/null
+++ b/app/assets/javascripts/notes/components/timeline_toggle.vue
@@ -0,0 +1,60 @@
+<script>
+import { GlButton, GlTooltipDirective } from '@gitlab/ui';
+import { mapActions, mapGetters } from 'vuex';
+import { s__ } from '~/locale';
+import { COMMENTS_ONLY_FILTER_VALUE, DESC } from '../constants';
+import notesEventHub from '../event_hub';
+import TrackEventDirective from '~/vue_shared/directives/track_event';
+import { trackToggleTimelineView } from '../utils';
+
+export const timelineEnabledTooltip = s__('Timeline|Turn timeline view off');
+export const timelineDisabledTooltip = s__('Timeline|Turn timeline view on');
+
+export default {
+  components: {
+    GlButton,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+    TrackEvent: TrackEventDirective,
+  },
+  computed: {
+    ...mapGetters(['timelineEnabled', 'sortDirection']),
+    tooltip() {
+      return this.timelineEnabled ? timelineEnabledTooltip : timelineDisabledTooltip;
+    },
+  },
+  methods: {
+    ...mapActions(['setTimelineView', 'setDiscussionSortDirection']),
+    trackToggleTimelineView,
+    setSort() {
+      if (this.timelineEnabled && this.sortDirection !== DESC) {
+        this.setDiscussionSortDirection({ direction: DESC, persist: false });
+      }
+    },
+    setFilter() {
+      notesEventHub.$emit('dropdownSelect', COMMENTS_ONLY_FILTER_VALUE, false);
+    },
+    toggleTimeline(event) {
+      event.currentTarget.blur();
+      this.setTimelineView(!this.timelineEnabled);
+      this.setSort();
+      this.setFilter();
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-button
+    v-gl-tooltip
+    v-track-event="trackToggleTimelineView(timelineEnabled)"
+    icon="comments"
+    size="small"
+    :selected="timelineEnabled"
+    :title="tooltip"
+    :aria-label="tooltip"
+    class="gl-mr-3"
+    @click="toggleTimeline"
+  />
+</template>