Fetch and display readonly inline comments. #1856

annthurium · 2018-12-19T18:54:22Z

Description of the Change

Another step in our quest to march ever onwards towards code review in the editor.

This pull request adds readonly comments to pull request pane, that are displayed inline with the diff.

See design here: https://github.com/atom/github/blob/master/docs/feature-requests/003-pull-request-review.md

TODO

implementation tracking project

Alternate Designs

Some alternate visual designs were discussed here: https://github.com/atom/github/blob/master/docs/feature-requests/003-pull-request-review.md

Benefits

Viewing inline comments allows users to address feedback from code reviewers without context switching back and forth to GitHub dotcom.
Lays the groundwork for editable comments, which would allow reviewers to review code within their editor. Less context switching, and the ability to see more of the code you're reviewing, and it's easier to run the code, which should lead to easier and more thorough code reviews.

Possible Drawbacks

Applicable Issues

N/A

Metrics

Number of times the tab that contains the comments is viewed. This helps us understand whether users are discovering the feature.

Test Plan

Release Notes

The GitHub package now shows readonly inline comments in the pull request view.

User Experience Research (Optional)

We have a user experience research script for the GitHub pane and the pull request view, that will help us understand how the information we're displaying is or is not useful to our users. We intend to resume user research in January, after the holidays.

codecov · 2018-12-19T18:54:31Z

Codecov Report

Merging #1856 into master will decrease coverage by 0.08%.
The diff coverage is 89.83%.

@@            Coverage Diff             @@
##           master    #1856      +/-   ##
==========================================
- Coverage   91.09%   91.01%   -0.09%     
==========================================
  Files         185      189       +4     
  Lines       10719    10835     +116     
  Branches     1575     1592      +17     
==========================================
+ Hits         9765     9861      +96     
- Misses        954      974      +20

Impacted Files	Coverage Δ
lib/containers/issueish-detail-container.js	`100% <ø> (ø)`	⬆️
lib/containers/pr-changed-files-container.js	`100% <ø> (ø)`	⬆️
lib/views/pr-commits-view.js	`56.52% <ø> (-1.82%)`	⬇️
lib/controllers/multi-file-patch-controller.js	`100% <ø> (ø)`	⬆️
lib/controllers/issueish-detail-controller.js	`100% <ø> (ø)`	⬆️
lib/views/pr-detail-view.js	`100% <ø> (ø)`	⬆️
lib/containers/pr-reviews-container.js	`0% <0%> (ø)`
lib/views/pr-review-comments-view.js	`100% <100%> (ø)`
lib/helpers.js	`90.09% <100%> (+0.09%)`	⬆️
lib/models/patch/multi-file-patch.js	`100% <100%> (ø)`	⬆️
... and 11 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 4786390...9f5c577. Read the comment docs.

Co-Authored-By: Vanessa Yuen <[email protected]>

Co-Authored-By: Tilde Ann Thurium <[email protected]>

lib/views/pr-comments-view.js

todo · 2018-12-21T18:37:44Z

verify that this works on Windows

github/lib/models/patch/multi-file-patch.js

Lines 343 to 348 in 3b89168

    
             // TODO verify that this works on Windows 
        
             const {startBufferRow, index} = this.diffRowOffsetIndices.get(fileName); 
        
             const {offset} = index.lowerBound({diffRow}).data(); 
        
             return startBufferRow + diffRow - offset; 
        
           }

This comment was generated by todo based on a `TODO` comment in `3b89168` in #1856. cc @atom.

hopefully this makes the tests easier to understand? IDK. YOLO.

we don't actually sort the comments by date. They come in in order and then we reverse them for some reason.

annthurium · 2019-01-09T16:55:16Z

lib/containers/pr-review-comments-container.js

