Skip to content

Add option to install NetBird after creating a setup-key #441

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed

Add option to install NetBird after creating a setup-key #441

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2b7b587
Fix not properly aligned horizontal scroll bar
heisbrot Jan 14, 2025
57e71a3
Add option to install netbird after creating a setup key
heisbrot Jan 14, 2025
f3d4dcb
Fix text for install netbird modal
heisbrot Jan 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 16 additions & 35 deletions src/components/ScrollArea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
"use client";

import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
import { cn } from "@utils/helpers";
import * as React from "react";
Expand All @@ -15,46 +13,31 @@ const ScrollArea = React.forwardRef<
>(({ className, children, withoutViewport = false, ...props }, ref) => (
<ScrollAreaPrimitive.Root
ref={ref}
className={cn(
"relative will-change-scroll webkit-scroll",
className,
"overflow-hidden",
)}
className={cn("relative overflow-hidden", className)}
{...props}
>
{withoutViewport ? (
children
) : (
<ScrollAreaViewport disableOverflowY={false}>
{children}
</ScrollAreaViewport>
<ScrollAreaViewport>{children}</ScrollAreaViewport>
)}
<ScrollBar />
<ScrollBar orientation="horizontal" />
<ScrollBar orientation="vertical" />
<ScrollAreaPrimitive.Corner />
</ScrollAreaPrimitive.Root>
));
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;

type AdditionalScrollAreaViewportProps = {
disableOverflowY?: boolean;
};

const ScrollAreaViewport = React.forwardRef<
React.ElementRef<typeof ScrollAreaPrimitive.Viewport>,
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Viewport> &
AdditionalScrollAreaViewportProps
>(({ disableOverflowY = true, ...props }, ref) => {
return (
<ScrollAreaPrimitive.Viewport
ref={ref}
className="h-full w-full rounded-[inherit] will-change-scroll webkit-scroll"
{...props}
style={
disableOverflowY ? { overflowY: undefined, ...props.style } : undefined
}
/>
);
});
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Viewport>
>(({ className, ...props }, ref) => (
<ScrollAreaPrimitive.Viewport
ref={ref}
className={cn("h-full w-full rounded-[inherit]", className)}
{...props}
/>
));
ScrollAreaViewport.displayName = ScrollAreaPrimitive.Viewport.displayName;

