Merge pull request juju#3815 from hatched/jsx-prop-linting

Expand eslint linting rules

.eslintrc

@@ -12,6 +12,7 @@
     }
   },
   "rules": {
+    "array-bracket-spacing": [2, "never"],
     "arrow-parens": ["error", "as-needed"],
     "brace-style": ["error", "1tbs", { "allowSingleLine": true }],
     "comma-dangle": ["error", "never"],
@@ -30,6 +31,8 @@
     "no-undef": 2,
     "no-underscore-dangle": 0,
     "no-unused-vars": [2, { "args": "none" }],
+    "object-curly-spacing": 2,
+    "object-property-newline": [2, {"allowAllPropertiesOnSameLine": true}],
     "quotes": [2, "single"],
     "react/jsx-curly-spacing": 2,
     "react/jsx-equals-spacing": 2,
@@ -39,11 +42,12 @@
     "react/prop-types": 2,
     "react/sort-prop-types": 2,
     "react/jsx-closing-bracket-location": ["error", "after-props"],
+    "react/jsx-first-prop-new-line": 2,
     "react/jsx-sort-props": [2, { "ignoreCase": true }],
     "react/jsx-tag-spacing": ["error", { "beforeSelfClosing": "always" }],
     "react/jsx-uses-react": 2,
     "react/jsx-uses-vars": 2,
-    "react/jsx-max-props-per-line": [1, { "when": "always" }],
+    "react/jsx-max-props-per-line": [2, { "when": "multiline" }],
     "semi": [2, "always"],
     "space-before-blocks": 2,
     "space-before-function-paren": ["error", "never"],

jujugui/static/gui/src/app/components/accordion-section/accordion-section.js

@@ -85,7 +85,8 @@ class AccordionSection extends React.Component {
     @return {Object} The React div element.
   */
   _generateContent() {
-    return (<div className="accordion-section__content"
+    return (<div
+      className="accordion-section__content"
       ref="content"
       style={this._getStyle()}>
       {this.props.children}

jujugui/static/gui/src/app/components/accordion-section/test-accordion-section.js

@@ -21,7 +21,8 @@ describe('AccordionSection', () => {
     const wrapper = renderComponent();
     const expected = (
       <div className="accordion-section">
-        <div className="accordion-section__title"
+        <div
+          className="accordion-section__title"
           onClick={wrapper.find('.accordion-section__title').prop('onClick')}
           role="button">
           <span className="accordion-section__title-content">My title!</span>
@@ -30,7 +31,9 @@ describe('AccordionSection', () => {
             name="chevron_down_16"
             size="16" />
         </div>
-        <div className="accordion-section__content" ref="content"
+        <div
+          className="accordion-section__content"
+          ref="content"
           style={{maxHeight: 0}}><span>Hello</span></div>
       </div>);
     assert.compareJSX(wrapper, expected);
@@ -44,17 +47,21 @@ describe('AccordionSection', () => {
     };
     instance._toggle();
     const expected = (
-      <div className="accordion-section__content" ref="content"
+      <div
+        className="accordion-section__content"
+        ref="content"
         style={{maxHeight: '100px'}}>
         <span>Hello</span>
       </div>);
     assert.compareJSX(wrapper.find('.accordion-section__content'), expected);
   });
 
   it('does not show chevron or content when there are no children', () => {
-    const wrapper = renderComponent({ children: null });
+    const wrapper = renderComponent({children: null});
     const expected = (
-      <div className="accordion-section__content" ref="content"
+      <div
+        className="accordion-section__content"
+        ref="content"
         style={{maxHeight: '100px'}}>
         {null}
       </div>);

jujugui/static/gui/src/app/components/added-services-list/item/item.js

@@ -16,7 +16,7 @@ class AddedServicesListItem extends React.Component {
   */
   _getPriorityUnits(units) {
     var unitStatuses = initUtils.getUnitStatusCounts(units);
-    var top = { priority: 99, key: '', size: 0 };
+    var top = {priority: 99, key: '', size: 0};
     var status;
     for (var key in unitStatuses) {
       status = unitStatuses[key];
@@ -100,7 +100,8 @@ class AddedServicesListItem extends React.Component {
     var statusData = this._getPriorityUnits(service.units.toArray());
     var statusIndicator = this._renderStatusIndicator(statusData);
     return (
-      <li className={this._generateClassName()}
+      <li
+        className={this._generateClassName()}
         data-serviceid={service.id}
         onClick={this._onClickHandler.bind(this)}
         onMouseEnter={this._onMouseEnter.bind(this)}

jujugui/static/gui/src/app/components/added-services-list/item/test-item.js

@@ -33,7 +33,8 @@ describe('AddedServicesListItem', function() {
     mockService.set('fade', false);
     const wrapper = renderComponent();
     const expected = (
-      <li className="inspector-view__list-item"
+      <li
+        className="inspector-view__list-item"
         data-serviceid="wordpress"
         onClick={wrapper.prop('onClick')}
         onMouseEnter={wrapper.prop('onMouseEnter')}
@@ -80,7 +81,10 @@ describe('AddedServicesListItem', function() {
       var service = {
         getAttrs: function() {
           return {
-            icon: 'icon.gif', unit_count: '1', name: 'demo', id: 'demo',
+            icon: 'icon.gif',
+            unit_count: '1',
+            name: 'demo',
+            id: 'demo',
             units: {
               toArray: function() {
                 return [{agent_state: status.name}];
@@ -89,7 +93,7 @@ describe('AddedServicesListItem', function() {
         get: function() {
           return false;
         }};
-      const wrapper = renderComponent({ service });
+      const wrapper = renderComponent({service});
       const expected = (
         <span className="inspector-view__status-block">
           {statusIcon(status)}
@@ -102,7 +106,10 @@ describe('AddedServicesListItem', function() {
     var service = {
       getAttrs: function() {
         return {
-          icon: 'icon.gif', unit_count: '5', name: 'demo', id: 'demo',
+          icon: 'icon.gif',
+          unit_count: '5',
+          name: 'demo',
+          id: 'demo',
           units: {
             toArray: function() {
               return [{agent_state: 'unknown-state'}];
@@ -111,7 +118,7 @@ describe('AddedServicesListItem', function() {
       get: function() {
         return false;
       }};
-    const wrapper = renderComponent({ service });
+    const wrapper = renderComponent({service});
     const expected = (
       <span className="inspector-view__status-block">
         {undefined}
@@ -123,7 +130,10 @@ describe('AddedServicesListItem', function() {
     var service = {
       getAttrs: function() {
         return {
-          icon: 'icon.gif', unit_count: '2', name: 'demo', id: 'demo',
+          icon: 'icon.gif',
+          unit_count: '2',
+          name: 'demo',
+          id: 'demo',
           units: {
             toArray: function() {
               return [{agent_state: 'pending'}, {agent_state: 'error'}];
@@ -132,15 +142,18 @@ describe('AddedServicesListItem', function() {
       get: function() {
         return false;
       }};
-    const wrapper = renderComponent({ service });
+    const wrapper = renderComponent({service});
     assert.equal(wrapper.find('.inspector-view__status--error').length, 1);
   });
 
   it('prioritizes pending over uncommitted status icon', function() {
     var service = {
       getAttrs: function() {
         return {
-          icon: 'icon.gif', unit_count: '2', name: 'demo', id: 'demo',
+          icon: 'icon.gif',
+          unit_count: '2',
+          name: 'demo',
+          id: 'demo',
           units: {
             toArray: function() {
               return [{agent_state: 'uncommitted'}, {agent_state: 'pending'}];
@@ -149,15 +162,18 @@ describe('AddedServicesListItem', function() {
       get: function() {
         return false;
       }};
-    const wrapper = renderComponent({ service });
+    const wrapper = renderComponent({service});
     assert.equal(wrapper.find('.inspector-view__status--pending').length, 1);
   });
 
   it('calls the changeState callable on click', function() {
     const service = {
       getAttrs: function() {
         return {
-          icon: 'icon.gif', unit_count: '5', name: 'demo', id: 'demo',
+          icon: 'icon.gif',
+          unit_count: '5',
+          name: 'demo',
+          id: 'demo',
           units: {
             toArray: function() {
               return [];
@@ -192,7 +208,10 @@ describe('AddedServicesListItem', function() {
       get: sinon.stub().returns('apache2'),
       getAttrs: function() {
         return {
-          icon: 'icon.gif', unit_count: '5', name: 'demo', id: 'demo',
+          icon: 'icon.gif',
+          unit_count: '5',
+          name: 'demo',
+          id: 'demo',
           units: {
             toArray: function() {
               return [];
@@ -212,7 +231,10 @@ describe('AddedServicesListItem', function() {
       get: sinon.stub().returns('apache2'),
       getAttrs: function() {
         return {
-          icon: 'icon.gif', unit_count: '5', name: 'demo', id: 'demo',
+          icon: 'icon.gif',
+          unit_count: '5',
+          name: 'demo',
+          id: 'demo',
           units: {
             toArray: function() {
               return [];

jujugui/static/gui/src/app/components/added-services-list/test-added-services-list.js

@@ -29,7 +29,7 @@ describe('AddedServicesList', () => {
   it('generates a list of added services list items', () => {
     const allServices = [{get: () => 1}, {get: () => 2}, {get: () => 3}];
     const services = {each: cb => allServices.forEach(cb)};
-    const component = renderComponent({ services });
+    const component = renderComponent({services});
     expect(component).toMatchSnapshot();
   });
 
@@ -43,7 +43,7 @@ describe('AddedServicesList', () => {
       }
     }}, {get: () => 3}];
     const services = {each: cb => allServices.forEach(cb)};
-    const component = renderComponent({ services });
+    const component = renderComponent({services});
     expect(component).toMatchSnapshot();
   });
 });

jujugui/static/gui/src/app/components/address-form/test-address-form.js

@@ -55,7 +55,7 @@ describe('AddressForm', function() {
   });
 
   it('can display a loading spinner', function() {
-    const wrapper = renderComponent({ getCountries: sinon.stub() });
+    const wrapper = renderComponent({getCountries: sinon.stub()});
     const expected = (
       <div className="address-form">
         <Spinner />
@@ -191,7 +191,7 @@ describe('AddressForm', function() {
   it('can abort requests when unmounting', function() {
     const abort = sinon.stub();
     getCountries = sinon.stub().returns({abort: abort});
-    const wrapper = renderComponent({ getCountries });
+    const wrapper = renderComponent({getCountries});
     wrapper.unmount();
     assert.equal(abort.callCount, 1);
   });

jujugui/static/gui/src/app/components/boolean-config/boolean-config.js

@@ -8,7 +8,7 @@ const React = require('react');
 class BooleanConfig extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { value: this._cleanConfig(this.props.config) };
+    this.state = {value: this._cleanConfig(this.props.config)};
   }
 
   /**
@@ -57,7 +57,7 @@ class BooleanConfig extends React.Component {
     // Due to a bug in React we must use target here because we aren't able
     // to simulate changes on currentTarget.
     // https://github.com/facebook/react/issues/4950
-    this.setState({ value: e.target.checked }, () => {
+    this.setState({value: e.target.checked}, () => {
       if (onChange) {
         onChange();
       }
@@ -101,7 +101,8 @@ class BooleanConfig extends React.Component {
             </label>
           </div>
         </div>
-        <div className="boolean-config--description"
+        <div
+          className="boolean-config--description"
           dangerouslySetInnerHTML={{__html: this.props.option.description}}>
         </div>
       </div>

jujugui/static/gui/src/app/components/boolean-config/test-boolean-config.js

@@ -48,7 +48,8 @@ describe('BooleanConfig', function() {
             </label>
           </div>
         </div>
-        <div className="boolean-config--description"
+        <div
+          className="boolean-config--description"
           dangerouslySetInnerHTML={{__html: option.description}}>
         </div>
       </div>
@@ -57,23 +58,23 @@ describe('BooleanConfig', function() {
   });
 
   it('renders an unchecked input based on config prop', function() {
-    const wrapper = renderComponent({ config: false });
+    const wrapper = renderComponent({config: false});
     assert.equal(wrapper.find('.boolean-config--input').prop('defaultChecked'), false);
   });
 
   it('supports string boolean config props (true)', function() {
-    const wrapper = renderComponent({ config: 'True' });
+    const wrapper = renderComponent({config: 'True'});
     assert.equal(wrapper.find('.boolean-config--input').prop('defaultChecked'), true);
   });
 
   it('supports string boolean config props (false)', function() {
-    const wrapper = renderComponent({ config: 'False' });
+    const wrapper = renderComponent({config: 'False'});
     assert.equal(wrapper.find('.boolean-config--input').prop('defaultChecked'), false);
   });
 
   it('can call an onChange method if supplied', function() {
     const onChange = sinon.stub();
-    const wrapper = renderComponent({ onChange });
+    const wrapper = renderComponent({onChange});
     wrapper.find('.boolean-config--input').simulate('change', {
       target: {
         checked: true
@@ -83,7 +84,7 @@ describe('BooleanConfig', function() {
   });
 
   it('can be disabled', function() {
-    const wrapper = renderComponent({ disabled: true });
+    const wrapper = renderComponent({disabled: true});
     assert.equal(wrapper.find('.boolean-config--input').prop('disabled'), true);
   });
 });

jujugui/static/gui/src/app/components/budget-chart/budget-chart.js

@@ -52,10 +52,12 @@ class BudgetChart extends React.Component {
         <div className="budget-chart__chart twelve-col">
           <div className="budget-chart__chart-limit">
           </div>
-          <div className="budget-chart__chart-new"
+          <div
+            className="budget-chart__chart-new"
             style={styles.new}>
           </div>
-          <div className="budget-chart__chart-existing"
+          <div
+            className="budget-chart__chart-existing"
             style={styles.existing}>
           </div>
         </div>

jujugui/static/gui/src/app/components/budget-chart/test-budget-chart.js

@@ -19,16 +19,18 @@ describe('BudgetChart', function() {
         limit: 80
       }
     };
-    const wrapper = renderComponent({ budgets });
+    const wrapper = renderComponent({budgets});
     var expected = (
       <div className="budget-chart">
         <div className="budget-chart__chart twelve-col">
           <div className="budget-chart__chart-limit">
           </div>
-          <div className="budget-chart__chart-new"
+          <div
+            className="budget-chart__chart-new"
             style={{width: '0%'}}>
           </div>
-          <div className="budget-chart__chart-existing"
+          <div
+            className="budget-chart__chart-existing"
             style={{
               left: '0%',
               width: '25%'
@@ -64,10 +66,12 @@ describe('BudgetChart', function() {
         <div className="budget-chart__chart twelve-col">
           <div className="budget-chart__chart-limit">
           </div>
-          <div className="budget-chart__chart-new"
+          <div
+            className="budget-chart__chart-new"
             style={{width: '0%'}}>
           </div>
-          <div className="budget-chart__chart-existing"
+          <div
+            className="budget-chart__chart-existing"
             style={{
               left: '0%',
               width: '0%'