Add tabs for issueish panel items #1684

annthurium · 2018-09-07T23:01:12Z

Description of the Change

This change moves some of the information from the pull request view into tabs.

Screenies

docked:

TODO

Alternate Designs

We had some back and forth about what information goes on each tab. @simurai's initial designs called for description, timeline, commits, and changes as the tab items. We had some back and forth about whether it might be better to use consistent language with what's used on dotcom. See the issue for details. Ultimately it would be best to validate our assumptions with uxr before we ship.
I could have rolled my own tabs instead of using a lib. Although it sounded like fun, I thought it might be a more efficient use of time to not reinvent wheels. This lib is small and well maintained and uses good a11y practices.

Benefits

Separating the information into tabs gives us room for pull request reviews in the editor, which is where all this is headed.

Possible Drawbacks

It's possible that users will find the new UI confusing since we're moving information around.

Applicable Issues

#1656

Test plan

manually test rendering an issue to verify that there are no visual regressions.
unit tests for new PrCommitView component to verify that:
- show / hide more buttons show and hide commit message body
- show / hide more buttons are only rendered if there is a commit message body
- renders link to dotcom, author name and avatar, commit headline, humanized time since the commit happened
unit tests for IssueishDetailView to test that it renders 3 tabs with the right text and icons
unit tests for PrCommitsView to verify that:
- n commits are rendered if n commits are passed in
- load more button is only rendered if there's more commits to be loaded
- clicking loadMore calls the function that loads more stuff

TODOs for future prs:

display co-author avatars
refactor header rendering in IssueishDetailView to improve readability
figure out why keyboard nav doesn't work and fix it

You get a tab. And you get a tab. Everybody gets a tab!

I just wanted to use that commit message, ok? Don't judge meeee.

this is more consistent with how this content is displayed on github.com

coveralls · 2018-09-08T01:02:22Z

Coverage increased (+0.07%) to 82.006% when pulling f88ab19 on tt-18-sept-tabs-tabs-tabs into 10d4dd2 on master.

…tabs-tabs

Co-Authored-By: Katrina Uychaco <[email protected]>

and also add a really long commit body so I can test what that looks like asdkfjksajfklsdajfldsajfklsadjflskjfljdsklajfklsdajfkldsjfkldsajflkdasjfkldsjkldsjflksdajfdksklfdsaj

annthurium · 2018-09-20T23:17:02Z

@kuychaco, as far as what kind of feedback I'm looking for in code review:

did I follow all the graphql conventions we've set in the package? Or are there things that could be improved?
Are there ways I could refactor to enhance readability?

simurai · 2018-09-21T02:59:12Z

Something that came to mind when looking at the many commits of #1512 in the issueish pane: Should the order be reversed? So that new commits appear at the top and you don't have to scroll down and potentially click on "load more" a few times, just to see if new commits are made. The timeline also has the same issue.

We don't have to change it now, just something to consider one day.

To match the commits.

simurai · 2018-09-21T12:34:07Z

lib/views/issueish-detail-view.js

+          <PrTimelineContainer
+            {...childProps}
+            switchToIssueish={this.props.switchToIssueish}
+          /> :


There is a : at the bottom left in the Overview tab:

Is it the ☝️ above : that could be removed?

oh, that's a mistake! Thanks for pointing it out. Will remove.

…to tt-18-sept-tabs-tabs-tabs

kuychaco

This all looks great! The code as well as the finished product. Well done! ✨

lib/views/issueish-detail-view.js

kuychaco · 2018-09-21T18:42:25Z

lib/views/issueish-detail-view.js

-              switchToIssueish={this.props.switchToIssueish}
-            />
-          }
+          {isPr ? this.renderPullRequestBody(issueish, childProps) : this.renderIssueBody(issueish, childProps)}


👍 nice nice

kuychaco · 2018-09-21T18:44:03Z

lib/views/issueish-timeline-view.js

-      <div className="github-PrTimeline-load-more-link" onClick={this.loadMore}>
-        {this.props.relay.isLoading() ? <Octicon icon="ellipsis" /> : 'Load More'}
+      <div className="github-PrTimeline-loadMore">
+        <button className="github-PrTimeline-loadMoreButton btn" onClick={this.loadMore}>


