change(ui): some review fixes

frontend/app/components/Assist/AssistSearchField/AssistSearchField.tsx

@@ -16,7 +16,7 @@ function AssistSearchField(props: Props) {
     const hasEvents = props.appliedFilter.filters.filter((i: any) => i.isEvent).size > 0;
     const hasFilters = props.appliedFilter.filters.filter((i: any) => !i.isEvent).size > 0;
     return (
-        <div className="flex items-center">
+        <div className="flex items-center w-full">
             <div style={{ width: '60%', marginRight: '10px' }}>
                 <SessionSearchField fetchFilterSearch={props.fetchFilterSearch} addFilterByKeyAndValue={props.addFilterByKeyAndValue} />
             </div>

frontend/app/components/Session/LivePlayer.tsx

@@ -11,20 +11,22 @@ import PlayerBlockHeader from '../Session_/PlayerBlockHeader';
 import PlayerBlock from '../Session_/PlayerBlock';
 import styles from '../Session_/session.module.css';
 import Session from 'App/mstore/types/session';
+import withLocationHandlers from 'HOCs/withLocationHandlers';
 
 interface Props {
   session: Session;
-  toggleFullscreen: (isOn: boolean) => void;
-  closeBottomBlock: () => void;
   fullscreen: boolean;
   loadingCredentials: boolean;
   assistCredendials: RTCIceServer[];
-  request: () => void;
   isEnterprise: boolean;
   userEmail: string;
   userName: string;
-  isMultiview?: boolean;
   customSession?: Session;
+  isMultiview?: boolean;
+  query?: Record<string, (key: string) => any>;
+  toggleFullscreen: (isOn: boolean) => void;
+  closeBottomBlock: () => void;
+  request: () => void;
 }
 
 function LivePlayer({
@@ -40,10 +42,11 @@ function LivePlayer({
   userName,
   isMultiview,
   customSession,
+  query
 }: Props) {
   const [contextValue, setContextValue] = useState(defaultContextValue);
   const [fullView, setFullView] = useState(false);
-
+  const openedFromMultiview = query.get('multi') === 'true'
   // @ts-ignore burn immutable
   const usedSession = isMultiview ? customSession : session.toJS();
 
@@ -100,6 +103,7 @@ function LivePlayer({
           setActiveTab={setActiveTab}
           tabs={TABS}
           fullscreen={fullscreen}
+          isMultiview={openedFromMultiview}
         />
       )}
       <div
@@ -139,6 +143,6 @@ export default withRequest({
         };
       },
       { toggleFullscreen, closeBottomBlock }
-    )(LivePlayer)
+    )(withLocationHandlers()(LivePlayer))
   )
 );

frontend/app/components/Session_/Multiview/Multiview.tsx

@@ -55,7 +55,7 @@ function Multiview({
   const openLiveSession = (e: React.MouseEvent, sessionId: string) => {
     e.stopPropagation();
     assistMultiviewStore.setActiveSession(sessionId);
-    history.push(withSiteId(liveSession(sessionId), siteId));
+    history.push(withSiteId(liveSession(sessionId)+'?multi=true', siteId));
   };
 
   const returnToList = () => {
@@ -76,7 +76,9 @@ function Multiview({
     assistMultiviewStore.removeSession(sessionId);
   };
 
-  const placeholder = new Array(4 - assistMultiviewStore.sessions.length).fill(0);
+  const emptySpace = 4 - assistMultiviewStore.sessions.length;
+
+  const placeholder = emptySpace > 0 ? new Array(emptySpace).fill(0) : []
 
   return (
     <div className="w-screen h-screen flex flex-col">

frontend/app/components/Session_/Multiview/SessionTileFooter.tsx

@@ -13,11 +13,11 @@ function SessionTileFooter({
   deleteSession: (e: any, id: string) => void;
 }) {
   return (
-    <div className="absolute z-10 bottom-0 w-full left-0 p-2 opacity-70 bg-gray-darkest text-white flex justify-between">
+    <div className="absolute z-10 cursor-default bottom-0 w-full h-8 left-0 px-4 opacity-70 bg-gray-darkest text-white flex items-center justify-between">
       <div>{userDisplayName}</div>
-      <div className="hidden group-hover:flex items-center gap-2">
+      <div className="hidden group-hover:flex h-full items-center gap-4">
         <div
-          className="cursor-pointer hover:font-semibold"
+          className="cursor-pointer hover:font-semibold border-l flex items-center justify-center h-full border-r border-white px-2"
           onClick={(e) => replaceSession(e, sessionId)}
         >
           Replace Session

frontend/app/components/Session_/Player/Controls/AssistSessionsModal/AssistSessionsModal.tsx

@@ -11,7 +11,9 @@ import { KEYS } from 'Types/filter/customFilter';
 import { capitalize } from 'App/utils';
 import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite';
-import { fetchList as fetchMeta } from 'Duck/customField'
+import { fetchList as fetchMeta } from 'Duck/customField';
+import AssistSearchField from 'App/components/Assist/AssistSearchField';
+import LiveSessionSearch from 'Shared/LiveSessionSearch';
 import cn from 'classnames';
 import Session from 'App/mstore/types/session';
 
@@ -53,9 +55,9 @@ function AssistSessionsModal(props: Props) {
 
   React.useEffect(() => {
     if (total === 0) {
-      reloadSessions()
+      reloadSessions();
     }
-    fetchMeta()
+    fetchMeta();
   }, []);
   const reloadSessions = () => props.applyFilter({ ...filter });
   const onSortChange = ({ value }: any) => {
@@ -71,10 +73,21 @@ function AssistSessionsModal(props: Props) {
   };
 
   return (
-    <div className="bg-gray-lightest box-shadow h-screen p-4" style={{ width: '840px' }}>
-      <div className="flex items-center my-2">
-        <div className="flex items-center gap-2" w-full>
-        <Button className="mr-2" variant="text" onClick={reloadSessions}>Refresh</Button>
+    <div className="bg-gray-lightest box-shadow h-screen p-4" style={{ width: '1000px', maxWidth: '60vw' }}>
+      <div className="flex flex-col my-2 w-full gap-2 ">
+        <div className="flex items-center gap-2 w-full">
+          <Tooltip title="Refresh" placement="top" delay={200}>
+            <Button
+              loading={loading}
+              className="mr-2"
+              variant="text"
+              onClick={reloadSessions}
+              icon="arrow-repeat"
+            />
+          </Tooltip>
+          <AssistSearchField />
+        </div>
+        <div className="flex self-end items-center gap-2" w-full>
           <span className="color-gray-medium">Sort By</span>
           <Tooltip title="No metadata available to sort" disabled={sortOptions.length > 0}>
             <div className={cn('flex items-center', { disabled: sortOptions.length === 0 })}>
@@ -93,6 +106,8 @@ function AssistSessionsModal(props: Props) {
           </Tooltip>
         </div>
       </div>
+      <LiveSessionSearch />
+      <div className="my-4" />
       <Loader loading={loading}>
         {list.map((session) => (
           <React.Fragment key={session.sessionId}>

frontend/app/components/Session_/Player/Controls/AssistSessionsTabs/AssistSessionsTabs.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import cn from 'classnames';
-import { Icon } from 'UI';
+import { Icon, Tooltip } from 'UI';
 import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite';
 import { useHistory } from 'react-router-dom';

frontend/app/components/Session_/PlayerBlockHeader.tsx

@@ -6,8 +6,9 @@ import {
   assist as assistRoute,
   liveSession as liveSessionRoute,
   withSiteId,
+  multiview,
 } from 'App/routes';
-import { BackLink, Link } from 'UI';
+import { BackLink, Link, Icon } from 'UI';
 import { toggleFavorite, setSessionPath } from 'Duck/sessions';
 import cn from 'classnames';
 import SessionMetaList from 'Shared/SessionItem/SessionMetaList';
@@ -15,7 +16,7 @@ import UserCard from './EventsBlock/UserCard';
 import Tabs from 'Components/Session/Tabs';
 import { PlayerContext } from 'App/components/Session/playerContext';
 import { observer } from 'mobx-react-lite';
-
+import { useStore } from 'App/mstore'
 import stl from './playerBlockHeader.module.css';
 import AssistActions from '../Assist/components/AssistActions';
 import AssistTabs from '../Assist/components/AssistTabs';
@@ -27,6 +28,7 @@ const ASSIST_ROUTE = assistRoute();
 function PlayerBlockHeader(props: any) {
   const [hideBack, setHideBack] = React.useState(false);
   const { player, store } = React.useContext(PlayerContext);
+  const { assistMultiviewStore } = useStore();
 
   const { width, height, showEvents } = store.get();
   const toggleEvents = player.toggleEvents;
@@ -43,6 +45,7 @@ function PlayerBlockHeader(props: any) {
     location,
     history,
     sessionPath,
+    isMultiview,
   } = props;
 
   React.useEffect(() => {
@@ -77,14 +80,36 @@ function PlayerBlockHeader(props: any) {
     key: tab,
   }));
 
+  const openGrid = () => {
+    const sessionIdQuery = encodeURIComponent(assistMultiviewStore.sessions.map((s) => s.sessionId).join(','));
+    return history.push(withSiteId(multiview(sessionIdQuery), siteId));
+  };
+
   return (
     <div className={cn(stl.header, 'flex justify-between', { hidden: fullscreen })}>
       <div className="flex w-full items-center">
         {!hideBack && (
-          <div className="flex items-center h-full" onClick={backHandler}>
-            {/* @ts-ignore TODO */}
-            <BackLink label="Back" className="h-full" />
-            <div className={stl.divider} />
+          <div
+            className="flex items-center h-full cursor-pointer group"
+            onClick={() => (isMultiview ? openGrid() : backHandler())}
+          >
+            {isMultiview ? (
+              <>
+                <div className="rounded-full border group-hover:border-teal group-hover:text-teal group-hover:fill-teal p-1 mr-2">
+                  <Icon name="close" color="inherit" size={13} />
+                </div>
+                <span className="group-hover:text-teal group-hover:fill-teal">
+                  Close
+                </span>
+                <div className={stl.divider} />
+              </>
+            ) : (
+              <>
+                {/* @ts-ignore TODO */}
+                <BackLink label="Back" className="h-full" />
+                <div className={stl.divider} />
+              </>
+            )}
           </div>
         )}
         <UserCard className="" width={width} height={height} />