Merge pull request #667 from smiclea/eslint-rule

Add ESLint rules for React components indentation

.eslintrc

@@ -35,6 +35,21 @@
   ],
   "rules": {
     "react/sort-comp": "off",
+    "react/jsx-indent": [
+      2,
+      2,
+      {
+        "checkAttributes": true,
+        "indentLogicalExpressions": true
+      }
+    ],
+    "react/jsx-indent-props": [
+      2,
+      2
+    ],
+    "react/self-closing-comp": [
+      2
+    ],
     "react/jsx-one-expression-per-line": "off",
     "@typescript-eslint/semi": [
       2,

src/components/pages/AssessmentDetailsPage/AssessmentDetailsPage.tsx

@@ -515,7 +515,7 @@ class AssessmentDetailsPage extends React.Component<Props, State> {
               user={userStore.loggedUser}
               onUserItemClick={item => { this.handleUserItemClick(item) }}
             />
-)}
+          )}
           contentHeaderComponent={(
             <DetailsContentHeader
               statusPill={status}
@@ -525,7 +525,7 @@ class AssessmentDetailsPage extends React.Component<Props, State> {
               backLink="/planning"
               typeImage={assessmentImage}
             />
-)}
+          )}
           contentComponent={(
             <AssessmentDetailsContent
               item={details}

src/components/pages/EndpointDetailsPage/EndpointDetailsPage.tsx

@@ -251,7 +251,7 @@ class EndpointDetailsPage extends React.Component<Props, State> {
               user={userStore.loggedUser}
               onUserItemClick={item => { this.handleUserItemClick(item) }}
             />
-)}
+          )}
           contentHeaderComponent={(
             <DetailsContentHeader
               itemTitle={endpoint?.name}
@@ -261,7 +261,7 @@ class EndpointDetailsPage extends React.Component<Props, State> {
               dropdownActions={dropdownActions}
               typeImage={endpointImage}
             />
-)}
+          )}
           contentComponent={(
             <EndpointDetailsContent
               item={endpoint}
@@ -274,7 +274,7 @@ class EndpointDetailsPage extends React.Component<Props, State> {
               onDeleteClick={() => { this.handleDeleteEndpointClick() }}
               onValidateClick={() => { this.handleValidateClick() }}
             />
-)}
+          )}
         />
         <AlertModal
           isOpen={this.state.showDeleteEndpointConfirmation}

src/components/pages/MigrationDetailsPage/MigrationDetailsPage.tsx

@@ -374,7 +374,7 @@ class MigrationDetailsPage extends React.Component<Props, State> {
               user={userStore.loggedUser}
               onUserItemClick={item => { this.handleUserItemClick(item) }}
             />
-)}
+          )}
           contentHeaderComponent={(
             <DetailsContentHeader
               statusPill={migrationStore.migrationDetails?.last_execution_status}
@@ -386,7 +386,7 @@ class MigrationDetailsPage extends React.Component<Props, State> {
               dropdownActions={dropdownActions}
               primaryInfoPill
             />
-)}
+          )}
           contentComponent={(
             <MigrationDetailsContent
               item={migrationStore.migrationDetails}
@@ -410,7 +410,7 @@ class MigrationDetailsPage extends React.Component<Props, State> {
                 || minionPoolStore.loadingMinionPools || this.state.initialLoading}
               onDeleteMigrationClick={() => { this.handleDeleteMigrationClick() }}
             />
-)}
+          )}
         />
         <AlertModal
           isOpen={this.state.showDeleteMigrationConfirmation}

src/components/pages/MinionPoolDetailsPage/MinionPoolDetailsPage.tsx

