auto fix

apps/app/src/components/Admin/App/FileUploadSetting.tsx

@@ -70,34 +70,38 @@ export const FileUploadSettingMolecule = React.memo((props: FileUploadSettingMol
         )}
       </div>
 
-      {props.fileUploadType === 'aws' && <AwsSettingMolecule
-        s3ReferenceFileWithRelayMode={props.s3ReferenceFileWithRelayMode}
-        s3Region={props.s3Region}
-        s3CustomEndpoint={props.s3CustomEndpoint}
-        s3Bucket={props.s3Bucket}
-        s3AccessKeyId={props.s3AccessKeyId}
-        s3SecretAccessKey={props.s3SecretAccessKey}
-        onChangeS3ReferenceFileWithRelayMode={props.onChangeS3ReferenceFileWithRelayMode}
-        onChangeS3Region={props.onChangeS3Region}
-        onChangeS3CustomEndpoint={props.onChangeS3CustomEndpoint}
-        onChangeS3Bucket={props.onChangeS3Bucket}
-        onChangeS3AccessKeyId={props.onChangeS3AccessKeyId}
-        onChangeS3SecretAccessKey={props.onChangeS3SecretAccessKey}
-      />}
-      {props.fileUploadType === 'gcs' && <GcsSettingMolecule
-        gcsReferenceFileWithRelayMode={props.gcsReferenceFileWithRelayMode}
-        gcsUseOnlyEnvVars={props.gcsUseOnlyEnvVars}
-        gcsApiKeyJsonPath={props.gcsApiKeyJsonPath}
-        gcsBucket={props.gcsBucket}
-        gcsUploadNamespace={props.gcsUploadNamespace}
-        envGcsApiKeyJsonPath={props.envGcsApiKeyJsonPath}
-        envGcsBucket={props.envGcsBucket}
-        envGcsUploadNamespace={props.envGcsUploadNamespace}
-        onChangeGcsReferenceFileWithRelayMode={props.onChangeGcsReferenceFileWithRelayMode}
-        onChangeGcsApiKeyJsonPath={props.onChangeGcsApiKeyJsonPath}
-        onChangeGcsBucket={props.onChangeGcsBucket}
-        onChangeGcsUploadNamespace={props.onChangeGcsUploadNamespace}
-      />}
+      {props.fileUploadType === 'aws' && (
+        <AwsSettingMolecule
+          s3ReferenceFileWithRelayMode={props.s3ReferenceFileWithRelayMode}
+          s3Region={props.s3Region}
+          s3CustomEndpoint={props.s3CustomEndpoint}
+          s3Bucket={props.s3Bucket}
+          s3AccessKeyId={props.s3AccessKeyId}
+          s3SecretAccessKey={props.s3SecretAccessKey}
+          onChangeS3ReferenceFileWithRelayMode={props.onChangeS3ReferenceFileWithRelayMode}
+          onChangeS3Region={props.onChangeS3Region}
+          onChangeS3CustomEndpoint={props.onChangeS3CustomEndpoint}
+          onChangeS3Bucket={props.onChangeS3Bucket}
+          onChangeS3AccessKeyId={props.onChangeS3AccessKeyId}
+          onChangeS3SecretAccessKey={props.onChangeS3SecretAccessKey}
+        />
+      )}
+      {props.fileUploadType === 'gcs' && (
+        <GcsSettingMolecule
+          gcsReferenceFileWithRelayMode={props.gcsReferenceFileWithRelayMode}
+          gcsUseOnlyEnvVars={props.gcsUseOnlyEnvVars}
+          gcsApiKeyJsonPath={props.gcsApiKeyJsonPath}
+          gcsBucket={props.gcsBucket}
+          gcsUploadNamespace={props.gcsUploadNamespace}
+          envGcsApiKeyJsonPath={props.envGcsApiKeyJsonPath}
+          envGcsBucket={props.envGcsBucket}
+          envGcsUploadNamespace={props.envGcsUploadNamespace}
+          onChangeGcsReferenceFileWithRelayMode={props.onChangeGcsReferenceFileWithRelayMode}
+          onChangeGcsApiKeyJsonPath={props.onChangeGcsApiKeyJsonPath}
+          onChangeGcsBucket={props.onChangeGcsBucket}
+          onChangeGcsUploadNamespace={props.onChangeGcsUploadNamespace}
+        />
+      )}
     </>
   );
 });

apps/app/src/components/Admin/App/QuestionnaireSettings.tsx

