Allow disconnecting runtime IM channels

frontend/src/components/workspace/settings/channels-settings-page.tsx

@@ -25,7 +25,7 @@ import {
   useChannelConnections,
   useChannelProviders,
   useConnectChannelProvider,
-  useDisconnectChannelConnection,
+  useDisconnectChannelProvider,
 } from "@/core/channels/hooks";
 import {
   closeConnectWindow,
@@ -122,7 +122,7 @@ function ChannelProviderItem({
   const { t } = useI18n();
   const connectMutation = useConnectChannelProvider();
   const configureMutation = useConfigureChannelProvider();
-  const disconnectMutation = useDisconnectChannelConnection();
+  const disconnectProviderMutation = useDisconnectChannelProvider();
   const [setupOpen, setSetupOpen] = useState(false);
   const isConnected =
     connection?.status === "connected" ||
@@ -137,8 +137,8 @@ function ChannelProviderItem({
     (configureMutation.isPending &&
       configureMutation.variables?.provider === provider.provider);
   const isDisconnecting =
-    disconnectMutation.isPending &&
-    disconnectMutation.variables === connection?.id;
+    disconnectProviderMutation.isPending &&
+    disconnectProviderMutation.variables === provider.provider;
   const connectionLabel = connection ? getConnectionLabel(connection) : null;
   const statusLabel = getStatusLabel(provider, connection, t);
   const unavailableReason = getProviderUnavailableReason(provider, t);
@@ -209,7 +209,7 @@ function ChannelProviderItem({
                   type="button"
                   variant="outline"
                   size="sm"
-                  disabled={isConnecting}
+                  disabled={isConnecting || isDisconnecting}
                   onClick={() => setSetupOpen(true)}
                 >
                   {isConnecting ? (
@@ -220,22 +220,33 @@ function ChannelProviderItem({
                   {t.channels.modify}
                 </Button>
               ) : null}
-              {connection ? (
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  disabled={isDisconnecting}
-                  onClick={() => disconnectMutation.mutate(connection.id)}
-                >
-                  {isDisconnecting ? (
-                    <LoaderCircleIcon className="animate-spin" />
-                  ) : (
-                    <UnplugIcon />
-                  )}
-                  {t.channels.disconnect}
-                </Button>
-              ) : null}
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                disabled={isDisconnecting}
+                onClick={() => {
+                  void disconnectProviderMutation
+                    .mutateAsync(provider.provider)
+                    .then(() => {
+                      toast.success(t.channels.revoked);
+                    })
+                    .catch((error) => {
+                      toast.error(
+                        error instanceof Error
+                          ? error.message
+                          : t.channels.unavailable,
+                      );
+                    });
+                }}
+              >
+                {isDisconnecting ? (
+                  <LoaderCircleIcon className="animate-spin" />
+                ) : (
+                  <UnplugIcon />
+                )}
+                {t.channels.disconnect}
+              </Button>
             </>
           ) : (
             <Button

frontend/src/core/channels/api.ts

@@ -99,3 +99,19 @@ export async function disconnectChannelConnection(
     );
   }
 }
+
+export async function disconnectChannelProvider(
+  provider: ChannelProviderId,
+): Promise<ChannelProvider> {
+  const response = await fetch(
+    channelsUrl(`/${encodeURIComponent(provider)}/runtime-config`),
+    { method: "DELETE" },
+  );
+  if (!response.ok) {
+    await throwChannelApiError(
+      response,
+      `Failed to disconnect ${provider}: ${response.statusText}`,
+    );
+  }
+  return response.json() as Promise<ChannelProvider>;
+}

frontend/src/core/channels/hooks.ts

@@ -4,6 +4,7 @@ import {
   configureChannelProvider,
   connectChannelProvider,
   disconnectChannelConnection,
+  disconnectChannelProvider,
   listChannelConnections,
   listChannelProviders,
 } from "./api";
@@ -79,3 +80,17 @@ export function useDisconnectChannelConnection() {
     },
   });
 }
+
+export function useDisconnectChannelProvider() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (provider: ChannelProviderId) =>
+      disconnectChannelProvider(provider),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: channelProviderQueryKey });
+      void queryClient.invalidateQueries({
+        queryKey: channelConnectionsQueryKey,
+      });
+    },
+  });
+}

frontend/tests/unit/core/channels/api.test.ts

@@ -13,6 +13,7 @@ import {
   configureChannelProvider,
   connectChannelProvider,
   disconnectChannelConnection,
+  disconnectChannelProvider,
   listChannelConnections,
   listChannelProviders,
 } from "@/core/channels/api";
@@ -170,6 +171,30 @@ describe("channels api", () => {
     );
   });
 
+  test("disconnects provider runtime configuration", async () => {
+    mockedFetch.mockResolvedValueOnce(
+      jsonResponse(200, {
+        provider: "slack",
+        display_name: "Slack",
+        enabled: true,
+        configured: false,
+        connectable: false,
+        auth_mode: "binding_code",
+        connection_status: "not_connected",
+      }),
+    );
+
+    await expect(disconnectChannelProvider("slack")).resolves.toMatchObject({
+      provider: "slack",
+      configured: false,
+      connection_status: "not_connected",
+    });
+    expect(mockedFetch).toHaveBeenCalledWith(
+      "/backend/api/channels/slack/runtime-config",
+      { method: "DELETE" },
+    );
+  });
+
   test("uses backend detail for failed requests", async () => {
     mockedFetch.mockResolvedValueOnce(
       jsonResponse(400, { detail: "Channel provider is not configured" }),