fix(ui) - user sessions modal - navigation

frontend/app/components/Assist/components/AssistTabs/AssistTabs.tsx

@@ -1,37 +1,29 @@
 import { useModal } from 'App/components/Modal';
-import React, { useState } from 'react';
+import React from 'react';
 import SessionList from '../SessionList';
-import stl from './assistTabs.module.css'
+import stl from './assistTabs.module.css';
 
 interface Props {
-  userId: any,
-  userNumericHash: any,
+  userId: any;
 }
 
 const AssistTabs = (props: Props) => {
-  const [showMenu, setShowMenu] = useState(false)
   const { showModal } = useModal();
 
   return (
     <div className="relative mr-4">
       <div className="flex items-center">
         {props.userId && (
-          <>
-            <div
-              className={stl.btnLink}
-              onClick={() => showModal(<SessionList userId={props.userId} />, { right: true, width: 700 })}
-            >
-              Active Sessions
-            </div>
-          </>
+          <div
+            className={stl.btnLink}
+            onClick={() =>
+              showModal(<SessionList userId={props.userId} />, { right: true, width: 700 })
+            }
+          >
+            Active Sessions
+          </div>
         )}
       </div>
-      {/* <SlideModal
-        title={ <div>{props.userId}'s <span className="color-gray-medium">Live Sessions</span> </div> }
-        isDisplayed={ showMenu }
-        content={ showMenu && <SessionList /> }
-        onClose={ () => setShowMenu(false) }
-      /> */}
     </div>
   );
 };

frontend/app/components/Assist/components/SessionList/SessionList.tsx

@@ -46,7 +46,7 @@ function SessionList(props: Props) {
                 >
                     <div className="p-4">
                         {props.list.map((session: any) => (
-                            <div className="mb-6">
+                            <div className="mb-6" key={session.sessionId}>
                                 {session.pageTitle && session.pageTitle !== '' && (
                                     <div className="flex items-center mb-2">
                                         <Label size="small" className="p-1">
@@ -55,7 +55,7 @@ function SessionList(props: Props) {
                                         <span className="ml-2 font-medium">{session.pageTitle}</span>
                                     </div>
                                 )}
-                                <SessionItem compact={true} onClick={() => hideModal()} key={session.sessionId} session={session} />
+                                <SessionItem compact={true} onClick={hideModal} session={session} />
                             </div>
                         ))}
                     </div>

frontend/app/components/Session/Player/LivePlayer/LivePlayerBlockHeader.tsx

@@ -46,7 +46,7 @@ function LivePlayerBlockHeader(props: any) {
     history.push(withSiteId(ASSIST_ROUTE, siteId));
   };
 
-  const { userId, userNumericHash, metadata, isCallActive, agentIds } = session;
+  const { userId, metadata, isCallActive, agentIds } = session;
   let _metaList = Object.keys(metadata)
     .filter((i) => metaList.includes(i))
     .map((key) => {
@@ -87,7 +87,7 @@ function LivePlayerBlockHeader(props: any) {
           </div>
         )}
         <UserCard className="" width={width} height={height} />
-        <AssistTabs userId={userId} userNumericHash={userNumericHash} />
+        <AssistTabs userId={userId} />
 
         <div className={cn('ml-auto flex items-center h-full', { hidden: closedLive })}>
           {_metaList.length > 0 && (

frontend/app/components/shared/SessionItem/SessionItem.tsx

@@ -55,6 +55,7 @@ interface Props {
   compact?: boolean;
   isDisabled?: boolean;
   isAdd?: boolean;
+  ignoreAssist?: boolean;
 }
 
 function SessionItem(props: RouteComponentProps & Props) {
@@ -70,6 +71,7 @@ function SessionItem(props: RouteComponentProps & Props) {
     lastPlayedSessionId,
     onClick = null,
     compact = false,
+    ignoreAssist = false,
   } = props;
 
   const {
@@ -99,9 +101,10 @@ function SessionItem(props: RouteComponentProps & Props) {
   const hasUserId = userId || userAnonymousId;
   const isSessions = isRoute(SESSIONS_ROUTE, location.pathname);
   const isAssist =
-    isRoute(ASSIST_ROUTE, location.pathname) ||
-    isRoute(ASSIST_LIVE_SESSION, location.pathname) ||
-    location.pathname.includes('multiview');
+    !ignoreAssist &&
+    (isRoute(ASSIST_ROUTE, location.pathname) ||
+      isRoute(ASSIST_LIVE_SESSION, location.pathname) ||
+      location.pathname.includes('multiview'));
   const isLastPlayed = lastPlayedSessionId === sessionId;
 
   const _metaList = Object.keys(metadata)

frontend/app/components/shared/UserSessionsModal/UserSessionsModal.tsx

@@ -70,7 +70,7 @@ function UserSessionsModal(props: Props) {
                     <Loader loading={loading}>
                         {data.sessions.map((session: any) => (
                             <div className="border-b last:border-none" key={session.sessionId}>
-                                <SessionItem key={session.sessionId} session={session} compact={true} onClick={hideModal} />
+                                <SessionItem key={session.sessionId} session={session} compact={true} onClick={hideModal} ignoreAssist={true} />
                             </div>
                         ))}
                     </Loader>