gravitl · Aceix · Oct 18, 2024 · Sep 12, 2024 · Sep 16, 2024 · Sep 16, 2024
diff --git a/Dockerfile.saas b/Dockerfile.saas
@@ -31,7 +31,7 @@ ENV [email protected]
 # Other vars
 
 ENV VITE_NETCLIENT_BIN_URL_TEMPLATE=https://fileserver.netmaker.io/releases/download/:version/:fileName
-ENV VITE_NETMAKER_TRIAL_PERIOD_DOCS_URL=https://docs.netmaker.io/install.html#after-trial-period-ends
+ENV VITE_NETMAKER_TRIAL_PERIOD_DOCS_URL=https://docs.netmaker.io/docs/server-installation/quick-install#after-trial-period-ends
 
 RUN npm ci
 RUN npm audit fix || echo "ATTENTION!!! Failed to automatically patch vulnerabilities" >&2

diff --git a/Dockerfile.standalone b/Dockerfile.standalone
@@ -46,7 +46,7 @@ ENV VITE_TENANT_PRIMARY_COLOR=
 # Other vars
 
 ENV VITE_NETCLIENT_BIN_URL_TEMPLATE=https://fileserver.netmaker.io/releases/download/:version/:fileName
-ENV VITE_NETMAKER_TRIAL_PERIOD_DOCS_URL=https://docs.netmaker.io/install.html#after-trial-period-ends
+ENV VITE_NETMAKER_TRIAL_PERIOD_DOCS_URL=https://docs.netmaker.io/docs/server-installation/quick-install#after-trial-period-ends
 
 RUN npm ci
 RUN npm audit fix || echo "ATTENTION!!! Failed to automatically patch vulnerabilities" >&2

diff --git a/src/App.scss b/src/App.scss
@@ -186,4 +186,17 @@
   td.ant-table-column-sort {
     background-color: transparent;
   }
+}
+
+.bottom-sidebar-menu-open {
+  border-right: none;
+  position: absolute;
+  bottom: 0;
+}
+
+.bottom-sidebar-menu-close {
+  border-right: none;
+  position: absolute;
+  bottom: 0;
+  width: 80px !important;
 }
diff --git a/src/components/RacDownloadBanner.tsx b/src/components/RacDownloadBanner.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { ExternalLinks } from '@/constants/LinkAndImageConstants';
 import { CloseCircleFilled, DownloadOutlined } from '@ant-design/icons';
 import { Button } from 'antd';

