Merge branch 'feat/integrate-implement-page-alert-component' into feat/implement-old-revision-alert

CHANGELOG.md

@@ -1,9 +1,38 @@
 # Changelog
 
-## [Unreleased](https://github.com/weseek/growi/compare/v5.0.9...HEAD)
+## [Unreleased](https://github.com/weseek/growi/compare/v5.0.10...HEAD)
 
 *Please do not manually update this file. We've automated the process.*
 
+## [v5.0.10](https://github.com/weseek/growi/compare/v5.0.9...v5.0.10) - 2022-06-27
+
+### 💎 Features
+
+- feat: Sidebar default mode settings (#6111) @yukendev
+- feat: Get GCS instance that uses Application Default Credentials for v5 (#6051) @Yohei-Shiina
+- feat: Resume rename on server boot (#5862)(#6014) @Yohei-Shiina
+- feat: Show page item control menu on empty page (#6070)(#6103) @Yohei-Shiina
+
+### 🚀 Improvement
+
+- imprv: Show page control on subnavigation at existing empty page  (#5638) @Yohei-Shiina
+- imprv: Remove toc and page authors in empty page (#5661) @Yohei-Shiina
+- imprv: SWRize apiGet /tag.search (#6062) @kaoritokashiki
+
+### 🐛 Bug Fixes
+
+- fix: Scrolling preview (#6148) @yuki-takei
+- fix: Show page history comparation modal on init (#6072) @hirokei-camel
+- fix: Ensure backword compatibility for ES6 when using max_analyzed_offset (#6121) @hakumizuki
+- fix: Set max_analyzed_offset to elasticsearch querying options (#6115) @hakumizuki
+- fix: Revision err when updating tags (#6073) @kaoritokashiki
+- fix: Support 3 types of syntax for OpenID Connect Issuer Host (#6061) @mudana-grune
+
+### 🧰 Maintenance
+
+- support: Omit comment container (#6147) @yuki-takei
+- support: Upgrade typescript to ^4.6.0 (#6082) @hakumizuki
+
 ## [v5.0.9](https://github.com/weseek/growi/compare/v5.0.8...v5.0.9) - 2022-06-13
 
 ### 🚀 Improvement

lerna.json

@@ -1,7 +1,7 @@
 {
   "npmClient": "yarn",
   "useWorkspaces": true,
-  "version": "5.0.10-RC.0",
+  "version": "5.0.11-RC.0",
   "packages": [
     "packages/*"
   ]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "growi",
-  "version": "5.0.10-RC.0",
+  "version": "5.0.11-RC.0",
   "description": "Team collaboration software using markdown",
   "tags": [
     "wiki",
@@ -55,17 +55,17 @@
     "@types/jest": "^26.0.22",
     "@types/node": "^17.0.43",
     "@types/rewire": "^2.5.28",
-    "@typescript-eslint/eslint-plugin": "^4.28.5",
-    "@typescript-eslint/parser": "^4.28.5",
+    "@typescript-eslint/eslint-plugin": "^5.0.0",
+    "@typescript-eslint/parser": "^5.0.0",
     "cypress": "^9.2.0",
-    "eslint": "^8.17.0",
+    "eslint": "^8.18.0",
     "eslint-config-next": "^12.1.6",
     "eslint-config-weseek": "^2.1.0",
-    "eslint-import-resolver-typescript": "^2.4.0",
-    "eslint-plugin-import": "^2.23.4",
-    "eslint-plugin-jest": "^24.3.2",
-    "eslint-plugin-react": "^7.24.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-import-resolver-typescript": "^3.1.1",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jest": "^26.5.3",
+    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^27.0.6",
     "jest-date-mock": "^1.0.8",
     "jest-localstorage-mock": "^2.4.14",

packages/app/.eslintignore

@@ -4,3 +4,4 @@
 /src/client/util/reveal/plugins/markdown.js
 /src/linter-checker/**
 /tmp/**
+/next-env.d.ts

packages/app/.eslintrc.js

@@ -1,7 +1,6 @@
 module.exports = {
   extends: [
-    'weseek/react',
-    'weseek/typescript',
+    'next/core-web-vitals',
   ],
   plugins: [
     'regex',

packages/app/config/webpack.common.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 /**
  * @author: Yuki Takei <yuki@weseek.co.jp>
  */

packages/app/config/webpack.dev.dll.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 /**
  * @author: Yuki Takei <yuki@weseek.co.jp>
  */

packages/app/config/webpack.dev.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 /**
  * @author: Yuki Takei <yuki@weseek.co.jp>
  */

packages/app/config/webpack.prod.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 /**
  * @author: Yuki Takei <yuki@weseek.co.jp>
  */

packages/app/docker/README.md

@@ -10,8 +10,8 @@ GROWI Official docker image
 Supported tags and respective Dockerfile links
 ------------------------------------------------
 
-* [`5.0.9`, `5.0`, `5`, `latest` (Dockerfile)](https://github.com/weseek/growi/blob/v5.0.9/docker/Dockerfile)
-* [`5.0.9-nocdn`, `5.0-nocdn`, `5-nocdn`, `latest-nocdn` (Dockerfile)](https://github.com/weseek/growi/blob/v5.0.9/docker/Dockerfile)
+* [`5.0.10`, `5.0`, `5`, `latest` (Dockerfile)](https://github.com/weseek/growi/blob/v5.0.10/docker/Dockerfile)
+* [`5.0.10-nocdn`, `5.0-nocdn`, `5-nocdn`, `latest-nocdn` (Dockerfile)](https://github.com/weseek/growi/blob/v5.0.10/docker/Dockerfile)
 * [`4.5.22`, `4.5`, `4`, `latest` (Dockerfile)](https://github.com/weseek/growi/blob/v4.5.22/docker/Dockerfile)
 * [`4.5.22-nocdn`, `4.5-nocdn`, `4-nocdn`, `latest-nocdn` (Dockerfile)](https://github.com/weseek/growi/blob/v4.5.22/docker/Dockerfile)
 * [`4.4.13`, `4.4` (Dockerfile)](https://github.com/weseek/growi/blob/v4.4.13/docker/Dockerfile)

packages/app/next.config.js

@@ -1,3 +1,7 @@
+import { I18NextHMRPlugin } from 'i18next-hmr/plugin';
+import { WebpackManifestPlugin } from 'webpack-manifest-plugin';
+
+import { i18n, localePath } from './src/next-i18next.config';
 import { listScopedPackages } from './src/utils/next.config.utils';
 
 // define transpiled packages for '@growi/*'
@@ -18,6 +22,8 @@ const nextConfig = {
   },
   pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'],
 
+  i18n,
+
   /** @param config {import('next').NextConfig} */
   webpack(config, options) {
 
@@ -39,15 +45,17 @@ const nextConfig = {
       });
     };
 
-    // configure plugins
-    const WebpackAssetsManifest = require('webpack-assets-manifest');
     config.plugins.push(
-      new WebpackAssetsManifest({
-        publicPath: true,
-        output: 'custom-manifest.json',
+      new WebpackManifestPlugin({
+        fileName: 'custom-manifest.json',
       }),
     );
 
+    // setup i18next-hmr
+    if (!options.isServer && options.dev) {
+      config.plugins.push(new I18NextHMRPlugin({ localesDir: localePath }));
+    }
+
     return config;
   },
 

packages/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growi/app",
-  "version": "5.0.10-RC.0",
+  "version": "5.0.11-RC.0",
   "license": "MIT",
   "scripts": {
     "//// for production": "",
@@ -63,11 +63,11 @@
     "@elastic/elasticsearch7": "npm:@elastic/elasticsearch@^7.17.0",
     "@godaddy/terminus": "^4.9.0",
     "@google-cloud/storage": "^5.8.5",
-    "@growi/codemirror-textlint": "^5.0.10-RC.0",
-    "@growi/plugin-attachment-refs": "^5.0.10-RC.0",
-    "@growi/plugin-lsx": "^5.0.10-RC.0",
-    "@growi/plugin-pukiwiki-like-linker": "^5.0.10-RC.0",
-    "@growi/slack": "^5.0.10-RC.0",
+    "@growi/codemirror-textlint": "^5.0.11-RC.0",
+    "@growi/plugin-attachment-refs": "^5.0.11-RC.0",
+    "@growi/plugin-lsx": "^5.0.11-RC.0",
+    "@growi/plugin-pukiwiki-like-linker": "^5.0.11-RC.0",
+    "@growi/slack": "^5.0.11-RC.0",
     "@promster/express": "^7.0.2",
     "@promster/server": "^7.0.4",
     "@slack/events-api": "^3.0.0",
@@ -110,10 +110,9 @@
     "graceful-fs": "^4.1.11",
     "helmet": "^4.6.0",
     "http-errors": "^2.0.0",
-    "i18next": "^20.3.2",
-    "i18next-express-middleware": "^2.0.0",
-    "i18next-node-fs-backend": "^2.1.3",
-    "i18next-sprintf-postprocessor": "^0.2.2",
+    "i18next-chained-backend": "^3.0.2",
+    "i18next-http-backend": "^1.4.1",
+    "i18next-localstorage-backend": "^3.1.3",
     "is-iso-date": "^0.0.1",
     "lucene-query-parser": "^1.2.0",
     "md5": "^2.2.1",
@@ -127,6 +126,7 @@
     "multer": "~1.4.0",
     "multer-autoreap": "^1.0.3",
     "next": "^12.1.6",
+    "next-i18next": "^11.0.0",
     "next-transpile-modules": "^9.0.0",
     "nocache": "^3.0.1",
     "nodemailer": "^6.6.2",
@@ -171,8 +171,7 @@
     "ts-loader": "v9 is not compatible with webpack@5"
   },
   "devDependencies": {
-    "@alienfast/i18next-loader": "^1.1.4",
-    "@growi/ui": "^5.0.10-RC.0",
+    "@growi/ui": "^5.0.11-RC.0",
     "@handsontable/react": "=2.1.0",
     "@types/compression": "^1.7.0",
     "@types/express": "^4.17.11",
@@ -197,7 +196,7 @@
     "file-loader": "^5.0.2",
     "handsontable": "=6.2.2",
     "hard-source-webpack-plugin": "^0.13.1",
-    "i18next-browser-languagedetector": "^4.0.1",
+    "i18next-hmr": "^1.7.7",
     "imports-loader": "^0.8.0",
     "jquery-slimscroll": "^1.3.8",
     "jquery-ui": "^1.12.1",
@@ -223,7 +222,6 @@
     "normalize-path": "^3.0.0",
     "null-loader": "^3.0.0",
     "on-headers": "^1.0.1",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
     "penpal": "^4.0.0",
     "plantuml-encoder": "^1.2.5",
     "postcss-loader": "^3.0.0",
@@ -234,7 +232,6 @@
     "react-dropzone": "^11.2.4",
     "react-frame-component": "^4.0.0",
     "react-hotkeys": "^2.0.0",
-    "react-i18next": "^11.1.0",
     "react-waypoint": "^10.1.0",
     "reactstrap": "^8.9.0",
     "replacestream": "^4.0.3",
@@ -249,17 +246,12 @@
     "styled-components": "^5.0.1",
     "swagger2openapi": "^5.3.1",
     "swr": "^1.1.2",
-    "terser-webpack-plugin": "^4.1.0",
     "throttle-debounce": "^3.0.1",
     "toastr": "^2.1.2",
     "ts-loader": "^8.3.0",
     "ts-node-dev": "^1.1.6",
     "tsc-alias": "^1.2.9",
-    "tsconfig-paths-webpack-plugin": "^3.5.1",
     "unstated": "^2.1.1",
-    "webpack": "^4.46.0",
-    "webpack-assets-manifest": "^5.1.0",
-    "webpack-bundle-analyzer": "^3.9.0",
-    "webpack-cli": "^4.9.1"
+    "webpack-manifest-plugin": "^5.0.0"
   }
 }

packages/app/src/client/models/BootstrapGrid.js

@@ -7,7 +7,7 @@ export default class BootstrapGrid {
 
   static ResponsiveSize = {
     XS_SIZE: 'xs', SM_SIZE: 'sm', MD_SIZE: 'md',
-  }
+  };
 
   static validateColsRatios(colsRatios) {
 

packages/app/src/client/models/Linker.js

@@ -26,14 +26,14 @@ export default class Linker {
     markdownLink: 'mdLink',
     growiLink: 'growiLink',
     pukiwikiLink: 'pukiwikiLink',
-  }
+  };
 
   static patterns = {
     pukiwikiLinkWithLabel: /^\[\[(?<label>.+)>(?<link>.+)\]\]$/, // https://regex101.com/r/2fNmUN/2
     pukiwikiLinkWithoutLabel: /^\[\[(?<label>.+)\]\]$/, // https://regex101.com/r/S7w5Xu/1
     growiLink: /^\[(?<label>\/.+)\]$/, // https://regex101.com/r/DJfkYf/3
     markdownLink: /^\[(?<label>.*)\]\((?<link>.*)\)$/, // https://regex101.com/r/DZCKP3/2
-  }
+  };
 
   initWhenMarkdownLink() {
     // fill label with link if empty

packages/app/src/client/services/ContextExtractor.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import React, { FC, useEffect, useState } from 'react';
 
 import { pagePathUtils } from '@growi/core';
@@ -13,7 +14,7 @@ import { useSetupGlobalSocket, useSetupGlobalAdminSocket } from '~/stores/websoc
 import {
   useSiteUrl,
   useCurrentCreatedAt, useDeleteUsername, useDeletedAt, useHasChildren, useHasDraftOnHackmd,
-  useIsDeleted, useIsNotCreatable, useIsTrashPage, useIsUserPage, useLastUpdateUsername,
+  useIsNotCreatable, useIsTrashPage, useIsUserPage, useLastUpdateUsername,
   useCurrentPageId, usePageIdOnHackmd, usePageUser, useCurrentPagePath, useRevisionCreatedAt, useRevisionId, useRevisionIdHackmdSynced,
   useShareLinkId, useShareLinksNumber, useTemplateTagData, useCurrentUpdatedAt, useCreator, useRevisionAuthor, useCurrentUser, useTargetAndAncestors,
   useNotFoundTargetPathOrId, useIsSearchPage, useIsForbidden, useIsIdenticalPath, useHasParent,
@@ -74,7 +75,6 @@ const ContextExtractorOnce: FC = () => {
   const isIdenticalPath = JSON.parse(mainContent?.getAttribute('data-identical-path') || jsonNull) ?? false;
   const isUserPage = JSON.parse(mainContent?.getAttribute('data-page-user') || jsonNull) != null;
   const isTrashPage = _isTrashPage(path);
-  const isDeleted = JSON.parse(mainContent?.getAttribute('data-page-is-deleted') || jsonNull) ?? false;
   const isNotCreatable = JSON.parse(mainContent?.getAttribute('data-page-is-not-creatable') || jsonNull) ?? false;
   const isForbidden = forbiddenContent != null;
   const pageUser = JSON.parse(mainContent?.getAttribute('data-page-user') || jsonNull);
@@ -132,7 +132,6 @@ const ContextExtractorOnce: FC = () => {
   useHasChildren(hasChildren);
   useHasDraftOnHackmd(hasDraftOnHackmd);
   useIsIdenticalPath(isIdenticalPath);
-  useIsDeleted(isDeleted);
   useIsNotCreatable(isNotCreatable);
   useIsForbidden(isForbidden);
   useIsTrashPage(isTrashPage);

packages/app/src/client/services/PageContainer.js

@@ -61,7 +61,6 @@ export default class PageContainer extends Container {
 
       isUserPage: JSON.parse(mainContent.getAttribute('data-page-user')) != null,
       isTrashPage: isTrashPage(path),
-      isDeleted: JSON.parse(mainContent.getAttribute('data-page-is-deleted')),
       isNotCreatable: JSON.parse(mainContent.getAttribute('data-page-is-not-creatable')),
       isPageExist: mainContent.getAttribute('data-page-id') != null,
 

packages/app/src/client/services/SocketIoContainer.js

@@ -1,50 +0,0 @@
-import { Container } from 'unstated';
-
-import io from 'socket.io-client';
-
-import loggerFactory from '~/utils/logger';
-
-const logger = loggerFactory('growi:cli:SocketIoContainer');
-
-/**
- * Service container related to options for WebSocket
- * @extends {Container} unstated Container
- */
-export default class SocketIoContainer extends Container {
-
-  constructor(appContainer, namespace) {
-    super();
-
-    this.appContainer = appContainer;
-    this.appContainer.registerContainer(this);
-
-    const ns = namespace || '/';
-
-    this.socket = io(ns, {
-      transports: ['websocket'],
-    });
-
-    this.socket.on('connect_error', (error) => {
-      logger.error(error);
-    });
-    this.socket.on('error', (error) => {
-      logger.error(error);
-    });
-
-    this.state = {
-    };
-
-  }
-
-  /**
-   * Workaround for the mangling in production build to break constructor.name
-   */
-  static getClassName() {
-    return 'SocketIoContainer';
-  }
-
-  getSocket() {
-    return this.socket;
-  }
-
-}

packages/app/src/client/util/apiv1-client.ts

@@ -41,8 +41,7 @@ export async function apiGet<T>(path: string, params: unknown = {}): Promise<T>
   return apiRequest<T>('get', path, { params });
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export async function apiPost<T>(path: string, params: any): Promise<T> {
+export async function apiPost<T>(path: string, params: unknown = {}): Promise<T> {
   return apiRequest<T>('post', path, params);
 }
 
@@ -50,7 +49,6 @@ export async function apiPostForm<T>(path: string, formData: FormData): Promise<
   return apiPost<T>(path, formData);
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export async function apiDelete<T>(path: string, params: any): Promise<T> {
+export async function apiDelete<T>(path: string, params: unknown = {}): Promise<T> {
   return apiRequest<T>('delete', path, { data: params });
 }

packages/app/src/client/util/apiv3-client.ts

@@ -37,27 +37,22 @@ export async function apiv3Request<T = any>(method: string, path: string, params
   }
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export async function apiv3Get<T = any>(path: string, params: unknown = {}): Promise<AxiosResponse<T>> {
   return apiv3Request('get', path, { params });
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export async function apiv3Post<T = any>(path: string, params: any): Promise<AxiosResponse<T>> {
+export async function apiv3Post<T = any>(path: string, params: unknown = {}): Promise<AxiosResponse<T>> {
   return apiv3Request('post', path, params);
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export async function apiv3PostForm<T = any>(path: string, formData: FormData): Promise<AxiosResponse<T>> {
   return apiv3Post<T>(path, formData);
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export async function apiv3Put<T = any>(path: string, params: any): Promise<AxiosResponse<T>> {
+export async function apiv3Put<T = any>(path: string, params: unknown = {}): Promise<AxiosResponse<T>> {
   return apiv3Request('put', path, params);
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export async function apiv3Delete<T = any>(path: string, params: any): Promise<AxiosResponse<T>> {
+export async function apiv3Delete<T = any>(path: string, params: unknown = {}): Promise<AxiosResponse<T>> {
   return apiv3Request('delete', path, { params });
 }

packages/app/src/client/util/i18n.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import i18n from 'i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import { initReactI18next } from 'react-i18next';

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { Tooltip } from 'reactstrap';
 import loggerFactory from '~/utils/logger';

packages/app/src/components/Admin/AdminHome/InstalledPluginTable.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import AdminHomeContainer from '~/client/services/AdminHomeContainer';
 

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

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import AdminAppContainer from '~/client/services/AdminAppContainer';
 import { toastSuccess, toastError } from '~/client/util/apiNotification';

packages/app/src/components/Admin/App/AppSettingsPageContents.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import AdminAppContainer from '~/client/services/AdminAppContainer';
 

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import AdminAppContainer from '~/client/services/AdminAppContainer';
 

packages/app/src/components/Admin/App/ConfirmModal.tsx

@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import {
   Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import { TFunctionResult } from 'i18next';
 
 type ConfirmModalProps = {

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

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import AdminAppContainer from '~/client/services/AdminAppContainer';
 import { toastSuccess, toastError } from '~/client/util/apiNotification';

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

@@ -2,7 +2,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import AdminAppContainer from '~/client/services/AdminAppContainer';
 

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import AdminAppContainer from '~/client/services/AdminAppContainer';
 import { toastSuccess, toastError } from '~/client/util/apiNotification';

packages/app/src/components/Admin/App/MaintenanceMode.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useState, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import loggerFactory from '~/utils/logger';
 

packages/app/src/components/Admin/App/PluginSetting.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import AdminAppContainer from '~/client/services/AdminAppContainer';
 import { toastSuccess, toastError } from '~/client/util/apiNotification';

packages/app/src/components/Admin/App/SiteUrlSetting.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import AdminAppContainer from '~/client/services/AdminAppContainer';
 import { toastSuccess, toastError } from '~/client/util/apiNotification';

packages/app/src/components/Admin/App/SmtpSetting.tsx

@@ -1,7 +1,7 @@
 
 import React from 'react';
 
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import AdminAppContainer from '~/client/services/AdminAppContainer';
 

packages/app/src/components/Admin/App/V5PageMigration.tsx

@@ -1,7 +1,7 @@
 import React, {
   FC, useCallback, useEffect, useState,
 } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import { ConfirmModal } from './ConfirmModal';
 import AdminAppContainer from '../../../client/services/AdminAppContainer';
 import { withUnstatedContainers } from '../../UnstatedUtils';

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

@@ -6,7 +6,7 @@ import React from 'react';
 
 import { pathUtils } from '@growi/core';
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import urljoin from 'url-join';
 
 

packages/app/src/components/Admin/Common/AdminUpdateButtonRow.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 type Props = {
   onClick: () => void,

packages/app/src/components/Admin/Customize/CustomizeCssSetting.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import { Card, CardBody } from 'reactstrap';
 
 import AdminCustomizeContainer from '~/client/services/AdminCustomizeContainer';

packages/app/src/components/Admin/Customize/CustomizeFunctionSetting.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import { Card, CardBody } from 'reactstrap';
 
 import AdminCustomizeContainer from '~/client/services/AdminCustomizeContainer';

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

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import { Card, CardBody } from 'reactstrap';
 
 import AdminCustomizeContainer from '~/client/services/AdminCustomizeContainer';

packages/app/src/components/Admin/Customize/CustomizeHighlightSetting.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-useless-escape */
 import React, { useCallback, useState } from 'react';
 
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import {
   Dropdown, DropdownToggle, DropdownMenu, DropdownItem,
 } from 'reactstrap';
@@ -42,6 +42,7 @@ const HljsDemo = React.memo((props: HljsDemoProps): JSX.Element => {
     </pre>
   );
 });
+HljsDemo.displayName = 'HljsDemo';
 
 const CustomizeHighlightSetting = (props: Props): JSX.Element => {
   const { adminCustomizeContainer } = props;

packages/app/src/components/Admin/Customize/CustomizeLayoutSetting.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import { toastSuccess, toastError } from '~/client/util/apiNotification';
 import { apiv3Get, apiv3Put } from '~/client/util/apiv3-client';

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

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import { Card, CardBody } from 'reactstrap';
 
 import AdminCustomizeContainer from '~/client/services/AdminCustomizeContainer';

packages/app/src/components/Admin/Customize/CustomizeSidebarSetting.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import { Card, CardBody } from 'reactstrap';
 
 import { toastSuccess, toastError } from '~/client/util/apiNotification';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 
 import AdminCustomizeContainer from '~/client/services/AdminCustomizeContainer';

packages/app/src/components/Admin/Customize/CustomizeThemeSetting.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import AdminCustomizeContainer from '~/client/services/AdminCustomizeContainer';
 import { toastSuccess, toastError } from '~/client/util/apiNotification';

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

@@ -1,7 +1,7 @@
 /* eslint-disable max-len */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
+import { withTranslation } from 'next-i18next';
 import { Card, CardBody } from 'reactstrap';
 
 import AppContainer from '~/client/services/AppContainer';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import AdminSocketIoContainer from '~/client/services/AdminSocketIoContainer';
 import AppContainer from '~/client/services/AppContainer';
@@ -39,7 +39,7 @@ class ElasticsearchManagement extends React.Component {
     this.rebuildIndices = this.rebuildIndices.bind(this);
   }
 
-  async componentWillMount() {
+  async UNSAFE_UNSAFE_componentWillMount() {
     this.retrieveIndicesStatus();
   }
 

packages/app/src/components/Admin/ElasticsearchManagement/NormalizeIndicesControls.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 type Props = {
   isRebuildingProcessing: boolean,

packages/app/src/components/Admin/ElasticsearchManagement/RebuildIndexControls.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import AdminSocketIoContainer from '~/client/services/AdminSocketIoContainer';
 

packages/app/src/components/Admin/ElasticsearchManagement/ReconnectControls.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 type Props = {
   isEnabled?: boolean,

packages/app/src/components/Admin/ElasticsearchManagement/StatusTable.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 class StatusTable extends React.PureComponent {
 

packages/app/src/components/Admin/ExportArchiveData/ArchiveFilesTable.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { format } from 'date-fns';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import ArchiveFilesTableMenu from './ArchiveFilesTableMenu';
 

packages/app/src/components/Admin/ExportArchiveData/ArchiveFilesTableMenu.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 // import { toastSuccess, toastError } from '~/client/util/apiNotification';
 

packages/app/src/components/Admin/ExportArchiveData/SelectCollectionsModal.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import {
   Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';

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

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import * as toastr from 'toastr';
 
 
@@ -44,7 +44,7 @@ class ExportArchiveDataPage extends React.Component {
     this.exportingRequestedHandler = this.exportingRequestedHandler.bind(this);
   }
 
-  async componentWillMount() {
+  async UNSAFE_UNSAFE_componentWillMount() {
     // TODO:: use apiv3.get
     // eslint-disable-next-line no-unused-vars
     const [{ collections }, { status }] = await Promise.all([

packages/app/src/components/Admin/FullTextSearchManagement.tsx

@@ -1,14 +1,10 @@
-import React, { FC } from 'react';
+import React from 'react';
 
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import ElasticsearchManagement from './ElasticsearchManagement/ElasticsearchManagement';
 
-type Props = {
-
-};
-
-const FullTextSearchManagement: FC<Props> = () => {
+const FullTextSearchManagement = (): JSX.Element => {
   const { t } = useTranslation();
 
   return (

packages/app/src/components/Admin/ImportData/GrowiArchive/ImportCollectionConfigurationModal.jsx

@@ -3,7 +3,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import {
   Modal,
   ModalHeader,

packages/app/src/components/Admin/ImportData/GrowiArchive/ImportForm.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import AdminSocketIoContainer from '~/client/services/AdminSocketIoContainer';
 import { toastSuccess, toastError } from '~/client/util/apiNotification';
@@ -94,7 +94,7 @@ class ImportForm extends React.Component {
     return Object.keys(this.state.collectionNameToFileNameMap);
   }
 
-  componentWillMount() {
+  UNSAFE_UNSAFE_componentWillMount() {
     this.setupWebsocketEventHandler();
   }
 

packages/app/src/components/Admin/ImportData/GrowiArchive/UploadForm.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import { toastError } from '~/client/util/apiNotification';
 import { apiv3PostForm } from '~/client/util/apiv3-client';

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

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import * as toastr from 'toastr';
 
 import { apiv3Delete, apiv3Get } from '~/client/util/apiv3-client';
@@ -31,7 +31,7 @@ class GrowiArchiveSection extends React.Component {
     this.renderDefferentVersionAlert = this.renderDefferentVersionAlert.bind(this);
   }
 
-  async componentWillMount() {
+  async UNSAFE_UNSAFE_componentWillMount() {
     // get uploaded file status
     const res = await apiv3Get('/import/status');
 

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import AdminImportContainer from '~/client/services/AdminImportContainer';
 

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

@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import loggerFactory from '~/utils/logger';
 

packages/app/src/components/Admin/LegacySlackIntegration/SlackConfiguration.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import AdminSlackIntegrationLegacyContainer from '~/client/services/AdminSlackIntegrationLegacyContainer';
 import { toastSuccess, toastError } from '~/client/util/apiNotification';

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

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import AdminExternalAccountsContainer from '~/client/services/AdminExternalAccountsContainer';
 import AppContainer from '~/client/services/AppContainer';
@@ -21,7 +21,7 @@ class ManageExternalAccount extends React.Component {
     this.handleExternalAccountPage = this.handleExternalAccountPage.bind(this);
   }
 
-  componentWillMount() {
+  UNSAFE_UNSAFE_componentWillMount() {
     this.handleExternalAccountPage(1);
   }
 

packages/app/src/components/Admin/MarkdownSetting/IndentForm.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-danger */
 import React, { useCallback } from 'react';
 
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import {
   UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem,
 } from 'reactstrap';

packages/app/src/components/Admin/MarkdownSetting/LineBreakForm.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import AdminMarkDownContainer from '~/client/services/AdminMarkDownContainer';
 import { toastSuccess, toastError } from '~/client/util/apiNotification';

packages/app/src/components/Admin/MarkdownSetting/MarkDownSettingContents.tsx

@@ -1,6 +1,6 @@
-import React, { FC } from 'react';
+import React from 'react';
 
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import { Card, CardBody } from 'reactstrap';
 
 import IndentForm from './IndentForm';
@@ -8,12 +8,7 @@ import LineBreakForm from './LineBreakForm';
 import PresentationForm from './PresentationForm';
 import XssForm from './XssForm';
 
-type Props = {
-
-};
-
-
-const MarkDownSettingContents: FC<Props> = () => {
+const MarkDownSettingContents = React.memo((): JSX.Element => {
   const { t } = useTranslation();
 
   return (
@@ -47,6 +42,7 @@ const MarkDownSettingContents: FC<Props> = () => {
       <XssForm />
     </div>
   );
-};
+});
+MarkDownSettingContents.displayName = 'MarkDownSettingContents';
 
 export default MarkDownSettingContents;

packages/app/src/components/Admin/MarkdownSetting/PresentationForm.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import AdminMarkDownContainer from '~/client/services/AdminMarkDownContainer';
 import AppContainer from '~/client/services/AppContainer';

packages/app/src/components/Admin/MarkdownSetting/WhiteListInput.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import AdminMarkDownContainer from '~/client/services/AdminMarkDownContainer';
 import AppContainer from '~/client/services/AppContainer';

packages/app/src/components/Admin/MarkdownSetting/XssForm.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import AdminMarkDownContainer from '~/client/services/AdminMarkDownContainer';
 import AppContainer from '~/client/services/AppContainer';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import AdminNotificationContainer from '~/client/services/AdminNotificationContainer';
 import AppContainer from '~/client/services/AppContainer';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import urljoin from 'url-join';
 
 import AdminNotificationContainer from '~/client/services/AdminNotificationContainer';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import urljoin from 'url-join';
 
 import AppContainer from '~/client/services/AppContainer';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import {
   Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';

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

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import {
   TabContent, TabPane,
 } from 'reactstrap';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import { SlackbotType } from '@growi/slack';
 

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 const TriggerEventCheckBox = (props) => {
   const { t } = props;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import AdminNotificationContainer from '~/client/services/AdminNotificationContainer';
 import AppContainer from '~/client/services/AppContainer';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import AdminNotificationContainer from '~/client/services/AdminNotificationContainer';
 import AppContainer from '~/client/services/AppContainer';

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

@@ -2,7 +2,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import AdminBasicSecurityContainer from '~/client/services/AdminBasicSecurityContainer';
 import AdminGeneralSecurityContainer from '~/client/services/AdminGeneralSecurityContainer';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import {
   Button, Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';
@@ -53,6 +53,8 @@ const DeleteAllShareLinksModal = React.memo((props) => {
   );
 
 });
+DeleteAllShareLinksModal.displayName = 'DeleteAllShareLinksModal';
+
 
 DeleteAllShareLinksModal.propTypes = {
   t: PropTypes.func.isRequired, // i18next

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

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-danger */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
+import { withTranslation } from 'next-i18next';
 
 import { withUnstatedContainers } from '../../UnstatedUtils';
 

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

@@ -2,7 +2,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 
 import AdminGeneralSecurityContainer from '~/client/services/AdminGeneralSecurityContainer';

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

@@ -2,7 +2,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 
 import AdminGeneralSecurityContainer from '~/client/services/AdminGeneralSecurityContainer';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import AdminLdapSecurityContainer from '~/client/services/AdminLdapSecurityContainer';
 import { toastSuccess, toastError } from '~/client/util/apiNotification';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import AdminGeneralSecurityContainer from '~/client/services/AdminGeneralSecurityContainer';
 import AdminLdapSecurityContainer from '~/client/services/AdminLdapSecurityContainer';

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

@@ -2,7 +2,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 
 import AdminGeneralSecurityContainer from '~/client/services/AdminGeneralSecurityContainer';

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

@@ -2,7 +2,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 
 import AdminGeneralSecurityContainer from '~/client/services/AdminGeneralSecurityContainer';

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

@@ -2,7 +2,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import { Collapse } from 'reactstrap';
 
 

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

@@ -1,6 +1,6 @@
 import React, { Fragment, useMemo, useState } from 'react';
 
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import { TabContent, TabPane } from 'reactstrap';
 
 import CustomNav from '../../CustomNavigation/CustomNav';

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

@@ -2,7 +2,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import { Collapse } from 'reactstrap';
 
 import AdminGeneralSecurityContainer from '~/client/services/AdminGeneralSecurityContainer';

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

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import AdminGeneralSecurityContainer from '~/client/services/AdminGeneralSecurityContainer';
 import AppContainer from '~/client/services/AppContainer';
@@ -55,7 +55,7 @@ class ShareLinkSetting extends React.Component {
     this.switchDisableLinkSharing = this.switchDisableLinkSharing.bind(this);
   }
 
-  componentWillMount() {
+  UNSAFE_UNSAFE_componentWillMount() {
     this.getShareLinkList(1);
   }
 

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

@@ -2,7 +2,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 
 import AdminGeneralSecurityContainer from '~/client/services/AdminGeneralSecurityContainer';

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import { SlackbotType } from '@growi/slack';
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import PropTypes from 'prop-types';
 import { UncontrolledTooltip } from 'reactstrap';
 

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import {
   Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import AppContainer from '~/client/services/AppContainer';
 import { toastSuccess, toastError } from '~/client/util/apiNotification';

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import AppContainer from '~/client/services/AppContainer';
 import { toastSuccess, toastError } from '~/client/util/apiNotification';

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import PropTypes from 'prop-types';
 import AppContainer from '~/client/services/AppContainer';
 import { withUnstatedContainers } from '../../UnstatedUtils';

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

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 import AppContainer from '~/client/services/AppContainer';
 import { apiv3Post } from '~/client/util/apiv3-client';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import {
   Button, Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';