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
This commit is contained in:
alphaeusmote
2025-04-11 18:33:34 +00:00
+35 -12
View File
@@ -71,7 +71,7 @@ import {
SelectTrigger, SelectTrigger,
SelectValue, SelectValue,
} from "@/components/ui/select"; } 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"; import { formatDistanceToNow, format } from "date-fns";
// Token form schema // Token form schema
@@ -224,18 +224,26 @@ export default function ApiTokensPage() {
// Revoke token mutation // Revoke token mutation
const revokeTokenMutation = useMutation({ const revokeTokenMutation = useMutation({
mutationFn: async (tokenId: string) => { 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] }); 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); setIsRevokeDialogOpen(false);
setSelectedToken(null);
toast({ toast({
title: "Token revoked", title: "Token revoked",
description: "The API token has been successfully revoked.", description: "The API token has been successfully revoked.",
}); });
}, },
onError: (error) => { onError: (error) => {
console.error("Error revoking token:", error);
toast({ toast({
title: "Failed to revoke token", title: "Failed to revoke token",
description: error.message, description: error.message,
@@ -788,14 +796,29 @@ export default function ApiTokensPage() {
"*".repeat(32) "*".repeat(32)
)} )}
</div> </div>
<Button <div className="absolute top-2 right-2 flex">
variant="ghost" <Button
size="icon" variant="ghost"
className="absolute top-2 right-2" size="icon"
onClick={copySelectedTokenToClipboard} className="mr-1"
> onClick={copySelectedTokenToClipboard}
<Copy className="h-4 w-4" /> title="Copy token"
</Button> >
<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>
</div> </div>