NTP-8086|side navbar changes and user changes| Aman Singh (#1180)
* NTP-8086|side navbar changes and user changes| Aman Singh * NTP-8086|side navbar changes and user changes| Aman Singh
This commit is contained in:
@@ -361,6 +361,97 @@ function SideNavBar({ isDc97User, isHRCChatUser }: ISideNavbarProps) {
|
||||
downloadDocumentFromS3WithoughtPreview(url, name, `Cannot Download the document`);
|
||||
};
|
||||
|
||||
// TODO:: REMOVE THIS CODE AFTER ONCE THINGS ARE STABLE
|
||||
const isUserManagementRole =
|
||||
[Roles.ROLE_USER_MANAGEMENT_ADMIN, Roles.ROLE_TEAM_LEAD].every(r => user?.roles?.includes(r)) &&
|
||||
user?.roles?.length === 2;
|
||||
|
||||
if (isUserManagementRole) {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={cx(styles.sideNavBarMain, {
|
||||
[styles.sideNavBarMain__hovered]: showNotifications
|
||||
})}
|
||||
onMouseLeave={() => setShowLogout(false)}
|
||||
>
|
||||
<div className={styles.logoContainer}>
|
||||
<Link
|
||||
to={isAgentOfflineInLonghorn || isLonghornBlocked ? '#' : '/'}
|
||||
className={cx({
|
||||
'cursor-not-allowed': isAgentOfflineInLonghorn || isLonghornBlocked
|
||||
})}
|
||||
>
|
||||
<NaviNewLogoIcon size={'md'} className={styles.naviLogo} />
|
||||
</Link>
|
||||
</div>
|
||||
<div className={cx([styles.linksContainer])}>
|
||||
<SidebarLinks
|
||||
key={APP_ROUTES.ALL_AGENTS.path}
|
||||
activeIcon={<UserManagementActiveIcon />}
|
||||
inActiveIcon={<UserManagementInactiveIcon />}
|
||||
name={'User Management'}
|
||||
route={APP_ROUTES.ALL_AGENTS.path}
|
||||
linkClickHandler={linkClickHandler}
|
||||
currentPathname={pathname}
|
||||
currentSearch={search}
|
||||
clickStreamEvent={CLICKSTREAM_EVENT_NAMES.LH_ALL_AGENTS_SIDE_PANEL_CLICK}
|
||||
/>
|
||||
<div className={styles.alignBotton}>
|
||||
{showLogout ? (
|
||||
<div className={styles.logoutContainer}>
|
||||
<div className="flex flex-col gap-y-3 w-full">
|
||||
<div className={styles.agentDetails}>
|
||||
<CustomUserIcon width={40} height={40} fillColor="var(--greyscale-light)" />
|
||||
<div className={styles.agentNameContainer}>
|
||||
<Typography
|
||||
variant={'h6'}
|
||||
className="max-w-[138px] text-ellipsis whitespace-nowrap overflow-hidden"
|
||||
>
|
||||
{user?.name}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant={'p5'}
|
||||
className="max-w-[138px] text-ellipsis whitespace-nowrap overflow-hidden mt-1"
|
||||
>
|
||||
{user?.email}
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={logOutHandler}
|
||||
className={styles.logoutPopup}
|
||||
disabled={disableLogout}
|
||||
>
|
||||
<Typography variant="h6" className={styles.logoutText}>
|
||||
Logout
|
||||
</Typography>
|
||||
<CustomLogoutIcon width={16} height={16} fillColor="var(--grayscale-2)" />
|
||||
</button>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div
|
||||
className={cx(styles.sideNavBarLinks, styles.logoutLink)}
|
||||
onClick={() => {
|
||||
setShowLogout(prev => !prev);
|
||||
dispatch(getAgentDocuments());
|
||||
}}
|
||||
>
|
||||
<AgentIcon />
|
||||
<Typography variant="h3" className={cx([styles.sideNavBarItems, styles.text])}>
|
||||
<span title={user?.name}>{user?.name}</span>
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
|
||||
@@ -61,23 +61,16 @@ const AllAgents = () => {
|
||||
|
||||
const user = useSelector((state: RootState) => state.common.userData);
|
||||
|
||||
const {
|
||||
currentPageData,
|
||||
page,
|
||||
loading,
|
||||
allAgentsPage,
|
||||
isDrawerOpen,
|
||||
searchValue,
|
||||
totalActiveAgent
|
||||
} = useSelector((state: RootState) => ({
|
||||
currentPageData: state.teamLeadDashboard.allAgentsData,
|
||||
page: state.teamLeadDashboard.allAgentsPage,
|
||||
loading: state.teamLeadDashboard.isLoading,
|
||||
allAgentsPage: state.teamLeadDashboard.allAgentsPage,
|
||||
isDrawerOpen: state.teamLeadDashboard.isDrawerOpen,
|
||||
searchValue: state.teamLeadDashboard.searchValue,
|
||||
totalActiveAgent: state.teamLeadDashboard.totalActiveAgent
|
||||
}));
|
||||
const { currentPageData, page, loading, allAgentsPage, isDrawerOpen, searchValue } = useSelector(
|
||||
(state: RootState) => ({
|
||||
currentPageData: state.teamLeadDashboard.allAgentsData,
|
||||
page: state.teamLeadDashboard.allAgentsPage,
|
||||
loading: state.teamLeadDashboard.isLoading,
|
||||
allAgentsPage: state.teamLeadDashboard.allAgentsPage,
|
||||
isDrawerOpen: state.teamLeadDashboard.isDrawerOpen,
|
||||
searchValue: state.teamLeadDashboard.searchValue
|
||||
})
|
||||
);
|
||||
|
||||
const [isEditable, setIsEditable] = useState(false);
|
||||
const [showAddUserDrawer, setShowAddUserDrawer] = useState(false);
|
||||
@@ -146,6 +139,10 @@ const AllAgents = () => {
|
||||
...(filters.agentState &&
|
||||
filters.agentState.length > 0 && {
|
||||
AGENT_STATE: filters.agentState.split(',').map(item => ({ value: item }))
|
||||
}),
|
||||
...(filters.status &&
|
||||
filters.status.length > 0 && {
|
||||
STATUS: filters.status.split(',').map(item => ({ value: item }))
|
||||
})
|
||||
};
|
||||
};
|
||||
@@ -270,7 +267,8 @@ const AllAgents = () => {
|
||||
PRIMARY_LANGUAGE: filtersQueryString.primaryLanguage
|
||||
?.split(',')
|
||||
?.map(item => ({ value: item })),
|
||||
AGENT_STATE: filtersQueryString.agentState?.split(',')?.map(item => ({ value: item }))
|
||||
AGENT_STATE: filtersQueryString.agentState?.split(',')?.map(item => ({ value: item })),
|
||||
STATUS: filtersQueryString.status?.split(',')?.map(item => ({ value: item }))
|
||||
};
|
||||
dispatch(getAllAgents(initialPayload, filtersPayload));
|
||||
} else {
|
||||
@@ -347,7 +345,7 @@ const AllAgents = () => {
|
||||
return (
|
||||
<div className={styles.mainContainer}>
|
||||
<div className={'flex flex-row justify-between'}>
|
||||
Active users ({totalActiveAgent || 0})
|
||||
User repository
|
||||
<div className={'flex flex-end gap-[16px]'}>
|
||||
{user?.naviUser ? (
|
||||
<>
|
||||
|
||||
@@ -65,6 +65,7 @@ export interface filtersParams {
|
||||
bucketGroup?: string;
|
||||
primaryLanguage?: string;
|
||||
agentState?: string;
|
||||
status?: string;
|
||||
}
|
||||
|
||||
export interface IAllAgentsFilters {
|
||||
@@ -76,6 +77,7 @@ export interface filterQueryParams {
|
||||
BUCKET_GROUP?: Array<IAllAgentsFilters>;
|
||||
PRIMARY_LANGUAGE?: Array<IAllAgentsFilters>;
|
||||
AGENT_STATE?: Array<IAllAgentsFilters>;
|
||||
STATUS?: Array<IAllAgentsFilters>;
|
||||
}
|
||||
export interface GridEvent {
|
||||
api: any;
|
||||
|
||||
Reference in New Issue
Block a user