Get region list from vpn service to webui

.storybook/BUILD.gn

@@ -10,5 +10,8 @@ group("storybook") {
   # Explicitly defined here so that even when those targets
   # are disabled in a regular brave build due to build flags,
   # they will be generated before storybook is compiled.
-  deps = [ "//ui/webui/resources/js:cr.m" ]
+  deps = [
+    "//brave/components/brave_vpn:mojom_js",
+    "//ui/webui/resources/js:cr.m",
+  ]
 }

components/brave_vpn/BUILD.gn

@@ -11,7 +11,6 @@ preprocess_folder = "preprocessed"
 preprocess_mojo_manifest = "preprocessed_mojo_manifest.json"
 
 static_library("brave_vpn") {
-  assert(enable_brave_vpn)
   sources = [
     "brave_vpn_service.cc",
     "brave_vpn_service.h",

components/brave_vpn/brave_vpn.mojom

@@ -29,12 +29,6 @@ interface ServiceObserver {
   OnPurchasedStateChanged(PurchasedState state);
 };
 
-struct Region {
-  string continent;
-  string name;
-  string name_pretty;
-};
-
 // Browser-side handler for vpn service things
 interface ServiceHandler {
   GetConnectionState() => (ConnectionState state);
@@ -43,7 +37,9 @@ interface ServiceHandler {
   CreateVPNConnection();
   Connect();
   Disconnect();
+  // Gets all region from internal cache which is fetched from Guardian API
   GetAllRegions() => (array<Region> regions);
+  // Gets region based on user's device timezone
   GetDeviceRegion() => (Region device_region);
   GetSelectedRegion() => (Region current_region);
   SetSelectedRegion(Region region);
@@ -73,3 +69,9 @@ enum PurchasedState {
   PURCHASED,
   EXPIRED,
 };
+
+struct Region {
+  string continent;
+  string name;
+  string name_pretty;
+};

components/brave_vpn/brave_vpn_service_desktop.cc

@@ -295,6 +295,13 @@ bool BraveVpnServiceDesktop::ParseAndCacheRegionList(base::Value region_value) {
     regions_.push_back(region);
   }
 
+  // Sort region list alphabetically
+  std::sort(regions_.begin(), regions_.end(),
+            [](brave_vpn::mojom::Region& a, brave_vpn::mojom::Region& b) {
+              return (a.name_pretty < b.name_pretty);
+            });
+
+  // If we can't get region list, we can't determine device region.
   if (regions_.empty())
     return false;
 

components/brave_vpn/resources/panel/BUILD.gn

@@ -5,10 +5,6 @@
 
 import("//brave/components/common/typescript.gni")
 import("//mojo/public/tools/bindings/mojom.gni")
-import("//tools/grit/preprocess_if_expr.gni")
-
-preprocess_folder = "preprocessed"
-preprocess_panel_manifest = "preprocessed_panel_manifest.json"
 
 transpile_web_ui("brave_vpn_panel_ui") {
   entry_points = [ [
@@ -17,8 +13,6 @@ transpile_web_ui("brave_vpn_panel_ui") {
       ] ]
   resource_name = "brave_vpn_panel"
   deps = [
-    ":preprocess_panel",
-    ":vpn_panel_api_proxy",
     "//brave/components/brave_vpn:mojom_js",
     "//brave/components/brave_vpn:preprocess_mojo",
   ]
@@ -29,18 +23,3 @@ pack_web_resources("brave_vpn_panel_generated") {
   output_dir = "$root_gen_dir/brave/components/brave_vpn/resources/panel"
   deps = [ ":brave_vpn_panel_ui" ]
 }
-
-preprocess_if_expr("preprocess_panel") {
-  in_folder = "./"
-  out_folder = "$target_gen_dir/$preprocess_folder"
-  out_manifest = "$target_gen_dir/$preprocess_panel_manifest"
-  in_files = [ "vpn_panel_api_proxy.js" ]
-}
-
-js_library("vpn_panel_api_proxy") {
-  deps = [
-    "//brave/components/brave_vpn:mojom_js_library_for_compile",
-    "//ui/webui/resources/js:cr.m",
-    "//url/mojom:url_mojom_gurl_js_library_for_compile",
-  ]
-}

components/brave_vpn/resources/panel/api/panel_browser_api.ts

@@ -0,0 +1,7 @@
+// Copyright (c) 2021 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 http://mozilla.org/MPL/2.0/.
+
+// Provide access to all the generated types
+export * from 'gen/brave/components/brave_vpn/brave_vpn.mojom.m.js'

components/brave_vpn/resources/panel/api/region_interface.ts

@@ -0,0 +1,10 @@
+export interface Region {
+  continent: string
+  name: string
+  namePretty: string
+}
+export interface RegionState {
+  all?: Array<Region>,
+  current?: Region,
+  hasError: boolean
+}

components/brave_vpn/resources/panel/vpn_panel_api_proxy.d.ts → components/brave_vpn/resources/panel/api/vpn_panel_api_proxy.d.ts

@@ -2,7 +2,9 @@
 // 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 http://mozilla.org/MPL/2.0/.
-import { ConnectionState } from './types/connection_state'
+import { ConnectionState } from './panel_browser_api'
+import { Region } from './region_interface'
+
 export default class APIProxy {
   static getInstance: () => APIProxy
   showUI: () => {}
@@ -12,12 +14,22 @@ export default class APIProxy {
   connect: () => {}
   disconnect: () => {}
   addVPNObserver: (obj: ServiceObserver) => {}
+  getAllRegions: () => Promise<RegionResponse>
+  getSelectedRegion: () => Promise<DeviceRegionResponse>
+  setSelectedRegion: (region: Region) => {}
 }
 interface ServiceObserver {
-  onConnectionCreated?: Function
-  onConnectionRemoved?: Function
-  onConnectionStateChanged?: Function
+  onConnectionCreated: Function
+  onConnectionRemoved: Function
+  onConnectionStateChanged: Function
+  onPurchasedStateChanged: Function
 }
 interface StateResponse {
   state: ConnectionState
 }
+interface RegionResponse {
+  regions: Array<Region>
+}
+interface DeviceRegionResponse {
+  currentRegion: Region
+}

components/brave_vpn/resources/panel/vpn_panel_api_proxy.js → components/brave_vpn/resources/panel/api/vpn_panel_api_proxy.js

@@ -63,6 +63,18 @@ export default class VpnPanelApiProxyImpl {
     return this.vpnService.disconnect();
   }
 
+  getAllRegions() {
+    return this.vpnService.getAllRegions();
+  }
+
+  getSelectedRegion() {
+    return this.vpnService.getSelectedRegion();
+  }
+
+  setSelectedRegion(region) {
+    return this.vpnService.setSelectedRegion(region);
+  }
+
   addVPNObserver(obj) {
     const serviceObserverReceiver = new braveVpn.mojom.ServiceObserverReceiver(obj)
     this.vpnService.addObserver(serviceObserverReceiver.$.bindNewPipeAndPassRemote())

components/brave_vpn/resources/panel/components/error-panel/index.tsx

@@ -3,11 +3,11 @@ import * as S from './style'
 import { Button } from 'brave-ui'
 import { AlertCircleIcon } from 'brave-ui/components/icons'
 import locale from '../../constants/locale'
-
+import { RegionState } from '../../api/region_interface'
 interface Props {
   onTryAgainClick: Function
   onChooseServerClick: Function
-  region: string
+  region: RegionState
 }
 
 function ErrorPanel (props: Props) {
@@ -21,7 +21,8 @@ function ErrorPanel (props: Props) {
           <AlertCircleIcon color='#84889C' />
         </S.IconBox>
         <S.ReasonTitle>{locale.cantConnectError}</S.ReasonTitle>
-        <S.ReasonDesc>Brave Firewall + VPN couldn't connect to the {props.region} server.
+        <S.ReasonDesc>Brave Firewall + VPN couldn't connect to the{' '}
+          {props.region?.current?.namePretty} server.
           You can try again, or choose another.</S.ReasonDesc>
         <S.ActionArea>
             <Button

components/brave_vpn/resources/panel/components/main-panel/index.tsx

@@ -4,12 +4,12 @@ import StatusIndicator from '../../components/status-indicator'
 import PanelBox from '../../components/panel-box'
 import Toggle from '../../components/toggle'
 import { SettingsAdvancedIcon, CaratStrongRightIcon } from 'brave-ui/components/icons'
-import { ConnectionState } from '../../types/connection_state'
-
+import { ConnectionState } from '../../api/panel_browser_api'
+import { Region } from '../../api/region_interface'
 interface Props {
   isOn: boolean
   status: ConnectionState
-  region: string
+  region: Region
   onToggleClick: () => void
   onSelectRegionButtonClick: () => void
 }
@@ -41,7 +41,7 @@ function MainPanel (props: Props) {
           type='button'
           onClick={props.onSelectRegionButtonClick}
         >
-          <S.RegionLabel>{props.region}</S.RegionLabel>
+          <S.RegionLabel>{props.region.namePretty}</S.RegionLabel>
           <CaratStrongRightIcon />
         </S.RegionSelectorButton>
       </S.PanelContent>

components/brave_vpn/resources/panel/components/select-region-list/index.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react'
+import * as S from './style'
+import { Button, Radio } from 'brave-ui'
+import { CaratStrongLeftIcon } from 'brave-ui/components/icons'
+import { Region } from '../../api/region_interface'
+import locale from '../../constants/locale'
+interface Props {
+  onDone: Function
+  onRegionClick: Function
+  onConnectClick: Function
+  regions: Array<Region>
+  selectedRegion: Region
+}
+
+function SelectRegion (props: Props) {
+  // TODO(nullhook): Scroll to the selected radio input when this component loads
+  // TODO(nullhook): Add search region functionality
+  const handleGoBackClick = () => {
+    props.onDone()
+  }
+
+  const handleItemClick = (currentRegion: Region) => {
+    props.onRegionClick(currentRegion)
+  }
+
+  const handleConnect = () => {
+    props.onConnectClick()
+  }
+
+  return (
+    <S.Box>
+      <S.PanelContent>
+        <S.PanelHeader>
+          <S.BackButton
+            type='button'
+            onClick={handleGoBackClick}
+          >
+            <CaratStrongLeftIcon />
+          </S.BackButton>
+        </S.PanelHeader>
+        <S.RegionList>
+          <Radio
+            value={{ [props.selectedRegion.name]: true }}
+            size={'small'}
+            disabled={false}
+          >
+            {props.regions.map((entry: Region, i: number) => (
+              <div
+                key={i}
+                data-value={entry.name}
+              >
+                <S.RegionLabel
+                  onClick={handleItemClick.bind(this, entry)}
+                >
+                  {entry.namePretty}
+                </S.RegionLabel>
+              </div>
+            ))}
+          </Radio>
+        </S.RegionList>
+        <S.ActionArea>
+          <Button
+            onClick={handleConnect}
+            level='primary'
+            type='accent'
+            brand='rewards'
+            text={locale.connectLabel}
+          />
+        </S.ActionArea>
+      </S.PanelContent>
+    </S.Box>
+  )
+}
+
+export default SelectRegion

components/brave_vpn/resources/panel/components/select-region/style.ts → components/brave_vpn/resources/panel/components/select-region-list/style.ts

@@ -18,7 +18,7 @@ export const PanelHeader = styled.section`
 `
 
 export const PanelContent = styled.section`
-  padding: 0 0 25px 0;
+  padding: 0 0 24px 0;
 `
 
 export const RegionList = styled.div`
@@ -66,3 +66,13 @@ export const BackButton = styled.button`
     fill: ${(p) => p.theme.color.interactive05}
   }
 `
+
+export const ActionArea = styled.div`
+  box-sizing: border-box;
+  width: 100%;
+  padding: 18px 18px 0 18px;
+
+  button {
+    width: 100%;
+  }
+`

components/brave_vpn/resources/panel/components/status-indicator/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as S from './style'
 import locale from '../../constants/locale'
-import { ConnectionState } from '../../types/connection_state'
+import { ConnectionState } from '../../api/panel_browser_api'
 import { LoaderIcon } from 'brave-ui/components/icons'
 interface Props {
   status: ConnectionState