Style bridge settings tab according to design

Signed-off-by: Half-Shot <will@half-shot.uk>

res/css/views/dialogs/_RoomSettingsDialog.scss

@@ -63,9 +63,59 @@ limitations under the License.
 .mx_RoomSettingsDialog_BridgeList li {
     list-style-type: none;
     padding: 5px;
-    margin-bottom: 5px;
+    margin-bottom: 8px;
-    border-width: 1px 0px;
+    border-width: 1px 1px;
-    border-color: #dee1f3;
+    border-color: $primary-hairline-color;
-    border-style: solid;
+    border-radius: 5px;
+
+    .protocol-icon {
+        float: left;
+        margin-right: 30px;
+        img {
+            border-radius: 5px;
+            border-width: 1px 1px;
+            border-color: $primary-hairline-color;
+            border-style: solid;
+        }
+        span {
+            /* Correct letter placement */
+            left: auto;
+        }
+    }
+
+    h3 {
+        margin-top: 0;
+        margin-bottom: 4px;
+        font-size: 16pt;
+    }
+
+    .column-icon {
+        float: left;
+    }
+
+    .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/dialogs/RoomSettingsDialog.js

@@ -54,9 +54,6 @@ export default class RoomSettingsDialog extends React.Component {
 
     _getTabs() {
         const tabs = [];
-        const featureFlag = SettingsStore.isFeatureEnabled("feature_bridge_state");
-        const shouldShowBridgeIcon = featureFlag &&
-            BridgeSettingsTab.getBridgeStateEvents(this.props.roomId).length > 0;
 
         tabs.push(new Tab(
             _td("General"),
@@ -79,9 +76,9 @@ export default class RoomSettingsDialog extends React.Component {
             <NotificationSettingsTab roomId={this.props.roomId} />,
         ));
 
-        if (shouldShowBridgeIcon) {
+        if (SettingsStore.isFeatureEnabled("feature_bridge_state")) {
             tabs.push(new Tab(
-                _td("Bridge Info"),
+                _td("Bridges"),
                 "mx_RoomSettingsDialog_bridgesIcon",
                 <BridgeSettingsTab roomId={this.props.roomId} />,
             ));

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

@@ -33,6 +33,21 @@ export default class BridgeSettingsTab extends React.Component {
         roomId: PropTypes.string.isRequired,
     };
 
+    constructor() {
+        super();
+
+        this.state = {
+            showMoreCard: null,
+        };
+    }
+
+
+    _showMoreDetails(eventId) {
+        this.setState({
+            showMoreCard: eventId,
+        });
+    }
+
     _renderBridgeCard(event, room) {
         const content = event.getContent();
         if (!content || !content.channel || !content.protocol) {
@@ -45,90 +60,59 @@ export default class BridgeSettingsTab extends React.Component {
 
         let creator = null;
         if (content.creator) {
-            creator = <p> { _t("This bridge was provisioned by <user />", {}, {
+            creator = _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 />.", {}, {
+        const bot = _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 = 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 = 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}>
+        const avatarUrl = network.avatar ? getHttpUriForMxc(
-            <div>
+            MatrixClientPeg.get().getHomeserverUrl(),
-                <h3>{heading}</h3>
+            network.avatar, 32, 32, "crop",
-                <p>{_t("Connected via %(protocolName)s", { protocolName })}</p>
+        ) : null;
-                <details>
+
-                    {creator}
+        const networkIcon = <BaseAvatar className="protocol-icon"
-                    {bot}
+            width={48}
-                    <p>{chanAndNetworkInfo}</p>
+            height={48}
-                </details>
+            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>);
     }
@@ -151,14 +135,40 @@ export default class BridgeSettingsTab extends React.Component {
         const client = MatrixClientPeg.get();
         const room = client.getRoom(this.props.roomId);
 
+        let content = null;
+
+        if (bridgeEvents.length > 0) {
+            content = <div>
+                <p>{_t(
+                    "This room is bridging messages to the following platforms. " +
+                    "<a>Learn more.</a>", {},
+                    {
+                        // TODO: We don't have this link yet: this will prevent the translators
+                        // having to re-translate the string when we do.
+                        a: sub => '',
+                    },
+                )}</p>
+                <ul className="mx_RoomSettingsDialog_BridgeList">
+                    { bridgeEvents.map((event) => this._renderBridgeCard(event, room)) }
+                </ul>
+            </div>
+        } else  {
+            content = <p>{_t(
+                "This room isn’t bridging messages to any platforms. " +
+                "<a>Learn more.</a>", {},
+                {
+                    // TODO: We don't have this link yet: this will prevent the translators
+                    // having to re-translate the string when we do.
+                    a: sub => '',
+                },
+            )}</p>
+        }
+
         return (
             <div className="mx_SettingsTab">
-                <div className="mx_SettingsTab_heading">{_t("Bridge Info")}</div>
+                <div className="mx_SettingsTab_heading">{_t("Bridges")}</div>
                 <div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
-                    <p>{ _t("Below is a list of bridges connected to this room.") }</p>
+                    {content}
-                    <ul className="mx_RoomSettingsDialog_BridgeList">
-                        { bridgeEvents.map((event) => this._renderBridgeCard(event, room)) }
-                    </ul>
                 </div>
             </div>
         );

src/i18n/strings/en_EN.json

@@ -781,13 +781,12 @@
     "Room version:": "Room version:",
     "Developer options": "Developer options",
     "Open Devtools": "Open Devtools",
-    "This bridge was provisioned by <user />": "This bridge was provisioned by <user />",
+    "This bridge was provisioned by <user />.": "This bridge was provisioned by <user />.",
     "This bridge is managed by <user />.": "This bridge is managed by <user />.",
-    "Bridged into <channelLink /> <networkLink />, on <protocolName />": "Bridged into <channelLink /> <networkLink />, on <protocolName />",
+    "Workspace: %(networkName)s      Channel: %(channelName)s": "Workspace: %(networkName)s      Channel: %(channelName)s",
-    "Connected to <channelIcon /> <channelName /> on <networkIcon /> <networkName />": "Connected to <channelIcon /> <channelName /> on <networkIcon /> <networkName />",
+    "This room is bridging messages to the following platforms. <a>Learn more.</a>": "This room is bridging messages to the following platforms. <a>Learn more.</a>",
-    "Connected via %(protocolName)s": "Connected via %(protocolName)s",
+    "This room isn’t bridging messages to any platforms. <a>Learn more.</a>": "This room isn’t bridging messages to any platforms. <a>Learn more.</a>",
-    "Bridge Info": "Bridge Info",
+    "Bridges": "Bridges",
-    "Below is a list of bridges connected to this room.": "Below is a list of bridges connected to this room.",
     "Room Addresses": "Room Addresses",
     "Publish this room to the public in %(domain)s's room directory?": "Publish this room to the public in %(domain)s's room directory?",
     "URL Previews": "URL Previews",