refactor(editor): enable react/jsx-indent linting rule for zanata-editor

This rule leads to some odd indentation around ternary operators and logic operators, but there is an active bug for it so it should be ok to leave the rule on and wait for a fix. See jsx-eslint/eslint-plugin-react#540
zanata · Jul 14, 2016 · bc8a15b · bc8a15b
1 parent 1b1f0f1
commit bc8a15b
Show file tree

Hide file tree

Showing 13 changed files with 140 additions and 143 deletions.
diff --git a/zanata-editor/src/.eslintrc b/zanata-editor/src/.eslintrc
@@ -15,9 +15,6 @@ rules:
   # These rules should all be turned on and the linting errors fixed after the
   # other changes have been reviewed.
 
-  # FIXME enable rule and fix code style
-  react/jsx-indent: [0]
-
   # FIXME enable rule and fix code style
   react/jsx-indent-props: [0]
 

diff --git a/zanata-editor/src/app/components/DashboardLink.js b/zanata-editor/src/app/components/DashboardLink.js
@@ -20,12 +20,12 @@ const DashboardLink = React.createClass({
 
   render: function () {
     return (
-        <a href={this.props.dashboardUrl}
-           className="u-sizeHeight-2 u-sizeWidth-1_1-2 u-inlineBlock"
-           title={this.props.name}>
-          <img className="u-round Header-avatar"
-            src={this.props.gravatarUrl}/>
-        </a>
+      <a href={this.props.dashboardUrl}
+         className="u-sizeHeight-2 u-sizeWidth-1_1-2 u-inlineBlock"
+         title={this.props.name}>
+        <img className="u-round Header-avatar"
+          src={this.props.gravatarUrl}/>
+      </a>
     )
   }
 })

