[Desktop] Add advanced server selection UX to Brave VPN

[mattmcalister]

With more location data and flags available now we can improve the VPN server selection UX on all platforms.

See Figma for Desktop: https://www.figma.com/file/J4LKBMftiWhqromRWfUQLG/VPN-design?type=design&node-id=5-6843&mode=design&t=xFQ9Ux13hVU9JeSb-4

[bsclifton]

iOS #36409
Android #36277

[MadhaviSeelam]

Verification PASSED using

Brave | 1.71.101 Chromium: 129.0.6668.70 (Official Build) beta (64-bit)
-- | --
Revision | 734075a5959db3e93d6def81a15e1fc6c2609fc2
OS | Windows 11 Version 23H2 (Build 22631.4249)

Filed: #41395

New Install - PASSED

1. Installed 1.71.101
2. launched Brave
3. opened account.bravesoftware.com with basic auth
4. subscribed to VPN as a new user ([email protected])
5. verified credentials successfully loaded message shown on the subscription page
6. clicked VPN button to open vpn panel
7. confirmed the main panel shows USA was selected as a default and shows Optimal as sub label
8. expanded server selection panel
9. clicked country Romania entry
10. confirmed it shows Optimal sub entry and its cities "Bucharest 10 servers"
11. hovered over and clicked connect on Optimal sub entry
12. confirmed Romania is displayed along Optimal text in the VPN panel
13. confirmed a check mark shown next to optimal sub label
14. confirmed VPN is connected to Romanian server via whatismyipaddress.com
15. opened VPN server panel
16. selected France in the panel for country selection
17. clicked down arrow
18. hover over the city Lille and clicked Connect
19. confirmed main panel's sub label has city name "Lille" with country name France
20. selected Automatic entry on top of the server selection panel
21. When clicks it, guardian picks proper server based on current timezone's region - I got USA optimal not timezone based server - This is expected behavior

step 5	step 7	step 9	step 9-11	step 12	step 13	step 14	step 18	step 19	step 20	step 21

Dark mode

example	example	example	example	example	example	example

Upgrade - FAILED

1. Installed 1.70.123
2. launched Brave
3. opened account.bravesoftware.com with basic auth
4. logged into Brave VPN as an existing (above) user ([email protected])
5. clicked `Refresh Firewall + VPN
6. verified VPN credentials message is shown on the subscription page
7. clicked VPN button
8. confirmed the VPN panel shows USA(West) was selected as a default
9. expanded server selection panel and hovered over the country
10. verified Connect button is shown as expected
11. enabled VPN
12. closed Brave
13. rename the profile to Brave-Browser-Beta
14. installed 1.71.101
15. relaunch Brave
16. clicked VPN button
17. confirmed vpn panel has shown the country name and flag (USA) with sub label of Optimal
18. expanded the VPN Panel
19. server selection panel shows USA 10 cities - 110 servers
20. scrolled up and hovered over Australia
21. confirmed 1 city - 8 servers` text shown with connect button
22. clicked Connect button
23. confirmed the panel shows Australia along with Optimal sub label
24. clicked > to open main server selection panel and hovered over Austria
25. confirmed it shows Optimal sub entry and its city "Vienna 10 servers"
26. hovered over and clicked connect on Optimal sub entry
27. confirmed Austria is displayed along Optimal text in the VPN panel
28. confirmed a check mark shown next to optimal sub label
29. switched to Canada and it failed with Cant connect to server error

step 5	step 6	step 8	step 10	step 11	step 17	step 19	step 20	step 22	step 23	step 28	step 29

[GeetaSarvadnya]

Verification PASSED using

Brave | 1.71.112 Chromium: 130.0.6723.44 (Official Build) (arm64)
-- | --
Revision | 7d51df656b247f9432ee714a6d160142a1e11c13
OS | macOS Version 12.5 (Build 21G72)

• Logged Connect button is overlapping on Automatic- Use the best server available text #41616

New Install - PASSED