👍 on this being a button

kuychaco · 2018-09-21T19:04:45Z

lib/views/pr-commits-view.js

+        edges {
+          cursor
+          node {
+            commit {


Let's extract this as a fragment on PrCommitView. See timeline/commits-view.js and timeline/commit-view.js as an example.

This keeps our query fragments co-located with the views that use the resulting data, which is inline with Relay's philosophy (reducing unnecessary coupling, reasoning about discrete units of an application in isolation, and breaking complex interfaces into reusable components). I think this may also allow relay to do some extra checking for us to make sure that data from our queries match with what is actually being used.

kuychaco · 2018-09-21T19:06:32Z

test/integration/checkout-pr.test.js

@@ -161,6 +163,7 @@ describe('check out a pull request', function() {
    });
  }

+  // achtung! this test is flaky


hmm weird. Any idea why? 🤔

kuychaco · 2018-09-21T19:08:48Z

test/views/issueish-timeline-view.test.js

@@ -109,7 +109,7 @@ describe('IssueishTimelineView', function() {
    const wrapper = shallow(buildApp({
      relayHasMore: () => false,
    }));
-    assert.isFalse(wrapper.find('.github-PrTimeline-load-more-link').exists());
+    assert.isFalse(wrapper.find('.github-PrTimeline-loadMoreButton').exists());


Not sure about the appropriate convention here, just noticing that we've switched from hyphen-separated to camelCase... same below.

I think @simurai made that change - I'm happy to switch to kabob-case for the sake of consistency.

The naming convention would be camelCase for child elements of a component. So it can easily be read in groups: github-PrTimeline-loadMoreButton -> It's the loadMoreButton inside the PrTimeline component inside the github package. We don't follow that convention everywhere, which isn't a big deal.

kuychaco · 2018-09-21T19:10:37Z

test/views/pr-commit-view.test.js

+  committerName: 'Margaret Hamilton',
+  date: '2018-05-16T21:54:24.500Z',
+  messageHeadline: 'This one weird trick for getting to the moon will blow your mind 🚀',
+  abbreviatedOid: 'bad1dea',


kuychaco · 2018-09-21T19:16:46Z

Should the order be reversed?

Oh oops. Yeah the order should totally be recent items first

Co-Authored-By: Katrina Uychaco <[email protected]>

annthurium · 2018-09-21T23:09:36Z

@kuychaco @simurai dotcom renders the newest commits at the bottom of the commits tab. While we don't have to stay consistent with dotcom in every way, I think that reversing the order here might be confusing to users. I'm willing to test this with uxr and revisit it, though!

I knew I was going to do that. Co-Authored-By: Katrina Uychaco <[email protected]>

…to tt-18-sept-tabs-tabs-tabs

Tilde Ann Thurium added 4 commits September 7, 2018 14:27

npm install react-tabs

3e3a9ae

Move some content into tabs

b96d246

You get a tab. And you get a tab. Everybody gets a tab!

🔥 bullets

972e018

I just wanted to use that commit message, ok? Don't judge meeee.

move timeline to conversation tab

537c499

this is more consistent with how this content is displayed on github.com

annthurium added the work-in-progress label Sep 7, 2018

Tilde Ann Thurium added 2 commits September 7, 2018 17:49

❇️ some css

11e9e7c

👕

8b4f50c

Tilde Ann Thurium added 6 commits September 10, 2018 13:14

Merge branch 'master' of github.com:atom/github into tt-18-sept-tabs-…

970d664

…tabs-tabs

change "checks" to "build status"

eba451f

change "conversation" to "overview"

7a820b0

add octicons and fix border

4577610

add docked styles

61ff2a1

add unit tests for tabs

e3e7853

smashwilson mentioned this pull request Sep 11, 2018

Multi-File Diff #1689

Closed

Tilde Ann Thurium and others added 15 commits September 11, 2018 11:20

👕

8d6ff04

Files Changed => Commits

3041405

fetch commit data with relay

9d3a743

Co-Authored-By: Katrina Uychaco <[email protected]>

rendering some commits, woo

a1400c7

Co-Authored-By: Katrina Uychaco <[email protected]>

make it slightly less ugly

cb958d1

and also add a really long commit body so I can test what that looks like asdkfjksajfklsdajfldsajfklsadjflskjfljdsklajfklsdajfkldsjfkldsajflkdasjfkldsjkldsjflksdajfdksklfdsaj

more styling

6dc93d0

fix borders and height

8ccd2b2

show the author avatar image

3b82e61

humanize timesince

266dc2d

css variables are a thing.

ecda9e1

make button text say "hide" or "show"

271a54c

clean up da props

bd86e50

👕

b0bcc13

fix indentation, sigh

15b32b1

Merge branch 'master' of github.com:atom/github into tt-18-sept-tabs-tab

a5f7a8d

Tilde Ann Thurium added 3 commits September 20, 2018 13:51

👕

4a3650d

remove tab border when docked

551a665

fix IssueishDetailContaine tests

235cfa2

annthurium removed the work-in-progress label Sep 20, 2018

annthurium changed the title ~~[wip] Add tabs for issueish panel items~~ Add tabs for issueish panel items Sep 20, 2018

add some notes to checkout-pr test

e4f575e

annthurium requested a review from kuychaco September 20, 2018 23:05

smashwilson assigned annthurium Sep 21, 2018

Style "Load more" button in the Overview

c7e7033

To match the commits.

simurai reviewed Sep 21, 2018

View reviewed changes

Tilde Ann Thurium added 2 commits September 21, 2018 09:27

remove errant colon

7613041

Merge branch 'tt-18-sept-tabs-tabs-tabs' of github.com:atom/github in…

6837b54

…to tt-18-sept-tabs-tabs-tabs

kuychaco approved these changes Sep 21, 2018

View reviewed changes

Tilde Ann Thurium and others added 3 commits September 21, 2018 15:44

change "link" to "button" in IssueishTimelineView tests

c692fdb

Co-Authored-By: Katrina Uychaco <[email protected]>

add tests for PrCommitView

1542fe4

Co-Authored-By: Katrina Uychaco <[email protected]>

add tests for loadMoreButton

0dcad21

Co-Authored-By: Katrina Uychaco <[email protected]>

kuychaco and others added 4 commits September 21, 2018 16:20

Extract renderPrMetadata method for readability

9257976

🔥 .only

2a25458

I knew I was going to do that. Co-Authored-By: Katrina Uychaco <[email protected]>

Merge branch 'tt-18-sept-tabs-tabs-tabs' of github.com:atom/github in…

3c6a730

…to tt-18-sept-tabs-tabs-tabs

👕

4d2e7f1

kuychaco force-pushed the tt-18-sept-tabs-tabs-tabs branch from f07bb6a to 4d2e7f1 Compare September 24, 2018 16:17

Tilde Ann Thurium added 3 commits September 24, 2018 13:18

extract fragment

8349385

fix tests

3bd4100

👕

f88ab19

annthurium merged commit 1b4c899 into master Sep 25, 2018

annthurium mentioned this pull request Oct 20, 2018

v0.21.0-0 QA Review #1752

Closed

7 tasks

Add tabs for issueish panel items #1684

Add tabs for issueish panel items #1684

Uh oh!

Conversation

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

Uh oh!

Description of the Change

Screenies

TODO

Alternate Designs

Benefits

Possible Drawbacks

Applicable Issues

Test plan

TODOs for future prs:

Uh oh!

coveralls commented Sep 8, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

annthurium commented Sep 20, 2018

Uh oh!

simurai commented Sep 21, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kuychaco left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kuychaco Sep 21, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

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!

kuychaco commented Sep 21, 2018

Uh oh!

annthurium commented Sep 21, 2018

Uh oh!

Uh oh!

annthurium commented Sep 7, 2018 •

edited

Loading

coveralls commented Sep 8, 2018 •

edited

Loading

kuychaco Sep 21, 2018 •

edited

Loading