diff --git a/zanata-editor/src/app/components/LogoLoader/index.js b/zanata-editor/src/app/components/LogoLoader/index.js
@@ -12,27 +12,27 @@ const LogoLoader = ({ inverted, loading }) => {
 
   /* eslint-disable max-len  */
   return (
-   <span className={className} title="Zanata">
-    <span className="LogoLoader-logo">
-       <svg className="LogoLoader-svg LogoLoader-circle" viewBox="0 0 512 512">
-         <g><path d="M256.040517,26.9020538 C129.377614,26.9020538 26.4050036,130.259367 26.4050036,257.280952 C26.4050036,384.302988 129.377614,487.660302 256.040517,487.660302 C382.703464,487.660302 485.676029,384.302988 485.676075,257.280952 C485.676029,130.259367 382.703464,26.9020538 256.040517,26.9020538 Z M256.040517,66.3898734 C361.786714,66.3898734 447.229385,152.099354 447.229431,258.282844 C447.229385,364.466785 361.786714,450.176266 256.040517,450.176266 C150.294319,450.176266 64.8516476,364.466785 64.8516476,258.282844 C64.8516476,152.099354 150.294319,66.3898734 256.040517,66.3898734 Z" id="Circle"></path></g>
-       </svg>
-       <svg className="LogoLoader-svg LogoLoader-circlePulse" viewBox="0 0 512 512">
-         <g><path d="M256.040517,26.9020538 C129.377614,26.9020538 26.4050036,130.259367 26.4050036,257.280952 C26.4050036,384.302988 129.377614,487.660302 256.040517,487.660302 C382.703464,487.660302 485.676029,384.302988 485.676075,257.280952 C485.676029,130.259367 382.703464,26.9020538 256.040517,26.9020538 Z M256.040517,66.3898734 C361.786714,66.3898734 447.229385,152.099354 447.229431,258.282844 C447.229385,364.466785 361.786714,450.176266 256.040517,450.176266 C150.294319,450.176266 64.8516476,364.466785 64.8516476,258.282844 C64.8516476,152.099354 150.294319,66.3898734 256.040517,66.3898734 Z" id="Circle"></path></g>
-       </svg>
-       <svg className="LogoLoader-svg LogoLoader-z" viewBox="0 0 512 512">
-         <g>
-           <g id="Shadow" transform="translate(26.377192, 25.222456)">
-             <mask id="mask-2" fill="white">
-               <path id="path-1" className="LogoLoader-zMask" d="M229.663325,0.656527298 C102.978083,0.656527298 0.00506640616,104.009785 0.00502136579,231.056604 C0.00506640616,358.103874 102.978083,461.457132 229.663325,461.457132 C356.348567,461.457132 459.321583,358.103874 459.321628,231.056604 C459.321583,104.009785 356.348567,0.656527298 229.663325,0.656527298 L229.663325,0.656527298 Z"></path>
-             </mask>
-             <path d="M370.359682,205.004592 C370.359682,205.004592 324.991098,260.667923 280.946431,337.901127 L451.416772,516.800535 C451.416772,516.800535 291.528531,440.593803 125.652038,346.908664 C155.346887,295.399884 194.844863,243.276033 194.844863,243.276033 C194.844863,243.276033 114.213224,210.438853 4.56035982,152.392287 C52.1675405,80.5865855 110.747727,21.1381963 110.747727,21.1381963 C110.747727,21.1381963 231.539977,113.317873 370.359682,205.004592 Z" id="Z-shadow" opacity="0.1" fill="#000000" mask="url(#mask-2)"></path>
-           </g>
-           <path d="M381.953181,190.180235 C381.953181,190.180235 336.584597,245.843566 292.53993,323.07677 L463.010272,501.976178 C463.010272,501.976178 303.122031,425.769445 137.245537,332.084307 C166.940386,280.575527 206.438363,228.451676 206.438363,228.451676 C206.438363,228.451676 125.806723,195.614496 16.1538594,137.56793 C63.76104,65.7622284 122.341227,6.31383929 122.341227,6.31383929 C122.341227,6.31383929 243.133477,98.4935163 381.953181,190.180235 Z" id="Z"></path>
-         </g>
-       </svg>
-     </span>
-   </span>
+    <span className={className} title="Zanata">
+      <span className="LogoLoader-logo">
+        <svg className="LogoLoader-svg LogoLoader-circle" viewBox="0 0 512 512">
+          <g><path d="M256.040517,26.9020538 C129.377614,26.9020538 26.4050036,130.259367 26.4050036,257.280952 C26.4050036,384.302988 129.377614,487.660302 256.040517,487.660302 C382.703464,487.660302 485.676029,384.302988 485.676075,257.280952 C485.676029,130.259367 382.703464,26.9020538 256.040517,26.9020538 Z M256.040517,66.3898734 C361.786714,66.3898734 447.229385,152.099354 447.229431,258.282844 C447.229385,364.466785 361.786714,450.176266 256.040517,450.176266 C150.294319,450.176266 64.8516476,364.466785 64.8516476,258.282844 C64.8516476,152.099354 150.294319,66.3898734 256.040517,66.3898734 Z" id="Circle"></path></g>
+        </svg>
+        <svg className="LogoLoader-svg LogoLoader-circlePulse" viewBox="0 0 512 512">
+          <g><path d="M256.040517,26.9020538 C129.377614,26.9020538 26.4050036,130.259367 26.4050036,257.280952 C26.4050036,384.302988 129.377614,487.660302 256.040517,487.660302 C382.703464,487.660302 485.676029,384.302988 485.676075,257.280952 C485.676029,130.259367 382.703464,26.9020538 256.040517,26.9020538 Z M256.040517,66.3898734 C361.786714,66.3898734 447.229385,152.099354 447.229431,258.282844 C447.229385,364.466785 361.786714,450.176266 256.040517,450.176266 C150.294319,450.176266 64.8516476,364.466785 64.8516476,258.282844 C64.8516476,152.099354 150.294319,66.3898734 256.040517,66.3898734 Z" id="Circle"></path></g>
+        </svg>
+        <svg className="LogoLoader-svg LogoLoader-z" viewBox="0 0 512 512">
+          <g>
+            <g id="Shadow" transform="translate(26.377192, 25.222456)">
+              <mask id="mask-2" fill="white">
+                <path id="path-1" className="LogoLoader-zMask" d="M229.663325,0.656527298 C102.978083,0.656527298 0.00506640616,104.009785 0.00502136579,231.056604 C0.00506640616,358.103874 102.978083,461.457132 229.663325,461.457132 C356.348567,461.457132 459.321583,358.103874 459.321628,231.056604 C459.321583,104.009785 356.348567,0.656527298 229.663325,0.656527298 L229.663325,0.656527298 Z"></path>
+              </mask>
+              <path d="M370.359682,205.004592 C370.359682,205.004592 324.991098,260.667923 280.946431,337.901127 L451.416772,516.800535 C451.416772,516.800535 291.528531,440.593803 125.652038,346.908664 C155.346887,295.399884 194.844863,243.276033 194.844863,243.276033 C194.844863,243.276033 114.213224,210.438853 4.56035982,152.392287 C52.1675405,80.5865855 110.747727,21.1381963 110.747727,21.1381963 C110.747727,21.1381963 231.539977,113.317873 370.359682,205.004592 Z" id="Z-shadow" opacity="0.1" fill="#000000" mask="url(#mask-2)"></path>
+            </g>
+            <path d="M381.953181,190.180235 C381.953181,190.180235 336.584597,245.843566 292.53993,323.07677 L463.010272,501.976178 C463.010272,501.976178 303.122031,425.769445 137.245537,332.084307 C166.940386,280.575527 206.438363,228.451676 206.438363,228.451676 C206.438363,228.451676 125.806723,195.614496 16.1538594,137.56793 C63.76104,65.7622284 122.341227,6.31383929 122.341227,6.31383929 C122.341227,6.31383929 243.133477,98.4935163 381.953181,190.180235 Z" id="Z"></path>
+          </g>
+        </svg>
+      </span>
+    </span>
   )
   /* eslint-enable max-len */
 }