1. Installed 1.71.112
2. launched Brave
3. opened account.bravesoftware.com with basic auth
4. subscribed to VPN as a new user ([email protected])
5. verified credentials successfully loaded message shown on the subscription page
6. clicked VPN button to open vpn panel
7. confirmed the main panel shows Singapore was selected as a default and shows Optimal as sub label
8. expanded server selection panel
9. clicked country Spain entry
10. confirmed it shows Optimal sub entry and its cities "2 cities and 9 servers"
11. hovered over and clicked connect on Optimal sub entry
12. confirmed Spain is displayed along Optimal text in the VPN panel
13. confirmed a check mark shown next to optimal sub label
14. confirmed VPN is connected to Spain server via whatismyipaddress.com
15. opened VPN server panel
16. selected Switzerland in the panel for country selection
17. clicked down arrow
18. hover over the city Zurich and clicked Connect
19. confirmed main panel's sub label has city name "Zurich" with country name Switzerland
20. selected Automatic entry on top of the server selection panel
21. When clicks it, guardian picks proper server based on current timezone's region - I got Singapore optimal not timezone based server.

step 5	step 7	step 8	step 9-11	step 12	step 13	step 14	step 18	step 19	step 20	step 21

Dark mode

example	example	example	example	example	example	example	example	example	example	example	example

Upgrade - PASSED

1. Installed 1.70.126
2. launched Brave
3. opened account.bravesoftware.com with basic auth
4. logged into Brave VPN as an existing or new account
5. clicked `Refresh Firewall + VPN
6. verified VPN credentials message is shown on the subscription page
7. clicked VPN button
8. confirmed the VPN panel shows Singapore was selected as a default
9. expanded server selection panel and hovered over the country
10. verified Connect button is shown as expected
11. enabled VPN
12. closed Brave
13. rename the profile to Brave-Browser-Beta (Skipped this step)
14. installed and upgraded the profile to 1.71.112
15. relaunch Brave
16. clicked VPN button
17. confirmed vpn panel has shown the country name and flag (Singapore) with sub label of Optimal
18. expanded the VPN Panel
19. server selection panel shows Singapore 1 cities - 10 servers
20. scrolled up and hovered over Sweden
21. confirmed 1 city - 10 servers` text shown with connect button
22. clicked Connect button
23. confirmed the panel shows Sweden along with Optimal sub label
24. clicked > to open main server selection panel and hovered over Austria
25. confirmed it shows Optimal sub entry and its city "Vienna 10 servers"
26. hovered over and clicked connect on Optimal sub entry
27. confirmed Austria is displayed along Optimal text in the VPN panel
28. confirmed a check mark shown next to optimal sub label
29. switched to Canada without any issues

Step 5	Step 6	Step 8	Step 10	Step 11	Step 17	Step 19	Step 20	Step 22	Step 23	Step 28	Step 29

[simonhong]

@GeetaSarvadnya Can you test Upgrade scenario with #41395 (comment) instead of directory renaming?

[LaurenWags]

Verified with

Brave | 1.71.112 Chromium: 130.0.6723.44 (Official Build) (x86_64)
-- | --
Revision | 7d51df656b247f9432ee714a6d160142a1e11c13
OS | macOS Version 14.7 (Build 23H124)

New Install - PASSED

Note, I removed previous VPN configs and restarted machine prior to testing this case.

1. Installed 1.71.112
2. launched Brave
3. opened account.bravesoftware.com with basic auth
4. subscribed to VPN as a new user
5. verified credentials successfully loaded message shown on the subscription page

6. clicked VPN button to open vpn panel
7. confirmed the main panel shows US was selected as a default and shows Optimal as sub label

Dark	Light

8. expanded server selection panel

Dark	Light

9. clicked country Spain entry
10. confirmed it shows Optimal sub entry and its cities "2 cities and 9 servers"

Dark	Light

11. hovered over and clicked connect on Optimal sub entry
12. confirmed Spain is displayed along Optimal text in the VPN panel
13. confirmed a check mark shown next to optimal sub label

Dark	Light

14. confirmed VPN is connected to Spain server via whatismyipaddress.com

