Implement leave room button and URL preview settings

src/components/structures/MatrixChat.js

@@ -1054,6 +1054,7 @@ export default React.createClass({
                         modal.close();
                         if (this.state.currentRoomId === roomId) {
                             dis.dispatch({action: 'view_next_room'});
+                            dis.dispatch({action: 'close_room_settings'});
                         }
                     }, (err) => {
                         modal.close();

src/components/views/dialogs/RoomSettingsDialog.js

@@ -44,6 +44,19 @@ export default class RoomSettingsDialog extends React.Component {
         onFinished: PropTypes.func.isRequired,
     };
 
+    componentWillMount(): void {
+        this.dispatcherRef = dis.register(this._onAction);
+    }
+
+    componentWillUnmount(): void {
+        dis.unregister(this.dispatcherRef);
+    }
+
+    _onAction = (payload) => {
+        if (payload.action !== 'close_room_settings') return;
+        this.props.onFinished();
+    };
+
     _getTabs() {
         const tabs = [];
 

src/components/views/room_settings/UrlPreviewSettings.js

@@ -1,7 +1,7 @@
 /*
 Copyright 2016 OpenMarket Ltd
 Copyright 2017 Travis Ralston
-Copyright 2018 New Vector Ltd
+Copyright 2018-2019 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.
@@ -16,12 +16,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {MatrixClient} from "matrix-js-sdk";
 const React = require('react');
 import PropTypes from 'prop-types';
 const sdk = require("../../../index");
 import { _t, _td } from '../../../languageHandler';
 import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
+import dis from "../../../dispatcher";
+import MatrixClientPeg from "../../../MatrixClientPeg";
 
 
 module.exports = React.createClass({
@@ -31,21 +32,16 @@ module.exports = React.createClass({
         room: PropTypes.object,
     },
 
-    contextTypes: {
+    _onClickUserSettings: (e) => {
-        matrixClient: PropTypes.instanceOf(MatrixClient).isRequired,
+        e.preventDefault();
-    },
+        e.stopPropagation();
-
+        dis.dispatch({action: 'view_user_settings'});
-    saveSettings: function() {
-        const promises = [];
-        if (this.refs.urlPreviewsRoom) promises.push(this.refs.urlPreviewsRoom.save());
-        if (this.refs.urlPreviewsSelf) promises.push(this.refs.urlPreviewsSelf.save());
-        return promises;
     },
 
     render: function() {
         const SettingsFlag = sdk.getComponent("elements.SettingsFlag");
         const roomId = this.props.room.roomId;
-        const isEncrypted = this.context.matrixClient.isRoomEncrypted(roomId);
+        const isEncrypted = MatrixClientPeg.get().isRoomEncrypted(roomId);
 
         let previewsForAccount = null;
         let previewsForRoom = null;
@@ -56,13 +52,13 @@ module.exports = React.createClass({
             if (accountEnabled) {
                 previewsForAccount = (
                     _t("You have <a>enabled</a> URL previews by default.", {}, {
-                        'a': (sub)=><a href="#/settings">{ sub }</a>,
+                        'a': (sub)=><a onClick={this._onClickUserSettings} href=''>{ sub }</a>,
                     })
                 );
             } else if (accountEnabled) {
                 previewsForAccount = (
                     _t("You have <a>disabled</a> URL previews by default.", {}, {
-                        'a': (sub)=><a href="#/settings">{ sub }</a>,
+                        'a': (sub)=><a onClick={this._onClickUserSettings} href=''>{ sub }</a>,
                     })
                 );
             }
@@ -73,9 +69,7 @@ module.exports = React.createClass({
                         <SettingsFlag name="urlPreviewsEnabled"
                                       level={SettingLevel.ROOM}
                                       roomId={roomId}
-                                      isExplicit={true}
+                                      isExplicit={true} />
-                                      manualSave={true}
-                                      ref="urlPreviewsRoom" />
                     </label>
                 );
             } else {
@@ -96,20 +90,16 @@ module.exports = React.createClass({
         const previewsForRoomAccount = ( // in an e2ee room we use a special key to enforce per-room opt-in
             <SettingsFlag name={isEncrypted ? 'urlPreviewsEnabled_e2ee' : 'urlPreviewsEnabled'}
                           level={SettingLevel.ROOM_ACCOUNT}
-                          roomId={roomId}
+                          roomId={roomId} />
-                          manualSave={true}
-                          ref="urlPreviewsSelf"
-            />
         );
 
         return (
-            <div className="mx_RoomSettings_toggles">
+            <div>
-                <h3>{ _t("URL Previews") }</h3>
+                <div className='mx_SettingsTab_subsectionText'>
-                <div>
                     { _t('When someone puts a URL in their message, a URL preview can be shown to give more ' +
                         'information about that link such as the title, description, and an image from the website.') }
                 </div>
-                <div>
+                <div className='mx_SettingsTab_subsectionText'>
                     { previewsForAccount }
                 </div>
                 { previewsForRoom }

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

@@ -22,6 +22,8 @@ import MatrixClientPeg from "../../../../MatrixClientPeg";
 import sdk from "../../../../index";
 import AccessibleButton from "../../elements/AccessibleButton";
 import {MatrixClient} from "matrix-js-sdk";
+import dis from "../../../../dispatcher";
+import Modal from "../../../../Modal";
 
 export default class GeneralRoomSettingsTab extends React.Component {
     static childContextTypes = {
@@ -39,20 +41,28 @@ export default class GeneralRoomSettingsTab extends React.Component {
     }
 
     _saveAliases = (e) => {
-        // TODO: Live modification of aliases?
+        // TODO: Live modification?
         if (!this.refs.aliasSettings) return;
         this.refs.aliasSettings.saveSettings();
     };
 
     _saveGroups = (e) => {
-        // TODO: Live modification of aliases?
+        // TODO: Live modification?
         if (!this.refs.flairSettings) return;
         this.refs.flairSettings.saveSettings();
     };
 
+    _onLeaveClick = () => {
+        dis.dispatch({
+            action: 'leave_room',
+            room_id: this.props.roomId,
+        });
+    };
+
     render() {
         const AliasSettings = sdk.getComponent("room_settings.AliasSettings");
         const RelatedGroupSettings = sdk.getComponent("room_settings.RelatedGroupSettings");
+        const UrlPreviewSettings = sdk.getComponent("room_settings.UrlPreviewSettings");
 
         const client = MatrixClientPeg.get();
         const room = client.getRoom(this.props.roomId);
@@ -91,6 +101,18 @@ export default class GeneralRoomSettingsTab extends React.Component {
                         {_t("Save")}
                     </AccessibleButton>
                 </div>
+
+                <span className='mx_SettingsTab_subheading'>{_t("URL Previews")}</span>
+                <div className='mx_SettingsTab_section'>
+                    <UrlPreviewSettings room={room} />
+                </div>
+
+                <span className='mx_SettingsTab_subheading'>{_t("Leave room")}</span>
+                <div className='mx_SettingsTab_section'>
+                    <AccessibleButton kind='danger' onClick={this._onLeaveClick}>
+                        { _t('Leave room') }
+                    </AccessibleButton>
+                </div>
             </div>
         );
     }