diff --git a/zanata-editor/src/app/components/Pager.js b/zanata-editor/src/app/components/Pager.js
@@ -12,19 +12,19 @@ const PagerButton = React.createClass({
             title={this.props.title}
             className="u-sizeWidth-1"/>
     return (
-        <li>
-          {this.props.disabled
-            ? <span className="u-textNeutral u-sizeHeight-1_1-2 u-textNoSelect"
-                  title={this.props.title}>
-                {icon}
-              </span>
-            : <a className="Link--neutral u-sizeHeight-1_1-2 u-textNoSelect"
-               title={this.props.title}
-               onClick={this.props.action}>
-                {icon}
-              </a>
-          }
-        </li>
+      <li>
+        {this.props.disabled
+          ? <span className="u-textNeutral u-sizeHeight-1_1-2 u-textNoSelect"
+                title={this.props.title}>
+              {icon}
+          </span>
+          : <a className="Link--neutral u-sizeHeight-1_1-2 u-textNoSelect"
+             title={this.props.title}
+             onClick={this.props.action}>
+              {icon}
+          </a>
+        }
+      </li>
     )
   }
 })

diff --git a/zanata-editor/src/app/components/ProgressBar/index.js b/zanata-editor/src/app/components/ProgressBar/index.js
@@ -23,7 +23,7 @@ const ProgressItem = React.createClass({
       width: this.props.width + '%'
     }
     return (
-        <span className={className} style={style}/>
+      <span className={className} style={style}/>
     )
   }
 })

