fix lint errors (white spaces)

packages/app/src/components/Admin/App/FileUploadSetting.jsx

@@ -49,21 +49,21 @@ function FileUploadSetting(props) {
 
         <div className="col-md-6 py-2">
           {fileUploadTypes.map((type) => {
-              return (
-                <div key={type} className="custom-control custom-radio custom-control-inline">
-                  <input
-                    type="radio"
-                    className="custom-control-input"
-                    name="file-upload-type"
-                    id={`file-upload-type-radio-${type}`}
-                    checked={adminAppContainer.state.fileUploadType === type}
-                    disabled={adminAppContainer.state.isFixedFileUploadByEnvVar}
-                    onChange={() => { adminAppContainer.changeFileUploadType(type) }}
-                  />
-                  <label className="custom-control-label" htmlFor={`file-upload-type-radio-${type}`}>{t(`admin:app_setting.${type}_label`)}</label>
-                </div>
-              );
-            })}
+            return (
+              <div key={type} className="custom-control custom-radio custom-control-inline">
+                <input
+                  type="radio"
+                  className="custom-control-input"
+                  name="file-upload-type"
+                  id={`file-upload-type-radio-${type}`}
+                  checked={adminAppContainer.state.fileUploadType === type}
+                  disabled={adminAppContainer.state.isFixedFileUploadByEnvVar}
+                  onChange={() => { adminAppContainer.changeFileUploadType(type) }}
+                />
+                <label className="custom-control-label" htmlFor={`file-upload-type-radio-${type}`}>{t(`admin:app_setting.${type}_label`)}</label>
+              </div>
+            );
+          })}
         </div>
         {adminAppContainer.state.isFixedFileUploadByEnvVar && (
           <p className="alert alert-warning mt-2 text-left offset-3 col-6">

packages/app/src/components/Admin/App/MailSetting.jsx

@@ -64,22 +64,22 @@ function MailSetting(props) {
         </label>
         <div className="col-md-6 py-2">
           {transmissionMethods.map((method) => {
-              return (
-                <div key={method} className="custom-control custom-radio custom-control-inline">
-                  <input
-                    type="radio"
-                    className="custom-control-input"
-                    name="transmission-method"
-                    id={`transmission-method-radio-${method}`}
-                    checked={adminAppContainer.state.transmissionMethod === method}
-                    onChange={(e) => {
+            return (
+              <div key={method} className="custom-control custom-radio custom-control-inline">
+                <input
+                  type="radio"
+                  className="custom-control-input"
+                  name="transmission-method"
+                  id={`transmission-method-radio-${method}`}
+                  checked={adminAppContainer.state.transmissionMethod === method}
+                  onChange={(e) => {
                     adminAppContainer.changeTransmissionMethod(method);
                   }}
-                  />
-                  <label className="custom-control-label" htmlFor={`transmission-method-radio-${method}`}>{t(`admin:app_setting.${method}_label`)}</label>
-                </div>
-              );
-            })}
+                />
+                <label className="custom-control-label" htmlFor={`transmission-method-radio-${method}`}>{t(`admin:app_setting.${method}_label`)}</label>
+              </div>
+            );
+          })}
         </div>
       </div>
 
@@ -92,9 +92,9 @@ function MailSetting(props) {
             { t('Update') }
           </button>
           {adminAppContainer.state.transmissionMethod === 'smtp' && (
-          <button type="button" className="btn btn-secondary ml-4" onClick={sendTestEmailHandler}>
-            {t('admin:app_setting.send_test_email')}
-          </button>
+            <button type="button" className="btn btn-secondary ml-4" onClick={sendTestEmailHandler}>
+              {t('admin:app_setting.send_test_email')}
+            </button>
           )}
         </div>
       </div>

packages/app/src/components/Admin/Common/AdminNavigation.jsx

@@ -84,12 +84,12 @@ const AdminNavigation = (props) => {
         <MenuLink menu="search"       isListGroupItems isActive={isActiveMenu('/search')} />
         {growiCloudUri != null && growiAppIdForGrowiCloud != null
           && (
-          <a
-            href={`${growiCloudUri}/my/apps/${growiAppIdForGrowiCloud}`}
-            className="list-group-item list-group-item-action border-0 round-corner"
-          >
-            <MenuLabel menu="cloud" />
-          </a>
+            <a
+              href={`${growiCloudUri}/my/apps/${growiAppIdForGrowiCloud}`}
+              className="list-group-item list-group-item-action border-0 round-corner"
+            >
+              <MenuLabel menu="cloud" />
+            </a>
           )
         }
       </>

packages/app/src/components/Admin/Customize/CustomizeHeaderSetting.jsx

@@ -54,7 +54,7 @@ class CustomizeHeaderSetting extends React.Component {
               <pre className="hljs">
                 {/* eslint-disable-next-line react/no-unescaped-entities */}
                 <code className="text-wrap">&lt;script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.13.0/build/languages/yaml.min.js"
-                defer&gt;&lt;/script&gt;
+                  defer&gt;&lt;/script&gt;
                 </code>
               </pre>
             </div>

packages/app/src/components/Admin/ImportData/GrowiArchiveSection.jsx

@@ -135,11 +135,11 @@ class GrowiArchiveSection extends React.Component {
             />
           </div>
         )
-        : (
-          <UploadForm
-            onUpload={this.handleUpload}
-            onVersionMismatch={this.handleMismatchedVersions}
-          />
+          : (
+            <UploadForm
+              onUpload={this.handleUpload}
+              onVersionMismatch={this.handleMismatchedVersions}
+            />
           )}
       </Fragment>
     );

packages/app/src/components/Admin/ManageExternalAccount.jsx

@@ -63,12 +63,12 @@ class ManageExternalAccount extends React.Component {
             <ExternalAccountTable />
             {pager}
           </>
-         )
-         : (
-           <>
-             {t('admin:user_management.external_account_none')}
-           </>
-)}
+        )
+          : (
+            <>
+              {t('admin:user_management.external_account_none')}
+            </>
+          )}
 
       </Fragment>
     );

