Pull Request list #1523

smashwilson · 2018-06-12T14:50:08Z

Implement the first part of RFC-002: two lists of pull requests in the GitHub tab, one showing the "current" pull request (if any), and the other showing all pull requests on the chosen remote.

Before + After

GitHub tab: before	GitHub tab: after

GitHub tab: after, on default ref

GitHub tab: after, on unpublished ref

The "current pull request" list displays any pull requests that are associated with the ref that HEAD pushes to that are also targeted at the chosen remote.

Special handling also exists for other cases:

When HEAD is a detached ref (like a tag);
When no repository exists for the push remote of the HEAD ref;
When the GitHub repository has no default ref (before the first push);
A HEAD ref that's not on the default branch, but that hasn't moved from it;
When a push is in progress;
When an upstream ref exists, but the local ref has unpushed commits;
When the upstream ref exists and is up to date, but has no associated pull request.

Component hierarchy

GithubTabController pane item methods; fetch async data from repository model; top-level tab actions
- RemoteContainer fetch the appropriate token from the login model; query GraphQL for data about the chosen remote; render login, loading, or error views when appropriate
  - RemoteController createPR action method
    - IssueishSearchesController manage set of Search models
      - IssueishSearchContainer perform GraphQL query for a single search. handle loading and error views.
        
        IssueishListController translate GraphQL result objects into Issueish models
        
        IssueishListView render Accordion widget with issueish results
      - CurrentPullRequestContainer perform GraphQL query for current PR. handle loading and error views.
        
        IssueishListController translate GraphQL result objects into Issueish models
        
        IssueishListView render Accordion widget with issueish results

Countdown to 🚀

Still needs wiring up

simurai · 2018-06-14T08:26:05Z

lib/views/issueish-list-view.js

+      <Fragment>
+        <img
+          className="github-IssueishList-item--avatar"
+          src={issueish.getAuthorAvatarURL() + "&s=32"}


I limited the avatar size to 32px. Makes it look sharper and probably needs less memory?

It currently works, but not sure if this is a good way to set the size. I guess it only works if the URL has something like ?v=4 at the end.

Ah right cool. I've added a size parameter to the Issueish.getAuthorAvatarURL() method and used URL manipulation methods to add the query string parameter... just in case.

simurai · 2018-06-15T01:24:06Z

lib/views/accordion.js

