Implement UI for editing related groups of a room

(using the new EditableItemList)

src/components/views/room_settings/RelatedGroupSettings.js

@@ -0,0 +1,130 @@
+/*
+Copyright 2017 New Vector Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+// import Promise from 'bluebird';
+import React from 'react';
+import {MatrixEvent, MatrixClient} from 'matrix-js-sdk';
+// var ObjectUtils = require("../../../ObjectUtils");
+// var MatrixClientPeg = require('../../../MatrixClientPeg');
+import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+import Modal from '../../../Modal';
+
+const GROUP_ID_REGEX = /\+\S+\:\S+/;
+
+module.exports = React.createClass({
+    displayName: 'RelatedGroupSettings',
+
+    propTypes: {
+        roomId: React.PropTypes.string.isRequired,
+        canSetRelatedRooms: React.PropTypes.bool.isRequired,
+        relatedGroupsEvent: React.PropTypes.instanceOf(MatrixEvent),
+    },
+
+    contextTypes: {
+        matrixClient: React.PropTypes.instanceOf(MatrixClient),
+    },
+
+    getDefaultProps: function() {
+        return {
+            canSetRelatedRooms: false,
+        };
+    },
+
+    getInitialState: function() {
+        return {
+            newGroupsList: this.props.relatedGroupsEvent ?
+                (this.props.relatedGroupsEvent.getContent().groups || []) : [],
+            newGroupId: null,
+        };
+    },
+
+    saveSettings: function() {
+        return this.context.matrixClient.sendStateEvent(
+            this.props.roomId,
+            'm.room.related_groups',
+            {
+                groups: this.state.newGroupsList,
+            },
+            '',
+        );
+    },
+
+    validateGroupId: function(groupId) {
+        const localDomain = this.context.matrixClient.getDomain();
+        if (!GROUP_ID_REGEX.test(groupId) || !groupId.endsWith(localDomain)) {
+            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            Modal.createTrackedDialog('Invalid related group ID', '', ErrorDialog, {
+                title: _t('Invalid group ID'),
+                description: _t('\'%(groupId)s\' is not a valid group ID', { groupId }),
+            });
+            return false;
+        }
+        return true;
+    },
+
+    onNewGroupChanged: function(newGroupId) {
+        this.setState({ newGroupId });
+    },
+
+    onGroupAdded: function(groupId) {
+        if (groupId.length === 0 || !this.validateGroupId(groupId)) {
+            return;
+        }
+        this.setState({
+            newGroupsList: this.state.newGroupsList.concat([groupId]),
+            newGroupId: '',
+        });
+    },
+
+    onGroupEdited: function(groupId, index) {
+        if (groupId.length === 0 || !this.validateGroupId(groupId)) {
+            return;
+        }
+        this.setState({
+            newGroupsList: Object.assign(this.state.newGroupsList, {[index]: groupId}),
+        });
+    },
+
+    onGroupDeleted: function(index) {
+        const newGroupsList = this.state.newGroupsList.slice();
+        newGroupsList.splice(index, 1),
+        this.setState({ newGroupsList });
+    },
+
+    render: function() {
+        const localDomain = this.context.matrixClient.getDomain();
+        const EditableItemList = sdk.getComponent('elements.EditableItemList');
+        console.info(this.state.newGroupsList);
+        return (<div>
+            <h3>{ _t('Related Groups') }</h3>
+            <EditableItemList
+                items={this.state.newGroupsList}
+                className={"mx_RelatedGroupSettings"}
+                newItem={this.state.newGroupId}
+                onNewItemChanged={this.onNewGroupChanged}
+                onItemAdded={this.onGroupAdded}
+                onItemEdited={this.onGroupEdited}
+                onItemRemoved={this.onGroupDeleted}
+                itemsLabel={_t('Related groups for this room:')}
+                noItemsLabel={_t('This room has no related groups')}
+                placeholder={_t(
+                    'New group ID (e.g. +foo:%(localDomain)s)', {localDomain},
+                )}
+            />
+        </div>);
+    },
+});

src/components/views/rooms/RoomSettings.js

@@ -287,6 +287,9 @@ module.exports = React.createClass({
             promises.push(ps);
         }
 
+        // related groups
+        promises.push(this.saveRelatedGroups());
+
         // encryption
         p = this.saveEnableEncryption();
         if (!p.isFulfilled()) {
@@ -304,6 +307,11 @@ module.exports = React.createClass({
         return this.refs.alias_settings.saveSettings();
     },
 
+    saveRelatedGroups: function() {
+        if (!this.refs.related_groups) { return Promise.resolve(); }
+        return this.refs.related_groups.saveSettings();
+    },
+
     saveColor: function() {
         if (!this.refs.color_settings) { return Promise.resolve(); }
         return this.refs.color_settings.saveSettings();
@@ -590,6 +598,7 @@ module.exports = React.createClass({
         var AliasSettings = sdk.getComponent("room_settings.AliasSettings");
         var ColorSettings = sdk.getComponent("room_settings.ColorSettings");
         var UrlPreviewSettings = sdk.getComponent("room_settings.UrlPreviewSettings");
+        var RelatedGroupSettings = sdk.getComponent("room_settings.RelatedGroupSettings");
         var EditableText = sdk.getComponent('elements.EditableText');
         var PowerSelector = sdk.getComponent('elements.PowerSelector');
         var Loader = sdk.getComponent("elements.Spinner");
@@ -846,6 +855,11 @@ module.exports = React.createClass({
                     canonicalAliasEvent={this.props.room.currentState.getStateEvents('m.room.canonical_alias', '')}
                     aliasEvents={this.props.room.currentState.getStateEvents('m.room.aliases')} />
 
+                <RelatedGroupSettings ref="related_groups"
+                    roomId={this.props.room.roomId}
+                    canSetRelatedGroups={roomState.mayClientSendStateEvent("m.room.related_groups", cli)}
+                    relatedGroupsEvent={this.props.room.currentState.getStateEvents('m.room.related_groups', '')} />
+
                 <UrlPreviewSettings ref="url_preview_settings" room={this.props.room} />
 
                 <h3>{ _t('Permissions') }</h3>

src/i18n/strings/en_EN.json

@@ -902,5 +902,9 @@
     "Failed to remove room from group": "Failed to remove room from group",
     "Failed to remove '%(roomName)s' from %(groupId)s": "Failed to remove '%(roomName)s' from %(groupId)s",
     "Are you sure you want to remove '%(roomName)s' from %(groupId)s?": "Are you sure you want to remove '%(roomName)s' from %(groupId)s?",
-    "Removing a room from the group will also remove it from the group page.": "Removing a room from the group will also remove it from the group page."
+    "Removing a room from the group will also remove it from the group page.": "Removing a room from the group will also remove it from the group page.",
+    "Related Groups": "Related Groups",
+    "Related groups for this room:": "Related groups for this room:",
+    "This room has no related groups": "This room has no related groups",
+    "New group ID (e.g. +foo:%(localDomain)s)": "New group ID (e.g. +foo:%(localDomain)s)"
 }