Dark	Light

15. opened VPN server panel
16. selected France in the panel for country selection
17. clicked down arrow
18. hover over the city Paris and clicked Connect
19. confirmed main panel's sub label has city name "Paris" with country name France
20. Confirmed VPN is connected to Paris server via whatismyipaddress.com

Dark	Light

21. selected Automatic entry on top of the server selection panel
22. When clicks it, guardian picks proper server based on current timezone's region - I got US optimal server.

Dark	Light

23. Opened VPN panel and opened the country selection list
24. Clicked on the "Connect" button next to "Japan" (did not choose a city from the list or choose "Optimal")
25. Confirmed "Japan" is shown in the VPN panel with "Optimal" as the sublabel

Dark	Light

26. Confirmed if I open VPN panel, expand "Japan" and select "Tokyo", then "Japan" is shown in the VPN panel with "Tokyo" as the sublabel:

Dark	Light

Upgrade - PASSED

Note, I removed previous VPN configs and restarted machine prior to testing this case.

1. Installed 1.70.126
2. launched Brave
3. opened account.bravesoftware.com with basic auth
4. logged into Brave VPN as an existing or new account
5. verified VPN credentials message is shown on the subscription page

6. clicked VPN button
7. confirmed the VPN panel shows US (East) was selected as a default

8. expanded server selection panel
9. only countries available in the list, no way to drill in to select cities
10. enabled VPN for default region of US (East)

11. Upgraded the profile to 1.71.112 (using test channel)

12. relaunch Brave
13. clicked VPN button
14. confirmed vpn panel has shown the country name and flag (US) with sub label of Optimal

15. expanded the VPN Panel
16. server selection panel shows US 10 cities - 110 servers

17. scrolled up and hovered over Sweden
18. confirmed 1 city - 10 servers text shown with connect button

19. clicked Connect button
20. confirmed the panel shows Sweden along with Optimal sub label
21. confirmed Sweden IP

22. On VPN panel clicked > to open main server selection panel and expanded Austria
23. confirmed it shows Optimal sub entry and its city "Vienna 10 servers"

24. Clicked on "Vienna" entry
25. confirmed Austria is displayed along Vienna sublabel text in the VPN panel

26. Confirmed able to switch to Canada without any issues

[GeetaSarvadnya]

Verification PASSED on

Brave | 1.71.112 Chromium: 130.0.6723.44 (Official Build) (64-bit)
-- | --
Revision | 7d51df656b247f9432ee714a6d160142a1e11c13
OS | Windows 10 Version 22H2 (Build 19045.5011)

New Install - PASSED

1. Installed 1.71.112
2. launched Brave
3. opened account.bravesoftware.com with basic auth
4. subscribed to VPN as a new user ([email protected])
5. verified credentials successfully loaded message shown on the subscription page
6. clicked VPN button to open vpn panel
7. confirmed the main panel shows Singapore was selected as a default and shows Optimal as sub label
8. expanded server selection panel
9. clicked country Spain entry
10. confirmed it shows Optimal sub entry and its cities "2 cities and 9 servers"
11. hovered over and clicked connect on Optimal sub entry
12. confirmed Spain is displayed along Optimal text in the VPN panel
13. confirmed a check mark shown next to optimal sub label
14. confirmed VPN is connected to Spain server via whatismyipaddress.com
15. opened VPN server panel
16. selected Switzerland in the panel for country selection
17. clicked down arrow
18. hover over the city Zurich and clicked Connect
19. confirmed main panel's sub label has city name "Zurich" with country name Switzerland
20. selected Automatic entry on top of the server selection panel
21. When clicks it, guardian picks proper server based on current timezone's region - I got Singapore optimal not timezone based server.

step 5	step 7	step 8	step 9-11	step 12	step 13	step 14	step 18	step 19	step 20	step 21

Dark mode

example	example	example	example	example	example

Upgrade - PASSED

