feat: make on-upgrade steps more obvious

Author: ethanndickson

Coder-Desktop/Coder-Desktop/Views/VPN/VPNMenu.swift

@@ -81,30 +81,6 @@ struct VPNMenu<VPN: VPNService, FS: FileSyncDaemon>: View {
                     }.buttonStyle(.plain)
                     TrayDivider()
                 }
-                // This shows when
-                // 1. The user is logged in
-                // 2. The network extension is installed
-                // 3. The VPN is unconfigured
-                // It's accompanied by a message in the VPNState view
-                // that the user needs to reconfigure.
-                if state.hasSession, vpn.state == .failed(.networkExtensionError(.unconfigured)) {
-                    Button {
-                        state.reconfigure()
-                    } label: {
-                        ButtonRowView {
-                            Text("Reconfigure VPN")
-                        }
-                    }.buttonStyle(.plain)
-                }
-                if vpn.state == .failed(.systemExtensionError(.needsUserApproval)) {
-                    Button {
-                        openSystemExtensionSettings()
-                    } label: {
-                        ButtonRowView { Text("Approve in System Settings") }
-                    }.buttonStyle(.plain)
-                } else {
-                    AuthButton<VPN>()
-                }
                 Button {
                     openSettings()
                     appActivate()

Coder-Desktop/Coder-Desktop/Views/VPN/VPNState.swift

@@ -10,17 +10,45 @@ struct VPNState<VPN: VPNService>: View {
         Group {
             switch (vpn.state, state.hasSession) {
             case (.failed(.systemExtensionError(.needsUserApproval)), _):
-                Text("Awaiting System Extension approval")
-                    .font(.body)
-                    .foregroundStyle(.secondary)
+                VStack {
+                    Text("Awaiting System Extension approval")
+                        .font(.headline)
+                        .foregroundColor(.secondary)
+                        .multilineTextAlignment(.center)
+                        .fixedSize(horizontal: false, vertical: true)
+                        .padding(.horizontal, Theme.Size.trayInset)
+                        .padding(.vertical, Theme.Size.trayPadding)
+                        .frame(maxWidth: .infinity)
+                    Button {
+                        openSystemExtensionSettings()
+                    } label: {
+                        Text("Approve in System Settings")
+                    }
+                }
             case (_, false):
                 Text("Sign in to use Coder Desktop")
                     .font(.body)
                     .foregroundColor(.secondary)
             case (.failed(.networkExtensionError(.unconfigured)), _):
-                Text("The system VPN requires reconfiguration.")
-                    .font(.body)
-                    .foregroundStyle(.secondary)
+                VStack {
+                    Text("The system VPN requires reconfiguration")
+                        .font(.headline)
+                        .foregroundColor(.secondary)
+                        .multilineTextAlignment(.center)
+                        .fixedSize(horizontal: false, vertical: true)
+                        .padding(.horizontal, Theme.Size.trayInset)
+                        .padding(.vertical, Theme.Size.trayPadding)
+                        .frame(maxWidth: .infinity)
+                    Button {
+                        state.reconfigure()
+                    } label: {
+                        Text("Reconfigure VPN")
+                    }
+                }.onAppear {
+                    // Show the prompt onAppear, so the user doesn't have to
+                    // open the menu bar an extra time
+                    state.reconfigure()
+                }
             case (.disabled, _):
                 Text("Enable Coder Connect to see workspaces")
                     .font(.body)