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:
Aman Singh
2024-10-22 14:09:34 +05:30
committed by GitHub
parent 1fc98de155
commit d2f82cb470
3 changed files with 110 additions and 19 deletions

View File

@@ -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

View File

@@ -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 ? (
<>

View File

@@ -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;