diff --git a/browser/ui/webui/brave_vpn/brave_vpn_localized_string_provider.cc b/browser/ui/webui/brave_vpn/brave_vpn_localized_string_provider.cc index b98de934c932..e733f2a2f9a4 100644 --- a/browser/ui/webui/brave_vpn/brave_vpn_localized_string_provider.cc +++ b/browser/ui/webui/brave_vpn/brave_vpn_localized_string_provider.cc @@ -50,6 +50,8 @@ void AddLocalizedStrings(content::WebUIDataSource* html_source) { {"braveVpnLoading", IDS_BRAVE_VPN_LOADING}, {"braveVpnPurchaseFailed", IDS_BRAVE_VPN_PURCHASE_FAILED}, {"braveVpnSelectYourServer", IDS_BRAVE_VPN_SELECT_YOUR_SERVER}, + {"braveVpnServerSelectionCityInfo", + IDS_BRAVE_VPN_SERVER_SELECTION_CITY_INFO}, {"braveVpnServerSelectionSingleCity", IDS_BRAVE_VPN_SERVER_SELECTION_SINGLE_CITY}, {"braveVpnServerSelectionMultipleCities", diff --git a/browser/ui/webui/brave_vpn/vpn_panel_ui.cc b/browser/ui/webui/brave_vpn/vpn_panel_ui.cc index 07218f2da48f..b426b396043b 100644 --- a/browser/ui/webui/brave_vpn/vpn_panel_ui.cc +++ b/browser/ui/webui/brave_vpn/vpn_panel_ui.cc @@ -20,9 +20,11 @@ #include "chrome/browser/ui/browser_list.h" #include "chrome/browser/ui/tabs/tab_strip_model.h" #include "chrome/browser/ui/webui/favicon_source.h" +#include "chrome/browser/ui/webui/plural_string_handler.h" #include "chrome/browser/ui/webui/webui_util.h" #include "components/favicon_base/favicon_url_parser.h" #include "components/grit/brave_components_resources.h" +#include "components/grit/brave_components_strings.h" #include "components/sessions/content/session_tab_helper.h" #include "content/public/browser/web_contents.h" #include "content/public/browser/web_ui.h" @@ -39,6 +41,12 @@ VPNPanelUI::VPNPanelUI(content::WebUI* web_ui) content::WebUIDataSource* source = content::WebUIDataSource::CreateAndAdd( web_ui->GetWebContents()->GetBrowserContext(), kVPNPanelURL); + auto plural_string_handler = std::make_unique(); + plural_string_handler->AddLocalizedString( + "braveVpnServerSelectionCityInfo", + IDS_BRAVE_VPN_SERVER_SELECTION_CITY_INFO); + web_ui->AddMessageHandler(std::move(plural_string_handler)); + brave_vpn::AddLocalizedStrings(source); webui::SetupWebUIDataSource( source, diff --git a/components/brave_vpn/resources/panel/components/select-region-list/index.tsx b/components/brave_vpn/resources/panel/components/select-region-list/index.tsx index 66baecea8d24..ff64ec954d3b 100644 --- a/components/brave_vpn/resources/panel/components/select-region-list/index.tsx +++ b/components/brave_vpn/resources/panel/components/select-region-list/index.tsx @@ -5,6 +5,8 @@ import * as React from 'react' +import usePromise from '$web-common/usePromise' +import { PluralStringProxyImpl } from 'chrome://resources/js/plural_string_proxy.js' import * as S from './style' import Flag from '../flag' import { Region } from '../../api/panel_browser_api' @@ -60,11 +62,18 @@ function ConnectButton(props: ConnectButtonProps) { interface RegionCityProps { cityLabel: string serverInfo: string + serverCount: number selected: boolean connectionButton: React.ReactElement } function RegionCity(props: RegionCityProps) { + const { result: serverInfo } = usePromise( + async () => PluralStringProxyImpl.getInstance().getPluralString( + 'braveVpnServerSelectionCityInfo', + props.serverCount), + [props.serverCount]) + return ( @@ -72,7 +81,7 @@ function RegionCity(props: RegionCityProps) { {props.cityLabel} - {props.serverInfo} + {serverInfo} {props.selected && ( @@ -145,6 +154,7 @@ function RegionContent(props: RegionContentProps) { - - $15 cities - $25 servers + + {SERVER_COUNT, plural, + =1 {# server} + other {# servers} + }