packages/app/src/components/Admin/Notification/GlobalNotificationList.jsx

@@ -95,35 +95,35 @@ class GlobalNotificationList extends React.Component {
               <td>
                 <ul className="list-inline mb-0">
                   {notification.triggerEvents.includes('pageCreate') && (
-                  <li className="list-inline-item badge badge-pill badge-success">
-                    <i className="icon-doc"></i> CREATE
-                  </li>
-                )}
+                    <li className="list-inline-item badge badge-pill badge-success">
+                      <i className="icon-doc"></i> CREATE
+                    </li>
+                  )}
                   {notification.triggerEvents.includes('pageEdit') && (
-                  <li className="list-inline-item badge badge-pill badge-warning">
-                    <i className="icon-pencil"></i> EDIT
-                  </li>
-                )}
+                    <li className="list-inline-item badge badge-pill badge-warning">
+                      <i className="icon-pencil"></i> EDIT
+                    </li>
+                  )}
                   {notification.triggerEvents.includes('pageMove') && (
-                  <li className="list-inline-item badge badge-pill badge-pink">
-                    <i className="icon-action-redo"></i> MOVE
-                  </li>
-                )}
+                    <li className="list-inline-item badge badge-pill badge-pink">
+                      <i className="icon-action-redo"></i> MOVE
+                    </li>
+                  )}
                   {notification.triggerEvents.includes('pageDelete') && (
-                  <li className="list-inline-item badge badge-pill badge-danger">
-                    <i className="icon-fire"></i> DELETE
-                  </li>
-                )}
+                    <li className="list-inline-item badge badge-pill badge-danger">
+                      <i className="icon-fire"></i> DELETE
+                    </li>
+                  )}
                   {notification.triggerEvents.includes('pageLike') && (
-                  <li className="list-inline-item badge badge-pill badge-info">
-                    <i className="icon-like"></i> LIKE
-                  </li>
-                )}
+                    <li className="list-inline-item badge badge-pill badge-info">
+                      <i className="icon-like"></i> LIKE
+                    </li>
+                  )}
                   {notification.triggerEvents.includes('comment') && (
-                  <li className="list-inline-item badge badge-pill badge-secondary">
-                    <i className="icon-fw icon-bubble"></i> POST
-                  </li>
-                )}
+                    <li className="list-inline-item badge badge-pill badge-secondary">
+                      <i className="icon-fw icon-bubble"></i> POST
+                    </li>
+                  )}
                 </ul>
               </td>
               <td>

packages/app/src/components/Admin/Security/LdapSecuritySettingContents.jsx

@@ -120,8 +120,8 @@ class LdapSecuritySettingContents extends React.Component {
                     aria-expanded="true"
                   >
                     {adminLdapSecurityContainer.state.isUserBind
-                        ? <span className="pull-left">{t('security_setting.ldap.bind_user')}</span>
-                        : <span className="pull-left">{t('security_setting.ldap.bind_manager')}</span>}
+                      ? <span className="pull-left">{t('security_setting.ldap.bind_user')}</span>
+                      : <span className="pull-left">{t('security_setting.ldap.bind_manager')}</span>}
                   </button>
                   <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
                     <button className="dropdown-item" type="button" onClick={() => { adminLdapSecurityContainer.changeLdapBindMode(true) }}>

