We are planning to refactor Changes tab with Vue to have the maximum performance and the best UX. To be able to start refactoring Frontend needs some JSON which contains representation of the diff lines on Changes tab. Since discussions on Changes tab are the subset of the discussions included in `discussions.json` we also need to add line number information to diff discussions to be able to render them on the correct lines on Changes tab. Related with #38178 /cc @felipe_artur @smcgivern ## Needs to be implemented - [x] Setup Parent Merge Request Application - [x] Store Setup for combining store for notes + changes tab - [x] Discussion Counter - [x] Skeleton Loading - [x] Build Skeleton with placeholder components - [x] MR compare versions - [x] MR changed files and diff view type buttons - [x] Diff file header - [x] Initial rendering diff lines - [x] Inline view - [x] Parallel view - [x] Make sure that all Haml logic implemented in new Vue components - [x] @winh: Render subproject commits http://f.acet.me/GY9I.png - [ ] Implement rendering of non-text diffs aka Blob Diff Rendering - [ ] Image - [ ] PDF - [ ] Find other types of diffs and make sure that they are rendered correctly - [x] Implement diff view type switching button http://f.acet.me/wB98.png - [x] Implement "Hide whitespace changes" button - [x] Implement "Expand all" button http://f.acet.me/aAiS.png @jivanvl - [x] Implement added/deleted files component http://f.acet.me/29Sg.png - [x] Search files dropdown http://f.acet.me/sggJ.png - [x] Implement changes between versions component http://f.acet.me/fD21.png - [x] Implement diff header buttons http://f.acet.me/yOll.png - [x] Toggle diff notes button - [x] Edit button - [x] View file @ sha button - [x] View on Environment button - [x] LFS badge http://f.acet.me/wCyA.png - [x] Implement collapse/expand of the diff file - [x] When file header clicked - [x] When toggle arrow clicked - [x] Make sure that arrow icon shows correct position when toggled - [x] Implement loading more context lines on gutter `...` - [ ] Notes on Changes tab - [x] Render same line old/new discussions properly in inline view http://f.acet.me/eB7E.png - [x] Render left and right side discussions properly in side-by-side view http://f.acet.me/jQv7.png - [x] Highlight active line when hovered and show comment icon http://f.acet.me/Csx6.png - [x] Render comment form http://f.acet.me/EMD7.png - [x] Add new comment - [x] Add new reply - [x] Edit comment - [x] Award emoji - [x] Resolve single comment - [x] Resolve thread - [x] Jump to next unresolved discussion - [x] Resolve discussion with an issue - [x] More actions > Copy link - [x] More actions > Delete comment - [x] Sync with notes tab - [x] Show diff comment toggle button on the gutter http://f.acet.me/CSnE.png - [x] Render commented user avatars on the gutter with tooltip http://f.acet.me/nUYB.png - [ ] Render partial discussions on when viewing an old version of the diff http://f.acet.me/Y5wf.png - [ ] Implement discussions for the image diffs - [ ] Make sure that we render commit author and partial comments notification widget properly http://f.acet.me/liBR.png ## Needs to be fixed - [x] Fix extra `+` `-` on the beginning of diff lines http://f.acet.me/eTki.png - [x] When a discussion is resolved UI gets broken because discussion component collapse itself http://f.acet.me/kDlF.png - [x] Resolving a single discussion resolves whole thread - [x] After resolving a discussion, it still shows as unresolved until the next polling ticks. - [x] Fix MR tabs change - [x] Fix rendering of `...` at the end of the file http://f.acet.me/EZRX.png vs http://f.acet.me/gDue.png - [x] Compare versions branch dropdowns psimyn - [x] "No changes" empty state - [x] Fix commenting on the new section of context lines in parallel view will result rendering the discusion on the left http://f.acet.me/twQO.gif - [x] @winh Fix subproject commit diff view http://f.acet.me/mJbZ.png vs http://f.acet.me/SgU6.png - [x] Fix no new line styling http://f.acet.me/lGb3.png - [x] Fix enlarging diff files http://f.acet.me/veyQ.png vs http://f.acet.me/vYQc.png - [x] @psimyn Fix commit message system note [jqzI](/uploads/b07a10670919254f0220d3ff5c1aa110/jqzI.png) - [x] Fix expand collapse system notes feature http://f.acet.me/Z3zW.png - [x] Fix double border bottom of the comment form http://f.acet.me/7JjR.png - [x] Unnecessary sign in widget on top of the comments when logged out _cookie required_ http://f.acet.me/eNwe.png - [x] Remove cookie checks. Without cookie new code doesn't work and old code is already disabled. _eg. logged out without cookie_ http://f.acet.me/QlQJ.png - [x] Flickering of the page /cc @psimyn http://f.acet.me/gGVJ.gif psimyn - [x] Fix position of new comment form in parallel view http://f.acet.me/DCxT.png psimyn - [ ] Fix bug on loading more context lines http://f.acet.me/bGcj.gif - [ ] :construction: Copy as GFM https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/9874 - [ ] Copying in parallel view https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/14561 - [x] Fix 1px off on discussion counter widget http://f.acet.me/zI80.png - [x] @fatihacet Comment button is always visible for `no new line at the end of file` line after hovering it once http://f.acet.me/9jdB.png - [x] Remove resolve note icon on discussions when logged out http://f.acet.me/XrFl.png - [x] @psimyn Main comment form missing on Commits page - [x] @fatihacet Double-clicking Load More lines loads/adds same lines twice - [x] @fatihacet Unable to comment last line of a diff - [x] @psimyn View file path is 404 - [x] @psimyn Z-index issue in sticky file header http://f.acet.me/z61K.gif - [x] @fatihacet No new line can be commentable - [ ] @psimyn can click anywhere in the header but not on the caret to collapse/expand: [caret-click](/uploads/8ed3b3e881032d3287b1dcde444dcc92/caret-click.mp4) - [x] large diffs cannot be expanded: [large-diff](/uploads/629be5c398be04017db6a8b6b739752c/large-diff.mp4) - [ ] diff file header is misaligned [Screen_Shot_2018-05-29_at_15.15.36](/uploads/7d8b39cb3421de63f79b5e67739a7cb1/Screen_Shot_2018-05-29_at_15.15.36.png) - [ ] :construction: new discussion comments are lost when network error occurs: [lost-comment](/uploads/6b80115e034c4f5cc819548933ab1f40/lost-comment.mp4) - [ ] `unresolve discussion` button is missing error handling: [error-message-unresolve](/uploads/a2e78e224f5ff3fa2f6e329a516f631e/error-message-unresolve.mp4) - [ ] :construction: it doesn't scroll to a comment: [missing-scrolling](/uploads/2374cb377590bf17fd6da6892bd712d9/missing-scrolling.mp4) - [x] @winh `/merge` slash command fails (`merge_request` is sent as `noteable_type` while `MergeRequest` is expected) - [x] @winh `To preserve performance only NaN of NaN files are displayed.`: [Screen_Shot_2018-05-04_at_13.35.56](/uploads/2001ed50fbff0d136c0993f6d4f75e39/Screen_Shot_2018-05-04_at_13.35.56.png) - [x] @jivanvl Missing empty state when locking a merge request and non-project members can't comment: [Screen_Shot_2018-05-07_at_12.37.32_PM](/uploads/aba271ee315eb6437d42fba1aae8e57c/Screen_Shot_2018-05-07_at_12.37.32_PM.png) - [ ] URL parameters `?view=inline` / `?view=parallel` are not added when clicking the corresponding button - [x] :stop\_sign: [badge/counter in discussion tab](/uploads/5c798ed5e13dd9e14932b5baf8b799d5/Screen_Shot_2018-05-10_at_14.58.31.png) does not update when adding/deleting comments - [ ] comments made on a commit don't show up on the merge request - [x] @winh `Resolved by` is missing ([Screen_Shot_2018-05-10_at_17.30.38](/uploads/d33dbd4487c308c9dace1a7e7ceef59c/Screen_Shot_2018-05-10_at_17.30.38.png)) - [x] @winh `Automatically resolved with a push` is missing - [x] :stop\_sign: @winh [system notes are broken](/uploads/20d1cfea457bd1a28cbca40640e23275/Screen_Shot_2018-05-24_at_14.49.49.png) - [x] @winh resolve buttons need to be hidden for users without permission - [x] new comment button is lagging on large diffs: [old-implementation](/uploads/66857ee7c40b594fd276be61a48173b6/old-implementation.mp4) [new-implementation](/uploads/35d7bf0d6f8b64038c00a74a16061a05/new-implementation.mp4) - [x] :stop\_sign: ~backend polling does not correctly display diff comments [polling](/uploads/0180da453ea3e48f940b8e90ee6ba7a6/Screen_Shot_2018-05-25_at_21.16.36.png) [correct](/uploads/7f4b01054c2d2eb7756e07dd635c4375/Screen_Shot_2018-05-25_at_21.16.57.png) - [x] @winh jump to next discussion is visible even if there is only one: [Screen_Shot_2018-05-28_at_11.16.17](/uploads/d42f7ce2873b1c1555a81e6803eeaf6b/Screen_Shot_2018-05-28_at_11.16.17.png) - [x] @winh jump to next discussion does not expand discussion: [jump-next-no-expand](/uploads/3a6c02f7d102fc6ea0ee887df7170ec2/jump-next-no-expand.mp4) - [x] :stop\_sign: line numbers missing on discussion tab: [Screen_Shot_2018-05-28_at_17.19.41](/uploads/5c31cb962b1673ef5fcebf9753f67047/Screen_Shot_2018-05-28_at_17.19.41.png) - [ ] ~backend make commit, revert commit :arrow\_right: changes tab doesn't load (error 500) instead of displaying empty state [no-changes-broken](/uploads/027c18074773e01995d21f7c58bd5317/no-changes-broken.mp4) [Screen_Shot_2018-05-29_at_11.13.46](/uploads/2d141a20b250d404b9779dae7f9eb87d/Screen_Shot_2018-05-29_at_11.13.46.png) - [ ] make commit, revert commit, cherry-pick first commit :arrow\_right: commenting on diff is broken [commenting-broken](/uploads/c448d51b08fbea20cff6bfd410196a31/commenting-broken.mp4) - [x] :stop\_sign: @winh mentioned commits are not rendered correctly on discussion tab [new implementation](/uploads/89ba62256af4288c095f8700727998b2/Screen_Shot_2018-05-29_at_11.47.13.png) [old implementation](/uploads/3e153e69d425c1453f7a73a044de5b51/Screen_Shot_2018-05-29_at_11.48.17.png) - [ ] last `jump to next unresolved discussion` button does not cycle / jump back to first [jump-to-first](/uploads/129e4b4bcac8c52fdb6c839bcc119e6e/jump-to-first.mp4) - [ ] "jump to next unresolved discussion" on diffs tab uses wrong order of discussions (the one from discussion tab) [diff-jump-next-order](/uploads/984b604e96aee3084a426e8d8791b3ad/diff-jump-next-order.mp4) - [ ] if first comments were made on discussion tab, "jump to first unresolved discussion" does not work on diffs tab [diffs-jump-to-first](/uploads/fdcb8a928b67a38e75bcb029eddafa3d/diffs-jump-to-first.mp4) - [x] @psimyn :stop\_sign: reply input should be full width [Screen_Shot_2018-05-30_at_12.14.08](/uploads/0eee8753350a1ff1020f17d71a1a5398/Screen_Shot_2018-05-30_at_12.14.08.png) - [ ] :construction: Update MR widget when a discussion created/deleted/resolved/unresolved - [x] margin around diff that shouldn't be there [Screen_Shot_2018-06-06_at_14.39.29](/uploads/427698834e0f8133e5dc460f44b2a9a5/Screen_Shot_2018-06-06_at_14.39.29.png) - [ ] line numbers are vertically centered while they should be aligned on top [old implementation](/uploads/4eb98f75d8b9e2e78edc65b3d061f0f2/Screen_Shot_2018-06-06_at_14.42.20.png) [new implementation](/uploads/4784e0c8a129154342ac8df1efcb29dc/Screen_Shot_2018-06-06_at_14.42.37.png) - [ ] when filtering by commit, commits are not shown on changes tab [old implementation](/uploads/7d799a6a16567ddad44bc89a87e9ea20/Screen_Shot_2018-06-06_at_15.11.12.png) [new implementation](/uploads/bdd34feaa4e48e25108bc802caf704e1/Screen_Shot_2018-06-06_at_15.11.20.png) - [ ] editing commit comment displays error (but succeeds) [editing-commit-comment](/uploads/0820e5973f1c62b65b08056c6f936056/editing-commit-comment.mp4) - [ ] polling does not work for commit comments - [x] @fatihacet duplicate `+`s for diffs on discussion tab [Screen_Shot_2018-06-06_at_15.22.47](/uploads/c556c2bf1786619100032a75dd0f1077/Screen_Shot_2018-06-06_at_15.22.47.png) - [ ] replying to a deleted discussion fails without displaying an error - [x] @fatihacet counter of resolved discussions includes unresolvable discussions [Screen_Shot_2018-06-06_at_15.26.39](/uploads/b2e609440c5b64cc9a75bfcf96e2ab1f/Screen_Shot_2018-06-06_at_15.26.39.png) - [ ] @fatihacet _may be fixed in another branch_ not possible to view diff comment if there is a resolved discussion on the same line - [ ] @fatihacet _may be fixed in another branch_ if two comments on same line: resolved comments get automatically unresolved again (page reload doesn't help) [overwritten-resolve](/uploads/c7afed435efa9339410444340d93d33f/overwritten-resolve.mp4) [overwritten-resolve-vue](/uploads/988c0a2a36eb2ed861440ba0d4517250/overwritten-resolve-vue.mp4) - [ ] @fatihacet _may be fixed in another branch_ if two comments on same line: resolved comments get displayed as unresolved - [Screen_Shot_2018-06-06_at_19.35.28](/uploads/190dd6f9294c2cc724892574e3203173/Screen_Shot_2018-06-06_at_19.35.28.png) [Screen_Shot_2018-06-06_at_19.37.21](/uploads/00c07a461c7e5675d4b7505e2fc016fa/Screen_Shot_2018-06-06_at_19.37.21.png) - [Screen_Shot_2018-06-06_at_20.07.21](/uploads/bf68d9dc2cf692172a590195600100a3/Screen_Shot_2018-06-06_at_20.07.21.png) [Screen_Shot_2018-06-06_at_20.07.46](/uploads/cc3ff2ff607c4de7d43ecff18f2f42e2/Screen_Shot_2018-06-06_at_20.07.46.png) - [ ] empty state has buttons and is misaligned: [Screen_Shot_2018-06-12_at_11.47.48](/uploads/f908f8d4ff7e5148f4755c7ba71b0f8a/Screen_Shot_2018-06-12_at_11.47.48.png) [Screen_Shot_2018-06-12_at_11.47.27](/uploads/e71e624f0a8da2a70bd8c2d3c2ef63bf/Screen_Shot_2018-06-12_at_11.47.27.png) [old implementation](/uploads/ad747a5515e60b161edf3750349a39d6/Screen_Shot_2018-06-12_at_11.47.11.png) ## TODO and FIXME comments - [x] @fatihacet in `merge_request_tabs.js` https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/17846#note_64015177 - [x] @fatihacet in `merge_requests/show.html.haml` https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/17850#note_64082034 - [x] @fatihacet in `diffs/store/utils.js` https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/17854/diffs#note_64305834 - [x] @fatihacet in `diffs/store/utils.js` https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/17854/diffs#note_64307978 - [x] @fatihacet in `diffs/components/app.vue` https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/17855/diffs#note_64308286 - [x] @fatihacet in `diffs/components/diff_line_note_form.vue` https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/17859/diffs#note_64309413 - [x] @psimyn in `changed_files.vue` template https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/17856#note_64366129 - [x] @fatihacet https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/17858#note_65188971 and other 2 discussions on the MR - [ ] Hide whitespace changes doesn't refresh the page - [ ] Expanding diff lines from bottom doesn't work ## To fix later - [ ] Fix toggling a discussion on Changes tab also toggle the same discussion on Discussions tab because of shared `expanded` Boolean flag