From 739cf5627b65cc63db0f73f75c7e780c1cd6e897 Mon Sep 17 00:00:00 2001
From: Horatiu Muresan <horatiu.muresan@8x8.com>
Date: Wed, 18 Jan 2023 14:07:42 +0200
Subject: [PATCH] open drawer for breakout rooms

---
 react/features/base/ui/components/web/ContextMenu.tsx      | 4 +---
 .../breakout-rooms/components/web/CollapsibleRoom.tsx      | 3 +--
 .../components/breakout-rooms/components/web/RoomList.js   | 7 ++++---
 .../components/web/MeetingParticipants.tsx                 | 3 +--
 4 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/react/features/base/ui/components/web/ContextMenu.tsx b/react/features/base/ui/components/web/ContextMenu.tsx
index 906276d9f..b05dc9659 100644
--- a/react/features/base/ui/components/web/ContextMenu.tsx
+++ b/react/features/base/ui/components/web/ContextMenu.tsx
@@ -2,13 +2,11 @@ import React, { ReactNode, useEffect, useLayoutEffect, useRef, useState } from '
 import { useSelector } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';
 
-import { IReduxState } from '../../../../app/types';
 // eslint-disable-next-line lines-around-comment
 // @ts-ignore
 import { Drawer, JitsiPortal } from '../../../../toolbox/components/web';
 import { showOverflowDrawer } from '../../../../toolbox/functions.web';
 import participantsPaneTheme from '../../../components/themes/participantsPaneTheme.json';
-import { isMobileBrowser } from '../../../environment/utils';
 import { withPixelLineHeight } from '../../../styles/functions.web';
 
 /**
@@ -161,7 +159,7 @@ const ContextMenu = ({
     const [ isHidden, setIsHidden ] = useState(true);
     const containerRef = useRef<HTMLDivElement | null>(null);
     const { classes: styles, cx } = useStyles();
-    const _overflowDrawer = useSelector((state: IReduxState) => showOverflowDrawer(state) && isMobileBrowser());
+    const _overflowDrawer = useSelector(showOverflowDrawer);
 
     useLayoutEffect(() => {
         if (_overflowDrawer) {
diff --git a/react/features/participants-pane/components/breakout-rooms/components/web/CollapsibleRoom.tsx b/react/features/participants-pane/components/breakout-rooms/components/web/CollapsibleRoom.tsx
index 719979544..cdce555be 100644
--- a/react/features/participants-pane/components/breakout-rooms/components/web/CollapsibleRoom.tsx
+++ b/react/features/participants-pane/components/breakout-rooms/components/web/CollapsibleRoom.tsx
@@ -5,7 +5,6 @@ import { makeStyles } from 'tss-react/mui';
 
 import { IReduxState } from '../../../../../app/types';
 import ListItem from '../../../../../base/components/participants-pane-list/ListItem';
-import { isMobileBrowser } from '../../../../../base/environment/utils';
 import Icon from '../../../../../base/icons/components/Icon';
 import { IconArrowDown, IconArrowUp } from '../../../../../base/icons/svg';
 import { isLocalParticipantModerator } from '../../../../../base/participants/functions';
@@ -129,7 +128,7 @@ export const CollapsibleRoom = ({
         onRaiseMenu(target);
     }, [ onRaiseMenu ]);
     const { defaultRemoteDisplayName } = useSelector((state: IReduxState) => state['features/base/config']);
-    const overflowDrawer: boolean = useSelector((state: IReduxState) => showOverflowDrawer(state) && isMobileBrowser());
+    const overflowDrawer: boolean = useSelector(showOverflowDrawer);
     const moderator = useSelector(isLocalParticipantModerator);
 
     const arrow = (<div className = { styles.arrowContainer }>
diff --git a/react/features/participants-pane/components/breakout-rooms/components/web/RoomList.js b/react/features/participants-pane/components/breakout-rooms/components/web/RoomList.js
index 625a5c2b0..358173ed5 100644
--- a/react/features/participants-pane/components/breakout-rooms/components/web/RoomList.js
+++ b/react/features/participants-pane/components/breakout-rooms/components/web/RoomList.js
@@ -41,10 +41,11 @@ export const RoomList = ({ searchString }: Props) => {
     const isLocalModerator = useSelector(isLocalParticipantModerator);
     const showAutoAssign = useSelector(isAutoAssignParticipantsVisible);
     const { hideJoinRoomButton } = useSelector(getBreakoutRoomsConfig);
-    const _overflowDrawer = useSelector(state => showOverflowDrawer(state) && isMobileBrowser());
+    const overflowDrawer = useSelector(showOverflowDrawer);
     const [ lowerMenu, raiseMenu, toggleMenu, menuEnter, menuLeave, raiseContext ] = useContextMenu();
     const [ lowerParticipantMenu, raiseParticipantMenu, toggleParticipantMenu,
         participantMenuEnter, participantMenuLeave, raiseParticipantContext ] = useContextMenu();
+    const hideMenu = useCallback(() => !overflowDrawer && lowerMenu(), [ overflowDrawer, lowerMenu ]);
     const onRaiseMenu = useCallback(room => target => raiseMenu(room, target), [ raiseMenu ]);
 
     return (
@@ -56,14 +57,14 @@ export const RoomList = ({ searchString }: Props) => {
                     <React.Fragment key = { room.id }>
                         <CollapsibleRoom
                             isHighlighted = { raiseContext.entity === room }
-                            onLeave = { lowerMenu }
+                            onLeave = { hideMenu }
                             onRaiseMenu = { onRaiseMenu(room) }
                             participantContextEntity = { raiseParticipantContext.entity }
                             raiseParticipantContextMenu = { raiseParticipantMenu }
                             room = { room }
                             searchString = { searchString }
                             toggleParticipantMenu = { toggleParticipantMenu }>
-                            {!_overflowDrawer && <>
+                            {!isMobileBrowser() && <>
                                 {!hideJoinRoomButton && <JoinActionButton room = { room } />}
                                 {isLocalModerator && !room.isMainRoom
                                     && <RoomActionEllipsis onClick = { toggleMenu(room) } />}
diff --git a/react/features/participants-pane/components/web/MeetingParticipants.tsx b/react/features/participants-pane/components/web/MeetingParticipants.tsx
index 96bb20848..3934a4786 100644
--- a/react/features/participants-pane/components/web/MeetingParticipants.tsx
+++ b/react/features/participants-pane/components/web/MeetingParticipants.tsx
@@ -8,7 +8,6 @@ import { IReduxState } from '../../../app/types';
 import { rejectParticipantAudio } from '../../../av-moderation/actions';
 import participantsPaneTheme from '../../../base/components/themes/participantsPaneTheme.json';
 import { isToolbarButtonEnabled } from '../../../base/config/functions.web';
-import { isMobileBrowser } from '../../../base/environment/utils';
 import { MEDIA_TYPE } from '../../../base/media/constants';
 import { getParticipantById, isScreenShareParticipant } from '../../../base/participants/functions';
 import { connect } from '../../../base/redux/functions';
@@ -171,7 +170,7 @@ function _mapStateToProps(state: IReduxState): Object {
 
     const participantsCount = sortedParticipantIds.length;
     const showInviteButton = shouldRenderInviteButton(state) && isToolbarButtonEnabled('invite', state);
-    const overflowDrawer = showOverflowDrawer(state) && isMobileBrowser();
+    const overflowDrawer = showOverflowDrawer(state);
     const currentRoomId = getCurrentRoomId(state);
     const currentRoom = getBreakoutRooms(state)[currentRoomId];