From 0fc148af55acee154396e5b4c17e0e9825234554 Mon Sep 17 00:00:00 2001
From: KDSBrowne <kert.browne85@gmail.com>
Date: Thu, 10 Jan 2019 18:25:08 +0000
Subject: [PATCH 1/6] add create breakout room option to user manage menu

---
 .../user-options/component.jsx                | 51 +++++++++++++++++--
 .../user-options/container.jsx                |  7 +++
 2 files changed, 54 insertions(+), 4 deletions(-)

diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/component.jsx b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/component.jsx
index 0db0a225fd..0258ee61a4 100755
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/component.jsx
@@ -10,6 +10,7 @@ import DropdownContent from '/imports/ui/components/dropdown/content/component';
 import DropdownList from '/imports/ui/components/dropdown/list/component';
 import DropdownListItem from '/imports/ui/components/dropdown/list/item/component';
 import LockViewersContainer from '/imports/ui/components/lock-viewers/container';
+import BreakoutRoom from '/imports/ui/components/actions-bar/create-breakout-room/component';
 import { styles } from './styles';
 
 const propTypes = {
@@ -21,6 +22,9 @@ const propTypes = {
   toggleMuteAllUsersExceptPresenter: PropTypes.func.isRequired,
   toggleStatus: PropTypes.func.isRequired,
   mountModal: PropTypes.func.isRequired,
+  users: PropTypes.arrayOf(Object).isRequired,
+  meetingName: PropTypes.string.isRequired,
+  createBreakoutRoom: PropTypes.func.isRequired,
 };
 
 const intlMessages = defineMessages({
@@ -68,6 +72,14 @@ const intlMessages = defineMessages({
     id: 'app.userList.userOptions.muteAllExceptPresenterDesc',
     description: 'Mute all except presenter description',
   },
+  createBreakoutRoom: {
+    id: 'app.actionsBar.actionsDropdown.createBreakoutRoom',
+    description: 'Create breakout room option',
+  },
+  createBreakoutRoomDesc: {
+    id: 'app.actionsBar.actionsDropdown.createBreakoutRoomDesc',
+    description: 'Description of create breakout room option',
+  },
 });
 
 class UserOptions extends PureComponent {
@@ -78,9 +90,16 @@ class UserOptions extends PureComponent {
       isUserOptionsOpen: false,
     };
 
+    this.clearStatusId = _.uniqueId('list-item-');
+    this.muteId = _.uniqueId('list-item-');
+    this.muteAllId = _.uniqueId('list-item-');
+    this.lockId = _.uniqueId('list-item-');
+    this.createBreakoutId = _.uniqueId('list-item-');
+
     this.onActionsShow = this.onActionsShow.bind(this);
     this.onActionsHide = this.onActionsHide.bind(this);
     this.alterMenu = this.alterMenu.bind(this);
+    this.handleCreateBreakoutRoomClick = this.handleCreateBreakoutRoomClick.bind(this);
   }
 
   componentWillMount() {
@@ -95,33 +114,40 @@ class UserOptions extends PureComponent {
 
     this.menuItems = _.compact([
       (<DropdownListItem
-        key={_.uniqueId('list-item-')}
+        key={this.clearStatusId}
         icon="clear_status"
         label={intl.formatMessage(intlMessages.clearAllLabel)}
         description={intl.formatMessage(intlMessages.clearAllDesc)}
         onClick={toggleStatus}
       />),
       (<DropdownListItem
-        key={_.uniqueId('list-item-')}
+        key={this.muteAllId}
         icon="mute"
         label={intl.formatMessage(intlMessages.muteAllLabel)}
         description={intl.formatMessage(intlMessages.muteAllDesc)}
         onClick={toggleMuteAllUsers}
       />),
       (<DropdownListItem
-        key={_.uniqueId('list-item-')}
+        key={this.muteId}
         icon="mute"
         label={intl.formatMessage(intlMessages.muteAllExceptPresenterLabel)}
         description={intl.formatMessage(intlMessages.muteAllExceptPresenterDesc)}
         onClick={toggleMuteAllUsersExceptPresenter}
       />),
       (<DropdownListItem
-        key={_.uniqueId('list-item-')}
+        key={this.lockId}
         icon="lock"
         label={intl.formatMessage(intlMessages.lockViewersLabel)}
         description={intl.formatMessage(intlMessages.lockViewersDesc)}
         onClick={() => mountModal(<LockViewersContainer />)}
       />),
+      (<DropdownListItem
+        key={this.createBreakoutId}
+        icon="rooms"
+        label={intl.formatMessage(intlMessages.createBreakoutRoom)}
+        description={intl.formatMessage(intlMessages.createBreakoutRoomDesc)}
+        onClick={() => this.handleCreateBreakoutRoomClick()}
+      />),
     ]);
 
     if (isMeetingMuted) {
@@ -148,6 +174,23 @@ class UserOptions extends PureComponent {
     });
   }
 
+  handleCreateBreakoutRoomClick() {
+    const {
+      createBreakoutRoom,
+      mountModal,
+      meetingName,
+      users,
+    } = this.props;
+
+    mountModal(
+      <BreakoutRoom
+        createBreakoutRoom={createBreakoutRoom}
+        meetingName={meetingName}
+        users={users}
+      />,
+    );
+  }
+
   alterMenu() {
     const {
       intl,
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/container.jsx b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/container.jsx
index 24d71cfeff..9dc4b2ee88 100755
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/container.jsx
@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import Auth from '/imports/ui/services/auth';
+import Service from '/imports/ui/components/actions-bar/service';
 import UserOptions from './component';
 
 
@@ -10,6 +11,9 @@ const propTypes = {
   muteAllExceptPresenter: PropTypes.func.isRequired,
   setEmojiStatus: PropTypes.func.isRequired,
   meeting: PropTypes.shape({}).isRequired,
+  currentUser: PropTypes.shape({
+    isModerator: PropTypes.bool.isRequired,
+  }).isRequired,
 };
 
 export default class UserOptionsContainer extends PureComponent {
@@ -59,6 +63,9 @@ export default class UserOptionsContainer extends PureComponent {
             toggleMuteAllUsersExceptPresenter={this.muteAllUsersExceptPresenter}
             toggleStatus={this.handleClearStatus}
             isMeetingMuted={meetingMuted}
+            createBreakoutRoom={Service.createBreakoutRoom}
+            meetingName={Service.meetingName()}
+            users={Service.users()}
           />) : null
     );
   }

From 484403f4c1dddcdadf65a6e86865e0733a413dd9 Mon Sep 17 00:00:00 2001
From: KDSBrowne <kert.browne85@gmail.com>
Date: Thu, 10 Jan 2019 18:51:19 +0000
Subject: [PATCH 2/6] fix console error for array elements missing keys

---
 .../create-breakout-room/component.jsx            | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx
index a10f95fd32..67b63837b8 100644
--- a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx
@@ -116,6 +116,10 @@ class BreakoutRoom extends Component {
       preventClosing: true,
       valid: true,
     };
+
+    this.breakoutFormId = _.uniqueId('breakout-form-');
+    this.freeJoinId = _.uniqueId('free-join-check-');
+    this.btnLevelId = _.uniqueId('btn-set-level-');
   }
 
   componentDidMount() {
@@ -208,7 +212,7 @@ class BreakoutRoom extends Component {
 
   changeUserRoom(userId, room) {
     const { users } = this.state;
-    
+
     const idxUser = users.findIndex(user => user.userId === userId);
     users[idxUser].room = room;
     this.setState({ users });
@@ -251,7 +255,7 @@ class BreakoutRoom extends Component {
     };
 
     return (
-      <div className={styles.boxContainer}>
+      <div className={styles.boxContainer} key="rooms-grid-">
         <label htmlFor="BreakoutRoom" className={!valid ? styles.changeToWarn : null}>
           <p
             className={styles.freeJoinLabel}
@@ -277,7 +281,7 @@ class BreakoutRoom extends Component {
               <div className={styles.breakoutBox} onDrop={drop(value)} onDragOver={allowDrop}>
                 {this.renderUserItemByRoom(value)}
               </div>
-             </label>
+            </label>
           ))
         }
       </div>
@@ -291,7 +295,7 @@ class BreakoutRoom extends Component {
       durationTime,
     } = this.state;
     return (
-      <div className={styles.breakoutSettings}>
+      <div className={styles.breakoutSettings} key={this.breakoutFormId}>
         <label htmlFor="numberOfRooms">
           <p className={styles.labelText}>{intl.formatMessage(intlMessages.numberOfRooms)}</p>
           <select
@@ -366,7 +370,7 @@ class BreakoutRoom extends Component {
     const { intl } = this.props;
     const { freeJoin } = this.state;
     return (
-      <label htmlFor="freeJoinCheckbox" className={styles.freeJoinLabel}>
+      <label htmlFor="freeJoinCheckbox" className={styles.freeJoinLabel} key={this.freeJoinId}>
         <input
           type="checkbox"
           className={styles.freeJoinCheckbox}
@@ -478,6 +482,7 @@ class BreakoutRoom extends Component {
         size="lg"
         label={label}
         onClick={() => this.setState({ formFillLevel: level })}
+        key={this.btnLevelId}
       />
     );
   }

From d90bf00414225763d7c1bfdedfad3054d545434c Mon Sep 17 00:00:00 2001
From: KDSBrowne <kert.browne85@gmail.com>
Date: Fri, 11 Jan 2019 21:16:37 +0000
Subject: [PATCH 3/6] when breakout rooms started hide create menu option

---
 .../user-options/component.jsx                | 112 +++++++++---------
 .../user-options/container.jsx                |  79 ++++--------
 2 files changed, 83 insertions(+), 108 deletions(-)

diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/component.jsx b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/component.jsx
index 0258ee61a4..ff7d1bffc3 100755
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/component.jsx
@@ -25,6 +25,8 @@ const propTypes = {
   users: PropTypes.arrayOf(Object).isRequired,
   meetingName: PropTypes.string.isRequired,
   createBreakoutRoom: PropTypes.func.isRequired,
+  meetingIsBreakout: PropTypes.bool.isRequired,
+  hasBreakoutRoom: PropTypes.bool.isRequired,
 };
 
 const intlMessages = defineMessages({
@@ -102,59 +104,6 @@ class UserOptions extends PureComponent {
     this.handleCreateBreakoutRoomClick = this.handleCreateBreakoutRoomClick.bind(this);
   }
 
-  componentWillMount() {
-    const {
-      intl,
-      isMeetingMuted,
-      mountModal,
-      toggleStatus,
-      toggleMuteAllUsers,
-      toggleMuteAllUsersExceptPresenter,
-    } = this.props;
-
-    this.menuItems = _.compact([
-      (<DropdownListItem
-        key={this.clearStatusId}
-        icon="clear_status"
-        label={intl.formatMessage(intlMessages.clearAllLabel)}
-        description={intl.formatMessage(intlMessages.clearAllDesc)}
-        onClick={toggleStatus}
-      />),
-      (<DropdownListItem
-        key={this.muteAllId}
-        icon="mute"
-        label={intl.formatMessage(intlMessages.muteAllLabel)}
-        description={intl.formatMessage(intlMessages.muteAllDesc)}
-        onClick={toggleMuteAllUsers}
-      />),
-      (<DropdownListItem
-        key={this.muteId}
-        icon="mute"
-        label={intl.formatMessage(intlMessages.muteAllExceptPresenterLabel)}
-        description={intl.formatMessage(intlMessages.muteAllExceptPresenterDesc)}
-        onClick={toggleMuteAllUsersExceptPresenter}
-      />),
-      (<DropdownListItem
-        key={this.lockId}
-        icon="lock"
-        label={intl.formatMessage(intlMessages.lockViewersLabel)}
-        description={intl.formatMessage(intlMessages.lockViewersDesc)}
-        onClick={() => mountModal(<LockViewersContainer />)}
-      />),
-      (<DropdownListItem
-        key={this.createBreakoutId}
-        icon="rooms"
-        label={intl.formatMessage(intlMessages.createBreakoutRoom)}
-        description={intl.formatMessage(intlMessages.createBreakoutRoomDesc)}
-        onClick={() => this.handleCreateBreakoutRoomClick()}
-      />),
-    ]);
-
-    if (isMeetingMuted) {
-      this.alterMenu();
-    }
-  }
-
   componentDidUpdate(prevProps) {
     const { isMeetingMuted } = this.props;
     if (prevProps.isMeetingMuted !== isMeetingMuted) {
@@ -230,8 +179,63 @@ class UserOptions extends PureComponent {
   }
 
   render() {
-    const { intl } = this.props;
     const { isUserOptionsOpen } = this.state;
+    const {
+      intl,
+      isMeetingMuted,
+      mountModal,
+      toggleStatus,
+      toggleMuteAllUsers,
+      toggleMuteAllUsersExceptPresenter,
+      meetingIsBreakout,
+      hasBreakoutRoom,
+    } = this.props;
+
+    this.menuItems = _.compact([
+      (<DropdownListItem
+        key={this.clearStatusId}
+        icon="clear_status"
+        label={intl.formatMessage(intlMessages.clearAllLabel)}
+        description={intl.formatMessage(intlMessages.clearAllDesc)}
+        onClick={toggleStatus}
+      />),
+      (<DropdownListItem
+        key={this.muteAllId}
+        icon="mute"
+        label={intl.formatMessage(intlMessages.muteAllLabel)}
+        description={intl.formatMessage(intlMessages.muteAllDesc)}
+        onClick={toggleMuteAllUsers}
+      />),
+      (<DropdownListItem
+        key={this.muteId}
+        icon="mute"
+        label={intl.formatMessage(intlMessages.muteAllExceptPresenterLabel)}
+        description={intl.formatMessage(intlMessages.muteAllExceptPresenterDesc)}
+        onClick={toggleMuteAllUsersExceptPresenter}
+      />),
+      (<DropdownListItem
+        key={this.lockId}
+        icon="lock"
+        label={intl.formatMessage(intlMessages.lockViewersLabel)}
+        description={intl.formatMessage(intlMessages.lockViewersDesc)}
+        onClick={() => mountModal(<LockViewersContainer />)}
+      />),
+      (!meetingIsBreakout && !hasBreakoutRoom
+        ? (
+          <DropdownListItem
+            key={this.createBreakoutId}
+            icon="rooms"
+            label={intl.formatMessage(intlMessages.createBreakoutRoom)}
+            description={intl.formatMessage(intlMessages.createBreakoutRoomDesc)}
+            onClick={() => this.handleCreateBreakoutRoomClick()}
+          />
+        ) : null
+      ),
+    ]);
+
+    if (isMeetingMuted) {
+      this.alterMenu();
+    }
 
     return (
       <Dropdown
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/container.jsx b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/container.jsx
index 9dc4b2ee88..3981361e6f 100755
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/container.jsx
@@ -1,10 +1,10 @@
-import React, { PureComponent } from 'react';
+import { withTracker } from 'meteor/react-meteor-data';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Auth from '/imports/ui/services/auth';
 import Service from '/imports/ui/components/actions-bar/service';
 import UserOptions from './component';
 
-
 const propTypes = {
   users: PropTypes.arrayOf(Object).isRequired,
   muteAllUsers: PropTypes.func.isRequired,
@@ -16,59 +16,30 @@ const propTypes = {
   }).isRequired,
 };
 
-export default class UserOptionsContainer extends PureComponent {
-  constructor(props) {
-    super(props);
+const UserOptionsContainer = props => <UserOptions {...props} />;
 
-    const { meeting } = this.props;
+export default withTracker((props) => {
+  const {
+    meeting,
+    users,
+    setEmojiStatus,
+    muteAllExceptPresenter,
+    muteAllUsers,
+  } = props;
 
-    this.state = {
-      meetingMuted: meeting.voiceProp.muteOnStart,
-    };
-
-    this.muteMeeting = this.muteMeeting.bind(this);
-    this.muteAllUsersExceptPresenter = this.muteAllUsersExceptPresenter.bind(this);
-    this.handleClearStatus = this.handleClearStatus.bind(this);
-  }
-
-  muteMeeting() {
-    const { muteAllUsers } = this.props;
-    muteAllUsers(Auth.userID);
-  }
-
-  muteAllUsersExceptPresenter() {
-    const { muteAllExceptPresenter } = this.props;
-    muteAllExceptPresenter(Auth.userID);
-  }
-
-  handleClearStatus() {
-    const { users, setEmojiStatus } = this.props;
-
-    users.forEach((id) => {
-      setEmojiStatus(id, 'none');
-    });
-  }
-
-  render() {
-    const { currentUser } = this.props;
-    const currentUserIsModerator = currentUser.isModerator;
-
-    const { meetingMuted } = this.state;
-
-    return (
-      currentUserIsModerator
-        ? (
-          <UserOptions
-            toggleMuteAllUsers={this.muteMeeting}
-            toggleMuteAllUsersExceptPresenter={this.muteAllUsersExceptPresenter}
-            toggleStatus={this.handleClearStatus}
-            isMeetingMuted={meetingMuted}
-            createBreakoutRoom={Service.createBreakoutRoom}
-            meetingName={Service.meetingName()}
-            users={Service.users()}
-          />) : null
-    );
-  }
-}
+  return {
+    toggleMuteAllUsers: () => muteAllUsers(Auth.userID),
+    toggleMuteAllUsersExceptPresenter: () => muteAllExceptPresenter(Auth.userID),
+    toggleStatus: () => users.forEach(id => setEmojiStatus(id, 'none')),
+    isMeetingMuted: meeting.voiceProp.muteOnStart,
+    isUserPresenter: Service.isUserPresenter(),
+    isUserModerator: Service.isUserModerator(),
+    createBreakoutRoom: Service.createBreakoutRoom,
+    meetingIsBreakout: Service.meetingIsBreakout(),
+    hasBreakoutRoom: Service.hasBreakoutRoom(),
+    meetingName: Service.meetingName(),
+    users: Service.users(),
+  };
+})(UserOptionsContainer);
 
 UserOptionsContainer.propTypes = propTypes;

From 842507e069f5e28232719b14b8c30ef703a0cf2b Mon Sep 17 00:00:00 2001
From: KDSBrowne <kert.browne85@gmail.com>
Date: Mon, 14 Jan 2019 16:20:18 +0000
Subject: [PATCH 4/6] remove unnecessary function in user-options container

---
 .../user-participants/user-options/container.jsx         | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/container.jsx b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/container.jsx
index 3981361e6f..f7d261bb3a 100755
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/container.jsx
@@ -1,5 +1,4 @@
 import { withTracker } from 'meteor/react-meteor-data';
-import React from 'react';
 import PropTypes from 'prop-types';
 import Auth from '/imports/ui/services/auth';
 import Service from '/imports/ui/components/actions-bar/service';
@@ -16,9 +15,7 @@ const propTypes = {
   }).isRequired,
 };
 
-const UserOptionsContainer = props => <UserOptions {...props} />;
-
-export default withTracker((props) => {
+const UserOptionsContainer = withTracker((props) => {
   const {
     meeting,
     users,
@@ -40,6 +37,8 @@ export default withTracker((props) => {
     meetingName: Service.meetingName(),
     users: Service.users(),
   };
-})(UserOptionsContainer);
+})(UserOptions);
 
 UserOptionsContainer.propTypes = propTypes;
+
+export default UserOptionsContainer;

From 063035805050350df2ff84f3f2e81eed55fa7d8b Mon Sep 17 00:00:00 2001
From: KDSBrowne <kert.browne85@gmail.com>
Date: Wed, 16 Jan 2019 22:58:22 +0000
Subject: [PATCH 5/6] fix console errors / add breakout invitation to
 user-options

---
 .../user-options/component.jsx                | 51 +++++++++++++++++--
 .../user-options/container.jsx                |  3 ++
 2 files changed, 49 insertions(+), 5 deletions(-)

diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/component.jsx b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/component.jsx
index ff7d1bffc3..e7eb434d7e 100755
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/component.jsx
@@ -82,6 +82,10 @@ const intlMessages = defineMessages({
     id: 'app.actionsBar.actionsDropdown.createBreakoutRoomDesc',
     description: 'Description of create breakout room option',
   },
+  invitationItem: {
+    id: 'app.invitation.title',
+    description: 'invitation to breakout title',
+  },
 });
 
 class UserOptions extends PureComponent {
@@ -102,6 +106,8 @@ class UserOptions extends PureComponent {
     this.onActionsHide = this.onActionsHide.bind(this);
     this.alterMenu = this.alterMenu.bind(this);
     this.handleCreateBreakoutRoomClick = this.handleCreateBreakoutRoomClick.bind(this);
+    this.onCreateBreakouts = this.onCreateBreakouts.bind(this);
+    this.onInvitationUsers = this.onInvitationUsers.bind(this);
   }
 
   componentDidUpdate(prevProps) {
@@ -123,19 +129,36 @@ class UserOptions extends PureComponent {
     });
   }
 
-  handleCreateBreakoutRoomClick() {
+  onCreateBreakouts() {
+    return this.handleCreateBreakoutRoomClick(false);
+  }
+
+  onInvitationUsers() {
+    return this.handleCreateBreakoutRoomClick(true);
+  }
+
+  handleCreateBreakoutRoomClick(isInvitation) {
     const {
       createBreakoutRoom,
       mountModal,
       meetingName,
       users,
+      getUsersNotAssigned,
+      getBreakouts,
+      sendInvitation,
     } = this.props;
 
     mountModal(
       <BreakoutRoom
-        createBreakoutRoom={createBreakoutRoom}
-        meetingName={meetingName}
-        users={users}
+        {...{
+          createBreakoutRoom,
+          meetingName,
+          users,
+          getUsersNotAssigned,
+          isInvitation,
+          getBreakouts,
+          sendInvitation,
+        }}
       />,
     );
   }
@@ -189,8 +212,16 @@ class UserOptions extends PureComponent {
       toggleMuteAllUsersExceptPresenter,
       meetingIsBreakout,
       hasBreakoutRoom,
+      getUsersNotAssigned,
+      isUserModerator,
+      users,
     } = this.props;
 
+    const canInviteUsers = isUserModerator
+    && !meetingIsBreakout
+    && hasBreakoutRoom
+    && getUsersNotAssigned(users).length;
+
     this.menuItems = _.compact([
       (<DropdownListItem
         key={this.clearStatusId}
@@ -220,7 +251,7 @@ class UserOptions extends PureComponent {
         description={intl.formatMessage(intlMessages.lockViewersDesc)}
         onClick={() => mountModal(<LockViewersContainer />)}
       />),
-      (!meetingIsBreakout && !hasBreakoutRoom
+      (!meetingIsBreakout && !hasBreakoutRoom && isUserModerator
         ? (
           <DropdownListItem
             key={this.createBreakoutId}
@@ -231,6 +262,16 @@ class UserOptions extends PureComponent {
           />
         ) : null
       ),
+      (canInviteUsers
+        ? (
+          <DropdownListItem
+            icon="rooms"
+            label={intl.formatMessage(intlMessages.invitationItem)}
+            key={this.createBreakoutRoomId}
+            onClick={this.onInvitationUsers}
+          />
+        )
+        : null),
     ]);
 
     if (isMeetingMuted) {
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/container.jsx b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/container.jsx
index f7d261bb3a..472655c338 100755
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/container.jsx
@@ -36,6 +36,9 @@ const UserOptionsContainer = withTracker((props) => {
     hasBreakoutRoom: Service.hasBreakoutRoom(),
     meetingName: Service.meetingName(),
     users: Service.users(),
+    getBreakouts: Service.getBreakouts,
+    sendInvitation: Service.sendInvitation,
+    getUsersNotAssigned: Service.getUsersNotAssigned,
   };
 })(UserOptions);
 

From 03dbc4de147d5ad5523e2e87a4d89700309a7bcb Mon Sep 17 00:00:00 2001
From: KDSBrowne <kert.browne85@gmail.com>
Date: Mon, 21 Jan 2019 16:53:13 +0000
Subject: [PATCH 6/6] ensure unique key for dropdown element

---
 .../actions-dropdown/component.jsx            | 12 +++++----
 .../user-options/component.jsx                | 25 +++++++++++++------
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/actions-dropdown/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/actions-dropdown/component.jsx
index 86012094b4..058cd16195 100755
--- a/bigbluebutton-html5/imports/ui/components/actions-bar/actions-dropdown/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/actions-bar/actions-dropdown/component.jsx
@@ -138,8 +138,6 @@ class ActionsDropdown extends Component {
       pollBtnDesc,
       presentationLabel,
       presentationDesc,
-      startRecording,
-      stopRecording,
       createBreakoutRoom,
       createBreakoutRoomDesc,
       invitationItem,
@@ -151,6 +149,10 @@ class ActionsDropdown extends Component {
       formatMessage,
     } = intl;
 
+    const canCreateBreakout = isUserModerator
+    && !meetingIsBreakout
+    && !hasBreakoutRoom;
+
     const canInviteUsers = isUserModerator
     && !meetingIsBreakout
     && hasBreakoutRoom
@@ -191,12 +193,12 @@ class ActionsDropdown extends Component {
           />
         )
         : null),
-      (isUserModerator && !meetingIsBreakout && !hasBreakoutRoom
+      (canCreateBreakout
         ? (
           <DropdownListItem
             icon="rooms"
-            label={intl.formatMessage(intlMessages.createBreakoutRoom)}
-            description={intl.formatMessage(intlMessages.createBreakoutRoomDesc)}
+            label={formatMessage(createBreakoutRoom)}
+            description={formatMessage(createBreakoutRoomDesc)}
             key={this.createBreakoutRoomId}
             onClick={this.onCreateBreakouts}
           />
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/component.jsx b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/component.jsx
index e7eb434d7e..26229f2cf0 100755
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/component.jsx
@@ -108,6 +108,7 @@ class UserOptions extends PureComponent {
     this.handleCreateBreakoutRoomClick = this.handleCreateBreakoutRoomClick.bind(this);
     this.onCreateBreakouts = this.onCreateBreakouts.bind(this);
     this.onInvitationUsers = this.onInvitationUsers.bind(this);
+    this.renderMenuItems = this.renderMenuItems.bind(this);
   }
 
   componentDidUpdate(prevProps) {
@@ -148,7 +149,7 @@ class UserOptions extends PureComponent {
       sendInvitation,
     } = this.props;
 
-    mountModal(
+    return mountModal(
       <BreakoutRoom
         {...{
           createBreakoutRoom,
@@ -201,8 +202,7 @@ class UserOptions extends PureComponent {
     }
   }
 
-  render() {
-    const { isUserOptionsOpen } = this.state;
+  renderMenuItems() {
     const {
       intl,
       isMeetingMuted,
@@ -217,6 +217,10 @@ class UserOptions extends PureComponent {
       users,
     } = this.props;
 
+    const canCreateBreakout = isUserModerator
+    && !meetingIsBreakout
+    && !hasBreakoutRoom;
+
     const canInviteUsers = isUserModerator
     && !meetingIsBreakout
     && hasBreakoutRoom
@@ -251,14 +255,14 @@ class UserOptions extends PureComponent {
         description={intl.formatMessage(intlMessages.lockViewersDesc)}
         onClick={() => mountModal(<LockViewersContainer />)}
       />),
-      (!meetingIsBreakout && !hasBreakoutRoom && isUserModerator
+      (canCreateBreakout
         ? (
           <DropdownListItem
             key={this.createBreakoutId}
             icon="rooms"
             label={intl.formatMessage(intlMessages.createBreakoutRoom)}
             description={intl.formatMessage(intlMessages.createBreakoutRoomDesc)}
-            onClick={() => this.handleCreateBreakoutRoomClick()}
+            onClick={this.onCreateBreakouts}
           />
         ) : null
       ),
@@ -267,7 +271,7 @@ class UserOptions extends PureComponent {
           <DropdownListItem
             icon="rooms"
             label={intl.formatMessage(intlMessages.invitationItem)}
-            key={this.createBreakoutRoomId}
+            key={this.createBreakoutId}
             onClick={this.onInvitationUsers}
           />
         )
@@ -278,6 +282,13 @@ class UserOptions extends PureComponent {
       this.alterMenu();
     }
 
+    return this.menuItems;
+  }
+
+  render() {
+    const { isUserOptionsOpen } = this.state;
+    const { intl } = this.props;
+
     return (
       <Dropdown
         ref={(ref) => { this.dropdown = ref; }}
@@ -305,7 +316,7 @@ class UserOptions extends PureComponent {
         >
           <DropdownList>
             {
-              this.menuItems
+              this.renderMenuItems()
             }
           </DropdownList>
         </DropdownContent>