Tech debt from issue notes refactor
With this refactor https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/12069 the following points need to be addressed:
1 - Emojis
- When the user opens the emoji dropdown, it is all handled by jQuery.
- When the user choses a emoji inside the dropdown, an $.ajax request is made to the server. (Initially this request was also done in Vue, causing 2 requests, I opted to keep the one of dropdown itself since there was not easy way to remove it without refactoring the jQuery code too. )
- When the request of 1.2 finishes, an event is dispatched through the DOM and listened in the Vue code to update the data.
- When the user clicks on an already awarded emoji, that request is made through Vue
2 -
- Vue code is creating a structure of objects with all the awarded emojis:
{ 100: [{user 1}, {user2}], '+1': []}
- Vue template iterates through this to create the buttons. A
v-for
transforms100
into"100"
, resulting in the need to check for this type when the💯 emoji is awarded
3 - jQuery leftovers - jQuery code that is being called from outside vue
- Keyboard shortcuts: preview and reply
- Autosize
- Autocomplete -
gl.GLForm
3.1 - jQuery code that is being called from inside Vue:
- Scroll to a note if an hash is provided
- Listen to a jQuery event for the emojis
- Listen to
issuable:change
- Autosave
- Close/Re-open haml buttons are being programmatically clicked from Vue
4 - js-
classes used in jQuery code and being used:
js-gfm-input
js-autosize
-
js-note-target-close
(there are a LOT more)
5 - Autocomplete
The autocomplete is being initialized by gl.GLForm
6 - Close issue
- When the user closes the issue we are triggering a click in a jQuery button
const btnClass = this.isIssueOpen ? 'btn-reopen' : 'btn-close';
$(`.js-btn-issue-action.${btnClass}:visible`).trigger('click');
7 - Asynchronous actions tests 7.1 Vuex actions that require mocking of the server are NOT tested
Edited by Filipa Lacerda