Include localization in index.html

frontend/src/metabase/app.js

@@ -7,6 +7,12 @@ import 'number-to-locale-string';
 import { t } from "c-3po";
 global.t = t;
 
+// set the locale before loading anything else
+import { setLocalization } from "metabase/lib/i18n";
+if (window.MetabaseLocalization) {
+    setLocalization(window.MetabaseLocalization)
+}
+
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Provider } from 'react-redux'
@@ -24,8 +30,6 @@ import { Router, useRouterHistory } from "react-router";
 import { createHistory } from 'history'
 import { syncHistoryWithStore } from 'react-router-redux';
 
-import { loadLocale } from "metabase/lib/i18n";
-
 // remove trailing slash
 const BASENAME = window.MetabaseRoot.replace(/\/+$/, "");
 
@@ -62,9 +66,6 @@ function _init(reducers, getRoutes, callback) {
         window['ga-disable-' + MetabaseSettings.get('ga_code')] = MetabaseSettings.isTrackingEnabled() ? null : true;
     });
 
-    // TODO: detect user's prefered locale
-    loadLocale("de");
-
     if (callback) {
         callback(store);
     }

frontend/src/metabase/lib/i18n.js

@@ -3,11 +3,16 @@ import MetabaseSettings from "metabase/lib/settings";
 import { addLocale, useLocale } from "c-3po";
 import { I18NApi } from "metabase/services";
 
-export async function loadLocale(locale) {
+export async function loadLocalization(locale) {
     // load and parse the locale
     const translationsObject = await I18NApi.locale({ locale });
+    setLocalization(translationsObject);
+}
+
+export function setLocalization(translationsObject) {
+    const locale = window.MetabaseLocalization.headers.language;
 
     // add and set locale with C-3PO
-    addLocale(locale, translationsObject);
+    addLocale(locale, window.MetabaseLocalization);
     useLocale(locale);
 }

resources/frontend_client/index_template.html

@@ -16,6 +16,7 @@
         <script type="text/javascript">
             (function() {
                 window.MetabaseBootstrap = {{{bootstrap_json}}};
+                window.MetabaseLocalization = {{{localization_json}}};
 
                 var configuredRoot = {{{base_href}}};
                 var actualRoot = "/";

src/metabase/routes.clj

@@ -31,13 +31,18 @@
 (defn- load-template [path variables]
   (stencil/render-string (load-file-at-path path) variables))
 
+(defn- load-localization []
+  ;; TODO: detect language
+  (load-file-at-path "frontend_client/app/locales/de.json"))
+
 (defn- entrypoint [entry embeddable? {:keys [uri]}]
   (-> (if (init-status/complete?)
         (load-template (str "frontend_client/" entry ".html")
-                       {:bootstrap_json (escape-script (json/generate-string (public-settings/public-settings)))
-                        :uri            (escape-script (json/generate-string uri))
-                        :base_href      (escape-script (json/generate-string (base-href)))
-                        :embed_code     (when embeddable? (embed/head uri))})
+                       {:bootstrap_json    (escape-script (json/generate-string (public-settings/public-settings)))
+                        :localization_json (escape-script (load-localization))
+                        :uri               (escape-script (json/generate-string uri))
+                        :base_href         (escape-script (json/generate-string (base-href)))
+                        :embed_code        (when embeddable? (embed/head uri))})
         (load-file-at-path "frontend_client/init.html"))
       resp/response
       (resp/content-type "text/html; charset=utf-8")))