Management: init i18n

packages/management/public/locales/en/Management.json

@@ -1 +1,3 @@
-{}
+{
+  "SpaceManagement": "Space management"
+}

packages/management/scripts/buildTranslations.js

@@ -9,7 +9,7 @@ beforeBuild(
   path.join(__dirname, "../src/autoGeneratedTranslations.ts"),
   {
     path: path.join(__dirname, "../../client/public/locales"),
-    files: ["Files.json"],
+    files: ["Settings.json"],
     alias: "CLIENT_PUBLIC_DIR",
   }
 );

packages/management/src/App.tsx

@@ -1,5 +1,7 @@
 import React, { useEffect } from "react";
 import { observer, Provider as MobxProvider } from "mobx-react";
+import { I18nextProvider } from "react-i18next";
+
 import { isMobileOnly } from "react-device-detect";
 
 import ThemeProvider from "@docspace/components/theme-provider";
@@ -13,6 +15,8 @@ import Client from "./categories";
 
 import store from "client/store";
 
+import i18n from "./i18n";
+
 const App = observer(() => {
   const { authStore } = useStore();
   const { init, settingsStore, userStore } = authStore;
@@ -51,7 +55,9 @@ const App = observer(() => {
 export default (props: any) => (
   <MobxProvider {...store}>
     <RootStoreContext.Provider value={new RootStore()}>
-      <App {...props} />
+      <I18nextProvider i18n={i18n}>
+        <App {...props} />
+      </I18nextProvider>
     </RootStoreContext.Provider>
   </MobxProvider>
 );

packages/management/src/i18n.ts

@@ -0,0 +1,40 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import Backend from "@docspace/common/utils/i18next-http-backend";
+import { LANGUAGE } from "@docspace/common/constants";
+import config from "PACKAGE_FILE";
+import { getCookie } from "@docspace/common/utils";
+import { loadLanguagePath } from "SRC_DIR/utils";
+
+const newInstance = i18n.createInstance();
+
+newInstance
+    .use(Backend)
+    .use(initReactI18next)
+    .init({
+        lng: getCookie(LANGUAGE) || "en",
+        fallbackLng: "en",
+        load: "currentOnly",
+        //debug: true,
+
+        interpolation: {
+            escapeValue: false, // not needed for react as it escapes by default
+            format: function (value, format) {
+                if (format === "lowercase") return value.toLowerCase();
+                return value;
+            },
+        },
+
+        backend: {
+            loadPath: loadLanguagePath(config.homepage),
+        },
+
+        ns: ["Management", "Common"],
+        defaultNS: "Management",
+
+        react: {
+            useSuspense: false,
+        },
+    });
+
+export default newInstance;

packages/management/tsconfig.json

@@ -31,7 +31,8 @@
     "baseUrl": "./" /* Specify the base directory to resolve non-relative module names. */,
     "paths": {
       "SRC_DIR/*": ["./src/*"],
-      "PUBLIC_DIR/*": ["../../public/*"]
+      "PUBLIC_DIR/*": ["../../public/*"],
+      "PACKAGE_FILE": ["./package.json"]
     } /* Specify a set of entries that re-map imports to additional lookup locations. */,
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
     // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */

packages/management/webpack.config.js

@@ -1,8 +1,8 @@
 const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 const CopyPlugin = require("copy-webpack-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
-const ModuleFederationPlugin = require("webpack").container
-  .ModuleFederationPlugin;
+const ModuleFederationPlugin =
+  require("webpack").container.ModuleFederationPlugin;
 const DefinePlugin = require("webpack").DefinePlugin;
 
 const ExternalTemplateRemotesPlugin = require("external-remotes-plugin");
@@ -82,6 +82,7 @@ const config = {
       PUBLIC_DIR: path.resolve(__dirname, "../../public"),
       ASSETS_DIR: path.resolve(__dirname, "./public"),
       SRC_DIR: path.resolve(__dirname, "./src"),
+      CLIENT_PUBLIC_DIR: path.resolve(__dirname, "../client/public"),
       PACKAGE_FILE: path.resolve(__dirname, "package.json"),
     },
   },