Incorrect state of VPN button when user refreshes credentials

[srirambv]

Description

Incorrect state of VPN button when user refreshes credentials

Steps to Reproduce

1. Refresh VPN credentials from https://account.brave.com
2. Wait for the Panel to load the VPN state
3. Button is disabled but VPN is enabled
4. If you have multiple profiles it shows correctly when launching other profile

Actual result:

Expected result:

Should show correct state

Reproduces how often:

Easy

Brave version (brave://version info)

Brave	1.54.38 Chromium: 114.0.5735.90 (Official Build) nightly (64-bit)
Revision	386bc09e8f4f2e025eddae123f36f6263096ae49-refs/branch-heads/5735@{#1052}
OS	Windows 11 Version 22H2 (Build 22621.1778)

Version/Channel Information:

• Can you reproduce this issue with the current release? Maybe
• Can you reproduce this issue with the beta channel? Maybe
• Can you reproduce this issue with the nightly channel? Yes

Other Additional Information:

• Does the issue resolve itself when disabling Brave Shields? NA
• Does the issue resolve itself when disabling Brave Rewards? NA
• Is the issue reproducible on the latest version of Chrome? NA

Miscellaneous Information:

cc: @bsclifton @brave/qa-team

[simonhong]

Trying to repro.

I can repro with below steps.

1. Disconnect vpn from panel
2. Reset skus state from brave://skus-internals
3. Connect vpn from os vpn settings
4. Load account.brave.com and refresh
5. Launch panel and panel shows as connected but button isn't

Panel gets current connected state when it's launched.
However, toolbar button update its state when it gets connection state change noti.
Before purchased state, os connection api is in already connected state as connected via os vpn settings.
but BraveVpnService doesn't notify this to observers as it's not purchased state.(BraveVpnService::OnConnectionStateChanged())
So, button still don't know current connected state.

[MadhaviSeelam]

Verification PASSED using

Brave | 1.54.91 Chromium: 115.0.5790.56 (Official Build) beta (64-bit)
-- | --
Revision | ebcfb87c1393f36955cfa2f6451a1767e3dc3ee5-refs/branch-heads/5790@{#1193}
OS | Windows 11 Version 22H2 (Build 22621.1848)

Verified using STR from #30881 (comment) & #30881 (comment)

Confirmed VPN button shows correct state (with green check mark ✅) when VPN is connected via VPN panel & OS settings

Confirmed VPN button shows correct state (with gray minus ➖) if VPN is disconnected

Confirmed VPN button shows correct state (with red VPN button) if VPN connection failed

Connected	Disconnected	Failed

[stephendonner]

Verification PASSED using

Brave	1.57.36 Chromium: 115.0.5790.171 (Official Build) beta (x86_64)
Revision	a4bb683f14dc402f5da13707e13559dc4d5ef08b
OS	macOS Version 14.0 (Build 23A5301h)

Shared Steps:

1. install 1.57.36
2. launched Brave
3. loaded account.bravesoftware.com
4. purchased, configured, and connected to Brave VPN
5. confirmed I was connected to Brave VPN
6. toggled Brave VPN to Disconnected
7. confirmed I was Disconnected

Connected

Disconnected

Can't connect to server

(continued from Shared Steps)

1. disabled Wi-Fi
2. disconnected from Brave VPN
3. tried to reconnect by clicking on the VPN icon

SKUS reset / Start free trial

(continued from Shared Steps)

1. opened brave://skus-internals
2. clicked on Reset SKUs state
3. shut down Brave
4. launched Brave
5. clicked on the VPN button in the toolbar

Connected	Disconnected	Can't connect to server	Start free trial

Encountered and logged:

• Brave VPN Disconnect/Connect panel card flips to Start free trial mode when resetting SKUs while still connected #32087