Split Commit Message into Subject / Description Fields (codesandbox#711)

* WIP Split Commit Message into Subject / Description Fields

This PR is a UX enhancement for the Git Workspace. Currently commit messages can only be added in a single-line text input, which is difficult to read and to edit a descriptive message.

With this update, commit messages are broken up into two inputs: a subject line and a description box. Both inputs are combined into a single commit message string when submitting a commit or a pull request.

Only the subject line is required to create a new commit or open a pr. If a description is provided, it will be appended to the subject line, with a blank line in between. Subject lines are recommended to be no more than 72 characters in length. To help with this, there is a character count indicator which will display red if a subject line goes over this length. There is no hard enforcement here, as it's merely a recommendation. Please read the following for more information on why 72 was chosen:

https://stackoverflow.com/questions/2290016/git-commit-messages-50-72-formatting
https://medium.com/@preslavrachev/what-s-with-the-50-72-rule-8a906f61f09c

This is currently a work in progress. The above features as outlined have been implemented and appear to work. Before moving forward I'd like to open this up for discussion and feedback so I can clean up the implementation.

* WIP Split Commit Message into Subject / Description Fields

This PR is a UX enhancement for the Git Workspace. Currently commit messages can only be added in a single-line text input, which is difficult to read and to edit a descriptive message.

With this update, commit messages are broken up into two inputs: a subject line and a description box. Both inputs are combined into a single commit message string when submitting a commit or a pull request.

Only the subject line is required to create a new commit or open a pr. If a description is provided, it will be appended to the subject line, with a blank line in between. Subject lines are recommended to be no more than 72 characters in length. To help with this, there is a character count indicator which will display red if a subject line goes over this length. There is no hard enforcement here, as it's merely a recommendation. Please read the following for more information on why 72 was chosen:

https://stackoverflow.com/questions/2290016/git-commit-messages-50-72-formatting
https://medium.com/@preslavrachev/what-s-with-the-50-72-rule-8a906f61f09c

This is currently a work in progress. The above features as outlined have been implemented and appear to work. Before moving forward I'd like to open this up for discussion and feedback so I can clean up the implementation.

* Remove Old Commit Message Logic

Author: Drake Costa

.all-contributorsrc

@@ -524,6 +524,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "Saeris",
+      "name": "Drake Costa",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/3144549?v=4",
+      "profile": "http://www.saeris.io",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "repoType": "github"

README.md

@@ -1,4 +1,4 @@
-# [CodeSandbox](https://codesandbox.io) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/KE3TbEZ) [![All Contributors](https://img.shields.io/badge/all_contributors-54-orange.svg?style=flat-square)](#contributors) [![CircleCI](https://circleci.com/gh/CompuIves/codesandbox-client.svg?style=svg)](https://circleci.com/gh/CompuIves/codesandbox-client) [![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf)](https://www.browserstack.com/automate/public-build/cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/)
+# [CodeSandbox](https://codesandbox.io) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/KE3TbEZ) [![All Contributors](https://img.shields.io/badge/all_contributors-55-orange.svg?style=flat-square)](#contributors) [![CircleCI](https://circleci.com/gh/CompuIves/codesandbox-client.svg?style=svg)](https://circleci.com/gh/CompuIves/codesandbox-client) [![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf)](https://www.browserstack.com/automate/public-build/cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/)
 
 ![Banner](https://codesandbox.io/static/img/banner.png)
 
@@ -38,8 +38,6 @@ Thanks goes to these wonderful people
 ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
 
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-
-<!-- prettier-ignore -->
 | [<img src="https://avatars0.githubusercontent.com/u/587016?v=3" width="100px;"/><br /><sub><b>Ives van Hoorne</b></sub>](http://ivesvh.com)<br />[💬](#question-CompuIves "Answering Questions") [📝](#blog-CompuIves "Blogposts") [🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3ACompuIves "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=CompuIves "Code") [🎨](#design-CompuIves "Design") [📖](https://github.com/CompuIves/codesandbox-client/commits?author=CompuIves "Documentation") [💡](#example-CompuIves "Examples") [🚇](#infra-CompuIves "Infrastructure (Hosting, Build-Tools, etc)") [👀](#review-CompuIves "Reviewed Pull Requests") [⚠️](https://github.com/CompuIves/codesandbox-client/commits?author=CompuIves "Tests") [🔧](#tool-CompuIves "Tools") | [<img src="https://avatars0.githubusercontent.com/u/887639?v=3" width="100px;"/><br /><sub><b>Donavon West</b></sub>](http://donavon.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=donavon "Code") | [<img src="https://avatars0.githubusercontent.com/u/5266810?v=3" width="100px;"/><br /><sub><b>Jeff Allen</b></sub>](http://www.jeffallen.io/)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=vueu "Code") | [<img src="https://avatars0.githubusercontent.com/u/1089897?v=3" width="100px;"/><br /><sub><b>Ben Gummer</b></sub>](https://github.com/bengummer)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=bengummer "Code") | [<img src="https://avatars3.githubusercontent.com/u/154732?v=3" width="100px;"/><br /><sub><b>James Gillmore</b></sub>](http://twitter.com/faceyspacey)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=faceyspacey "Code") [🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Afaceyspacey "Bug reports") | [<img src="https://avatars1.githubusercontent.com/u/9636410?v=4" width="100px;"/><br /><sub><b>Ade Viankakrisna Fadlil</b></sub>](https://github.com/viankakrisna)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=viankakrisna "Code") | [<img src="https://avatars1.githubusercontent.com/u/1854763?v=4" width="100px;"/><br /><sub><b>Tushar Sonawane</b></sub>](https://twitter.com/tushkiz)<br />[💬](#question-Tushkiz "Answering Questions") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=Tushkiz "Code") [📖](https://github.com/CompuIves/codesandbox-client/commits?author=Tushkiz "Documentation") [🤔](#ideas-Tushkiz "Ideas, Planning, & Feedback") |
 | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
 | [<img src="https://avatars3.githubusercontent.com/u/1239401?v=4" width="100px;"/><br /><sub><b>Johann Hubert Sonntagbauer</b></sub>](https://github.com/johann-sonntagbauer)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Ajohann-sonntagbauer "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=johann-sonntagbauer "Code") | [<img src="https://avatars2.githubusercontent.com/u/9586897?v=4" width="100px;"/><br /><sub><b>Joachim Seminck</b></sub>](https://github.com/jseminck)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=jseminck "Code") | [<img src="https://avatars3.githubusercontent.com/u/5210019?v=4" width="100px;"/><br /><sub><b>Subramanya Chakravarthy</b></sub>](http://chakrihacker.github.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=chakrihacker "Code") | [<img src="https://avatars3.githubusercontent.com/u/23088?v=4" width="100px;"/><br /><sub><b>Robert (Robby) O'Connor</b></sub>](http://robby.oconnor.ninja)<br />[🚇](#infra-robbyoconnor "Infrastructure (Hosting, Build-Tools, etc)") | [<img src="https://avatars0.githubusercontent.com/u/2083930?v=4" width="100px;"/><br /><sub><b>Bogdan Luca</b></sub>](https://github.com/lbogdan)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Albogdan "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=lbogdan "Code") | [<img src="https://avatars3.githubusercontent.com/u/6177621?v=4" width="100px;"/><br /><sub><b>Divjot Singh</b></sub>](http://bogas04.github.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=bogas04 "Code") | [<img src="https://avatars3.githubusercontent.com/u/5249539?v=4" width="100px;"/><br /><sub><b>Jason Nall</b></sub>](http://www.jsonnull.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=jsonnull "Code") |
@@ -48,6 +46,5 @@ Thanks goes to these wonderful people
 | [<img src="https://avatars3.githubusercontent.com/u/6270048?v=4" width="100px;"/><br /><sub><b>Haroen Viaene</b></sub>](https://twitter.com/haroenv)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=haroenv "Code") [🎨](#design-haroenv "Design") | [<img src="https://avatars1.githubusercontent.com/u/293805?v=4" width="100px;"/><br /><sub><b>Nick Nisi</b></sub>](https://nicknisi.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=nicknisi "Code") | [<img src="https://avatars2.githubusercontent.com/u/9327315?v=4" width="100px;"/><br /><sub><b>Abhishek Jakhotiya</b></sub>](https://github.com/Jakhotiya)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=Jakhotiya "Code") [🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3AJakhotiya "Bug reports") | [<img src="https://avatars2.githubusercontent.com/u/14299145?v=4" width="100px;"/><br /><sub><b>Tom Kühl</b></sub>](http://twitter.com/tomkuehl_)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=tomkuehl "Code") | [<img src="https://avatars2.githubusercontent.com/u/1086461?v=4" width="100px;"/><br /><sub><b>br1anchen</b></sub>](https://github.com/br1anchen)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=br1anchen "Code") | [<img src="https://avatars3.githubusercontent.com/u/11952174?v=4" width="100px;"/><br /><sub><b>Daniel Hsing</b></sub>](https://arthelon.github.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=Arthelon "Code") | [<img src="https://avatars2.githubusercontent.com/u/5403694?v=4" width="100px;"/><br /><sub><b>Maciej Kasprzyk</b></sub>](https://twitter.com/_maciejka)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=maciej-ka "Code") |
 | [<img src="https://avatars2.githubusercontent.com/u/596727?v=4" width="100px;"/><br /><sub><b>Robert Heessels</b></sub>](https://github.com/robertheessels)<br />[📖](https://github.com/CompuIves/codesandbox-client/commits?author=robertheessels "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/772937?v=4" width="100px;"/><br /><sub><b>Ryan P. C. McQuen</b></sub>](https://ryanpcmcquen.org)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=ryanpcmcquen "Code") | [<img src="https://avatars3.githubusercontent.com/u/613805?v=4" width="100px;"/><br /><sub><b>Chris</b></sub>](http://chrisrjones.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=ipatch "Code") | [<img src="https://avatars3.githubusercontent.com/u/595469?v=4" width="100px;"/><br /><sub><b>Drew Smith</b></sub>](https://github.com/drewsmith)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=drewsmith "Code") | [<img src="https://avatars2.githubusercontent.com/u/12481?v=4" width="100px;"/><br /><sub><b>Eric Berry</b></sub>](https://codesponsor.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=coderberry "Code") | [<img src="https://avatars1.githubusercontent.com/u/17228477?v=4" width="100px;"/><br /><sub><b>Hum4n01d</b></sub>](https://www.hum4n01d.me)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=Hum4n01d "Code") | [<img src="https://avatars3.githubusercontent.com/u/10888943?v=4" width="100px;"/><br /><sub><b>Malachi Willey</b></sub>](https://github.com/malwilley)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=malwilley "Code") |
 | [<img src="https://avatars0.githubusercontent.com/u/1820292?v=4" width="100px;"/><br /><sub><b>Michel Weststrate</b></sub>](https://twitter.com/mweststrate)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=mweststrate "Code") | [<img src="https://avatars0.githubusercontent.com/u/52824?v=4" width="100px;"/><br /><sub><b>Oleg</b></sub>](https://kof.github.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=kof "Code") | [<img src="https://avatars0.githubusercontent.com/u/1127037?v=4" width="100px;"/><br /><sub><b>Paul Sherman</b></sub>](https://www.pshrmn.com)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Apshrmn "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=pshrmn "Code") | [<img src="https://avatars2.githubusercontent.com/u/9244507?v=4" width="100px;"/><br /><sub><b>Ro Savage</b></sub>](https://github.com/ro-savage)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=ro-savage "Code") | [<img src="https://avatars3.githubusercontent.com/u/13242392?v=4" width="100px;"/><br /><sub><b>Sam Denty</b></sub>](https://samdd.me)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=samdenty99 "Code") | [<img src="https://avatars1.githubusercontent.com/u/3087225?v=4" width="100px;"/><br /><sub><b>Zephraph</b></sub>](https://github.com/zephraph)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=zephraph "Code") | [<img src="https://avatars1.githubusercontent.com/u/1900735?v=4" width="100px;"/><br /><sub><b>Josh Waller</b></sub>](https://www.joshwaller.me)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Amdxprograms "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=mdxprograms "Code") [📖](https://github.com/CompuIves/codesandbox-client/commits?author=mdxprograms "Documentation") |
-| [<img src="https://avatars0.githubusercontent.com/u/1195863?v=4" width="100px;"/><br /><sub><b>Joe Ng'ethe</b></sub>](http://joey.co.ke)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=joeynimu "Code") | [<img src="https://avatars0.githubusercontent.com/u/576935?v=4" width="100px;"/><br /><sub><b>Carles Codony</b></sub>](https://github.com/bitblitter)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=bitblitter "Code") | [<img src="https://avatars2.githubusercontent.com/u/468006?v=4" width="100px;"/><br /><sub><b>Vytenis</b></sub>](https://github.com/FDiskas)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=FDiskas "Code") | [<img src="https://avatars1.githubusercontent.com/u/894149?v=4" width="100px;"/><br /><sub><b>Manuel Dugué</b></sub>](http://manueldugue.de)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Amdugue "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=mdugue "Code") | [<img src="https://avatars2.githubusercontent.com/u/5346497?v=4" width="100px;"/><br /><sub><b>Demian Dekoninck</b></sub>](https://dem.be)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=DemianD "Code") | [<img src="https://avatars3.githubusercontent.com/u/9496960?s=460&v=4" width="100px;"/><br /><sub><b>Alex Casillas</b></sub>](https://alexvcasillas.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=alexvcasillas "Code") |
-
+| [<img src="https://avatars0.githubusercontent.com/u/1195863?v=4" width="100px;"/><br /><sub><b>Joe Ng'ethe</b></sub>](http://joey.co.ke)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=joeynimu "Code") | [<img src="https://avatars0.githubusercontent.com/u/576935?v=4" width="100px;"/><br /><sub><b>Carles Codony</b></sub>](https://github.com/bitblitter)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=bitblitter "Code") | [<img src="https://avatars2.githubusercontent.com/u/468006?v=4" width="100px;"/><br /><sub><b>Vytenis</b></sub>](https://github.com/FDiskas)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=FDiskas "Code") | [<img src="https://avatars1.githubusercontent.com/u/894149?v=4" width="100px;"/><br /><sub><b>Manuel Dugué</b></sub>](http://manueldugue.de)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Amdugue "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=mdugue "Code") | [<img src="https://avatars2.githubusercontent.com/u/5346497?v=4" width="100px;"/><br /><sub><b>Demian Dekoninck</b></sub>](https://dem.be)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=DemianD "Code") | [<img src="https://avatars2.githubusercontent.com/u/3144549?v=4" width="100px;"/><br /><sub><b>Drake Costa</b></sub>](http://www.saeris.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=Saeris "Code") |
 <!-- ALL-CONTRIBUTORS-LIST:END -->

packages/app/src/app/pages/Sandbox/Editor/Workspace/Git/index.js

@@ -5,7 +5,7 @@ import Margin from 'common/components/spacing/Margin';
 import GithubBadge from 'app/components/GithubBadge';
 import { githubRepoUrl } from 'common/utils/url-generator';
 import Button from 'app/components/Button';
-import Input from 'common/components/Input';
+import Input, { TextArea } from 'common/components/Input';
 
 import TotalChanges from './TotalChanges';
 import { WorkspaceSubtitle, WorkspaceInputContainer } from '../elements';
@@ -28,9 +28,15 @@ class Git extends React.Component {
     this.props.signals.git.createPrClicked();
   };
 
-  changeMessage = event => {
-    this.props.signals.git.messageChanged({
-      message: event.target.value,
+  changeSubject = event => {
+    this.props.signals.git.subjectChanged({
+      subject: event.target.value,
+    });
+  };
+
+  changeDescription = event => {
+    this.props.signals.git.descriptionChanged({
+      description: event.target.value,
     });
   };
 
@@ -73,18 +79,35 @@ class Git extends React.Component {
                       You need to save all modules before you can commit
                     </ErrorMessage>
                   )}
+                  <WorkspaceSubtitle
+                    style={{
+                      color:
+                        store.git.subject.length > 72 ? `#F27777` : `#556362`,
+                      textAlign: 'right',
+                    }}
+                  >
+                    {`${store.git.subject.length}/72`}
+                  </WorkspaceSubtitle>
                   <WorkspaceInputContainer>
                     <Input
-                      value={store.git.message}
-                      onChange={this.changeMessage}
-                      placeholder="Commit message"
+                      value={store.git.subject}
+                      onChange={this.changeSubject}
+                      placeholder="Subject"
+                      block
+                    />
+                  </WorkspaceInputContainer>
+                  <WorkspaceInputContainer>
+                    <TextArea
+                      value={store.git.description}
+                      onChange={this.changeDescription}
+                      placeholder="Description"
                       block
                     />
                   </WorkspaceInputContainer>
                   <Buttons>
                     {hasWriteAccess(gitChanges.rights) && (
                       <Button
-                        disabled={!store.git.message || modulesNotSaved}
+                        disabled={!store.git.subject || modulesNotSaved}
                         onClick={this.createCommit}
                         block
                         small
@@ -93,7 +116,7 @@ class Git extends React.Component {
                       </Button>
                     )}
                     <Button
-                      disabled={!store.git.message || modulesNotSaved}
+                      disabled={!store.git.subject || modulesNotSaved}
                       onClick={this.createPR}
                       block
                       small

packages/app/src/app/store/modules/git/actions.js

@@ -10,13 +10,19 @@ export function openPr({ state, browser }) {
   browser.openWindow(url);
 }
 
+function createCommitMessage(state) {
+  const subject = state.get('git.subject');
+  const description = state.get('git.description');
+  return `${subject}${description.length ? `\n\n${description}` : ``}`;
+}
+
 export function createPr({ api, state }) {
   const id = state.get('editor.currentId');
 
   return api
     .post(`/sandboxes/${id}/git/pr`, {
       id,
-      message: state.get('git.message'),
+      message: createCommitMessage(state),
     })
     .then(pr => ({ pr }));
 }
@@ -27,11 +33,10 @@ export function redirectToPr({ router, props }) {
 
 export function createCommit({ api, state }) {
   const id = state.get('editor.currentId');
-
   return api
     .post(`/sandboxes/${id}/git/commit`, {
       id,
-      message: state.get('git.message'),
+      message: createCommitMessage(state),
     })
     .then(commit => ({ commit }));
 }