feat(breakout-rooms/native): separate breakout rooms from participants (#13920)

feat(breakout-rooms/native): separate breakout rooms from participants

react/features/toolbox/components/native/OverflowMenu.tsx

@@ -8,6 +8,8 @@ import { hideSheet } from '../../../base/dialog/actions';
 import BottomSheet from '../../../base/dialog/components/native/BottomSheet';
 import { bottomSheetStyles } from '../../../base/dialog/components/native/styles';
 import SettingsButton from '../../../base/settings/components/native/SettingsButton';
+import BreakoutRoomsButton
+    from '../../../breakout-rooms/components/native/BreakoutRoomsButton';
 import SharedDocumentButton from '../../../etherpad/components/SharedDocumentButton.native';
 import ReactionMenu from '../../../reactions/components/native/ReactionMenu';
 import { isReactionsEnabled } from '../../../reactions/functions.any';
@@ -29,11 +31,17 @@ import OpenCarmodeButton from './OpenCarmodeButton';
 import RaiseHandButton from './RaiseHandButton';
 import ScreenSharingButton from './ScreenSharingButton';
 
+
 /**
  * The type of the React {@code Component} props of {@link OverflowMenu}.
  */
 interface IProps {
 
+    /**
+     * True if breakout rooms feature is available, false otherwise.
+     */
+    _isBreakoutRoomsSupported?: boolean;
+
     /**
      * True if the overflow menu is currently visible, false otherwise.
      */
@@ -103,6 +111,7 @@ class OverflowMenu extends PureComponent<IProps, IState> {
      */
     render() {
         const {
+            _isBreakoutRoomsSupported,
             _isSpeakerStatsDisabled,
             _reactionsEnabled,
             _width,
@@ -150,6 +159,7 @@ class OverflowMenu extends PureComponent<IProps, IState> {
                 {!toolbarButtons.has('screensharing') && <ScreenSharingButton { ...buttonProps } />}
                 {!_isSpeakerStatsDisabled && <SpeakerStatsButton { ...buttonProps } />}
                 {!toolbarButtons.has('tileview') && <TileViewButton { ...buttonProps } />}
+                {_isBreakoutRoomsSupported && <BreakoutRoomsButton { ...buttonProps } />}
                 {/* @ts-ignore */}
                 <Divider style = { styles.divider as ViewStyle } />
                 <ClosedCaptionButton { ...buttonProps } />
@@ -191,7 +201,10 @@ class OverflowMenu extends PureComponent<IProps, IState> {
  * @returns {IProps}
  */
 function _mapStateToProps(state: IReduxState) {
+    const { conference } = state['features/base/conference'];
+
     return {
+        _isBreakoutRoomsSupported: conference?.getBreakoutRooms()?.isSupported(),
         _isSpeakerStatsDisabled: isSpeakerStatsDisabled(state),
         _reactionsEnabled: isReactionsEnabled(state),
         _width: state['features/base/responsive-ui'].clientWidth