Factor out into BridgeTile

res/css/_components.scss

@@ -66,6 +66,7 @@
 @import "./views/dialogs/_InviteDialog.scss";
 @import "./views/dialogs/_MessageEditHistoryDialog.scss";
 @import "./views/dialogs/_RoomSettingsDialog.scss";
+@import "./views/dialogs/_RoomSettingsDialogBridges.scss";
 @import "./views/dialogs/_RoomUpgradeDialog.scss";
 @import "./views/dialogs/_RoomUpgradeWarningDialog.scss";
 @import "./views/dialogs/_SetEmailDialog.scss";

res/css/views/dialogs/_RoomSettingsDialogBridges.scss

@@ -0,0 +1,93 @@
+/*
+Copyright 2020 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.
+*/
+
+.mx_RoomSettingsDialog_BridgeList {
+    padding: 0;
+
+    .mx_AccessibleButton {
+        display: inline;
+        margin: 0;
+        padding: 0;
+        float: left;
+    }
+}
+
+.mx_RoomSettingsDialog_BridgeList li {
+    list-style-type: none;
+    padding: 5px;
+    margin-bottom: 8px;
+    border-width: 1px 1px;
+    border-color: $primary-hairline-color;
+    border-style: solid;
+    border-radius: 5px;
+
+    .protocol-icon {
+        float: left;
+        margin-right: 5px;
+        img {
+            border-radius: 5px;
+            border-width: 1px 1px;
+            border-color: $primary-hairline-color;
+        }
+        span {
+            /* Correct letter placement */
+            left: auto;
+        }
+    }
+
+    h3 {
+        margin-top: 0;
+        margin-bottom: 4px;
+        font-size: 16pt;
+        color: $primary-fg-color;
+    }
+
+    .column-icon {
+        float: left;
+        padding-right: 10px;
+
+        .noProtocolIcon {
+            width: 48px;
+            height: 48px;
+            background: $settings-profile-placeholder-bg-color;
+            border-radius: 5px;
+        }
+    }
+
+    .column-data {
+        display: inline-block;
+        width: 85%;
+    }
+
+    .workspace-channel-details {
+        margin-top: 0;
+        color: $primary-fg-color;
+    }
+
+    .metadata {
+        color: $muted-fg-color;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        margin-bottom: 0;
+    }
+
+    .metadata.visible {
+        overflow-y: visible;
+        text-overflow: ellipsis;
+        white-space: normal;
+    }
+}

src/components/views/settings/BridgeTile.js

