Fixed country flag is not rendered in vpn panel

browser/ui/BUILD.gn

@@ -702,7 +702,7 @@ source_set("ui") {
     ]
     deps += [
       "//brave/components/brave_vpn/browser",
-      "//brave/components/brave_vpn/resources/panel:brave_vpn_panel_generated",
+      "//brave/components/brave_vpn/resources:panel_resources",
       "//mojo/public/cpp/bindings",
       "//ui/webui:webui",
     ]

browser/ui/webui/brave_vpn/vpn_panel_ui.cc

@@ -14,6 +14,7 @@
 #include "brave/browser/brave_vpn/vpn_utils.h"
 #include "brave/browser/ui/webui/brave_vpn/brave_vpn_localized_string_provider.h"
 #include "brave/components/brave_vpn/resources/panel/grit/brave_vpn_panel_generated_map.h"
+#include "brave/components/brave_vpn/resources/panel/grit/brave_vpn_static_resources_map.h"
 #include "brave/components/constants/webui_url_constants.h"
 #include "chrome/browser/profiles/profile.h"
 #include "chrome/browser/ui/browser.h"
@@ -44,6 +45,8 @@ VPNPanelUI::VPNPanelUI(content::WebUI* web_ui)
       source,
       base::make_span(kBraveVpnPanelGenerated, kBraveVpnPanelGeneratedSize),
       IDR_VPN_PANEL_HTML);