const ScrollBar = React.forwardRef<
Expand All @@ -63,14 +46,11 @@ const ScrollBar = React.forwardRef<
>(({ className, orientation = "vertical", ...props }, ref) => (
<ScrollAreaPrimitive.ScrollAreaScrollbar
ref={ref}
style={{ boxSizing: "unset", overflow: undefined }}
orientation={orientation}
className={cn(
"flex touch-none select-none transition-colors",
orientation === "vertical" &&
"h-full w-2.5 border-l border-l-transparent p-[1px]",
orientation === "horizontal" &&
"h-2.5 border-t border-t-transparent p-[1px]",
"flex select-none touch-none transition-colors",
orientation === "vertical" && "h-full w-2.5 p-[1px]",
orientation === "horizontal" && "w-full h-2.5 p-[1px] bottom-0",
className,
)}
{...props}
Expand All @@ -79,6 +59,7 @@ const ScrollBar = React.forwardRef<
className={cn(
"relative rounded-full bg-neutral-200 dark:bg-nb-gray-800",
orientation === "vertical" && "flex-1",
orientation === "horizontal" && "h-full",
)}
/>
</ScrollAreaPrimitive.ScrollAreaScrollbar>
Expand Down
34 changes: 27 additions & 7 deletions src/modules/setup-keys/SetupKeyModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import { cn } from "@utils/helpers";
import { trim } from "lodash";
import {
AlarmClock,
CopyIcon,
DownloadIcon,
ExternalLinkIcon,
MonitorSmartphoneIcon,
PlusCircle,
Expand All @@ -35,20 +35,24 @@ import SetupKeysIcon from "@/assets/icons/SetupKeysIcon";
import useCopyToClipboard from "@/hooks/useCopyToClipboard";
import { SetupKey } from "@/interfaces/SetupKey";
import useGroupHelper from "@/modules/groups/useGroupHelper";
import SetupModal from "@/modules/setup-netbird-modal/SetupModal";

type Props = {
children?: React.ReactNode;
open: boolean;
setOpen: (open: boolean) => void;
name?: string;
};
const copyMessage = "Setup-Key was copied to your clipboard!";
export default function SetupKeyModal({
children,
open,
setOpen,
name,
}: Readonly<Props>) {
const [successModal, setSuccessModal] = useState(false);
const [setupKey, setSetupKey] = useState<SetupKey>();
const [installModal, setInstallModal] = useState(false);
const [, copy] = useCopyToClipboard(setupKey?.key);

const handleSuccess = (setupKey: SetupKey) => {
Expand All @@ -60,8 +64,20 @@ export default function SetupKeyModal({
<>
<Modal open={open} onOpenChange={setOpen} key={open ? 1 : 0}>
{children && <ModalTrigger asChild>{children}</ModalTrigger>}
<SetupKeyModalContent onSuccess={handleSuccess} />
<SetupKeyModalContent onSuccess={handleSuccess} predefinedName={name} />
</Modal>

<Modal
open={installModal}
onOpenChange={(state) => {
setInstallModal(state);
setOpen(false);
}}
key={installModal ? 2 : 3}
>
<SetupModal showClose={true} setupKey={setupKey?.key} />
</Modal>

<Modal
open={successModal}
onOpenChange={(open) => {
Expand Down Expand Up @@ -118,10 +134,10 @@ export default function SetupKeyModal({
variant={"primary"}
className={"w-full"}
data-cy={"setup-key-copy"}
onClick={() => copy(copyMessage)}
onClick={() => setInstallModal(true)}
>
<CopyIcon size={14} />
Copy to clipboard
<DownloadIcon size={14} />
Install NetBird
</Button>
</div>
</ModalFooter>
Expand All @@ -133,13 +149,17 @@ export default function SetupKeyModal({

type ModalProps = {
onSuccess?: (setupKey: SetupKey) => void;
predefinedName?: string;
};

export function SetupKeyModalContent({ onSuccess }: Readonly<ModalProps>) {
export function SetupKeyModalContent({
onSuccess,
predefinedName = "",
}: Readonly<ModalProps>) {
const setupKeyRequest = useApiCall<SetupKey>("/setup-keys", true);
const { mutate } = useSWRConfig();

const [name, setName] = useState("");
const [name, setName] = useState(predefinedName);
const [reusable, setReusable] = useState(false);
const [usageLimit, setUsageLimit] = useState("");
const [expiresIn, setExpiresIn] = useState("7");
Expand Down
11 changes: 9 additions & 2 deletions src/modules/setup-netbird-modal/DockerTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,11 @@ import Link from "next/link";
import React from "react";
import { OperatingSystem } from "@/interfaces/OperatingSystem";

export default function DockerTab() {
type Props = {
setupKey?: string;
};

export default function DockerTab({ setupKey }: Readonly<Props>) {
return (
<TabsContent value={String(OperatingSystem.DOCKER)}>
<TabsContentPadding>
Expand Down Expand Up @@ -42,7 +46,10 @@ export default function DockerTab() {
<Code.Line>
{" "}
-e NB_SETUP_KEY=
<span className={"text-netbird"}>SETUP_KEY</span> \
<span className={"text-netbird"}>
{setupKey ?? "SETUP_KEY"}
</span>{" "}
\
</Code.Line>
<Code.Line> -v netbird-client:/etc/netbird \</Code.Line>
{GRPC_API_ORIGIN && (
Expand Down
21 changes: 16 additions & 5 deletions src/modules/setup-netbird-modal/LinuxTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,13 @@ import { getNetBirdUpCommand } from "@utils/netbird";
import { TerminalSquareIcon } from "lucide-react";
import React from "react";
import { OperatingSystem } from "@/interfaces/OperatingSystem";
import { SetupKeyParameter } from "@/modules/setup-netbird-modal/SetupModal";

export default function LinuxTab() {
type Props = {
setupKey?: string;
};

export default function LinuxTab({ setupKey }: Readonly<Props>) {
return (
<TabsContent value={String(OperatingSystem.LINUX)}>
<TabsContentPadding>
Expand All @@ -27,9 +32,12 @@ export default function LinuxTab() {
<Code>curl -fsSL https://pkgs.netbird.io/install.sh | sh</Code>
</Steps.Step>
<Steps.Step step={2} line={false}>
<p>Run NetBird and log in the browser</p>
<p>Run NetBird {!setupKey && "and log in the browser"}</p>
<Code>
<Code.Line>{getNetBirdUpCommand()}</Code.Line>
<Code.Line>
{getNetBirdUpCommand()}
<SetupKeyParameter setupKey={setupKey} />
</Code.Line>
</Code>
</Steps.Step>
</Steps>
Expand Down Expand Up @@ -78,9 +86,12 @@ export default function LinuxTab() {
</Code>
</Steps.Step>
<Steps.Step step={3} line={false}>
<p>Run NetBird and log in the browser</p>
<p>Run NetBird {!setupKey && "and log in the browser"}</p>
<Code>
<Code.Line>{getNetBirdUpCommand()}</Code.Line>
<Code.Line>
{getNetBirdUpCommand()}
<SetupKeyParameter setupKey={setupKey} />
</Code.Line>
</Code>
</Steps.Step>
</Steps>
Expand Down
52 changes: 38 additions & 14 deletions src/modules/setup-netbird-modal/MacOSTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,12 @@ import {
import Link from "next/link";
import React from "react";
import { OperatingSystem } from "@/interfaces/OperatingSystem";
import { SetupKeyParameter } from "@/modules/setup-netbird-modal/SetupModal";

export default function MacOSTab() {
type Props = {
setupKey?: string;
};
export default function MacOSTab({ setupKey }: Readonly<Props>) {
return (
<TabsContent value={String(OperatingSystem.APPLE)}>
<TabsContentPadding>
Expand Down Expand Up @@ -98,15 +102,29 @@ export default function MacOSTab() {
</Steps.Step>
)}

<Steps.Step step={GRPC_API_ORIGIN ? 3 : 2}>
<p>
{/* eslint-disable-next-line react/no-unescaped-entities */}
Click on "Connect" from the NetBird icon in your system tray
</p>
</Steps.Step>
<Steps.Step step={GRPC_API_ORIGIN ? 4 : 3} line={false}>
<p>Sign up using your email address</p>
</Steps.Step>
{setupKey ? (
<Steps.Step step={GRPC_API_ORIGIN ? 3 : 2} line={false}>
<p>Open Terminal and run NetBird</p>
<Code>
<Code.Line>
{getNetBirdUpCommand()}
<SetupKeyParameter setupKey={setupKey} />
</Code.Line>
</Code>
</Steps.Step>
) : (
<>
<Steps.Step step={GRPC_API_ORIGIN ? 3 : 2}>
<p>
{/* eslint-disable-next-line react/no-unescaped-entities */}
Click on "Connect" from the NetBird icon in your system tray
</p>
</Steps.Step>
<Steps.Step step={GRPC_API_ORIGIN ? 4 : 3} line={false}>
<p>Sign up using your email address</p>
</Steps.Step>
</>
)}
</Steps>
</TabsContentPadding>
<Separator />
Expand All @@ -125,9 +143,12 @@ export default function MacOSTab() {
</Code>
</Steps.Step>
<Steps.Step step={2} line={false}>
<p>Run NetBird and log in the browser</p>
<p>Run NetBird {!setupKey && "and log in the browser"}</p>
<Code>
<Code.Line>{getNetBirdUpCommand()}</Code.Line>
<Code.Line>
{getNetBirdUpCommand()}
<SetupKeyParameter setupKey={setupKey} />
</Code.Line>
</Code>
</Steps.Step>
</Steps>
Expand Down Expand Up @@ -179,9 +200,12 @@ export default function MacOSTab() {
</Code>
</Steps.Step>
<Steps.Step step={4} line={false}>
<p>Run NetBird and log in the browser</p>
<p>Run NetBird {!setupKey && "and log in the browser"}</p>
<Code>
<Code.Line>{getNetBirdUpCommand()}</Code.Line>
<Code.Line>
{getNetBirdUpCommand()}
<SetupKeyParameter setupKey={setupKey} />
</Code.Line>
</Code>
</Steps.Step>
</Steps>
Expand Down
Loading
Loading