sendnrw/netbird
2
0
Fork 0
mirror of https://github.com/netbirdio/netbird.git synced 2026-09-30 02:29:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

update auto update wordings, add update available into ui

Browse Source
This commit is contained in:
Eduard Gert
2026-05-22 13:04:04 +02:00
parent 577ce6deb5
commit 17a365926d
7 changed files with 99 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/ui/frontend/src/modules/auto-update/UpdateAvailableBanner.tsx
-45
View File
@@ -1,45 +0,0 @@
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { Button } from "@/components/Button";
import { useClientVersion } from "@/modules/auto-update/ClientVersionContext";
import { cn } from "@/lib/cn";
// Shown only when management has auto-update enabled (enforced=true) and the
// daemon has not yet started the installer (installing=false). The
// download-only branch (enforced=false) routes the user to GitHub via the
// tray menu instead; the force-install branch (installing=true) takes over
// with the full-screen UpdatingOverlay.
export const UpdateAvailableBanner = () => {
const { t } = useTranslation();
const { updateVersion, enforced, installing, triggerUpdate } = useClientVersion();
const [dismissed, setDismissed] = useState(false);
if (import.meta.env.DEV) return null;
if (!updateVersion || !enforced || installing || dismissed) return null;
return (
<div
className={cn(
"absolute bottom-4 left-1/2 -translate-x-1/2 z-50",
"w-[calc(100%-2rem)] max-w-xl",
"flex items-center justify-between gap-3",
"rounded-xl border border-nb-gray-800 bg-white backdrop-blur",
"px-2 py-2 shadow-lg",
)}
>
<p className={"text-sm text-nb-gray-900 pr-4 pl-2 font-medium"}>
{t("update.banner.message", { version: updateVersion })}
</p>
<div className={"flex gap-2"}>
<Button variant={"subtle"} size={"xs"} onClick={() => setDismissed(true)}>
{t("update.banner.later")}
</Button>
<Button variant={"primary"} size={"xs"} onClick={triggerUpdate}>
{t("update.banner.installNow")}
</Button>
</div>
</div>
);
};
export default UpdateAvailableBanner;
client/ui/frontend/src/modules/auto-update/UpdateHeaderTrigger.tsx
-34
View File
@@ -1,34 +0,0 @@
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { ArrowUpCircleIcon } from "lucide-react";
import { IconButton } from "@/components/IconButton.tsx";
import { Tooltip } from "@/components/Tooltip.tsx";
import { useClientVersion } from "@/modules/auto-update/ClientVersionContext";
export const UpdateHeaderTrigger = () => {
const { t } = useTranslation();
const navigate = useNavigate();
const { updateAvailable } = useClientVersion();
if (!updateAvailable) return null;
return (
<Tooltip content={t("update.header.tooltip")}>
<div className={"relative h-11 w-11 flex items-center justify-center"}>
<span
className={
"animate-ping absolute inline-flex h-[15px] w-[15px] rounded-full bg-netbird opacity-20 pointer-events-none"
}
/>
<IconButton
icon={ArrowUpCircleIcon}
iconClassName={"text-netbird"}
onClick={() =>
navigate("/settings", { state: { tab: "about" } })
}
className={"absolute inset-0"}
/>
</div>
</Tooltip>
);
};
client/ui/frontend/src/modules/auto-update/UpdateVersionCard.tsx
+11 -21
View File
@@ -1,6 +1,7 @@
import { ReactNode } from "react";
import { useTranslation } from "react-i18next";
import { Browser } from "@wailsio/runtime";
import { DownloadIcon, NotepadText } from "lucide-react";
import { Button } from "@/components/Button";
import { useClientVersion } from "@/modules/auto-update/ClientVersionContext";
import { cn } from "@/lib/cn";
@@ -11,17 +12,8 @@ function openUrl(url: string) {
void Browser.OpenURL(url).catch(() => window.open(url, "_blank"));
}
function formatLastChecked(date: Date, locale?: string) {
return date.toLocaleString(locale, {
month: "short",
day: "numeric",
hour: "2-digit",
minute: "2-digit",
});
}
export function UpdateVersionCard() {
const { t, i18n } = useTranslation();
const { t } = useTranslation();
const { updateVersion, enforced, triggerUpdate } = useClientVersion();
if (updateVersion) {
@@ -29,7 +21,7 @@ export function UpdateVersionCard() {
? "update.card.versionAvailableInstall"
: "update.card.versionAvailableDownload";
return (
<Card>
<Card className={"max-w-lg"}>
<div>
<Title>{t(titleKey, { version: updateVersion })}</Title>
<Link
@@ -48,6 +40,7 @@ export function UpdateVersionCard() {
size={"xs"}
onClick={() => openUrl(GITHUB_RELEASES)}
>
<DownloadIcon size={14} />
{t("update.card.getInstaller")}
</Button>
)}
@@ -56,17 +49,14 @@ export function UpdateVersionCard() {
}
return (
<Card className={"max-w-md"}>
<Card className={"max-w-lg"}>
<div>
<Title>
{t("update.card.lastChecked", {
date: formatLastChecked(new Date(), i18n.language),
})}
</Title>
<Link url={GITHUB_RELEASES}>{t("update.card.changelog")}</Link>
<Title>{t("update.card.onLatestVersion")}</Title>
<p className={"text-sm text-nb-gray-300"}>{t("update.card.autoCheckInterval")}</p>
</div>
<Button variant={"primary"} size={"xs"} onClick={triggerUpdate}>
{t("update.card.checkForUpdates")}
<Button variant={"primary"} size={"xs"} onClick={() => openUrl(GITHUB_RELEASES)}>
<NotepadText size={14} />
{t("update.card.changelog")}
</Button>
</Card>
);
@@ -76,7 +66,7 @@ function Card({ children, className }: { children: ReactNode; className?: string
return (
<div
className={cn(
"w-full max-w-md flex items-center justify-between gap-4 rounded-md border border-nb-gray-800 bg-nb-gray-910 px-4 py-3",
"w-full flex items-center justify-between gap-4 rounded-md border border-nb-gray-800 bg-nb-gray-910 px-4 py-3",
className,
)}
>