Feat/select default locale (#4417)

* fix change default language

* add env var LOCALE_CODE

* npm run change:add

* Update four-news-glow.md

---------

Co-authored-by: Patryk Andrzejewski <vox3r69@gmail.com>

.changeset/four-news-glow.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": minor
+---
+
+add env var LOCALE_CODE

.env.template

@@ -1,3 +1,4 @@
 API_URI=https://demo.saleor.io/graphql/
 APP_MOUNT_URI=/
-APPS_MARKETPLACE_API_URI=https://apps.saleor.io/api/v2/saleor-apps
+APPS_MARKETPLACE_API_URI=https://apps.saleor.io/api/v2/saleor-apps
+LOCALE_CODE="EN"

.storybook/preview-head.html

@@ -9,6 +9,7 @@
     API_URL: "",
     APP_MOUNT_URI: "/",
     IS_CLOUD_INSTANCE: false,
+    LOCALE_CODE: "EN",
   };
   window.process = { cwd: () => "" };
 </script>

Dockerfile

@@ -26,13 +26,15 @@ ARG APPS_MARKETPLACE_API_URI
 ARG APPS_TUNNEL_URL_KEYWORDS
 ARG STATIC_URL
 ARG SKIP_SOURCEMAPS
+ARG LOCALE_CODE
 
 ENV API_URI ${API_URI:-http://localhost:8000/graphql/}
 ENV APP_MOUNT_URI ${APP_MOUNT_URI:-/dashboard/}
 ENV APPS_MARKETPLACE_API_URI ${APPS_MARKETPLACE_API_URI:-https://apps.saleor.io/api/v2/saleor-apps}
 ENV APPS_TUNNEL_URL_KEYWORDS ${APPS_TUNNEL_URL_KEYWORDS}
 ENV STATIC_URL ${STATIC_URL:-/dashboard/}
 ENV SKIP_SOURCEMAPS ${SKIP_SOURCEMAPS:-true}
+ENV LOCALE_CODE ${LOCALE_CODE:-EN}
 RUN npm run build
 
 FROM nginx:stable-alpine as runner

app.json

@@ -14,6 +14,10 @@
     "APP_MOUNT_URI": {
       "description": "URI at which the Dashboard app will be mounted",
       "value": "/"
+    },
+    "LOCALE_CODE": {
+      "description": "Locale code to select default language",
+      "value": "EN"
     }
   },
   "buildpacks": [

cypress/plugins/index.js

@@ -38,6 +38,7 @@ module.exports = async (on, config) => {
   config.env.MAILPITURL = process.env.CYPRESS_MAILPITURL;
   config.env.grepTags = process.env.CYPRESS_grepTags;
   config.baseUrl = process.env.BASE_URL;
+  config.env.LOCALE_CODE = process.env.LOCALE_CODE;
 
   on("before:browser:launch", (_browser = {}, launchOptions) => {
     launchOptions.args.push("--proxy-bypass-list=<-loopback>");

src/components/Locale/Locale.tsx

@@ -112,7 +112,8 @@ function getKeyValueJson(messages: LocaleMessages): Record<string, string> {
   }
 }
 
-const defaultLocale = Locale.EN;
+const localeCode = process.env.LOCALE_CODE || "EN";
+const defaultLocale = Locale[localeCode];
 
 export interface LocaleContextType {
   locale: Locale;
@@ -131,7 +132,7 @@ const LocaleProvider: React.FC = ({ children }) => {
 
   React.useEffect(() => {
     async function changeLocale() {
-      if (locale !== defaultLocale) {
+      if (locale !== Locale.EN) {
         // It seems like Webpack is unable to use aliases for lazy imports
         const mod = await import(`../../../locale/${locale}.json`);
         setMessages(mod.default);

src/index.html

@@ -23,6 +23,7 @@
         APPS_MARKETPLACE_API_URI: "<%= APPS_MARKETPLACE_API_URI %>",
         APPS_TUNNEL_URL_KEYWORDS: "<%= APPS_TUNNEL_URL_KEYWORDS %>",
         IS_CLOUD_INSTANCE: "<%= IS_CLOUD_INSTANCE %>",
+        LOCALE_CODE: "<%= LOCALE_CODE %>",
       };
     </script>
   </head>

testUtils/setup.ts

@@ -27,6 +27,7 @@ window.__SALEOR_CONFIG__ = {
   APPS_MARKETPLACE_API_URI: "http://localhost:3000",
   APPS_TUNNEL_URL_KEYWORDS: ".ngrok.io;.saleor.live",
   IS_CLOUD_INSTANCE: "true",
+  LOCALE_CODE: "EN",
 };
 
 process.env.TZ = "UTC";

types.d.ts

@@ -13,6 +13,7 @@ declare interface Window {
   __SALEOR_CONFIG__: {
     API_URL: string;
     APP_MOUNT_URI: string;
+    LOCALE_CODE?: string;
     APPS_MARKETPLACE_API_URI?: string;
     APPS_TUNNEL_URL_KEYWORDS?: string;
     IS_CLOUD_INSTANCE?: string;

vite.config.js

@@ -41,6 +41,7 @@ export default defineConfig(({ command, mode }) => {
     DEMO_MODE,
     CUSTOM_VERSION,
     FLAGS_SERVICE_ENABLED,
+    LOCALE_CODE,
   } = env;
 
   const base = STATIC_URL ?? "/";
@@ -62,6 +63,7 @@ export default defineConfig(({ command, mode }) => {
           APPS_MARKETPLACE_API_URI,
           APPS_TUNNEL_URL_KEYWORDS,
           IS_CLOUD_INSTANCE,
+          LOCALE_CODE,
           injectOgTags:
             DEMO_MODE &&
             `
@@ -142,6 +144,7 @@ export default defineConfig(({ command, mode }) => {
         ENVIRONMENT,
         DEMO_MODE,
         CUSTOM_VERSION,
+        LOCALE_CODE,
       },
     },
     build: {