Should show connection-error message after disabling network

[stephendonner]

Test plan

See brave/brave-core#13593

Description

Should show connection-error message after disabling network

Steps to Reproduce

1. Complete the steps under Brave Premium login > Login to an existing account which has VPN
2. Unplug your network cable (or disable Wi-Fi)
3. Click the VPN button (top right, next to hamburger button)
4. Click the toggle to ENABLE
5. You should see the error about not being able to connect
6. Plug network cable back in OR enable Wi-Fi (disabled in step 2)
7. Click the Try again button
8. It should work now

Actual result:

It just quickly toggles display from Connecting/Connected to Disconnected, without throwing up the error message about not being able to connect

(Sorry, not the clearest video.)

Expected result:

We should see this error message:

Figma	after restart

Reproduces how often:

100%

Brave version (brave://version info)

Brave	1.39.92 Chromium: 101.0.4951.54 (Official Build) beta (x86_64)
Revision	67da1aeb32cedd27634ca6634fb79cbd85d3f0ab-refs/branch-heads/4951@{#1126}
OS	macOS Version 11.6.5 (Build 20G527)

cc @simonhong @bsclifton @mattmcalister @brave/qa-team

[stephendonner]

Might be related to #22677; in any case, re-check after that fix lands.

[LaurenWags]

Reproduced with 1.39.106 on macOS M1

[GeetaSarvadnya]

++reproduced with Windows 10 x64 - After reconnecting wifi/internet, unable to connect VPN until the browser is restarted

[stephendonner]

Verified PASSED using

Brave	1.41.74 Chromium: 103.0.5060.53 (Official Build) beta (x86_64)
Revision	a1711811edd74ff1cf2150f36ffa3b0dae40b17f-refs/branch-heads/5060@{#853}
OS	macOS Version 12.5 (Build 21G5046c)

Followed my original steps to reproduce.

Confirmed I got an error message while offline, although it's the incorrect/imprecise error about payment, rather than connection status.

I'll log a follow-up issue on the incorrect error dialog (Edit your payment) appearing first when offline, then being replaced by the correct error dialog (Can't connect to server).

[MadhaviSeelam]

Verification PASSED using

Brave | 1.41.74 Chromium: 103.0.5060.53 (Official Build) beta (64-bit)
-- | --
Revision | a1711811edd74ff1cf2150f36ffa3b0dae40b17f-refs/branch-heads/5060@{#853}
OS | Windows 11 Version 21H2 (Build 22000.739)

Followed original steps
Confirmed correct error message displayed while offline (Can't connect to server)

[GeetaSarvadnya]

Error message is shown as expected when WIFI is disconnected but VPN cannot be reconnected in the same session when WIFI is enabled. Logged follow up issue #24331