Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions server/templates/base.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
3 changes: 3 additions & 0 deletions server/templates/custom_dc/custom/base.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 2 additions & 0 deletions server/templates/custom_dc/feedingamerica/base.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 2 additions & 0 deletions server/templates/custom_dc/floret/base.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
3 changes: 3 additions & 0 deletions server/templates/custom_dc/iitm/base.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
1 change: 0 additions & 1 deletion server/templates/custom_dc/iitm/place_landing.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 2 additions & 0 deletions server/templates/custom_dc/stanford/base.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 2 additions & 0 deletions server/templates/custom_dc/unsdg/base.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
1 change: 0 additions & 1 deletion server/templates/place.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
1 change: 0 additions & 1 deletion server/templates/place_landing.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
1 change: 0 additions & 1 deletion server/templates/ranking.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 0 additions & 1 deletion server/templates/topic_page.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
22 changes: 22 additions & 0 deletions server/webdriver/shared_tests/place_explorer_i18n_test.py
Original file line number Diff line number Diff line change
Expand Up @@ -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."""
Expand Down Expand Up @@ -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")
2 changes: 1 addition & 1 deletion server/webdriver/shared_tests/place_explorer_test.py
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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}
Expand Down
20 changes: 11 additions & 9 deletions static/js/apps/base/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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[];
Expand Down
6 changes: 4 additions & 2 deletions static/js/apps/explore/app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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) {
Expand Down
20 changes: 11 additions & 9 deletions static/js/apps/explore/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
6 changes: 6 additions & 0 deletions static/js/i18n/i18n.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
10 changes: 5 additions & 5 deletions static/js/place/chart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -139,6 +138,10 @@ interface ChartPropType {
* The chart spec.
*/
spec?: ChartBlockData;
/**
* The locale of the page.
*/
locale: string;
}

interface ChartStateType {
Expand Down Expand Up @@ -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 (
Expand Down
12 changes: 12 additions & 0 deletions static/js/place/chart_block.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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
Expand All @@ -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}
Expand All @@ -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}
Expand All @@ -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}
Expand All @@ -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}
Expand All @@ -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}
Expand All @@ -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}
Expand All @@ -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}
Expand All @@ -410,6 +419,7 @@ export class ChartBlock extends React.Component<ChartBlockPropType> {
}
chartElements.push(
<Chart
locale={this.props.locale}
key={id}
id={id}
snapshot={snapshotData}
Expand All @@ -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
Expand All @@ -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}
Expand Down
Loading
Loading