+
+  render() {
+    return (
+      <details className="github-Accordion" open={this.state.expanded}>


We can also move away from the <details> element and just use a <div> or so? Then the triangle icon can be custom.

Oh, sure. I do like keeping markup semantic when I get the chance and not just using <div> every time. But if it's more convenient we can make the elements whatever's easiest.

smashwilson · 2018-06-14T13:24:29Z

😍

test/models/search.test.js

+describe('Search', function() {
+  const origin = new Remote('origin', '[email protected]:atom/github.git');
+
+  it('generates a dotcom URL', function() {


annthurium · 2018-06-20T22:20:58Z

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

+      assert.isTrue(wrapper.find('span.github-IssueishList-item--status').hasClass('icon-x'));
+    });
+
+    it('renders a donut chart if status checks are mixed', function() {


Please let me know if you get tired/annoyed of the bitmoji thing, I can stop.

Please let me know if you get tired/annoyed of the bitmoji thing, I can stop.

I'll be sure to let you know when it stops making me laugh every time 😆

annthurium

Looks good! I thought of a few additional test cases you might want to consider. But overall, excellent work!

simurai · 2018-06-21T04:07:48Z

it would be great if you could add some before/after screenshots to this pull request.

👍 I was wondering why the status icons aren't centered in @smashwilson's screenshots... mystery solved:

simurai

🚢 🚢 🚢

drguthals · 2018-06-21T22:36:44Z

👋
Thank you @smashwilson and @simurai for this awesome progress on the pr review experience in Atom 🎉

A couple things that I think we could improve before 🚢

Calling attention to a UI change

When you are on master, Current pull request has the following messaging:

And when you create a new branch or switch branches that are in sync with master you see the following:

These are extremely similar in look, and nothing happens to call attention to the fact that they have changed. Could we brainstorm a solution to drawing attention to this updated information for the user so that they know what to do next?

(potentially)Fixing messaging

The messaging in the first image above is:
You are currently on your repository's default branch. Create a new branch to share your work with a pull request
However, I see three possible scenarios for a user when they are leaving the master branch:

They are going to a new branch and will potentially open a pr for that branch (what is currently in the messaging)
They are going to an existing branch that is not a part of a pr
They are going to an existing branch that is a part of a pr
I'm trying to figure out where we want to go eventually with our messaging here. Eventually we want things like what we have in the rfc:

"Checkout" button to fetch (if necessary) and check out the pull request. Only enabled if the current pull request is not the current one.

It would be great to get some mock ups where this entire feature would start. As in, what could we imagine is the entry point to the entire pull request experience?
I would like to continue this conversation in a different Issue, for the purposes of this pr, considering we don't have checkout yet, should we add something to the effect of You are currently on your repository's default branch. Checkout or create a new branch to share your work with a pull request?

Confirmation of scope of this pr

Finally, just to confirm, this pr scope does not include the following from the rfc yet:

That is totally fine, I just wanted to make sure I wasn't missing that :D

smashwilson · 2018-06-21T23:51:33Z

These are extremely similar in look, and nothing happens to call attention to the fact that they have changed

👍 Yeah, good point. Maybe we could differentiate them with some iconography on the left... ? For reference, you can see all of the special cases for that tile here:

github/lib/views/create-pull-request-tile.js

Lines 24 to 102 in a0c17a7

    
           if (this.isRepositoryNotFound()) { 
        
             return ( 
        
               <div className="github-CreatePullRequestTile-message"> 
        
                 <strong>Repository not found</strong> for the remote <code>{this.props.remote.getName()}</code>. 
        
                 Do you need to update your remote URL? 
        
               </div> 
        
             ); 
        
           } 
        
           if (this.isDetachedHead()) { 
        
             return ( 
        
               <div className="github-CreatePullRequestTile-message"> 
        
                 You are not currently on any branch. 
        
                 &nbsp;<strong>Create a new branch</strong>&nbsp; 
        
                 to share your work with a pull request. 
        
               </div> 
        
             ); 
        
           } 
        
           if (this.hasNoDefaultRef()) { 
        
             return ( 
        
               <div className="github-CreatePullRequestTile-message"> 
        
                 The repository at remote <code>{this.props.remote.getName()}</code> is 
        
                 empty. Push a main branch to begin sharing your work. 
        
               </div> 
        
             ); 
        
           } 
        
           if (this.isOnDefaultRef()) { 
        
             return ( 
        
               <div className="github-CreatePullRequestTile-message"> 
        
                 You are currently on your repository's default branch. 
        
                 &nbsp;<strong>Create a new branch</strong>&nbsp; 
        
                 to share your work with a pull request. 
        
               </div> 
        
             ); 
        
           } 
        
           if (this.isSameAsDefaultRef()) { 
        
             return ( 
        
               <div className="github-CreatePullRequestTile-message"> 
        
                 Your current branch has not moved from the repository's default branch. 
        
                 &nbsp;<strong>Make some commits</strong>&nbsp; 
        
                 to share your work with a pull request. 
        
               </div> 
        
             ); 
        
           } 
        
           let message = 'Open new pull request'; 
        
           let disable = false; 
        
           const differentRemote = this.pushesToDifferentRemote(); 
        
           if (this.props.pushInProgress) { 
        
             message = 'Pushing...'; 
        
             disable = true; 
        
           } else if (!this.hasUpstreamBranch() || differentRemote) { 
        
             message = 'Publish + open new pull request'; 
        
           } else if (this.props.aheadCount > 0) { 
        
             message = 'Push + open new pull request'; 
        
           } 
        
           return ( 
        
             <div> 
        
               {differentRemote && 
        
                 <div className="github-CreatePullRequestTile-message"> 
        
                   Your current branch is configured to push to the remote 
        
                   <code>{this.props.branches.getHeadBranch().getPush().getRemoteName()}</code>. 
        
                   Publish it to <code>{this.props.remote.getName()}</code> instead? 
        
                 </div> 
        
               } 
        
               <p className="github-CreatePullRequestTile-controls"> 
        
                 <button 
        
                   className="github-CreatePullRequestTile-createPr btn btn-primary" 
        
                   onClick={this.props.onCreatePr} 
        
                   disabled={disable}> 
        
                   {message} 
        
                 </button> 
        
               </p> 
        
             </div> 
        
           );

By the way: something that I really wanted to do was, rather than just bolding some text, offer a control that lets you do the thing that we're prompting for. The problem is that we can't currently enter the branch creation flow because it's done with a popup. I'm hoping that we can revisit that after #1370 is accepted.

(potentially) Fixing messaging

For a bit of background, I took the messaging verbatim from the old GitHub tab code, which I'd introduced kind of ad-hoc in #1376. Happy to workshop better text with anyone who has ideas for improvements 😄 We do have less space in the tile version, so it could likely stand to be made more terse, if nothing else.

However, I see three possible scenarios for a user when they are leaving the master branch:

🤔 True, true. Is there some simple way we can say "you have to move off of master for this to be useful"... ? The compare view from master to master would always be empty, which is why we have that particular scenario special-cased to begin with. I'm not sure of an alternative that covers all of the possible next actions without being really wordy.

I'm trying to figure out where we want to go eventually with our messaging here. Eventually we want things like what we have in the rfc:

"Checkout" button to fetch (if necessary) and check out the pull request. Only enabled if the current pull request is not the current one.

That's destined for the issueish pane item at the moment, though. The "current pull request" is populated based on HEAD so checkout would never be a viable action, right?

Finally, just to confirm, this pr scope does not include the following from the rfc yet:

👍 Yup yup. This is intended to include everything from the Accordion lists and New PR sections of the RFC. "Issueish Pane Item" is still yet to be done. The pane item I'm opening on click here is entirely pre-existing code.

drguthals · 2018-06-21T23:59:33Z

Maybe we could differentiate them with some iconography on the left... ?

Yeah! That's a great start! @simurai what do you think?

By the way: something that I really wanted to do was, rather than just bolding some text, offer a control that lets you do the thing that we're prompting for. The problem is that we can't currently enter the branch creation flow because it's done with a popup. I'm hoping that we can revisit that after #1370 is accepted.

✨ ✨ ✨

I'm not sure of an alternative that covers all of the possible next actions without being really wordy.

Let's brainstorm just a bit but not let it totally block us today

coveralls · 2018-06-22T00:37:52Z

Coverage increased (+1.3%) to 71.353% when pulling 66d149c on aw/accordion-solo into 1fde4dc on master.

daviwil · 2018-06-22T05:33:40Z

This UI looks so friggin' good ✨

simurai · 2018-06-22T07:02:44Z

The messages are now split into two parts:

Why there is no PR.
Possible next step.

The "next step" has an icon as a hint.

All messages

Screenshot	if
	`isOnDefaultRef`
	`isSameAsDefaultRef`
	`hasNoDefaultRef`
	`isDetachedHead`
	`isRepositoryNotFound`
	`differentRemote`
	`default`

Alternatives

I tried italic but it doesn't stick out as much:

Since both parts have bold words, it might look less like they are links to click?

/cc @sguthals @annthurium @smashwilson

"Trailing spaces not allowed"

drguthals

These are ✨ @simurai !!!!

Thank you!!!

Looks good to me with these UI changes 🎉

smashwilson · 2018-06-22T15:06:48Z

Accordion component

0b46fe1

smashwilson added the work-in-progress label Jun 12, 2018

smashwilson and others added 21 commits June 12, 2018 14:03

Search Issueishes with an IssueishListContainer

af6a371

🔥 .only()

5524183

IssueishListController

9d4c436

IssueishListView, first pass

3ac5236

Refactor RemoteSelectorView into its own source file

f30be0b

Search model with factory methods

2d9290e

Use inRemote to implement forCurrentPR

7bd6203

IssueishSearchController to house Searches and IssueishListContainers

df3158e

Pass Search through the Issueish components

0f64368

✅ RemotePrController tests

99481e3

Don't bother to actually execute null searches

1c26fcd

Avoid classname confusion with a BareIssueishListController

4d7a10d

Render a BareIssueishListController directly when loading

639002a

Default results to an empty search result

7732a3f

Update Enzyme expectations

d2a97a1

Boolean toggle to show a "create" tile when empty

373b0aa

add some styling to the avatars

ae1c067

Style PR list

ac27685

Add example staus and age

78b2eb4

Still needs wiring up

Load smaller avatar size

81e9d95

Add overflow scrolling

4806ea6

simurai reviewed Jun 14, 2018

View reviewed changes

smashwilson added 3 commits June 14, 2018 09:09

Use Node's URL manipulation facilities to append an ?s= query parameter

8672bcc

Prevent the default behavior of clicking on a <details> element

ff11c09

Don't bother rendering children if an Accordion isn't expanded

bbb8aba

Oh right, that isn't always there for Enzyme

431d3b2

annthurium reviewed Jun 20, 2018

View reviewed changes

test/models/search.test.js

describe('Search', function() {

const origin = new Remote('origin', '[email protected]:atom/github.git');

it('generates a dotcom URL', function() {

This comment was marked as resolved.

Sign in to view

annthurium reviewed Jun 20, 2018

View reviewed changes

annthurium approved these changes Jun 20, 2018

View reviewed changes

simurai added 2 commits June 21, 2018 12:51

Add styling tweaks to messages and controls

c523511

Align status icons

ea66f29

simurai approved these changes Jun 21, 2018

View reviewed changes

smashwilson added 4 commits June 21, 2018 07:30

Use an IssueishPropType for IssueishListView

9eaa3db

Test passing an Error to an IssueishListController

aa61a74

(capital H *cough*)

ebee260

Test failing to generate search URLs from non-GitHub remotes

a0c17a7

donokuda mentioned this pull request Jun 21, 2018

Speed up PR list and other improvements github/VisualStudio#1737

Merged

Merge remote-tracking branch 'origin/master' into aw/accordion-solo

e14e981

Split messages into two parts

bf45ae2

Fix lint warning

66d149c

"Trailing spaces not allowed"

drguthals approved these changes Jun 22, 2018

View reviewed changes

smashwilson merged commit 1e19579 into master Jun 22, 2018

smashwilson deleted the aw/accordion-solo branch June 22, 2018 15:04

simurai mentioned this pull request Jun 25, 2018

Refactor IssueishPaneItemView #1551

Merged

smashwilson added the feature request 002 Work related to the Issueish List feature request. label Jun 27, 2018

smashwilson mentioned this pull request Jul 17, 2018

Explicit refresh button #1587

Open

kaocher82 mentioned this pull request Aug 1, 2022

[Snyk] Security upgrade node-fetch from 2.6.1 to 3.2.10 Xtuden-com/github#20

Open

CentralIntel mentioned this pull request Aug 1, 2022

[Snyk] Security upgrade node-fetch from 2.6.0 to 3.2.10 CentralIntel/github#22

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Pull Request list #1523

Pull Request list #1523

smashwilson commented Jun 12, 2018 •

edited

Loading

simurai Jun 14, 2018

smashwilson Jun 14, 2018

This comment was marked as resolved.

This comment was marked as resolved.

simurai Jun 15, 2018

smashwilson Jun 15, 2018

smashwilson commented Jun 14, 2018

This comment was marked as resolved.

annthurium Jun 20, 2018

smashwilson Jun 21, 2018

annthurium left a comment

simurai commented Jun 21, 2018

simurai left a comment

drguthals commented Jun 21, 2018 •

edited

Loading

smashwilson commented Jun 21, 2018

drguthals commented Jun 21, 2018

coveralls commented Jun 22, 2018 •

edited

Loading

daviwil commented Jun 22, 2018

simurai commented Jun 22, 2018

drguthals left a comment

smashwilson commented Jun 22, 2018

Pull Request list #1523

Pull Request list #1523

Conversation

smashwilson commented Jun 12, 2018 • edited Loading

Before + After

Component hierarchy

Countdown to 🚀

simurai Jun 14, 2018

Choose a reason for hiding this comment

smashwilson Jun 14, 2018

Choose a reason for hiding this comment

This comment was marked as resolved.

This comment was marked as resolved.

simurai Jun 15, 2018

Choose a reason for hiding this comment

smashwilson Jun 15, 2018

Choose a reason for hiding this comment

smashwilson commented Jun 14, 2018

This comment was marked as resolved.

annthurium Jun 20, 2018

Choose a reason for hiding this comment

smashwilson Jun 21, 2018

Choose a reason for hiding this comment

annthurium left a comment

Choose a reason for hiding this comment

simurai commented Jun 21, 2018

simurai left a comment

Choose a reason for hiding this comment

drguthals commented Jun 21, 2018 • edited Loading

Calling attention to a UI change

(potentially)Fixing messaging

Confirmation of scope of this pr

smashwilson commented Jun 21, 2018

drguthals commented Jun 21, 2018

coveralls commented Jun 22, 2018 • edited Loading

daviwil commented Jun 22, 2018

simurai commented Jun 22, 2018

All messages

Alternatives

drguthals left a comment

Choose a reason for hiding this comment

smashwilson commented Jun 22, 2018

smashwilson commented Jun 12, 2018 •

edited

Loading

drguthals commented Jun 21, 2018 •

edited

Loading

coveralls commented Jun 22, 2018 •

edited

Loading