2009544 - Add a VPN connection error state

Status: NEW

(Firefox :: IP Protection, task, P2)

Description

[kpatenio]

Attachment: cannot_connect_to_turn_on.png

Figma: https://www.figma.com/design/R32vqpWWU9ffSCYrWD8tpw/VPN---Firefox-Integration-Q1-2026?node-id=18157-90002&m=dev

This bug is to add a new state UI for when we fail to connect to the VPN after pressing the "Turn on VPN" button.

We'll want to use ipprotection-status-box from Bug 2008854. It should ideally be a matter of slotting the elements we need into that component to get the desired UI.

Connecting

• a "disconnected" type to use the correct background colour (gray)
• headerL10nId and descriptionL10nId properties to render the header and description strings respectively; requires new strings

Also ensure that we have tests verifying the correct UI when we hit this error state.