Make connector pause and delete fast (#3646)

* first cut

* refresh on delete

---------

Co-authored-by: Richard Kuo (Danswer) <rkuo@onyx.app>

web/src/app/admin/connector/[ccPairId]/DeletionButton.tsx

@@ -8,7 +8,13 @@ import { deleteCCPair } from "@/lib/documentDeletion";
 import { mutate } from "swr";
 import { buildCCPairInfoUrl } from "./lib";
 
-export function DeletionButton({ ccPair }: { ccPair: CCPairFullInfo }) {
+export function DeletionButton({
+  ccPair,
+  refresh,
+}: {
+  ccPair: CCPairFullInfo;
+  refresh: () => void;
+}) {
   const { popup, setPopup } = usePopup();
 
   const isDeleting =
@@ -31,14 +37,22 @@ export function DeletionButton({ ccPair }: { ccPair: CCPairFullInfo }) {
       {popup}
       <Button
         variant="destructive"
-        onClick={() =>
-          deleteCCPair(
-            ccPair.connector.id,
-            ccPair.credential.id,
-            setPopup,
-            () => mutate(buildCCPairInfoUrl(ccPair.id))
-          )
-        }
+        onClick={async () => {
+          try {
+            // Await the delete operation to ensure it completes
+            await deleteCCPair(
+              ccPair.connector.id,
+              ccPair.credential.id,
+              setPopup,
+              () => mutate(buildCCPairInfoUrl(ccPair.id))
+            );
+
+            // Call refresh to update the state after deletion
+            refresh();
+          } catch (error) {
+            console.error("Error deleting connector:", error);
+          }
+        }}
         icon={FiTrash}
         disabled={
           ccPair.status === ConnectorCredentialPairStatus.ACTIVE || isDeleting

web/src/app/admin/connector/[ccPairId]/page.tsx

@@ -362,7 +362,7 @@ function Main({ ccPairId }: { ccPairId: number }) {
       <div className="flex mt-4">
         <div className="mx-auto">
           {ccPair.is_editable_for_current_user && (
-            <DeletionButton ccPair={ccPair} />
+            <DeletionButton ccPair={ccPair} refresh={refresh} />
           )}
         </div>
       </div>