[CONFLICT CHUNKS] Merge branch 'develop' into travis/sourcemaps-develop

src/components/views/settings/tabs/room/BridgeSettingsTab.js

@@ -0,0 +1,166 @@
+/*
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+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 React from 'react';
+import PropTypes from 'prop-types';
+import {_t} from "../../../../../languageHandler";
+import MatrixClientPeg from "../../../../../MatrixClientPeg";
+import Pill from "../../../elements/Pill";
+import {makeUserPermalink} from "../../../../../utils/permalinks/Permalinks";
+import BaseAvatar from "../../../avatars/BaseAvatar";
+import { ContentRepo } from "matrix-js-sdk";
+
+const BRIDGE_EVENT_TYPES = [
+    "uk.half-shot.bridge",
+    // m.bridge
+];
+
+export default class BridgeSettingsTab extends React.Component {
+    static propTypes = {
+        roomId: PropTypes.string.isRequired,
+    };
+
+    _renderBridgeCard(event, room) {
+        const content = event.getContent();
+        if (!content || !content.channel || !content.protocol) {
+            return null;
+        }
+        const { channel, network } = content;
+        const protocolName = content.protocol.displayname || content.protocol.id;
+        const channelName = channel.displayname || channel.id;
+        const networkName = network ? network.displayname || network.id : protocolName;
+
+        let creator = null;
+        if (content.creator) {
+            creator = <p> { _t("This bridge was provisioned by <user />", {}, {
+                    user: <Pill
+                        type={Pill.TYPE_USER_MENTION}
+                        room={room}
+                        url={makeUserPermalink(content.creator)}
+                        shouldShowPillAvatar={true}
+                    />,
+                })}</p>;
+        }
+
+        const bot = (<p> {_t("This bridge is managed by <user />.", {}, {
+            user: <Pill
+                type={Pill.TYPE_USER_MENTION}
+                room={room}
+                url={makeUserPermalink(event.getSender())}
+                shouldShowPillAvatar={true}
+                />,
+        })} </p>);
+        let channelLink = channelName;
+        if (channel.external_url) {
+            channelLink = <a target="_blank" href={channel.external_url} rel="noopener">{channelName}</a>;
+        }
+
+        let networkLink = networkName;
+        if (network && network.external_url) {
+            networkLink = <a target="_blank" href={network.external_url} rel="noopener">{networkName}</a>;
+        }
+
+        const chanAndNetworkInfo = (
+            _t("Bridged into <channelLink /> <networkLink />, on <protocolName />", {}, {
+                channelLink,
+                networkLink,
+                protocolName,
+            })
+        );
+
+        let networkIcon = null;
+        if (networkName && network.avatar) {
+            const avatarUrl = ContentRepo.getHttpUriForMxc(
+                MatrixClientPeg.get().getHomeserverUrl(),
+                network.avatar, 32, 32, "crop",
+            );
+            networkIcon = <BaseAvatar
+                width={32}
+                height={32}
+                resizeMethod='crop'
+                name={ networkName }
+                idName={ networkName }
+                url={ avatarUrl }
+            />;
+        }
+
+        let channelIcon = null;
+        if (channel.avatar) {
+            const avatarUrl = ContentRepo.getHttpUriForMxc(
+                MatrixClientPeg.get().getHomeserverUrl(),
+                channel.avatar, 32, 32, "crop",
+            );
+            channelIcon = <BaseAvatar
+                width={32}
+                height={32}
+                resizeMethod='crop'
+                name={ networkName }
+                idName={ networkName }
+                url={ avatarUrl }
+            />;
+        }
+
+        const heading = _t("Connected to <channelIcon /> <channelName /> on <networkIcon /> <networkName />", { }, {
+            channelIcon,
+            channelName,
+            networkName,
+            networkIcon,
+        });
+
+        return (<li key={event.stateKey}>
+            <div>
+                <h3>{heading}</h3>
+                <p>{_t("Connected via %(protocolName)s", { protocolName })}</p>
+                <details>
+                    {creator}
+                    {bot}
+                    <p>{chanAndNetworkInfo}</p>
+                </details>
+            </div>
+        </li>);
+    }
+
+    static getBridgeStateEvents(roomId) {
+        const client = MatrixClientPeg.get();
+        const roomState = (client.getRoom(roomId)).currentState;
+
+        const bridgeEvents = Array.concat(...BRIDGE_EVENT_TYPES.map((typeName) =>
+            Object.values(roomState.events[typeName] || {}),
+        ));
+
+        return bridgeEvents;
+    }
+
+    render() {
+        // This settings tab will only be invoked if the following function returns more
+        // than 0 events, so no validation is needed at this stage.
+        const bridgeEvents = BridgeSettingsTab.getBridgeStateEvents(this.props.roomId);
+        const client = MatrixClientPeg.get();
+        const room = client.getRoom(this.props.roomId);
+
+        return (
+            <div className="mx_SettingsTab">
+                <div className="mx_SettingsTab_heading">{_t("Bridge Info")}</div>
+                <div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
+                    <p>{ _t("Below is a list of bridges connected to this room.") }</p>
+                    <ul className="mx_RoomSettingsDialog_BridgeList">
+                        { bridgeEvents.map((event) => this._renderBridgeCard(event, room)) }
+                    </ul>
+                </div>
+            </div>
+        );
+    }
+}

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

@@ -18,22 +18,24 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {_t} from "../../../../../languageHandler";
 import RoomProfileSettings from "../../../room_settings/RoomProfileSettings";
+<<<<<<< HEAD
 import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
 import * as sdk from "../../../../..";
+=======
+import sdk from "../../../../..";
+>>>>>>> develop
 import AccessibleButton from "../../../elements/AccessibleButton";
-import {MatrixClient} from "matrix-js-sdk";
 import dis from "../../../../../dispatcher";
 import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
+import MatrixClientContext from "../../../../../contexts/MatrixClientContext";
 
 export default class GeneralRoomSettingsTab extends React.Component {
-    static childContextTypes = {
-        matrixClient: PropTypes.instanceOf(MatrixClient),
-    };
-
     static propTypes = {
         roomId: PropTypes.string.isRequired,
     };
 
+    static contextType = MatrixClientContext;
+
     constructor() {
         super();
 
@@ -42,14 +44,8 @@ export default class GeneralRoomSettingsTab extends React.Component {
         };
     }
 
-    getChildContext() {
-        return {
-            matrixClient: MatrixClientPeg.get(),
-        };
-    }
-
     componentWillMount() {
-        MatrixClientPeg.get().getRoomDirectoryVisibility(this.props.roomId).then((result => {
+        this.context.getRoomDirectoryVisibility(this.props.roomId).then((result => {
             this.setState({isRoomPublished: result.visibility === 'public'});
         }));
     }
@@ -59,7 +55,7 @@ export default class GeneralRoomSettingsTab extends React.Component {
         const newValue = !valueBefore;
         this.setState({isRoomPublished: newValue});
 
-        MatrixClientPeg.get().setRoomDirectoryVisibility(
+        this.context.setRoomDirectoryVisibility(
             this.props.roomId,
             newValue ? 'public' : 'private',
         ).catch(() => {
@@ -80,7 +76,7 @@ export default class GeneralRoomSettingsTab extends React.Component {
         const RelatedGroupSettings = sdk.getComponent("room_settings.RelatedGroupSettings");
         const UrlPreviewSettings = sdk.getComponent("room_settings.UrlPreviewSettings");
 
-        const client = MatrixClientPeg.get();
+        const client = this.context;
         const room = client.getRoom(this.props.roomId);
 
         const canSetAliases = true; // Previously, we arbitrarily only allowed admins to do this

src/components/views/settings/tabs/user/FlairUserSettingsTab.js

@@ -17,25 +17,14 @@ limitations under the License.
 import React from 'react';
 import {_t} from "../../../../../languageHandler";
 import GroupUserSettings from "../../../groups/GroupUserSettings";
+<<<<<<< HEAD
 import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
 import PropTypes from "prop-types";
 import {MatrixClient} from "matrix-js-sdk";
+=======
+>>>>>>> develop
 
 export default class FlairUserSettingsTab extends React.Component {
-    static childContextTypes = {
-        matrixClient: PropTypes.instanceOf(MatrixClient),
-    };
-
-    constructor() {
-        super();
-    }
-
-    getChildContext() {
-        return {
-            matrixClient: MatrixClientPeg.get(),
-        };
-    }
-
     render() {
         return (
             <div className="mx_SettingsTab">

src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js

@@ -26,7 +26,6 @@ import PlatformPeg from "../../../../../PlatformPeg";
 
 export default class PreferencesUserSettingsTab extends React.Component {
     static COMPOSER_SETTINGS = [
-        'useCiderComposer',
         'MessageComposerInput.autoReplaceEmoji',
         'MessageComposerInput.suggestEmoji',
         'sendTypingNotifications',

src/components/views/settings/tabs/user/SecurityUserSettingsTab.js

@@ -37,12 +37,13 @@ export class IgnoredUser extends React.Component {
     };
 
     render() {
+        const id = `mx_SecurityUserSettingsTab_ignoredUser_${this.props.userId}`;
         return (
             <div className='mx_SecurityUserSettingsTab_ignoredUser'>
-                <AccessibleButton onClick={this._onUnignoreClicked} kind='primary_sm'>
-                    {_t('Unignore')}
+                <AccessibleButton onClick={this._onUnignoreClicked} kind='primary_sm' aria-describedby={id}>
+                    { _t('Unignore') }
                 </AccessibleButton>
-                <span>{this.props.userId}</span>
+                <span id={id}>{ this.props.userId }</span>
             </div>
         );
     }