LOC-1015 Strapi plugin does not work on certain versions (#48)

* ♻️ refactor: remove extra imports ♻️ refactor: duplicate config for admin panel 🐛 fix: updated STRAPI_ADMIN env variable value * 📝 docs: update README of new installation instructions * ✨ feat: add STRAPI_ADMIN_LOCALAZY_ENV env variable during the installation --------- Co-authored-by: david-vaclavek <vaclavek.dvd@gmail.com>
localazy · Mar 13, 2024 · 5f55f1b · 5f55f1b
1 parent af4f3e8
commit 5f55f1b
Show file tree

Hide file tree

Showing 27 changed files with 134 additions and 46 deletions.
diff --git a/README.md b/README.md
@@ -27,6 +27,12 @@ npm install @localazy/strapi-plugin@latest && npx @localazy/strapi-plugin
 
 Note: Localazy plugin requires an updated Webpack configuration of your Strapi project. Follow the instructions in the console output during the installation process. Steps are also available in the [Install plugin via NPM](https://localazy.com/docs/strapi/strapi-plugin-introduction-installation#install-plugin-via-npm) section of the Localazy Docs.
 
+Due to the changes in Strapi core code it's also necessary to add an environment variable to your Strapi project. Add the following line to your `.env` file (value is empty):
+
+```
+STRAPI_ADMIN_LOCALAZY_ENV=
+```
+
 ## Configuration
 
 Additional configuration object may be provided in the `plugins.js` file. The following options are available:

diff --git a/admin/src/config/development/index.js b/admin/src/config/development/index.js
@@ -0,0 +1,14 @@
+export default {
+  LOCALAZY_OAUTH_URL: "https://testing.localazy.com/oauth/authorize",
+  LOCALAZY_OAUTH_APP_CLIENT_ID: "18503917571895066466",
+  LOCALAZY_PLUGIN_CONNECTOR_API_URL: "https://testing.localazy.com/plugin-connector",
+  LOCALAZY_PUBLIC_API_URL: "https://testing.localazy.com/pubapi",
+  LOCALAZY_PLUGIN_ID: "1",
+  LOCALAZY_DEFAULT_FILE_NAME: "strapi.json",
+  LOCALAZY_DEFAULT_FILE_PATH: "",
+  LOCALAZY_DEFAULT_FILE_EXTENSION: "json",
+  LOCALAZY_DEFAULT_LOCALE: "en",
+  LOCALAZY_API_USER_JWT_COOKIE_NAME: "LOCALAZY-API-USER-JWT",
+  LOCALAZY_API_USER_COOKIE_EXPIRATION: 7,
+  LOCALAZY_PUBLIC_API_LIFTED_LIMITS: true,
+};
diff --git a/admin/src/config/example/index.js b/admin/src/config/example/index.js
@@ -0,0 +1,14 @@
+export default {
+  LOCALAZY_OAUTH_URL: "",
+  LOCALAZY_OAUTH_APP_CLIENT_ID: "",
+  LOCALAZY_PLUGIN_CONNECTOR_API_URL: "",
+  LOCALAZY_PUBLIC_API_URL: "",
+  LOCALAZY_PLUGIN_ID: "",
+  LOCALAZY_DEFAULT_FILE_NAME: "",
+  LOCALAZY_DEFAULT_FILE_PATH: "",
+  LOCALAZY_DEFAULT_FILE_EXTENSION: "",
+  LOCALAZY_DEFAULT_LOCALE: "",
+  LOCALAZY_API_USER_JWT_COOKIE_NAME: "",
+  LOCALAZY_API_USER_COOKIE_EXPIRATION: -1,
+  LOCALAZY_PUBLIC_API_LIFTED_LIMITS: false,
+};
diff --git a/admin/src/config/index.js b/admin/src/config/index.js
@@ -0,0 +1,21 @@
+import production from "./production/index";
+import local from "./local/index";
+import development from "./development/index";
+
+
+// depending on the STRAPI_ADMIN_LOCALAZY_ENV, use the correct config
+let config = production;
+
+if (process.env.STRAPI_ADMIN_LOCALAZY_ENV === "local") {
+  config = local;
+}
+
+if (process.env.STRAPI_ADMIN_LOCALAZY_ENV === "development") {
+  config = development;
+}
+
+console.log(config);
+
+export default {
+  ...config,
+};
diff --git a/admin/src/config/local/index.js b/admin/src/config/local/index.js
@@ -0,0 +1,14 @@
+export default {
+  LOCALAZY_OAUTH_URL: "https://testing.localazy.com/oauth/authorize",
+  LOCALAZY_OAUTH_APP_CLIENT_ID: "18503917571895066465",
+  LOCALAZY_PLUGIN_CONNECTOR_API_URL: "http://localhost:3000",
+  LOCALAZY_PUBLIC_API_URL: "https://testing.localazy.com/pubapi",
+  LOCALAZY_PLUGIN_ID: "1",
+  LOCALAZY_DEFAULT_FILE_NAME: "strapi.json",
+  LOCALAZY_DEFAULT_FILE_PATH: "",
+  LOCALAZY_DEFAULT_FILE_EXTENSION: "json",
+  LOCALAZY_DEFAULT_LOCALE: "en",
+  LOCALAZY_API_USER_JWT_COOKIE_NAME: "LOCALAZY-API-USER-JWT",
+  LOCALAZY_API_USER_COOKIE_EXPIRATION: 7,
+  LOCALAZY_PUBLIC_API_LIFTED_LIMITS: false,
+};
diff --git a/admin/src/config/production/index.js b/admin/src/config/production/index.js
@@ -0,0 +1,15 @@
+export default {
+  LOCALAZY_OAUTH_URL: "https://localazy.com/oauth/authorize",
+  LOCALAZY_OAUTH_APP_CLIENT_ID: "18395772851999073783",
+  LOCALAZY_PLUGIN_CONNECTOR_API_URL:
+    "https://plugins.localazy.com/generic-connector",
+  LOCALAZY_PUBLIC_API_URL: "https://api.localazy.com",
+  LOCALAZY_PLUGIN_ID: "1",
+  LOCALAZY_DEFAULT_FILE_NAME: "strapi.json",
+  LOCALAZY_DEFAULT_FILE_PATH: "",
+  LOCALAZY_DEFAULT_FILE_EXTENSION: "json",
+  LOCALAZY_DEFAULT_LOCALE: "en",
+  LOCALAZY_API_USER_JWT_COOKIE_NAME: "LOCALAZY-API-USER-JWT",
+  LOCALAZY_API_USER_COOKIE_EXPIRATION: 7,
+  LOCALAZY_PUBLIC_API_LIFTED_LIMITS: true,
+};
diff --git a/admin/src/i18n.js b/admin/src/i18n.js
@@ -8,14 +8,9 @@ import en_download from "./modules/localazy-download/locale/en";
 import en_upload from "./modules/localazy-upload/locale/en";
 import en_plugin_settings from "./modules/plugin-settings/locale/en";
 
-i18n
-  // detect user language
-  // pass the i18n instance to react-i18next.
-  .use(initReactI18next)
-  // init i18next
-  // for all options read: https://www.i18next.com/overview/configuration-options
-  .init({
-    debug: process.env.STRAPI_ADMIN_LOCALAZY_ENV === "development",
+const initI18nParams = () => {
+  return {
+    debug: false, // set `true` to see more logs
     fallbackLng: "en",
     interpolation: {
       escapeValue: false, // not needed for react as it escapes by default
@@ -32,6 +27,15 @@ i18n
         },
       },
     },
-  });
+  };
+}
+
+i18n
+  // detect user language
+  // pass the i18n instance to react-i18next.
+  .use(initReactI18next)
+  // init i18next
+  // for all options read: https://www.i18next.com/overview/configuration-options
+  .init(initI18nParams());
 
 export default i18n;
