feat(i18n): load language pack asynchronously

superset-frontend/src/preamble.ts

@@ -1,83 +1,99 @@
 /**
  * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
+ * or more contributor license agreements. See the NOTICE file
  * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
  *
  *   http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing,
  * software distributed under the License is distributed on an
  * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
+ * KIND, either express or implied. See the License for the
  * specific language governing permissions and limitations
  * under the License.
  */
+
 import { setConfig as setHotLoaderConfig } from 'react-hot-loader';
 import dayjs from 'dayjs';
 // eslint-disable-next-line no-restricted-imports
-import { configure, makeApi, initFeatureFlags } from '@superset-ui/core';
+import {
+  configure,
+  makeApi,
+  initFeatureFlags,
+  SupersetClient,
+} from '@superset-ui/core';
 import setupClient from './setup/setupClient';
 import setupColors from './setup/setupColors';
 import setupFormatters from './setup/setupFormatters';
 import setupDashboardComponents from './setup/setupDashboardComponents';
 import { User } from './types/bootstrapTypes';
 import getBootstrapData, { applicationRoot } from './utils/getBootstrapData';
 
+configure();
+
+// Set hot reloader config
 if (process.env.WEBPACK_MODE === 'development') {
   setHotLoaderConfig({ logLevel: 'debug', trackTailUpdates: false });
 }
 
-// eslint-disable-next-line import/no-mutable-exports
+// Grab initial bootstrap data
 const bootstrapData = getBootstrapData();
 
-// Configure translation
-if (typeof window !== 'undefined') {
-  configure({ languagePack: bootstrapData.common.language_pack });
-  dayjs.locale(bootstrapData.common.locale);
-} else {
-  configure();
-}
-
-// Configure feature flags
-initFeatureFlags(bootstrapData.common.feature_flags);
-
-// Setup SupersetClient
+// Setup SupersetClient early so we can fetch language pack
 setupClient({ appRoot: applicationRoot() });
 
-setupColors(
-  bootstrapData.common.extra_categorical_color_schemes,
-  bootstrapData.common.extra_sequential_color_schemes,
-);
+// Load language pack before anything else
+(async () => {
+  const lang = bootstrapData.common.locale || 'en';
+  if (lang !== 'en') {
+    try {
+      const { json: languagePack } = await SupersetClient.get({
+        endpoint: `/superset/language_pack/${lang}/`,
+      });
+      // Second call to configure to set the language pack
+      configure({ languagePack });
+      dayjs.locale(lang);
+    } catch (err) {
+      console.warn(
+        'Failed to fetch language pack, falling back to default.',
+        err,
+      );
+      configure();
+      dayjs.locale('en');
+    }
+  }
 
-// Setup number formatters
-setupFormatters(
-  bootstrapData.common.d3_format,
-  bootstrapData.common.d3_time_format,
-);
+  // Continue with rest of setup
+  initFeatureFlags(bootstrapData.common.feature_flags);
 
-setupDashboardComponents();
+  setupColors(
+    bootstrapData.common.extra_categorical_color_schemes,
+    bootstrapData.common.extra_sequential_color_schemes,
+  );
 
-const getMe = makeApi<void, User>({
-  method: 'GET',
-  endpoint: '/api/v1/me/',
-});
+  setupFormatters(
+    bootstrapData.common.d3_format,
+    bootstrapData.common.d3_time_format,
+  );
 
-/**
- * When you re-open the window, we check if you are still logged in.
- * If your session expired or you signed out, we'll redirect to login.
- * If you aren't logged in in the first place (!isActive), then we shouldn't do this.
- */
-if (bootstrapData.user?.isActive) {
-  document.addEventListener('visibilitychange', () => {
-    // we only care about the tab becoming visible, not vice versa
-    if (document.visibilityState !== 'visible') return;
+  setupDashboardComponents();
 
-    getMe().catch(() => {
-      // ignore error, SupersetClient will redirect to login on a 401
-    });
+  const getMe = makeApi<void, User>({
+    method: 'GET',
+    endpoint: '/api/v1/me/',
   });
-}
+
+  if (bootstrapData.user?.isActive) {
+    document.addEventListener('visibilitychange', () => {
+      if (document.visibilityState === 'visible') {
+        getMe().catch(() => {
+          // SupersetClient will redirect to login on 401
+        });
+      }
+    });
+  }
+})();

superset/config.py

@@ -400,7 +400,7 @@ def _try_json_readsha(filepath: str, length: int) -> str | None:
 }
 # Turning off i18n by default as translation in most languages are
 # incomplete and not well maintained.
-LANGUAGES = {}
+# LANGUAGES = {}
 
 
 # Override the default d3 locale format

superset/views/base.py

@@ -62,7 +62,6 @@
 from superset.extensions import cache_manager
 from superset.reports.models import ReportRecipientType
 from superset.superset_typing import FlaskResponse
-from superset.translations.utils import get_language_pack
 from superset.utils import core as utils, json
 from superset.utils.filters import get_dataset_access_filters
 from superset.views.error_handling import json_error_response
@@ -364,7 +363,6 @@ def cached_common_bootstrap_data(  # pylint: disable=unused-argument
         "static_assets_prefix": conf["STATIC_ASSETS_PREFIX"],
         "conf": frontend_config,
         "locale": language,
-        "language_pack": get_language_pack(language),
         "d3_format": conf.get("D3_FORMAT"),
         "d3_time_format": conf.get("D3_TIME_FORMAT"),
         "currencies": conf.get("CURRENCIES"),

superset/views/core.py

@@ -19,11 +19,12 @@
 
 import contextlib
 import logging
+import os
 from datetime import datetime
 from typing import Any, Callable, cast
 from urllib import parse
 
-from flask import abort, flash, g, redirect, request, Response, url_for
+from flask import abort, flash, g, redirect, request, Response, send_file, url_for
 from flask_appbuilder import expose
 from flask_appbuilder.security.decorators import (
     has_access,
@@ -855,7 +856,7 @@
         if original_params := request.query_string.decode():
             url = f"{url}&{original_params}"
         if hash_ := state.get("anchor", state.get("hash")):
             url = f"{url}#{hash_}"
         return redirect(url)
 
     @api
@@ -891,6 +892,23 @@
         datasource.raise_for_access()
         return json_success(json.dumps(sanitize_datasource_data(datasource.data)))
 
+    @event_logger.log_this
+    @expose("/language_pack/<lang>/")
+    def language_pack(self, lang: str) -> FlaskResponse:
+        base_dir = os.path.join(
+            os.path.dirname(__file__),
+            "..",
+            "translations",
+            lang,
+            "LC_MESSAGES",
+            "messages.json",
+        )
+        if os.path.isfile(base_dir):
+            return send_file(base_dir, mimetype="application/json")
+        return json_error_response(
+            "Language pack doesn't exist on the server", status=404
+        )
+
     @event_logger.log_this
     @expose("/welcome/")
     def welcome(self) -> FlaskResponse: