Flair settings for rooms

src/components/views/elements/EditableItemList.js

@@ -76,6 +76,7 @@ const EditableItem = React.createClass({
     },
 });
 
+// TODO: Make this use the new Field element
 module.exports = React.createClass({
     displayName: 'EditableItemList',
 

src/components/views/room_settings/RelatedGroupSettings.js

@@ -119,7 +119,6 @@ module.exports = React.createClass({
         const localDomain = this.context.matrixClient.getDomain();
         const EditableItemList = sdk.getComponent('elements.EditableItemList');
         return <div>
-            <h3>{ _t('Flair') }</h3>
             <EditableItemList
                 items={this.state.newGroupsList}
                 className={"mx_RelatedGroupSettings"}

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

@@ -21,20 +21,38 @@ import RoomProfileSettings from "../../room_settings/RoomProfileSettings";
 import MatrixClientPeg from "../../../../MatrixClientPeg";
 import sdk from "../../../../index";
 import AccessibleButton from "../../elements/AccessibleButton";
+import {MatrixClient} from "matrix-js-sdk";
 
 export default class GeneralRoomSettingsTab extends React.Component {
+    static childContextTypes = {
+        matrixClient: PropTypes.instanceOf(MatrixClient),
+    };
+
     static propTypes = {
         roomId: PropTypes.string.isRequired,
     };
 
+    getChildContext() {
+        return {
+            matrixClient: MatrixClientPeg.get(),
+        };
+    }
+
     _saveAliases = (e) => {
         // TODO: Live modification of aliases?
         if (!this.refs.aliasSettings) return;
         this.refs.aliasSettings.saveSettings();
     };
 
+    _saveGroups = (e) => {
+        // TODO: Live modification of aliases?
+        if (!this.refs.flairSettings) return;
+        this.refs.flairSettings.saveSettings();
+    };
+
     render() {
         const AliasSettings = sdk.getComponent("room_settings.AliasSettings");
+        const RelatedGroupSettings = sdk.getComponent("room_settings.RelatedGroupSettings");
 
         const client = MatrixClientPeg.get();
         const room = client.getRoom(this.props.roomId);
@@ -44,6 +62,9 @@ export default class GeneralRoomSettingsTab extends React.Component {
         const canonicalAliasEv = room.currentState.getStateEvents("m.room.canonical_alias", '');
         const aliasEvents = room.currentState.getStateEvents("m.room.aliases");
 
+        const canChangeGroups = room.currentState.mayClientSendStateEvent("m.room.related_groups", client);
+        const groupsEvent = room.currentState.getStateEvents("m.room.related_groups", "");
+
         return (
             <div className="mx_SettingsTab mx_GeneralRoomSettingsTab">
                 <div className="mx_SettingsTab_heading">{_t("General")}</div>
@@ -60,6 +81,16 @@ export default class GeneralRoomSettingsTab extends React.Component {
                         {_t("Save")}
                     </AccessibleButton>
                 </div>
+
+                <span className='mx_SettingsTab_subheading'>{_t("Flair")}</span>
+                <div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
+                    <RelatedGroupSettings ref="flairSettings" roomId={room.roomId}
+                                          canSetRelatedGroups={canChangeGroups}
+                                          relatedGroupsEvent={groupsEvent} />
+                    <AccessibleButton onClick={this._saveGroups} kind='primary'>
+                        {_t("Save")}
+                    </AccessibleButton>
+                </div>
             </div>
         );
     }