feat(NET-1545): add tour to user management page

src/components/modals/add-user-modal/AddUserModal.tsx

@@ -33,7 +33,7 @@ interface AddUserModalProps {
   addUserButtonRef?: Ref<HTMLDivElement>;
   addUserNameInputRef?: Ref<HTMLDivElement>;
   addUserPasswordInputRef?: Ref<HTMLDivElement>;
-  addUserSetAsAdminCheckboxRef?: Ref<HTMLDivElement>;
+  createUserModalPlatformAccessLevelRef?: Ref<HTMLDivElement>;
 }
 
 type CreateUserForm = User & {
@@ -62,6 +62,7 @@ export default function AddUserModal({
   onCancel,
   addUserNameInputRef,
   addUserPasswordInputRef,
+  createUserModalPlatformAccessLevelRef,
 }: AddUserModalProps) {
   const [form] = Form.useForm<CreateUserForm>();
   const [notify, notifyCtx] = notification.useNotification();
@@ -343,7 +344,7 @@ export default function AddUserModal({
               <Divider />
 
               <Row>
-                <Col xs={24}>
+                <Col xs={24} ref={createUserModalPlatformAccessLevelRef}>
                   <Skeleton active loading={isLoadingPlatformRoles} paragraph={false}>
                     <Form.Item
                       name="platform_role_id"

src/components/modals/invite-user-modal/InviteUserModal.tsx

@@ -19,7 +19,7 @@ import {
   Tooltip,
   Typography,
 } from 'antd';
-import { MouseEvent, useCallback, useEffect, useMemo, useState } from 'react';
+import { MouseEvent, Ref, useCallback, useEffect, useMemo, useState } from 'react';
 import '../CustomModal.scss';
 import { extractErrorMsg } from '@/utils/ServiceUtils';
 import { User, UserGroup, UserInvite, UserRole, UserRoleId } from '@/models/User';
@@ -35,6 +35,8 @@ interface InviteUserModalProps {
   onInviteFinish: () => any;
   onCancel?: (e: MouseEvent<HTMLButtonElement>) => void;
   onClose?: () => void;
+  inviteUserModalPlatformAccessLevelRef: Ref<HTMLDivElement>;
+  inviteUserModalEmailAddressesInputRef: Ref<HTMLDivElement>;
 }
 
 interface UserInviteForm {
@@ -70,7 +72,14 @@ const groupsTabKey = 'groups';
 const customRolesTabKey = 'custom-roles';
 const defaultTabKey = groupsTabKey;
 
-export default function InviteUserModal({ isOpen, onInviteFinish, onClose, onCancel }: InviteUserModalProps) {
+export default function InviteUserModal({
+  isOpen,
+  onInviteFinish,
+  onClose,
+  onCancel,
+  inviteUserModalPlatformAccessLevelRef,
+  inviteUserModalEmailAddressesInputRef,
+}: InviteUserModalProps) {
   const [form] = Form.useForm<UserInviteForm>();
   const [notify, notifyCtx] = notification.useNotification();
   const { isServerEE } = useServerLicense();
@@ -372,7 +381,7 @@ export default function InviteUserModal({ isOpen, onInviteFinish, onClose, onCan
           <>
             <Form name="invite-user-form" form={form} layout="vertical">
               <Row>
-                <Col xs={24}>
+                <Col xs={24} ref={inviteUserModalEmailAddressesInputRef}>
                   <Form.Item
                     label="Email address(es)"
                     name="user_emails"
@@ -388,7 +397,7 @@ export default function InviteUserModal({ isOpen, onInviteFinish, onClose, onCan
                   <Divider />
 
                   <Row>
-                    <Col xs={24}>
+                    <Col xs={24} ref={inviteUserModalPlatformAccessLevelRef}>
                       <Skeleton active loading={isLoadingPlatformRoles} paragraph={false}>
                         <Form.Item
                           name="platform_role_id"

src/constants/LinkAndImageConstants.ts

@@ -11,6 +11,12 @@ const ROUTE_LOCAL_NETWORK_TRAFFIC_LINK = 'https://docs.netmaker.io/'; /// NEED T
 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 USER_MGMT_DOCS_INVITES_URL =
+  'https://docs.v2.netmaker.io/guide/netmaker-professional/users-in-netmaker-professional#adding-users__user-invite';
 
 const EGRESS_IMG = '/egress.webp';
 const RAG_IMG = '/rag.webp';
@@ -29,6 +35,9 @@ export const ExternalLinks = {
   HOW_TO_ADD_USERS_TO_NETWORK,
   USER_MGMT_DOCS_URL,
   UI_DOCS_URL,
+  USER_MGMT_DOCS_NETWORK_ROLES_URL,
+  USER_MGMT_DOCS_USER_GROUPS_URL,
+  USER_MGMT_DOCS_INVITES_URL,
 };
 
 export const AppImages = {

src/pages/users/CreateNetworkRolePage.tsx

@@ -1,5 +1,5 @@
 import { useStore } from '@/store/store';
-import { PlusOutlined } from '@ant-design/icons';
+import { InfoCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import {
   Button,
   Card,
@@ -16,9 +16,11 @@ import {
   Tabs,
   TabsProps,
   theme,
+  Tour,
+  TourProps,
   Typography,
 } from 'antd';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { PageProps } from '../../models/Page';
 import './UsersPage.scss';
 import { extractErrorMsg } from '@/utils/ServiceUtils';
@@ -77,6 +79,13 @@ export default function CreateNetworkRolePage(props: PageProps) {
   const [isLoadingNetworks, setIsLoadingNetworks] = useState(true);
   const [searchRag, setSearchRag] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isTourOpen, setIsTourOpen] = useState(false);
+
+  const networkRoleName = useRef(null);
+  const networkName = useRef(null);
+  const networkAdminAccess = useRef(null);
+  const networkRolePermissions = useRef(null);
+  const createRoleButton = useRef(null);
 
   const networkVal = Form.useWatch('network', metadataForm);
 
@@ -489,6 +498,39 @@ export default function CreateNetworkRolePage(props: PageProps) {
     ],
   );
 
+  const createNetworkRoleTourSteps: TourProps['steps'] = [
+    {
+      title: 'Role Name',
+      description: 'Set network role name',
+      target: () => networkRoleName.current,
+      placement: 'bottom',
+    },
+    {
+      title: 'Network',
+      description: 'Select the network this role will apply to',
+      target: () => networkName.current,
+      placement: 'bottom',
+    },
+    {
+      title: 'Admin Access',
+      description: 'Assign admin access to the network',
+      target: () => networkAdminAccess.current,
+      placement: 'bottom',
+    },
+    {
+      title: 'Role Permissions',
+      description: 'Set role permissions for the network, turn on the permissions you want to grant',
+      target: () => networkRolePermissions.current,
+      placement: 'bottom',
+    },
+    {
+      title: 'Create Role',
+      description: 'Click here to create the network role',
+      target: () => createRoleButton.current,
+      placement: 'bottom',
+    },
+  ];
+
   useEffect(() => {
     loadNetworks();
   }, [isServerEE, loadNetworks]);
@@ -509,6 +551,16 @@ export default function CreateNetworkRolePage(props: PageProps) {
                   Create a Network Role
                 </Typography.Title>
               </Col>
+              <Col xs={24} lg={12} style={{ textAlign: 'end' }}>
+                <Button
+                  size="large"
+                  onClick={() => {
+                    setIsTourOpen(true);
+                  }}
+                >
+                  <InfoCircleOutlined /> Start Tour
+                </Button>
+              </Col>
             </Row>
           </Col>
         </Row>
@@ -519,7 +571,7 @@ export default function CreateNetworkRolePage(props: PageProps) {
           </Col>
           <Form form={metadataForm} layout="vertical" style={{ width: '100%' }}>
             <Row gutter={[24, 0]}>
-              <Col xs={24} md={12}>
+              <Col xs={24} md={12} ref={networkRoleName}>
                 <Form.Item
                   name="name"
                   label="Role Name"
@@ -529,7 +581,7 @@ export default function CreateNetworkRolePage(props: PageProps) {
                   <Input placeholder="Enter a name for this new role" style={{ width: '100%' }} />
                 </Form.Item>
               </Col>
-              <Col xs={24} md={12}>
+              <Col xs={24} md={12} ref={networkName}>
                 <Form.Item
                   name="network"
                   label="Specify the network this role will apply to"
@@ -542,7 +594,7 @@ export default function CreateNetworkRolePage(props: PageProps) {
                   />
                 </Form.Item>
               </Col>
-              <Col xs={24} md={12}>
+              <Col xs={24} md={12} ref={networkAdminAccess}>
                 <Form.Item
                   name="full_access"
                   label="Assign Admin Access To Network"
@@ -557,7 +609,7 @@ export default function CreateNetworkRolePage(props: PageProps) {
           </Form>
         </Row>
 
-        <Row className="tabbed-page-row-padding" style={{ paddingBottom: '5rem' }}>
+        <Row className="tabbed-page-row-padding" style={{ paddingBottom: '5rem' }} ref={networkRolePermissions}>
           <Col xs={24}>
             <Typography.Title level={4}>Role Permissions</Typography.Title>
           </Col>
@@ -583,14 +635,20 @@ export default function CreateNetworkRolePage(props: PageProps) {
           }}
         >
           <Col xs={24} style={{ textAlign: 'end' }}>
-            <Button type="primary" size="large" loading={isSubmitting} onClick={createNetworkRole}>
+            <Button
+              type="primary"
+              size="large"
+              loading={isSubmitting}
+              onClick={createNetworkRole}
+              ref={createRoleButton}
+            >
               <PlusOutlined /> Create Role
             </Button>
           </Col>
         </Row>
       </Skeleton>
-
       {/* misc */}
+      <Tour steps={createNetworkRoleTourSteps} open={isTourOpen} onClose={() => setIsTourOpen(false)} />
       {notifyCtx}
     </Layout.Content>
   );