Merge pull request #4832 from KDSBrowne/x.0.3-fix-console-warnings

Fix Invalid prop 'children[2]' supplied to `DropdownList`

bigbluebutton-html5/imports/ui/components/actions-bar/actions-dropdown/component.jsx

@@ -1,14 +1,12 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl, intlShape } from 'react-intl';
-
 import Button from '/imports/ui/components/button/component';
 import Dropdown from '/imports/ui/components/dropdown/component';
 import DropdownTrigger from '/imports/ui/components/dropdown/trigger/component';
 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 PresentationUploaderContainer from '/imports/ui/components/presentation/presentation-uploader/container';
 import { withModalMounter } from '/imports/ui/components/modal/service';
 import { styles } from '../styles';
@@ -102,7 +100,7 @@ class ActionsDropdown extends Component {
               description={intl.formatMessage(intlMessages.presentationDesc)}
               onClick={this.handlePresentationClick}
             />
-           <DropdownListItem
+            <DropdownListItem
               icon="desktop"
               label={intl.formatMessage(intlMessages.desktopShareLabel)}
               description={intl.formatMessage(intlMessages.desktopShareDesc)}

bigbluebutton-html5/imports/ui/components/chat/chat-dropdown/component.jsx

@@ -127,7 +127,9 @@ class ChatDropdown extends Component {
             circle
             hideLabel
             color="primary"
+            label={intl.formatMessage(intlMessages.options)}
             aria-label={intl.formatMessage(intlMessages.options)}
+            onClick={() => null}
           />
         </DropdownTrigger>
         <DropdownContent placement="bottom right">

bigbluebutton-html5/imports/ui/components/chat/component.jsx

@@ -66,6 +66,7 @@ const Chat = (props) => {
                 hideLabel
                 onClick={() => actions.handleClosePrivateChat(chatID)}
                 aria-label={intl.formatMessage(intlMessages.closeChatLabel, { 0: title })}
+                label={intl.formatMessage(intlMessages.closeChatLabel, { 0: title })}
               />
             </Link> :
             <ChatDropdown />
@@ -101,17 +102,13 @@ const propTypes = {
   chatID: PropTypes.string.isRequired,
   chatName: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
-  messages: PropTypes.arrayOf(
-    PropTypes.objectOf(
-      PropTypes.oneOfType([
-        PropTypes.array,
-        PropTypes.string,
-        PropTypes.number,
-        PropTypes.object,
-      ]),
-    ).isRequired,
-  ).isRequired,
-  scrollPosition: PropTypes.number.isRequired,
+  messages: PropTypes.arrayOf(PropTypes.objectOf(PropTypes.oneOfType([
+    PropTypes.array,
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.object,
+  ])).isRequired).isRequired,
+  scrollPosition: PropTypes.number,
   hasUnreadMessages: PropTypes.bool.isRequired,
   lastReadMessageTime: PropTypes.number.isRequired,
   partnerIsLoggedOut: PropTypes.bool.isRequired,
@@ -129,4 +126,9 @@ const propTypes = {
   }).isRequired,
 };
 
+const defaultProps = {
+  scrollPosition: 0,
+};
+
 Chat.propTypes = propTypes;
+Chat.defaultProps = defaultProps;

bigbluebutton-html5/imports/ui/components/dropdown/list/component.jsx

@@ -6,6 +6,7 @@ import { styles } from './styles';
 import ListItem from './item/component';
 import ListSeparator from './separator/component';
 import ListTitle from './title/component';
+import UserActions from '../../user-list/user-list-content/user-participants/user-list-item/user-action/component';
 
 const propTypes = {
  /*  We should recheck this proptype, sometimes we need to create an container and send to dropdown,
@@ -14,11 +15,10 @@ const propTypes = {
   children: PropTypes.arrayOf((propValue, key, componentName, location, propFullName) => {
     if (propValue[key].type !== ListItem &&
       propValue[key].type !== ListSeparator &&
-      propValue[key].type !== ListTitle) {
-      return new Error(
-        `Invalid prop \`${propFullName}\` supplied to` +
-        ` \`${componentName}\`. Validation failed.`,
-      );
+      propValue[key].type !== ListTitle &&
+      propValue[key].type !== UserActions) {
+      return new Error(`Invalid prop \`${propFullName}\` supplied to` +
+        ` \`${componentName}\`. Validation failed.`);
     }
     return true;
   }).isRequired,

bigbluebutton-html5/imports/ui/components/logout-confirmation/component.jsx

@@ -1,14 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router';
-import { defineMessages, injectIntl, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import Button from '/imports/ui/components/button/component';
 import Modal from '/imports/ui/components/modal/fullscreen/component';
 import { styles } from './styles';
 
 const propTypes = {
   handleEndMeeting: PropTypes.func.isRequired,
-  intl: PropTypes.shape(intlShape).isRequired,
+  intl: PropTypes.shape({
+    formatMessage: PropTypes.func.isRequired,
+  }).isRequired,
   router: PropTypes.object.isRequired,
   showEndMeeting: PropTypes.bool.isRequired,
 };

bigbluebutton-html5/imports/ui/components/user-list/container.jsx

@@ -8,7 +8,6 @@ import UserList from './component';
 
 const propTypes = {
   openChats: PropTypes.arrayOf(String).isRequired,
-  openChat: PropTypes.string.isRequired,
   users: PropTypes.arrayOf(Object).isRequired,
   currentUser: PropTypes.shape({}).isRequired,
   meeting: PropTypes.shape({}).isRequired,
@@ -23,12 +22,6 @@ const propTypes = {
   toggleVoice: PropTypes.func.isRequired,
   changeRole: PropTypes.func.isRequired,
   roving: PropTypes.func.isRequired,
-  userActions: PropTypes.func.isRequired,
-  children: PropTypes.Object,
-};
-
-const defaultProps = {
-  children: {},
 };
 
 const UserListContainer = (props) => {
@@ -36,10 +29,7 @@ const UserListContainer = (props) => {
     users,
     currentUser,
     openChats,
-    openChat,
-    userActions,
     isBreakoutRoom,
-    children,
     meeting,
     getAvailableActions,
     normalizeEmojiName,
@@ -59,35 +49,28 @@ const UserListContainer = (props) => {
       meeting={meeting}
       currentUser={currentUser}
       openChats={openChats}
-      openChat={openChat}
       isBreakoutRoom={isBreakoutRoom}
       setEmojiStatus={setEmojiStatus}
       assignPresenter={assignPresenter}
       kickUser={kickUser}
       toggleVoice={toggleVoice}
       changeRole={changeRole}
-      userActions={userActions}
       getAvailableActions={getAvailableActions}
       normalizeEmojiName={normalizeEmojiName}
       isMeetingLocked={isMeetingLocked}
       isPublicChat={isPublicChat}
       roving={roving}
-    >
-      {children}
-    </UserList>
+    />
   );
 };
 
 UserListContainer.propTypes = propTypes;
-UserListContainer.defaultProps = defaultProps;
 
 export default withTracker(({ params }) => ({
   users: Service.getUsers(),
   meeting: Meetings.findOne({}),
   currentUser: Service.getCurrentUser(),
   openChats: Service.getOpenChats(params.chatID),
-  openChat: params.chatID,
-  userActions: Service.userActions,
   isBreakoutRoom: meetingIsBreakout(),
   getAvailableActions: Service.getAvailableActions,
   normalizeEmojiName: Service.normalizeEmojiName,

bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-action/component.jsx

@@ -9,21 +9,20 @@ const propTypes = {
   options: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
 };
 
-const UserActions = (props) => {
-  const { key, icon, label, handler, options } = props;
+export default class UserActions extends React.PureComponent {
+  render() {
+    const { key, icon, label, handler, options } = this.props;
 
-  const userAction = (
-    <DropdownListItem
-      key={key}
-      icon={icon}
-      label={label}
-      defaultMessage={label}
-      onClick={() => handler.call(this, ...options)}
-    />
-  );
-
-  return userAction;
-};
+    return (
+      <DropdownListItem
+        key={key}
+        icon={icon}
+        label={label}
+        defaultMessage={label}
+        onClick={() => handler.call(this, ...options)}
+      />
+    );
+  }
+}
 
 UserActions.propTypes = propTypes;
-export default UserActions;

bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-list-content/component.jsx

@@ -84,6 +84,11 @@ class UserListContent extends Component {
     this.getDropdownMenuParent = this.getDropdownMenuParent.bind(this);
   }
 
+  componentWillMount() {
+    this.title = _.uniqueId('dropdown-title-');
+    this.seperator = _.uniqueId('action-separator-');
+  }
+
   componentDidUpdate() {
     this.checkDropdownDirection();
   }
@@ -281,13 +286,14 @@ class UserListContent extends Component {
           >
             {
               [
-                (<DropdownListTitle
-                  description={intl.formatMessage(messages.menuTitleContext)}
-                  key={_.uniqueId('dropdown-list-title')}
-                >
-                  {user.name}
-                </DropdownListTitle>),
-                (<DropdownListSeparator key={_.uniqueId('action-separator')} />),
+                (
+                  <DropdownListTitle
+                    description={intl.formatMessage(messages.menuTitleContext)}
+                    key={this.title}
+                  >
+                    {user.name}
+                  </DropdownListTitle>),
+                (<DropdownListSeparator key={this.seperator} />),
               ].concat(actions)
             }
           </DropdownList>