packages/app/src/components/Admin/Security/ShareLinkSetting.jsx

@@ -172,7 +172,7 @@ class ShareLinkSetting extends React.Component {
             onClickDeleteButton={this.deleteLinkById}
             isAdmin
           />
-          )
+        )
           : (<p className="text-center">{t('share_links.No_share_links')}</p>
           )
         }

packages/app/src/components/Admin/SlackIntegration/BotTypeCard.jsx

@@ -50,15 +50,15 @@ const BotTypeCard = (props) => {
 
           {/*  A recommended badge is shown on official bot card, supplementary names are shown on Custom bot cards   */}
           {props.botType === 'officialBot'
-          ? (
-            <span className="badge badge-info mr-2">
-              {t('admin:slack_integration.selecting_bot_types.recommended')}
-            </span>
-          ) : (
-            <span className="supplementary-bot-name mr-2">
-              {t(`admin:slack_integration.selecting_bot_types.${botDetails[props.botType].supplementaryBotName}`)}
-            </span>
-          )}
+            ? (
+              <span className="badge badge-info mr-2">
+                {t('admin:slack_integration.selecting_bot_types.recommended')}
+              </span>
+            ) : (
+              <span className="supplementary-bot-name mr-2">
+                {t(`admin:slack_integration.selecting_bot_types.${botDetails[props.botType].supplementaryBotName}`)}
+              </span>
+            )}
 
           <i className={props.isActive ? 'grw-botcard-title-active' : ''} aria-hidden="true"></i>
         </h3>

packages/app/src/components/Admin/SlackIntegration/CustomBotWithoutProxyConnectionStatus.jsx

@@ -29,7 +29,7 @@ const CustomBotWithoutProxyConnectionStatus = (props) => {
                 <img width={20} height={20} src="/images/slack-integration/growi-bot-kun-icon.png" />
               </div>
             </div>
-         ) : ''}
+          ) : ''}
         </div>
       </div>
 

packages/app/src/components/Admin/SlackIntegration/WithProxyAccordions.jsx

@@ -163,16 +163,16 @@ const GeneratingTokensAndRegisteringProxyServiceProcess = withUnstatedContainers
           <li>
             <p
               className="ml-2"
-                // eslint-disable-next-line react/no-danger
+              // eslint-disable-next-line react/no-danger
               dangerouslySetInnerHTML={{ __html: t('admin:slack_integration.accordion.enter_growi_register_on_slack') }}
             />
           </li>
           <li>
             <p
               className="ml-2"
-                // TODO: Add dynamic link
-                // TODO: Add logo
-                // eslint-disable-next-line react/no-danger
+              // TODO: Add dynamic link
+              // TODO: Add logo
+              // eslint-disable-next-line react/no-danger
               dangerouslySetInnerHTML={{ __html: t('admin:slack_integration.accordion.paste_growi_url') }}
             />
             <div className="input-group align-items-center pl-2 mb-3">
@@ -370,7 +370,7 @@ const WithProxyAccordions = (props) => {
                 {t(`admin:slack_integration.accordion.${value.title}`)}
                 {value.title === 'test_connection' && isLatestConnectionSuccess && <i className="ml-3 text-success fa fa-check"></i>}
               </>
-)}
+            )}
             key={key}
           >
             {value.content}

packages/app/src/components/Admin/UserManagement.jsx

@@ -144,11 +144,11 @@ class UserManagement extends React.Component {
       <Fragment>
         {adminUsersContainer.state.userForPasswordResetModal != null
         && (
-        <PasswordResetModal
-          isOpen={adminUsersContainer.state.isPasswordResetModalShown}
-          onClose={adminUsersContainer.hidePasswordResetModal}
-          userForPasswordResetModal={adminUsersContainer.state.userForPasswordResetModal}
-        />
+          <PasswordResetModal
+            isOpen={adminUsersContainer.state.isPasswordResetModalShown}
+            onClose={adminUsersContainer.hidePasswordResetModal}
+            userForPasswordResetModal={adminUsersContainer.state.userForPasswordResetModal}
+          />
         )}
         <p>
           <InviteUserControl />

packages/app/src/components/Admin/Users/UserInviteModal.jsx

@@ -176,7 +176,7 @@ class UserInviteModal extends React.Component {
             <div className="my-1" key={user.email}>
               <CopyToClipboard text={copyText} onCopy={this.showToaster}>
                 <li className="btn btn-outline-secondary">
-                Email: <strong className="mr-3">{user.email}</strong> Password: <strong>{user.password}</strong>
+                  Email: <strong className="mr-3">{user.email}</strong> Password: <strong>{user.password}</strong>
                 </li>
               </CopyToClipboard>
             </div>
@@ -269,11 +269,11 @@ class UserInviteModal extends React.Component {
         </ModalHeader>
         <ModalBody>
           {invitedEmailList == null ? this.renderModalBody()
-           : this.renderCreatedModalBody()}
+            : this.renderCreatedModalBody()}
         </ModalBody>
         <ModalFooter className="d-flex">
           {invitedEmailList == null ? this.renderModalFooter()
-           : this.renderCreatedModalFooter()}
+            : this.renderCreatedModalFooter()}
         </ModalFooter>
       </Modal>
     );