diff --git a/admin/src/index.js b/admin/src/index.js
@@ -54,9 +54,15 @@ export default {
         defaultMessage: upperCaseName,
       },
       Component: async () => {
-        const component = await import("./pages/Index");
+        try {
+          const component = await import("./pages/Index");
 
-        return component;
+          return component;
+        } catch (e) {
+          console.log(e);
+        }
+
+        return null;
       },
       permissions: [
         // Uncomment to set the permissions of the plugin here

diff --git a/admin/src/modules/@common/components/LanguagesSelector/index.js b/admin/src/modules/@common/components/LanguagesSelector/index.js
@@ -5,8 +5,6 @@ import { useTranslation } from "react-i18next";
 import cloneDeep from "lodash-es/cloneDeep";
 import { Select, Option } from '@strapi/design-system/Select';
 
-import "../../../../i18n";
-
 function LanguagesSelector(props) {
   /**
    * Translation function

diff --git a/admin/src/modules/@common/components/PluginPageLoader/index.js b/admin/src/modules/@common/components/PluginPageLoader/index.js
@@ -3,8 +3,6 @@ import { Flex } from '@strapi/design-system/Flex';
 import { Loader } from "@strapi/design-system/Loader";
 import { useTranslation } from "react-i18next";
 
-import "../../../../i18n";
-
 function PluginPageLoader() {
   const { t } = useTranslation();
 

diff --git a/admin/src/modules/@common/components/TransferReport/index.js b/admin/src/modules/@common/components/TransferReport/index.js
@@ -3,7 +3,6 @@ import PropTypes from "prop-types";
 import { Alert } from "@strapi/design-system/Alert";
 import { useTranslation } from "react-i18next";
 import { Box } from "@strapi/design-system/Box";
-import "../../../../i18n";
 
 function TransferReport(props) {
   const { t } = useTranslation();

diff --git a/admin/src/modules/@common/utils/get-nav.js b/admin/src/modules/@common/utils/get-nav.js
@@ -5,7 +5,7 @@ import Upload from "@strapi/icons/Upload";
 import pluginId from "../../../pluginId";
 import i18n from "../../../i18n";
 
-const BASE_PATH = `${process.env.ADMIN_PATH}plugins/${pluginId}`;
+const BASE_PATH = `${process.env.ADMIN_PATH}/plugins/${pluginId}`;
 const t = i18n.t;
 const gevNav = () => {
   return [

diff --git a/admin/src/modules/@common/utils/redirect-to-plugin-route.js b/admin/src/modules/@common/utils/redirect-to-plugin-route.js
@@ -13,10 +13,10 @@ export const PLUGIN_ROUTES = {
 
 export default (route) => {
   if (route === PLUGIN_ROUTES.CONTENT_TRANSFER_SETUP) {
-    history.push(`${process.env.ADMIN_PATH}settings/${pluginId}/${route}`);
+    history.push(`${process.env.ADMIN_PATH}/settings/${pluginId}/${route}`);
 
     return;
   }
 
-  history.push(`${process.env.ADMIN_PATH}plugins/${pluginId}/${route}`);
+  history.push(`${process.env.ADMIN_PATH}/plugins/${pluginId}/${route}`);
 };
diff --git a/admin/src/modules/localazy-upload/components/ReadDocsButton.js b/admin/src/modules/localazy-upload/components/ReadDocsButton.js
@@ -1,7 +1,6 @@
 import React from "react";
 import { Button } from "@strapi/design-system/Button";
 import { useTranslation } from "react-i18next";
-import "../../../i18n";
 
 function ReadDocsButton() {
   const { t } = useTranslation();

diff --git a/admin/src/modules/login/components/LoginButton/index.js b/admin/src/modules/login/components/LoginButton/index.js
@@ -11,8 +11,7 @@ import { useTranslation } from "react-i18next";
 import LocalazyLoginService from "../../services/localazy-login-service";
 import { getStrapiDefaultLocale } from "../../../@common/utils/get-default-locale";
 import { isoStrapiToLocalazy } from "../../../@common/utils/iso-locales-utils";
-import { config } from "../../../../../../server";
-import "../../../../i18n";
+import config from "../../../../config";
 
 function LoginButton(props) {
   const { t } = useTranslation();
@@ -25,12 +24,12 @@ function LoginButton(props) {
     const localazyFormatLocaleCode = isoStrapiToLocalazy(strapiDefaultLocale.code);
     const keys = await LocalazyLoginService.generateKeys();
     const params = new URLSearchParams({
-      client_id: config.default.LOCALAZY_OAUTH_APP_CLIENT_ID,
+      client_id: config.LOCALAZY_OAUTH_APP_CLIENT_ID,
       custom_id: keys.writeKey,
       allow_create: "true",
       create_locale: localazyFormatLocaleCode,
     });
-    const url = `${config.default.LOCALAZY_OAUTH_URL}?${params.toString()}`;
+    const url = `${config.LOCALAZY_OAUTH_URL}?${params.toString()}`;
     window.open(url);
 
     const pollResult = await LocalazyLoginService.continuousPoll(keys.readKey);

diff --git a/admin/src/modules/login/components/LogoutButton/index.js b/admin/src/modules/login/components/LogoutButton/index.js
@@ -11,7 +11,6 @@ import { useTranslation } from "react-i18next";
 import Exit from "@strapi/icons/Exit";
 import LocalazyUserService from "../../../user/services/localazy-user-service";
 import { setLocalazyIdentity } from "../../../../state/localazy-identity";
-import "../../../../i18n";
 
 function LogoutButton(props) {
   const { t } = useTranslation();

diff --git a/admin/src/modules/plugin-settings/components/ContentTransferSetup/index.js b/admin/src/modules/plugin-settings/components/ContentTransferSetup/index.js
@@ -198,7 +198,7 @@ function ContentTransferSetup() {
 
   return (
     <>
-      {!isLoading && !isLoggedIn && <Redirect to={`${process.env.ADMIN_PATH}plugins/${pluginId}/login`} />}
+      {!isLoading && !isLoggedIn && <Redirect to={`/plugins/${pluginId}/login`} />}
 
       <HeaderLayout
         title={t("plugin_settings.content_transfer_setup")}

diff --git a/admin/src/modules/plugin-settings/components/GlobalSettings/index.js b/admin/src/modules/plugin-settings/components/GlobalSettings/index.js
@@ -120,7 +120,7 @@ function GlobalSettings() {
 
   return (
     <>
-      {!isLoading && !isLoggedIn && <Redirect to={`${process.env.ADMIN_PATH}plugins/${pluginId}/login`} />}
+      {!isLoading && !isLoggedIn && <Redirect to={`/plugins/${pluginId}/login`} />}
 
       <HeaderLayout
         title={t("plugin_settings.global_settings")}

diff --git a/admin/src/modules/settings/components/PrerequisitiesInfo/index.js b/admin/src/modules/settings/components/PrerequisitiesInfo/index.js
@@ -3,8 +3,6 @@ import { Box } from "@strapi/design-system/Box";
 import { useTranslation } from "react-i18next";
 import { Typography } from "@strapi/design-system/Typography";
 
-import "../../../../i18n";
-
 function PrerequisitiesInfo() {
   const { t } = useTranslation();
 

diff --git a/admin/src/pages/App/index.js b/admin/src/pages/App/index.js
@@ -110,7 +110,7 @@ function App() {
               <>
                 {!isLoggedIn && (
                   <Switch>
-                    <Route path={`${process.env.ADMIN_PATH}plugins/${pluginId}/login`} exact>
+                    <Route path={`${process.env.ADMIN_PATH}/plugins/${pluginId}/login`} exact>
                       <Login
                         title={headerTitle}
                         subtitle={headerSubtitle}
@@ -121,19 +121,19 @@ function App() {
 
                 {isLoggedIn && (
                   <Switch>
-                    <Route path={`${process.env.ADMIN_PATH}plugins/${pluginId}/download`} exact>
+                    <Route path={`${process.env.ADMIN_PATH}/plugins/${pluginId}/download`} exact>
                       <Download
                         title={headerTitle}
                         subtitle={headerSubtitle}
                       />
                     </Route>
-                    <Route path={`${process.env.ADMIN_PATH}plugins/${pluginId}/upload`} exact>
+                    <Route path={`${process.env.ADMIN_PATH}/plugins/${pluginId}/upload`} exact>
                       <Upload
                         title={headerTitle}
                         subtitle={headerSubtitle}
                       />
                     </Route>
-                    <Route path={`${process.env.ADMIN_PATH}plugins/${pluginId}/settings`} exact>
+                    <Route path={`${process.env.ADMIN_PATH}/plugins/${pluginId}/settings`} exact>
                       <Settings
                         title={headerTitle}
                         subtitle={headerSubtitle}

diff --git a/admin/src/pages/Download/index.js b/admin/src/pages/Download/index.js
@@ -17,7 +17,6 @@ import areLocalesCompatible from "../../modules/@common/utils/are-locales-compat
 import hasModelChanged from "../../modules/plugin-settings/functions/has-model-changed";
 import TransferReport from "../../modules/@common/components/TransferReport";
 import ReadDocsButton from "../../modules/localazy-upload/components/ReadDocsButton";
-import "../../i18n";
 import { getLocalazyIdentity } from "../../state/localazy-identity";
 import ProductAnalyticsService from "../../modules/@common/services/product-analytics-service";
 import PluginSettingsService from "../../modules/plugin-settings/services/plugin-settings-service";

diff --git a/admin/src/pages/Login/index.js b/admin/src/pages/Login/index.js
@@ -21,8 +21,6 @@ import redirectToPluginRoute, {
 } from "../../modules/@common/utils/redirect-to-plugin-route";
 import ProductAnalyticsService from "../../modules/@common/services/product-analytics-service";
 
-import "../../i18n";
-
 function Login(props) {
   const history = useHistory();
   const { t } = useTranslation();

diff --git a/admin/src/pages/PluginSettings/index.js b/admin/src/pages/PluginSettings/index.js
@@ -11,8 +11,6 @@ import LocalazyUserService from "../../modules/user/services/localazy-user-servi
 import { setLocalazyIdentity } from "../../state/localazy-identity";
 import Loader from "../../modules/@common/components/PluginPageLoader";
 
-import "../../i18n";
-
 function PluginSettings() {
   /**
      * Translation function

diff --git a/admin/src/pages/Settings/index.js b/admin/src/pages/Settings/index.js
@@ -20,8 +20,6 @@ import ProductAnalyticsService from "../../modules/@common/services/product-anal
 import formatNumber from "../../modules/@common/utils/format-number";
 import PluginSettingsService from "../../modules/plugin-settings/services/plugin-settings-service";
 
-import "../../i18n";
-
 function Settings(props) {
   const history = useHistory();
   const { t } = useTranslation();

diff --git a/admin/src/pages/Upload/index.js b/admin/src/pages/Upload/index.js
@@ -26,8 +26,6 @@ import ProductAnalyticsService from "../../modules/@common/services/product-anal
 import PluginSettingsService from "../../modules/plugin-settings/services/plugin-settings-service";
 import UploadAlertsService from "../../modules/localazy-upload/services/upload-alerts-service";
 
-import "../../i18n";
-
 const uploadAlertsService = new UploadAlertsService();
 uploadAlertsService.subscribe();
 

diff --git a/admin/src/utils/createPluginConnectorAxiosInstance.js b/admin/src/utils/createPluginConnectorAxiosInstance.js
@@ -3,9 +3,9 @@
  */
 
 import axios from "axios";
-import { config } from "../../../server";
+import config from "../config";
 
-const BASE_PLUGIN_PATH = config.default.LOCALAZY_PLUGIN_CONNECTOR_API_URL;
+const BASE_PLUGIN_PATH = config.LOCALAZY_PLUGIN_CONNECTOR_API_URL;
 
 const createPluginConnectorAxiosInstance = (baseUrl = null) => {
   if (baseUrl === null) {

diff --git a/install/index.mjs b/install/index.mjs
@@ -39,7 +39,7 @@ const install = () => new Promise((resolve, reject) => {
   }
 });
 
-const updateConfig = () => new Promise((resolve, reject) => {
+const createWebpackConfigSample = () => new Promise((resolve, reject) => {
   try {
     shell.exec(`echo "${template}" > src/admin/${exampleFileName}`, { silent: true }, () => {
       resolve();
@@ -49,14 +49,27 @@ const updateConfig = () => new Promise((resolve, reject) => {
   }
 });
 
+const updateEnvConfig = () => new Promise((resolve, reject) => {
+  try {
+    shell.exec(`echo "STRAPI_ADMIN_LOCALAZY_ENV=" >> .env`, { silent: true }, () => {
+      resolve();
+    });
+  } catch (err) {
+    reject(err);
+  }
+});
+
 console.log(banner);
 
 installSpinner.start(`Installing ${name}${version}`);
 await install();
 installSpinner.succeed();
 
 installSpinner.start(`Creating example ${file} file in ${chalk.bold.green("src/admin")} folder`);
-await updateConfig();
+await createWebpackConfigSample();
+installSpinner.succeed();
+installSpinner.start(`Updating ${chalk.bold.green(".env")} file with ${chalk.bold.green("STRAPI_ADMIN_LOCALAZY_ENV")} variable`);
+await updateEnvConfig();
 installSpinner.succeed();
 installSpinner.succeed(`To run the plugin, you need to update your webpack config in ${chalk.bold.green("src/admin/webpack.config.js")} file`);
 installSpinner.succeed(`Don't forget to build the admin panel with ${chalk.bold.green("npm run build")} command`);