Pull request review/approval and comment on code (#3748)

* Initial ui components for pull request review

* Add Review
Add IssueComment types

Signed-off-by: Jonas Franz <info@jonasfranz.software>

(cherry picked from commit 2b4daab)
Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Replace ReviewComment with Content

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Add load functions
Add ReviewID to findComments

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Add create review comment implementation
Add migration for review
Other small changes

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Simplified create and find functions for review

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Moved "Pending" to first position

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Add GetCurrentReview to simplify fetching current review

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Preview for listing comments

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Move new comment form to its own file

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Implement Review form
Show Review comments on comment stream

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Add support for single comments
Showing buttons in context

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Add pending tag to pending review comments

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Add unit tests for Review

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Fetch all review ids at once
Add unit tests

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* gofmt

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Improved comment rendering in "Files" view by adding Comments to DiffLine

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Add support for invalidating comments

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Switched back to code.gitea.io/git

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Moved review migration from v64 to v65

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Rebuild css

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* gofmt

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Improve translations

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Fix unit tests by updating fixtures and updating outdated test

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Comments will be shown at the right place now

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Add support for deleting CodeComments

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Fix problems caused by files in subdirectories

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Add support for showing code comments of reviews in conversation

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Add support for "Show/Hide outdated"

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Update code.gitea.io/git

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Add support for new webhooks

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Update comparison

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Resolve conflicts

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Minor UI improvements

* update code.gitea.io/git

* Fix ui bug reported by @lunny causing wrong position of add button
Add functionality to "Cancel" button
Add scale effects to add button
Hide "Cancel" button for existing comments

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Prepare solving conflicts

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Show add button only if no comments already exist for the line

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Add missing vendor files

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Check if reviewer is nil

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Show forms only to users who are logged in

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Revert "Show forms only to users who are logged in"

This reverts commit c083682

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Save patch in comment
Render patch for code comments

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Add link to comment in code

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Add reply form to comment list
Show forms only to signed in users

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Add 'Reply' as translatable
Add CODE_COMMENT_LINES setting

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* gofmt

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Fix problems introduced by checking for singed in user

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Add v70

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Update generated stylesheet

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Fix preview
Beginn with new review comment patch system

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Add new algo to generate diff for line range
Remove old algo used for cutting big diffs (it was very buggy)

* Add documentation and example for CutDiffAroundLine

* Fix example of CutDiffAroundLine

* Fix some comment UI rendering bugs

* Add code comment edit mode

* Send notifications / actions to users until review gets published
Fix diff generation bug
Fix wrong hashtag

* Fix vet errors

* Send notifications also for single comments

* Fix some notification bugs, fix link

* Fix: add comment icon is only shown on code lines

* Add lint comment

* Add unit tests for git diff

* Add more error messages

* Regenerated css

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* fmt

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Regenerated CSS with latest less version

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Fix test by updating comment type to new ID

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Introducing CodeComments as type for map[string]map[int64][]*Comment
Other minor code improvements

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Fix data-tab issues

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Remove unnecessary change

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* refactored checkForInvalidation

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Append comments instead of setting

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Use HeadRepo instead of BaseRepo

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Update migration

Signed-off-by: Jonas Franz <info@jonasfranz.de>

* Regenerated CSS

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Add copyright

Signed-off-by: Jonas Franz <info@jonasfranz.software>

* Update index.css

Signed-off-by: Jonas Franz <info@jonasfranz.software>

public/js/index.js

@@ -604,7 +604,7 @@ function initRepository() {
             // Setup new form
             if ($editContentZone.html().length == 0) {
                 $editContentZone.html($('#edit-content-form').html());
-                $textarea = $segment.find('textarea');
+                $textarea = $('#content');
                 issuesTribute.attach($textarea.get());
                 emojiTribute.attach($textarea.get());
 
@@ -761,6 +761,104 @@ function initRepository() {
     }
 }
 
+function initPullRequestReview() {
+    $('.show-outdated').on('click', function (e) {
+        e.preventDefault();
+        var id = $(this).data('comment');
+        $(this).addClass("hide");
+        $("#code-comments-" + id).removeClass('hide');
+        $("#code-preview-" + id).removeClass('hide');
+        $("#hide-outdated-" + id).removeClass('hide');
+    });
+
+    $('.hide-outdated').on('click', function (e) {
+        e.preventDefault();
+        var id = $(this).data('comment');
+        $(this).addClass("hide");
+        $("#code-comments-" + id).addClass('hide');
+        $("#code-preview-" + id).addClass('hide');
+        $("#show-outdated-" + id).removeClass('hide');
+    });
+
+    $('.comment-form-reply').on('click', function (e) {
+        e.preventDefault();
+        $(this).hide();
+        var form = $(this).parent().find('.comment-form')
+        form.removeClass('hide');
+        assingMenuAttributes(form.find('.menu'));
+    });
+    // The following part is only for diff views
+    if ($('.repository.pull.diff').length == 0) {
+        return;
+    }
+
+    $('.diff-detail-box.ui.sticky').sticky();
+
+    $('.btn-review').on('click', function(e) {
+        e.preventDefault();
+        $(this).closest('.dropdown').find('.menu').toggle('visible');
+    }).closest('.dropdown').find('.link.close').on('click', function(e) {
+        e.preventDefault();
+        $(this).closest('.menu').toggle('visible');
+    });
+
+    $('.code-view .lines-code,.code-view .lines-num')
+        .on('mouseenter', function() {
+            var parent = $(this).closest('td');
+            $(this).closest('tr').addClass(
+                parent.hasClass('lines-num-old') || parent.hasClass('lines-code-old')
+                    ? 'focus-lines-old' : 'focus-lines-new'
+            );
+        })
+        .on('mouseleave', function() {
+            $(this).closest('tr').removeClass('focus-lines-new focus-lines-old');
+        });
+    $('.add-code-comment').on('click', function(e) {
+        e.preventDefault();
+        var isSplit = $(this).closest('.code-diff').hasClass('code-diff-split');
+        var side = $(this).data('side');
+        var idx = $(this).data('idx');
+        var path = $(this).data('path');
+        var form = $('#pull_review_add_comment').html();
+        var tr = $(this).closest('tr');
+        var ntr = tr.next();
+        if (!ntr.hasClass('add-comment')) {
+            ntr = $('<tr class="add-comment">'
+                    + (isSplit ? '<td class="lines-num"></td><td class="add-comment-left"></td><td class="lines-num"></td><td class="add-comment-right"></td>'
+                               : '<td class="lines-num"></td><td class="lines-num"></td><td class="add-comment-left add-comment-right"></td>')
+                    + '</tr>');
+            tr.after(ntr);
+        }
+        var td = ntr.find('.add-comment-' + side);
+        var commentCloud = td.find('.comment-code-cloud');
+        if (commentCloud.length === 0) {
+            td.html(form);
+            commentCloud = td.find('.comment-code-cloud');
+            var id = assingMenuAttributes(commentCloud.find('.menu'));
+            commentCloud.find('.tab.segment').each(function(i, item) {
+                $(item).attr('data-tab', $(item).attr('data-tab') + id);
+            });
+            td.find("input[name='line']").val(idx);
+            td.find("input[name='side']").val(side === "left" ? "previous":"proposed");
+            td.find("input[name='path']").val(path);
+        }
+        commentCloud.find('textarea').focus();
+    });
+}
+
+function assingMenuAttributes(menu) {
+    var id = Math.floor(Math.random() * Math.floor(1000000));
+    menu.attr('data-write', menu.attr('data-write') + id);
+    menu.attr('data-preview', menu.attr('data-preview') + id);
+    menu.find('.item').each(function(i, item) {
+        $(item).attr('data-tab', $(item).attr('data-tab') + id);
+    });
+    menu.parent().find("*[data-tab='write']").attr('data-tab', 'write' + id);
+    menu.parent().find("*[data-tab='preview']").attr('data-tab', 'preview' + id);
+    initCommentPreviewTab(menu.parent(".form"));
+    return id;
+}
+
 function initRepositoryCollaboration() {
     console.log('initRepositoryCollaboration');
 
@@ -1771,6 +1869,7 @@ $(document).ready(function () {
     initU2FAuth();
     initU2FRegister();
     initIssueList();
+    initPullRequestReview();
 
     // Repo clone url.
     if ($('#repo-clone-url').length > 0) {
@@ -2528,3 +2627,13 @@ function initIssueList() {
         })
     ;
 }
+function cancelCodeComment(btn) {
+    var form = $(btn).closest("form");
+    if(form.length > 0 && form.hasClass('comment-form')) {
+        form.addClass('hide');
+        form.parent().find('.comment-form-reply').show();
+    }else {
+        console.log("Hey");
+        form.closest('.comment-code-cloud').remove()
+    }
+}

public/less/_base.less

@@ -371,7 +371,11 @@ pre, code {
     }
 }
 
+.file-comment {
+    font: 12px Consolas,"Liberation Mono",Menlo,Courier,monospace;
+    color: rgba(0,0,0,.87);
 
+}
 
 .overflow.menu {
     .items {
@@ -443,6 +447,12 @@ footer {
 
 .hide {
     display: none;
+    &.show-outdated {
+        display: none !important;
+    }
+    &.hide-outdated {
+        display: none !important;
+    }
 }
 .center {
     text-align: center;

public/less/_repository.less

@@ -705,6 +705,21 @@
                         margin-right: -1px;
                         font-size: 25px;
                     }
+                    &.octicon-comment {
+                        margin-top: 4px;
+                        margin-left: -35px;
+                        font-size: 24px;
+                    }
+                    &.octicon-eye {
+                        margin-top: 3px;
+                        margin-left: -35px;
+                        margin-right: 0px;
+                        font-size: 22px;
+                    }
+                    &.octicon-x {
+                        margin-left: -33px;
+                        font-size: 25px;
+                    }
                 }
                 .detail {
                     font-size: 0.9rem;
@@ -883,38 +898,44 @@
                 width: 140px;
             }
         }
-                td.sha .sha.label {
-                        margin: 0;
-                }
+        td.sha .sha.label {
+            margin: 0;
+        }
         &.ui.basic.striped.table tbody tr:nth-child(2n) {
             background-color: rgba(0, 0, 0, .02)!important;
         }
     }
 
-        #commits-table td.sha .sha.label, #repo-files-table .sha.label{
-                &.isSigned{
-                        border: 1px solid #BBB;
-                        .detail.icon{
-                                background: #FAFAFA;
-                                margin: -6px -10px -4px 0px;
-                                padding: 5px 3px 5px 6px;
-                                border-left: 1px solid #BBB;
-                                border-top-left-radius: 0;
-                                border-bottom-left-radius: 0;
-                        }
-                }
-                &.isSigned.isVerified{
-                        border: 1px solid #21BA45;
-                        background: #21BA4518;
-                        .detail.icon{
-                                border-left: 1px solid #21BA4580;
-                        }
-                }
+    #commits-table td.sha .sha.label, #repo-files-table .sha.label{
+        &.isSigned{
+            border: 1px solid #BBB;
+            .detail.icon{
+                background: #FAFAFA;
+                margin: -6px -10px -4px 0px;
+                padding: 5px 3px 5px 6px;
+                border-left: 1px solid #BBB;
+                border-top-left-radius: 0;
+                border-bottom-left-radius: 0;
+            }
         }
+        &.isSigned.isVerified{
+            border: 1px solid #21BA45;
+            background: #21BA4518;
+            .detail.icon{
+                border-left: 1px solid #21BA4580;
+            }
+        }
+    }
 
     .diff-detail-box {
-        margin: 15px 0;
+        padding: 7px 0;
+        background: #fff;
         line-height: 30px;
+        >div:after{
+            clear: both;
+            content: "";
+            display: block;
+        }
         ol {
             clear: both;
             padding-left: 0;
@@ -947,8 +968,9 @@
                 background-color: #dad8ff;
             }
         }
-        .ui.right {
-            margin-bottom: 15px;
+        .detail-files {
+            background: #fff;
+            margin: 0px;
         }
     }
     .diff-box .header {

public/less/_review.less

@@ -0,0 +1,103 @@
+.ui.button.add-code-comment {
+    font-size: 14px;
+    height: 16px;
+    padding: 2px 0 0;
+    position: relative;
+    width: 16px;
+    z-index: 5;
+    float: left;
+    margin: -2px -10px -2px -20px;
+    opacity: 0;
+    transition: transform 0.1s ease-in-out;
+    transform: scale(1, 1);
+
+    &:hover {
+      transform: scale(1.2, 1.2);
+    }
+}
+
+.focus-lines-new .ui.button.add-code-comment.add-code-comment-right,
+.focus-lines-old .ui.button.add-code-comment.add-code-comment-left {
+    opacity: 1;
+}
+
+.comment-code-cloud {
+    padding: 4px;
+    margin: 0 auto;
+    position: relative;
+    border: 1px solid #f1f1f1;
+    margin-top: 13px;
+    margin-right: 10px;
+    margin-bottom: 5px;
+
+    &:before {
+        content: " ";
+        width: 0;
+        height: 0;
+        border-left: 13px solid transparent;
+        border-right: 13px solid transparent;
+        border-bottom: 13px solid #f1f1f1;
+        left: 20px;
+        position: absolute;
+        top: -13px;
+    }
+
+    .attached.tab {
+        border: none;
+        padding: 0;
+        margin: 0;
+
+        &.markdown {
+            padding: 1em;
+            min-height: 168px;
+        }
+    }
+
+    .right.menu.options .item {
+        padding: 0.85714286em 0.442857em;
+        cursor: pointer;
+    }
+
+    .ui.form textarea {
+        border: 0px;
+    }
+
+    .ui.attached.tabular.menu {
+        background: #f7f7f7;
+        border: 1px solid #d4d4d5;
+        padding-top: 5px;
+        padding-left: 5px;
+        margin-top: 0px;
+    }
+
+    .footer {
+        border-top: 1px solid #f1f1f1;
+        margin-top: 10px;
+
+        .markdown-info {
+            display: inline-block;
+            margin: 5px 0;
+            font-size: 12px;
+            color: rgba(0,0,0,.6)
+        }
+
+        .ui.right.floated {
+            padding-top: 6px;
+        }
+
+        &:after{
+            clear: both;
+            content: "";
+            display: block;
+        }
+    }
+
+    .comment-form-reply {
+        margin: 0.5em !important;
+    }
+}
+
+.file-comment {
+    font: 12px Consolas,"Liberation Mono",Menlo,Courier,monospace;
+    color: rgba(0,0,0,.87);
+}

public/less/index.less

@@ -12,3 +12,4 @@
 @import "_dashboard";
 @import "_admin";
 @import "_explore";
+@import "_review";