diff --git a/src/components/modals/add-user-modal/AddUserModal.tsx b/src/components/modals/add-user-modal/AddUserModal.tsx
@@ -76,7 +76,7 @@ export default function AddUserModal({
   const [activeTab, setActiveTab] = useState(defaultTabKey);
   const [isLoadingPlatformRoles, setIsLoadingPlatformRoles] = useState(true);
 
-  const palVal = Form.useWatch('platform_role_id', form);
+  const palVal: UserRoleId = Form.useWatch('platform_role_id', form);
 
   const networkRolesTableData = useMemo<NetworkRolesTableData[]>(() => {
     const roles = networkRoles
@@ -287,6 +287,31 @@ export default function AddUserModal({
     [getGroupsContent, getCustomRolesContent],
   );
 
+  const getPalDesc = useCallback((pal: UserRoleId) => {
+    switch (pal) {
+      case 'admin':
+        return <Typography.Text type="secondary">Admins can access all features and manage all users.</Typography.Text>;
+      case 'platform-user':
+        return (
+          <Typography.Text type="secondary">
+            Platform users can log into the dashboard and access the networks they are assigned to.
+          </Typography.Text>
+        );
+      case 'service-user':
+        return (
+          <Typography.Text type="secondary">
+            Service users cannot log into the dashboard; they use{' '}
+            <Typography.Link href={ExternalLinks.RAC_DOWNLOAD_DOCS_LINK} target="_blank">
+              RAC
+            </Typography.Link>{' '}
+            to access their assigned networks.
+          </Typography.Text>
+        );
+      default:
+        return '';
+    }
+  }, []);
+
   return (
     <Modal
       title={<span style={{ fontSize: '1.25rem', fontWeight: 'bold', minWidth: '60vw' }}>Create a User</span>}
@@ -352,17 +377,7 @@ export default function AddUserModal({
                       tooltip="This specifies the server-wide permissions this user will have"
                       rules={[{ required: true }]}
                       initialValue={isServerEE ? undefined : 'admin'}
-                      extra={
-                        <Typography.Text type="secondary">
-                          Admins can access all features and manage all users. Platform users can log into the dashboard
-                          and access the networks they are assigned to. Service users cannot log into the dashboard;
-                          they use{' '}
-                          <Typography.Link href={ExternalLinks.RAC_DOWNLOAD_DOCS_LINK} target="_blank">
-                            RAC
-                          </Typography.Link>{' '}
-                          to access their assigned networks.
-                        </Typography.Text>
-                      }
+                      extra={getPalDesc(palVal)}
                     >
                       <Radio.Group>
                         {platformRoles.map((role) => (

diff --git a/src/components/modals/invite-user-modal/InviteUserModal.tsx b/src/components/modals/invite-user-modal/InviteUserModal.tsx
@@ -355,6 +355,31 @@ export default function InviteUserModal({
     [getGroupsContent, getCustomRolesContent],
   );
 
+  const getPalDesc = useCallback((pal: UserRoleId) => {
+    switch (pal) {
+      case 'admin':
+        return <Typography.Text type="secondary">Admins can access all features and manage all users.</Typography.Text>;
+      case 'platform-user':
+        return (
+          <Typography.Text type="secondary">
+            Platform users can log into the dashboard and access the networks they are assigned to.
+          </Typography.Text>
+        );
+      case 'service-user':
+        return (
+          <Typography.Text type="secondary">
+            Service users cannot log into the dashboard; they use{' '}
+            <Typography.Link href={ExternalLinks.RAC_DOWNLOAD_DOCS_LINK} target="_blank">
+              RAC
+            </Typography.Link>{' '}
+            to access their assigned networks.
+          </Typography.Text>
+        );
+      default:
+        return '';
+    }
+  }, []);
+
   return (
     <Modal
       title={<span style={{ fontSize: '1.25rem', fontWeight: 'bold', minWidth: '60vw' }}>Invite users</span>}
@@ -405,17 +430,7 @@ export default function InviteUserModal({
                           tooltip="This specifies the server-wide permissions this user will have"
                           rules={[{ required: true }]}
                           initialValue={isServerEE ? undefined : 'admin'}
-                          extra={
-                            <Typography.Text type="secondary">
-                              Admins can access all features and manage all users. Platform users can log into the
-                              dashboard and access the networks they are assigned to. Service users cannot log into the
-                              dashboard; they use{' '}
-                              <Typography.Link href={ExternalLinks.RAC_DOWNLOAD_DOCS_LINK} target="_blank">
-                                RAC
-                              </Typography.Link>{' '}
-                              to access their assigned networks.
-                            </Typography.Text>
-                          }
+                          extra={getPalDesc(palVal)}
                         >
                           <Radio.Group>
                             {platformRoles.map((role) => (

diff --git a/src/components/modals/new-host-modal/NewHostModal.tsx b/src/components/modals/new-host-modal/NewHostModal.tsx
@@ -444,7 +444,11 @@ export default function NewHostModal({
                             <>
                               We recommend using the remote access client for Windows. Go to remote access tab and you
                               can follow the instructions for setup
-                              <a href="https://docs.netmaker.io/pro/rac.html" target="_blank" rel="noreferrer">
+                              <a
+                                href="https://docs.netmaker.io/docs/remote-access-client-rac"
+                                target="_blank"
+                                rel="noreferrer"
+                              >
                                 {' '}
                                 here.
                               </a>
@@ -482,7 +486,11 @@ export default function NewHostModal({
                             <>
                               We recommend using the remote access client for Mac. Go to remote access tab and you can
                               follow the instructions for setup
-                              <a href="https://docs.netmaker.io/pro/rac.html" target="_blank" rel="noreferrer">
+                              <a
+                                href="https://docs.netmaker.io/docs/remote-access-client-rac"
+                                target="_blank"
+                                rel="noreferrer"
+                              >
                                 {' '}
                                 here.
                               </a>
@@ -552,7 +560,7 @@ export default function NewHostModal({
                         <div className="" style={{ marginTop: '1rem', textAlign: 'center' }}>
                           <Button
                             type="link"
-                            href="https://docs.netmaker.io/netclient.html#linux"
+                            href="https://docs.netmaker.io/docs/netclient#linux"
                             target="_blank"
                             rel="noreferrer"
                           >
@@ -666,7 +674,7 @@ export default function NewHostModal({
                     <ul>
                       <li>
                         <a
-                          href="https://docs.netmaker.io/external-clients.html#remote-access"
+                          href="https://docs.netmaker.io/docs/remote-access-client-rac#remote-access"
                           target="_blank"
                           rel="noreferrer"
                         >
@@ -675,7 +683,7 @@ export default function NewHostModal({
                       </li>
                       <li>
                         <a
-                          href="https://docs.netmaker.io/integrating-non-native-devices.html"
+                          href="https://docs.netmaker.io/docs/how-to-guides/integrating-non-native-devices"
                           target="_blank"
                           rel="noreferrer"
                         >
@@ -701,14 +709,14 @@ export default function NewHostModal({
                     <Typography.Text>
                       Visit the docs on how to{' '}
                       <a
-                        href="https://docs.netmaker.io/pro/pro-users.html#attaching-or-removing-user-from-a-remote-access-gateway"
+                        href="https://docs.netmaker.io/docs/features/users-management-pro#attaching-or-removing-user-from-a-remote-access-gateway"
                         target="_blank"
                         rel="noreferrer"
                       >
                         attach a user to a remote access gateway
                       </a>{' '}
                       or how to connect your mobile device to the network with the{' '}
-                      <a href="https://docs.netmaker.io/pro/rac.html" target="_blank" rel="noreferrer">
+                      <a href="https://docs.netmaker.io/docs/remote-access-client-rac" target="_blank" rel="noreferrer">
                         Remote Access Client (RAC)
                       </a>
                       .

diff --git a/src/components/modals/remote-access-client-modal/DownloadRemoteAccessClientModal.tsx b/src/components/modals/remote-access-client-modal/DownloadRemoteAccessClientModal.tsx
@@ -20,7 +20,7 @@ interface DownloadRemoteAccessClientModalProps {
   page?: PageType;
 }
 
-const RAC_DOCS_URL = 'https://docs.netmaker.io/pro/rac.html';
+const RAC_DOCS_URL = 'https://docs.netmaker.io/docs/remote-access-client-rac';
 
 export default function DownloadRemotesAccessClientModal({ isOpen, onCancel }: DownloadRemoteAccessClientModalProps) {
   const store = useStore();

diff --git a/src/components/modals/user-details-modal/UserDetailsModal.tsx b/src/components/modals/user-details-modal/UserDetailsModal.tsx
@@ -306,6 +306,31 @@ export default function UserDetailsModal({
     [getGroupsContent, getCustomRolesContent],
   );
 
+  const getPalDesc = useCallback((pal: UserRoleId) => {
+    switch (pal) {
+      case 'admin':
+        return <Typography.Text type="secondary">Admins can access all features and manage all users.</Typography.Text>;
+      case 'platform-user':
+        return (
+          <Typography.Text type="secondary">
+            Platform users can log into the dashboard and access the networks they are assigned to.
+          </Typography.Text>
+        );
+      case 'service-user':
+        return (
+          <Typography.Text type="secondary">
+            Service users cannot log into the dashboard; they use{' '}
+            <Typography.Link href={ExternalLinks.RAC_DOWNLOAD_DOCS_LINK} target="_blank">
+              RAC
+            </Typography.Link>{' '}
+            to access their assigned networks.
+          </Typography.Text>
+        );
+      default:
+        return '';
+    }
+  }, []);
+
   useEffect(() => {
     if (isServerEE && isOpen) {
       loadGroups();
@@ -398,17 +423,7 @@ export default function UserDetailsModal({
                     tooltip="This specifies the server-wide permissions this user will have"
                     initialValue={user.platform_role_id}
                     required
-                    extra={
-                      <Typography.Text type="secondary">
-                        Admins can access all features and manage all users. Platform users can log into the dashboard
-                        and access the networks they are assigned to. Service users cannot log into the dashboard; they
-                        use{' '}
-                        <Typography.Link href={ExternalLinks.RAC_DOWNLOAD_DOCS_LINK} target="_blank">
-                          RAC
-                        </Typography.Link>{' '}
-                        to access their assigned networks.
-                      </Typography.Text>
-                    }
+                    extra={getPalDesc(palVal)}
                   >
                     <Select
                       placeholder="Select a platform access level for the user"

diff --git a/src/components/modals/version-upgrade-modal/VersionUpgradeModal.tsx b/src/components/modals/version-upgrade-modal/VersionUpgradeModal.tsx
@@ -6,7 +6,7 @@ import { CloudSyncOutlined } from '@ant-design/icons';
 import { useStore } from '@/store/store';
 import { isSaasBuild } from '@/services/BaseService';
 
-const UPGRADE_DOCS_LINK = 'https://docs.netmaker.io/upgrades.html';
+const UPGRADE_DOCS_LINK = 'https://docs.netmaker.io/docs/upgrades';
 
 interface VersionUpgradeModalProps {
   isOpen: boolean;

diff --git a/src/constants/LinkAndImageConstants.ts b/src/constants/LinkAndImageConstants.ts
@@ -1,22 +1,20 @@
-const RAC_LINK = 'https://docs.netmaker.io/pro/rac.html';
-const WIREGUARD_LINK = 'https://docs.netmaker.io/integrating-non-native-devices.html';
-const PRO_UPGRADE_DOCS_LINK = 'https://docs.netmaker.io/pro/pro-setup.html';
-const RAC_DOWNLOAD_DOCS_LINK = 'https://docs.netmaker.io/pro/rac.html#download-installation';
-const CORE_DNS_SETUP_LINK = 'https://docs.netmaker.io/architecture.html#components__coredns';
+const RAC_LINK = 'https://docs.netmaker.io/docs/remote-access-client-rac';
+const WIREGUARD_LINK = 'https://docs.netmaker.io/docs/how-to-guides/integrating-non-native-devices';
+const PRO_UPGRADE_DOCS_LINK = 'https://docs.netmaker.io/docs/server-installation/netmaker-professional-setup';
+const RAC_DOWNLOAD_DOCS_LINK = 'https://docs.netmaker.io/docs/remote-access-client-rac#download-installation';
+const CORE_DNS_SETUP_LINK = 'https://docs.netmaker.io/docs/about/architecture#components__coredns';
 const NFTABLES_DOCS_LINK = 'https://www.linode.com/docs/guides/how-to-use-nftables/';
 const IPTABLES_DOCS_LINK = 'https://ioflood.com/blog/install-iptables-command-linux/';
 const INTEGRATING_NON_NATIVE_DEVICES_LINK =
-  'https://docs.netmaker.io/integrating-non-native-devices.html#integrating-non-native-devices--page-root';
+  'https://docs.netmaker.io/docs/how-to-guides/integrating-non-native-devices#integrating-non-native-devices--page-root';
 const ROUTE_LOCAL_NETWORK_TRAFFIC_LINK = 'https://docs.netmaker.io/'; /// NEED TO ADD LINK
 const HOW_TO_ADD_USERS_TO_NETWORK = 'https://www.netmaker.io/resources/how-to-add-users-to-netmaker-saas';
 const USER_MGMT_DOCS_URL = 'https://docs.netmaker.io/#';
-const UI_DOCS_URL = 'https://docs.v2.netmaker.io/guide/references/user-interface';
-const USER_MGMT_DOCS_NETWORK_ROLES_URL =
-  'https://docs.v2.netmaker.io/guide/netmaker-professional/users-in-netmaker-professional#network-roles';
-const USER_MGMT_DOCS_USER_GROUPS_URL =
-  'https://docs.v2.netmaker.io/guide/netmaker-professional/users-in-netmaker-professional#user-groups';
+const UI_DOCS_URL = 'https://docs.netmaker.io/docs/references/user-interface';
+const USER_MGMT_DOCS_NETWORK_ROLES_URL = 'https://docs.netmaker.io/docs/features/users-management-pro#network-roles';
+const USER_MGMT_DOCS_USER_GROUPS_URL = 'https://docs.netmaker.io/docs/features/users-management-pro#user-groups';
 const USER_MGMT_DOCS_INVITES_URL =
-  'https://docs.v2.netmaker.io/guide/netmaker-professional/users-in-netmaker-professional#adding-users__user-invite';
+  'https://docs.netmaker.io/docs/features/users-management-pro#user-groups#adding-users__user-invite';
 
 const EGRESS_IMG = '/egress.webp';
 const RAG_IMG = '/rag.webp';

diff --git a/src/layouts/MainLayout.tsx b/src/layouts/MainLayout.tsx
@@ -12,7 +12,7 @@ import {
   BookOutlined,
   DownloadOutlined,
 } from '@ant-design/icons';
-import { Alert, Button, Col, Divider, MenuProps, Row, Select, Switch, Typography } from 'antd';
+import { Alert, Col, Divider, MenuProps, Row, Select, Switch, Typography } from 'antd';
 import { Layout, Menu, theme } from 'antd';
 import { Link, Outlet, useLocation, useNavigate } from 'react-router-dom';
 import {
@@ -34,8 +34,6 @@ import VersionUpgradeModal from '@/components/modals/version-upgrade-modal/Versi
 import { lt } from 'semver';
 import { isAdminUserOrRole } from '@/utils/UserMgmtUtils';
 import { ExternalLinks } from '@/constants/LinkAndImageConstants';
-import WelcomeModal from '@/components/modals/welcome-modal/WelcomeModal';
-import { Divide } from 'lucide-react';
 
 const { Content, Sider } = Layout;
 

diff --git a/src/pages/auth/ContinueInvitePage.tsx b/src/pages/auth/ContinueInvitePage.tsx
@@ -77,6 +77,7 @@ export default function ContinueInvitePage(props: ContinueInvitePageProps) {
       const payload: any = { ...formData };
       delete payload['login-method'];
       delete payload['confirm-password'];
+      payload.username = encodeURIComponent(payload.username || '');
       await UsersService.userInviteSignup(inviteCode, payload);
       login(formData);
     } catch (err) {

diff --git a/src/pages/auth/LoginPage.tsx b/src/pages/auth/LoginPage.tsx
@@ -167,7 +167,11 @@ export default function LoginPage(props: LoginPageProps) {
                   <>
                     User not authorized for dashboard access. Only admins can access the dashboard. Users should use the
                     remote access client.{' '}
-                    <a href="https://docs.netmaker.io/pro/rac.html" target="_blank" rel="noopener noreferrer">
+                    <a
+                      href="https://docs.netmaker.io/docs/remote-access-client-rac"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
                       Click here for more details.
                     </a>
                   </>

diff --git a/src/pages/hosts/HostsPage.tsx b/src/pages/hosts/HostsPage.tsx
@@ -48,7 +48,7 @@ import { lt } from 'semver';
 import { ExtendedNode } from '@/models/Node';
 import { HOST_HEALTH_STATUS } from '@/models/NodeConnectivityStatus';
 
-const HOST_DOCS_URL = 'https://docs.netmaker.io/ui-reference.html#hosts';
+const HOST_DOCS_URL = 'https://docs.netmaker.io/docs/references/user-interface#hosts';
 
 export default function HostsPage(props: PageProps) {
   const [notify, notifyCtx] = notification.useNotification();

diff --git a/src/pages/hosts/NewHostPage.tsx b/src/pages/hosts/NewHostPage.tsx
@@ -258,7 +258,7 @@ export default function NewHostPage(props: PageProps) {
                       <Button
                         style={{ width: '100%' }}
                         type="primary"
-                        href="https://docs.netmaker.io/netclient.html#docker"
+                        href="https://docs.netmaker.io/docs/netclient#docker"
                         target="_blank"
                       >
                         Go to Docs
@@ -276,7 +276,7 @@ export default function NewHostPage(props: PageProps) {
                       <Button
                         style={{ width: '100%' }}
                         type="primary"
-                        href="https://docs.netmaker.io/netclient.html#linux"
+                        href="https://docs.netmaker.io/docs/netclient#linux"
                         target="_blank"
                       >
                         Go to Docs