New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

split IssueishDetailView into IssueDetailView and PullRequestDetailView #1804

Merged
merged 55 commits into from Dec 5, 2018

Conversation

@annthurium
Copy link
Contributor

annthurium commented Nov 20, 2018

addresses #1715.

These components have enough separate functionality that we should move them into their own files. There should be no user facing changes as a result of this refactor - it just makes it easier for us to maintain things in the future.

Todo

  • make new files for the new components
  • extract pr functionality from IssueishDetailView into PullRequestDetailView
  • extract issue functionality from IssueishDetailView into IssueDetailView
  • fix the graphql problems that will undoubtedly arise
  • extract emoji rendering functionality since it's shared by both components
  • do a pass on variables that could maybe be renamed?
  • nuke IssueishDetailContainer and any other dead code
  • fix missing prop warning in pr view when commits tab is clicked
  • all unit tests are green

Manual test plan:

  • open issue in Atom
    • header links to issue on dotcom
    • refresh button pulls down new data
    • issue body text and comments are styled as expected
    • link to dotcom in issue footer exists
    • emoji reactions are rendered
    • switching from an issue to a pull request (by clicking link to a pull request referenced in an issue)
  • open pull request in Atom
    • header links to pull request on dotcom
    • refresh button pulls down new data
    • pull request meta view is styled as expected
    • checkout pull request functionality works.
    • overview tab contains pull request timeline
    • emoji reactions are rendered
    • build status contains the build status
    • commits tab contains commits
    • test a pull request with more than 50 commits to make sure pagination and refetching work correctly
    • switching from an pull request to an issue (by clicking link to an issue referenced in a pull request body)
@coveralls

This comment has been minimized.

Copy link

coveralls commented Nov 20, 2018

Coverage Status

Coverage decreased (-0.03%) to 85.601% when pulling 181a591 on tt-18-nov-split-component into d403789 on master.

annthurium added some commits Dec 4, 2018

fix PropTypes warning in console
...I think these props are actually not required in this component.  
Though, they are required in the child component, and fetched by relay.

Stability Sprint : 20 November 2018 - 8 January 2019 : v0.24.0 automation moved this from In Progress 🔧 to QA Review 🔬 Dec 4, 2018

@vanessayuenn
Copy link
Contributor

vanessayuenn left a comment

thanks for tackling this! :shipit:

annthurium added some commits Dec 4, 2018

add typename to component state
It feels a bit dirty to be checking in multiple places, and also that 
both the issue and the pullRequest have a typename. 

I couldn't figure out how to pull the `__typename` up a level in 
graphql, but at least having a single source of truth in state for the 
type of the type of item we're dealing with seems marginally cleaner.
@smashwilson
Copy link
Member

smashwilson left a comment

Okay, now I am being that jerk to come in and request changes with the third review 🙈

The only showstopper I'm pointing out here is the state derivation being done with a deprecated React lifecycle method (marked with 🚨). Everything else is just my usual verbose self 😄

Show resolved Hide resolved lib/controllers/issueish-detail-controller.js Outdated
Show resolved Hide resolved lib/controllers/issueish-detail-controller.js Outdated
Show resolved Hide resolved lib/controllers/issueish-detail-controller.js Outdated
@@ -130,13 +153,13 @@ export class BareIssueishDetailController extends React.Component {
const fromPullRefspec =
headRemote.getOwner() === repository.owner.login &&
headRemote.getRepo() === repository.name &&
headPush.getShortRemoteRef() === `pull/${issueish.number}/head`;
headPush.getShortRemoteRef() === `pull/${pullRequest.number}/head`;

This comment has been minimized.

@smashwilson

smashwilson Dec 5, 2018

Member

Okay, yeah, and this is guaranteed to be defined because we gate on this.state.typename up above. 👍

HEART: '❤️',
};

export default class EmojiReactionsView extends React.Component {

This comment has been minimized.

@smashwilson

smashwilson Dec 5, 2018

Member

Ahhh you extracted this from IssueishDetailView? Yesss 💯

issue={issue}
switchToIssueish={this.props.switchToIssueish}
/>
</Fragment>

This comment has been minimized.

@smashwilson

smashwilson Dec 5, 2018

Member

So clean

so clean

Show resolved Hide resolved lib/views/pr-detail-view.js Outdated
@@ -240,32 +193,32 @@ export class BareIssueishDetailView extends React.Component {
/>
</div>
</div>
{isPr && this.renderPrMetadata(issueish, repo)}
{this.renderPrMetadata(pullRequest, repo)}

This comment has been minimized.

@smashwilson

smashwilson Dec 5, 2018

Member

Getting rid of all of this conditional rendering is great.

@@ -317,7 +270,7 @@ export class BareIssueishDetailView extends React.Component {
}

recordOpenInBrowserEvent() {
addEvent('open-issueish-in-browser', {package: 'github', from: 'issueish-header'});
addEvent('open-pull-request-in-browser', {package: 'github', component: this.constructor.name});

This comment has been minimized.

@smashwilson

smashwilson Dec 5, 2018

Member

Oh, cool, we get better granularity on these telemetry events, too.

Do we need to update anything or let @telliott27 know that this event name is changing?

This comment has been minimized.

@annthurium

annthurium Dec 5, 2018

Contributor

gooood question. I was just thinking about that during our meeting this morning.

@telliott27 : will this break the existing dashboard queries?

@@ -34,9 +34,11 @@ export function issueishDetailControllerProps(opts, overrides = {}) {
repositoryName: 'repository',
ownerLogin: 'owner',

omitIssueish: false,
omitPullRequestData: false,
omitIssueData: false,

This comment has been minimized.

@smashwilson

smashwilson Dec 5, 2018

Member

Speaking as the one who put them there, I don't love these factories, btw 💔. I'm not sure what a decent alternative to constructing these complicated prop structures that Relay gives us is, though. More builders instead... ?

This comment has been minimized.

@annthurium

annthurium Dec 5, 2018

Contributor

yeah, this one is especially bad because to render an issue to test, you still need pull request data with a typename of Issue. I also couldn't think of a better way to handle it, though.

annthurium added some commits Dec 5, 2018

use `getDerivedStateFromProps` instead of `componentDidMount`
`componentDidMount` is deprecated, oops.

Thought about using memoize-one, but we're memoizing to avoid a lengthly 
chained lookup in code, rather than because it's an expensive 
computation, so having a memoization helper lib isn't actually all that 
useful here.
👕😭 fml
somehow these didn't show up in my in editor linting?  IDK.

@annthurium annthurium merged commit 1a1a315 into master Dec 5, 2018

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details

Stability Sprint : 20 November 2018 - 8 January 2019 : v0.24.0 automation moved this from QA Review 🔬 to Merged ☑️ Dec 5, 2018

@annthurium annthurium deleted the tt-18-nov-split-component branch Dec 5, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment