Upgrade Prettier to 1.2.2, enable --jsx-bracket-same-line=true (#5278)

config/hooks/pre-commit

@@ -3,9 +3,11 @@ from __future__ import absolute_import
 
 import os
 import sys
+import subprocess
+import json
 
 from glob import glob
-from subprocess import Popen
+from click import echo
 
 from sentry.lint.engine import check_files, get_js_files
 
@@ -18,6 +20,7 @@ if 'VIRTUAL_ENV' in os.environ:
         '%s/lib/*/site-packages' % os.environ['VIRTUAL_ENV'])[0]
     sys.path.insert(0, site_packages)
 
+PRETTIER_VERSION = "1.2.2"
 
 def js_format(file_list=None):
     """
@@ -28,16 +31,33 @@ def js_format(file_list=None):
     prettier_path = os.path.join(project_root, 'node_modules', '.bin', 'prettier')
 
     if not os.path.exists(prettier_path):
-        from click import echo
-        echo('!! Skipping JavaScript formatting because prettier is not installed.')
+        echo('!! Skipping JavaScript formatting because prettier is not installed.', err=True)
+        return False
+
+    # Get Prettier version from package.json
+    package_version = None
+    package_json_path = os.path.join(project_root, 'package.json')
+    with open(package_json_path) as package_json:
+        try:
+            package_version = json.load(package_json)['devDependencies']['prettier']
+        except KeyError:
+            echo('!! Prettier missing from package.json', err=True)
+            return False
+
+    prettier_version = subprocess.check_output([prettier_path, '--version']).rstrip()
+    if prettier_version != package_version:
+        echo('!! Prettier is out of date: %s (expected %s). Please run `yarn install`.' \
+            % (prettier_version, package_version), err=True)
         return False
 
     js_file_list = get_js_files(file_list)
 
     has_errors = False
     if js_file_list:
-        status = Popen([prettier_path, '--write', '--single-quote', '--bracket-spacing=false', '--print-width=90']
-                       + js_file_list).wait()
+        status = subprocess.Popen([prettier_path, '--write', '--single-quote',
+            '--bracket-spacing=false', '--print-width=90', '--jsx-bracket-same-line=true'] +
+            js_file_list
+        ).wait()
         has_errors = status != 0
 
     return has_errors

package.json

@@ -95,7 +95,7 @@
     "karma-sourcemap-loader": "0.3.7",
     "karma-webpack": "2.0.1",
     "phantomjs-prebuilt": "2.1.14",
-    "prettier": "1.1.0",
+    "prettier": "1.2.2",
     "sinon": "1.17.2",
     "sinon-chai": "2.8.0"
   }

src/sentry/static/sentry/app/components/activity/feed.jsx

@@ -42,7 +42,8 @@ const ActivityFeed = React.createClass({
     let location = this.props.location;
     let nextLocation = nextProps.location;
     if (
-      location.pathname != nextLocation.pathname || location.search != nextLocation.search
+      location.pathname != nextLocation.pathname ||
+      location.search != nextLocation.search
     ) {
       this.remountComponent();
     }

src/sentry/static/sentry/app/components/activity/note.jsx

@@ -34,8 +34,7 @@ const Note = React.createClass({
               <LinkWithConfirmation
                 className="danger"
                 message={t('Are you sure you wish to delete this comment?')}
-                onConfirm={onDelete}
-              >
+                onConfirm={onDelete}>
                 {t('Remove')}
               </LinkWithConfirmation>
             </span>}

src/sentry/static/sentry/app/components/alertMessage.jsx

@@ -32,8 +32,7 @@ const AlertMessage = React.createClass({
             type="button"
             className="close"
             aria-label={t('Close')}
-            onClick={this.closeAlert}
-          >
+            onClick={this.closeAlert}>
             <span aria-hidden="true">×</span>
           </button>
           <span className="icon" />

src/sentry/static/sentry/app/components/assigneeSelector.jsx

@@ -196,8 +196,7 @@ const AssigneeSelector = React.createClass({
         <MenuItem
           key={item.id}
           disabled={loading}
-          onSelect={this.assignTo.bind(this, item)}
-        >
+          onSelect={this.assignTo.bind(this, item)}>
           <Avatar user={item} className="avatar" size={48} />
           {this.highlight(item.name || item.email, this.state.filter)}
         </MenuItem>
@@ -231,8 +230,7 @@ const AssigneeSelector = React.createClass({
                   assignedTo
                     ? <Avatar user={assignedTo} className="avatar" size={48} />
                     : <span className="icon-user" />
-                }
-              >
+                }>
                 <MenuItem noAnchor={true} key="filter">
                   <input
                     type="text"
@@ -248,8 +246,7 @@ const AssigneeSelector = React.createClass({
                       key="clear"
                       className="clear-assignee"
                       disabled={!loading}
-                      onSelect={this.clearAssignTo}
-                    >
+                      onSelect={this.clearAssignTo}>
                       <span className="icon-circle-cross" /> {t('Clear Assignee')}
                     </MenuItem>
                   : ''}

src/sentry/static/sentry/app/components/bases/pluginComponentBase.jsx

@@ -27,7 +27,7 @@ class PluginComponentBase extends React.Component {
       'onSaveError',
       'onSaveComplete',
       'renderField'
-    ].map(method => this[method] = this[method].bind(this));
+    ].map(method => (this[method] = this[method].bind(this)));
 
     if (this.fetchData) {
       this.fetchData = this.onLoad.bind(this, this.fetchData.bind(this));

src/sentry/static/sentry/app/components/compactIssue.jsx

@@ -75,8 +75,7 @@ const CompactIssueHeader = React.createClass({
             <span>
               <Link
                 to={`/${orgId}/${projectId}/issues/${data.id}/activity/`}
-                className="comments"
-              >
+                className="comments">
                 <span className="icon icon-comments" />
                 <span className="tag-count">{data.numComments}</span>
               </Link>
@@ -197,21 +196,18 @@ const CompactIssue = React.createClass({
               topLevelClasses="more-menu"
               className="more-menu-toggle"
               caret={false}
-              title={title}
-            >
+              title={title}>
               <li>
                 <a
                   onClick={this.onUpdate.bind(this, {
                     status: issue.status !== 'resolved' ? 'resolved' : 'unresolved'
-                  })}
-                >
+                  })}>
                   <span className="icon-checkmark" />
                 </a>
               </li>
               <li>
                 <a
-                  onClick={this.onUpdate.bind(this, {isBookmarked: !issue.isBookmarked})}
-                >
+                  onClick={this.onUpdate.bind(this, {isBookmarked: !issue.isBookmarked})}>
                   <span className="icon-star-solid" />
                 </a>
               </li>

src/sentry/static/sentry/app/components/confirms/numberConfirm.jsx

@@ -50,8 +50,7 @@ const NumberConfirm = React.createClass({
         animation={true}
         backdrop="static"
         enforceFocus={true}
-        bsSize="sm"
-      >
+        bsSize="sm">
         <Modal.Header closeButton>
           <Modal.Title>{t('Please enter your code:')}</Modal.Title>
         </Modal.Header>

src/sentry/static/sentry/app/components/contextData.jsx

@@ -117,8 +117,7 @@ const ContextData = React.createClass({
               (valueInfo.isString ? 'val-string' : 'val-repr') +
                 (valueInfo.isStripped ? ' val-stripped' : '') +
                 (valueInfo.isMultiLine ? ' val-string-multiline' : '')
-            }
-          >
+            }>
             {valueInfo.repr}
           </span>
         ];