sendnrw/netbird
2
0
Fork 0
mirror of https://github.com/netbirdio/netbird.git synced 2026-05-13 12:19:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

update components

Browse Source
This commit is contained in:
Eduard Gert
2026-05-11 14:26:10 +02:00
parent 1aae067aaa
commit f7f5946910
8 changed files with 59 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/ui-wails/frontend/index.html
View File

@@ -7,6 +7,6 @@
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/app.tsx"></script>
<script type="module" src="/src/app-new.tsx"></script>
</body>
</html>

0
client/ui-wails/frontend/src/app.tsx → client/ui-wails/frontend/src/app-new.tsx
View File

5
client/ui-wails/frontend/src/components/Button.tsx
View File

@@ -39,6 +39,11 @@ export const buttonVariants = cva(
"dark:ring-offset-neutral-950/50 dark:focus:ring-neutral-500/20",
"dark:bg-nb-gray-900/70 dark:text-gray-400 dark:border-gray-700/70 dark:hover:text-white dark:hover:bg-nb-gray-800/60",
],
subtle: [
"bg-nb-gray-50 hover:bg-nb-gray-100 focus:ring-nb-gray-200/60 border-nb-gray-200 text-nb-gray-900",
"dark:ring-offset-neutral-950/50 dark:focus:ring-nb-gray-200/40",
"dark:bg-nb-gray-50 dark:text-nb-gray-900 dark:border-nb-gray-200 dark:hover:bg-nb-gray-100 dark:hover:text-nb-gray-950",
],
input: [
"bg-white hover:text-black focus:ring-zinc-200/50 hover:bg-gray-100 border-neutral-200 text-gray-900",
"dark:ring-offset-neutral-950/50 dark:focus:ring-neutral-500/20",

2
client/ui-wails/frontend/src/components/Input.tsx
View File

@@ -185,7 +185,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
icon && "!pl-10",
"border",
props.readOnly &&
"!bg-nb-gray-910 text-nb-gray-400 !border-nb-gray-800",
"!bg-nb-gray-910 text-nb-gray-350 !border-nb-gray-800",
showStepper &&
"!rounded-r-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none [-moz-appearance:textfield]",
className,

4
client/ui-wails/frontend/src/layouts/AppLayout.tsx
View File

@@ -1,6 +1,6 @@
import { Outlet } from "react-router-dom";
import { Header } from "@/layouts/Header.tsx";
import { AutoUpdate } from "@/modules/auto-update/AutoUpdate.tsx";
import { UpdateAvailableBanner } from "@/modules/auto-update/UpdateAvailableBanner.tsx";
import { DebugBundleProvider } from "@/modules/debug-bundle/DebugBundleContext.tsx";
import { ProfileProvider } from "@/modules/profile/ProfileContext.tsx";
@@ -11,7 +11,7 @@ export const AppLayout = () => {
<div className={"relative flex h-full flex-col"}>
<Header />
<Outlet />
<AutoUpdate />
<UpdateAvailableBanner />
</div>
</DebugBundleProvider>
</ProfileProvider>

45
client/ui-wails/frontend/src/modules/auto-update/AutoUpdate.tsx
View File

@@ -1,45 +0,0 @@
import { useState } from "react";
import { Button } from "@/components/Button";
import { useStatus } from "@/hooks/useStatus";
import { Update as UpdateSvc } from "@bindings/services";
export const AutoUpdate = () => {
const { status } = useStatus();
const [dismissed, setDismissed] = useState(false);
if (import.meta.env.DEV) return null;
const updateVersion = (status?.events ?? [])
.map((e) => e.metadata?.["new_version_available"])
.find((v): v is string => Boolean(v));
if (!updateVersion || dismissed) return null;
const triggerUpdate = () => {
UpdateSvc.Trigger().catch(() => {});
};
return (
<div
className={
"absolute bottom-4 left-1/2 -translate-x-1/2 z-50 flex items-center gap-3 rounded-lg border border-nb-gray-800 bg-nb-gray-920/95 backdrop-blur px-4 py-2.5 shadow-lg"
}
>
<p className={"text-sm text-nb-gray-100 pr-2"}>
NetBird will update when you restart the app.
</p>
<Button
variant={"secondary"}
size={"xs"}
onClick={() => setDismissed(true)}
>
Later
</Button>
<Button variant={"primary"} size={"xs"} onClick={triggerUpdate}>
Restart now
</Button>
</div>
);
};
export default AutoUpdate;

49
client/ui-wails/frontend/src/modules/auto-update/UpdateAvailableBanner.tsx Normal file
View File

@@ -0,0 +1,49 @@
import { useState } from "react";
import { Button } from "@/components/Button";
import { useStatus } from "@/hooks/useStatus";
import { cn } from "@/lib/cn";
import { Update as UpdateSvc } from "@bindings/services";
// TODO: Shown only when management has auto updates enabled + there are updates available + force updates is disabled
export const UpdateAvailableBanner = () => {
const { status } = useStatus();
const [dismissed, setDismissed] = useState(false);
if (import.meta.env.DEV) return null;
const updateVersion = (status?.events ?? [])
.map((e) => e.metadata?.["new_version_available"])
.find((v): v is string => Boolean(v));
if (!updateVersion || dismissed) return null;
const triggerUpdate = () => {
UpdateSvc.Trigger().catch(() => {});
};
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"}>
NetBird will update when you restart the app.
</p>
<div className={"flex gap-2"}>
<Button variant={"subtle"} size={"xs"} onClick={() => setDismissed(true)}>
Later
</Button>
<Button variant={"primary"} size={"xs"} onClick={triggerUpdate}>
Restart now
</Button>
</div>
</div>
);
};
export default UpdateAvailableBanner;

2
client/ui-wails/frontend/src/modules/settings/SettingsTroubleshooting.tsx
View File

@@ -198,7 +198,7 @@ function DoneResult({
<div className={"w-full max-w-xs mx-auto flex flex-col gap-3"}>
{showKey && <Input value={result.uploadedKey} readOnly copy />}
{result.path && (
{result.path && !showKey && (
<Input
value={result.path}
readOnly