packages/app/src/components/Admin/Users/UserMenu.jsx

@@ -65,11 +65,11 @@ class UserMenu extends React.Component {
           {(user.status === 1 || user.status === 3) && <StatusActivateButton user={user} />}
           {user.status === 2 && <StatusSuspendedButton user={user} />}
           {user.status === 5 && (
-          <SendInvitationEmailButton
-            user={user}
-            isInvitationEmailSended={isInvitationEmailSended}
-            onSuccessfullySentInvitationEmail={this.onSuccessfullySentInvitationEmail}
-          />
+            <SendInvitationEmailButton
+              user={user}
+              isInvitationEmailSended={isInvitationEmailSended}
+              onSuccessfullySentInvitationEmail={this.onSuccessfullySentInvitationEmail}
+            />
           )}
           {(user.status === 1 || user.status === 3 || user.status === 5) && <UserRemoveButton user={user} />}
         </li>

packages/app/src/components/BookmarkButton.jsx

@@ -54,9 +54,9 @@ class BookmarkButton extends React.Component {
         </button>
 
         {isGuestUser && (
-        <UncontrolledTooltip placement="top" target="bookmark-button" fade={false}>
-          {t('Not available for guest')}
-        </UncontrolledTooltip>
+          <UncontrolledTooltip placement="top" target="bookmark-button" fade={false}>
+            {t('Not available for guest')}
+          </UncontrolledTooltip>
         )}
       </div>
     );

packages/app/src/components/InstallerForm.jsx

@@ -99,12 +99,12 @@ class InstallerForm extends React.Component {
                 />
                 <div className="dropdown-menu" aria-labelledby="dropdownLanguage">
                   {
-                  localeMetadatas.map(meta => (
-                    <button key={meta.id} className="dropdown-item" type="button" onClick={() => { this.changeLanguage(meta) }}>
-                      {meta.displayName}
-                    </button>
-                  ))
-                }
+                    localeMetadatas.map(meta => (
+                      <button key={meta.id} className="dropdown-item" type="button" onClick={() => { this.changeLanguage(meta) }}>
+                        {meta.displayName}
+                      </button>
+                    ))
+                  }
                 </div>
               </div>
             </div>

packages/app/src/components/LikeButton.jsx

@@ -54,9 +54,9 @@ class LikeButton extends React.Component {
         </button>
 
         {isGuestUser && (
-        <UncontrolledTooltip placement="top" target="like-button" fade={false}>
-          {t('Not available for guest')}
-        </UncontrolledTooltip>
+          <UncontrolledTooltip placement="top" target="like-button" fade={false}>
+            {t('Not available for guest')}
+          </UncontrolledTooltip>
         )}
       </div>
     );

packages/app/src/components/LoginForm.jsx

@@ -158,11 +158,11 @@ class LoginForm extends React.Component {
     return (
       <React.Fragment>
         {registrationMode === 'Restricted' && (
-        <p className="alert alert-warning">
-          {t('page_register.notice.restricted')}
-          <br />
-          {t('page_register.notice.restricted_defail')}
-        </p>
+          <p className="alert alert-warning">
+            {t('page_register.notice.restricted')}
+            <br />
+            {t('page_register.notice.restricted_defail')}
+          </p>
         )}
         <form role="form" action="/register" method="post" id="register-form">
           <div className="input-group" id="input-group-username">
@@ -196,18 +196,18 @@ class LoginForm extends React.Component {
           </div>
 
           {registrationWhiteList.length > 0 && (
-          <>
-            <p className="form-text">{t('page_register.form_help.email')}</p>
-            <ul>
-              {registrationWhiteList.map((elem) => {
+            <>
+              <p className="form-text">{t('page_register.form_help.email')}</p>
+              <ul>
+                {registrationWhiteList.map((elem) => {
                   return (
                     <li key={elem}>
                       <code>{elem}</code>
                     </li>
                   );
                 })}
-            </ul>
-          </>
+              </ul>
+            </>
           )}
 
           <div className="input-group">
@@ -273,7 +273,7 @@ class LoginForm extends React.Component {
                       </a>
                     </div>
                   </div>
-              )}
+                )}
               </div>
               <div className="back">
                 {isRegistrationEnabled && this.renderRegisterForm()}

packages/app/src/components/Me/ApiSettings.jsx

@@ -44,20 +44,20 @@ class ApiSettings extends React.Component {
           <label htmlFor="apiToken" className="col-md-3 text-md-right">{t('Current API Token')}</label>
           <div className="col-md-6">
             {personalContainer.state.apiToken != null
-            ? (
-              <input
-                className="form-control"
-                type="text"
-                name="apiToken"
-                value={personalContainer.state.apiToken}
-                readOnly
-              />
-            )
-            : (
-              <p>
-                { t('page_me_apitoken.notice.apitoken_issued') }
-              </p>
-            )}
+              ? (
+                <input
+                  className="form-control"
+                  type="text"
+                  name="apiToken"
+                  value={personalContainer.state.apiToken}
+                  readOnly
+                />
+              )
+              : (
+                <p>
+                  { t('page_me_apitoken.notice.apitoken_issued') }
+                </p>
+              )}
           </div>
         </div>
 

packages/app/src/components/Me/ExternalAccountLinkedMe.jsx

@@ -70,7 +70,7 @@ class ExternalAccountLinkedMe extends React.Component {
         <h2 className="border-bottom my-4">
           <button type="button" className="btn btn-outline-secondary btn-sm pull-right" onClick={this.openAssociateModal}>
             <i className="icon-plus" aria-hidden="true" />
-          Add
+            Add
           </button>
           { t('admin:user_management.external_accounts') }
         </h2>
@@ -93,7 +93,7 @@ class ExternalAccountLinkedMe extends React.Component {
                 key={account._id}
                 openDisassociateModal={this.openDisassociateModal}
               />
-                ))}
+            ))}
           </tbody>
         </table>
 
