feat: add toast feedback for Apply Changes and Discard operations
Show "Gateway restarted successfully" or error after Apply Changes, and "Changes discarded" after Discard. Toast auto-dismisses after 3s. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
20
src/App.tsx
20
src/App.tsx
@@ -56,6 +56,7 @@ export function App() {
|
|||||||
const [applying, setApplying] = useState(false);
|
const [applying, setApplying] = useState(false);
|
||||||
const [applyError, setApplyError] = useState("");
|
const [applyError, setApplyError] = useState("");
|
||||||
const [configVersion, setConfigVersion] = useState(0);
|
const [configVersion, setConfigVersion] = useState(0);
|
||||||
|
const [toast, setToast] = useState<{ message: string; type: "success" | "error" } | null>(null);
|
||||||
const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
||||||
|
|
||||||
// Establish baseline on startup
|
// Establish baseline on startup
|
||||||
@@ -112,6 +113,11 @@ export function App() {
|
|||||||
.catch(() => {});
|
.catch(() => {});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const showToast = (message: string, type: "success" | "error" = "success") => {
|
||||||
|
setToast({ message, type });
|
||||||
|
setTimeout(() => setToast(null), 3000);
|
||||||
|
};
|
||||||
|
|
||||||
const handleApplyConfirm = () => {
|
const handleApplyConfirm = () => {
|
||||||
setApplying(true);
|
setApplying(true);
|
||||||
setApplyError("");
|
setApplyError("");
|
||||||
@@ -120,6 +126,7 @@ export function App() {
|
|||||||
setShowApplyDialog(false);
|
setShowApplyDialog(false);
|
||||||
setDirty(false);
|
setDirty(false);
|
||||||
bumpConfigVersion();
|
bumpConfigVersion();
|
||||||
|
showToast("Gateway restarted successfully");
|
||||||
})
|
})
|
||||||
.catch((e) => setApplyError(String(e)))
|
.catch((e) => setApplyError(String(e)))
|
||||||
.finally(() => setApplying(false));
|
.finally(() => setApplying(false));
|
||||||
@@ -131,8 +138,9 @@ export function App() {
|
|||||||
setShowDiscardDialog(false);
|
setShowDiscardDialog(false);
|
||||||
setDirty(false);
|
setDirty(false);
|
||||||
bumpConfigVersion();
|
bumpConfigVersion();
|
||||||
|
showToast("Changes discarded");
|
||||||
})
|
})
|
||||||
.catch(() => {});
|
.catch((e) => showToast(`Discard failed: ${e}`, "error"));
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -331,6 +339,16 @@ export function App() {
|
|||||||
</AlertDialogFooter>
|
</AlertDialogFooter>
|
||||||
</AlertDialogContent>
|
</AlertDialogContent>
|
||||||
</AlertDialog>
|
</AlertDialog>
|
||||||
|
|
||||||
|
{/* Toast */}
|
||||||
|
{toast && (
|
||||||
|
<div className={cn(
|
||||||
|
"fixed bottom-4 right-4 px-4 py-2.5 rounded-md shadow-lg text-sm font-medium z-50 animate-in fade-in slide-in-from-bottom-2",
|
||||||
|
toast.type === "success" ? "bg-green-600 text-white" : "bg-destructive text-destructive-foreground"
|
||||||
|
)}>
|
||||||
|
{toast.message}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user