From d005aeaba465b6985597858f53fa776b7de8aeda Mon Sep 17 00:00:00 2001
From: the_aceix <aceixsmartx@gmail.com>
Date: Wed, 11 Sep 2024 12:54:37 +0000
Subject: [PATCH] fix(NET-1600): add description of platform access level, fix
 "tenant" typo to "tenant"

---
 .../modals/add-user-modal/AddUserModal.tsx    | 33 +++++++++++++-----
 .../invite-user-modal/InviteUserModal.tsx     | 34 ++++++++++++++-----
 2 files changed, 51 insertions(+), 16 deletions(-)

diff --git a/src/components/modals/add-user-modal/AddUserModal.tsx b/src/components/modals/add-user-modal/AddUserModal.tsx
index 37c846a8..855dd693 100644
--- a/src/components/modals/add-user-modal/AddUserModal.tsx
+++ b/src/components/modals/add-user-modal/AddUserModal.tsx
@@ -9,6 +9,7 @@ import {
   Radio,
   Row,
   Select,
+  Skeleton,
   Table,
   TableColumnProps,
   Tabs,
@@ -23,6 +24,7 @@ import { User, UserGroup, UserRole, UserRoleId } from '@/models/User';
 import { UsersService } from '@/services/UsersService';
 import { kebabCaseToTitleCase, useServerLicense } from '@/utils/Utils';
 import { isAdminUserOrRole } from '@/utils/UserMgmtUtils';
+import { ExternalLinks } from '@/constants/LinkAndImageConstants';
 
 interface AddUserModalProps {
   isOpen: boolean;
@@ -71,6 +73,7 @@ export default function AddUserModal({
   const [groups, setGroups] = useState<UserGroup[]>([]);
   const [selectedNetworkRoles, setSelectedNetworkRoles] = useState<NetworkRolePair[]>([]);
   const [activeTab, setActiveTab] = useState(defaultTabKey);
+  const [isLoadingPlatformRoles, setIsLoadingPlatformRoles] = useState(true);
 
   const palVal = Form.useWatch('platform_role_id', form);
 
@@ -176,6 +179,8 @@ export default function AddUserModal({
         message: 'Failed to load roles',
         description: extractErrorMsg(err as any),
       });
+    } finally {
+      setIsLoadingPlatformRoles(false);
     }
   }, [notify]);
 
@@ -342,17 +347,29 @@ export default function AddUserModal({
                   <Form.Item
                     name="platform_role_id"
                     label="Platform Access Level"
-                    tooltip="This specifies the tenant-wide permissions this user will have"
+                    tooltip="This specifies the server-wide permissions this user will have"
                     rules={[{ required: true }]}
                     initialValue={isServerEE ? undefined : 'admin'}
                   >
-                    <Radio.Group>
-                      {platformRoles.map((role) => (
-                        <Radio key={role.id} value={role.id} disabled={!isServerEE && !isAdminUserOrRole(role)}>
-                          {kebabCaseToTitleCase(role.id)}
-                        </Radio>
-                      ))}
-                    </Radio.Group>
+                    <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>
+                    <br />
+                    <br />
+                    <Skeleton active loading={isLoadingPlatformRoles} paragraph={false}>
+                      <Radio.Group>
+                        {platformRoles.map((role) => (
+                          <Radio key={role.id} value={role.id} disabled={!isServerEE && !isAdminUserOrRole(role)}>
+                            {kebabCaseToTitleCase(role.id)}
+                          </Radio>
+                        ))}
+                      </Radio.Group>
+                    </Skeleton>
                   </Form.Item>
                 </Col>
               </Row>
diff --git a/src/components/modals/invite-user-modal/InviteUserModal.tsx b/src/components/modals/invite-user-modal/InviteUserModal.tsx
index a3e591b3..068eaff8 100644
--- a/src/components/modals/invite-user-modal/InviteUserModal.tsx
+++ b/src/components/modals/invite-user-modal/InviteUserModal.tsx
@@ -10,6 +10,7 @@ import {
   Radio,
   Row,
   Select,
+  Skeleton,
   Steps,
   Table,
   TableColumnProps,
@@ -28,6 +29,7 @@ import { copyTextToClipboard, kebabCaseToTitleCase, useServerLicense } from '@/u
 import { getInviteMagicLink } from '@/utils/RouteUtils';
 import CreateUserGroupModal from '@/pages/users/CreateUserGroupModal';
 import { isAdminUserOrRole } from '@/utils/UserMgmtUtils';
+import { ExternalLinks } from '@/constants/LinkAndImageConstants';
 
 interface InviteUserModalProps {
   isOpen: boolean;
@@ -85,6 +87,7 @@ export default function InviteUserModal({ isOpen, onInviteFinish, onClose, onCan
   const [isCreateGroupModalOpen, setIsCreateGroupModalOpen] = useState(false);
   const [activeTab, setActiveTab] = useState(defaultTabKey);
   const [isCreating, setIsCreating] = useState(false);
+  const [isLoadingPlatformRoles, setIsLoadingPlatformRoles] = useState(true);
 
   const userGroupsVal = Form.useWatch('user-groups', form);
   const palVal = Form.useWatch('platform_role_id', form);
@@ -228,6 +231,8 @@ export default function InviteUserModal({ isOpen, onInviteFinish, onClose, onCan
         message: 'Failed to load roles',
         description: extractErrorMsg(err as any),
       });
+    } finally {
+      setIsLoadingPlatformRoles(false);
     }
   }, [notify]);
 
@@ -388,17 +393,30 @@ export default function InviteUserModal({ isOpen, onInviteFinish, onClose, onCan
                       <Form.Item
                         name="platform_role_id"
                         label="Platform Access Level"
-                        tooltip="This specifies the tenant-wide permissions this user will have"
+                        tooltip="This specifies the server-wide permissions this user will have"
                         rules={[{ required: true }]}
                         initialValue={isServerEE ? undefined : 'admin'}
                       >
-                        <Radio.Group>
-                          {platformRoles.map((role) => (
-                            <Radio key={role.id} value={role.id} disabled={!isServerEE && !isAdminUserOrRole(role)}>
-                              {kebabCaseToTitleCase(role.id)}
-                            </Radio>
-                          ))}
-                        </Radio.Group>
+                        <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>
+                        <br />
+                        <br />
+                        <Skeleton active loading={isLoadingPlatformRoles} paragraph={false}>
+                          <Radio.Group>
+                            {platformRoles.map((role) => (
+                              <Radio key={role.id} value={role.id} disabled={!isServerEE && !isAdminUserOrRole(role)}>
+                                {kebabCaseToTitleCase(role.id)}
+                              </Radio>
+                            ))}
+                          </Radio.Group>
+                        </Skeleton>
                       </Form.Item>
                     </Col>
                   </Row>