@@ -104,11 +104,11 @@ class ExternalAccountLinkedMe extends React.Component {
 
         {this.state.accountForDisassociate != null
         && (
-        <DisassociateModal
-          isOpen={this.state.isDisassociateModalOpen}
-          onClose={this.closeDisassociateModal}
-          accountForDisassociate={this.state.accountForDisassociate}
-        />
+          <DisassociateModal
+            isOpen={this.state.isDisassociateModalOpen}
+            onClose={this.closeDisassociateModal}
+            accountForDisassociate={this.state.accountForDisassociate}
+          />
         )}
 
       </Fragment>

packages/app/src/components/Me/ImageCropModal.jsx

@@ -95,13 +95,13 @@ class ImageCropModal extends React.Component {
         </ModalBody>
         <ModalFooter>
           <button type="button" className="btn btn-outline-danger rounded-pill mr-auto" onClick={this.reset}>
-              Reset
+            Reset
           </button>
           <button type="button" className="btn btn-outline-secondary rounded-pill mr-2" onClick={this.props.onModalClose}>
-                  Cancel
+            Cancel
           </button>
           <button type="button" className="btn btn-outline-primary rounded-pill" onClick={this.crop}>
-                  Crop
+            Crop
           </button>
         </ModalFooter>
       </Modal>

packages/app/src/components/Me/PasswordSettings.jsx

@@ -92,7 +92,7 @@ class PasswordSettings extends React.Component {
 
         {(this.state.isPasswordSet)
           ? <h2 className="border-bottom my-4">{t('personal_settings.update_password')}</h2>
-        : <h2 className="border-bottom my-4">{t('personal_settings.set_new_password')}</h2>}
+          : <h2 className="border-bottom my-4">{t('personal_settings.set_new_password')}</h2>}
         {(this.state.isPasswordSet)
         && (
           <div className="row mb-3">

packages/app/src/components/Navbar/SubNavButtons.jsx

@@ -41,10 +41,10 @@ const SubnavButtons = (props) => {
   return (
     <>
       {isViewMode && (
-      <>
-        { pageContainer.isAbleToShowPageReactionButtons && <PageReactionButtons appContainer={appContainer} pageContainer={pageContainer} /> }
-        { pageContainer.isAbleToShowPageManagement && <PageManagement isCompactMode={isCompactMode} /> }
-      </>
+        <>
+          { pageContainer.isAbleToShowPageReactionButtons && <PageReactionButtons appContainer={appContainer} pageContainer={pageContainer} /> }
+          { pageContainer.isAbleToShowPageManagement && <PageManagement isCompactMode={isCompactMode} /> }
+        </>
       )}
     </>
   );

packages/app/src/components/Page/ShareLinkAlert.jsx

@@ -45,7 +45,7 @@ const ShareLinkAlert = (props) => {
       <i className="icon-fw icon-link"></i>
       {(expiredAt === '' ? <span>{t('page_page.notice.no_deadline')}</span>
       // eslint-disable-next-line react/no-danger
-      : <span dangerouslySetInnerHTML={{ __html: t('page_page.notice.expiration', { expiredAt }) }} />
+        : <span dangerouslySetInnerHTML={{ __html: t('page_page.notice.expiration', { expiredAt }) }} />
       )}
     </p>
   );

packages/app/src/components/PageComment/Comment.jsx

@@ -219,7 +219,7 @@ class Comment extends React.PureComponent {
             </div>
           </div>
         )
-      }
+        }
       </React.Fragment>
     );
   }

packages/app/src/components/PageComment/CommentEditor.jsx

@@ -332,39 +332,39 @@ class CommentEditor extends React.Component {
           <div className="d-flex">
             <label className="mr-2">
               {activeTab === 'comment_editor' && (
-              <span className="custom-control custom-checkbox">
-                <input
-                  type="checkbox"
-                  className="custom-control-input"
-                  id="comment-form-is-markdown"
-                  name="isMarkdown"
-                  checked={this.state.isMarkdown}
-                  value="1"
-                  onChange={this.updateStateCheckbox}
-                />
-                <label
-                  className="ml-2 custom-control-label"
-                  htmlFor="comment-form-is-markdown"
-                >
-                  Markdown
-                </label>
-              </span>
-                  ) }
+                <span className="custom-control custom-checkbox">
+                  <input
+                    type="checkbox"
+                    className="custom-control-input"
+                    id="comment-form-is-markdown"
+                    name="isMarkdown"
+                    checked={this.state.isMarkdown}
+                    value="1"
+                    onChange={this.updateStateCheckbox}
+                  />
+                  <label
+                    className="ml-2 custom-control-label"
+                    htmlFor="comment-form-is-markdown"
+                  >
+                    Markdown
+                  </label>
+                </span>
+              ) }
             </label>
             <span className="flex-grow-1" />
             <span className="d-none d-sm-inline">{ this.state.errorMessage && errorMessage }</span>
 
             { this.state.hasSlackConfig
               && (
-              <div className="form-inline align-self-center mr-md-2">
-                <SlackNotification
-                  isSlackEnabled={commentContainer.state.isSlackEnabled}
-                  slackChannels={commentContainer.state.slackChannels}
-                  onEnabledFlagChange={this.onSlackEnabledFlagChange}
-                  onChannelChange={this.onSlackChannelsChange}
-                  id="idForComment"
-                />
-              </div>
+                <div className="form-inline align-self-center mr-md-2">
+                  <SlackNotification
+                    isSlackEnabled={commentContainer.state.isSlackEnabled}
+                    slackChannels={commentContainer.state.slackChannels}
+                    onEnabledFlagChange={this.onSlackEnabledFlagChange}
+                    onChannelChange={this.onSlackChannelsChange}
+                    id="idForComment"
+                  />
+                </div>
               )
             }
             <div className="d-none d-sm-block">

