From 82da3fd64b78a5eda1997cc1c410496c22b92582 Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Fri, 4 Sep 2026 18:29:10 -0300
Subject: [PATCH] Show disconnect alongside reconnect on lost social
 connections (#332)

When a social account's token expired or the connection was lost, the
Connections card only offered "Reconnect". Users who wanted to drop
that account and connect a different one had no way to do it from the UI.

The lost-connection card now renders both Reconnect and Disconnect,
reusing the existing disconnect confirmation flow. The connected-state
Disconnect button gets a data-testid too so browser tests can target
either state by account id.
---
 .../accounts/NetworkConnectGrid.vue           | 27 ++++++++++++++-----
 tests/Browser/NetworkConnectGridTest.php      | 19 +++++++++++++
 2 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/resources/js/components/accounts/NetworkConnectGrid.vue b/resources/js/components/accounts/NetworkConnectGrid.vue
index 0f5f1c5d..23fc3c6d 100644
--- a/resources/js/components/accounts/NetworkConnectGrid.vue
+++ b/resources/js/components/accounts/NetworkConnectGrid.vue
@@ -234,19 +234,34 @@ const cards = computed<ConnectCard[]>(() => {
                     </p>
                 </div>
 
-                <Button
+                <div
                     v-if="card.state === 'reconnect' && card.account"
-                    size="sm"
-                    class="mt-auto w-full"
-                    @click="startConnect(card.account.platform, card.account.id)"
+                    class="mt-auto flex w-full flex-col gap-2"
                 >
-                    {{ $t('accounts.reconnect') }}
-                </Button>
+                    <Button
+                        size="sm"
+                        class="w-full"
+                        :data-testid="`reconnect-${card.account.id}`"
+                        @click="startConnect(card.account.platform, card.account.id)"
+                    >
+                        {{ $t('accounts.reconnect') }}
+                    </Button>
+                    <Button
+                        variant="destructive"
+                        size="sm"
+                        class="w-full"
+                        :data-testid="`disconnect-${card.account.id}`"
+                        @click="disconnectAccount(card.account)"
+                    >
+                        {{ $t('accounts.disconnect') }}
+                    </Button>
+                </div>
                 <Button
                     v-else-if="card.state === 'connected' && card.account"
                     variant="destructive"
                     size="sm"
                     class="mt-auto w-full"
+                    :data-testid="`disconnect-${card.account.id}`"
                     @click="disconnectAccount(card.account)"
                 >
                     {{ $t('accounts.disconnect') }}
diff --git a/tests/Browser/NetworkConnectGridTest.php b/tests/Browser/NetworkConnectGridTest.php
index e70d8d92..69778880 100644
--- a/tests/Browser/NetworkConnectGridTest.php
+++ b/tests/Browser/NetworkConnectGridTest.php
@@ -71,3 +71,22 @@ function gridOwnerWithLinkedIn(): User
         ->assertVisible('@connect-x')
         ->assertNoJavaScriptErrors();
 });
+
+test('a lost connection offers both reconnect and disconnect', function () {
+    $user = gridOwnerWithLinkedIn();
+
+    $account = SocialAccount::factory()->x()->tokenExpired()->create([
+        'workspace_id' => $user->current_workspace_id,
+        'platform_user_id' => 'x-expired',
+    ]);
+
+    $this->actingAs($user);
+
+    $page = visit(route('app.accounts'));
+
+    waitForGridTestId($page, "disconnect-{$account->id}");
+
+    $page->assertVisible("@reconnect-{$account->id}")
+        ->assertVisible("@disconnect-{$account->id}")
+        ->assertNoJavaScriptErrors();
+});