+  source->AddResourcePaths(
+      base::make_span(kBraveVpnStaticResources, kBraveVpnStaticResourcesSize));
 
   source->OverrideContentSecurityPolicy(
       network::mojom::CSPDirectiveName::StyleSrc,

components/brave_vpn/resources/BUILD.gn

@@ -0,0 +1,14 @@
+# Copyright (c) 2023 The Brave Authors. All rights reserved.
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this file,
+# You can obtain one at https://mozilla.org/MPL/2.0/.
+
+group("panel_resources") {
+  # panel is not used on android.
+  assert(!is_android)
+
+  deps = [
+    "panel:brave_vpn_panel_generated",
+    "panel:brave_vpn_static_resources",
+  ]
+}

components/brave_vpn/resources/panel/BUILD.gn

@@ -4,7 +4,9 @@
 # you can obtain one at http://mozilla.org/MPL/2.0/.
 
 import("//brave/components/common/typescript.gni")
+import("//brave/resources/brave_grit.gni")
 import("//mojo/public/tools/bindings/mojom.gni")
+import("//tools/grit/repack.gni")
 
 transpile_web_ui("brave_vpn_panel_ui") {
   entry_points = [ [
@@ -23,3 +25,29 @@ pack_web_resources("brave_vpn_panel_generated") {
   output_dir = "$root_gen_dir/brave/components/brave_vpn/resources/panel"
   deps = [ ":brave_vpn_panel_ui" ]
 }
+
+repack("resources") {
+  sources = [
+    "$root_gen_dir/brave/components/brave_vpn/resources/panel/brave_vpn_panel_generated.pak",
+    "$root_gen_dir/brave/components/brave_vpn/resources/panel/brave_vpn_static.pak",
+  ]
+
+  deps = [
+    ":brave_vpn_panel_generated",
+    ":brave_vpn_static_resources",
+  ]
+
+  output =
+      "$root_gen_dir/brave/components/brave_vpn/brave_vpn_panel_resources.pak"
+}
+
+brave_grit("brave_vpn_static_resources") {
+  source = "static_resources.grd"
+
+  outputs = [
+    "grit/brave_vpn_static_resources.h",
+    "grit/brave_vpn_static_resources_map.cc",
+    "grit/brave_vpn_static_resources_map.h",
+    "brave_vpn_static.pak",
+  ]
+}

components/brave_vpn/resources/panel/components/flag/index.tsx

@@ -2,6 +2,7 @@
 // This Source Code Form is subject to the terms of the Mozilla Public
 // License, v. 2.0. If a copy of the MPL was not distributed with this file,
 // you can obtain one at https://mozilla.org/MPL/2.0/.
+
 import * as React from 'react'
 import styled from 'styled-components'
 
@@ -21,36 +22,22 @@ export const IconBox = styled.span`
   }
 `
 
-const COUNTRIES = ['GB', 'US', 'CH', 'ES', 'SG', 'NL', 'JP', 'DE', 'FR', 'CA', 'AU']
+const COUNTRIES = ['AU', 'CA', 'CH', 'DE', 'ES', 'FR', 'GB', 'JP', 'NL', 'SG', 'US']
 
 function Flag (props: Props) {
-  let [url, setUrl] = React.useState(undefined)
+  const [url, setUrl] = React.useState<undefined | string>(undefined)
 
   React.useEffect(() => {
-    let canceled = false
-    const updateSvgUrl = async () => {
-      const svgUrl = await import(`../../assets/country-flags/${props.countryCode}.svg`)
-      setUrl(svgUrl.default)
-    }
-
-    if (COUNTRIES.includes(props?.countryCode ?? '') && !canceled) {
-      updateSvgUrl()
-    }
-
-    return () => {
-      canceled = true
+    if (COUNTRIES.includes(props?.countryCode ?? '')) {
+      setUrl(`assets/country-flags/${props.countryCode}.svg`)
     }
   }, [props?.countryCode])
 
-  if (url) {
-    return (
-      <IconBox>
-        <img src={url} />
-      </IconBox>
-    )
-  }
-
-  return null
+  return !url ? null : (
+    <IconBox>
+      <img src={url} />
+    </IconBox>
+  )
 }
 
 export default Flag

components/brave_vpn/resources/panel/static_resources.grd

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<grit latest_public_release="0" current_release="1" output_all_resource_defines="false">
+  <outputs>
+    <output filename="grit/brave_vpn_static_resources.h" type="rc_header">
+      <emit emit_type='prepend'></emit>
+    </output>
+    <output filename="brave_vpn_static.pak" type="data_package" />
+    <output filename="grit/brave_vpn_static_resources_map.cc" type="resource_file_map_source" />
+    <output filename="grit/brave_vpn_static_resources_map.h" type="resource_map_header" />
+  </outputs>
+  <release seq="1">
+    <includes>
+      <include name="IDR_BRAVE_VPN_COUNTRY_FLAG_AU_SVG" file="assets/country-flags/AU.svg" type="BINDATA" />
+      <include name="IDR_BRAVE_VPN_COUNTRY_FLAG_CA_SVG" file="assets/country-flags/CA.svg" type="BINDATA" />
+      <include name="IDR_BRAVE_VPN_COUNTRY_FLAG_CH_SVG" file="assets/country-flags/CH.svg" type="BINDATA" />
+      <include name="IDR_BRAVE_VPN_COUNTRY_FLAG_DE_SVG" file="assets/country-flags/DE.svg" type="BINDATA" />
+      <include name="IDR_BRAVE_VPN_COUNTRY_FLAG_ES_SVG" file="assets/country-flags/ES.svg" type="BINDATA" />
+      <include name="IDR_BRAVE_VPN_COUNTRY_FLAG_FR_SVG" file="assets/country-flags/FR.svg" type="BINDATA" />
+      <include name="IDR_BRAVE_VPN_COUNTRY_FLAG_GB_SVG" file="assets/country-flags/GB.svg" type="BINDATA" />
+      <include name="IDR_BRAVE_VPN_COUNTRY_FLAG_JP_SVG" file="assets/country-flags/JP.svg" type="BINDATA" />
+      <include name="IDR_BRAVE_VPN_COUNTRY_FLAG_NL_SVG" file="assets/country-flags/NL.svg" type="BINDATA" />
+      <include name="IDR_BRAVE_VPN_COUNTRY_FLAG_SG_SVG" file="assets/country-flags/SG.svg" type="BINDATA" />
+      <include name="IDR_BRAVE_VPN_COUNTRY_FLAG_US_SVG" file="assets/country-flags/US.svg" type="BINDATA" />
+    </includes>
+  </release>
+</grit>

components/resources/BUILD.gn

@@ -105,10 +105,10 @@ repack("resources") {
   sources += [ "$root_gen_dir/brave/components/brave_wallet/resources/brave_wallet_script_generated.pak" ]
 
   if (enable_brave_vpn && !is_android) {
-    deps += [
-      "//brave/components/brave_vpn/resources/panel:brave_vpn_panel_generated",
+    deps += [ "//brave/components/brave_vpn/resources/panel:resources" ]
+    sources += [
+      "$root_gen_dir/brave/components/brave_vpn/brave_vpn_panel_resources.pak",
     ]
-    sources += [ "$root_gen_dir/brave/components/brave_vpn/resources/panel/brave_vpn_panel_generated.pak" ]
   }
 
   if (ethereum_remote_client_enabled) {

resources/resource_ids.spec

@@ -71,6 +71,9 @@
   "brave/components/brave_rewards/resources/brave_rewards_static_resources.grd": {
     "includes": [49700]
   },
+  "brave/components/brave_vpn/resources/panel/static_resources.grd": {
+    "includes": [49800]
+  },
   # This file is generated during the build.
   "<(SHARED_INTERMEDIATE_DIR)/brave/web-ui-brave_rewards_page/brave_rewards_page.grd": {
     "META": {"sizes": {"includes": [500]}},