Merge pull request #2329 from atom/aw/github-blank-slates

Blank states for GitHub tab

Author: smashwilson

lib/containers/comment-decorations-container.js

@@ -146,6 +146,7 @@ export default class CommentDecorationsContainer extends React.Component {
 
     if (
       !props || !props.repository || !props.repository.ref ||
+      !props.repository.ref.associatedPullRequests ||
       props.repository.ref.associatedPullRequests.totalCount === 0
     ) {
       // no loading spinner for you

lib/containers/current-pull-request-container.js

@@ -4,9 +4,7 @@ import {QueryRenderer, graphql} from 'react-relay';
 import {Disposable} from 'event-kit';
 
 import {autobind, CHECK_SUITE_PAGE_SIZE, CHECK_RUN_PAGE_SIZE} from '../helpers';
-import {
-  RemotePropType, RemoteSetPropType, BranchSetPropType, OperationStateObserverPropType, EndpointPropType,
-} from '../prop-types';
+import {RemotePropType, RemoteSetPropType, BranchSetPropType, EndpointPropType} from '../prop-types';
 import IssueishListController, {BareIssueishListController} from '../controllers/issueish-list-controller';
 import CreatePullRequestTile from '../views/create-pull-request-tile';
 import RelayNetworkLayerManager from '../relay-network-layer-manager';
@@ -30,7 +28,6 @@ export default class CurrentPullRequestContainer extends React.Component {
     limit: PropTypes.number,
 
     // Repository model attributes
-    remoteOperationObserver: OperationStateObserverPropType.isRequired,
     remote: RemotePropType.isRequired,
     remotes: RemoteSetPropType.isRequired,
     branches: BranchSetPropType.isRequired,
@@ -120,18 +117,10 @@ export default class CurrentPullRequestContainer extends React.Component {
   }
 
   renderEmptyResult() {
-    this.sub.dispose();
-    this.sub = this.props.remoteOperationObserver.onDidComplete(() => this.forceUpdate());
-
     return <BareIssueishListController isLoading={false} {...this.controllerProps()} />;
   }
 
-  renderQueryResult({error, props, retry}) {
-    if (retry) {
-      this.sub.dispose();
-      this.sub = this.props.remoteOperationObserver.onDidComplete(retry);
-    }
-
+  renderQueryResult({error, props}) {
     if (error) {
       return (
         <BareIssueishListController

lib/containers/github-tab-container.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import yubikiri from 'yubikiri';
+import {Disposable} from 'event-kit';
 
 import {GithubLoginModelPropType, RefHolderPropType} from '../prop-types';
 import OperationStateObserver, {PUSH, PULL, FETCH} from '../models/operation-state-observer';
+import Refresher from '../models/refresher';
 import GitHubTabController from '../controllers/github-tab-controller';
 import ObserveModel from '../views/observe-model';
 import RemoteSet from '../models/remote-set';
@@ -15,21 +17,51 @@ export default class GitHubTabContainer extends React.Component {
     repository: PropTypes.object,
     loginModel: GithubLoginModelPropType.isRequired,
     rootHolder: RefHolderPropType.isRequired,
+
+    changeWorkingDirectory: PropTypes.func.isRequired,
+    onDidChangeWorkDirs: PropTypes.func.isRequired,
+    getCurrentWorkDirs: PropTypes.func.isRequired,
+    openCreateDialog: PropTypes.func.isRequired,
+    openPublishDialog: PropTypes.func.isRequired,
+    openCloneDialog: PropTypes.func.isRequired,
+    openGitTab: PropTypes.func.isRequired,
   }
 
-  state = {};
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      lastRepository: null,
+      remoteOperationObserver: new Disposable(),
+      refresher: new Refresher(),
+      observerSub: new Disposable(),
+    };
+  }
 
   static getDerivedStateFromProps(props, state) {
     if (props.repository !== state.lastRepository) {
+      state.remoteOperationObserver.dispose();
+      state.observerSub.dispose();
+
+      const remoteOperationObserver = new OperationStateObserver(props.repository, PUSH, PULL, FETCH);
+      const observerSub = remoteOperationObserver.onDidComplete(() => state.refresher.trigger());
+
       return {
         lastRepository: props.repository,
-        remoteOperationObserver: new OperationStateObserver(props.repository, PUSH, PULL, FETCH),
+        remoteOperationObserver,
+        observerSub,
       };
     }
 
     return null;
   }
 
+  componentWillUnmount() {
+    this.state.observerSub.dispose();
+    this.state.remoteOperationObserver.dispose();
+    this.state.refresher.dispose();
+  }
+
   fetchRepositoryData = repository => {
     return yubikiri({
       workingDirectory: repository.getWorkingDirectoryPath(),
@@ -58,7 +90,7 @@ export default class GitHubTabContainer extends React.Component {
       return (
         <GitHubTabController
           {...this.props}
-          remoteOperationObserver={this.state.remoteOperationObserver}
+          refresher={this.state.refresher}
 
           allRemotes={new RemoteSet()}
           branches={new BranchSet()}
@@ -73,7 +105,7 @@ export default class GitHubTabContainer extends React.Component {
       return (
         <GitHubTabController
           {...this.props}
-          remoteOperationObserver={this.state.remoteOperationObserver}
+          refresher={this.state.refresher}
 
           allRemotes={new RemoteSet()}
           branches={new BranchSet()}
@@ -88,7 +120,7 @@ export default class GitHubTabContainer extends React.Component {
       <GitHubTabController
         {...data}
         {...this.props}
-        remoteOperationObserver={this.state.remoteOperationObserver}
+        refresher={this.state.refresher}
         isLoading={false}
       />
     );

lib/containers/issueish-search-container.js

@@ -4,7 +4,7 @@ import {QueryRenderer, graphql} from 'react-relay';
 import {Disposable} from 'event-kit';
 
 import {autobind, CHECK_SUITE_PAGE_SIZE, CHECK_RUN_PAGE_SIZE} from '../helpers';
-import {SearchPropType, OperationStateObserverPropType, EndpointPropType} from '../prop-types';
+import {SearchPropType, EndpointPropType} from '../prop-types';
 import IssueishListController, {BareIssueishListController} from '../controllers/issueish-list-controller';
 import RelayNetworkLayerManager from '../relay-network-layer-manager';
 
@@ -17,7 +17,6 @@ export default class IssueishSearchContainer extends React.Component {
     // Search model
     limit: PropTypes.number,
     search: SearchPropType.isRequired,
-    remoteOperationObserver: OperationStateObserverPropType.isRequired,
 
     // Action methods
     onOpenIssueish: PropTypes.func.isRequired,
@@ -89,12 +88,7 @@ export default class IssueishSearchContainer extends React.Component {
     );
   }
 
-  renderQueryResult({error, props, retry}) {
-    if (retry) {
-      this.sub.dispose();
-      this.sub = this.props.remoteOperationObserver.onDidComplete(retry);
-    }
-
+  renderQueryResult({error, props}) {
     if (error) {
       return (
         <BareIssueishListController

lib/containers/remote-container.js

@@ -3,9 +3,7 @@ import PropTypes from 'prop-types';
 import {QueryRenderer, graphql} from 'react-relay';
 
 import {incrementCounter} from '../reporter-proxy';
-import {
-  RemotePropType, RemoteSetPropType, BranchSetPropType, OperationStateObserverPropType, EndpointPropType,
-} from '../prop-types';
+import {RemotePropType, RemoteSetPropType, BranchSetPropType, RefresherPropType, EndpointPropType} from '../prop-types';
 import RelayNetworkLayerManager from '../relay-network-layer-manager';
 import {UNAUTHENTICATED, INSUFFICIENT} from '../shared/keytar-strategy';
 import RemoteController from '../controllers/remote-controller';
@@ -21,7 +19,7 @@ export default class RemoteContainer extends React.Component {
     endpoint: EndpointPropType.isRequired,
 
     // Repository attributes
-    remoteOperationObserver: OperationStateObserverPropType.isRequired,
+    refresher: RefresherPropType.isRequired,
     pushInProgress: PropTypes.bool.isRequired,
     workingDirectory: PropTypes.string,
     workspace: PropTypes.object.isRequired,
@@ -104,6 +102,8 @@ export default class RemoteContainer extends React.Component {
   }
 
   renderWithResult({error, props, retry}, token) {
+    this.props.refresher.setRetryCallback(this, retry);
+
     if (error) {
       return (
         <QueryErrorView
@@ -126,7 +126,6 @@ export default class RemoteContainer extends React.Component {
 
         repository={props.repository}
 
-        remoteOperationObserver={this.props.remoteOperationObserver}
         workingDirectory={this.props.workingDirectory}
         workspace={this.props.workspace}
         remote={this.props.remote}

lib/controllers/github-tab-controller.js

@@ -2,19 +2,19 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import {
-  GithubLoginModelPropType, RefHolderPropType, RemoteSetPropType, BranchSetPropType, OperationStateObserverPropType,
+  GithubLoginModelPropType, RefHolderPropType, RemoteSetPropType, BranchSetPropType, RefresherPropType,
 } from '../prop-types';
 import GitHubTabView from '../views/github-tab-view';
 
 export default class GitHubTabController extends React.Component {
   static propTypes = {
     workspace: PropTypes.object.isRequired,
-    repository: PropTypes.object.isRequired,
-    remoteOperationObserver: OperationStateObserverPropType.isRequired,
+    refresher: RefresherPropType.isRequired,
     loginModel: GithubLoginModelPropType.isRequired,
     rootHolder: RefHolderPropType.isRequired,
 
     workingDirectory: PropTypes.string,
+    repository: PropTypes.object.isRequired,
     allRemotes: RemoteSetPropType.isRequired,
     branches: BranchSetPropType.isRequired,
     selectedRemoteName: PropTypes.string,
@@ -26,6 +26,10 @@ export default class GitHubTabController extends React.Component {
     changeWorkingDirectory: PropTypes.func.isRequired,
     onDidChangeWorkDirs: PropTypes.func.isRequired,
     getCurrentWorkDirs: PropTypes.func.isRequired,
+    openCreateDialog: PropTypes.func.isRequired,
+    openPublishDialog: PropTypes.func.isRequired,
+    openCloneDialog: PropTypes.func.isRequired,
+    openGitTab: PropTypes.func.isRequired,
   }
 
   render() {
@@ -43,11 +47,12 @@ export default class GitHubTabController extends React.Component {
     return (
       <GitHubTabView
         workspace={this.props.workspace}
-        remoteOperationObserver={this.props.remoteOperationObserver}
+        refresher={this.props.refresher}
         loginModel={this.props.loginModel}
         rootHolder={this.props.rootHolder}
 
         workingDirectory={this.props.workingDirectory || this.props.currentWorkDir}
+        repository={this.props.repository}
         branches={this.props.branches}
         currentBranch={currentBranch}
         remotes={gitHubRemotes}
@@ -62,6 +67,10 @@ export default class GitHubTabController extends React.Component {
         changeWorkingDirectory={this.props.changeWorkingDirectory}
         getCurrentWorkDirs={this.props.getCurrentWorkDirs}
         onDidChangeWorkDirs={this.props.onDidChangeWorkDirs}
+        openCreateDialog={this.props.openCreateDialog}
+        openBoundPublishDialog={this.openBoundPublishDialog}
+        openCloneDialog={this.props.openCloneDialog}
+        openGitTab={this.props.openGitTab}
       />
     );
   }
@@ -77,4 +86,6 @@ export default class GitHubTabController extends React.Component {
     e.preventDefault();
     return this.props.repository.setConfig('atomGithub.currentRemote', remote.getName());
   }
+
+  openBoundPublishDialog = () => this.props.openPublishDialog(this.props.repository);
 }

lib/controllers/issueish-searches-controller.js

@@ -2,9 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {shell} from 'electron';
 
-import {
-  RemotePropType, RemoteSetPropType, BranchSetPropType, OperationStateObserverPropType, EndpointPropType,
-} from '../prop-types';
+import {RemotePropType, RemoteSetPropType, BranchSetPropType, EndpointPropType} from '../prop-types';
 import Search from '../models/search';
 import IssueishSearchContainer from '../containers/issueish-search-container';
 import CurrentPullRequestContainer from '../containers/current-pull-request-container';
@@ -31,7 +29,6 @@ export default class IssueishSearchesController extends React.Component {
     workspace: PropTypes.object.isRequired,
 
     // Repository model attributes
-    remoteOperationObserver: OperationStateObserverPropType.isRequired,
     workingDirectory: PropTypes.string,
     remote: RemotePropType.isRequired,
     remotes: RemoteSetPropType.isRequired,
@@ -60,7 +57,6 @@ export default class IssueishSearchesController extends React.Component {
           repository={this.props.repository}
           token={this.props.token}
           endpoint={this.props.endpoint}
-          remoteOperationObserver={this.props.remoteOperationObserver}
           remote={this.props.remote}
           remotes={this.props.remotes}
           branches={this.props.branches}
@@ -79,7 +75,6 @@ export default class IssueishSearchesController extends React.Component {
             token={this.props.token}
             endpoint={this.props.endpoint}
             search={search}
-            remoteOperationObserver={this.props.remoteOperationObserver}
 
             onOpenIssueish={this.onOpenIssueish}
             onOpenSearch={this.onOpenSearch}

lib/controllers/remote-controller.js

@@ -4,9 +4,7 @@ import {shell} from 'electron';
 
 import {autobind} from '../helpers';
 import {incrementCounter} from '../reporter-proxy';
-import {
-  RemotePropType, RemoteSetPropType, BranchSetPropType, OperationStateObserverPropType, EndpointPropType,
-} from '../prop-types';
+import {RemotePropType, RemoteSetPropType, BranchSetPropType, EndpointPropType} from '../prop-types';
 import IssueishSearchesController from './issueish-searches-controller';
 
 export default class RemoteController extends React.Component {
@@ -25,7 +23,6 @@ export default class RemoteController extends React.Component {
     token: PropTypes.string.isRequired,
 
     // Repository derived attributes
-    remoteOperationObserver: OperationStateObserverPropType.isRequired,
     workingDirectory: PropTypes.string,
     workspace: PropTypes.object.isRequired,
     remote: RemotePropType.isRequired,
@@ -49,7 +46,6 @@ export default class RemoteController extends React.Component {
         endpoint={this.props.endpoint}
         token={this.props.token}
 
-        remoteOperationObserver={this.props.remoteOperationObserver}
         workingDirectory={this.props.workingDirectory}
         repository={this.props.repository}
 

lib/controllers/root-controller.js

@@ -312,6 +312,10 @@ export default class RootController extends React.Component {
               getCurrentWorkDirs={getCurrentWorkDirs}
               onDidChangeWorkDirs={onDidChangeWorkDirs}
               changeWorkingDirectory={this.props.changeWorkingDirectory}
+              openCreateDialog={this.openCreateDialog}
+              openPublishDialog={this.openPublishDialog}
+              openCloneDialog={this.openCloneDialog}
+              openGitTab={this.gitTabTracker.toggleFocus}
             />
           )}
         </PaneItem>

lib/github-package.js

@@ -466,10 +466,10 @@ export default class GithubPackage {
     }
 
     this.workdirCache.invalidate();
-
     this.project.addPath(projectPath);
-
     await this.scheduleActiveContextUpdate();
+
+    reporterProxy.addEvent('clone-repository', {project: 'github'});
   }
 
   getRepositoryForWorkdir(projectPath) {