1. Installed 1.70.126
2. launched Brave
3. opened account.bravesoftware.com with basic auth
4. logged into Brave VPN as an existing or new account
5. clicked `Refresh Firewall + VPN
6. verified VPN credentials message is shown on the subscription page
7. clicked VPN button
8. confirmed the VPN panel shows Singapore was selected as a default
9. expanded server selection panel and hovered over the country
10. verified Connect button is shown as expected
11. enabled VPN
12. closed Brave
13. rename the profile to Brave-Browser-Beta (Skipped this step)
14. installed and upgraded the profile to 1.71.112
15. relaunch Brave
16. clicked VPN button
17. confirmed vpn panel has shown the country name and flag (Singapore) with sub label of Optimal
18. expanded the VPN Panel
19. server selection panel shows Singapore 1 cities - 10 servers
20. scrolled up and hovered over Sweden
21. confirmed 1 city - 10 servers` text shown with connect button
22. clicked Connect button
23. confirmed the panel shows Sweden along with Optimal sub label
24. clicked > to open main server selection panel and hovered over Austria
25. confirmed it shows Optimal sub entry and its city "Vienna 10 servers"
26. hovered over and clicked connect on Optimal sub entry
27. confirmed Austria is displayed along Optimal text in the VPN panel
28. confirmed a check mark shown next to optimal sub label
29. switched to Canada without any issues

Step 5	Step 6	Step 8	Step 10	Step 11	Step 17	Step 19	Step 20	Step 22	Step 23	Step 28	Step 29

[MadhaviSeelam]

Verification PASSED using

Brave | 1.71.112 Chromium: 130.0.6723.44 (Official Build) (64-bit)
-- | --
Revision | 7d51df656b247f9432ee714a6d160142a1e11c13
OS | Windows 11 Version 23H2 (Build 22631.4317)

New Install - PASSED

1. Installed 1.71.112
2. launched Brave
3. opened account.bravesoftware.com with basic auth
4. subscribed to VPN as an existing user ([email protected])
5. verified credentials successfully loaded message shown on the subscription page
6. clicked VPN button to open vpn panel
7. confirmed the main panel shows USA was selected as a default and shows Optimal as sub label
8. expanded server selection panel
9. clicked country Romania entry
10. confirmed it shows Optimal sub entry and its cities "Bucharest 10 servers"
11. hovered over and clicked connect on Optimal sub entry
12. confirmed Romania is displayed along Optimal text in the VPN panel
13. confirmed a check mark shown next to optimal sub label
14. confirmed VPN is connected to Romanian server via whatismyipaddress.com
15. opened VPN server panel
16. selected South Africa in the panel for country selection
17. clicked down arrow
18. hover over the city Johannesburg and clicked Connect
19. confirmed main panel's sub label has city name "Johannesburg" with country name SouthAfrica
20. loaded whatismyipaddress.com and it shows correct region
21. selected Automatic entry on top of the server selection panel
22. When clicks it, guardian picks proper server based on current timezone's region - I got USA optimal not timezone based server - This is expected behavior

step 1	step 7	step 9-11	step 14	step 18	step 20	step 21	step 22

Upgrade - PASSED

1. Installed 1.70.123
2. launched Brave
3. opened account.bravesoftware.com with basic auth
4. logged into Brave VPN as an existing (above) user ([email protected])
5. clicked `Refresh Firewall + VPN
6. verified VPN credentials message is shown on the subscription page
7. clicked VPN button
8. confirmed the VPN panel shows USA(West) was selected as a default
9. enabled VPN
10. installed 1.71.112
11. upgraded via brave://settings/help
12. clicked VPN button
13. confirmed vpn panel has shown the country name and flag (USA) with sub label of Optimal
14. enabled and expanded the VPN Panel
15. server selection panel shows USA 10 cities - 110 servers
16. scrolled up and hovered over Australia
17. confirmed 1 city - 8 servers` text shown with connect button
18. opened whatismyipaddress.com and correct region is shown
19. switched to Canada and it failed with Cant connect to server error

step 1	step 5	step 6	step 8-9	step 10 -11	step 12-13	step 15	step 18	step 19