@@ -0,0 +1,116 @@
+/*
+Copyright 2020 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 React from 'react';
+import PropTypes from 'prop-types';
+import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
+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 AccessibleButton from "../elements/AccessibleButton";
+
+export default class BridgeTile extends React.PureComponent {
+    static propTypes = {
+        ev: PropTypes.object.isRequired,
+        room: PropTypes.object.isRequired,
+    }
+    
+    state = {
+        visible: false
+    }
+
+    _toggleVisible() {
+        this.setState({
+            visible: !this.state.visible,
+        });
+    }
+
+    render() {
+        const content = this.props.ev.getContent();
+        const { channel, network, protocol } = content;
+        const protocolName = protocol.displayname || protocol.id;
+        const channelName = channel.displayname || channel.id;
+        const networkName = network ? network.displayname || network.id : protocolName;
+
+        let creator = null;
+        if (content.creator) {
+            creator = _t("This bridge was provisioned by <user />.", {}, {
+                    user: <Pill
+                        type={Pill.TYPE_USER_MENTION}
+                        room={this.props.room}
+                        url={makeUserPermalink(content.creator)}
+                        shouldShowPillAvatar={true}
+                    />,
+            });
+        }
+
+        const bot = _t("This bridge is managed by <user />.", {}, {
+            user: <Pill
+                type={Pill.TYPE_USER_MENTION}
+                room={this.props.room}
+                url={makeUserPermalink(this.props.ev.getSender())}
+                shouldShowPillAvatar={true}
+                />,
+        });
+
+        let networkIcon;
+
+        if (protocol.avatar) {
+            const avatarUrl = getHttpUriForMxc(
+                MatrixClientPeg.get().getHomeserverUrl(),
+                protocol.avatar, 64, 64, "crop",
+            );
+
+            networkIcon = <BaseAvatar className="protocol-icon"
+                width={48}
+                height={48}
+                resizeMethod='crop'
+                name={ protocolName }
+                idName={ protocolName }
+                url={ avatarUrl }
+            />;
+        } else {
+            networkIcon = <div class="noProtocolIcon"></div>;
+        }
+
+
+        const workspaceChannelDetails = _t("Workspace: %(networkName)s      Channel: %(channelName)s", {
+            networkName,
+            channelName,
+        });
+        const id = this.props.ev.getId();
+        const metadataClassname = "metadata" + (this.state.visible ? " visible" : "");
+        return (<li key={id}>
+            <div className="column-icon">
+                {networkIcon}
+            </div>
+            <div className="column-data">
+                <h3>{protocolName}</h3>
+                <p className="workspace-channel-details">
+                    {workspaceChannelDetails}
+                </p>
+                <p className={metadataClassname}>
+                    {creator} {bot}
+                </p>
+                <AccessibleButton kind="secondary" onClick={this._toggleVisible.bind(this)}>
+                    Show { this.state.visible ? "less" : "more" }
+                </AccessibleButton>
+            </div>
+        </li>);
+    }
+}

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

@@ -18,10 +18,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {_t} from "../../../../../languageHandler";
 import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
-import Pill from "../../../elements/Pill";
+import BridgeTile from "../../BridgeTile";
-import {makeUserPermalink} from "../../../../../utils/permalinks/Permalinks";
-import BaseAvatar from "../../../avatars/BaseAvatar";
-import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
 
 const BRIDGE_EVENT_TYPES = [
     "uk.half-shot.bridge",
@@ -35,17 +32,6 @@ export default class BridgeSettingsTab extends React.Component {
 
     constructor() {
         super();
-
-        this.state = {
-            showMoreCard: null,
-        };
-    }
-
-
-    _showMoreDetails(eventId) {
-        this.setState({
-            showMoreCard: eventId,
-        });
     }
 
     _renderBridgeCard(event, room) {
@@ -53,68 +39,7 @@ export default class BridgeSettingsTab extends React.Component {
         if (!content || !content.channel || !content.protocol) {
             return null;
         }
-        const { channel, network } = content;
+        return <BridgeTile room={room} ev={event}></BridgeTile>
-        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 = _t("This bridge was provisioned by <user />.", {}, {
-                    user: <Pill
-                        type={Pill.TYPE_USER_MENTION}
-                        room={room}
-                        url={makeUserPermalink(content.creator)}
-                        shouldShowPillAvatar={true}
-                    />,
-            });
-        }
-
-        const bot = _t("This bridge is managed by <user />.", {}, {
-            user: <Pill
-                type={Pill.TYPE_USER_MENTION}
-                room={room}
-                url={makeUserPermalink(event.getSender())}
-                shouldShowPillAvatar={true}
-                />,
-        });
-
-        const avatarUrl = network.avatar ? getHttpUriForMxc(
-            MatrixClientPeg.get().getHomeserverUrl(),
-            network.avatar, 32, 32, "crop",
-        ) : null;
-
-        const networkIcon = <BaseAvatar className="protocol-icon"
-            width={48}
-            height={48}
-            resizeMethod='crop'
-            name={ protocolName }
-            idName={ protocolName }
-            url={ avatarUrl }
-        />;
-
-        const workspaceChannelDetails = _t("Workspace: %(networkName)s      Channel: %(channelName)s", {
-            networkName,
-            channelName,
-        });
-        const id = event.getId();
-        const isVisible = this.state.showMoreCard === id;
-        const metadataClassname = "metadata " + (isVisible ? "visible" : "");
-        return (<li key={id}>
-            <div className="column-icon">
-                {networkIcon}
-            </div>
-            <div className="column-data">
-                <h3>{protocolName}</h3>
-                <p className="workspace-channel-details">
-                    {workspaceChannelDetails}
-                </p>
-                <p className={metadataClassname}>
-                    {creator} {bot}
-                </p>
-                <a href="#" onClick={() => this._showMoreDetails(isVisible ? null : id)}>Show { isVisible ? "less" : "more" } </a>
-            </div>
-        </li>);
     }
 
     static getBridgeStateEvents(roomId) {