Pull in the other prototype views

Author: smashwilson

lib/views/github-blank-nolocal.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+export default function GitHubBlankNoLocal() {
+  return (
+    <div className="github-NoLocal github-Blank">
+      <div className="github-Blank-LargeIcon icon icon-mark-github" />
+      <h1 className="github-Blank-banner">Welcome</h1>
+      <p className="github-Blank-context">How would you like to get started today?</p>
+      <p className="github-Blank-option">
+        <button
+          className="github-Blank-actionBtn btn icon icon-repo-create">
+          Create a new GitHub repository...
+        </button>
+      </p>
+      <p className="github-Blank-option">
+        <button
+          className="github-Blank-actionBtn btn icon icon-repo-clone">
+          Clone an existing GitHub repository...
+        </button>
+      </p>
+    </div>
+  );
+}

lib/views/github-blank-noremote.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export default function GitHubBlankNoRemote() {
+  return (
+    <div className="github-Local-NoRemotes github-Blank">
+      <div className="github-Blank-LargeIcon icon icon-mark-github" />
+      <p className="github-Blank-context">This repository has no remotes on GitHub.</p>
+      <p className="github-Blank-option github-Blank-option--explained">
+        <button
+          className="github-Blank-actionBtn btn icon icon-globe">
+          Publish on GitHub...
+        </button>
+      </p>
+      <p className="github-Blank-explanation">
+        Create a new GitHub repository and configure this git repository configured to push there.
+      </p>
+    </div>
+  );
+}

lib/views/github-tab-view.js

@@ -8,7 +8,9 @@ import {
 import LoadingView from './loading-view';
 import RemoteSelectorView from './remote-selector-view';
 import TabHeaderView from './tab-header-view';
+import GitHubBlankNoLocal from './github-blank-nolocal';
 import GitHubBlankUninitialized from './github-blank-uninitialized';
+import GitHubBlankNoRemote from './github-blank-noremote';
 import RemoteContainer from '../containers/remote-container';
 
 export default class GitHubTabView extends React.Component {
@@ -52,6 +54,12 @@ export default class GitHubTabView extends React.Component {
       return <LoadingView />;
     }
 
+    if (this.props.repository.isAbsent()) {
+      return (
+        <GitHubBlankNoLocal />
+      );
+    }
+
     if (this.props.repository.isEmpty()) {
       return (
         <GitHubBlankUninitialized />
@@ -90,16 +98,8 @@ export default class GitHubTabView extends React.Component {
       );
     }
 
-    // No remotes available
-    // TODO: display a view that lets you create a repository on GitHub
     return (
-      <div className="github-GitHub-noRemotes">
-        <div className="github-GitHub-LargeIcon icon icon-mark-github" />
-        <h1>No Remotes</h1>
-        <div className="initialize-repo-description">
-          <span>This repository does not have any remotes hosted at GitHub.com.</span>
-        </div>
-      </div>
+      <GitHubBlankNoRemote />
     );
   }
 

test/views/github-tab-view.test.js

@@ -9,7 +9,7 @@ import RemoteSet from '../../lib/models/remote-set';
 import Branch from '../../lib/models/branch';
 import GitHubTabView from '../../lib/views/github-tab-view';
 
-import {buildRepository} from '../helpers';
+import {buildRepository, cloneRepository} from '../helpers';
 
 describe('GitHubTabView', function() {
   let atomEnv;
@@ -32,6 +32,13 @@ describe('GitHubTabView', function() {
     assert.isTrue(wrapper.find('LoadingView').exists());
   });
 
+  it('renders a no-local view when no local repository is found', function() {
+    const wrapper = shallow(buildApp({
+      repository: Repository.absent(),
+    }));
+    assert.isTrue(wrapper.exists('GitHubBlankNoLocal'));
+  });
+
   it('renders a uninitialized view when a local repository is not initialized', async function() {
     const workdir = temp.mkdirSync();
     const repository = await buildRepository(workdir);
@@ -40,11 +47,19 @@ describe('GitHubTabView', function() {
     assert.isTrue(wrapper.exists('GitHubBlankUninitialized'));
   });
 
-  it('renders a RemoteContainer if a remote has been chosen', function() {
+  it('renders a no-remote view when the local repository has no remotes', async function() {
+    const repository = await buildRepository(await cloneRepository());
+
+    const wrapper = shallow(buildApp({repository, currentRemote: nullRemote, manyRemotesAvailable: false}));
+    assert.isTrue(wrapper.exists('GitHubBlankNoRemote'));
+  });
+
+  it('renders a RemoteContainer if a remote has been chosen', async function() {
+    const repository = await buildRepository(await cloneRepository());
     const currentRemote = new Remote('aaa', '[email protected]:aaa/bbb.git');
     const currentBranch = new Branch('bbb');
     const handlePushBranch = sinon.spy();
-    const wrapper = shallow(buildApp({currentRemote, currentBranch, handlePushBranch}));
+    const wrapper = shallow(buildApp({repository, currentRemote, currentBranch, handlePushBranch}));
 
     const container = wrapper.find('RemoteContainer');
     assert.isTrue(container.exists());
@@ -53,10 +68,12 @@ describe('GitHubTabView', function() {
     assert.isTrue(handlePushBranch.calledWith(currentBranch, currentRemote));
   });
 
-  it('renders a RemoteSelectorView when many remote choices are available', function() {
+  it('renders a RemoteSelectorView when many remote choices are available', async function() {
+    const repository = await buildRepository(await cloneRepository());
     const remotes = new RemoteSet();
     const handleRemoteSelect = sinon.spy();
     const wrapper = shallow(buildApp({
+      repository,
       remotes,
       currentRemote: nullRemote,
       manyRemotesAvailable: true,
@@ -70,11 +87,6 @@ describe('GitHubTabView', function() {
     assert.isTrue(handleRemoteSelect.called);
   });
 
-  it('renders a static message when no remotes are available', function() {
-    const wrapper = shallow(buildApp({currentRemote: nullRemote, manyRemotesAvailable: false}));
-    assert.isTrue(wrapper.find('.github-GitHub-noRemotes').exists());
-  });
-
   it('calls changeWorkingDirectory when a project is selected', async function() {
     const changeWorkingDirectory = sinon.spy();
     const wrapper = shallow(await buildApp({changeWorkingDirectory}));