diff --git a/zanata-editor/src/app/components/SuggestionContents.js b/zanata-editor/src/app/components/SuggestionContents.js
@@ -52,7 +52,7 @@ const SuggestionContents = React.createClass({
           text2={content}/>
       : <div className={className}>
           {content}
-        </div>
+      </div>
   },
 
   render: function () {

diff --git a/zanata-editor/src/app/components/TransUnitSourceHeader.js b/zanata-editor/src/app/components/TransUnitSourceHeader.js
@@ -26,27 +26,27 @@ const TransUnitSourceHeader = React.createClass({
     const copyButtonItem = this.props.phrase.plural
       ? undefined
       : (
-          <li>
-            <IconButton
-              icon="copy"
-              title={'Copy ' + this.props.sourceLocale.name +
-                     ' (' + this.props.sourceLocale.id + ')'}
-              onClick={this.props.copyFromSource.bind(undefined, 0)}
-              buttonClass={buttonClass}/>
-          </li>
-        )
+      <li>
+        <IconButton
+          icon="copy"
+          title={'Copy ' + this.props.sourceLocale.name +
+                 ' (' + this.props.sourceLocale.id + ')'}
+          onClick={this.props.copyFromSource.bind(undefined, 0)}
+          buttonClass={buttonClass}/>
+      </li>
+      )
 
     const closeButtonItem = hasTranslationChanged(this.props.phrase)
       ? undefined
       : (
-          <li className="u-gtemd-hidden">
-            <IconButton
-              icon="cross"
-              title="Cancel edit"
-              onClick={this.props.cancelEdit}
-              buttonClass={buttonClass}/>
-          </li>
-        )
+      <li className="u-gtemd-hidden">
+        <IconButton
+          icon="cross"
+          title="Cancel edit"
+          onClick={this.props.cancelEdit}
+          buttonClass={buttonClass}/>
+      </li>
+      )
 
     return (
       <div className="TransUnit-panelHeader TransUnit-panelHeader--source">

diff --git a/zanata-editor/src/app/components/TransUnitSourcePanel.js b/zanata-editor/src/app/components/TransUnitSourcePanel.js
@@ -30,8 +30,8 @@ const TransUnitSourcePanel = React.createClass({
 
     const sources = isLoading
       ? <span className="u-textMeta">
-          <Icon name="loader"/>
-        </span>
+        <Icon name="loader"/>
+      </span>
       : this.props.phrase.sources.map(
         (source, index) => {
           // TODO make this translatable
@@ -43,25 +43,25 @@ const TransUnitSourcePanel = React.createClass({
 
           const copyButton = this.props.selected
             ? <ul className="u-floatRight u-listHorizontal">
-                <li>
-                  <IconButton
-                    icon="copy"
-                    title={'Copy ' + this.props.sourceLocale.name +
-                      ' (' + this.props.sourceLocale.id + ')'}
-                    onClick={copySource}
-                    buttonClass="u-floatRight Link Link--neutral u-sizeHeight-1
-                      u-sizeWidth-1 u-textCenter"/>
-                </li>
-              </ul>
+              <li>
+                <IconButton
+                  icon="copy"
+                  title={'Copy ' + this.props.sourceLocale.name +
+                    ' (' + this.props.sourceLocale.id + ')'}
+                  onClick={copySource}
+                  buttonClass="u-floatRight Link Link--neutral u-sizeHeight-1
+                    u-sizeWidth-1 u-textCenter"/>
+              </li>
+            </ul>
             : undefined
 
           const itemHeader = isPlural
             ? <div className="TransUnit-itemHeader">
-                <span className="u-textMeta">
-                  {headerLabel}
-                </span>
-                {copyButton}
-              </div>
+              <span className="u-textMeta">
+                {headerLabel}
+              </span>
+              {copyButton}
+            </div>
             : undefined
 
           return (
@@ -75,21 +75,21 @@ const TransUnitSourcePanel = React.createClass({
     // empty, but this is what is output in the Angular version
     const footer = this.props.selected
       ? (
-          <div className="TransUnit-panelFooter TransUnit-panelFooter--source
-                          u-sm-hidden">
-            <div className="u-sizeHeight-1_1-2">
-              {/*
-              <button ng-show="appCtrl.PRODUCTION"
-                class="Link Link--neutral u-sizeHeight-1_1-2"
-                title="{{::'Details'|translate}}">
-                <icon name="info"
-                  title="{{::'Details'|translate}}"
-                  class="u-sizeWidth-1_1-2"></icon>
-              </button>
-              */}
-            </div>
-          </div>
-        )
+      <div className="TransUnit-panelFooter TransUnit-panelFooter--source
+                      u-sm-hidden">
+        <div className="u-sizeHeight-1_1-2">
+          {/*
+          <button ng-show="appCtrl.PRODUCTION"
+            class="Link Link--neutral u-sizeHeight-1_1-2"
+            title="{{::'Details'|translate}}">
+            <icon name="info"
+              title="{{::'Details'|translate}}"
+              class="u-sizeWidth-1_1-2"></icon>
+          </button>
+          */}
+        </div>
+      </div>
+      )
       : undefined
 
     return (

diff --git a/zanata-editor/src/app/components/TransUnitStatus.js b/zanata-editor/src/app/components/TransUnitStatus.js
@@ -27,32 +27,32 @@ const TransUnitStatus = React.createClass({
 
     const comments = phrase.comments
       ? (
-          <li className="TransUnit-metaDataItem TransUnit-metaDataComments">
-            <button tabindex="-1"
-              className="TransUnit-metaDataButton"
-              title={phrase.comments + ' comments'}>
-              <Icon name="comment" title="Comments"/>
-              <br/>
-              <span>{phrase.comments}</span>
-            </button>
-          </li>
-        )
+      <li className="TransUnit-metaDataItem TransUnit-metaDataComments">
+        <button tabindex="-1"
+          className="TransUnit-metaDataButton"
+          title={phrase.comments + ' comments'}>
+          <Icon name="comment" title="Comments"/>
+          <br/>
+          <span>{phrase.comments}</span>
+        </button>
+      </li>
+      )
       : undefined
 
     const errors = phrase.errors
       ? (
-          <li className="TransUnit-metaDataItem TransUnit-metaDataErrors">
-            <button tabindex="-1"
-              className="TransUnit-metaDataButton"
-              title="1 Error">
-              <Icon name="dot"
-                title="Error"
-                className="Icon--xsm u-textDanger"/>
-              <br/>
-              <span>{phrase.comments}</span>
-            </button>
-          </li>
-        )
+      <li className="TransUnit-metaDataItem TransUnit-metaDataErrors">
+        <button tabindex="-1"
+          className="TransUnit-metaDataButton"
+          title="1 Error">
+          <Icon name="dot"
+            title="Error"
+            className="Icon--xsm u-textDanger"/>
+          <br/>
+          <span>{phrase.comments}</span>
+        </button>
+      </li>
+      )
       : undefined
 
     return (

diff --git a/zanata-editor/src/app/components/TransUnitTranslationFooter.js b/zanata-editor/src/app/components/TransUnitTranslationFooter.js
@@ -113,14 +113,14 @@ const TransUnitTranslationFooter = React.createClass({
     const actionButtonKeyShortcut =
       saveAsMode && this.statusShortcutKeys[selectedButtonStatus]
     const actionButton = (
-        <Button
-          className={cx('Button u-sizeHeight-1_1-4 u-textCapitalize',
-                        this.buttonClassByStatus[selectedButtonStatus])}
-          disabled={isSaving || !translationHasChanged}
-          title={selectedButtonTitle}
-          onClick={saveCallback}>
-          {selectedButtonTitle}{actionButtonKeyShortcut}
-        </Button>
+      <Button
+        className={cx('Button u-sizeHeight-1_1-4 u-textCapitalize',
+                      this.buttonClassByStatus[selectedButtonStatus])}
+        disabled={isSaving || !translationHasChanged}
+        title={selectedButtonTitle}
+        onClick={saveCallback}>
+        {selectedButtonTitle}{actionButtonKeyShortcut}
+      </Button>
     )
 
     const otherStatuses = nonDefaultValidSaveStatuses(phrase)
@@ -138,10 +138,10 @@ const TransUnitTranslationFooter = React.createClass({
                         'Dropdown-toggle',
                         this.buttonClassByStatus[selectedButtonStatus])}
           title="Save as…">
-          <Icon name="chevron-down"
-                title="Save as…"
-                className="Icon--sm Dropdown-toggleIcon"/>
-        </Button>
+        <Icon name="chevron-down"
+              title="Save as…"
+              className="Icon--sm Dropdown-toggleIcon"/>
+      </Button>
       : undefined
 
     const otherActionButtonList = (

diff --git a/zanata-editor/src/app/components/TransUnitTranslationPanel.js b/zanata-editor/src/app/components/TransUnitTranslationPanel.js
@@ -115,8 +115,8 @@ const TransUnitTranslationPanel = React.createClass({
 
     if (isLoading) {
       translations = <span className="u-textMeta">
-                       <Icon name="loader"/>
-                     </span>
+        <Icon name="loader"/>
+      </span>
     } else {
       const newTranslations = phrase.newTranslations
       ? phrase.newTranslations

diff --git a/zanata-editor/src/app/containers/NeedSlugMessage.js b/zanata-editor/src/app/containers/NeedSlugMessage.js
@@ -16,10 +16,10 @@ class NeedSlugMessage extends React.Component {
         <p>Need a URL in the form <code>
           .../project-slug/version-slug/translate
         </code></p>
-      <p>If using <code>fake-zanata-server</code>, try using <Link
-        to="/tiny-project/1/translate/hello.txt/fr">
-            /tiny-project/1/translate/hello.txt/fr
-          </Link>
+        <p>If using <code>fake-zanata-server</code>, try using <Link
+          to="/tiny-project/1/translate/hello.txt/fr">
+              /tiny-project/1/translate/hello.txt/fr
+        </Link>
         </p>
       </div>
     )