@@ -331,7 +331,7 @@ class MinionPoolDetailsPage extends React.Component<Props, State> {
               user={userStore.loggedUser}
               onUserItemClick={item => { this.handleUserItemClick(item) }}
             />
-)}
+          )}
           contentHeaderComponent={(
             <DetailsContentHeader
               statusPill={this.minionPool?.status}
@@ -342,7 +342,7 @@ class MinionPoolDetailsPage extends React.Component<Props, State> {
               backLink="/minion-pools"
               typeImage={minionPoolImage}
             />
-)}
+          )}
           contentComponent={(
             <MinionPoolDetailsContent
               item={this.minionPool}

src/components/pages/ProjectDetailsPage/ProjectDetailsPage.tsx

@@ -190,7 +190,7 @@ class ProjectDetailsPage extends React.Component<Props, State> {
               user={userStore.loggedUser}
               onUserItemClick={item => { this.handleUserItemClick(item) }}
             />
-)}
+          )}
           contentHeaderComponent={(
             <DetailsContentHeader
               itemTitle={projectStore.projectDetails?.name}
@@ -199,7 +199,7 @@ class ProjectDetailsPage extends React.Component<Props, State> {
               dropdownActions={dropdownActions}
               typeImage={projectImage}
             />
-)}
+          )}
           contentComponent={(
             <ProjectDetailsContent
               project={projectStore.projectDetails}
@@ -217,7 +217,7 @@ class ProjectDetailsPage extends React.Component<Props, State> {
               }}
               onDeleteClick={() => this.handleDeleteProjectClick()}
             />
-)}
+          )}
         />
         {this.state.showProjectModal ? (
           <ProjectModal

src/components/pages/ReplicaDetailsPage/ReplicaDetailsPage.tsx

@@ -592,7 +592,7 @@ class ReplicaDetailsPage extends React.Component<Props, State> {
               user={userStore.loggedUser}
               onUserItemClick={item => { this.handleUserItemClick(item) }}
             />
-)}
+          )}
           contentHeaderComponent={(
             <DetailsContentHeader
               statusPill={replica?.last_execution_status}
@@ -604,7 +604,7 @@ class ReplicaDetailsPage extends React.Component<Props, State> {
               typeImage={replicaImage}
               alertInfoPill
             />
-)}
+          )}
           contentComponent={(
             <ReplicaDetailsContent
               item={replica}
@@ -646,7 +646,7 @@ class ReplicaDetailsPage extends React.Component<Props, State> {
               onScheduleRemove={scheduleId => { this.handleScheduleRemove(scheduleId) }}
               onScheduleSave={s => { this.handleScheduleSave(s) }}
             />
-)}
+          )}
         />
         <Modal
           isOpen={this.state.showOptionsModal}

src/components/pages/UserDetailsPage/UserDetailsPage.tsx

@@ -131,7 +131,7 @@ class UserDetailsPage extends React.Component<Props, State> {
               user={userStore.loggedUser}
               onUserItemClick={item => { this.handleUserItemClick(item) }}
             />
-)}
+          )}
           contentHeaderComponent={(
             <DetailsContentHeader
               itemTitle={userStore.userDetails?.name}
@@ -140,7 +140,7 @@ class UserDetailsPage extends React.Component<Props, State> {
               typeImage={userImage}
               dropdownActions={dropdownActions}
             />
-)}
+          )}
           contentComponent={(
             <UserDetailsContent
               onDeleteClick={() => { this.handleDeleteClick() }}
@@ -152,7 +152,7 @@ class UserDetailsPage extends React.Component<Props, State> {
               projects={projectStore.projects}
               onUpdatePasswordClick={() => { this.handleUpdatePasswordClick() }}
             />
-)}
+          )}
         />
         {this.state.showUserModal && userStore.userDetails ? (
           <UserModal

src/components/pages/WizardPage/WizardPage.tsx

@@ -679,7 +679,7 @@ class WizardPage extends React.Component<Props, State> {
               user={userStore.loggedUser}
               onUserItemClick={item => { this.handleUserItemClick(item) }}
             />
-)}
+          )}
           pageContentComponent={(
             <WizardPageContent
               pages={this.pages}
@@ -736,7 +736,7 @@ class WizardPage extends React.Component<Props, State> {
               onCancelUploadedScript={(g, i) => { this.handleCancelUploadedScript(g, i) }}
               onUserScriptUpload={s => { this.handleUserScriptUpload(s) }}
             />
-)}
+          )}
         />
         <Modal
           isOpen={this.state.showNewEndpointModal}