ref(settings): convert panel to react

The goal is to reduce usage on atlassian/aui. New components
have been created to display the settings panel. Language
selection will reach into i18n for state whereas moderator
options will keep state in redux.

react/features/settings-menu/components/SettingsMenu.web.js

@@ -0,0 +1,108 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+import { translate } from '../../base/i18n';
+import { getLocalParticipant, PARTICIPANT_ROLE } from '../../base/participants';
+
+import DeviceSelectionButton from './DeviceSelectionButton';
+import LanguageSelectDropdown from './LanguageSelectDropdown';
+import ModeratorCheckboxes from './ModeratorCheckboxes';
+
+/**
+ * Implements a React {@link Component} which various ways to change application
+ * settings.
+ *
+ * @extends Component
+ */
+class SettingsMenu extends Component {
+    /**
+     * {@code SettingsMenu} component's property types.
+     *
+     * @static
+     */
+    static propTypes = {
+        /**
+         * Whether or not the local user is a moderator.
+         */
+        _isModerator: PropTypes.bool,
+
+        /**
+         * Whether or not the button to open device selection should display.
+         */
+        showDeviceSettings: PropTypes.bool,
+
+        /**
+         * Whether or not the dropdown to change the current translated language
+         * should display.
+         */
+        showLanguageSettings: PropTypes.bool,
+
+        /**
+         * Whether or not moderator-only actions that affect the conference
+         * should display.
+         */
+        showModeratorSettings: PropTypes.bool,
+
+        /**
+         * Whether or not menu section should have section titles displayed.
+         */
+        showTitles: PropTypes.bool,
+
+        /**
+         * Invoked to obtain translated strings.
+         */
+        t: PropTypes.func
+    };
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        const {
+            _isModerator,
+            showDeviceSettings,
+            showLanguageSettings,
+            showModeratorSettings,
+            showTitles,
+            t
+        } = this.props;
+
+        return (
+            <div className = 'settings-menu'>
+                <div className = 'title'>
+                    { t('settings.title') }
+                </div>
+                { showLanguageSettings
+                    ? <LanguageSelectDropdown />
+                    : null }
+                { showDeviceSettings
+                    ? <DeviceSelectionButton showTitle = { showTitles } />
+                    : null }
+                { _isModerator && showModeratorSettings
+                    ? <ModeratorCheckboxes showTitle = { showTitles } />
+                    : null }
+            </div>
+        );
+    }
+}
+
+/**
+ * Maps parts of Redux store to component prop types.
+ *
+ * @param {Object} state - Snapshot of Redux store.
+ * @returns {{
+ *      _isModerator: boolean
+ * }}
+ */
+function _mapStateToProps(state) {
+    return {
+        _isModerator:
+            getLocalParticipant(state).role === PARTICIPANT_ROLE.MODERATOR
+    };
+}
+
+export default translate(connect(_mapStateToProps)(SettingsMenu));