Updated place page redirect so it keeps the user's locale (#4802)

Fixes issue where searching from a localized place page (like https://datacommons.org/place/country/USA?hl=fr) always sends you to a place page in English * Updated website "base" app to load locale for the header and footer components * Updated flask templates to set locale in base.html's `#metadata-base[data-locale]` to make locale setting consistent with other metadata props. * Added locale loading to dev place page * Added place, units, and stat var labels locale files to explore page. These locale files keep the explore page from showing errors about missing translations during the place page redirect.
datacommonsorg · Dec 18, 2024 · e700af2 · e700af2
1 parent 51b1207
commit e700af2
Show file tree

Hide file tree

Showing 26 changed files with 127 additions and 37 deletions.
diff --git a/server/templates/base.html b/server/templates/base.html
@@ -125,6 +125,7 @@
   data-hide-sub-footer="{{ is_hide_sub_footer }}"
   data-subfooter-extra="{{ subfooter_extra_content|safe }}"
   data-brand-logo-light="{{ brand_logo_light }}"
+  data-locale="{{ locale }}"
 >
 </div>
 

diff --git a/server/templates/custom_dc/custom/base.html b/server/templates/custom_dc/custom/base.html
@@ -66,6 +66,9 @@
 </head>
 
 <body>
+  {# Set page locale. #}
+  <div id="metadata-base" class="d-none" data-locale="{{ locale }}"></div>
+
   <div id="main">
     <header id="main-header">
       <nav class="navbar navbar-dark navbar-expand-lg col" id="main-nav">

diff --git a/server/templates/custom_dc/feedingamerica/base.html b/server/templates/custom_dc/feedingamerica/base.html
@@ -58,6 +58,8 @@
 </head>
 
 <body id="dc-fa">
+  {# Set page locale. #}
+  <div id="metadata-base" class="d-none" data-locale="{{ locale }}"></div>
   <div id="main">
     <header id="main-nav">
       <nav class="navbar navbar-default navbar-expand-md" role="navigation">

diff --git a/server/templates/custom_dc/floret/base.html b/server/templates/custom_dc/floret/base.html
@@ -73,6 +73,8 @@
 </head>
 
 <body>
+  {# Set page locale. #}
+  <div id="metadata-base" class="d-none" data-locale="{{ locale }}"></div>
   <div id="main">
     <main id="{{ main_id }}" class="main-content">
       {% block content %}

diff --git a/server/templates/custom_dc/iitm/base.html b/server/templates/custom_dc/iitm/base.html
@@ -57,6 +57,9 @@
 </head>
 
 <body id="iitm-india">
+  {# Set page locale. #}
+  <div id="metadata-base" class="d-none" data-locale="{{ locale }}"></div>
+
   <div id="main">
 
     {% if is_homepage %}

diff --git a/server/templates/custom_dc/iitm/place_landing.html b/server/templates/custom_dc/iitm/place_landing.html
@@ -34,7 +34,6 @@
 {% block content %}
   <div id="body" class="container">
     <h1 class="mb-4">{% trans %}Place Explorer{% endtrans %}</h1>
-    <h3 id="locale" data-lc="{{ locale }}"></h3>
 
     <div class="search border mb-4">
       <div id="location-field">

diff --git a/server/templates/custom_dc/stanford/base.html b/server/templates/custom_dc/stanford/base.html
@@ -68,6 +68,8 @@
 </head>
 
 <body>
+  {# Set page locale. #}
+  <div id="metadata-base" class="d-none" data-locale="{{ locale }}"></div>
   <div id="main">
     <header id="main-header">
       <nav class="navbar navbar-dark navbar-expand-lg col" id="main-nav">

diff --git a/server/templates/custom_dc/unsdg/base.html b/server/templates/custom_dc/unsdg/base.html
@@ -61,6 +61,8 @@
 </head>
 
 <body id="dc-unsdg">
+  {# Set page locale. #}
+  <div id="metadata-base" class="d-none" data-locale="{{ locale }}"></div>
   <div id="main">
     <div class="header-container">
       <div class="top-container">

diff --git a/server/templates/place.html b/server/templates/place.html
@@ -59,7 +59,6 @@
           <div id="place-heading">
             <h1 id="place-name" data-pn="{{ place_name }}">{{ place_name }}</h1>
             <h3 id="place-type" data-pt="{{ place_type }}">{{ place_type_with_parent_places_links | safe }}</h3>
-            <h3 id="locale" data-lc="{{ locale }}"></h3>
             <div id="place-highlight"></div>
           </div>
           <div class="dcid-and-knowledge-graph">

diff --git a/server/templates/place_landing.html b/server/templates/place_landing.html
@@ -38,7 +38,6 @@
   {% endif -%}
 
   <h1 class="mb-4">{% trans %}Place Explorer{% endtrans %}</h1>
-  <h3 id="locale" data-lc="{{ locale }}"></h3>
 
   <div class="search border mb-4">
     <div id="location-field">

diff --git a/server/templates/ranking.html b/server/templates/ranking.html
@@ -33,7 +33,6 @@
 <div id="place-name" data-pn="{{ place_name }}"></div>
 <div id="per-capita" data-pc="{{ per_capita }}"></div>
 <div id="stat-var" data-sv="{{ stat_var }}"></div>
-<div id="locale" data-lc="{{ locale }}"></div>
 <div id="body" class="container">
   <div class="row mt-3">
     <div id="main-pane" class="col-12"></div>

diff --git a/server/templates/topic_page.html b/server/templates/topic_page.html
@@ -31,7 +31,6 @@
 <div id="metadata" class="d-none" data-place-dcid="{{ place_dcid }}" data-more-places="{{ more_places }}" data-topic-id="{{ topic_id }}">
   <div id="place-name" data-pn="{{ place_name }}"></div>
   <div id="place-type" data-pt="{{ place_type }}"></div>
-  <div id="locale" data-lc="{{ locale }}"></div>
   <div id="topic-config" data-config="{{ page_config }}" data-topics-summary=" {{ topics_summary }}"></div>
 </div>
 {% endblock %}

diff --git a/server/webdriver/shared_tests/place_explorer_i18n_test.py b/server/webdriver/shared_tests/place_explorer_i18n_test.py
@@ -16,6 +16,8 @@
 from selenium.webdriver.support import expected_conditions as EC
 from selenium.webdriver.support.ui import WebDriverWait
 
+from server.webdriver import shared
+
 
 class PlaceI18nExplorerTestMixin():
   """Mixins to test the i18n place explorer page."""
@@ -136,3 +138,23 @@ def test_demographics_link_in_fr(self):
     self.assertEqual(
         self.driver.find_element(By.TAG_NAME, 'h1').text,
         'Classement par Taux de croissance de la population')
+
+  def test_explorer_redirect_place_explorer_keeps_locale(self):
+    """Test the redirection from explore to place explore for single place queries keeps the locale"""
+    usa_explore_fr_locale = '/explore?hl=fr#q=United%20States%20Of%20America'
+
+    start_url = self.url_ + usa_explore_fr_locale
+    self.driver.get(start_url)
+
+    # Assert 200 HTTP code: successful page load.
+    self.assertEqual(shared.safe_url_open(self.driver.current_url), 200)
+
+    # Assert localized page title is correct, and that the query string is set in the url.
+    WebDriverWait(self.driver, 3).until(EC.title_contains('États-Unis'))
+    self.assertTrue("place/country/USA?q=United+States+Of+America&hl=fr" in
+                    self.driver.current_url)
+
+    # Ensure the query string is set in the NL Search Bar.
+    search_bar = self.driver.find_element(By.ID, "query-search-input")
+    self.assertEqual(search_bar.get_attribute("value"),
+                     "United States Of America")
diff --git a/server/webdriver/shared_tests/place_explorer_test.py b/server/webdriver/shared_tests/place_explorer_test.py
@@ -183,7 +183,7 @@ def test_explorer_redirect_place_explorer(self):
     # Assert page title is correct, and that the query string is set in the url.
     WebDriverWait(self.driver, self.TIMEOUT_SEC).until(
         EC.title_contains('United States of America'))
-    self.assertTrue("place/country/USA?q=United%20States%20Of%20America" in
+    self.assertTrue("place/country/USA?q=United+States+Of+America" in
                     self.driver.current_url)
 
     # Ensure the query string is set in the NL Search Bar.

diff --git a/static/js/apps/base/components/header_bar/header_bar_search.tsx b/static/js/apps/base/components/header_bar/header_bar_search.tsx
@@ -23,6 +23,7 @@ import {
   CLIENT_TYPES,
   URL_HASH_PARAMS,
 } from "../../../../constants/app/explore_constants";
+import { localizeLink } from "../../../../i18n/i18n";
 import {
   GA_EVENT_NL_SEARCH,
   GA_PARAM_QUERY,
@@ -82,7 +83,12 @@ const HeaderBarSearch = ({
               [GA_PARAM_SOURCE]:
                 gaValueSearchSource ?? GA_VALUE_SEARCH_SOURCE_HOMEPAGE,
             });
-            window.location.href = `/explore#q=${encodeURIComponent(q)}`;
+            // Localize the url to maintain the current page's locale.
+            const localizedUrl = localizeLink(`/explore`);
+            const localizedUrlWithQuery = `${localizedUrl}#q=${encodeURIComponent(
+              q
+            )}`;
+            window.location.href = localizedUrlWithQuery;
           }
         }}
         placeholder={placeholder}

diff --git a/static/js/apps/base/main.ts b/static/js/apps/base/main.ts
@@ -27,17 +27,19 @@ import { FooterApp } from "./footer_app";
 import { HeaderApp } from "./header_app";
 import { extractLabels, extractRoutes } from "./utilities/utilities";
 
-window.addEventListener("load", (): void => {
-  loadLocaleData("en", [import("../../i18n/compiled-lang/en/units.json")]).then(
-    () => {
-      renderPage();
-    }
-  );
-});
-
-function renderPage(): void {
+window.addEventListener("load", async (): Promise<void> => {
+  // Load locale data
   const metadataContainer = document.getElementById("metadata-base");
+  const locale = metadataContainer.dataset.locale;
+  await loadLocaleData(locale, [
+    import(`../../i18n/compiled-lang/${locale}/units.json`),
+  ]);
+
+  // Render the page
+  renderPage(metadataContainer);
+});
 
+async function renderPage(metadataContainer: HTMLElement): Promise<void> {
   const headerMenu = JSON.parse(
     metadataContainer.dataset.header
   ) as HeaderMenu[];

diff --git a/static/js/apps/explore/app.tsx b/static/js/apps/explore/app.tsx
@@ -32,7 +32,7 @@ import {
   URL_DELIM,
   URL_HASH_PARAMS,
 } from "../../constants/app/explore_constants";
-import { intl } from "../../i18n/i18n";
+import { intl, localizeLink } from "../../i18n/i18n";
 import {
   GA_EVENT_NL_DETECT_FULFILL,
   GA_EVENT_NL_FULFILL,
@@ -251,7 +251,9 @@ export function App(props: AppProps): ReactElement {
         const placeDcid = pageMetadata.place.dcid;
         // If the user has a query, append it to the url
         const url = `/place/${placeDcid}${userQuery ? `?q=${userQuery}` : ""}`;
-        window.location.replace(url);
+        // Localize the url to maintain the current page's locale.
+        const localizedUrl = localizeLink(url);
+        window.location.replace(localizedUrl);
       }
       // Note: for category links, we only use the main-topic.
       for (const category of pageMetadata.pageConfig.categories) {

diff --git a/static/js/apps/explore/main.ts b/static/js/apps/explore/main.ts
@@ -26,17 +26,19 @@ import { URL_HASH_PARAMS } from "../../constants/app/explore_constants";
 import { loadLocaleData } from "../../i18n/i18n";
 import { App } from "./app";
 
-window.addEventListener("load", (): void => {
-  loadLocaleData("en", [import("../../i18n/compiled-lang/en/units.json")]).then(
-    () => {
-      renderPage();
-    }
-  );
-});
-
-function renderPage(): void {
+window.addEventListener("load", async (): Promise<void> => {
   const metadataContainer = document.getElementById("metadata-base");
+  const locale = metadataContainer.dataset.locale;
+  await loadLocaleData(locale, [
+    import(`../../i18n/compiled-lang/${locale}/place.json`),
+    import(`../../i18n/compiled-lang/${locale}/units.json`),
+    import(`../../i18n/compiled-lang/${locale}/stats_var_labels.json`),
+  ]);
+
+  renderPage(metadataContainer);
+});
 
+function renderPage(metadataContainer: HTMLElement): void {
   const hashParams = queryString.parse(window.location.hash);
   //if there is no metadataContainer, we do not hide the searchbar (as we are in a base where the flags
   //are not prepared)

diff --git a/static/js/i18n/i18n.tsx b/static/js/i18n/i18n.tsx
@@ -45,6 +45,12 @@ function loadLocaleData(
   modules: Promise<Record<any, any>>[]
 ): Promise<void> {
   const allMessages = {};
+  // If no i18n modules are provided, just set the locale and return.
+  if (modules.length === 0) {
+    intl = createIntl({ locale, messages: {} }, intlCache);
+    return Promise.resolve();
+  }
+  // Otherwise, set the locale and load the i18n modules.
   return Promise.all(modules)
     .then((messages) => {
       for (const msg of messages) {

diff --git a/static/js/place/chart.tsx b/static/js/place/chart.tsx
@@ -64,7 +64,6 @@ import { defaultDataCommonsClient } from "../utils/data_commons_client";
 import { transformCsvHeader } from "../utils/tile_utils";
 import { ChartEmbed } from "./chart_embed";
 import { getChoroplethData, getGeoJsonData } from "./fetch";
-import { updatePageLayoutState } from "./place";
 
 const CHART_HEIGHT = 194;
 const MIN_CHOROPLETH_DATAPOINTS = 9;
@@ -139,6 +138,10 @@ interface ChartPropType {
    * The chart spec.
    */
   spec?: ChartBlockData;
+  /**
+   * The locale of the page.
+   */
+  locale: string;
 }
 
 interface ChartStateType {
@@ -648,10 +651,7 @@ class Chart extends React.Component<ChartPropType, ChartStateType> {
         break;
       case chartTypeEnum.CHOROPLETH:
         Promise.all([
-          getGeoJsonData(
-            this.props.dcid,
-            document.getElementById("locale").dataset.lc
-          ),
+          getGeoJsonData(this.props.dcid, this.props.locale),
           getChoroplethData(this.props.dcid, this.props.spec),
         ]).then(([geoJsonData, choroplethData]) => {
           if (

diff --git a/static/js/place/chart_block.tsx b/static/js/place/chart_block.tsx
@@ -157,6 +157,7 @@ export class ChartBlock extends React.Component<ChartBlockPropType> {
         <Chart
           key={id}
           id={id}
+          locale={this.props.locale}
           dcid={this.props.dcid}
           chartType={chartTypeEnum.LINE}
           trend={this.props.data.trend}
@@ -261,6 +262,7 @@ export class ChartBlock extends React.Component<ChartBlockPropType> {
         const id = randDomId();
         chartElements.push(
           <Chart
+            locale={this.props.locale}
             chartType={chartTypeEnum.CHOROPLETH}
             enclosedPlaceType={
               isEarth ? EARTH_ENCLOSED_PLACE_TYPE : this.props.childPlaceType
@@ -279,6 +281,7 @@ export class ChartBlock extends React.Component<ChartBlockPropType> {
         const id = randDomId();
         chartElements.push(
           <Chart
+            locale={this.props.locale}
             key={id}
             id={id}
             snapshot={this.props.data.nearby}
@@ -297,6 +300,7 @@ export class ChartBlock extends React.Component<ChartBlockPropType> {
         const id = randDomId();
         chartElements.push(
           <Chart
+            locale={this.props.locale}
             key={id}
             id={id}
             snapshot={this.props.data.child}
@@ -314,6 +318,7 @@ export class ChartBlock extends React.Component<ChartBlockPropType> {
         const id = randDomId();
         chartElements.push(
           <Chart
+            locale={this.props.locale}
             key={id}
             id={id}
             snapshot={this.props.data.similar}
@@ -331,6 +336,7 @@ export class ChartBlock extends React.Component<ChartBlockPropType> {
         const id = randDomId();
         chartElements.push(
           <Chart
+            locale={this.props.locale}
             key={id}
             id={id}
             snapshot={this.props.data.parent}
@@ -349,6 +355,7 @@ export class ChartBlock extends React.Component<ChartBlockPropType> {
         const id = randDomId();
         chartElements.push(
           <Chart
+            locale={this.props.locale}
             key={id}
             id={id}
             snapshot={this.props.data.nearby}
@@ -366,6 +373,7 @@ export class ChartBlock extends React.Component<ChartBlockPropType> {
         const id = randDomId();
         chartElements.push(
           <Chart
+            locale={this.props.locale}
             key={id}
             id={id}
             snapshot={this.props.data.similar}
@@ -384,6 +392,7 @@ export class ChartBlock extends React.Component<ChartBlockPropType> {
           const id = randDomId();
           chartElements.push(
             <Chart
+              locale={this.props.locale}
               key={id}
               id={id}
               snapshot={this.props.data.child}
@@ -410,6 +419,7 @@ export class ChartBlock extends React.Component<ChartBlockPropType> {
           }
           chartElements.push(
             <Chart
+              locale={this.props.locale}
               key={id}
               id={id}
               snapshot={snapshotData}
@@ -430,6 +440,7 @@ export class ChartBlock extends React.Component<ChartBlockPropType> {
         const id = randDomId();
         chartElements.push(
           <Chart
+            locale={this.props.locale}
             chartType={chartTypeEnum.CHOROPLETH}
             enclosedPlaceType={
               isEarth ? EARTH_ENCLOSED_PLACE_TYPE : this.props.childPlaceType
@@ -450,6 +461,7 @@ export class ChartBlock extends React.Component<ChartBlockPropType> {
         const id = randDomId();
         chartElements.push(
           <Chart
+            locale={this.props.locale}
             key={id}
             id={id}
             dcid={this.props.dcid}