From 4fdc242ce31c97426ef325c4e1a5a581de208a6e Mon Sep 17 00:00:00 2001
From: alphaeusmote <41258468-alphaeusmote@users.noreply.replit.com>
Date: Fri, 11 Apr 2025 18:33:34 +0000
Subject: [PATCH] Fix API token status not updating after revocation by
 improving the UI and updating the data fetching.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9111ef36-26c8-4085-84ca-a35dc1fec1b5
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7083d608-d6d3-4a6a-9a27-6286c5109627/d2a5956c-0dc3-4d58-9645-936109e91b79.jpg
---
 client/src/pages/api-tokens.tsx | 47 ++++++++++++++++++++++++---------
 1 file changed, 35 insertions(+), 12 deletions(-)

diff --git a/client/src/pages/api-tokens.tsx b/client/src/pages/api-tokens.tsx
index 2e3f824..8d2ccad 100644
--- a/client/src/pages/api-tokens.tsx
+++ b/client/src/pages/api-tokens.tsx
@@ -71,7 +71,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Loader2, Key, MoreVertical, CalendarIcon, Copy, Info, Clock } from "lucide-react";
+import { Loader2, Key, MoreVertical, CalendarIcon, Copy, Eye, EyeOff, Info, Clock } from "lucide-react";
 import { formatDistanceToNow, format } from "date-fns";
 
 // Token form schema
@@ -224,18 +224,26 @@ export default function ApiTokensPage() {
   // Revoke token mutation
   const revokeTokenMutation = useMutation({
     mutationFn: async (tokenId: string) => {
-      await apiRequest("PATCH", `/api/api-tokens/${tokenId}`, { isActive: false });
+      const response = await apiRequest("PATCH", `/api/api-tokens/${tokenId}`, { isActive: false });
+      return await response.json();
     },
-    onSuccess: () => {
+    onSuccess: (data) => {
+      // Force refresh the tokens list
       queryClient.invalidateQueries({ queryKey: ["/api/api-tokens", currentOrganization?.id] });
+      
+      // If we're viewing the token details dialog, update the selected token
+      if (isViewTokenDialogOpen && selectedToken && data.id === selectedToken.id) {
+        setSelectedToken(data);
+      }
+      
       setIsRevokeDialogOpen(false);
-      setSelectedToken(null);
       toast({
         title: "Token revoked",
         description: "The API token has been successfully revoked.",
       });
     },
     onError: (error) => {
+      console.error("Error revoking token:", error);
       toast({
         title: "Failed to revoke token",
         description: error.message,
@@ -788,14 +796,29 @@ export default function ApiTokensPage() {
                       "*".repeat(32)
                     )}
                   </div>
-                  <Button 
-                    variant="ghost" 
-                    size="icon" 
-                    className="absolute top-2 right-2" 
-                    onClick={copySelectedTokenToClipboard}
-                  >
-                    <Copy className="h-4 w-4" />
-                  </Button>
+                  <div className="absolute top-2 right-2 flex">
+                    <Button 
+                      variant="ghost" 
+                      size="icon" 
+                      className="mr-1"
+                      onClick={copySelectedTokenToClipboard}
+                      title="Copy token"
+                    >
+                      <Copy className="h-4 w-4" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => setViewingFullToken(!viewingFullToken)}
+                      title={viewingFullToken ? "Hide token" : "Show token"}
+                    >
+                      {viewingFullToken ? (
+                        <EyeOff className="h-4 w-4" />
+                      ) : (
+                        <Eye className="h-4 w-4" />
+                      )}
+                    </Button>
+                  </div>
                 </div>
               </div>