+    this.handleComments();
+  }
+
+  handleComments = error => {


hmm so actually, we are logging errors and stopping fetching if the errors exist, collecting the comments, and then attempting to load more comments. So logErrors doesn't cover it all either. Not sure what a better name would be but surely we can come up with something. 🤔 anyone have suggestions?

annthurium · 2019-01-09T16:55:40Z

lib/controllers/pr-reviews-controller.js

+    }
+  }
+
+  handleError = error => {


same as other comment above re: need a better name for this method.

annthurium · 2019-01-09T17:01:31Z

lib/controllers/pr-reviews-controller.js

+          state[comment.id] = [comment];
+        } else {
+          // TODO: look at this more closely...
+          // When comment being replied to is outdated...?? Not 100% sure...


I tried replying to an outdated comment, and it did not show up in the pull request view. So yeah, I have no idea how we'd get into this state.

@kuychaco are there other ways you'd suggest we investigate this? I'm not sure what else to do.

Maybe when replying to a deleted or hidden comment?

okay, so I tried:

replying to a deleted comment

replying to a resolved comment

replying to a hidden comment

None of these triggered that condition for line 132. However, I did notice we are not respecting hidden comments. That seems like a ship blocker to me since we should not be showing users comments that have been marked as abusive or spammy.

smashwilson

The only blocker I see is an unresolved TODO from and for myself 😅 I'll give that a shot tonight when I'm on the Windows box and dismiss this, then we should be clear to 🚢. Nice work everyone!

smashwilson · 2019-01-10T19:41:56Z

lib/containers/issueish-detail-container.js

      commitCursor: null,
+      reviewCount: PAGE_SIZE,
+      reviewCursor: null,
+      commentCount: PAGE_SIZE,


Do we know how this effects our rate-limit overhead? The way that GraphQL queries are rate-limited is a bit unexpected:

Individual calls cannot request more than 500,000 total nodes.

I would guess that we could drop the review and review comment page sizes to drop our computed node total without impacting the vast majority of review scenarios.

Maybe @telliott27 has some idea of the distribution of number of reviews and number of comments within a review and could help us find a lower limit that would still capture ~70% or ~80% of requests in a single page... ?

I pulled some distribution stats for number of reviews and number of review comments here: https://ghe.io/telliott27/reports/tree/master/Notebooks/PR%20Review%20Comments#pr-reviews-and-comments-percentiles

The TL;DR is that it is rare for a PR to have more than 10 reviews, and for reviews to have more than 10 comments.

smashwilson · 2019-01-10T19:45:37Z

lib/containers/pr-review-comments-container.js

+  }
+
+  componentDidMount() {
+    this.handleComments();


I see that we're only calling this from componentDidMount(). Is there any case in which we would want to re-collect comments again because props changed? We could make this a React.PureComponent and implement a componentDidUpdate() method as well.

we are also calling this method in _loadMoreComments - it's the callback that gets passed to relay.loadMore. We do want to keep calling handleComments each time we receive new props, because the parent component needs to know when all the comments have been received, so it can group them by replyTo.id. Does the suggestion of making this a pure component still make sense under those conditions?

smashwilson · 2019-01-10T19:51:42Z

lib/containers/pr-review-comments-container.js

+    this.handleComments();
+  }
+
+  handleComments = error => {


How about accumulateComments or acceptComments?

smashwilson · 2019-01-10T19:55:34Z

lib/controllers/multi-file-patch-controller.js

    undoLastDiscard: PropTypes.func,
    surface: PropTypes.func,
+
+    switchToIssueish: PropTypes.func,


Ah, we need this to support hyperlinks in rendered review comment bodies. 👌

smashwilson · 2019-01-10T20:00:21Z

lib/controllers/pr-reviews-controller.js

+          state[comment.id] = [comment];
+        } else {
+          // TODO: look at this more closely...
+          // When comment being replied to is outdated...?? Not 100% sure...


Maybe when replying to a deleted or hidden comment?

smashwilson · 2019-01-10T20:02:46Z

lib/models/patch/multi-file-patch.js

  }

+  getBufferRowForDiffPosition = (fileName, diffRow) => {
+    // TODO verify that this works on Windows


🚨 Oh right, I still need to do this. I think dotcom always gives us fileName with / separators, but we normalize them to \ before display.

Spoiler alert: they were not handled correctly. It was the worst of both worlds: we were showing dotcom diffs with / separators, but also throwing an exception here when trying to load comments.

I've fixed the path normalization so that the "Files" tab will (a) display paths with native path separators and (b) correctly compute comment offsets with the normalized paths.

smashwilson · 2019-01-10T20:05:19Z

lib/views/pr-review-comments-view.js

+      const nativePath = toNativePathSep(rootComment.path);
+      const row = this.props.getBufferRowForDiffPosition(nativePath, rootComment.position);
+      const point = new Point(row, 0);
+      const range = new Range(point, point);


We could probably extract a helper for "make a one-point Range at position 0 of this row". 🤔

Hmm, this is the only place we're doing that though. So not sure we need a helper.

smashwilson · 2019-01-10T20:05:58Z

lib/views/pr-review-comments-view.js

+          <img className="github-PrComment-avatar" src={author ? author.avatarUrl : ''} alt={login} />
+          {login} commented{' '}
+          <a className="github-PrComment-timeAgo" href={this.props.comment.url}>
+            <Timeago time={this.props.comment.createdAt} />


👍 for code re-use 😄

yeah! I did not realize Timeago existed until this pull request. We should probably be using Timeago in the PullRequestCommitView and a few other places where we're rolling our own humanizing timestamp.

smashwilson · 2019-01-10T20:07:17Z

test/containers/pr-review-comments-container.test.js

+      wrapper.instance()._attemptToLoadMoreComments();
+      assert.strictEqual(relayLoadMoreStub.callCount, 0);
+
+      clock.tick(PAGINATION_WAIT_TIME_MS);


Oh god setTimeout tests 🙈

smashwilson · 2019-01-10T20:07:49Z

test/controllers/pr-reviews-controller.test.js

+        hasPreviousPage: o.reviewStartCursor !== 0,
+      },
+      totalCount: o.reviewItemTotal,
+    };


Note that we do have review and review comment builders for these 😄

it's cleaner, and the tests were stalling when run all together (the individual tests worked fine)

Co-Authored-By: Ash Wilson <[email protected]>

you can mark comments as spammy, or even abusive, so I'm really glad we caught this before shipping.

annthurium · 2019-01-11T22:37:58Z

