fix: Add promise cancellation check to ActionDetail.tsx

Prevent state updates on unmounted components in handleRemoveFromJail.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
2026-05-01 17:47:02 +02:00
parent 96a21ffb70
commit be974b9b0d

View File

@@ -1,4 +1,4 @@
import { useCallback, useState } from "react";
import { useCallback, useEffect, useRef, useState } from "react";
import { Button, Field, Input, MessageBar, MessageBarBody } from "@fluentui/react-components";
import { Delete24Regular, LinkEdit24Regular } from "@fluentui/react-icons";
import type { ActionConfig } from "../../types/config";
@@ -18,22 +18,35 @@ export function ActionDetail({ action, onAssignClick, onRemovedFromJail }: Actio
const [removingJail, setRemovingJail] = useState<string | null>(null);
const [removeError, setRemoveError] = useState<string | null>(null);
const { fetchRawContent, saveRawContent } = useActionRawFile(action.name);
const removeControllerRef = useRef<AbortController | null>(null);
const handleRemoveFromJail = useCallback(
(jailName: string): void => {
removeControllerRef.current?.abort();
const controller = new AbortController();
removeControllerRef.current = controller;
setRemovingJail(jailName);
setRemoveError(null);
onRemovedFromJail(jailName)
.catch((err: unknown) => {
if (controller.signal.aborted) return;
setRemoveError(err instanceof Error ? err.message : "Failed to remove action from jail.");
})
.finally(() => {
if (controller.signal.aborted) return;
setRemovingJail(null);
});
},
[onRemovedFromJail],
);
useEffect(() => {
return (): void => {
removeControllerRef.current?.abort();
};
}, []);
return (
<div>
<div className={styles.fieldRow} style={{ marginBottom: "var(--spacingVerticalS)" }}>