@@ -63,9 +63,11 @@ const QuestionnaireSettings = (): JSX.Element => {
         </span>
       </p>
 
-      {isLoading && <div className="text-muted text-center mb-5">
-        <i className="fa fa-2x fa-spinner fa-pulse mr-1" />
-      </div>}
+      {isLoading && (
+        <div className="text-muted text-center mb-5">
+          <i className="fa fa-2x fa-spinner fa-pulse mr-1" />
+        </div>
+      )}
 
       {!isLoading && (
         <>
@@ -103,7 +105,7 @@ const QuestionnaireSettings = (): JSX.Element => {
             </div>
           </div>
 
-          <AdminUpdateButtonRow onClick={onSubmitHandler}/>
+          <AdminUpdateButtonRow onClick={onSubmitHandler} />
         </>
       )}
     </div>

apps/app/src/components/Admin/Common/AdminNavigation.tsx

@@ -86,22 +86,22 @@ export const AdminNavigation = (): JSX.Element => {
     return (
       <>
         {/* eslint-disable no-multi-spaces */}
-        <MenuLink menu="home"                       isListGroupItems={isListGroupItems} isActive={pathname === '/admin'} isRoot />
-        <MenuLink menu="app"                        isListGroupItems={isListGroupItems} isActive={isActiveMenu('/app')} />
-        <MenuLink menu="security"                   isListGroupItems={isListGroupItems} isActive={isActiveMenu('/security')} />
-        <MenuLink menu="markdown"                   isListGroupItems={isListGroupItems} isActive={isActiveMenu('/markdown')} />
-        <MenuLink menu="customize"                  isListGroupItems={isListGroupItems} isActive={isActiveMenu('/customize')} />
-        <MenuLink menu="importer"                   isListGroupItems={isListGroupItems} isActive={isActiveMenu('/importer')} />
-        <MenuLink menu="export"                     isListGroupItems={isListGroupItems} isActive={isActiveMenu('/export')} />
-        <MenuLink menu="data-transfer"              isListGroupItems={isListGroupItems} isActive={isActiveMenu('/data-transfer')} />
-        <MenuLink menu="notification"               isListGroupItems={isListGroupItems} isActive={isActiveMenu(['/notification', '/global-notification'])} />
-        <MenuLink menu="slack-integration"          isListGroupItems={isListGroupItems} isActive={isActiveMenu('/slack-integration')} />
-        <MenuLink menu="slack-integration-legacy"   isListGroupItems={isListGroupItems} isActive={isActiveMenu('/slack-integration-legacy')} />
-        <MenuLink menu="users"                      isListGroupItems={isListGroupItems} isActive={isActiveMenu('/users')} />
-        <MenuLink menu="user-groups"                isListGroupItems={isListGroupItems} isActive={isActiveMenu(['/user-groups', 'user-group-detail'])} />
-        <MenuLink menu="audit-log"                  isListGroupItems={isListGroupItems} isActive={isActiveMenu('/audit-log')} />
-        <MenuLink menu="plugins"                    isListGroupItems={isListGroupItems} isActive={isActiveMenu('/plugins')} />
-        <MenuLink menu="search"                     isListGroupItems={isListGroupItems} isActive={isActiveMenu('/search')} />
+        <MenuLink menu="home" isListGroupItems={isListGroupItems} isActive={pathname === '/admin'} isRoot />
+        <MenuLink menu="app" isListGroupItems={isListGroupItems} isActive={isActiveMenu('/app')} />
+        <MenuLink menu="security" isListGroupItems={isListGroupItems} isActive={isActiveMenu('/security')} />
+        <MenuLink menu="markdown" isListGroupItems={isListGroupItems} isActive={isActiveMenu('/markdown')} />
+        <MenuLink menu="customize" isListGroupItems={isListGroupItems} isActive={isActiveMenu('/customize')} />
+        <MenuLink menu="importer" isListGroupItems={isListGroupItems} isActive={isActiveMenu('/importer')} />
+        <MenuLink menu="export" isListGroupItems={isListGroupItems} isActive={isActiveMenu('/export')} />
+        <MenuLink menu="data-transfer" isListGroupItems={isListGroupItems} isActive={isActiveMenu('/data-transfer')} />
+        <MenuLink menu="notification" isListGroupItems={isListGroupItems} isActive={isActiveMenu(['/notification', '/global-notification'])} />
+        <MenuLink menu="slack-integration" isListGroupItems={isListGroupItems} isActive={isActiveMenu('/slack-integration')} />
+        <MenuLink menu="slack-integration-legacy" isListGroupItems={isListGroupItems} isActive={isActiveMenu('/slack-integration-legacy')} />
+        <MenuLink menu="users" isListGroupItems={isListGroupItems} isActive={isActiveMenu('/users')} />
+        <MenuLink menu="user-groups" isListGroupItems={isListGroupItems} isActive={isActiveMenu(['/user-groups', 'user-group-detail'])} />
+        <MenuLink menu="audit-log" isListGroupItems={isListGroupItems} isActive={isActiveMenu('/audit-log')} />
+        <MenuLink menu="plugins" isListGroupItems={isListGroupItems} isActive={isActiveMenu('/plugins')} />
+        <MenuLink menu="search" isListGroupItems={isListGroupItems} isActive={isActiveMenu('/search')} />
         {growiCloudUri != null && growiAppIdForGrowiCloud != null
           && (
             <a

apps/app/src/components/Admin/Customize/CustomizeLogoSetting.tsx

@@ -129,7 +129,7 @@ const CustomizeLogoSetting = (): JSX.Element => {
                     {isCustomizedLogoUploaded && (
                       <>
                         <p>
-                          <img src='/attachment/brand-logo' className="picture picture-lg " id="settingBrandLogo" width="64" />
+                          <img src="/attachment/brand-logo" className="picture picture-lg " id="settingBrandLogo" width="64" />
                         </p>
                         <button type="button" className="btn btn-danger" onClick={onClickDeleteBtn}>
                           { t('admin:customize_settings.delete_logo') }

apps/app/src/components/Admin/Customize/CustomizeNoscriptSetting.tsx

@@ -61,13 +61,21 @@ const CustomizeNoscriptSetting = (props: Props): JSX.Element => {
             */}
           </div>
 
-          <a className="text-muted"
-            data-toggle="collapse" href="#collapseExampleHtml" role="button" aria-expanded="false" aria-controls="collapseExampleHtml">
+          <a
+            className="text-muted"
+            data-toggle="collapse"
+            href="#collapseExampleHtml"
+            role="button"
+            aria-expanded="false"
+            aria-controls="collapseExampleHtml"
+          >
             <i className="fa fa-fw fa-chevron-right" aria-hidden="true"></i>
             Example for Google Tag Manager
           </a>
           <div className="collapse" id="collapseExampleHtml">
-            <PrismAsyncLight style={oneDark} language={'javascript'}
+            <PrismAsyncLight
+              style={oneDark}
+              language="javascript"
             >
               {`<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
   height="0"

apps/app/src/components/Admin/Customize/CustomizeScriptSetting.tsx

@@ -58,13 +58,21 @@ const CustomizeScriptSetting = (props: Props): JSX.Element => {
             */}
           </div>
 
-          <a className="text-muted"
-            data-toggle="collapse" href="#collapseExampleScript" role="button" aria-expanded="false" aria-controls="collapseExampleScript">
+          <a
+            className="text-muted"
+            data-toggle="collapse"
+            href="#collapseExampleScript"
+            role="button"
+            aria-expanded="false"
+            aria-controls="collapseExampleScript"
+          >
             <i className="fa fa-fw fa-chevron-right" aria-hidden="true"></i>
             Example for Google Tag Manager
           </a>
           <div className="collapse" id="collapseExampleScript">
-            <PrismAsyncLight style={oneDark} language={'javascript'}
+            <PrismAsyncLight
+              style={oneDark}
+              language="javascript"
             >
               {`(function(w,d,s,l,i){
 w[l]=w[l]||[];

apps/app/src/components/Admin/Customize/CustomizeTitle.tsx

@@ -59,9 +59,9 @@ export const CustomizeTitle: FC = () => {
 
         {/* TODO i18n */}
         <div className="form-text text-muted col-12">
-            Default Value: <code>&#123;&#123;pagename&#125;&#125; - &#123;&#123;sitename&#125;&#125;</code>
+          Default Value: <code>&#123;&#123;pagename&#125;&#125; - &#123;&#123;sitename&#125;&#125;</code>
           <br />
-            Default Output Example: <code className="xml">&lt;title&gt;Page name - My GROWI&lt;&#047;title&gt;</code>
+          Default Output Example: <code className="xml">&lt;title&gt;Page name - My GROWI&lt;&#047;title&gt;</code>
         </div>
         <div className="form-group col-12">
           <input

apps/app/src/components/Admin/Customize/ThemeColorBox.tsx

@@ -35,7 +35,7 @@ export const ThemeColorBox = (props: Props): JSX.Element => {
         </svg>
       </a>
       <span className="theme-option-name"><b>{ name }</b></span>
-      { !isPresetTheme && <span className='theme-option-badge badge badge-primary mt-1'>Plugin</span> }
+      { !isPresetTheme && <span className="theme-option-badge badge badge-primary mt-1">Plugin</span> }
     </div>
   );
 

apps/app/src/components/Admin/G2GDataTransfer.tsx

@@ -217,7 +217,7 @@ const G2GDataTransfer = (): JSX.Element => {
             onChangeGcsBucket={onChangeGcsBucketHandler}
             onChangeGcsUploadNamespace={onChangeGcsUploadNamespaceHandler}
           /> */}
-          <h3 className='mb-1'>{t('export_management.export_archive_data')}</h3>
+          <h3 className="mb-1">{t('export_management.export_archive_data')}</h3>
           <G2GDataTransferExportForm
             allCollectionNames={collections}
             selectedCollections={selectedCollections}
@@ -246,12 +246,12 @@ const G2GDataTransfer = (): JSX.Element => {
       </form>
 
       {isTransferring && (
-        <div className='border rounded p-4'>
+        <div className="border rounded p-4">
           <div>
-            <G2GDataTransferStatusIcon className='mr-2 mb-2' status={g2gProgress.mongo} /> MongoDB
+            <G2GDataTransferStatusIcon className="mr-2 mb-2" status={g2gProgress.mongo} /> MongoDB
           </div>
           <div>
-            <G2GDataTransferStatusIcon className='mr-2' status={g2gProgress.attachments} /> Attachments
+            <G2GDataTransferStatusIcon className="mr-2" status={g2gProgress.attachments} /> Attachments
           </div>
         </div>
       )}

apps/app/src/components/Admin/G2GDataTransferExportForm.tsx

@@ -162,7 +162,7 @@ const G2GDataTransferExportForm = (props: Props): JSX.Element => {
     });
 
     // TODO: エラー対応
-    return <GroupImportItems groupList={collectionNames} groupName='Other' errors={[]} />;
+    return <GroupImportItems groupList={collectionNames} groupName="Other" errors={[]} />;
   };
 
   const configurationModal = useMemo(() => {
@@ -224,9 +224,9 @@ const G2GDataTransferExportForm = (props: Props): JSX.Element => {
       </div>
 
       {/* TODO: エラー追加 */}
-      <GroupImportItems groupList={GROUPS_PAGE} groupName='Page' errors={[]} />
-      <GroupImportItems groupList={GROUPS_USER} groupName='User' errors={[]} />
-      <GroupImportItems groupList={GROUPS_CONFIG} groupName='Config' errors={[]} />
+      <GroupImportItems groupList={GROUPS_PAGE} groupName="Page" errors={[]} />
+      <GroupImportItems groupList={GROUPS_USER} groupName="User" errors={[]} />
+      <GroupImportItems groupList={GROUPS_CONFIG} groupName="Config" errors={[]} />
       <OtherImportItems />
 
       {configurationModal}

apps/app/src/components/Admin/ManageExternalAccount.tsx

@@ -46,32 +46,34 @@ const ManageExternalAccount = (props: ManageExternalAccountProps): JSX.Element =
     />
   );
 
-  return <>
-    <p>
-      <Link
-        href="/admin/users"
-        prefetch={false}
-        className="btn btn-outline-secondary"
-      >
-        <i className="icon-fw ti ti-arrow-left" aria-hidden="true"></i>
-        {t('admin:user_management.back_to_user_management')}
-      </Link>
-    </p>
-    <h2>{t('admin:user_management.external_account_list')}</h2>
-    {(totalAccounts !== 0) ? (
-      <>
-        {pager}
-        <ExternalAccountTable />
-        {pager}
-      </>
-    )
-      : (
+  return (
+    <>
+      <p>
+        <Link
+          href="/admin/users"
+          prefetch={false}
+          className="btn btn-outline-secondary"
+        >
+          <i className="icon-fw ti ti-arrow-left" aria-hidden="true"></i>
+          {t('admin:user_management.back_to_user_management')}
+        </Link>
+      </p>
+      <h2>{t('admin:user_management.external_account_list')}</h2>
+      {(totalAccounts !== 0) ? (
         <>
-          { t('admin:user_management.external_account_none') }
+          {pager}
+          <ExternalAccountTable />
+          {pager}
         </>
       )
-    }
-  </>;
+        : (
+          <>
+            { t('admin:user_management.external_account_none') }
+          </>
+        )
+      }
+    </>
+  );
 };
 
 const ManageExternalAccountWrapper = withUnstatedContainers(ManageExternalAccount, [AdminExternalAccountsContainer]);

apps/app/src/components/Admin/Notification/GlobalNotification.jsx

@@ -47,7 +47,8 @@ const GlobalNotification = (props) => {
               className="custom-control-input"
               type="checkbox"
               checked={adminNotificationContainer.state.isNotificationForOwnerPageEnabled || false}
-              onChange={() => { adminNotificationContainer.switchIsNotificationForOwnerPageEnabled() } } />
+              onChange={() => { adminNotificationContainer.switchIsNotificationForOwnerPageEnabled() }}
+            />
             <label className="custom-control-label" htmlFor="isNotificationForOwnerPageEnabled">
               {/* eslint-disable-next-line react/no-danger */}
               <span dangerouslySetInnerHTML={{ __html: t('notification_settings.just_me_notification_help') }} />
@@ -55,19 +56,20 @@ const GlobalNotification = (props) => {
           </div>
         </div>
       </div><div className="row mb-4">
-        <div className="col-md-8 offset-md-2">
+            <div className="col-md-8 offset-md-2">
           <div className="custom-control custom-checkbox custom-checkbox-success">
-            <input
+                <input
               id="isNotificationForGroupPageEnabled"
               className="custom-control-input"
               type="checkbox"
               checked={adminNotificationContainer.state.isNotificationForGroupPageEnabled || false}
-              onChange={() => { adminNotificationContainer.switchIsNotificationForGroupPageEnabled() } } />
-            <label className="custom-control-label" htmlFor="isNotificationForGroupPageEnabled">
+              onChange={() => { adminNotificationContainer.switchIsNotificationForGroupPageEnabled() }}
+            />
+                <label className="custom-control-label" htmlFor="isNotificationForGroupPageEnabled">
               {/* eslint-disable-next-line react/no-danger */}
               <span dangerouslySetInnerHTML={{ __html: t('notification_settings.group_notification_help') }} />
             </label>
-          </div>
+              </div>
         </div>
       </div>
       <div className="row my-3">
@@ -82,8 +84,12 @@ const GlobalNotification = (props) => {
         </div>
       </div>
       <h2 className="border-bottom mb-5">{t('notification_settings.notification_list')}
-        <button className="btn btn-outline-secondary pull-right"
-          type="button" onClick={() => router.push('/admin/global-notification/new')}>{t('notification_settings.add_notification')}</button>
+        <button
+          className="btn btn-outline-secondary pull-right"
+          type="button"
+          onClick={() => router.push('/admin/global-notification/new')}
+        >{t('notification_settings.add_notification')}
+        </button>
         {/* <a href="/admin/global-notification/new">
       <p className="btn btn-outline-secondary pull-right">{t('notification_setting.add_notification')}</p>
     </a> */}

apps/app/src/components/Admin/Users/PasswordResetModal.jsx

@@ -47,9 +47,13 @@ class PasswordResetModal extends React.Component {
 
     return (
       <>
-        <button type="submit" className={`btn ${isEmailSent ? 'btn-secondary' : 'btn-primary'}`}
-          onClick={this.onClickSendNewPasswordButton} disabled={!isMailerSetup || isEmailSending || isEmailSent}>
-          {isEmailSending && <i className='fa fa-spinner fa-pulse mx-2' />}
+        <button
+          type="submit"
+          className={`btn ${isEmailSent ? 'btn-secondary' : 'btn-primary'}`}
+          onClick={this.onClickSendNewPasswordButton}
+          disabled={!isMailerSetup || isEmailSending || isEmailSent}
+        >
+          {isEmailSending && <i className="fa fa-spinner fa-pulse mx-2" />}
           {!isEmailSending && (isEmailSent ? t('commons:Done') : t('commons:Send'))}
         </button>
         <button type="submit" className="btn btn-danger" onClick={this.props.onClose}>
@@ -119,7 +123,7 @@ class PasswordResetModal extends React.Component {
               {showPassword ? temporaryPassword : maskedPassword}
             </span>
           </code>
-          <CopyToClipboard text={ temporaryPassword } onCopy={() => this.setState({ showTooltip: true })}>
+          <CopyToClipboard text={temporaryPassword} onCopy={() => this.setState({ showTooltip: true })}>
             <button id="copy-tooltip" type="button" className="btn btn-outline-secondary border-0">
               <i className="fa fa-clone" aria-hidden="true"></i>
             </button>

apps/app/src/components/BookmarkButtons.tsx

@@ -64,12 +64,18 @@ export const BookmarkButtons: FC<Props> = (props: Props) => {
     <div className={`btn-group btn-group-bookmark ${styles['btn-group-bookmark']}`} role="group" aria-label="Bookmark buttons">
 
       <BookmarkFolderMenu
-        isOpen={isBookmarkFolderMenuOpen} pageId={pageId} isBookmarked={isBookmarked ?? false}
+        isOpen={isBookmarkFolderMenuOpen}
+        pageId={pageId}
+        isBookmarked={isBookmarked ?? false}
         onToggle={toggleBookmarkFolderMenuHandler}
         onUnbookmark={unbookmarkHandler}
       >
-        <DropdownToggle id='bookmark-dropdown-btn' color="transparent" className={`shadow-none btn btn-bookmark border-0
-          ${isBookmarked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}>
+        <DropdownToggle
+          id="bookmark-dropdown-btn"
+          color="transparent"
+          className={`shadow-none btn btn-bookmark border-0
+          ${isBookmarked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}
+        >
           <i className={`fa ${isBookmarked ? 'fa-bookmark' : 'fa-bookmark-o'}`}></i>
         </DropdownToggle>
       </BookmarkFolderMenu>

apps/app/src/components/Bookmarks/BookmarkFolderItem.tsx

@@ -174,7 +174,7 @@ export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkF
           bookmarkedPage={bookmark.page}
           level={level + 1}
           parentFolder={bookmarkFolder}
-          canMoveToRoot={true}
+          canMoveToRoot
           onClickDeleteMenuItemHandler={onClickDeleteMenuItemHandler}
           bookmarkFolderTreeMutation={bookmarkFolderTreeMutation}
         />
@@ -222,7 +222,7 @@ export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkF
         isDropable={isDropable}
       >
         <li
-          className={'list-group-item list-group-item-action border-0 py-0 pr-3 d-flex align-items-center'}
+          className="list-group-item list-group-item-action border-0 py-0 pr-3 d-flex align-items-center"
           onClick={loadChildFolder}
           style={{ paddingLeft }}
         >
@@ -239,11 +239,9 @@ export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkF
               </button>
             )}
           </div>
-          {
-            <div>
-              <FolderIcon isOpen={isOpen} />
-            </div>
-          }
+          <div>
+            <FolderIcon isOpen={isOpen} />
+          </div>
           {isRenameAction ? (
             <BookmarkFolderNameInput
               onClickOutside={() => setIsRenameAction(false)}
@@ -252,8 +250,8 @@ export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkF
             />
           ) : (
             <>
-              <div className='grw-foldertree-title-anchor pl-2' >
-                <p className={'text-truncate m-auto '}>{name}</p>
+              <div className="grw-foldertree-title-anchor pl-2">
+                <p className="text-truncate m-auto ">{name}</p>
               </div>
             </>
           )}
@@ -276,7 +274,7 @@ export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkF
               {/* Maximum folder hierarchy of 2 levels */}
               {!(bookmarkFolder.parent != null) && (
                 <button
-                  id='create-bookmark-folder-button'
+                  id="create-bookmark-folder-button"
                   type="button"
                   className="border-0 rounded btn btn-page-item-control p-0 grw-visible-on-hover"
                   onClick={onClickPlusButton}

apps/app/src/components/Bookmarks/BookmarkFolderItemControl.tsx

@@ -48,10 +48,10 @@ export const BookmarkFolderItemControl: React.FC<{
           {t('Rename')}
         </DropdownItem>
 
-        <DropdownItem divider/>
+        <DropdownItem divider />
 
         <DropdownItem
-          className='pt-2 grw-page-control-dropdown-item text-danger'
+          className="pt-2 grw-page-control-dropdown-item text-danger"
           onClick={onClickDelete}
         >
           <i className="icon-fw icon-trash grw-page-control-dropdown-icon"></i>

apps/app/src/components/Bookmarks/BookmarkFolderMenu.tsx

@@ -117,7 +117,7 @@ export const BookmarkFolderMenu = (props: BookmarkFolderMenuProps): JSX.Element
         <DropdownItem
           toggle={false}
           onClick={onUnbookmarkHandler}
-          className={'grw-bookmark-folder-menu-item text-danger'}
+          className="grw-bookmark-folder-menu-item text-danger"
         >
           <i className="fa fa-bookmark"></i>{' '}
           <span className="mx-2">
@@ -160,7 +160,7 @@ export const BookmarkFolderMenu = (props: BookmarkFolderMenuProps): JSX.Element
                 {folder.children?.map(child => (
                   <div key={child._id}>
                     <div
-                      className='dropdown-item grw-bookmark-folder-menu-item list-group-item list-group-item-action border-0 py-0'
+                      className="dropdown-item grw-bookmark-folder-menu-item list-group-item list-group-item-action border-0 py-0"
                       style={{ paddingLeft: '60px' }}
                       tabIndex={0}
                       role="menuitem"
@@ -187,14 +187,14 @@ export const BookmarkFolderMenu = (props: BookmarkFolderMenuProps): JSX.Element
       isOpen={isOpen}
       onToggle={toggleHandler}
       direction={isBookmarkFolderExists ? 'up' : 'down'}
-      className='grw-bookmark-folder-dropdown'
+      className="grw-bookmark-folder-dropdown"
     >
       {children}
       <DropdownMenu
         right
         persist
         positionFixed
-        className='grw-bookmark-folder-menu'
+        className="grw-bookmark-folder-menu"
         modifiers={getCustomModifiers(true)}
       >
         { renderBookmarkMenuItem() }

apps/app/src/components/Bookmarks/BookmarkFolderMenuItem.tsx

@@ -10,7 +10,7 @@ export const BookmarkFolderMenuItem: React.FC<{
   isSelected,
 }) => {
   return (
-    <div className='d-flex justify-content-start grw-bookmark-folder-menu-item-title'>
+    <div className="d-flex justify-content-start grw-bookmark-folder-menu-item-title">
       <input
         type="radio"
         checked={isSelected}
@@ -19,7 +19,7 @@ export const BookmarkFolderMenuItem: React.FC<{
         onChange={e => e.stopPropagation()}
         onClick={e => e.stopPropagation()}
       />
-      <label htmlFor={`bookmark-folder-menu-item-${itemId}`} className='p-2 m-0'>
+      <label htmlFor={`bookmark-folder-menu-item-${itemId}`} className="p-2 m-0">
         {itemName}
       </label>
     </div>

apps/app/src/components/Bookmarks/BookmarkFolderNameInput.tsx

@@ -19,7 +19,7 @@ export const BookmarkFolderNameInput = (props: Props): JSX.Element => {
   return (
     <div className="flex-fill folder-name-input">
       <ClosableTextInput
-        value={ value }
+        value={value}
         placeholder={t('bookmark_folder.input_placeholder')}
         onClickOutside={onClickOutside}
         onPressEnter={onPressEnter}

apps/app/src/components/Bookmarks/BookmarkFolderTree.tsx

@@ -102,7 +102,7 @@ export const BookmarkFolderTree: React.FC<Props> = (props: Props) => {
   // };
 
   return (
-    <div className={`grw-folder-tree-container ${styles['grw-folder-tree-container']}`} >
+    <div className={`grw-folder-tree-container ${styles['grw-folder-tree-container']}`}>
       <ul className={`grw-foldertree ${styles['grw-foldertree']} list-group px-2 py-2`}>
         {bookmarkFolders?.map((bookmarkFolder) => {
           return (

apps/app/src/components/Bookmarks/BookmarkItem.tsx

@@ -164,7 +164,7 @@ export const BookmarkItem = (props: Props): JSX.Element => {
           )
           : <PageListItemS page={bookmarkedPage} pageTitle={pageTitle} isNarrowView />}
 
-        <div className='grw-foldertree-control'>
+        <div className="grw-foldertree-control">
           <PageItemControl
             pageId={bookmarkedPage._id}
             isEnableActions

apps/app/src/components/Bookmarks/DragAndDropWrapper.tsx

@@ -66,7 +66,7 @@ export const DragAndDropWrapper = (props: DragAndDropWrapperProps): JSX.Element
   };
 
   return (
-    <div ref={c => getRef(c)} className={`grw-drag-drop-container ${isOver ? 'grw-accept-drop-item' : ''}` }>
+    <div ref={c => getRef(c)} className={`grw-drag-drop-container ${isOver ? 'grw-accept-drop-item' : ''}`}>
       {children}
     </div>
   );

apps/app/src/components/CompleteUserRegistration.tsx

@@ -14,7 +14,7 @@ export const CompleteUserRegistration: FC = () => {
             <span>{t('login.registration_successful')}</span>
           </p>
           {/* If the transition source is "/login", use <a /> tag since the transition will not occur if next/link is used. */}
-          <a href='/login'>
+          <a href="/login">
             <i className="icon-login mr-1" />{t('Sign in is here')}
           </a>
         </div>

apps/app/src/components/DeleteBookmarkFolderModal.tsx

@@ -48,7 +48,7 @@ const DeleteBookmarkFolderModal: FC = () => {
       <ModalBody>
         <div className="form-group pb-1">
           <label>{ t('bookmark_folder.delete_modal.modal_body_description') }:</label><br />
-          <FolderIcon isOpen={false}/> {deleteBookmarkFolderModalData?.bookmarkFolder?.name}
+          <FolderIcon isOpen={false} /> {deleteBookmarkFolderModalData?.bookmarkFolder?.name}
         </div>
         {t('bookmark_folder.delete_modal.modal_body_alert')}
       </ModalBody>

apps/app/src/components/Icons/CompressIcon.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 
 export const CompressIcon = ():JSX.Element => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg"
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
       width="18"
       height="18"
       viewBox="0 0 45 45"
@@ -11,7 +12,8 @@ export const CompressIcon = ():JSX.Element => {
         fill="currentColor"
         d="M22.45 44v-7.9l-3.85 3.8-2.1-2.1 7.45-7.4 7.35 7.4-2.1
             2.1-3.75-3.8V44ZM8.05 27.5v-3H40v3Zm0-6.05v-3H40v3Zm15.9-5.85-7.4-7.4 2.1-2.1
-            3.75 3.8V2h3v7.9l3.85-3.8 2.1 2.1Z"/>
+            3.75 3.8V2h3v7.9l3.85-3.8 2.1 2.1Z"
+      />
     </svg>
   );
 };

apps/app/src/components/Icons/ExpandIcon.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 
 export const ExpandIcon = (): JSX.Element => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg"
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
       width="18"
       height="18"
       viewBox="0 0 45 45"

apps/app/src/components/Icons/FolderIcon.tsx

@@ -10,12 +10,14 @@ export const FolderIcon = (props: Props): JSX.Element => {
     <>
       {!isOpen ? (
         <svg
-          width ="20"
-          height ="20"
+          width="20"
+          height="20"
           viewBox="0 0 24 24"
         >
-          <path fill="currentColor"
-            d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z" />
+          <path
+            fill="currentColor"
+            d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z"
+          />
         </svg>
       ) : (
         <svg

apps/app/src/components/InvitedForm.tsx

@@ -59,7 +59,7 @@ export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
         { loginErrors != null && loginErrors.length > 0 ? (
           <p className="alert alert-danger">
             { loginErrors.map((err, index) => {
-              return <span key={index}>{ t(err.message) }<br/></span>;
+              return <span key={index}>{ t(err.message) }<br /></span>;
             }) }
           </p>
         ) : (

apps/app/src/components/Layout/AdminLayout.tsx

@@ -28,7 +28,7 @@ const AdminLayout = ({
   return (
     <RawLayout>
       <div className={`admin-page ${styles['admin-page']}`}>
-        <GrowiNavbar isGlobalSearchHidden={true} />
+        <GrowiNavbar isGlobalSearchHidden />
 
         <header className="py-0 container-fluid">
           <h1 className="title px-3">{componentTitle}</h1>

apps/app/src/components/Layout/ShareLinkLayout.tsx

@@ -25,7 +25,7 @@ export const ShareLinkLayout = ({ children }: Props): JSX.Element => {
 
   return (
     <RawLayout className={className}>
-      <GrowiNavbar isGlobalSearchHidden={true} />
+      <GrowiNavbar isGlobalSearchHidden />
 
       <div className="page-wrapper d-flex d-print-block">
         <div className="flex-fill mw-0">

apps/app/src/components/LoginForm.tsx

@@ -157,7 +157,8 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
           return (
             <li key={index} className={index > 0 ? 'mt-1' : ''}>
               {tWithOpt(err.message, err.args)}
-            </li>);
+            </li>
+          );
         })}
       </ul>
     );
@@ -180,13 +181,13 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
       <>
         {/* !! - DO NOT DELETE HIDDEN ELEMENT - !! -- 7.12 ryoji-s */}
         {/* Import font-awesome to prevent MongoStore.js "Unable to find the session to touch" error */}
-        <div className='sr-only'>
+        <div className="sr-only">
           <i className="fa fa-spinner fa-pulse" />
         </div>
         {/* !! - END OF HIDDEN ELEMENT - !! */}
         {isLdapSetupFailed && (
           <div className="alert alert-warning small">
-            <strong><i className="icon-fw icon-info"></i>{t('login.enabled_ldap_has_configuration_problem')}</strong><br/>
+            <strong><i className="icon-fw icon-info"></i>{t('login.enabled_ldap_has_configuration_problem')}</strong><br />
             <span dangerouslySetInnerHTML={{ __html: t('login.set_env_var_for_logs') }}></span>
           </div>
         )}
@@ -200,8 +201,14 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
                 <i className="icon-user"></i>
               </span>
             </div>
-            <input type="text" className="form-control rounded-0" data-testid="tiUsernameForLogin" placeholder="Username or E-mail"
-              onChange={(e) => { setUsernameForLogin(e.target.value) }} name="usernameForLogin" />
+            <input
+              type="text"
+              className="form-control rounded-0"
+              data-testid="tiUsernameForLogin"
+              placeholder="Username or E-mail"
+              onChange={(e) => { setUsernameForLogin(e.target.value) }}
+              name="usernameForLogin"
+            />
             {isLdapStrategySetup && (
               <div className="input-group-append">
                 <small className="input-group-text text-success">
@@ -217,8 +224,14 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
                 <i className="icon-lock"></i>
               </span>
             </div>
-            <input type="password" className="form-control rounded-0" data-testid="tiPasswordForLogin" placeholder="Password"
-              onChange={(e) => { setPasswordForLogin(e.target.value) }} name="passwordForLogin" />
+            <input
+              type="password"
+              className="form-control rounded-0"
+              data-testid="tiPasswordForLogin"
+              placeholder="Password"
+              onChange={(e) => { setPasswordForLogin(e.target.value) }}
+              name="passwordForLogin"
+            />
           </div>
 
           <div className="input-group my-4">
@@ -390,7 +403,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
               {registerErrors.map((err, index) => {
                 return (
                   <span key={index}>
-                    {t(err.message)}<br/>
+                    {t(err.message)}<br />
                   </span>
                 );
               })}
@@ -406,7 +419,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
           )
         }
 
-        <form role="form" onSubmit={e => handleRegisterFormSubmit(e, registerAction) } id="register-form">
+        <form role="form" onSubmit={e => handleRegisterFormSubmit(e, registerAction)} id="register-form">
 
           {!isEmailAuthenticationEnabled && (
             <div>
@@ -437,13 +450,15 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
                   </span>
                 </div>
                 {/* name */}
-                <input type="text"
+                <input
+                  type="text"
                   className="form-control rounded-0"
                   onChange={(e) => { setNameForRegister(e.target.value) }}
                   placeholder={t('Name')}
                   name="name"
                   defaultValue={props.name}
-                  required />
+                  required
+                />
               </div>
             </div>
           )}
@@ -455,7 +470,8 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
               </span>
             </div>
             {/* email */}
-            <input type="email"
+            <input
+              type="email"
               disabled={!isMailerSetup && isEmailAuthenticationEnabled}
               className="form-control rounded-0"
               onChange={(e) => { setEmailForRegister(e.target.value) }}
@@ -490,12 +506,14 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
                   </span>
                 </div>
                 {/* Password */}
-                <input type="password"
+                <input
+                  type="password"
                   className="form-control rounded-0"
                   onChange={(e) => { setPasswordForRegister(e.target.value) }}
                   placeholder={t('Password')}
                   name="password"
-                  required />
+                  required
+                />
               </div>
             </div>
           )}
@@ -525,7 +543,8 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
               id="login"
               className="link-switch"
               style={{ pointerEvents: isLoading ? 'none' : 'auto' }}
-              onClick={switchForm}>
+              onClick={switchForm}
+            >
               <i className="icon-fw icon-login"></i>
               {t('Sign in is here')}
             </a>
@@ -566,7 +585,8 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
                       id="register"
                       className="link-switch"
                       style={{ pointerEvents: isLoading ? 'none' : 'auto' }}
-                      onClick={switchForm}>
+                      onClick={switchForm}
+                    >
                       <i className="ti ti-check-box"></i> {t('Sign up is here')}
                     </a>
                   </div>

apps/app/src/components/Me/AssociateModal.tsx

@@ -61,7 +61,7 @@ const AssociateModal = (props: Props): JSX.Element => {
       </ModalHeader>
       <ModalBody>
         <div>
-          <Nav tabs className='mb-2'>
+          <Nav tabs className="mb-2">
             <NavLink
               className={activeTab === 1 ? 'active' : ''}
               onClick={() => setActiveTab(1)}

apps/app/src/components/Me/OtherSettings.tsx

@@ -44,9 +44,11 @@ const OtherSettings = (): JSX.Element => {
     <>
       <h2 className="border-bottom my-4">{t('questionnaire.settings')}</h2>
 
-      {isLoadingCurrentUser && <div className="text-muted text-center mb-5">
-        <i className="fa fa-2x fa-spinner fa-pulse mr-1" />
-      </div>}
+      {isLoadingCurrentUser && (
+        <div className="text-muted text-center mb-5">
+          <i className="fa fa-2x fa-spinner fa-pulse mr-1" />
+        </div>
+      )}
 
       <div className="form-group row">
         <div className="offset-md-3 col-md-6 text-left">
@@ -68,9 +70,11 @@ const OtherSettings = (): JSX.Element => {
               <p className="form-text text-muted small">
                 {t('questionnaire.personal_settings_explanation')}
               </p>
-              {!growiIsQuestionnaireEnabled && <UncontrolledTooltip placement="bottom" target="grw-questionnaire-settings-toggle-wrapper">
-                {t('questionnaire.disabled_by_admin')}
-              </UncontrolledTooltip> }
+              {!growiIsQuestionnaireEnabled && (
+                <UncontrolledTooltip placement="bottom" target="grw-questionnaire-settings-toggle-wrapper">
+                  {t('questionnaire.disabled_by_admin')}
+                </UncontrolledTooltip>
+              ) }
             </div>
           )}
         </div>
@@ -90,9 +94,11 @@ const OtherSettings = (): JSX.Element => {
               {t('Update')}
             </button>
           </span>
-          {!growiIsQuestionnaireEnabled && <UncontrolledTooltip placement="bottom" target="grw-questionnaire-settings-update-btn-wrapper">
-            {t('questionnaire.disabled_by_admin')}
-          </UncontrolledTooltip>}
+          {!growiIsQuestionnaireEnabled && (
+            <UncontrolledTooltip placement="bottom" target="grw-questionnaire-settings-update-btn-wrapper">
+              {t('questionnaire.disabled_by_admin')}
+            </UncontrolledTooltip>
+          )}
         </div>
       </div>
     </>

apps/app/src/components/Navbar/AuthorInfo.tsx

@@ -39,11 +39,11 @@ export const AuthorInfo = (props: AuthorInfoProps): JSX.Element => {
 
   if (locate === 'footer') {
     try {
-      return <p>{infoLabelForFooter} {format(new Date(date), formatType)} by <UserPicture user={user} size="sm"/> {userLabel}</p>;
+      return <p>{infoLabelForFooter} {format(new Date(date), formatType)} by <UserPicture user={user} size="sm" /> {userLabel}</p>;
     }
     catch (err) {
       if (err instanceof RangeError) {
-        return <p>{nullinfoLabelForFooter} <UserPicture user={user} size="sm"/> {userLabel}</p>;
+        return <p>{nullinfoLabelForFooter} <UserPicture user={user} size="sm" /> {userLabel}</p>;
       }
       return <></>;
     }
@@ -61,7 +61,7 @@ export const AuthorInfo = (props: AuthorInfoProps): JSX.Element => {
   return (
     <div className="d-flex align-items-center">
       <div className="mr-2">
-        <UserPicture user={user} size="sm"/>
+        <UserPicture user={user} size="sm" />
       </div>
       <div>
         <div>{infoLabelForSubNav} {userLabel}</div>

apps/app/src/components/Navbar/GrowiContextualSubNavigation.tsx

@@ -339,11 +339,14 @@ const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps):
         return (
           <>
             {!isReadOnlyUser
-              && <CreateTemplateMenuItems
-                onClickTemplateMenuItem={templateMenuItemClickHandler}
-              />
+              && (
+                <CreateTemplateMenuItems
+                  onClickTemplateMenuItem={templateMenuItemClickHandler}
+                />
+              )
             }
-          </>);
+          </>
+        );
       }
       return (
         <>
@@ -352,11 +355,14 @@ const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps):
             revisionId={revisionId}
             isLinkSharingDisabled={isLinkSharingDisabled}
           />
-          {!isReadOnlyUser && <>
-            <DropdownItem divider />
-            <CreateTemplateMenuItems
-              onClickTemplateMenuItem={templateMenuItemClickHandler}
-            /></>
+          {!isReadOnlyUser && (
+            <>
+              <DropdownItem divider />
+              <CreateTemplateMenuItems
+                onClickTemplateMenuItem={templateMenuItemClickHandler}
+              />
+            </>
+          )
           }
         </>
       );

apps/app/src/components/Navbar/GrowiNavbar.tsx

@@ -49,18 +49,20 @@ const NavbarRight = memo((): JSX.Element => {
         </li>
 
         {!isReadOnlyUser
-          && <li className="nav-item d-none d-md-block">
-            <button
-              className="px-md-3 nav-link btn-create-page border-0 bg-transparent"
-              type="button"
-              ref={newButtonRef}
-              data-testid="newPageBtn"
-              onClick={() => openCreateModal(currentPagePath || '')}
-            >
-              <i className="icon-pencil mr-2"></i>
-              <span className="d-none d-lg-block">{ t('commons:New') }</span>
-            </button>
-          </li>
+          && (
+            <li className="nav-item d-none d-md-block">
+              <button
+                className="px-md-3 nav-link btn-create-page border-0 bg-transparent"
+                type="button"
+                ref={newButtonRef}
+                data-testid="newPageBtn"
+                onClick={() => openCreateModal(currentPagePath || '')}
+              >
+                <i className="icon-pencil mr-2"></i>
+                <span className="d-none d-lg-block">{ t('commons:New') }</span>
+              </button>
+            </li>
+          )
         }
 
         <li className="grw-apperance-mode-dropdown nav-item dropdown">
@@ -131,7 +133,7 @@ const GrowiNavbarLogo: FC<NavbarLogoProps> = memo((props: NavbarLogoProps) => {
   return isDefaultLogo
     ? <GrowiLogo />
     // eslint-disable-next-line @next/next/no-img-element
-    : (<img src='/attachment/brand-logo' alt="custom logo" className="picture picture-lg p-2 mx-2" id="settingBrandLogo" width="32" />);
+    : (<img src="/attachment/brand-logo" alt="custom logo" className="picture picture-lg p-2 mx-2" id="settingBrandLogo" width="32" />);
 });
 
 GrowiNavbarLogo.displayName = 'GrowiNavbarLogo';

apps/app/src/components/Navbar/GrowiSubNavigationSwitcher.tsx

@@ -83,7 +83,7 @@ export const GrowiSubNavigationSwitcher = (props: GrowiSubNavigationSwitcherProp
   }
 
   return (
-    <div className={`${styles['grw-subnav-switcher']} ${isSticky ? '' : 'grw-subnav-switcher-hidden'}`} data-testid="grw-subnav-switcher" >
+    <div className={`${styles['grw-subnav-switcher']} ${isSticky ? '' : 'grw-subnav-switcher-hidden'}`} data-testid="grw-subnav-switcher">
       <div
         id="grw-subnav-fixed-container"
         className={`grw-subnav-fixed-container ${styles['grw-subnav-fixed-container']} position-fixed grw-subnav-append-shadow-container`}

apps/app/src/components/Navbar/PersonalDropdown.jsx

@@ -24,9 +24,11 @@ const PersonalDropdown = () => {
   useRipple(buttonRef, { rippleColor: 'rgba(255, 255, 255, 0.3)' });
 
   if (currentUser == null) {
-    return <div className="text-muted text-center mb-5">
-      <i className="fa fa-2x fa-spinner fa-pulse mr-1" />
-    </div>;
+    return (
+      <div className="text-muted text-center mb-5">
+        <i className="fa fa-2x fa-spinner fa-pulse mr-1" />
+      </div>
+    );
   }
 
   const logoutHandler = async() => {
@@ -87,7 +89,8 @@ const PersonalDropdown = () => {
           data-testid="grw-proactive-questionnaire-modal-toggle-btn"
           type="button"
           className="dropdown-item"
-          onClick={() => setQuestionnaireModalOpen(true)}>
+          onClick={() => setQuestionnaireModalOpen(true)}
+        >
           <i className="icon-fw icon-pencil"></i>{t('personal_dropdown.feedback')}
         </button>
 

apps/app/src/components/NotFoundPage.tsx

@@ -21,7 +21,7 @@ const NotFoundPage = (props: NotFoundPageProps): JSX.Element => {
     return {
       pagelist: {
         Icon: PageListIcon,
-        Content: () => <DescendantsPageList path={path}/>,
+        Content: () => <DescendantsPageList path={path} />,
         i18n: t('page_list'),
       },
       timeLine: {

apps/app/src/components/Page/RenderTagLabels.tsx

@@ -41,7 +41,7 @@ const RenderTagLabels = React.memo((props: RenderTagLabelsProps) => {
               onClick={openEditorHandler}
             >
               { isTagsEmpty && <>{ t('Add tags for this page') }</>}
-              <i className={`icon-plus ${isTagsEmpty && 'ml-1'}`}/>
+              <i className={`icon-plus ${isTagsEmpty && 'ml-1'}`} />
             </a>
           </div>
         </NotAvailableForReadOnlyUser>

apps/app/src/components/Page/RevisionRenderer.tsx

@@ -21,7 +21,7 @@ const ErrorFallback: React.FC<FallbackProps> = React.memo(({ error, resetErrorBo
     <div role="alert">
       <p>Something went wrong:</p>
       <pre>{error.message}</pre>
-      <button className='btn btn-primary' onClick={resetErrorBoundary}>Reload</button>
+      <button className="btn btn-primary" onClick={resetErrorBoundary}>Reload</button>
     </div>
   );
 });

apps/app/src/components/Page/TagLabels.tsx

@@ -37,7 +37,7 @@ export const TagLabels:FC<Props> = (props: Props) => {
   return (
     <>
       <div className={`${styles['grw-tag-labels']} grw-tag-labels d-flex align-items-center`} data-testid="grw-tag-labels">
-        <i className="tag-icon icon-tag mr-2"/>
+        <i className="tag-icon icon-tag mr-2" />
         <RenderTagLabels
           tags={tags}
           openEditorModal={openEditorModal}

apps/app/src/components/PageAccessoriesModal/ShareLink/ShareLinkList.tsx

@@ -50,7 +50,7 @@ const ShareLinkTr = (props: ShareLinkTrProps): JSX.Element => {
         {shareLink.description}
       </td>
       <td style={{ verticalAlign: 'middle' }}>
-        {shareLink.expiredAt && <span >{dateFnsFormat(new Date(shareLink.expiredAt), 'yyyy-MM-dd HH:mm')}</span>}
+        {shareLink.expiredAt && <span>{dateFnsFormat(new Date(shareLink.expiredAt), 'yyyy-MM-dd HH:mm')}</span>}
       </td>
       <td style={{ maxWidth: '0', textAlign: 'center' }}>
         <button className="btn btn-outline-warning" type="button" onClick={onDelete}>

apps/app/src/components/PageAlert/PageRedirectedAlert.tsx

@@ -32,9 +32,11 @@ export const PageRedirectedAlert = React.memo((): JSX.Element => {
   }
 
   if (isUnlinked) {
-    return (<div className="alert alert-info d-edit-none py-3 px-4">
-      <strong>{ t('Unlinked') }: </strong> { t('page_page.notice.unlinked') }
-    </div>);
+    return (
+      <div className="alert alert-info d-edit-none py-3 px-4">
+        <strong>{ t('Unlinked') }: </strong> { t('page_page.notice.unlinked') }
+      </div>
+    );
   }
 
   return (

apps/app/src/components/PageCreateModal.jsx

@@ -277,7 +277,7 @@ const PageCreateModal = () => {
 
           <div className="d-sm-flex align-items-center justify-items-between">
 
-            <UncontrolledButtonDropdown id="dd-template-type" className='flex-fill text-center'>
+            <UncontrolledButtonDropdown id="dd-template-type" className="flex-fill text-center">
               <DropdownToggle id="template-type" caret>
                 {template == null && t('template.option_label.select')}
                 {template === 'children' && t('template.children.label')}
@@ -299,7 +299,7 @@ const PageCreateModal = () => {
               <button
                 data-testid="grw-btn-edit-page"
                 type="button"
-                className='grw-btn-create-page btn btn-outline-primary rounded-pill text-nowrap ml-3'
+                className="grw-btn-create-page btn btn-outline-primary rounded-pill text-nowrap ml-3"
                 onClick={createTemplatePage}
                 disabled={template == null}
               >

apps/app/src/components/PageEditor/Cheatsheet.tsx

@@ -38,7 +38,7 @@ export const Cheatsheet = (): JSX.Element => {
         className="code-highlighted"
         PreTag="div"
         style={oneDark}
-        language={'text'}
+        language="text"
       >
         {String(CheetSheetElm).replace(/\n$/, '')}
       </PrismAsyncLight>

apps/app/src/components/PageEditor/ConflictDiffModal.tsx

@@ -338,5 +338,5 @@ export const ConflictDiffModal = (props: ConflictDiffModalProps): JSX.Element =>
     afterResolvedHandler,
   };
 
-  return <ConflictDiffModalCore {...propsForCore}/>;
+  return <ConflictDiffModalCore {...propsForCore} />;
 };

apps/app/src/components/PageEditor/Editor.tsx

@@ -248,7 +248,7 @@ const Editor: ForwardRefRenderFunction<IEditorMethods, EditorPropsType> = (props
     };
 
     return (
-      <Modal isOpen={isCheatsheetModalShown} toggle={hideCheatsheetModal} className={`modal-gfm-cheatsheet ${styles['modal-gfm-cheatsheet']}`} size={'lg'} >
+      <Modal isOpen={isCheatsheetModalShown} toggle={hideCheatsheetModal} className={`modal-gfm-cheatsheet ${styles['modal-gfm-cheatsheet']}`} size="lg">
         <ModalHeader tag="h4" toggle={hideCheatsheetModal} className="bg-primary text-light">
           <i className="icon-fw icon-question" />Markdown help
         </ModalHeader>
@@ -282,7 +282,7 @@ const Editor: ForwardRefRenderFunction<IEditorMethods, EditorPropsType> = (props
 
   return (
     <>
-      <div style={flexContainer} className={`editor-container ${styles['editor-container']}`} >
+      <div style={flexContainer} className={`editor-container ${styles['editor-container']}`}>
         <Dropzone
           ref={dropzoneRef}
           accept={getAcceptableType()}

apps/app/src/components/PageEditor/EditorIcon.jsx

@@ -144,7 +144,7 @@ const EditorIcon = (props) => {
       // TODO: fix
       return (
         <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" className="bi bi-filetype-md" viewBox="-2 -3 28 21">
-          <path fillRule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2H9v-1h3a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5ZM.706 13.189v2.66H0V11.85h.806l1.14 2.596h.026l1.14-2.596h.8v3.999h-.716v-2.66h-.038l-.946 2.159h-.516l-.952-2.16H.706Zm3.919 2.66V11.85h1.459c.406 0 .741.078 1.005.234.263.157.46.383.589.68.13.297.196.655.196 1.075 0 .422-.066.784-.196 1.084-.131.301-.33.53-.595.689-.264.158-.597.237-1 .237H4.626Zm1.353-3.354h-.562v2.707h.562c.186 0 .347-.028.484-.082a.8.8 0 0 0 .334-.252 1.14 1.14 0 0 0 .196-.422c.045-.168.067-.365.067-.592a2.1 2.1 0 0 0-.117-.753.89.89 0 0 0-.354-.454c-.159-.102-.362-.152-.61-.152Z"/>
+          <path fillRule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2H9v-1h3a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5ZM.706 13.189v2.66H0V11.85h.806l1.14 2.596h.026l1.14-2.596h.8v3.999h-.716v-2.66h-.038l-.946 2.159h-.516l-.952-2.16H.706Zm3.919 2.66V11.85h1.459c.406 0 .741.078 1.005.234.263.157.46.383.589.68.13.297.196.655.196 1.075 0 .422-.066.784-.196 1.084-.131.301-.33.53-.595.689-.264.158-.597.237-1 .237H4.626Zm1.353-3.354h-.562v2.707h.562c.186 0 .347-.028.484-.082a.8.8 0 0 0 .334-.252 1.14 1.14 0 0 0 .196-.422c.045-.168.067-.365.067-.592a2.1 2.1 0 0 0-.117-.753.89.89 0 0 0-.354-.454c-.159-.102-.362-.152-.61-.152Z" />
         </svg>
       );
   }

apps/app/src/components/PageEditor/LinkEditModal.tsx

@@ -262,9 +262,11 @@ export const LinkEditModal = (): JSX.Element => {
                 <Popover trigger="focus" placement="right" isOpen={isPreviewOpen} target="preview-btn" toggle={toggleIsPreviewOpen}>
                   <PopoverBody>
                     {markdown != null && pagePath != null && rendererOptions != null
-                    && <div className={`linkedit-preview ${styles['linkedit-preview']}`}>
-                      <Preview markdown={markdown} pagePath={pagePath} rendererOptions={rendererOptions} />
-                    </div>
+                    && (
+                      <div className={`linkedit-preview ${styles['linkedit-preview']}`}>
+                        <Preview markdown={markdown} pagePath={pagePath} rendererOptions={rendererOptions} />
+                      </div>
+                    )
                     }
                   </PopoverBody>
                 </Popover>
@@ -357,7 +359,7 @@ export const LinkEditModal = (): JSX.Element => {
         </div>
       </ModalBody>
       <ModalFooter>
-        { previewError && <span className='text-danger'>{previewError}</span>}
+        { previewError && <span className="text-danger">{previewError}</span>}
         <button type="button" className="btn btn-sm btn-outline-secondary mx-1" onClick={close}>
           {t('Cancel')}
         </button>

apps/app/src/components/PageHistory/PageRevisionTable.tsx

@@ -224,7 +224,8 @@ export const PageRevisionTable = (props: PageRevisionTableProps): JSX.Element =>
           currentPageId={currentPageId}
           currentPagePath={currentPagePath}
           onClose={onClose}
-        />)
+        />
+      )
       }
     </>
   );

apps/app/src/components/PageHistory/Revision.tsx

@@ -36,7 +36,8 @@ export const Revision = (props: RevisionProps): JSX.Element => {
 
     return (
       <div className={`${styles['revision-history-main']} ${styles['revision-history-main-nodiff']}
-        revision-history-main revision-history-main-nodiff my-1 d-flex align-items-center`}>
+        revision-history-main revision-history-main-nodiff my-1 d-flex align-items-center`}
+      >
         <div className="picture-container">
           { pic }
         </div>

apps/app/src/components/PageHistory/RevisionDiff.tsx

@@ -49,7 +49,7 @@ export const RevisionDiff = (props: RevisioinDiffProps): JSX.Element => {
 
   return (
     <div className={`${styles['revision-diff-container']}`}>
-      <div className='comparison-header'>
+      <div className="comparison-header">
         <div className="container pt-1 pr-0">
           <div className="row">
             <div className="col comparison-source-wrapper pt-1 px-0">

apps/app/src/components/PageList/PageListItemL.tsx

@@ -229,7 +229,8 @@ const PageListItemLSubstance: ForwardRefRenderFunction<ISelectable, Props> = (pr
                 <span className="h5 mb-0">
                   {/* Use permanent links to care for pages with the same name (Cannot use page path url) */}
                   <span className="grw-page-path-hierarchical-link text-break">
-                    <Link legacyBehavior
+                    <Link
+                      legacyBehavior
                       href={returnPathForURL(pageData.path, pageData._id)}
                       prefetch={false}
                     >
@@ -256,21 +257,23 @@ const PageListItemLSubstance: ForwardRefRenderFunction<ISelectable, Props> = (pr
 
               {/* doropdown icon includes page control buttons */}
               {hasBrowsingRights
-                && <div className="ml-auto">
-                  <PageItemControl
-                    alignRight
-                    pageId={pageData._id}
-                    pageInfo={isIPageInfoForListing(pageMeta) ? pageMeta : undefined}
-                    isEnableActions={isEnableActions}
-                    isReadOnlyUser={isReadOnlyUser}
-                    forceHideMenuItems={forceHideMenuItems}
-                    onClickBookmarkMenuItem={bookmarkMenuItemClickHandler}
-                    onClickRenameMenuItem={renameMenuItemClickHandler}
-                    onClickDuplicateMenuItem={duplicateMenuItemClickHandler}
-                    onClickDeleteMenuItem={deleteMenuItemClickHandler}
-                    onClickRevertMenuItem={revertMenuItemClickHandler}
-                  />
-                </div>
+                && (
+                  <div className="ml-auto">
+                    <PageItemControl
+                      alignRight
+                      pageId={pageData._id}
+                      pageInfo={isIPageInfoForListing(pageMeta) ? pageMeta : undefined}
+                      isEnableActions={isEnableActions}
+                      isReadOnlyUser={isReadOnlyUser}
+                      forceHideMenuItems={forceHideMenuItems}
+                      onClickBookmarkMenuItem={bookmarkMenuItemClickHandler}
+                      onClickRenameMenuItem={renameMenuItemClickHandler}
+                      onClickDuplicateMenuItem={duplicateMenuItemClickHandler}
+                      onClickDeleteMenuItem={deleteMenuItemClickHandler}
+                      onClickRevertMenuItem={revertMenuItemClickHandler}
+                    />
+                  </div>
+                )
               }
             </div>
             <div className="page-list-snippet py-1">

apps/app/src/components/PagePathHierarchicalLink.tsx

@@ -86,7 +86,7 @@ const PagePathHierarchicalLink = memo((props: PagePathHierarchicalLinkProps): JS
           shouldDangerouslySetInnerHTML
             // eslint-disable-next-line react/no-danger
             ? <a className="page-segment" dangerouslySetInnerHTML={{ __html: linkedPagePathByHtml.pathName }}></a>
-            : <a className="page-segment" >{linkedPagePath.pathName}</a>
+            : <a className="page-segment">{linkedPagePath.pathName}</a>
         }
       </Link>
 

apps/app/src/components/PageSideContents.tsx

@@ -57,7 +57,7 @@ export const PageSideContents = (props: PageSideContentsProps): JSX.Element => {
             {/* Do not display CountBadge if '/trash/*': https://github.com/weseek/growi/pull/7600 */}
             { !isTrash && pageInfo != null
               ? <CountBadge count={(pageInfo as IPageInfoForOperation).descendantCount} offset={1} />
-              : <div className='px-2'></div>}
+              : <div className="px-2"></div>}
           </button>
         )}
       </div>
@@ -65,7 +65,7 @@ export const PageSideContents = (props: PageSideContentsProps): JSX.Element => {
       {/* Comments */}
       {!isTopPagePath && (
         <div className={`mt-2 grw-page-accessories-control ${styles['grw-page-accessories-control']}`}>
-          <Link to={'page-comments'} offset={-120}>
+          <Link to="page-comments" offset={-120}>
             <button
               type="button"
               className="btn btn-block btn-outline-secondary grw-btn-page-accessories rounded-pill d-flex justify-content-between align-items-center"
@@ -75,7 +75,7 @@ export const PageSideContents = (props: PageSideContentsProps): JSX.Element => {
               <span>Comments</span>
               { pageInfo != null
                 ? <CountBadge count={(pageInfo as IPageInfoForOperation).commentCount} />
-                : <div className='px-2'></div>}
+                : <div className="px-2"></div>}
             </button>
           </Link>
         </div>

apps/app/src/components/PageStatusAlert.tsx

@@ -57,15 +57,15 @@ export const PageStatusAlert = (): JSX.Element => {
     return {
       additionalClasses: ['bg-success', 'd-hackmd-none'],
       label:
-        <>
-          <i className="icon-fw icon-people"></i>
-          {t('hackmd.someone_editing')}
-        </>,
+  <>
+    <i className="icon-fw icon-people"></i>
+    {t('hackmd.someone_editing')}
+  </>,
       btn:
-        <a href="#hackmd" key="btnOpenHackmdSomeoneEditing" className="btn btn-outline-white">
-          <i className="fa fa-fw fa-file-text-o mr-1"></i>
-          Open HackMD Editor
-        </a>,
+  <a href="#hackmd" key="btnOpenHackmdSomeoneEditing" className="btn btn-outline-white">
+    <i className="fa fa-fw fa-file-text-o mr-1"></i>
+    Open HackMD Editor
+  </a>,
     };
   }, [t]);
 
@@ -73,15 +73,15 @@ export const PageStatusAlert = (): JSX.Element => {
     return {
       additionalClasses: ['bg-success', 'd-hackmd-none'],
       label:
-        <>
-          <i className="icon-fw icon-pencil"></i>
-          {t('hackmd.this_page_has_draft')}
-        </>,
+  <>
+    <i className="icon-fw icon-pencil"></i>
+    {t('hackmd.this_page_has_draft')}
+  </>,
       btn:
-        <button onClick={() => mutateEditorMode(EditorMode.HackMD)} className="btn btn-outline-white">
-          <i className="fa fa-fw fa-file-text-o mr-1"></i>
-          Open HackMD Editor
-        </button>,
+  <button onClick={() => mutateEditorMode(EditorMode.HackMD)} className="btn btn-outline-white">
+    <i className="fa fa-fw fa-file-text-o mr-1"></i>
+    Open HackMD Editor
+  </button>,
     };
   }, [mutateEditorMode, t]);
 
@@ -97,27 +97,27 @@ export const PageStatusAlert = (): JSX.Element => {
     return {
       additionalClasses: ['bg-warning'],
       label:
-        <>
-          <i className="icon-fw icon-bulb"></i>
-          {label1}
-        </>,
+  <>
+    <i className="icon-fw icon-bulb"></i>
+    {label1}
+  </>,
       btn:
-        <>
-          <button type="button" onClick={() => refreshPage()} className="btn btn-outline-white mr-4">
-            <i className="icon-fw icon-reload mr-1"></i>
-            {t('Load latest')}
-          </button>
-          { isConflict && (
-            <button
-              type="button"
-              onClick={onClickResolveConflict}
-              className="btn btn-outline-white"
-            >
-              <i className="fa fa-fw fa-file-text-o mr-1"></i>
-              {t('modal_resolve_conflict.resolve_conflict')}
-            </button>
-          )}
-        </>,
+  <>
+    <button type="button" onClick={() => refreshPage()} className="btn btn-outline-white mr-4">
+      <i className="icon-fw icon-reload mr-1"></i>
+      {t('Load latest')}
+    </button>
+    { isConflict && (
+      <button
+        type="button"
+        onClick={onClickResolveConflict}
+        className="btn btn-outline-white"
+      >
+        <i className="fa fa-fw fa-file-text-o mr-1"></i>
+        {t('modal_resolve_conflict.resolve_conflict')}
+      </button>
+    )}
+  </>,
     };
   }, [remoteRevisionLastUpdateUser, isConflict, t, onClickResolveConflict, refreshPage]);
 

apps/app/src/components/PasswordResetRequestForm.tsx

@@ -66,7 +66,7 @@ const PasswordResetRequestForm: FC = () => {
           </div>
         </>
       )}
-      <Link href='/login' prefetch={false}>
+      <Link href="/login" prefetch={false}>
         <i className="icon-login mr-1" />{t('forgot_password.return_to_login')}
       </Link>
     </form>

apps/app/src/components/PutbackPageModal.jsx

@@ -116,13 +116,13 @@ const PutBackPageModal = () => {
   return (
     <Modal isOpen={isOpened} toggle={closeModalHandler} data-testid="put-back-page-modal">
       <ModalHeader tag="h4" toggle={closeModalHandler} className="bg-info text-light">
-        <HeaderContent/>
+        <HeaderContent />
       </ModalHeader>
       <ModalBody>
-        <BodyContent/>
+        <BodyContent />
       </ModalBody>
       <ModalFooter>
-        <FooterContent/>
+        <FooterContent />
       </ModalFooter>
     </Modal>
   );

apps/app/src/components/ReactMarkdownComponents/LightBox.tsx

@@ -6,7 +6,7 @@ export const LightBox = (props) => {
   const [toggler, setToggler] = useState(false);
   return (
     <>
-      <img {...props.node.properties} onClick={() => setToggler(!toggler)}/>
+      <img {...props.node.properties} onClick={() => setToggler(!toggler)} />
       <FsLightbox
         toggler={toggler}
         sources={[props.src]}

apps/app/src/components/ReactMarkdownComponents/NextLink.tsx

@@ -61,7 +61,7 @@ export const NextLink = (props: Props): JSX.Element => {
   if (isExternalLink(href, siteUrl)) {
     return (
       <a id={id} href={href} className={className} target="_blank" rel="noopener noreferrer" {...dataAttributes}>
-        {children}&nbsp;<i className='icon-share-alt small'></i>
+        {children}&nbsp;<i className="icon-share-alt small"></i>
       </a>
     );
   }

apps/app/src/components/ReactMarkdownComponents/RichAttachment.tsx

@@ -26,7 +26,7 @@ export const RichAttachment: React.FC<{
   }, [attachment, openDeleteAttachmentModal, remove]);
 
   if (attachment == null) {
-    return <span className='text-muted'>{t('rich_attachment.attachment_not_be_found')}</span>;
+    return <span className="text-muted">{t('rich_attachment.attachment_not_be_found')}</span>;
   }
 
   const {
@@ -46,34 +46,34 @@ export const RichAttachment: React.FC<{
     || createdAt == null
     || fileSize == null
   ) {
-    return <span className='text-muted'>{t('rich_attachment.attachment_not_be_found')}</span>;
+    return <span className="text-muted">{t('rich_attachment.attachment_not_be_found')}</span>;
   }
 
   return (
     <div className={`${styles.attachment} d-inline-block`}>
       <div className="my-2 p-2 card">
         <div className="p-1 card-body d-flex align-items-center">
-          <div className='mr-2 px-0 d-flex align-items-center justify-content-center'>
-            <img src='/images/icons/editor/attachment.svg' className="attachment-icon" alt='attachment icon'/>
+          <div className="mr-2 px-0 d-flex align-items-center justify-content-center">
+            <img src="/images/icons/editor/attachment.svg" className="attachment-icon" alt="attachment icon" />
           </div>
-          <div className='pl-0'>
-            <div className='d-inline-block'>
+          <div className="pl-0">
+            <div className="d-inline-block">
               <a target="_blank" rel="noopener noreferrer" href={filePathProxied}>
                 {attachmentName || originalName}
               </a>
               <a className="ml-2 attachment-download" href={downloadPathProxied}>
-                <i className="icon-cloud-download"/>
+                <i className="icon-cloud-download" />
               </a>
               <a className="ml-2 text-danger attachment-delete" onClick={onClickTrashButtonHandler}>
-                <i className="icon-trash"/>
+                <i className="icon-trash" />
               </a>
             </div>
-            <div className='d-flex align-items-center'>
-              <UserPicture user={creator} size="sm"/>
-              <span className='ml-2 text-muted'>
+            <div className="d-flex align-items-center">
+              <UserPicture user={creator} size="sm" />
+              <span className="ml-2 text-muted">
                 {new Date(createdAt).toLocaleString('en-US')}
               </span>
-              <span className='ml-2 pl-2 border-left text-muted'>{prettyBytes(fileSize)}</span>
+              <span className="ml-2 pl-2 border-left text-muted">{prettyBytes(fileSize)}</span>
             </div>
           </div>
         </div>

apps/app/src/components/SavePageControls.tsx

@@ -92,7 +92,8 @@ export const SavePageControls = (props: SavePageControlsProps): JSX.Element | nu
 
       <UncontrolledButtonDropdown direction="up">
         <Button
-          id="caret" data-testid="save-page-btn"
+          id="caret"
+          data-testid="save-page-btn"
           color="primary"
           className="btn-submit"
           onClick={save}

apps/app/src/components/Script/DrawioViewerScript.tsx

@@ -39,7 +39,8 @@ export const DrawioViewerScript = (): JSX.Element => {
   return (
     <Head>
       <script
-        type="text/javascript" async
+        type="text/javascript"
+        async
         src={(new URL('/js/viewer.min.js', rendererConfig.drawioUri)).toString()}
         onLoad={loadedHandler}
       />

apps/app/src/components/SearchPage/SearchPageBase.tsx

@@ -199,7 +199,7 @@ const SearchPageBaseSubstance: ForwardRefRenderFunction<ISelectableAll & IReturn
                       pages={pages}
                       selectedPageId={selectedPageWithMeta?.data._id}
                       forceHideMenuItems={forceHideMenuItems}
-                      onPageSelected={page => (setSelectedPageWithMeta(page)) }
+                      onPageSelected={page => (setSelectedPageWithMeta(page))}
                       onCheckboxChanged={checkboxChangedHandler}
                     />
                   </div>

apps/app/src/components/ShortcutsModal.tsx

@@ -64,7 +64,7 @@ const ShortcutsModal = (): JSX.Element => {
                     {/* eslint-disable-next-line react/no-danger */}
                     <span dangerouslySetInnerHTML={{ __html: t('modal_shortcuts.global.Show Contributors') }} />:
                   </th>
-                  <td className='text-nowrap'>
+                  <td className="text-nowrap">
                     <a href="{ t('modal_shortcuts.global.konami_code_url') }" target="_blank">
                       {t('modal_shortcuts.global.Konami Code')}
                     </a>
@@ -80,7 +80,7 @@ const ShortcutsModal = (): JSX.Element => {
                 </tr>
                 <tr>
                   <th>{t('modal_shortcuts.global.MirrorMode')}:</th>
-                  <td className='text-nowrap'>
+                  <td className="text-nowrap">
                     <a href="{ t('modal_shortcuts.global.konami_code_url') }" target="_blank">
                       {t('modal_shortcuts.global.Konami Code')}
                     </a>

apps/app/src/components/Sidebar.tsx

@@ -300,7 +300,7 @@ const Sidebar = memo((): JSX.Element => {
       <div className={`${grwSidebarClass} ${sidebarModeClass} ${isOpenClass} d-print-none`} data-testid="grw-sidebar">
         <div className="data-layout-container">
           <div
-            className='navigation transition-enabled'
+            className="navigation transition-enabled"
             onMouseEnter={hoverOnHandler}
             onMouseLeave={hoverOutHandler}
           >

apps/app/src/components/Sidebar/PageTree/Item.tsx

@@ -502,7 +502,7 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
             >
               {/* pass the color property to reactstrap dropdownToggle props. https://6-4-0--reactstrap.netlify.app/components/dropdowns/  */}
               <DropdownToggle color="transparent" className="border-0 rounded btn-page-item-control p-0 grw-visible-on-hover mr-1">
-                <i id='option-button-in-page-tree' className="icon-options fa fa-rotate-90 p-1"></i>
+                <i id="option-button-in-page-tree" className="icon-options fa fa-rotate-90 p-1"></i>
               </DropdownToggle>
             </PageItemControl>
           </div>
@@ -512,7 +512,7 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
           <NotAvailableForGuest>
             <NotAvailableForReadOnlyUser>
               <button
-                id='page-create-button-in-page-tree'
+                id="page-create-button-in-page-tree"
                 type="button"
                 className="border-0 rounded btn btn-page-item-control p-0 grw-visible-on-hover"
                 onClick={onClickPlusButton}

apps/app/src/components/Sidebar/RecentChanges.tsx

@@ -91,9 +91,11 @@ const PageItem = memo(({ page, isSmall }: PageItemProps): JSX.Element => {
             <PagePathHierarchicalLink linkedPagePath={linkedPagePathLatter} basePath={dPagePath.isRoot ? undefined : dPagePath.former} />
             {locked}
           </h5>
-          {!isSmall && <div className="grw-tag-labels mt-1 mb-2">
-            { tagElements }
-          </div>}
+          {!isSmall && (
+            <div className="grw-tag-labels mt-1 mb-2">
+              { tagElements }
+            </div>
+          )}
           <PageItemLower page={page} />
         </div>
       </div>
@@ -135,7 +137,7 @@ const RecentChanges = (): JSX.Element => {
     <div className="px-3" data-testid="grw-recent-changes">
       <div className="grw-sidebar-content-header py-3 d-flex">
         <h3 className="mb-0 text-nowrap">{t('Recent Changes')}</h3>
-        <SidebarHeaderReloadButton onClick={() => mutate()}/>
+        <SidebarHeaderReloadButton onClick={() => mutate()} />
         <div className="d-flex align-items-center">
           <div className={`grw-recent-changes-resize-button ${styles['grw-recent-changes-resize-button']} custom-control custom-switch ml-1`}>
             <input

apps/app/src/components/Sidebar/SidebarNav.tsx

@@ -104,7 +104,7 @@ export const SidebarNav: FC<Props> = (props: Props) => {
       <div className="grw-sidebar-nav-secondary-container">
         {isAdmin && <SecondaryItem label="Admin" iconName="settings" href="/admin" />}
         {/* <SecondaryItem label="Draft" iconName="file_copy" href="/me/drafts" /> */}
-        <SecondaryItem label="Help" iconName="help" href={ growiCloudUri != null ? 'https://growi.cloud/help/' : 'https://docs.growi.org' } isBlank />
+        <SecondaryItem label="Help" iconName="help" href={growiCloudUri != null ? 'https://growi.cloud/help/' : 'https://docs.growi.org'} isBlank />
         <SecondaryItem label="Trash" iconName="delete" href="/trash" />
       </div>
     </div>

apps/app/src/components/Sidebar/Skeleton/PageTreeContentSkeleton.tsx

@@ -7,7 +7,7 @@ import styles from '../PageTree/ItemsTree.module.scss';
 const PageTreeContentSkeleton = (): JSX.Element => {
 
   return (
-    <ul className={`grw-pagetree ${styles['grw-pagetree']} list-group py-3`} >
+    <ul className={`grw-pagetree ${styles['grw-pagetree']} list-group py-3`}>
       <Skeleton additionalClass={`${styles['grw-pagetree-item-skeleton-text']} pr-3`} />
       <Skeleton additionalClass={`${styles['grw-pagetree-item-skeleton-text-child']} pr-3`} />
       <Skeleton additionalClass={`${styles['grw-pagetree-item-skeleton-text-child']} pr-3`} />

apps/app/src/components/Sidebar/Skeleton/RecentChangesContentSkeleton.tsx

@@ -11,7 +11,7 @@ const SkeletonItem = () => {
   return (
     <li className={`list-group-item ${styles['list-group-item']} ${isSmall ? 'py-2' : 'py-3'} px-0`}>
       <div className="d-flex w-100">
-        <Skeleton additionalClass='rounded-circle picture' roundedPill />
+        <Skeleton additionalClass="rounded-circle picture" roundedPill />
         <div className="flex-grow-1 ml-2">
           <Skeleton additionalClass={`grw-recent-changes-skeleton-small ${styles['grw-recent-changes-skeleton-small']}`} />
           <Skeleton additionalClass={`grw-recent-changes-skeleton-h5 ${styles['grw-recent-changes-skeleton-h5']} ${isSmall ? 'my-0' : 'my-2'}`} />
@@ -32,9 +32,10 @@ const RecentChangesContentSkeleton = (): JSX.Element => {
         <SkeletonItem />
         <SkeletonItem />
         <SkeletonItem />
-        <li className={'list-group-item p-0'}></li>
+        <li className="list-group-item p-0"></li>
       </ul>
-    </div>);
+    </div>
+  );
 };
 
 export default RecentChangesContentSkeleton;

apps/app/src/components/Sidebar/Tag.tsx

@@ -47,7 +47,7 @@ const Tag: FC = () => {
     <div className="grw-container-convertible container-lg px-4 mb-5 pb-5" data-testid="grw-sidebar-content-tags">
       <div className="grw-sidebar-content-header py-3 d-flex">
         <h3 className="mb-0">{t('Tags')}</h3>
-        <SidebarHeaderReloadButton onClick={() => onReload()}/>
+        <SidebarHeaderReloadButton onClick={() => onReload()} />
       </div>
 
       <h3 className="my-3">{t('tag_list')}</h3>

apps/app/src/components/TableOfContents.tsx

@@ -62,7 +62,7 @@ const TableOfContents = (): JSX.Element => {
         >
           {/* parse blank to show toc (https://github.com/weseek/growi/pull/6277) */}
           <ReactMarkdown {...rendererOptions}>
-            {''}
+
           </ReactMarkdown>
         </div>
       </StickyStretchableScroller>

apps/app/src/components/TemplateModal/TemplateModal.tsx

@@ -175,7 +175,7 @@ const TemplateModalSubstance = (props: TemplateModalSubstanceProps): JSX.Element
   }, [templateModalStatus.isOpened]);
 
   return (
-    <div data-testid='template-modal'>
+    <div data-testid="template-modal">
       <ModalHeader tag="h4" toggle={close} className="bg-primary text-light">
         {t('template.modal_label.Select template')}
       </ModalHeader>
@@ -185,7 +185,7 @@ const TemplateModalSubstance = (props: TemplateModalSubstanceProps): JSX.Element
           <div className="d-none d-lg-block col-lg-4">
 
             { isLoading && (
-              <div className='h-100 d-flex justify-content-center align-items-center'>
+              <div className="h-100 d-flex justify-content-center align-items-center">
                 <i className="fa fa-2x fa-spinner fa-pulse text-muted mx-auto"></i>
               </div>
             ) }
@@ -208,9 +208,9 @@ const TemplateModalSubstance = (props: TemplateModalSubstanceProps): JSX.Element
             </div>
           </div>
           {/* Dropdown */}
-          <div className='d-lg-none col mb-3'>
+          <div className="d-lg-none col mb-3">
             <UncontrolledDropdown>
-              <DropdownToggle caret type="button" outline className='w-100 text-right' disabled={isLoading}>
+              <DropdownToggle caret type="button" outline className="w-100 text-right" disabled={isLoading}>
                 <span className="float-left">
                   { (() => {
                     if (isLoading) {
@@ -240,13 +240,13 @@ const TemplateModalSubstance = (props: TemplateModalSubstanceProps): JSX.Element
             </UncontrolledDropdown>
           </div>
           <div className="col-12 col-lg-8">
-            <div className='row mb-2 mb-lg-0'>
+            <div className="row mb-2 mb-lg-0">
               <div className="col-6">
                 <h3>{t('preview')}</h3>
               </div>
               <div className="col-6 d-flex justify-content-end">
                 <UncontrolledDropdown>
-                  <DropdownToggle caret type="button" outline className='float-right' disabled={selectedTemplateSummary == null}>
+                  <DropdownToggle caret type="button" outline className="float-right" disabled={selectedTemplateSummary == null}>
                     <span className="float-left">{selectedTemplateLocale != null ? selectedTemplateLocale : t('Language')}</span>
                   </DropdownToggle>
                   <DropdownMenu className="dropdown-menu" role="menu">
@@ -254,7 +254,8 @@ const TemplateModalSubstance = (props: TemplateModalSubstanceProps): JSX.Element
                       return (
                         <DropdownItem
                           key={locale}
-                          onClick={() => setSelectedTemplateLocale(locale)}>
+                          onClick={() => setSelectedTemplateLocale(locale)}
+                        >
                           <span>{locale}</span>
                         </DropdownItem>
                       );
@@ -263,10 +264,10 @@ const TemplateModalSubstance = (props: TemplateModalSubstanceProps): JSX.Element
                 </UncontrolledDropdown>
               </div>
             </div>
-            <div className='card'>
+            <div className="card">
               <div className="card-body" style={{ height: '400px', overflowY: 'auto' }}>
                 { rendererOptions != null && selectedTemplateSummary != null && (
-                  <Preview rendererOptions={rendererOptions} markdown={format(selectedTemplateMarkdown)}/>
+                  <Preview rendererOptions={rendererOptions} markdown={format(selectedTemplateMarkdown)} />
                 ) }
               </div>
             </div>
@@ -281,7 +282,8 @@ const TemplateModalSubstance = (props: TemplateModalSubstanceProps): JSX.Element
           type="submit"
           className="btn btn-primary mx-1"
           onClick={() => submitHandler(selectedTemplateMarkdown)}
-          disabled={selectedTemplateSummary == null}>
+          disabled={selectedTemplateSummary == null}
+        >
           {t('commons:Insert')}
         </button>
       </ModalFooter>

apps/app/src/components/UsersHomepageFooter.tsx

@@ -35,7 +35,7 @@ export const UsersHomepageFooter = (props: UsersHomepageFooterProps): JSX.Elemen
               onClick={() => setIsExpanded(!isExpanded)}
             >
               { isExpanded
-                ? <ExpandIcon/>
+                ? <ExpandIcon />
                 : <CompressIcon />
               }
             </button>
@@ -43,7 +43,7 @@ export const UsersHomepageFooter = (props: UsersHomepageFooterProps): JSX.Elemen
         </h2>
         {/* TODO: In bookmark folders v1, the button to create a new folder does not exist. The button should be included in the bookmark component. */}
         <div className={`${isExpanded ? `${styles['grw-bookarks-contents-expanded']}` : `${styles['grw-bookarks-contents-compressed']}`}`}>
-          <BookmarkFolderTree isUserHomepage={true} isOperable={isOperable} userId={creatorId} />
+          <BookmarkFolderTree isUserHomepage isOperable={isOperable} userId={creatorId} />
         </div>
       </div>
       <div className="grw-user-page-list-m mt-5 d-edit-none">

apps/app/src/features/growi-plugin/client/components/Admin/PluginsExtensionPageContents/PluginCard.tsx

@@ -109,7 +109,7 @@ export const PluginCard = (props: Props): JSX.Element => {
             </h2>
             <p className="card-text text-muted">{desc}</p>
           </div>
-          <div className='col-3'>
+          <div className="col-3">
             <div>
               <PluginCardButton />
             </div>

apps/app/src/features/growi-plugin/client/components/Admin/PluginsExtensionPageContents/PluginInstallerForm.tsx

@@ -44,7 +44,7 @@ export const PluginInstallerForm = (): JSX.Element => {
 
   return (
     <form role="form" onSubmit={submitHandler}>
-      <div className='form-group row'>
+      <div className="form-group row">
         <label className="text-left text-md-right col-md-3 col-form-label">{t('plugins.form.label_url')}</label>
         <div className="col-md-6">
           <input
@@ -57,7 +57,7 @@ export const PluginInstallerForm = (): JSX.Element => {
           <p className="form-text text-muted">{t('plugins.form.desc_url')}</p>
         </div>
       </div>
-      <div className='form-group row'>
+      <div className="form-group row">
         <label className="text-left text-md-right col-md-3 col-form-label">{t('plugins.form.label_branch')}</label>
         <div className="col-md-6">
           <input

apps/app/src/features/growi-plugin/client/components/Admin/PluginsExtensionPageContents/PluginsExtensionPageContents.tsx

@@ -10,7 +10,7 @@ import { PluginInstallerForm } from './PluginInstallerForm';
 
 const Loading = (): JSX.Element => {
   return (
-    <Spinner className='d-flex justify-content-center aligh-items-center'>
+    <Spinner className="d-flex justify-content-center aligh-items-center">
       Loading...
     </Spinner>
   );

apps/app/src/features/mermaid/components/MermaidViewer.tsx

@@ -19,9 +19,11 @@ export const MermaidViewer = React.memo((props: MermaidViewerProps): JSX.Element
 
   return (
     children
-      ? <div ref={ref} key={children as string}>
-        {children}
-      </div>
+      ? (
+        <div ref={ref} key={children as string}>
+          {children}
+        </div>
+      )
       : <div key={children as string} />
   );
 });

apps/app/src/features/questionnaire/client/components/ProactiveQuestionnaireModal.tsx

@@ -132,7 +132,7 @@ const ProactiveQuestionnaireModal = (props: ModalProps): JSX.Element => {
                 <label className="col-sm-5 col-form-label" htmlFor="commentText">
                   <span className="badge badge-primary mr-2">{t('questionnaire_modal.required')}</span>{t('questionnaire_modal.comment_on_growi')}
                 </label>
-                <textarea className="col-sm-7 form-control" name="commentText" id="commentText" rows={5} required/>
+                <textarea className="col-sm-7 form-control" name="commentText" id="commentText" rows={5} required />
               </div>
               <div className="text-center mt-5">
                 <button type="submit" className="btn btn-primary">{t('questionnaire_modal.submit')}</button>

apps/app/src/features/questionnaire/client/components/Question.tsx

@@ -13,35 +13,37 @@ const Question = ({ question, inputNamePrefix }: QuestionProps): JSX.Element =>
 
   const questionText = lang === 'en_US' ? question.text.en_US : question.text.ja_JP;
 
-  return <div className="row mt-4">
-    <div className="col-6 d-flex align-items-center">
-      <span>
-        {questionText}
-      </span>
-    </div>
-    <div className="col-6 d-flex align-items-center pl-0">
-      <div className="btn-group btn-group-toggle flex-fill grw-questionnaire-btn-group" data-toggle="buttons">
-        <label className="btn btn-outline-primary active mr-4 rounded">
-          <input type="radio" name={`${inputNamePrefix + question._id}`} id={`${question._id}-noAnswer`} value='0' defaultChecked/> -
-        </label>
-        <label className="btn btn-outline-primary rounded-left">
-          <input type="radio" name={`${inputNamePrefix + question._id}`} id={`${question._id}-option1`} value='1'/> 1
-        </label>
-        <label className="btn btn-outline-primary">
-          <input type="radio" name={`${inputNamePrefix + question._id}`} id={`${question._id}-option2`} value='2'/> 2
-        </label>
-        <label className="btn btn-outline-primary">
-          <input type="radio" name={`${inputNamePrefix + question._id}`} id={`${question._id}-option3`} value='3'/> 3
-        </label>
-        <label className="btn btn-outline-primary">
-          <input type="radio" name={`${inputNamePrefix + question._id}`} id={`${question._id}-option4`} value='4'/> 4
-        </label>
-        <label className="btn btn-outline-primary">
-          <input type="radio" name={`${inputNamePrefix + question._id}`} id={`${question._id}-option5`} value='5'/> 5
-        </label>
+  return (
+    <div className="row mt-4">
+      <div className="col-6 d-flex align-items-center">
+        <span>
+          {questionText}
+        </span>
+      </div>
+      <div className="col-6 d-flex align-items-center pl-0">
+        <div className="btn-group btn-group-toggle flex-fill grw-questionnaire-btn-group" data-toggle="buttons">
+          <label className="btn btn-outline-primary active mr-4 rounded">
+            <input type="radio" name={`${inputNamePrefix + question._id}`} id={`${question._id}-noAnswer`} value="0" defaultChecked /> -
+          </label>
+          <label className="btn btn-outline-primary rounded-left">
+            <input type="radio" name={`${inputNamePrefix + question._id}`} id={`${question._id}-option1`} value="1" /> 1
+          </label>
+          <label className="btn btn-outline-primary">
+            <input type="radio" name={`${inputNamePrefix + question._id}`} id={`${question._id}-option2`} value="2" /> 2
+          </label>
+          <label className="btn btn-outline-primary">
+            <input type="radio" name={`${inputNamePrefix + question._id}`} id={`${question._id}-option3`} value="3" /> 3
+          </label>
+          <label className="btn btn-outline-primary">
+            <input type="radio" name={`${inputNamePrefix + question._id}`} id={`${question._id}-option4`} value="4" /> 4
+          </label>
+          <label className="btn btn-outline-primary">
+            <input type="radio" name={`${inputNamePrefix + question._id}`} id={`${question._id}-option5`} value="5" /> 5
+          </label>
+        </div>
       </div>
     </div>
-  </div>;
+  );
 };
 
 export default Question;

apps/app/src/features/questionnaire/client/components/QuestionnaireModal.tsx

@@ -113,53 +113,55 @@ const QuestionnaireModal = ({ questionnaireOrder }: QuestionnaireModalProps): JS
 
   const questionnaireOrderTitle = lang === 'en_US' ? questionnaireOrder.title.en_US : questionnaireOrder.title.ja_JP;
 
-  return (<Modal
-    size="lg"
-    isOpen={isOpened}
-    toggle={closeBtnClickHandlerClosingToast}
-    centered
-  >
-    <form onSubmit={submitHandler}>
-      <ModalBody className="bg-primary overflow-hidden p-0" style={{ borderRadius: 8 }}>
-        <div className="bg-white m-2 p-4" style={{ borderRadius: 8 }}>
-          <div className="text-center mb-2">
-            <h2 className="my-4">{questionnaireOrderTitle}</h2>
-            <p className="mb-1">{t('commons:questionnaire_modal.more_satisfied_services')}</p>
-            <p>{t('commons:questionnaire_modal.strive_to_improve_services')}</p>
-          </div>
-          <div className="container">
-            <div className="row mt-4">
-              <div className="col-md-2 offset-md-5 font-weight-bold text-right align-items-center p-0">{t('questionnaire.no_answer')}</div>
-              <div className="col-md-5 d-flex justify-content-between align-items-center">
-                <span className="font-weight-bold">{t('questionnaire.disagree')}</span>
-                <span className="font-weight-bold">{t('questionnaire.agree')}</span>
+  return (
+    <Modal
+      size="lg"
+      isOpen={isOpened}
+      toggle={closeBtnClickHandlerClosingToast}
+      centered
+    >
+      <form onSubmit={submitHandler}>
+        <ModalBody className="bg-primary overflow-hidden p-0" style={{ borderRadius: 8 }}>
+          <div className="bg-white m-2 p-4" style={{ borderRadius: 8 }}>
+            <div className="text-center mb-2">
+              <h2 className="my-4">{questionnaireOrderTitle}</h2>
+              <p className="mb-1">{t('commons:questionnaire_modal.more_satisfied_services')}</p>
+              <p>{t('commons:questionnaire_modal.strive_to_improve_services')}</p>
+            </div>
+            <div className="container">
+              <div className="row mt-4">
+                <div className="col-md-2 offset-md-5 font-weight-bold text-right align-items-center p-0">{t('questionnaire.no_answer')}</div>
+                <div className="col-md-5 d-flex justify-content-between align-items-center">
+                  <span className="font-weight-bold">{t('questionnaire.disagree')}</span>
+                  <span className="font-weight-bold">{t('questionnaire.agree')}</span>
+                </div>
               </div>
+              {questionnaireOrder.questions?.map((question) => {
+                return <Question question={question} inputNamePrefix={inputNamePrefix} key={question._id} />;
+              })}
+            </div>
+            <div className="text-center mt-5">
+              <button type="submit" className="btn btn-primary">{t('questionnaire.answer')}</button>
+            </div>
+            <div className="text-center cursor-pointer text-decoration-underline my-3">
+              <span style={{ cursor: 'pointer', textDecoration: 'underline' }} onClick={denyBtnClickHandler}>{t('questionnaire.dont_show_again')}</span>
             </div>
-            {questionnaireOrder.questions?.map((question) => {
-              return <Question question={question} inputNamePrefix={inputNamePrefix} key={question._id}/>;
-            })}
-          </div>
-          <div className="text-center mt-5">
-            <button type="submit" className="btn btn-primary">{t('questionnaire.answer')}</button>
-          </div>
-          <div className="text-center cursor-pointer text-decoration-underline my-3">
-            <span style={{ cursor: 'pointer', textDecoration: 'underline' }} onClick={denyBtnClickHandler}>{t('questionnaire.dont_show_again')}</span>
-          </div>
 
-          {currentUser?.admin && (
-            <a href="/admin/app#questionnaire-settings">
-              <i className="material-icons mr-1" >admin_panel_settings</i>
-            </a>
-          )}
-          {currentUser != null && (
-            <a href="/me#other_settings">
-              <i className="material-icons" >settings</i>
-            </a>
-          )}
-        </div>
-      </ModalBody>
-    </form>
-  </Modal>);
+            {currentUser?.admin && (
+              <a href="/admin/app#questionnaire-settings">
+                <i className="material-icons mr-1">admin_panel_settings</i>
+              </a>
+            )}
+            {currentUser != null && (
+              <a href="/me#other_settings">
+                <i className="material-icons">settings</i>
+              </a>
+            )}
+          </div>
+        </ModalBody>
+      </form>
+    </Modal>
+  );
 };
 
 export default QuestionnaireModal;

apps/app/src/features/questionnaire/client/components/QuestionnaireModalManager.tsx

@@ -29,18 +29,23 @@ const QuestionnaireModalManager = ():JSX.Element => {
     });
   }, [currentUser]);
 
-  return <>
-    {questionnaireOrders?.map((questionnaireOrder) => {
-      return <QuestionnaireModal
-        questionnaireOrder={questionnaireOrder}
-        key={questionnaireOrder._id} />;
-    })}
-    <div className={styles['grw-questionnaire-toasts']}>
-      {questionnaireOrdersToShow(questionnaireOrders)?.map((questionnaireOrder) => {
-        return <QuestionnaireToast questionnaireOrder={questionnaireOrder} key={questionnaireOrder._id}/>;
+  return (
+    <>
+      {questionnaireOrders?.map((questionnaireOrder) => {
+        return (
+          <QuestionnaireModal
+            questionnaireOrder={questionnaireOrder}
+            key={questionnaireOrder._id}
+          />
+        );
       })}
-    </div>
-  </>;
+      <div className={styles['grw-questionnaire-toasts']}>
+        {questionnaireOrdersToShow(questionnaireOrders)?.map((questionnaireOrder) => {
+          return <QuestionnaireToast questionnaireOrder={questionnaireOrder} key={questionnaireOrder._id} />;
+        })}
+      </div>
+    </>
+  );
 };
 
 export default QuestionnaireModalManager;

apps/app/src/features/questionnaire/client/components/QuestionnaireToast.tsx

@@ -68,18 +68,20 @@ const QuestionnaireToast = ({ questionnaireOrder }: QuestionnaireToastProps): JS
 
   const questionnaireOrderShortTitle = lang === 'en_US' ? questionnaireOrder.shortTitle.en_US : questionnaireOrder.shortTitle.ja_JP;
 
-  return <div className={`toast ${isOpen ? 'show' : 'hide'}`}>
-    <div className="toast-header bg-primary">
-      <strong className="mr-auto text-light">{questionnaireOrderShortTitle}</strong>
-      <button type="button" className="ml-2 mb-1 close" onClick={closeBtnClickHandler}>
-        <span aria-hidden="true" className="text-light">&times;</span>
-      </button>
+  return (
+    <div className={`toast ${isOpen ? 'show' : 'hide'}`}>
+      <div className="toast-header bg-primary">
+        <strong className="mr-auto text-light">{questionnaireOrderShortTitle}</strong>
+        <button type="button" className="ml-2 mb-1 close" onClick={closeBtnClickHandler}>
+          <span aria-hidden="true" className="text-light">&times;</span>
+        </button>
+      </div>
+      <div className="toast-body bg-light d-flex justify-content-end">
+        <button type="button" className="btn btn-secondary mr-3" onClick={answerBtnClickHandler}>{t('questionnaire.answer')}</button>
+        <button type="button" className="btn btn-secondary" onClick={denyBtnClickHandler}>{t('questionnaire.deny')}</button>
+      </div>
     </div>
-    <div className="toast-body bg-light d-flex justify-content-end">
-      <button type="button" className="btn btn-secondary mr-3" onClick={answerBtnClickHandler}>{t('questionnaire.answer')}</button>
-      <button type="button" className="btn btn-secondary" onClick={denyBtnClickHandler}>{t('questionnaire.deny')}</button>
-    </div>
-  </div>;
+  );
 };
 
 export default QuestionnaireToast;

apps/app/src/pages/[[...path]].page.tsx

@@ -125,7 +125,7 @@ const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps):
   const { data: currentPage } = useSWRxCurrentPage();
   return (
     <div data-testid="grw-contextual-sub-nav">
-      <GrowiContextualSubNavigationSubstance currentPage={currentPage} isLinkSharingDisabled={isLinkSharingDisabled}/>
+      <GrowiContextualSubNavigationSubstance currentPage={currentPage} isLinkSharingDisabled={isLinkSharingDisabled} />
     </div>
   );
 };
@@ -347,13 +347,13 @@ const Page: NextPageWithLayout<Props> = (props: Props) => {
         <div id="grw-fav-sticky-trigger" className="sticky-top"></div>
 
         <DisplaySwitcher
-          pageView={
+          pageView={(
             <PageView
               pagePath={pagePath}
               initialPage={pageWithMeta?.data}
               rendererConfig={props.rendererConfig}
             />
-          }
+          )}
         />
 
         <PageStatusAlert />

apps/app/src/pages/_app.page.tsx

@@ -81,7 +81,8 @@ function GrowiApp({ Component, pageProps }: GrowiAppProps): JSX.Element {
           --font-family-serif: Georgia, 'Times New Roman', Times, serif;
           --font-family-monospace: monospace, ${sourceHanCodeJPSubsetMain.style.fontFamily}, ${sourceHanCodeJPSubsetJis2.style.fontFamily};
         }
-      `}</style>
+      `}
+      </style>
       <SWRConfig value={swrGlobalConfiguration}>
         {getLayout(<Component {...pageProps} />)}
       </SWRConfig>

apps/app/src/pages/admin/plugins.page.tsx

@@ -43,7 +43,7 @@ const AdminAppPage: NextPage<CommonProps> = (props) => {
 
   return (
     <Provider inject={[...injectableContainers]}>
-      <AdminLayout componentTitle={title} >
+      <AdminLayout componentTitle={title}>
         <Head>
           <title>{generateCustomTitle(props, title)}</title>
         </Head>

apps/app/src/pages/forgot-password-errors.page.tsx

@@ -26,7 +26,7 @@ const ForgotPasswordErrorsPage: NextPage<Props> = (props: Props) => {
           <div className="row justify-content-md-center">
             <div className="col-md-6 mt-5">
               <div className="text-center">
-                <h1><i className="icon-lock-open large"/></h1>
+                <h1><i className="icon-lock-open large" /></h1>
                 <h2 className="text-center">{ t('forgot_password.reset_password') }</h2>
 
                 { errorCode == null && (

apps/app/src/pages/login/error/[message].page.tsx

@@ -86,12 +86,12 @@ const LoginPage: NextPage<CommonProps> = () => {
   return (
     <NoLoginLayout className={classNames.join(' ')}>
       <div className="mb-4 login-form-errors text-center">
-        <div className='nologin-dialog pb-4 mx-auto'>
+        <div className="nologin-dialog pb-4 mx-auto">
           <div className="col-12">
             {loginErrorElm}
           </div>
           {/* If the transition source is "/login", use <a /> tag since the transition will not occur if next/link is used. */}
-          <a href='/login'>
+          <a href="/login">
             <i className="icon-login mr-1" />{t('Sign in is here')}
           </a>
         </div>

apps/app/src/pages/me/[[...path]].page.tsx

@@ -123,7 +123,7 @@ const MePage: NextPageWithLayout<Props> = (props: Props) => {
 
         <div id="grw-fav-sticky-trigger" className="sticky-top"></div>
 
-        <div id="main" className='main'>
+        <div id="main" className="main">
           <div id="content-main" className="content-main container-lg grw-container-convertible">
             {targetPage.component}
           </div>

apps/app/src/pages/share/[[...path]].page.tsx

@@ -76,7 +76,7 @@ const GrowiContextualSubNavigationForSharedPage = (props: GrowiContextualSubNavi
 
   return (
     <div data-testid="grw-contextual-sub-nav">
-      <GrowiContextualSubNavigationSubstance currentPage={page} isLinkSharingDisabled={isLinkSharingDisabled}/>
+      <GrowiContextualSubNavigationSubstance currentPage={page} isLinkSharingDisabled={isLinkSharingDisabled} />
     </div>
   );
 };