fix update bug

src/components/PeerUpdate.tsx

@@ -35,6 +35,7 @@ import {
   LockOutlined,
   EditOutlined,
   ExclamationCircleOutlined,
+  ExclamationCircleFilled,
 } from "@ant-design/icons";
 import { RuleObject } from "antd/lib/form";
 import { useGetTokenSilently } from "../utils/token";
@@ -145,10 +146,22 @@ const PeerUpdate = (props: any) => {
 
   useEffect(() => {
     setPeerRoutes([]);
+    const temp: any[] = [];
+    if (peer && peer.groups) {
+      peer?.groups?.forEach((pg: any) => {
+        routes.forEach((route: any) => {
+          if (route.peer_groups?.includes(pg.id)) {
+            temp.push(route);
+          }
+        });
+      });
+    }
+
     const filterPeerRoutes: any = routes.filter(
       (route) => route.peer === peer.id
     );
-    setPeerRoutes(filterPeerRoutes);
+    let mergeArr: any = [...filterPeerRoutes, ...temp];
+    setPeerRoutes(mergeArr);
     const filterNotPeerRoutes: any = routes.filter(
       (route) => route.peer !== peer.id
     );
@@ -180,11 +193,13 @@ const PeerUpdate = (props: any) => {
   useEffect(() => {}, [users]);
 
   const routeAddAllowed = (os: string): boolean => {
-    return os !== ""
-        && !os.toLowerCase().startsWith("darwin")
-        && !os.toLowerCase().startsWith("windows")
-        && !os.toLowerCase().startsWith("android")
-  }
+    return (
+      os !== "" &&
+      !os.toLowerCase().startsWith("darwin") &&
+      !os.toLowerCase().startsWith("windows") &&
+      !os.toLowerCase().startsWith("android")
+    );
+  };
 
   const toggleEditName = (status: boolean, value?: string) => {
     setEditName(status);
@@ -396,13 +411,13 @@ const PeerUpdate = (props: any) => {
       const style = { marginTop: 85 };
       if (savedGroups.loading) {
         message.loading({
-          content: "Updating peer groups...",
+          content: "Updating peer group...",
           key: saveGroupsKey,
           style,
         });
       } else if (savedGroups.success) {
         message.success({
-          content: "Peer groups have been successfully updated.",
+          content: "Peer group have been successfully updated.",
           key: saveGroupsKey,
           duration: 2,
           style,
@@ -415,7 +430,7 @@ const PeerUpdate = (props: any) => {
       } else if (savedGroups.error) {
         message.error({
           content:
-            "Failed to update peer groups. You might not have enough permissions.",
+            "Failed to update peer group. You might not have enough permissions.",
           key: saveGroupsKey,
           duration: 2,
           style,
@@ -659,6 +674,48 @@ const PeerUpdate = (props: any) => {
     }
   }, [deletedRoute]);
 
+  const renderGroupRouting = (rowGroups: string[] | null) => {
+    let groupsMap = new Map<string, Group>();
+    groups.forEach((g) => {
+      groupsMap.set(g.id!, g);
+    });
+
+    let displayGroups: Group[] = [];
+    if (rowGroups) {
+      displayGroups = rowGroups
+        .filter((g) => groupsMap.get(g))
+        .map((g) => groupsMap.get(g)!);
+    }
+
+    const groupToCompare =
+      peer &&
+      peer.groups &&
+      peer?.groups.map((element1) => {
+        return element1.id;
+      });
+
+    return (
+      <div className="gp-main-wrapper">
+        {displayGroups &&
+          displayGroups.length > 0 &&
+          displayGroups.map((group) => {
+            if (group.id && !groupToCompare?.includes(group?.id)) {
+              return null;
+            }
+            return (
+              <div className="g-r-wrapper">
+                <span className="f-r-name">
+                  <Tag color={"blue"} style={{ marginRight: 3 }}>
+                    {group.name}
+                  </Tag>
+                </span>{" "}
+              </div>
+            );
+          })}
+      </div>
+    );
+  };
+
   return (
     <>
       {peer && (
@@ -972,133 +1029,151 @@ const PeerUpdate = (props: any) => {
           {/* --- */}
           {!isGroupUpdateView && (
             <>
-              {routeAddAllowed(peer.os) &&
-              <Card
-                bordered={true}
-                // loading={loading}ƒ
-                style={{ marginBottom: "7px" }}
-              >
-                <div style={{ maxWidth: "800px" }}>
-                  <Paragraph
-                    style={{
-                      textAlign: "left",
-                      whiteSpace: "pre-line",
-                      fontSize: "16px",
-                      fontWeight: "500",
-                    }}
-                  >
-                    Network routes
-                  </Paragraph>
-                  <Row
-                    gutter={21}
-                    style={{ marginTop: "-16px", marginBottom: "10px" }}
-                  >
-                    <Col
-                      xs={24}
-                      sm={24}
-                      md={20}
-                      lg={20}
-                      xl={20}
-                      xxl={20}
-                      span={20}
+              {routeAddAllowed(peer.os) && (
+                <Card
+                  bordered={true}
+                  // loading={loading}ƒ
+                  style={{ marginBottom: "7px" }}
+                >
+                  <div style={{ maxWidth: "800px" }}>
+                    <Paragraph
+                      style={{
+                        textAlign: "left",
+                        whiteSpace: "pre-line",
+                        fontSize: "16px",
+                        fontWeight: "500",
+                      }}
                     >
-                      <Paragraph
-                        type={"secondary"}
-                        style={{ textAlign: "left", whiteSpace: "pre-line" }}
+                      Network routes
+                    </Paragraph>
+                    <Row
+                      gutter={21}
+                      style={{ marginTop: "-16px", marginBottom: "10px" }}
+                    >
+                      <Col
+                        xs={24}
+                        sm={24}
+                        md={20}
+                        lg={20}
+                        xl={20}
+                        xxl={20}
+                        span={20}
                       >
-                        Access other networks without installing NetBird on
-                        every resource.
-                      </Paragraph>
-                    </Col>
-                    <Col
-                      xs={24}
-                      sm={24}
-                      md={1}
-                      lg={1}
-                      xl={1}
-                      xxl={1}
-                      span={1}
-                      style={{ marginTop: "-16px" }}
-                    >
-                      {peerRoutes && peerRoutes.length > 0 && (
+                        <Paragraph
+                          type={"secondary"}
+                          style={{ textAlign: "left", whiteSpace: "pre-line" }}
+                        >
+                          Access other networks without installing NetBird on
+                          every resource.
+                        </Paragraph>
+                      </Col>
+                      <Col
+                        xs={24}
+                        sm={24}
+                        md={1}
+                        lg={1}
+                        xl={1}
+                        xxl={1}
+                        span={1}
+                        style={{ marginTop: "-16px" }}
+                      >
+                        {peerRoutes && peerRoutes.length > 0 && (
+                          <Button type="primary" onClick={onClickAddNewRoute}>
+                            Add route
+                          </Button>
+                        )}
+                      </Col>
+                    </Row>
+                    {peerRoutes && peerRoutes.length > 0 && (
+                      <Table
+                        size={"small"}
+                        style={{ marginTop: "-10px" }}
+                        showHeader={false}
+                        scroll={{ x: 800 }}
+                        pagination={false}
+                        dataSource={peerRoutes}
+                      >
+                        <Column title="Name" dataIndex="network_id" />
+                        <Column title="Name" dataIndex="network" />
+                        <Column
+                          title="enabled"
+                          dataIndex="network"
+                          render={(e, record: any, index) => {
+                            return record.peer_groups ? (
+                              renderGroupRouting(record.peer_groups)
+                            ) : (
+                              <>
+                                <Switch
+                                  defaultChecked={record.enabled}
+                                  size="small"
+                                  onChange={(checked) =>
+                                    onRouteEnableChange(checked, record)
+                                  }
+                                />
+                              </>
+                            );
+                          }}
+                        />
+
+                        <Column
+                          align="right"
+                          render={(text, record: any, index) => {
+                            return record.peer_groups ? (
+                              <Tooltip
+                                color="#fff"
+                                overlayClassName="peer-avail-tooltip"
+                                title={`Peer  "${formPeer.name}" is a part of a group used in a network route.
+                                 To remove this peer from the network route, you need to disassociate
+                                 this peer from the groups used in this route.`}
+                              >
+                                <Button type={"text"} disabled={true}>
+                                  Delete
+                                </Button>
+                              </Tooltip>
+                            ) : (
+                              <Button
+                                danger={true}
+                                type={"text"}
+                                onClick={() => {
+                                  showConfirmDelete(
+                                    record.id,
+                                    record.network_id
+                                  );
+                                }}
+                              >
+                                Delete
+                              </Button>
+                            );
+                          }}
+                        />
+                      </Table>
+                    )}
+                    <Divider style={{ marginTop: "-12px" }}></Divider>
+                    {(peerRoutes === null || peerRoutes.length === 0) && (
+                      <Space
+                        direction="vertical"
+                        size="small"
+                        align="start"
+                        style={{
+                          display: "flex",
+                          padding: "35px 0px",
+                          marginTop: "-40px",
+                          justifyContent: "center",
+                        }}
+                      >
+                        <Paragraph
+                          style={{ textAlign: "start", whiteSpace: "pre-line" }}
+                        >
+                          You don't have any routes yet
+                        </Paragraph>
                         <Button type="primary" onClick={onClickAddNewRoute}>
                           Add route
                         </Button>
-                      )}
-                    </Col>
-                  </Row>
-                  {peerRoutes && peerRoutes.length > 0 && (
-                    <Table
-                      size={"small"}
-                      style={{ marginTop: "-10px" }}
-                      showHeader={false}
-                      scroll={{ x: 800 }}
-                      pagination={false}
-                      dataSource={peerRoutes}
-                    >
-                      <Column title="Name" dataIndex="network_id" />
-                      <Column title="Name" dataIndex="network" />
-                      <Column
-                        title="enabled"
-                        dataIndex="network"
-                        render={(e, record: any, index) => {
-                          return (
-                            <>
-                              <Switch
-                                defaultChecked={record.enabled}
-                                size="small"
-                                onChange={(checked) =>
-                                  onRouteEnableChange(checked, record)
-                                }
-                              />
-                            </>
-                          );
-                        }}
-                      />
-
-                      <Column
-                        align="right"
-                        render={(text, record: any, index) => {
-                          return (
-                            <Button
-                              danger={true}
-                              type={"text"}
-                              onClick={() => {
-                                showConfirmDelete(record.id, record.network_id);
-                              }}
-                            >
-                              Delete
-                            </Button>
-                          );
-                        }}
-                      />
-                    </Table>
-                  )}
-                  <Divider style={{ marginTop: "-12px" }}></Divider>
-                  {(peerRoutes === null || peerRoutes.length === 0) && (
-                    <Space
-                      direction="vertical"
-                      size="small"
-                      align="start"
-                      style={{
-                        display: "flex",
-                        padding: "35px 0px",
-                        marginTop: "-40px",
-                        justifyContent: "center",
-                      }}
-                    >
-                      <Paragraph
-                        style={{ textAlign: "start", whiteSpace: "pre-line" }}
-                      >
-                        You don't have any routes yet
-                      </Paragraph>
-                      <Button type="primary" onClick={onClickAddNewRoute}>
-                        Add route
-                      </Button>
-                    </Space>
-                  )}
-                </div>
-              </Card>}
+                      </Space>
+                    )}
+                  </div>
+                </Card>
+              )}
 
               <Card bordered={true} style={{ marginBottom: "50px" }}>
                 <Col span={24}>

src/components/RouteAddNew.tsx

@@ -17,7 +17,9 @@ import {
   Switch,
   Modal,
   Typography,
+  Tabs,
 } from "antd";
+import type { TabsProps } from "antd";
 import CreatableSelect from "react-select/creatable";
 import { Route, RouteToSave } from "../store/route/types";
 import { Header } from "antd/es/layout/layout";
@@ -38,6 +40,7 @@ const { Panel } = Collapse;
 interface FormRoute extends Route {}
 
 const RouteAddNew = (selectedPeer: any) => {
+  const [activeTab, setActiveTab] = useState<string | null>(null);
   const {
     blueTagRender,
     handleChangeTags,
@@ -75,6 +78,10 @@ const RouteAddNew = (selectedPeer: any) => {
   const [peerNameToIP, peerIPToName, peerIPToID] = initPeerMaps(peers);
   const [newRoute, setNewRoute] = useState(false);
 
+  useEffect(() => {
+    if (setupNewRouteVisible) setActiveTab("routingPeer");
+  }, [setupNewRouteVisible]);
+
   useEffect(() => {
     if (editName)
       inputNameRef.current!.focus({
@@ -159,6 +166,12 @@ const RouteAddNew = (selectedPeer: any) => {
   }
 
   const createRouteToSave = (inputRoute: FormRoute): RouteToSave => {
+    if (inputRoute.peer_groups) {
+      inputRoute = {
+        ...inputRoute,
+        peer_groups: [inputRoute.peer_groups[inputRoute.peer_groups.length - 1]],
+      };
+    }
     let peerIDList = inputRoute.peer.split(routePeerSeparator);
     let peerID: string;
     if (peerIDList.length === 1) {
@@ -175,24 +188,70 @@ const RouteAddNew = (selectedPeer: any) => {
       inputRoute.groups
     );
 
-    return {
+    const payload = {
       id: inputRoute.id,
       network: inputRoute.network,
       network_id: inputRoute.network_id,
       description: inputRoute.description,
-      peer: peerID,
       enabled: inputRoute.enabled,
       masquerade: inputRoute.masquerade,
       metric: inputRoute.metric,
       groups: existingGroups,
       groupsToCreate: groupsToCreate,
     } as RouteToSave;
+ 
+    if (activeTab === "routingPeer") {
+      let pay = { ...payload, peer: peerID };
+      return pay;
+    }
+
+    if (activeTab === "groupOfPeers") {
+      if (inputRoute.peer_groups) {
+        let [currentPeersGroup, peerGroupsToCreate] =
+          getExistingAndToCreateGroupsLists(inputRoute.peer_groups);
+
+        let pay = {
+          ...payload,
+          peer_groups: currentPeersGroup,
+          peerGroupsToCreate: peerGroupsToCreate,
+        };
+        return pay;
+      }
+    }
+
+    return payload;
   };
 
   const handleFormSubmit = () => {
     form
       .validateFields()
       .then(() => {
+        const t = routes.filter((route) => {
+          if (
+            route.network_id === formRoute.network_id &&
+            route.network === formRoute.network
+          ) {
+            return route;
+          }
+        });
+
+        if (
+          formRoute.peer_groups &&
+          formRoute.peer_groups.length > 0 &&
+          t &&
+          t.length > 0
+        ) {
+          const style = { marginTop: 85 };
+          const duplicateNetworkIdKey = "duplicateKey";
+          return message.error({
+            content:
+              "A route with this network identifier and network range already exists. Please use a different network identifier or network range.",
+            key: duplicateNetworkIdKey,
+            duration: 5,
+            style,
+          });
+        }
+
         if (!setupNewRouteHA || formRoute.peer != "") {
           const routeToSave = createRouteToSave(formRoute);
           dispatch(
@@ -243,6 +302,7 @@ const RouteAddNew = (selectedPeer: any) => {
 
   const onCancel = () => {
     if (savedRoute.loading) return;
+    setActiveTab(null);
     setEditName(false);
     dispatch(
       routeActions.setRoute({
@@ -254,6 +314,7 @@ const RouteAddNew = (selectedPeer: any) => {
         masquerade: false,
         enabled: true,
         groups: [],
+        peer_groups: [],
       } as Route)
     );
     setVisibleNewRoute(false);
@@ -300,8 +361,15 @@ const RouteAddNew = (selectedPeer: any) => {
     return Promise.resolve();
   };
 
+  const peerGroupsValidaton = (_: RuleObject, value: string) => {
+     if (value.length < 1) {
+      return Promise.reject(new Error("Please select peer groups"));
+    }
+    return Promise.resolve();
+  };
+ 
   const selectPreValidator = (obj: RuleObject, value: string[]) => {
-    if (setupNewRouteHA && formRoute.peer == "") {
+    if (setupNewRouteHA && formRoute.peer === "") {
       let [, newGroups] = getExistingAndToCreateGroupsLists(value);
       if (newGroups.length > 0) {
         return Promise.reject(
@@ -361,56 +429,95 @@ const RouteAddNew = (selectedPeer: any) => {
     }
   };
 
-  const styleNotification = { marginTop: 85 };
+  const onTabChange = (key: string) => {
+    setActiveTab(key);
+  };
 
-  const saveKey = "saving";
-  useEffect(() => {
-    if (savedRoute.loading) {
-      message.loading({
-        content: "Saving...",
-        key: saveKey,
-        duration: 0,
-        style: styleNotification,
+  const handleSingleChangeTags = (values: any) => {
+     const lastValue = values[values.length - 1];
+     if (values.length > 0) {
+      form.setFieldsValue({
+        peer_groups: [lastValue],
       });
-    } else if (savedRoute.success) {
-      message.success({
-        content: "Route has been successfully added.",
-        key: saveKey,
-        duration: 2,
-        style: styleNotification,
-      });
-      dispatch(routeActions.setSetupNewRouteVisible(false));
-      dispatch(routeActions.setSetupEditRouteVisible(false));
-      dispatch(routeActions.setSetupEditRoutePeerVisible(false));
-      dispatch(routeActions.setSavedRoute({ ...savedRoute, success: false }));
-      dispatch(routeActions.resetSavedRoute(null));
-    } else if (savedRoute.error) {
-      let errorMsg = "Failed to update network route";
-      switch (savedRoute.error.statusCode) {
-        case 403:
-          errorMsg =
-            "Failed to update network route. You might not have enough permissions.";
-          break;
-        default:
-          errorMsg = savedRoute.error.data.message
-            ? savedRoute.error.data.message
-            : errorMsg;
-          break;
-      }
-      message.error({
-        content: errorMsg,
-        key: saveKey,
-        duration: 5,
-        style: styleNotification,
-      });
-      dispatch(routeActions.setSavedRoute({ ...savedRoute, error: null }));
-      dispatch(routeActions.resetSavedRoute(null));
     }
-  }, [savedRoute]);
+  };
+
+  const items: TabsProps["items"] = [
+    {
+      key: "routingPeer",
+      label: "Routing Peer",
+      children: (
+        <>
+          <Paragraph
+            type={"secondary"}
+            style={{
+              marginTop: "-2",
+              fontWeight: "400",
+              marginBottom: "5px",
+            }}
+          >
+            Assign a peer as a routing peer for the Network CIDR
+          </Paragraph>
+          {activeTab === "routingPeer" && (
+            <Form.Item name="peer" rules={[{ validator: peerValidator }]}>
+              <Select
+                showSearch
+                style={{ width: "100%" }}
+                placeholder="Select Peer"
+                dropdownRender={peerDropDownRender}
+                options={options}
+                allowClear={true}
+                disabled={!!selectedPeer.selectedPeer}
+              />
+            </Form.Item>
+          )}{" "}
+        </>
+      ),
+    },
+    {
+      key: "groupOfPeers",
+      label: "Peer group",
+      children: (
+        <>
+          <Paragraph
+            type={"secondary"}
+            style={{
+              marginTop: "-2",
+              fontWeight: "400",
+              marginBottom: "5px",
+            }}
+          >
+            Assign peer group with Linux machines to be used as routing peers
+          </Paragraph>
+          {activeTab === "groupOfPeers" && (
+            <Form.Item
+              name="peer_groups"
+              rules={[{ validator: peerGroupsValidaton }]}
+            >
+              <Select
+                mode="tags"
+                style={{ width: "100%" }}
+                tagRender={blueTagRender}
+                onChange={handleSingleChangeTags}
+                dropdownRender={dropDownRender}
+                optionFilterProp="serchValue"
+              >
+                {tagGroups.map((m, index) => (
+                  <Option key={index} value={m.id} serchValue={m.name}>
+                    {optionRender(m.name, m.id)}
+                  </Option>
+                ))}
+              </Select>
+            </Form.Item>
+          )}
+        </>
+      ),
+    },
+  ];
 
   return (
     <>
-      {route && (
+      {route && setupNewRouteVisible && (
         <Modal
           open={setupNewRouteVisible}
           onCancel={onCancel}
@@ -558,7 +665,7 @@ const RouteAddNew = (selectedPeer: any) => {
                                   marginBottom: "5px",
                                 }}
                               >
-                                Add a unique cryptographic key that is assigned
+                                Add a unique network identifier that is assigned
                                 to each device
                               </Paragraph>
                               <Form.Item
@@ -667,36 +774,15 @@ const RouteAddNew = (selectedPeer: any) => {
 
               {!!!selectedPeer.selectedPeer && (
                 <Col span={24}>
-                  <label
-                    style={{
-                      color: "rgba(0, 0, 0, 0.88)",
-                      fontSize: "14px",
-                      fontWeight: "500",
-                    }}
-                  >
-                    Routing Peer
-                  </label>
-                  <Paragraph
-                    type={"secondary"}
-                    style={{
-                      marginTop: "-2",
-                      fontWeight: "400",
-                      marginBottom: "5px",
-                    }}
-                  >
-                    Assign a peer as a routing peer for the Network CIDR
-                  </Paragraph>
-                  <Form.Item name="peer" rules={[{ validator: peerValidator }]}>
-                    <Select
-                      showSearch
-                      style={{ width: "100%" }}
-                      placeholder="Select Peer"
-                      dropdownRender={peerDropDownRender}
-                      options={options}
-                      allowClear={true}
-                      disabled={!!selectedPeer.selectedPeer}
+                  {activeTab ? (
+                    <Tabs
+                      defaultActiveKey={activeTab}
+                      items={items}
+                      onChange={onTabChange}
                     />
-                  </Form.Item>
+                  ) : (
+                    ""
+                  )}
                 </Col>
               )}
               <Col span={24}>

src/components/RoutePeerUpdate.tsx

@@ -17,10 +17,13 @@ import {
   Switch,
   Card,
   Typography,
+  Tabs,
 } from "antd";
+import type { TabsProps } from "antd";
 import { Route, RouteToSave } from "../store/route/types";
 import { Header } from "antd/es/layout/layout";
 import { RuleObject } from "antd/lib/form";
+import { isEmpty } from "lodash";
 import {
   initPeerMaps,
   peerToPeerIP,
@@ -61,6 +64,16 @@ const RoutePeerUpdate = () => {
   const [form] = Form.useForm();
   const inputDescriptionRef = useRef<any>(null);
   const [peerNameToIP, peerIPToName, peerIPToID] = initPeerMaps(peers);
+  const [activeTab, setActiveTab] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!isEmpty(formRoute))
+      if (formRoute.peer_groups) {
+        setActiveTab("groupOfPeers");
+      } else {
+        setActiveTab("routingPeer");
+      }
+  }, [formRoute]);
 
   useEffect(() => {
     if (editDescription)
@@ -100,7 +113,25 @@ const RoutePeerUpdate = () => {
     }
   });
 
+  const handleSingleChangeTags = (values: any) => {
+    const lastValue = values[values.length - 1];
+    if (values.length > 0) {
+      form.setFieldsValue({
+        peer_groups: [lastValue],
+      });
+    }
+  };
+
   const createRouteToSave = (inputRoute: FormRoute): RouteToSave => {
+    if (inputRoute.peer_groups) {
+      inputRoute = {
+        ...inputRoute,
+        peer_groups: [
+          inputRoute.peer_groups[inputRoute.peer_groups.length - 1],
+        ],
+      };
+    }
+
     let peerIDList = inputRoute.peer.split(routePeerSeparator);
     let peerID: string;
     if (peerIDList.length === 1) {
@@ -116,18 +147,38 @@ const RoutePeerUpdate = () => {
       inputRoute.groups
     );
 
-    return {
+    const payload = {
       id: inputRoute.id,
       network: inputRoute.network,
       network_id: inputRoute.network_id,
       description: inputRoute.description,
-      peer: peerID,
       enabled: inputRoute.enabled,
       masquerade: inputRoute.masquerade,
       metric: inputRoute.metric,
       groups: existingGroups,
       groupsToCreate: groupsToCreate,
     } as RouteToSave;
+
+    if (activeTab === "routingPeer") {
+      let pay = { ...payload, peer: peerID };
+      return pay;
+    }
+
+    if (activeTab === "groupOfPeers") {
+      if (inputRoute.peer_groups) {
+        let [currentPeersGroup, peerGroupsToCreate] =
+          getExistingAndToCreateGroupsLists(inputRoute.peer_groups);
+
+        let pay = {
+          ...payload,
+          peer_groups: currentPeersGroup,
+          peerGroupsToCreate: peerGroupsToCreate,
+        };
+        return pay;
+      }
+    }
+
+    return payload;
   };
 
   const handleFormSubmit = () => {
@@ -165,6 +216,7 @@ const RoutePeerUpdate = () => {
         masquerade: false,
         enabled: true,
         groups: [],
+        peer_groups: [],
       } as Route)
     );
     setVisibleNewRoute(false);
@@ -269,6 +321,95 @@ const RoutePeerUpdate = () => {
     }
   }, [savedRoute]);
 
+  const onTabChange = (key: string) => {
+    console.log(key);
+    // setActiveTab(key);
+  };
+
+  const items: TabsProps["items"] = [
+    {
+      key: "routingPeer",
+      label: "Routing Peer",
+      disabled: true,
+      children: (
+        <>
+          <Paragraph
+            type={"secondary"}
+            style={{
+              marginTop: "-2",
+              fontWeight: "400",
+              marginBottom: "5px",
+            }}
+          >
+            Assign a peer as a routing peer for the Network CIDR
+          </Paragraph>
+          <Form.Item
+            name="peer"
+            rules={[
+              {
+                required: true,
+                message: "Please select routing one peer",
+              },
+            ]}
+            style={{ maxWidth: "400px" }}
+          >
+            <Select
+              showSearch
+              style={{ width: "100%" }}
+              placeholder="Select Peer"
+              dropdownRender={peerDropDownRender}
+              options={options}
+              allowClear={true}
+            />
+          </Form.Item>
+        </>
+      ),
+    },
+    {
+      key: "groupOfPeers",
+      label: "Peer groups",
+      disabled: true,
+      children: (
+        <>
+          <Paragraph
+            type={"secondary"}
+            style={{
+              marginTop: "-2",
+              fontWeight: "400",
+              marginBottom: "5px",
+            }}
+          >
+            Assign peer group with Linux machines to be used as routing peers
+          </Paragraph>
+          <Form.Item
+            name="peer_groups"
+            rules={[
+              {
+                required: true,
+                message: "Please select peer group",
+              },
+            ]}
+          >
+            <Select
+              mode="tags"
+              style={{ maxWidth: "400px" }}
+              tagRender={blueTagRender}
+              onChange={handleSingleChangeTags}
+              dropdownRender={dropDownRender}
+              optionFilterProp="serchValue"
+            >
+              {tagGroups.map((m, index) => (
+                <Option key={index} value={m.id} serchValue={m.name}>
+                  {optionRender(m.name, m.id)}
+                </Option>
+              ))}
+            </Select>
+          </Form.Item>
+        </>
+      ),
+    },
+  ];
+
   return (
     <>
       <Container style={{ paddingTop: "40px", paddingBottom: "50px" }}>
@@ -409,39 +550,13 @@ const RoutePeerUpdate = () => {
                 </Col>
 
                 <Col span={24}>
-                  <label
-                    style={{
-                      color: "rgba(0, 0, 0, 0.88)",
-                      fontSize: "14px",
-                      fontWeight: "500",
-                    }}
-                  >
-                    Routing Peer
-                  </label>
-                  <Paragraph
-                    type={"secondary"}
-                    style={{
-                      marginTop: "-2",
-                      fontWeight: "400",
-                      marginBottom: "5px",
-                    }}
-                  >
-                    Assign a peer as a routing peer for the Network CIDR
-                  </Paragraph>
-                  <Form.Item
-                    name="peer"
-                    rules={[{ validator: peerValidator }]}
-                    style={{ maxWidth: "400px" }}
-                  >
-                    <Select
-                      showSearch
-                      style={{ width: "100%" }}
-                      placeholder="Select Peer"
-                      dropdownRender={peerDropDownRender}
-                      options={options}
-                      allowClear={true}
+                  {activeTab && (
+                    <Tabs
+                      defaultActiveKey={activeTab}
+                      items={items}
+                      onChange={onTabChange}
                     />
-                  </Form.Item>
+                  )}
                 </Col>
                 <Col span={24}>
                   <label

src/components/RouteUpdate.tsx

@@ -110,6 +110,14 @@ const RouteAddNew = () => {
   });
 
   const createRouteToSave = (inputRoute: FormRoute): RouteToSave => {
+    if (inputRoute.peer_groups) {
+      inputRoute = {
+        ...inputRoute,
+        peer_groups: [
+          inputRoute.peer_groups[inputRoute.peer_groups.length - 1],
+        ],
+      };
+    }
     let peerIDList = inputRoute.peer.split(routePeerSeparator);
     let peerID: string;
     if (peerIDList.length === 1) {
@@ -126,18 +134,45 @@ const RouteAddNew = () => {
       inputRoute.groups
     );
 
-    return {
+    const payload = {
       id: inputRoute.id,
       network: inputRoute.network,
       network_id: inputRoute.network_id,
       description: inputRoute.description,
-      peer: peerID,
       enabled: inputRoute.enabled,
       masquerade: inputRoute.masquerade,
       metric: inputRoute.metric,
       groups: existingGroups,
       groupsToCreate: groupsToCreate,
     } as RouteToSave;
+
+    if (inputRoute.peer_groups) {
+      let [currentPeersGroup, peerGroupsToCreate] =
+        getExistingAndToCreateGroupsLists(inputRoute.peer_groups);
+
+      let pay = {
+        ...payload,
+        peer_groups: currentPeersGroup,
+        peerGroupsToCreate: peerGroupsToCreate,
+      };
+      return pay;
+    }
+
+    if (inputRoute.peer) {
+      let pay = { ...payload, peer: peerID };
+      return pay;
+    }
+
+    return payload;
+  };
+
+  const handleSingleChangeTags = (values: any) => {
+    const lastValue = values[values.length - 1];
+    if (values.length > 0) {
+      form.setFieldsValue({
+        peer_groups: [lastValue],
+      });
+    }
   };
 
   const handleFormSubmit = () => {
@@ -146,6 +181,9 @@ const RouteAddNew = () => {
       .then(() => {
         if (!setupNewRouteHA || formRoute.peer != "") {
           const routeToSave = createRouteToSave(formRoute);
+          if (routeToSave.peer && routeToSave.peer_groups?.length === 0) {
+            delete routeToSave.peer_groups;
+          }
           dispatch(
             routeActions.saveRoute.request({
               getAccessTokenSilently: getTokenSilently,
@@ -232,7 +270,7 @@ const RouteAddNew = () => {
   };
 
   const selectPreValidator = (obj: RuleObject, value: string[]) => {
-    if (setupNewRouteHA && formRoute.peer == "") {
+    if (setupNewRouteHA && formRoute.peer == "" && !formRoute.peer_groups) {
       let [, newGroups] = getExistingAndToCreateGroupsLists(value);
       if (newGroups.length > 0) {
         return Promise.reject(
@@ -247,53 +285,6 @@ const RouteAddNew = () => {
     return selectValidator(obj, value);
   };
 
-  const styleNotification = { marginTop: 85 };
-
-  const saveKey = "saving";
-  useEffect(() => {
-    if (savedRoute.loading) {
-      message.loading({
-        content: "Saving...",
-        key: saveKey,
-        duration: 0,
-        style: styleNotification,
-      });
-    } else if (savedRoute.success) {
-      message.success({
-        content: "Route has been successfully added.",
-        key: saveKey,
-        duration: 2,
-        style: styleNotification,
-      });
-      dispatch(routeActions.setSetupNewRouteVisible(false));
-      dispatch(routeActions.setSetupEditRouteVisible(false));
-      dispatch(routeActions.setSetupEditRoutePeerVisible(false));
-      dispatch(routeActions.setSavedRoute({ ...savedRoute, success: false }));
-      dispatch(routeActions.resetSavedRoute(null));
-    } else if (savedRoute.error) {
-      let errorMsg = "Failed to update network route";
-      switch (savedRoute.error.statusCode) {
-        case 403:
-          errorMsg =
-            "Failed to update network route. You might not have enough permissions.";
-          break;
-        default:
-          errorMsg = savedRoute.error.data.message
-            ? savedRoute.error.data.message
-            : errorMsg;
-          break;
-      }
-      message.error({
-        content: errorMsg,
-        key: saveKey,
-        duration: 5,
-        style: styleNotification,
-      });
-      dispatch(routeActions.setSavedRoute({ ...savedRoute, error: null }));
-      dispatch(routeActions.resetSavedRoute(null));
-    }
-  }, [savedRoute]);
-
   return (
     <>
       {route && (
@@ -310,7 +301,7 @@ const RouteAddNew = () => {
                 disabled={savedRoute.loading}
                 onClick={handleFormSubmit}
               >
-                Add route
+                {formRoute.peer_groups ? "Save" : "Add route"}
               </Button>
             </Space>
           }
@@ -337,7 +328,9 @@ const RouteAddNew = () => {
                       fontWeight: 500,
                     }}
                   >
-                    Add new routing peer
+                    {formRoute.peer_groups
+                      ? "Configure peer group"
+                      : "Add new routing peer"}
                   </Paragraph>
                   <Paragraph
                     type={"secondary"}
@@ -350,8 +343,9 @@ const RouteAddNew = () => {
                       marginBottom: "4px",
                     }}
                   >
-                    When you add multiple routing peers, NetBird enables high
-                    availability
+                    {formRoute.peer_groups
+                      ? "Add peer group with multiple peers to enable high availability"
+                      : "When you add multiple routing peers, NetBird enables high availability"}
                   </Paragraph>
 
                   <Row align="top">
@@ -377,7 +371,6 @@ const RouteAddNew = () => {
                           Network name and CIDR that you are adding the route to
                         </Paragraph>
                         <Form.Item
-                          // name="network_id"
                           label=""
                           rules={[
                             {
@@ -411,36 +404,95 @@ const RouteAddNew = () => {
               </Col>
 
               <Col span={24}>
-                <label
-                  style={{
-                    color: "rgba(0, 0, 0, 0.88)",
-                    fontSize: "14px",
-                    fontWeight: "500",
-                  }}
-                >
-                  Routing Peer
-                </label>
-                <Paragraph
-                  type={"secondary"}
-                  style={{
-                    marginTop: "-2",
-                    fontWeight: "400",
-                    marginBottom: "5px",
-                  }}
-                >
-                  Assign a routing peer to the network. This peer has to reside
-                  in the network
-                </Paragraph>
-                <Form.Item name="peer" rules={[{ validator: peerValidator }]}>
-                  <Select
-                    showSearch
-                    style={{ width: "100%" }}
-                    placeholder="Select Peer"
-                    dropdownRender={peerDropDownRender}
-                    options={options}
-                    allowClear={true}
-                  />
-                </Form.Item>
+                {formRoute.peer_groups ? (
+                  <>
+                    <label
+                      style={{
+                        color: "rgba(0, 0, 0, 0.88)",
+                        fontSize: "14px",
+                        fontWeight: "500",
+                      }}
+                    >
+                      Peer groups
+                    </label>
+                    <Paragraph
+                      type={"secondary"}
+                      style={{
+                        marginTop: "-2",
+                        fontWeight: "400",
+                        marginBottom: "5px",
+                      }}
+                    >
+                      Assign peer group with Linux machines to be used as
+                      routing peers
+                    </Paragraph>
+                    <Form.Item
+                      name="peer_groups"
+                      rules={[
+                        {
+                          required: true,
+                          message: "Please select peer group",
+                        },
+                      ]}
+                    >
+                      <Select
+                        mode="tags"
+                        style={{ maxWidth: "100%" }}
+                        tagRender={blueTagRender}
+                        onChange={handleSingleChangeTags}
+                        dropdownRender={dropDownRender}
+                        optionFilterProp="serchValue"
+                      >
+                        {tagGroups.map((m, index) => (
+                          <Option key={index} value={m.id} serchValue={m.name}>
+                            {optionRender(m.name, m.id)}
+                          </Option>
+                        ))}
+                      </Select>
+                    </Form.Item>
+                  </>
+                ) : (
+                  <>
+                    <label
+                      style={{
+                        color: "rgba(0, 0, 0, 0.88)",
+                        fontSize: "14px",
+                        fontWeight: "500",
+                      }}
+                    >
+                      Routing Peer
+                    </label>
+                    <Paragraph
+                      type={"secondary"}
+                      style={{
+                        marginTop: "-2",
+                        fontWeight: "400",
+                        marginBottom: "5px",
+                      }}
+                    >
+                      Assign a routing peer to the network. This peer has to
+                      reside in the network
+                    </Paragraph>
+                    <Form.Item
+                      name="peer"
+                      rules={[
+                        {
+                          required: true,
+                          message: "Please select routing one peer",
+                        },
+                      ]}
+                    >
+                      <Select
+                        showSearch
+                        style={{ width: "100%" }}
+                        placeholder="Select Peer"
+                        dropdownRender={peerDropDownRender}
+                        options={options}
+                        allowClear={true}
+                      />
+                    </Form.Item>
+                  </>
+                )}
               </Col>
               <Col span={24}>
                 <label

src/components/SetupKeyEdit.tsx

@@ -364,7 +364,7 @@ const SetupKeyNew = (props: any) => {
                       <Tooltip title="Peers that are offline for over 10 minutes will be removed automatically">
                         <Tag>
                           <Text type="secondary" style={{ fontSize: 10 }}>
-                            Ephemeral
+                            ephemeral
                           </Text>
                         </Tag>
                       </Tooltip>

src/index.css

@@ -513,13 +513,15 @@ ul.ant-list-items {
   box-shadow: none !important;
 }
 
-.d-none{
-  display: none!important;
+.d-none {
+  display: none !important;
 }
+
 .nohover {
-    background: transparent!important;
-    cursor: text;
+  background: transparent !important;
+  cursor: text;
 }
+
 .emp-wrapper {
   display: flex;
   align-items: center;
@@ -528,4 +530,65 @@ ul.ant-list-items {
 
 .emp-wrapper p {
   margin: 0;
+}
+
+.g-r-wrapper {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.gp-main-wrapper .g-r-wrapper {
+  margin: 0;
+}
+
+.gp-main-wrapper {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+}
+
+.availtooltip a {
+  padding: 5px 0 0;
+  display: inline-block;
+  font-size: 14px;
+}
+
+.availtooltip {
+  padding: 5px;
+}
+
+.availtooltip p {
+  color: #000;
+  font-size: 13.5px;
+  margin: 0;
+}
+
+.avail-inner {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.avail-inner span {
+  color: #1890FF;
+  font-size: 24px;
+}
+
+.avail-icon {
+  font-size: 24px;
+}
+.peer-avail-tooltip .ant-tooltip-inner {
+  color: #000;
+  font-size: 14px;
+  line-height: 24px;
+  padding: 25px;
+}
+
+.peer-avail-tooltip {
+  min-width: 400px;
+}
+.info-icon {
+  font-size: 22px;
+  color: #FD9349;
 }

src/store/route/sagas.ts

@@ -56,12 +56,16 @@ export function* saveRoute(
     );
 
     const routeToSave = action.payload.payload;
-
     let groupsToCreate = routeToSave.groupsToCreate;
     if (!groupsToCreate) {
       groupsToCreate = [];
     }
 
+    let peerGroupsToCreate = routeToSave.peerGroupsToCreate;
+    if (!peerGroupsToCreate) {
+      peerGroupsToCreate = [];
+    }
+
     // first, create groups that were newly added by user
     const responsesGroup = yield all(
       groupsToCreate.map((g) =>
@@ -72,12 +76,28 @@ export function* saveRoute(
       )
     );
 
+    const responsesPeerGroup = yield all(
+      peerGroupsToCreate.map((g) =>
+        call(serviceGroup.createGroup, {
+          getAccessTokenSilently: action.payload.getAccessTokenSilently,
+          payload: { name: g },
+        })
+      )
+    );
+
     const resGroups = (responsesGroup as ApiResponse<Group>[])
       .filter((r) => r.statusCode === 200)
       .map((g) => g.body as Group)
       .map((g) => g.id);
     const newGroups = [...routeToSave.groups, ...resGroups];
 
+
+    const resPeersGroups = (responsesPeerGroup as ApiResponse<Group>[])
+      .filter((r) => r.statusCode === 200)
+      .map((g) => g.body as Group)
+      .map((g) => g.id);
+    const newPeerGroups = [...routeToSave?.peer_groups || [], ...resPeersGroups];
+console.log("newPeerGroups", newPeerGroups);
     const payloadToSave = {
       getAccessTokenSilently: action.payload.getAccessTokenSilently,
       payload: {
@@ -89,6 +109,7 @@ export function* saveRoute(
         network: routeToSave.network,
         network_id: routeToSave.network_id,
         peer: routeToSave.peer,
+        peer_groups: newPeerGroups.length ? newPeerGroups : null,
         groups: newGroups,
       } as Route,
     };

src/store/route/types.ts

@@ -1,18 +1,22 @@
 
 export interface Route {
-    id?: string | null
-    description: string
-    enabled: boolean
-    peer: string
-    network:	string
-    network_id: string
-    network_type?: string
-    metric?: number
-    masquerade:	boolean
-    groups: string[]
+  id?: string | null;
+  description: string;
+  enabled: boolean;
+  peer: string;
+  network: string;
+  network_id: string;
+  network_type?: string;
+  metric?: number;
+  masquerade: boolean;
+  groups: string[];
+  peer_groups?: string[];
+  routesGroups?: string[];
+  groupedRoutes?: Array<any>;
 }
 
 export interface RouteToSave extends Route
 {
     groupsToCreate: string[]
+    peerGroupsToCreate: string[]
 }

src/utils/routes.ts

@@ -1,95 +1,119 @@
-import {Peer, PeerIPToID, PeerIPToName, PeerNameToIP} from "../store/peer/types";
-import {Route} from "../store/route/types";
+import {
+  Peer,
+  PeerIPToID,
+  PeerIPToName,
+  PeerNameToIP,
+} from "../store/peer/types";
+import { Route } from "../store/route/types";
 
-export const routePeerSeparator = " - "
+export const routePeerSeparator = " - ";
 
-export const masqueradeDisabledMSG = "Enabling this option hides other NetBird network IPs behind the routing peer local address when accessing the target Network CIDR. This option allows access to your private networks without configuring routes on your local routers or other devices."
+export const masqueradeDisabledMSG =
+  "Enabling this option hides other NetBird network IPs behind the routing peer local address when accessing the target Network CIDR. This option allows access to your private networks without configuring routes on your local routers or other devices.";
 
-export const masqueradeEnabledMSG = "Disabling this option stops hiding all traffic coming from other NetBird peers behind the routing peer local address when accessing the target Network CIDR. You will need to configure routes for your NetBird network pointing to your routing peer on your local routers or other devices."
+export const masqueradeEnabledMSG =
+  "Disabling this option stops hiding all traffic coming from other NetBird peers behind the routing peer local address when accessing the target Network CIDR. You will need to configure routes for your NetBird network pointing to your routing peer on your local routers or other devices.";
 
 export const peerToPeerIP = (name: string, ip: string): string => {
-    return name + routePeerSeparator + ip
-}
+  return name + routePeerSeparator + ip;
+};
 
-export const initPeerMaps = (peers: Peer[]): [PeerNameToIP, PeerIPToName, PeerIPToID] => {
-    let peerNameToIP = {} as PeerNameToIP
-    let peerIPToName = {} as PeerIPToName
-    let peerIPToID = {} as PeerIPToID
-    peers.forEach((p) => {
-        peerNameToIP[p.name] = p.ip
-        peerIPToName[p.ip] = p.name
-        peerIPToID[p.ip] = p.id ? p.id : ""
-    })
-    return [peerNameToIP, peerIPToName, peerIPToID]
-}
+export const initPeerMaps = (
+  peers: Peer[]
+): [PeerNameToIP, PeerIPToName, PeerIPToID] => {
+  let peerNameToIP = {} as PeerNameToIP;
+  let peerIPToName = {} as PeerIPToName;
+  let peerIPToID = {} as PeerIPToID;
+  peers.forEach((p) => {
+    peerNameToIP[p.name] = p.ip;
+    peerIPToName[p.ip] = p.name;
+    peerIPToID[p.ip] = p.id ? p.id : "";
+  });
+  return [peerNameToIP, peerIPToName, peerIPToID];
+};
 
 export interface RouteDataTable extends Route {
-    key: string;
-    peer_ip: string;
-    peer_name: string;
+  key: string;
+  peer_ip: string;
+  peer_name: string;
+  peer_groups: Array<string>;
 }
 
 export interface GroupedDataTable {
-    key: string
-    network_id: any
-    network: string
-    enabled: boolean
-    masquerade: boolean
-    description: string
-    routesCount: number
-    groupedRoutes: RouteDataTable[]
-    routesGroups: string[]
+  key: string;
+  network_id: any;
+  network: string;
+  enabled: boolean;
+  masquerade: boolean;
+  description: string;
+  routesCount: number;
+  groupedRoutes: RouteDataTable[];
+  routesGroups: string[];
+  peer_groups?: Array<string>;
 }
 
-export const transformDataTable = (routes: Route[], peers: Peer[]): RouteDataTable[] => {
+export const transformDataTable = (
+  routes: Route[],
+  peers: Peer[]
+): RouteDataTable[] => {
+  let peerMap = Object.fromEntries(peers.map((p) => [p.id, p]));
+  return routes.map((route) => {
+    return {
+      key: route.id,
+      ...route,
+      peer: route.peer,
+      peer_ip: peerMap[route.peer] ? peerMap[route.peer].ip : route.peer,
+      peer_name: peerMap[route.peer] ? peerMap[route.peer].name : route.peer,
+    } as RouteDataTable;
+  });
+};
 
-    let peerMap = Object.fromEntries(peers.map(p => [p.id, p]));
-    return routes.map(route => {
-        return {
-            key: route.id,
-            ...route,
-            peer: route.peer,
-            peer_ip: peerMap[route.peer] ? peerMap[route.peer].ip : route.peer,
-            peer_name: peerMap[route.peer] ? peerMap[route.peer].name : route.peer,
-        } as RouteDataTable
+export const transformGroupedDataTable = (
+  routes: Route[],
+  peers: Peer[]
+): GroupedDataTable[] => {
+  let keySet = new Set(
+    routes.map((r) => {
+      return r.network_id + r.network;
     })
-}
+  );
 
-export const transformGroupedDataTable = (routes: Route[], peers: Peer[]): GroupedDataTable[] => {
-    let keySet = new Set(routes.map(r => {
-        return r.network_id + r.network
-    }))
+  let groupedRoutes: GroupedDataTable[] = [];
 
-    let groupedRoutes: GroupedDataTable[] = []
-
-    keySet.forEach((p) => {
-        let hasEnabled = false
-        let lastRoute: Route
-        let listedRoutes: Route[] = []
-        let groupList: string[] = []
-        routes.forEach((r) => {
-            if (p === r.network_id + r.network) {
-                lastRoute = r
-                if (r.enabled) {
-                    hasEnabled = true
-                }
-                listedRoutes.push(r)
-                groupList = groupList.concat(r.groups)
-            }
-        })
-        groupList = groupList.filter((value, index, arrary) => arrary.indexOf(value) === index)
-        let groupDataTableRoutes = transformDataTable(listedRoutes, peers)
-        groupedRoutes.push({
-            key: p.toString(),
-            network_id: lastRoute!.network_id,
-            network: lastRoute!.network,
-            masquerade: lastRoute!.masquerade,
-            description: lastRoute!.description,
-            enabled: hasEnabled,
-            routesCount: groupDataTableRoutes.length,
-            groupedRoutes: groupDataTableRoutes,
-            routesGroups: groupList,
-        })
-    })
-    return groupedRoutes
-}
+  keySet.forEach((p) => {
+    let hasEnabled = false;
+    let lastRoute: Route;
+    let listedRoutes: Route[] = [];
+    let groupList: string[] = [];
+    routes.forEach((r) => {
+      if (p === r.network_id + r.network) {
+        lastRoute = r;
+        if (r.enabled) {
+          hasEnabled = true;
+        }
+        listedRoutes.push(r);
+        groupList = groupList.concat(r.groups);
+      }
+    });
+    groupList = groupList.filter(
+      (value, index, arrary) => arrary.indexOf(value) === index
+    );
+    let groupDataTableRoutes = transformDataTable(listedRoutes, peers);
+    const filterEnabledRoutes = groupDataTableRoutes.filter(
+      (route) => route.enabled
+    );
+    groupedRoutes.push({
+      key: p.toString(),
+      network_id: lastRoute!.network_id,
+      network: lastRoute!.network,
+      masquerade: lastRoute!.masquerade,
+      description: lastRoute!.description,
+      enabled: hasEnabled,
+      routesCount: filterEnabledRoutes.length,
+      groupedRoutes: groupDataTableRoutes,
+      routesGroups: groupList,
+      peer_groups: lastRoute!.peer_groups,
+    });
+  });
+  return groupedRoutes;
+};

src/views/Peers.tsx

@@ -248,7 +248,7 @@ export const Peers = () => {
     const t = searchText
       ? searchText.toLowerCase().trim()
       : textToSearch.toLowerCase().trim();
-    
+
     let f: Peer[] = filter(peers, (f: Peer) => {
       let userEmail: string | null;
       const u = users?.find((u) => u.id === f.user_id)?.email;
@@ -399,11 +399,7 @@ export const Peers = () => {
   };
 
   function handleSwitchSSH(record: PeerDataTable, checked: boolean) {
-    const peer = {
-      id: record.id,
-      ssh_enabled: checked,
-      name: record.name,
-    } as Peer;
+    const peer = { ...record, ssh_enabled: checked };
     dispatch(
       peerActions.updatePeer.request({
         getAccessTokenSilently: getTokenSilently,
@@ -635,16 +631,20 @@ export const Peers = () => {
           <Container style={{ paddingTop: "40px" }}>
             <Row>
               <Col span={24}>
-                <Title className="page-heading">{isAdmin ? "Peers" : "My peers"}</Title>
+                <Title className="page-heading">
+                  {isAdmin ? "Peers" : "My peers"}
+                </Title>
                 {peers.length ? (
                   <Paragraph style={{ marginTop: "5px" }}>
-                    {isAdmin ? "A list of all machines and devices connected to your private network. Use this view to manage peers" :
-                        "A list of all your machines and devices that you connected to NetBird."}
+                    {isAdmin
+                      ? "A list of all machines and devices connected to your private network. Use this view to manage peers"
+                      : "A list of all your machines and devices that you connected to NetBird."}
                   </Paragraph>
                 ) : (
                   <Paragraph style={{ marginTop: "5px" }} type={"secondary"}>
-                    {isAdmin ? "A list of all machines and devices connected to your private network. Use this view to manage peers" :
-                        "A list of all your machines and devices that you connected to NetBird."}
+                    {isAdmin
+                      ? "A list of all machines and devices connected to your private network. Use this view to manage peers"
+                      : "A list of all your machines and devices that you connected to NetBird."}
                   </Paragraph>
                 )}
 

src/views/SetupKeys.tsx

@@ -623,7 +623,7 @@ export const SetupKeys = () => {
                             <Tooltip title="Peers that are offline for over 10 minutes will be removed automatically">
                               <Tag>
                                 <Text type="secondary" style={{ fontSize: 10 }}>
-                                  Ephemeral
+                                  ephemeral
                                 </Text>
                               </Tag>
                             </Tooltip>