Skip to content

Commit

Permalink
Extend networks routing peer modal with option to create a setup key …
Browse files Browse the repository at this point in the history 
…and install netbird
  • Loading branch information
@heisbrot
heisbrot committed Jan 16, 2025
1 parent d3a8b70 commit 31db280
Show file tree
Hide file tree
Showing 4 changed files with 154 additions and 81 deletions.
2 changes: 1 addition & 1 deletion src/components/PeerSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ export function PeerSelector({
<div className={"max-w-xs mx-auto"}>
<DropdownInfoText>
{
"Seems like you don't have any linux peers to assign as a routing peer."
"Seems like you don't have any Linux peers to assign as a routing peer."
}
</DropdownInfoText>
</div>
Expand Down
173 changes: 115 additions & 58 deletions src/modules/networks/routing-peers/NetworkRoutingPeerModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import { cn } from "@utils/helpers";
import { uniqBy } from "lodash";
import {
ArrowDownWideNarrow,
CirclePlusIcon,
ExternalLinkIcon,
FolderGit2,
MonitorSmartphoneIcon,
Expand All @@ -37,6 +38,7 @@ import React, { useState } from "react";
import { Network, NetworkRouter } from "@/interfaces/Network";
import { Peer } from "@/interfaces/Peer";
import useGroupHelper from "@/modules/groups/useGroupHelper";
import SetupKeyModal from "@/modules/setup-keys/SetupKeyModal";

type Props = {
network: Network;
Expand Down Expand Up @@ -178,6 +180,10 @@ function RoutingPeerModalContent({
});
};

const [setupKeyModal, setSetupKeyModal] = useState(false);

const canContinue = routingPeer !== undefined || routingPeerGroups.length > 0;

return (
<ModalContent maxWidthClass={"max-w-xl"}>
<ModalHeader
Expand Down Expand Up @@ -209,43 +215,82 @@ function RoutingPeerModalContent({
Advanced Settings
</TabsTrigger>
</TabsList>
<TabsContent value={"router"} className={"pb-8"}>
<div className={"flex flex-col gap-4 px-8 "}>
<SegmentedTabs value={type} onChange={setType}>
<SegmentedTabs.List>
<SegmentedTabs.Trigger value={"peer"}>
<MonitorSmartphoneIcon size={16} />
Routing Peers
</SegmentedTabs.Trigger>
<TabsContent value={"router"} className={"pb-6"}>
<div className={"flex flex-col gap-4 px-8"}>
<div className={"relative "}>
<SegmentedTabs
value={type}
onChange={(state) => {
setType(state);
setRoutingPeer(undefined);
setRoutingPeerGroups([]);
}}
>
<SegmentedTabs.List>
<SegmentedTabs.Trigger value={"peer"}>
<MonitorSmartphoneIcon size={16} />
Routing Peers
</SegmentedTabs.Trigger>

<SegmentedTabs.Trigger value={"group"}>
<FolderGit2 size={16} />
Peer Group
</SegmentedTabs.Trigger>
</SegmentedTabs.List>
<SegmentedTabs.Content value={"peer"}>
<div>
<HelpText>
Assign a single or multiple peers as routing peers for the
network.
</HelpText>
<PeerSelector onChange={setRoutingPeer} value={routingPeer} />
</div>
</SegmentedTabs.Content>
<SegmentedTabs.Content value={"group"}>
<div>
<HelpText>
Assign a peer group with Linux machines to be used as
routing peers.
</HelpText>
<PeerGroupSelector
max={1}
onChange={setRoutingPeerGroups}
values={routingPeerGroups}
/>
</div>
</SegmentedTabs.Content>
</SegmentedTabs>
<SegmentedTabs.Trigger value={"group"}>
<FolderGit2 size={16} />
Peer Group
</SegmentedTabs.Trigger>
</SegmentedTabs.List>
<SegmentedTabs.Content value={"peer"}>
<div>
<HelpText>
Assign a single or multiple peers as routing peers for the
network.
</HelpText>
<PeerSelector
onChange={setRoutingPeer}
value={routingPeer}
/>
</div>
</SegmentedTabs.Content>
<SegmentedTabs.Content value={"group"}>
<div>
<HelpText>
Assign a peer group with Linux machines to be used as
routing peers.
</HelpText>
<PeerGroupSelector
max={1}
onChange={setRoutingPeerGroups}
values={routingPeerGroups}
/>
</div>
</SegmentedTabs.Content>
</SegmentedTabs>
</div>

<div className={cn("flex justify-between items-center mt-3")}>
<div>
<Label>Install Routing Peer</Label>
<HelpText className={""}>
You can install NetBird with a Setup Key on one or more Linux
machines to act as routing peers.
</HelpText>
</div>
<Button
variant={"secondary"}
size={"xs"}
className={"ml-8"}
onClick={() => setSetupKeyModal(true)}
>
<CirclePlusIcon size={14} />
Create Setup Key
</Button>
{setupKeyModal && (
<SetupKeyModal
open={setupKeyModal}
setOpen={setSetupKeyModal}
showOnlyRoutingPeerOS={true}
name={`Routing Peer (${network.name})`}
/>
)}
</div>
</div>
</TabsContent>

Expand Down Expand Up @@ -321,31 +366,43 @@ function RoutingPeerModalContent({
</Paragraph>
</div>
<div className={"flex gap-3 w-full justify-end"}>
<ModalClose asChild={true}>
<Button variant={"secondary"}>Cancel</Button>
</ModalClose>
{tab == "router" && (
<Button variant={"primary"} onClick={() => setTab("settings")}>
Continue
</Button>
<>
<ModalClose asChild={true}>
<Button variant={"secondary"}>Cancel</Button>
</ModalClose>
<Button
variant={"primary"}
onClick={() => setTab("settings")}
disabled={!canContinue}
>
Continue
</Button>
</>
)}
{tab == "settings" && (
<Button
variant={"primary"}
disabled={
routingPeer == undefined && routingPeerGroups.length <= 0
}
onClick={router ? updateRouter : addRouter}
>
{router ? (
<>Save Changes</>
) : (
<>
<PlusCircle size={16} />
Add Routing Peer
</>
)}
</Button>
<>
<Button variant={"secondary"} onClick={() => setTab("router")}>
Back
</Button>

<Button
variant={"primary"}
disabled={
routingPeer == undefined && routingPeerGroups.length <= 0
}
onClick={router ? updateRouter : addRouter}
>
{router ? (
<>Save Changes</>
) : (
<>
<PlusCircle size={16} />
Add Routing Peer
</>
)}
</Button>
</>
)}
</div>
</ModalFooter>
Expand Down
11 changes: 7 additions & 4 deletions src/modules/setup-keys/SetupKeyModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@ import {
import React, { useMemo, useState } from "react";
import { useSWRConfig } from "swr";
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";
Expand All @@ -42,19 +41,19 @@ type Props = {
open: boolean;
setOpen: (open: boolean) => void;
name?: string;
showOnlyRoutingPeerOS?: boolean;
};
const copyMessage = "Setup-Key was copied to your clipboard!";
export default function SetupKeyModal({
children,
open,
setOpen,
name,
showOnlyRoutingPeerOS,
}: 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) => {
setSetupKey(setupKey);
setSuccessModal(true);
Expand All @@ -75,7 +74,11 @@ export default function SetupKeyModal({
}}
key={installModal ? 2 : 3}
>
<SetupModal showClose={true} setupKey={setupKey?.key} />
<SetupModal
showClose={true}
setupKey={setupKey?.key}
showOnlyRoutingPeerOS={showOnlyRoutingPeerOS}
/>
</Modal>

<Modal
Expand Down
49 changes: 31 additions & 18 deletions src/modules/setup-netbird-modal/SetupModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,16 +33,22 @@ type Props = {
showClose?: boolean;
user?: OidcUserInfo;
setupKey?: string;
showOnlyRoutingPeerOS?: boolean;
};

export default function SetupModal({
showClose = true,
user,
setupKey,
showOnlyRoutingPeerOS = false,
}: Readonly<Props>) {
return (
<ModalContent showClose={showClose}>
<SetupModalContent user={user} setupKey={setupKey} />
<SetupModalContent
user={user}
setupKey={setupKey}
showOnlyRoutingPeerOS={showOnlyRoutingPeerOS}
/>
</ModalContent>
);
}
Expand All @@ -53,6 +59,7 @@ type SetupModalContentProps = {
footer?: boolean;
tabAlignment?: "center" | "start" | "end";
setupKey?: string;
showOnlyRoutingPeerOS?: boolean;
};

export function SetupModalContent({
Expand All @@ -61,6 +68,7 @@ export function SetupModalContent({
footer = true,
tabAlignment = "center",
setupKey,
showOnlyRoutingPeerOS,
}: Readonly<SetupModalContentProps>) {
const os = useOperatingSystem();
const [isFirstRun] = useLocalStorage<boolean>("netbird-first-run", true);
Expand Down Expand Up @@ -90,7 +98,7 @@ export function SetupModalContent({
className={cn("mx-auto mt-3", setupKey ? "max-w-sm" : "max-w-xs")}
>
{setupKey
? "To get started, install and run NetBird with your recently created setup key as a parameter."
? "To get started, install and run NetBird with the setup key as a parameter."
: "To get started, install NetBird and log in with your email account."}
</Paragraph>
</div>
Expand All @@ -106,22 +114,27 @@ export function SetupModalContent({
/>
Linux
</TabsTrigger>
<TabsTrigger value={String(OperatingSystem.WINDOWS)}>
<WindowsIcon
className={
"fill-nb-gray-500 group-data-[state=active]/trigger:fill-netbird transition-all"
}
/>
Windows
</TabsTrigger>
<TabsTrigger value={String(OperatingSystem.APPLE)}>
<AppleIcon
className={
"fill-nb-gray-500 group-data-[state=active]/trigger:fill-netbird transition-all"
}
/>
macOS
</TabsTrigger>

{!showOnlyRoutingPeerOS && (
<>
<TabsTrigger value={String(OperatingSystem.WINDOWS)}>
<WindowsIcon
className={
"fill-nb-gray-500 group-data-[state=active]/trigger:fill-netbird transition-all"
}
/>
Windows
</TabsTrigger>
<TabsTrigger value={String(OperatingSystem.APPLE)}>
<AppleIcon
className={
"fill-nb-gray-500 group-data-[state=active]/trigger:fill-netbird transition-all"
}
/>
macOS
</TabsTrigger>
</>
)}

{!setupKey && (
<>
Expand Down

0 comments on commit 31db280

Please sign in to comment.