Add ssh policy info for peers

src/contexts/AnnouncementProvider.tsx

@@ -4,7 +4,18 @@ import md5 from "crypto-js/md5";
 import React, { useEffect, useState } from "react";
 import { usePermissions } from "@/contexts/PermissionsProvider";
 
-const initialAnnouncements: Announcement[] = [];
+const initialAnnouncements: Announcement[] = [
+  {
+    tag: "New",
+    text: "NetBird v0.60.0 - Identity-aware, private SSH over your NetBird network.",
+    link: "https://docs.netbird.io/how-to/ssh",
+    linkText: "Documentation",
+    variant: "default", // "default" or "important"
+    isExternal: true,
+    closeable: true,
+    isCloudOnly: false,
+  },
+];
 
 export interface Announcement extends AnnouncementVariant {
   tag: string;

src/contexts/PeerProvider.tsx

@@ -138,6 +138,7 @@ export default function PeerProvider({
         <PeerSSHInstructions
           open={sshInstructionsModal}
           onOpenChange={setSSHInstructionsModal}
+          peer={peer}
           onSuccess={() => toggleSSH(true)}
         />
       )}

src/modules/access-control/AccessControlModal.tsx

@@ -45,7 +45,7 @@ import React, { useMemo, useState } from "react";
 import AccessControlIcon from "@/assets/icons/AccessControlIcon";
 import { usePermissions } from "@/contexts/PermissionsProvider";
 import { Group } from "@/interfaces/Group";
-import { Policy, Protocol } from "@/interfaces/Policy";
+import { Policy, PolicyRuleResource, Protocol } from "@/interfaces/Policy";
 import { PostureCheck } from "@/interfaces/PostureCheck";
 import { useAccessControl } from "@/modules/access-control/useAccessControl";
 import { PostureCheckTab } from "@/modules/posture-checks/ui/PostureCheckTab";
@@ -116,6 +116,9 @@ type ModalProps = {
   postureCheckTemplates?: PostureCheck[];
   useSave?: boolean;
   allowEditPeers?: boolean;
+  initialProtocol?: Protocol;
+  initialPorts?: number[];
+  initialDestinationResource?: PolicyRuleResource;
 };
 
 export function AccessControlModalContent({
@@ -128,6 +131,9 @@ export function AccessControlModalContent({
   initialDestinationGroups,
   initialName,
   initialDescription,
+  initialProtocol,
+  initialPorts,
+  initialDestinationResource,
 }: Readonly<ModalProps>) {
   const { permission } = usePermissions();
 
@@ -170,6 +176,9 @@ export function AccessControlModalContent({
     initialDestinationGroups,
     initialName,
     initialDescription,
+    initialPorts,
+    initialProtocol,
+    initialDestinationResource,
   });
 
   const [tab, setTab] = useState(() => {

src/modules/access-control/useAccessControl.ts

@@ -6,7 +6,12 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { useSWRConfig } from "swr";
 import { usePolicies } from "@/contexts/PoliciesProvider";
 import { Group } from "@/interfaces/Group";
-import { Policy, PortRange, Protocol } from "@/interfaces/Policy";
+import {
+  Policy,
+  PolicyRuleResource,
+  PortRange,
+  Protocol,
+} from "@/interfaces/Policy";
 import { PostureCheck } from "@/interfaces/PostureCheck";
 import useGroupHelper from "@/modules/groups/useGroupHelper";
 import { usePostureCheck } from "@/modules/posture-checks/usePostureCheck";
@@ -18,6 +23,9 @@ type Props = {
   initialDestinationGroups?: Group[] | string[];
   initialName?: string;
   initialDescription?: string;
+  initialProtocol?: Protocol;
+  initialPorts?: number[];
+  initialDestinationResource?: PolicyRuleResource;
 };
 
 // TODO add reducer
@@ -29,6 +37,9 @@ export const useAccessControl = ({
   initialName,
   initialDescription,
   onSuccess,
+  initialProtocol,
+  initialPorts,
+  initialDestinationResource,
 }: Props = {}) => {
   const { data: allPostureChecks, isLoading: isPostureChecksLoading } =
     useFetchApi<PostureCheck[]>("/posture-checks");
@@ -75,6 +86,7 @@ export const useAccessControl = ({
   const [enabled, setEnabled] = useState<boolean>(policy?.enabled ?? true);
 
   const [ports, setPorts] = useState<number[]>(() => {
+    if (initialPorts) return initialPorts;
     if (!firstRule) return [];
     if (firstRule.ports == undefined) return [];
     if (firstRule.ports.length > 0) {
@@ -93,7 +105,7 @@ export const useAccessControl = ({
   });
 
   const [protocol, setProtocol] = useState<Protocol>(
-    firstRule ? firstRule.protocol : "all",
+    firstRule ? firstRule.protocol : initialProtocol ?? "all",
   );
   const [direction, setDirection] = useState<Direction>(() => {
     if (!firstRule) return "bi";
@@ -131,7 +143,7 @@ export const useAccessControl = ({
   );
 
   const [destinationResource, setDestinationResource] = useState(
-    firstRule?.destinationResource,
+    firstRule?.destinationResource ?? initialDestinationResource,
   );
 
   const { updateOrCreateAndNotify: checkToCreate } = usePostureCheck({});

src/modules/peer/PeerSSHInstructions.tsx

@@ -9,26 +9,37 @@ import {
 } from "@components/modal/Modal";
 import ModalHeader from "@components/modal/ModalHeader";
 import Paragraph from "@components/Paragraph";
+import { SegmentedTabs } from "@components/SegmentedTabs";
 import Separator from "@components/Separator";
 import Steps from "@components/Steps";
 import { Lightbox } from "@components/ui/Lightbox";
 import { Mark } from "@components/ui/Mark";
 import { cn } from "@utils/helpers";
-import { ExternalLinkIcon, TerminalSquare } from "lucide-react";
+import { ExternalLinkIcon, PlusCircle, TerminalSquare } from "lucide-react";
 import * as React from "react";
+import { useState } from "react";
+import NetBirdIcon from "@/assets/icons/NetBirdIcon";
 import sshImage from "@/assets/ssh/ssh-client.png";
+import { Peer } from "@/interfaces/Peer";
+import { PeerSSHPolicyModal } from "@/modules/peer/PeerSSHPolicyModal";
+import { Terminal } from "@/modules/remote-access/ssh/Terminal";
 
 type Props = {
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
   onSuccess?: () => void;
+  peer?: Peer;
 };
 
 export const PeerSSHInstructions = ({
   open,
   onOpenChange,
   onSuccess,
+  peer,
 }: Props) => {
+  const [client, setClient] = useState("cli");
+  const [policyModal, setPolicyModal] = useState(false);
+
   return (
     <Modal open={open} onOpenChange={onOpenChange}>
       <ModalContent
@@ -39,36 +50,70 @@ export const PeerSSHInstructions = ({
           icon={<TerminalSquare size={16} className={"text-netbird"} />}
           title={"Enable SSH Access"}
           description={
-            "Allow remote SSH access to this machine from other connected network participants."
+            "Allow remote SSH access from other connected network participants."
           }
           color={"netbird"}
         />
 
         <Separator />
 
-        <div className={"px-8 py-3 flex flex-col gap-0 z-0"}>
+        <div className={"px-8 py-3 flex flex-col gap-0 z-0 mt-1"}>
+          <SegmentedTabs value={client} onChange={setClient}>
+            <SegmentedTabs.List className={"rounded-lg border"}>
+              <SegmentedTabs.Trigger value={"cli"}>
+                <TerminalSquare size={16} />
+                CLI
+              </SegmentedTabs.Trigger>
+              <SegmentedTabs.Trigger value={"gui"}>
+                <NetBirdIcon size={16} />
+                Desktop Client
+              </SegmentedTabs.Trigger>
+            </SegmentedTabs.List>
+          </SegmentedTabs>
+
           <Steps>
-            <Steps.Step step={1}>
-              <p className={"font-normal"}>
-                If you are using NetBird via CLI, you can enable SSH by running
-              </p>
-              <Code codeToCopy={"netbird down"}>
-                <Code.Line>{`netbird down # if NetBird is already running`}</Code.Line>
-              </Code>
-              <Code>
-                <Code.Line>{`netbird up --allow-server-ssh --enable-ssh-root`}</Code.Line>
-              </Code>
-            </Steps.Step>
+            {client === "cli" ? (
+              <Steps.Step step={1}>
+                <p className={"font-normal"}>
+                  If you are using NetBird via CLI, you can enable SSH by
+                  running
+                </p>
+                <Code codeToCopy={"netbird down"}>
+                  <Code.Line>{`netbird down # if NetBird is already running`}</Code.Line>
+                </Code>
+                <Code>
+                  <Code.Line>{`netbird up --allow-server-ssh --enable-ssh-root`}</Code.Line>
+                </Code>
+              </Steps.Step>
+            ) : (
+              <Steps.Step step={1}>
+                <p className={"font-normal"}>
+                  If you are using NetBird via the Desktop Client, click on the
+                  NetBird tray icon, go to <Mark>Settings</Mark> and click{" "}
+                  <Mark>Allow SSH</Mark>. If you want to enable Root Login go to{" "}
+                  <Mark>Settings &gt; Advanced Settings</Mark> and enable SSH
+                  Root Login under the SSH tab.
+                </p>
+                <Lightbox image={sshImage} />
+              </Steps.Step>
+            )}
 
             <Steps.Step step={2}>
               <p className={"font-normal"}>
-                If you are using NetBird via the Desktop Client, click on the
-                NetBird tray icon, go to <Mark>Settings</Mark> and click{" "}
-                <Mark>Allow SSH</Mark> <br />
+                Starting from NetBird v0.60.0, SSH requires an explicit access
+                control policy that allows <Mark>TCP</Mark> traffic on port{" "}
+                <Mark>22</Mark>
               </p>
-              <Lightbox image={sshImage} />
+              <div className={"mt-2"}>
+                <Button
+                  variant={"secondary"}
+                  onClick={() => setPolicyModal(true)}
+                >
+                  <PlusCircle size={16} />
+                  Create SSH Policy
+                </Button>
+              </div>
             </Steps.Step>
-
             <Steps.Step step={3} line={false}>
               <p className={"font-normal"}>
                 Once the NetBird SSH server is allowed on the client, <br />
@@ -96,15 +141,17 @@ export const PeerSSHInstructions = ({
               <Button variant={"secondary"}>Cancel</Button>
             </ModalClose>
 
-            <Button
-              variant={"primary"}
-              onClick={onSuccess}
-              data-cy={"create-setup-key"}
-            >
+            <Button variant={"primary"} onClick={onSuccess}>
               Confirm & Enable
             </Button>
           </div>
         </ModalFooter>
+
+        <PeerSSHPolicyModal
+          open={policyModal}
+          onOpenChange={setPolicyModal}
+          peer={peer}
+        />
       </ModalContent>
     </Modal>
   );

src/modules/peer/PeerSSHPolicyInfo.tsx

@@ -0,0 +1,38 @@
+import { Callout } from "@components/Callout";
+import { InlineButtonLink } from "@components/InlineLink";
+import { cn } from "@utils/helpers";
+import * as React from "react";
+import { useState } from "react";
+import { Peer } from "@/interfaces/Peer";
+import { PeerSSHPolicyModal } from "@/modules/peer/PeerSSHPolicyModal";
+import { usePeerSSHPolicyCheck } from "@/modules/peer/usePeerSSHPolicyCheck";
+
+type Props = {
+  peer?: Peer;
+  className?: string;
+};
+
+export const PeerSSHPolicyInfo = ({ peer, className }: Props) => {
+  const { showSSHPolicyInfo } = usePeerSSHPolicyCheck(peer);
+  const [policyModal, setPolicyModal] = useState(false);
+  return (
+    showSSHPolicyInfo && (
+      <>
+        <Callout className={cn("max-w-xl", className)} variant={"warning"}>
+          <span>
+            Starting from NetBird v0.60.0, SSH requires an explicit access
+            control policy that allows TCP traffic on port 22.{" "}
+            <InlineButtonLink onClick={() => setPolicyModal(true)}>
+              Create SSH Policy
+            </InlineButtonLink>
+          </span>
+        </Callout>
+        <PeerSSHPolicyModal
+          open={policyModal}
+          onOpenChange={setPolicyModal}
+          peer={peer}
+        />
+      </>
+    )
+  );
+};

src/modules/peer/PeerSSHPolicyModal.tsx

@@ -0,0 +1,35 @@
+import { Modal } from "@components/modal/Modal";
+import * as React from "react";
+import { Peer } from "@/interfaces/Peer";
+import { PolicyRuleResource } from "@/interfaces/Policy";
+import { AccessControlModalContent } from "@/modules/access-control/AccessControlModal";
+
+type Props = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  peer?: Peer;
+};
+
+export const PeerSSHPolicyModal = ({ open, onOpenChange, peer }: Props) => {
+  return (
+    <Modal open={open} onOpenChange={onOpenChange}>
+      <AccessControlModalContent
+        key={open ? "1" : "0"}
+        initialPorts={[22]}
+        initialProtocol={"tcp"}
+        initialName={"SSH Access"}
+        initialDestinationResource={
+          peer
+            ? ({
+                id: peer.id,
+                type: "peer",
+              } as PolicyRuleResource)
+            : undefined
+        }
+        onSuccess={async (p) => {
+          onOpenChange(false);
+        }}
+      />
+    </Modal>
+  );
+};

src/modules/peer/PeerSSHToggle.tsx

@@ -4,6 +4,7 @@ import { LockIcon, TerminalSquare } from "lucide-react";
 import * as React from "react";
 import { usePeer } from "@/contexts/PeerProvider";
 import { usePermissions } from "@/contexts/PermissionsProvider";
+import { PeerSSHPolicyInfo } from "@/modules/peer/PeerSSHPolicyInfo";
 
 export const PeerSSHToggle = () => {
   const { permission } = usePermissions();
@@ -42,6 +43,7 @@ export const PeerSSHToggle = () => {
           }
         />
       </FullTooltip>
+      <PeerSSHPolicyInfo peer={peer} />
     </>
   );
 };