Bring flair into the new settings

Makes the flair options in old settings look broken (cosmetic issues), but it's fine because we're ripping that out in due time.

src/components/views/settings/tabs/GeneralSettingsTab.js

@@ -20,8 +20,16 @@ import MatrixClientPeg from "../../../../MatrixClientPeg";
 import Field from "../../elements/Field";
 import AccessibleButton from "../../elements/AccessibleButton";
 import classNames from 'classnames';
+import GroupUserSettings from "../../groups/GroupUserSettings";
+import PropTypes from "prop-types";
+import {MatrixClient} from "matrix-js-sdk";
+import { DragDropContext } from 'react-beautiful-dnd';
 
 export default class GeneralSettingsTab extends React.Component {
+    static childContextTypes = {
+        matrixClient: PropTypes.instanceOf(MatrixClient),
+    };
+
     constructor() {
         super();
 
@@ -40,6 +48,12 @@ export default class GeneralSettingsTab extends React.Component {
         };
     }
 
+    getChildContext() {
+        return {
+            matrixClient: MatrixClientPeg.get(),
+        };
+    }
+
     _uploadAvatar = (e) => {
         e.stopPropagation();
         e.preventDefault();
@@ -149,14 +163,19 @@ export default class GeneralSettingsTab extends React.Component {
                                   disabled={!this.state.enableProfileSave}>
                     {_t("Save")}
                 </AccessibleButton>
-                <div>FLAIR</div>
             </form>
         );
 
+        // HACK/TODO: Using DragDropContext feels wrong, but we need it.
         return (
             <div className="mx_SettingsTab_section">
                 <span className="mx_SettingsTab_subheading">{_t("Profile")}</span>
                 {form}
+
+                <span className="mx_SettingsTab_subheading">{_t("Flair")}</span>
+                <DragDropContext>
+                    <GroupUserSettings />
+                </DragDropContext>
             </div>
         );
     }