the last build never reported its status properly but it was green on azure pipelines I promise!

start on graphQL query for fetching inline comments

267dbbb

annthurium added the work-in-progress label Dec 19, 2018

annthurium assigned vanessayuenn Dec 19, 2018

Tilde Ann Thurium and others added 13 commits December 19, 2018 11:51

add query to fetch reviews in the PullRequestDetailView

2e21569

Co-Authored-By: Vanessa Yuen <[email protected]>

render some comments, woo

a5ea73a

Co-Authored-By: Vanessa Yuen <[email protected]>

maybe my avatar does not need to be the giantest.

346b2dc

Co-Authored-By: Vanessa Yuen <[email protected]>

🔥 unnecessary fragment

8b8f112

fix borked indentation

442033d

get the comments to render as a decoration block

1b1a7fc

Merge branch 'master' into pr-1856/atom/18-dec-inline-comments

c4c4fc1

Merge branch 'master' into pr-1856/atom/18-dec-inline-comments

e536c9f

make comments show up at the (somewhat) correct location

d0adf43

Co-Authored-By: Tilde Ann Thurium <[email protected]>

put in comment position also

5f4f513

Co-Authored-By: Tilde Ann Thurium <[email protected]>

make PullRequestCommentsView into its own component.

b341c5d

render comment timestamp

847829c

Style PrComment

1a2ac47

simurai reviewed Dec 21, 2018

View reviewed changes

lib/views/pr-comments-view.js Outdated Show resolved Hide resolved

vanessayuenn and others added 10 commits December 21, 2018 13:24

comment as its own class

b7e443d

Return null from render() when there are no comments

33f16d2

get bodyHTML for comment also

4efcb05

use github markdown component to show the comments

6093aa4

drill switchToIssueish prop

7f46614

pass switchToIssueish through properly

6c3a335

Start a (failing) test for comment positioning

43e679d

font is a bit large

2ca9fa6

Don't re-invent the binary... tree... wheel?

ea4b751

Compute buffer rows for diff positions, given as filename + diff row

3b89168

Use getBufferRowForDiffPosition to position review comments

ffbf81a

Tilde Ann Thurium added 7 commits January 8, 2019 11:22

yummy copypasta

24e00fc

test for replying to an outdated comment

313363c

add a const for originalCommentId

f07d251

hopefully this makes the tests easier to understand? IDK. YOLO.

🎨 extra pedantic comment update

86e8f2b

don't test sorting comments by date

db38949

we don't actually sort the comments by date. They come in in order and then we reverse them for some reason.

make review builder actually return submittedAt

f1557b7

test that comments show up grouped by review submittedAt date

26fa612

annthurium changed the title ~~[wip] Fetch and display readonly inline comments.~~ Fetch and display readonly inline comments. Jan 8, 2019

annthurium removed the work-in-progress label Jan 8, 2019

update react component atlas

bc87b98

annthurium commented Jan 9, 2019

View reviewed changes

Tilde Ann Thurium added 5 commits January 9, 2019 09:30

fussing with the test formatting

95c7d67

explicitly test date comparator

56f0eae

t e s t c o v e r a g e

7ff898f

Merge branch 'master' into 18-dec-inline-comments

082f035

add ugly ForwardRef thing to fix tests

f805399

smashwilson suggested changes Jan 10, 2019

View reviewed changes

Tilde Ann Thurium and others added 5 commits January 10, 2019 14:50

move clock inside the only test that needs it

a9a7ecd

it's cleaner, and the tests were stalling when run all together (the individual tests worked fine)

accumulate is totes a better name for those functions

8889793

Co-Authored-By: Ash Wilson <[email protected]>

move other fake :clock: inside test too

7155d25

deal with minimized comments

615df63

you can mark comments as spammy, or even abusive, so I'm really glad we caught this before shipping.

Handle path separator normalization on Windows

adf996e

smashwilson approved these changes Jan 11, 2019

View reviewed changes

vanessayuenn and others added 2 commits January 11, 2019 16:37

add hidden comment test

00ff5d0

🎨 comment.

9f5c577

annthurium merged commit 6a29a88 into master Jan 11, 2019

annthurium deleted the 18-dec-inline-comments branch January 11, 2019 22:37

kuychaco mentioned this pull request Feb 4, 2019

v0.25.0-0 QA Review #1936

Closed

18 tasks

Fetch and display readonly inline comments. #1856

Fetch and display readonly inline comments. #1856

Uh oh!

Conversation

annthurium commented Dec 19, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description of the Change

TODO

Alternate Designs

Benefits

Possible Drawbacks

Applicable Issues

Metrics

Test Plan

Release Notes

User Experience Research (Optional)

Uh oh!

codecov bot commented Dec 19, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

todo bot commented Dec 21, 2018

verify that this works on Windows

This comment was generated by todo based on a TODO comment in 3b89168 in #1856. cc @atom.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

smashwilson left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

annthurium commented Jan 11, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

annthurium commented Dec 19, 2018 •

edited

Loading

codecov bot commented Dec 19, 2018 •

edited

Loading

This comment was generated by todo based on a `TODO` comment in `3b89168` in #1856. cc @atom.