HI-VPN/hi-frontend
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

🐛 fix: Refactor update dialog logic in SystemVersionCard for better clarity and handling of update states

Browse Source
This commit is contained in:
web@ppanel 2025-12-29 09:02:02 +00:00
parent b06b821e6c
commit 0690debf6c
1 changed files with 100 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
apps/admin/src/sections/dashboard/components/system-version-card.tsx
View File

@ -80,6 +80,7 @@ export default function SystemVersionCard() {
staleTime: 0, staleTime: 0,
retry: 1, retry: 1,
}); });
console.log(webVersionInfo);
const updateServerMutation = useMutation({ const updateServerMutation = useMutation({
mutationFn: async (serviceName: string) => { mutationFn: async (serviceName: string) => {
@ -188,17 +189,18 @@ export default function SystemVersionCard() {
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Badge>V{packageJson.version}</Badge> <Badge>V{packageJson.version}</Badge>
{hasWebNewVersion && webVersionInfo && (
<AlertDialog onOpenChange={setOpenUpdateWeb} open={openUpdateWeb}> <AlertDialog onOpenChange={setOpenUpdateWeb} open={openUpdateWeb}>
<AlertDialogTrigger asChild> <AlertDialogTrigger asChild>
<Button <Button
className="h-6 px-2 text-xs" className="h-6 px-2 text-xs"
disabled={isUpdatingWeb} disabled={!hasWebNewVersion || isUpdatingWeb}
size="sm" size="sm"
variant="outline" variant="outline"
> >
<Icon className="mr-1 h-3 w-3" icon="mdi:download" /> <Icon className="mr-1 h-3 w-3" icon="mdi:download" />
{t("update", "Update")} V{webVersionInfo.latest_version} {hasWebNewVersion && webVersionInfo
? `${t("update", "Update")} V${webVersionInfo.latest_version}`
: t("update", "Update")}
</Button> </Button>
</AlertDialogTrigger> </AlertDialogTrigger>
<AlertDialogContent> <AlertDialogContent>
@ -207,33 +209,32 @@ export default function SystemVersionCard() {
{t("confirmUpdate", "Confirm Update")} {t("confirmUpdate", "Confirm Update")}
</AlertDialogTitle> </AlertDialogTitle>
<AlertDialogDescription> <AlertDialogDescription>
{t( {webVersionInfo
? t(
"updateWebDescription", "updateWebDescription",
"Are you sure you want to update the web version from V{{current}} to V{{latest}}?", "Are you sure you want to update the web version from V{{current}} to V{{latest}}?",
{ {
current: packageJson.version, current: packageJson.version,
latest: webVersionInfo.latest_version, latest: webVersionInfo.latest_version,
} }
)
: t(
"updateDescription",
"Are you sure you want to update?"
)} )}
</AlertDialogDescription> </AlertDialogDescription>
</AlertDialogHeader> </AlertDialogHeader>
<AlertDialogFooter> <AlertDialogFooter>
<AlertDialogCancel> <AlertDialogCancel>{t("cancel", "Cancel")}</AlertDialogCancel>
{t("cancel", "Cancel")}
</AlertDialogCancel>
<Button disabled={isUpdatingWeb} onClick={handleUpdateWeb}> <Button disabled={isUpdatingWeb} onClick={handleUpdateWeb}>
{isUpdatingWeb && ( {isUpdatingWeb && (
<Icon <Icon className="mr-2 animate-spin" icon="mdi:loading" />
className="mr-2 animate-spin"
icon="mdi:loading"
/>
)} )}
{t("confirmUpdate", "Confirm Update")} {t("confirmUpdate", "Confirm Update")}
</Button> </Button>
</AlertDialogFooter> </AlertDialogFooter>
</AlertDialogContent> </AlertDialogContent>
</AlertDialog> </AlertDialog>
)}
</div> </div>
</div> </div>
@ -251,7 +252,6 @@ export default function SystemVersionCard() {
serverVersionInfo?.current_version || serverVersionInfo?.current_version ||
"1.0.0"} "1.0.0"}
</Badge> </Badge>
{hasServerNewVersion && serverVersionInfo && moduleConfig && (
<AlertDialog <AlertDialog
onOpenChange={setOpenUpdateServer} onOpenChange={setOpenUpdateServer}
open={openUpdateServer} open={openUpdateServer}
@ -259,12 +259,14 @@ export default function SystemVersionCard() {
<AlertDialogTrigger asChild> <AlertDialogTrigger asChild>
<Button <Button
className="h-6 px-2 text-xs" className="h-6 px-2 text-xs"
disabled={isUpdatingServer} disabled={!hasServerNewVersion || isUpdatingServer}
size="sm" size="sm"
variant="outline" variant="outline"
> >
<Icon className="mr-1 h-3 w-3" icon="mdi:download" /> <Icon className="mr-1 h-3 w-3" icon="mdi:download" />
{t("update", "Update")} V{serverVersionInfo.latest_version} {hasServerNewVersion && serverVersionInfo
? `${t("update", "Update")} ${serverVersionInfo.latest_version}`
: t("update", "Update")}
</Button> </Button>
</AlertDialogTrigger> </AlertDialogTrigger>
<AlertDialogContent> <AlertDialogContent>
@ -273,7 +275,8 @@ export default function SystemVersionCard() {
{t("confirmUpdate", "Confirm Update")} {t("confirmUpdate", "Confirm Update")}
</AlertDialogTitle> </AlertDialogTitle>
<AlertDialogDescription> <AlertDialogDescription>
{t( {serverVersionInfo && moduleConfig
? t(
"updateServerDescription", "updateServerDescription",
"Are you sure you want to update the server version from V{{current}} to V{{latest}}?", "Are you sure you want to update the server version from V{{current}} to V{{latest}}?",
{ {
@ -282,31 +285,30 @@ export default function SystemVersionCard() {
serverVersionInfo.current_version, serverVersionInfo.current_version,
latest: serverVersionInfo.latest_version, latest: serverVersionInfo.latest_version,
} }
)
: t(
"updateDescription",
"Are you sure you want to update?"
)} )}
</AlertDialogDescription> </AlertDialogDescription>
</AlertDialogHeader> </AlertDialogHeader>
<AlertDialogFooter> <AlertDialogFooter>
<AlertDialogCancel> <AlertDialogCancel>{t("cancel", "Cancel")}</AlertDialogCancel>
{t("cancel", "Cancel")}
</AlertDialogCancel>
<Button <Button
disabled={isUpdatingServer} disabled={isUpdatingServer || !moduleConfig}
onClick={() => onClick={() =>
moduleConfig &&
updateServerMutation.mutate(moduleConfig.service_name) updateServerMutation.mutate(moduleConfig.service_name)
} }
> >
{isUpdatingServer && ( {isUpdatingServer && (
<Icon <Icon className="mr-2 animate-spin" icon="mdi:loading" />
className="mr-2 animate-spin"
icon="mdi:loading"
/>
)} )}
{t("confirmUpdate", "Confirm Update")} {t("confirmUpdate", "Confirm Update")}
</Button> </Button>
</AlertDialogFooter> </AlertDialogFooter>
</AlertDialogContent> </AlertDialogContent>
</AlertDialog> </AlertDialog>
)}
</div> </div>
</div> </div>
</CardContent> </CardContent>