Restructure identity view to require explicit button press to accept

Author: smashwilson

lib/views/git-identity-view.js

@@ -7,8 +7,11 @@ export default class GitIdentityView extends React.Component {
     // Model
     usernameBuffer: PropTypes.object.isRequired,
     emailBuffer: PropTypes.object.isRequired,
+    canWriteLocal: PropTypes.bool.isRequired,
 
     // Action methods
+    setLocal: PropTypes.func.isRequired,
+    setGlobal: PropTypes.func.isRequired,
     close: PropTypes.func.isRequired,
   };
 
@@ -19,19 +22,29 @@ export default class GitIdentityView extends React.Component {
           Git Identity
         </h1>
         <p className="github-GitIdentity-explanation">
-          Please set the username and email address that you wish to use to
-          author git commits.
+          Please set the username and email address that you wish to use to author git commits. This will write to the
+          <code>user.name</code> and <code>user.email</code> values in your git configuration at the chosen scope.
         </p>
         <div className="github-GitIdentity-text">
           <AtomTextEditor mini placeholderText="name" buffer={this.props.usernameBuffer} />
           <AtomTextEditor mini placeholderText="email address" buffer={this.props.emailBuffer} />
         </div>
         <div className="github-GitIdentity-buttons">
+          <button className="btn" onClick={this.props.close}>
+            Cancel
+          </button>
+          <button
+            className="btn btn-primary"
+            title="Configure git for this repository"
+            onClick={this.props.setLocal}
+            disabled={!this.props.canWriteLocal}>
+            Use for this repository
+          </button>
           <button
             className="btn btn-primary"
-            onClick={this.props.close}
-            disabled={this.props.usernameBuffer.isEmpty() || this.props.emailBuffer.isEmpty()}>
-            Continue
+            title="Configure git globally for your operating system user account"
+            onClick={this.props.setGlobal}>
+            Use for all repositories
           </button>
         </div>
       </div>

styles/git-identity.less

@@ -26,6 +26,8 @@
   }
 
   &-buttons {
-    //
+    .btn {
+      margin: @component-padding/2;
+    }
   }
 }

test/views/git-identity-view.test.js

@@ -10,6 +10,9 @@ describe('GitIdentityView', function() {
       <GitIdentityView
         usernameBuffer={new TextBuffer()}
         emailBuffer={new TextBuffer()}
+        canWriteLocal={true}
+        setLocal={() => {}}
+        setGlobal={() => {}}
         close={() => {}}
         {...override}
       />
@@ -30,27 +33,37 @@ describe('GitIdentityView', function() {
     assert.strictEqual(getEditor('email address').prop('buffer'), emailBuffer);
   });
 
-  it('disables the "Continue" button if the name is blank', function() {
-    const usernameBuffer = new TextBuffer();
-    const wrapper = mount(buildApp({usernameBuffer}));
+  it('disables the local repo button when canWriteLocal is false', function() {
+    const wrapper = mount(buildApp({canWriteLocal: false}));
 
-    assert.isTrue(wrapper.find('.btn').prop('disabled'));
+    assert.isTrue(wrapper.find('.btn').filterWhere(each => /this repository/.test(each.text())).prop('disabled'));
   });
 
-  it('disables the "Continue" button if the email is blank', function() {
-    const emailBuffer = new TextBuffer();
-    const wrapper = mount(buildApp({emailBuffer}));
+  it('triggers a callback when "Use for this repository" is clicked', function() {
+    const setLocal = sinon.spy();
+    const wrapper = mount(buildApp({setLocal}));
+
+    wrapper.find('.btn').filterWhere(each => /this repository/.test(each.text())).simulate('click');
+
+    assert.isTrue(setLocal.called);
+  });
+
+  it('triggers a callback when "Use for all repositories" is clicked', function() {
+    const setGlobal = sinon.spy();
+    const wrapper = mount(buildApp({setGlobal}));
+
+    wrapper.find('.btn').filterWhere(each => /all repositories/.test(each.text())).simulate('click');
 
-    assert.isTrue(wrapper.find('.btn').prop('disabled'));
+    assert.isTrue(setGlobal.called);
   });
 
-  it('triggers a callback when "Continue" is clicked', function() {
+  it('triggers a callback when "Cancel" is clicked', function() {
     const usernameBuffer = new TextBuffer({text: 'Me'});
     const emailBuffer = new TextBuffer({text: 'me@email.com'});
     const close = sinon.spy();
     const wrapper = mount(buildApp({usernameBuffer, emailBuffer, close}));
 
-    wrapper.find('.btn').simulate('click');
+    wrapper.find('.btn').filterWhere(each => /Cancel/.test(each.text())).simulate('click');
 
     assert.isTrue(close.called);
   });