packages/app/src/components/PageComment/CommentPreview.jsx

@@ -13,9 +13,9 @@ export default class CommentPreview extends React.Component {
       <div
         className="page-comment-preview-body"
         ref={(elm) => {
-            this.previewElement = elm;
-            this.props.inputRef(elm);
-          }}
+          this.previewElement = elm;
+          this.props.inputRef(elm);
+        }}
       >
 
         <RevisionBody

packages/app/src/components/PageComments.jsx

@@ -155,11 +155,11 @@ class PageComments extends React.Component {
           growiRenderer={this.growiRenderer}
         />
         {replies.length !== 0 && (
-        <ReplayComments
-          replyList={replies}
-          deleteBtnClicked={this.confirmToDeleteComment}
-          growiRenderer={this.growiRenderer}
-        />
+          <ReplayComments
+            replyList={replies}
+            deleteBtnClicked={this.confirmToDeleteComment}
+            growiRenderer={this.growiRenderer}
+          />
         )}
         { !showEditor && isLoggedIn && (
           <div className="text-right">

packages/app/src/components/PageDeleteModal.jsx

@@ -99,9 +99,9 @@ const PageDeleteModal = (props) => {
         </label>
         {!isAbleToDeleteCompletely
         && (
-        <p className="alert alert-warning p-2 my-0">
-          <i className="icon-ban icon-fw"></i>{ t('modal_delete.delete_completely_restriction') }
-        </p>
+          <p className="alert alert-warning p-2 my-0">
+            <i className="icon-ban icon-fw"></i>{ t('modal_delete.delete_completely_restriction') }
+          </p>
         )}
       </div>
     );

packages/app/src/components/PageDuplicateModal.jsx

@@ -136,23 +136,23 @@ const PageDuplicateModal = (props) => {
             </div>
             <div className="flex-fill">
               {isReachable
-              ? (
-                <PagePathAutoComplete
-                  initializedPath={path}
-                  onSubmit={ppacSubmitHandler}
-                  onInputChange={ppacInputChangeHandler}
-                  autoFocus
-                />
-              )
-              : (
-                <input
-                  type="text"
-                  value={pageNameInput}
-                  className="form-control"
-                  onChange={e => inputChangeHandler(e.target.value)}
-                  required
-                />
-              )}
+                ? (
+                  <PagePathAutoComplete
+                    initializedPath={path}
+                    onSubmit={ppacSubmitHandler}
+                    onInputChange={ppacInputChangeHandler}
+                    autoFocus
+                  />
+                )
+                : (
+                  <input
+                    type="text"
+                    value={pageNameInput}
+                    className="form-control"
+                    onChange={e => inputChangeHandler(e.target.value)}
+                    required
+                  />
+                )}
             </div>
           </div>
         </div>
@@ -172,19 +172,19 @@ const PageDuplicateModal = (props) => {
 
           <div>
             {isDuplicateRecursively && existingPaths.length !== 0 && (
-            <div className="custom-control custom-checkbox custom-checkbox-warning">
-              <input
-                className="custom-control-input"
-                name="withoutExistRecursively"
-                id="cbDuplicatewithoutExistRecursively"
-                type="checkbox"
-                checked={isDuplicateRecursivelyWithoutExistPath}
-                onChange={changeIsDuplicateRecursivelyWithoutExistPathHandler}
-              />
-              <label className="custom-control-label" htmlFor="cbDuplicatewithoutExistRecursively">
-                { t('modal_duplicate.label.Duplicate without exist path') }
-              </label>
-            </div>
+              <div className="custom-control custom-checkbox custom-checkbox-warning">
+                <input
+                  className="custom-control-input"
+                  name="withoutExistRecursively"
+                  id="cbDuplicatewithoutExistRecursively"
+                  type="checkbox"
+                  checked={isDuplicateRecursivelyWithoutExistPath}
+                  onChange={changeIsDuplicateRecursivelyWithoutExistPathHandler}
+                />
+                <label className="custom-control-label" htmlFor="cbDuplicatewithoutExistRecursively">
+                  { t('modal_duplicate.label.Duplicate without exist path') }
+                </label>
+              </div>
             )}
           </div>
           <div>

packages/app/src/components/PageEditor/Editor.jsx

@@ -221,10 +221,10 @@ export default class Editor extends AbstractEditor {
       <div className="overlay overlay-dropzone-active">
         {this.state.isUploading
           && (
-          <span className="overlay-content">
-            <div className="speeding-wheel d-inline-block"></div>
-            <span className="sr-only">Uploading...</span>
-          </span>
+            <span className="overlay-content">
+              <div className="speeding-wheel d-inline-block"></div>
+              <span className="sr-only">Uploading...</span>
+            </span>
           )
         }
         {!this.state.isUploading && <span className="overlay-content"></span>}
@@ -338,20 +338,20 @@ export default class Editor extends AbstractEditor {
 
         { this.props.isUploadable
           && (
-          <button
-            type="button"
-            className="btn btn-outline-secondary btn-block btn-open-dropzone"
-            onClick={() => { this.dropzone.open() }}
-          >
-            <i className="icon-paper-clip" aria-hidden="true"></i>&nbsp;
-            Attach files
-            <span className="d-none d-sm-inline">
+            <button
+              type="button"
+              className="btn btn-outline-secondary btn-block btn-open-dropzone"
+              onClick={() => { this.dropzone.open() }}
+            >
+              <i className="icon-paper-clip" aria-hidden="true"></i>&nbsp;
+              Attach files
+              <span className="d-none d-sm-inline">
               &nbsp;by dragging &amp; dropping,&nbsp;
-              <span className="btn-link">selecting them</span>,&nbsp;
-              or pasting from the clipboard.
-            </span>
+                <span className="btn-link">selecting them</span>,&nbsp;
+                or pasting from the clipboard.
+              </span>
 
-          </button>
+            </button>
           )
         }
 

packages/app/src/components/PageEditor/EditorNavbarBottom.jsx

@@ -74,7 +74,7 @@ const EditorNavbarBottom = (props) => {
             />
           </nav>
         </Collapse>
-        )
+      )
       }
       <div className={`navbar navbar-expand border-top px-2 px-md-3 ${additionalClasses.join(' ')}`}>
         <form className="form-inline">

packages/app/src/components/PageEditor/Preview.jsx

@@ -81,16 +81,16 @@ class Preview extends React.PureComponent {
           <div
             className="page-editor-preview-body"
             ref={(elm) => {
-                this.previewElement = elm;
-                if (this.props.inputRef != null) {
-                  this.props.inputRef(elm);
-                }
-              }}
+              this.previewElement = elm;
+              if (this.props.inputRef != null) {
+                this.props.inputRef(elm);
+              }
+            }}
             onScroll={(event) => {
-                if (this.props.onScroll != null) {
-                  this.props.onScroll(event.target.scrollTop);
-                }
-              }}
+              if (this.props.onScroll != null) {
+                this.props.onScroll(event.target.scrollTop);
+              }
+            }}
           >
             <RevisionBody
               {...this.props}

packages/app/src/components/PageHistory/PageRevisionTable.jsx

@@ -65,7 +65,7 @@ class PageRevisionTable extends React.Component {
                   </button>
                 </div>
               </div>
-           )}
+            )}
           </div>
         </td>
         <td className="col-1">

