Commit 211c946a authored by Constance Okoghenun's avatar Constance Okoghenun Committed by Phil Hughes

Discussion filters - ensured note links resolves to the right note

parent be855cc6
<script> <script>
import $ from 'jquery'; import $ from 'jquery';
import { mapGetters, mapActions } from 'vuex'; import { mapGetters, mapActions } from 'vuex';
import { getLocationHash } from '../../lib/utils/url_utility';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import { import {
DISCUSSION_FILTERS_DEFAULT_VALUE, DISCUSSION_FILTERS_DEFAULT_VALUE,
...@@ -44,29 +45,47 @@ export default { ...@@ -44,29 +45,47 @@ export default {
eventHub.$on('MergeRequestTabChange', this.toggleFilters); eventHub.$on('MergeRequestTabChange', this.toggleFilters);
this.toggleFilters(currentTab); this.toggleFilters(currentTab);
} }
window.addEventListener('hashchange', this.handleLocationHash);
this.handleLocationHash();
}, },
mounted() { mounted() {
this.toggleCommentsForm(); this.toggleCommentsForm();
}, },
destroyed() {
window.removeEventListener('hashchange', this.handleLocationHash);
},
methods: { methods: {
...mapActions(['filterDiscussion', 'setCommentsDisabled']), ...mapActions(['filterDiscussion', 'setCommentsDisabled', 'setTargetNoteHash']),
selectFilter(value) { selectFilter(value) {
const filter = parseInt(value, 10); const filter = parseInt(value, 10);
// close dropdown // close dropdown
$(this.$refs.dropdownToggle).dropdown('toggle'); this.toggleDropdown();
if (filter === this.currentValue) return; if (filter === this.currentValue) return;
this.currentValue = filter; this.currentValue = filter;
this.filterDiscussion({ path: this.getNotesDataByProp('discussionsPath'), filter }); this.filterDiscussion({ path: this.getNotesDataByProp('discussionsPath'), filter });
this.toggleCommentsForm(); this.toggleCommentsForm();
}, },
toggleDropdown() {
$(this.$refs.dropdownToggle).dropdown('toggle');
},
toggleCommentsForm() { toggleCommentsForm() {
this.setCommentsDisabled(this.currentValue === HISTORY_ONLY_FILTER_VALUE); this.setCommentsDisabled(this.currentValue === HISTORY_ONLY_FILTER_VALUE);
}, },
toggleFilters(tab) { toggleFilters(tab) {
this.displayFilters = tab === DISCUSSION_TAB_LABEL; this.displayFilters = tab === DISCUSSION_TAB_LABEL;
}, },
handleLocationHash() {
const hash = getLocationHash();
if (/^note_/.test(hash) && this.currentValue !== DISCUSSION_FILTERS_DEFAULT_VALUE) {
this.selectFilter(this.defaultValue);
this.toggleDropdown(); // close dropdown
this.setTargetNoteHash(hash);
}
},
}, },
}; };
</script> </script>
......
---
title: Ensured links to a comment or system note anchor resolves to the right note if a user has a discussion filter.
merge_request: 24228
author:
type: changed
import Vue from 'vue'; import Vue from 'vue';
import createStore from '~/notes/stores'; import createStore from '~/notes/stores';
import DiscussionFilter from '~/notes/components/discussion_filter.vue'; import DiscussionFilter from '~/notes/components/discussion_filter.vue';
import { DISCUSSION_FILTERS_DEFAULT_VALUE } from '~/notes/constants';
import { mountComponentWithStore } from '../../helpers/vue_mount_component_helper'; import { mountComponentWithStore } from '../../helpers/vue_mount_component_helper';
import { discussionFiltersMock, discussionMock } from '../mock_data'; import { discussionFiltersMock, discussionMock } from '../mock_data';
...@@ -20,16 +21,14 @@ describe('DiscussionFilter component', () => { ...@@ -20,16 +21,14 @@ describe('DiscussionFilter component', () => {
}, },
]; ];
const Component = Vue.extend(DiscussionFilter); const Component = Vue.extend(DiscussionFilter);
const selectedValue = discussionFiltersMock[0].value; const selectedValue = DISCUSSION_FILTERS_DEFAULT_VALUE;
const props = { filters: discussionFiltersMock, selectedValue };
store.state.discussions = discussions; store.state.discussions = discussions;
return mountComponentWithStore(Component, { return mountComponentWithStore(Component, {
el: null, el: null,
store, store,
props: { props,
filters: discussionFiltersMock,
selectedValue,
},
}); });
}; };
...@@ -115,4 +114,41 @@ describe('DiscussionFilter component', () => { ...@@ -115,4 +114,41 @@ describe('DiscussionFilter component', () => {
}); });
}); });
}); });
describe('URL with Links to notes', () => {
afterEach(() => {
window.location.hash = '';
});
it('updates the filter when the URL links to a note', done => {
window.location.hash = `note_${discussionMock.notes[0].id}`;
vm.currentValue = discussionFiltersMock[2].value;
vm.handleLocationHash();
vm.$nextTick(() => {
expect(vm.currentValue).toEqual(DISCUSSION_FILTERS_DEFAULT_VALUE);
done();
});
});
it('does not update the filter when the current filter is "Show all activity"', done => {
window.location.hash = `note_${discussionMock.notes[0].id}`;
vm.handleLocationHash();
vm.$nextTick(() => {
expect(vm.currentValue).toEqual(DISCUSSION_FILTERS_DEFAULT_VALUE);
done();
});
});
it('only updates filter when the URL links to a note', done => {
window.location.hash = `testing123`;
vm.handleLocationHash();
vm.$nextTick(() => {
expect(vm.currentValue).toEqual(DISCUSSION_FILTERS_DEFAULT_VALUE);
done();
});
});
});
}); });
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment