Changes tab refactor with Vue JS
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 (closed)
Needs to be implemented
-
Setup Parent Merge Request Application -
Store Setup for combining store for notes + changes tab -
Discussion Counter -
Skeleton Loading -
Build Skeleton with placeholder components -
MR compare versions -
MR changed files and diff view type buttons -
Diff file header
-
-
Initial rendering diff lines -
Inline view -
Parallel view -
Make sure that all Haml logic implemented in new Vue components -
@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
-
-
Implement diff view type switching button http://f.acet.me/wB98.png -
Implement "Hide whitespace changes" button -
Implement "Expand all" button http://f.acet.me/aAiS.png @jivanvl -
Implement added/deleted files component http://f.acet.me/29Sg.png -
Search files dropdown http://f.acet.me/sggJ.png
-
-
Implement changes between versions component http://f.acet.me/fD21.png -
Implement diff header buttons http://f.acet.me/yOll.png -
Toggle diff notes button -
Edit button -
View file @ sha button -
View on Environment button -
LFS badge http://f.acet.me/wCyA.png
-
-
Implement collapse/expand of the diff file -
When file header clicked -
When toggle arrow clicked -
Make sure that arrow icon shows correct position when toggled
-
-
Implement loading more context lines on gutter ... -
Notes on Changes tab -
Render same line old/new discussions properly in inline view http://f.acet.me/eB7E.png -
Render left and right side discussions properly in side-by-side view http://f.acet.me/jQv7.png -
Highlight active line when hovered and show comment icon http://f.acet.me/Csx6.png -
Render comment form http://f.acet.me/EMD7.png -
Add new comment -
Add new reply -
Edit comment -
Award emoji -
Resolve single comment -
Resolve thread -
Jump to next unresolved discussion -
Resolve discussion with an issue -
More actions > Copy link -
More actions > Delete comment -
Sync with notes tab -
Show diff comment toggle button on the gutter http://f.acet.me/CSnE.png -
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
-
Fix extra +-on the beginning of diff lines http://f.acet.me/eTki.png -
When a discussion is resolved UI gets broken because discussion component collapse itself http://f.acet.me/kDlF.png -
Resolving a single discussion resolves whole thread -
After resolving a discussion, it still shows as unresolved until the next polling ticks. -
Fix MR tabs change -
Fix rendering of ...at the end of the file http://f.acet.me/EZRX.png vs http://f.acet.me/gDue.png -
Compare versions branch dropdowns psimyn -
"No changes" empty state -
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 -
@winh Fix subproject commit diff view http://f.acet.me/mJbZ.png vs http://f.acet.me/SgU6.png -
Fix no new line styling http://f.acet.me/lGb3.png -
Fix enlarging diff files http://f.acet.me/veyQ.png vs http://f.acet.me/vYQc.png -
@psimyn Fix commit message system note jqzI -
Fix expand collapse system notes feature http://f.acet.me/Z3zW.png -
Fix double border bottom of the comment form http://f.acet.me/7JjR.png -
Unnecessary sign in widget on top of the comments when logged out cookie required http://f.acet.me/eNwe.png -
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 -
Flickering of the page /cc @psimyn http://f.acet.me/gGVJ.gif psimyn -
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 -
🚧 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 -
Fix 1px off on discussion counter widget http://f.acet.me/zI80.png -
@fatihacet Comment button is always visible for no new line at the end of fileline after hovering it once http://f.acet.me/9jdB.png -
Remove resolve note icon on discussions when logged out http://f.acet.me/XrFl.png -
@psimyn Main comment form missing on Commits page -
@fatihacet Double-clicking Load More lines loads/adds same lines twice -
@fatihacet Unable to comment last line of a diff -
@psimyn View file path is 404 -
@psimyn Z-index issue in sticky file header http://f.acet.me/z61K.gif -
@fatihacet No new line can be commentable -
@psimyn can click anywhere in the header but not on the caret to collapse/expand: caret-click -
large diffs cannot be expanded: large-diff -
diff file header is misaligned Screen_Shot_2018-05-29_at_15.15.36 -
🚧 new discussion comments are lost when network error occurs: lost-comment -
unresolve discussionbutton is missing error handling: error-message-unresolve -
🚧 it doesn't scroll to a comment: missing-scrolling -
@winh /mergeslash command fails (merge_requestis sent asnoteable_typewhileMergeRequestis expected) -
@winh To preserve performance only NaN of NaN files are displayed.: Screen_Shot_2018-05-04_at_13.35.56 -
@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 -
URL parameters ?view=inline/?view=parallelare not added when clicking the corresponding button -
🛑 badge/counter in discussion tab does not update when adding/deleting comments -
comments made on a commit don't show up on the merge request -
@winh Resolved byis missing (Screen_Shot_2018-05-10_at_17.30.38) -
@winh Automatically resolved with a pushis missing -
🛑 @winh system notes are broken -
@winh resolve buttons need to be hidden for users without permission -
new comment button is lagging on large diffs: old-implementation new-implementation -
🛑 backend polling does not correctly display diff comments polling correct -
@winh jump to next discussion is visible even if there is only one: Screen_Shot_2018-05-28_at_11.16.17 -
@winh jump to next discussion does not expand discussion: jump-next-no-expand -
🛑 line numbers missing on discussion tab: Screen_Shot_2018-05-28_at_17.19.41 -
backend make commit, revert commit ➡ changes tab doesn't load (error 500) instead of displaying empty state no-changes-broken Screen_Shot_2018-05-29_at_11.13.46 -
make commit, revert commit, cherry-pick first commit ➡ commenting on diff is broken commenting-broken -
🛑 @winh mentioned commits are not rendered correctly on discussion tab new implementation old implementation -
last jump to next unresolved discussionbutton does not cycle / jump back to first jump-to-first -
"jump to next unresolved discussion" on diffs tab uses wrong order of discussions (the one from discussion tab) diff-jump-next-order -
if first comments were made on discussion tab, "jump to first unresolved discussion" does not work on diffs tab diffs-jump-to-first -
@psimyn 🛑 reply input should be full width Screen_Shot_2018-05-30_at_12.14.08 -
🚧 Update MR widget when a discussion created/deleted/resolved/unresolved -
margin around diff that shouldn't be there Screen_Shot_2018-06-06_at_14.39.29 -
line numbers are vertically centered while they should be aligned on top old implementation new implementation -
when filtering by commit, commits are not shown on changes tab old implementation new implementation -
editing commit comment displays error (but succeeds) editing-commit-comment -
polling does not work for commit comments -
@fatihacet duplicate +s for diffs on discussion tab Screen_Shot_2018-06-06_at_15.22.47 -
replying to a deleted discussion fails without displaying an error -
@fatihacet counter of resolved discussions includes unresolvable discussions Screen_Shot_2018-06-06_at_15.26.39 -
@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 overwritten-resolve-vue -
@fatihacet may be fixed in another branch if two comments on same line: resolved comments get displayed as unresolved -
empty state has buttons and is misaligned: Screen_Shot_2018-06-12_at_11.47.48 Screen_Shot_2018-06-12_at_11.47.27 old implementation
TODO and FIXME comments
-
@fatihacet in merge_request_tabs.jshttps://gitlab.com/gitlab-org/gitlab-ce/merge_requests/17846#note_64015177 -
@fatihacet in merge_requests/show.html.hamlhttps://gitlab.com/gitlab-org/gitlab-ce/merge_requests/17850#note_64082034 -
@fatihacet in diffs/store/utils.jshttps://gitlab.com/gitlab-org/gitlab-ce/merge_requests/17854/diffs#note_64305834 -
@fatihacet in diffs/store/utils.jshttps://gitlab.com/gitlab-org/gitlab-ce/merge_requests/17854/diffs#note_64307978 -
@fatihacet in diffs/components/app.vuehttps://gitlab.com/gitlab-org/gitlab-ce/merge_requests/17855/diffs#note_64308286 -
@fatihacet in diffs/components/diff_line_note_form.vuehttps://gitlab.com/gitlab-org/gitlab-ce/merge_requests/17859/diffs#note_64309413 -
@psimyn in changed_files.vuetemplate https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/17856#note_64366129 -
@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 expandedBoolean flag
Edited by Fatih Acet