packages/app/src/components/PageRenameModal.jsx

@@ -175,22 +175,22 @@ const PageRenameModal = (props) => {
             <p className="form-text text-muted mt-0">{ t('modal_rename.help.recursive') }</p>
           </label>
           {existingPaths.length !== 0 && (
-          <div
-            className="custom-control custom-checkbox custom-checkbox-warning"
-            style={{ display: isRenameRecursively ? '' : 'none' }}
-          >
-            <input
-              className="custom-control-input"
-              name="withoutExistRecursively"
-              id="cbRenamewithoutExistRecursively"
-              type="checkbox"
-              checked={isRenameRecursivelyWithoutExistPath}
-              onChange={changeIsRenameRecursivelyWithoutExistPathHandler}
-            />
-            <label className="custom-control-label" htmlFor="cbRenamewithoutExistRecursively">
-              { t('modal_rename.label.Rename without exist path') }
-            </label>
-          </div>
+            <div
+              className="custom-control custom-checkbox custom-checkbox-warning"
+              style={{ display: isRenameRecursively ? '' : 'none' }}
+            >
+              <input
+                className="custom-control-input"
+                name="withoutExistRecursively"
+                id="cbRenamewithoutExistRecursively"
+                type="checkbox"
+                checked={isRenameRecursivelyWithoutExistPath}
+                onChange={changeIsRenameRecursivelyWithoutExistPathHandler}
+              />
+              <label className="custom-control-label" htmlFor="cbRenamewithoutExistRecursively">
+                { t('modal_rename.label.Rename without exist path') }
+              </label>
+            </div>
           )}
           {isRenameRecursively && <ComparePathsTable subordinatedPages={subordinatedPages} newPagePath={pageNameInput} />}
           {isRenameRecursively && existingPaths.length !== 0 && <DuplicatedPathsTable existingPaths={existingPaths} oldPagePath={pageNameInput} />}

packages/app/src/components/SavePageControls.jsx

@@ -76,15 +76,15 @@ class SavePageControls extends React.Component {
 
         {this.isAclEnabled
           && (
-          <div className="mr-2">
-            <GrantSelector
-              disabled={isRootPage}
-              grant={editorContainer.state.grant}
-              grantGroupId={editorContainer.state.grantGroupId}
-              grantGroupName={editorContainer.state.grantGroupName}
-              onUpdateGrant={this.updateGrantHandler}
-            />
-          </div>
+            <div className="mr-2">
+              <GrantSelector
+                disabled={isRootPage}
+                grant={editorContainer.state.grant}
+                grantGroupId={editorContainer.state.grantGroupId}
+                grantGroupName={editorContainer.state.grantGroupName}
+                onUpdateGrant={this.updateGrantHandler}
+              />
+            </div>
           )
         }