From 0d537ecbb3e9cb59084e468fec0499b8ee6afe7a Mon Sep 17 00:00:00 2001 From: Half-Shot Date: Mon, 2 Dec 2019 17:27:12 +0000 Subject: [PATCH 01/17] Add bridge info tab --- .../settings/tabs/room/BridgeSettingsTab.js | 128 ++++++++++++++++++ 1 file changed, 128 insertions(+) create mode 100644 src/components/views/settings/tabs/room/BridgeSettingsTab.js diff --git a/src/components/views/settings/tabs/room/BridgeSettingsTab.js b/src/components/views/settings/tabs/room/BridgeSettingsTab.js new file mode 100644 index 00000000000..732d7b29473 --- /dev/null +++ b/src/components/views/settings/tabs/room/BridgeSettingsTab.js @@ -0,0 +1,128 @@ +/* +Copyright 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. +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"; + +const BRIDGE_EVENT_TYPES = [ + "uk.half-shot.bridge", + // m.bridge +]; + +export default class BridgeSettingsTab extends React.Component { + static propTypes = { + roomId: PropTypes.string.isRequired, + }; + + constructor() { + super(); + + this.state = { + }; + } + + componentWillMount() { + + } + + _renderBridgeCard(event, room) { + const content = event.getContent(); + if (!content || !content.channel || !content.protocol) { + return null; + } + const protocolName = content.protocol.displayname || content.protocol.id; + const channelName = content.channel.displayname || content.channel.id; + const networkName = content.network ? " on " + (content.network.displayname || content.network.id) : ""; + let status = null; + if (content.status === "active") { + status = (

Status: Active

); + } else if (content.status === "disabled") { + status = (

Status: Disabled

); + } + + let creator = null; + if (content.creator) { + creator = (

+ This bridge was provisioned by +

); + } + + const bot = (

+ The bridge is managed by the bot user.

+ ); + + const chanAndNetworkInfo = ( +

Bridged into {channelName}{networkName}, on {protocolName}

+ ); + + return (
  • +
    +

    {channelName}{networkName} ({protocolName})

    +
    + {status} + {creator} + {bot} + {chanAndNetworkInfo} +
    +
    +
    • ); + } + + 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 ( +
    +
    {_t("Bridge Info")}
    +
    +

    Below is a list of bridges connected to this room.

    +
      + { bridgeEvents.map((event) => this._renderBridgeCard(event, room)) } +
    +
    +
    + ); + } +} From 7c35b16f4d272b048e23ecd969e0f7aea5e44983 Mon Sep 17 00:00:00 2001 From: Half-Shot Date: Mon, 2 Dec 2019 17:27:23 +0000 Subject: [PATCH 02/17] Add bridge tab button --- src/components/views/dialogs/RoomSettingsDialog.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/components/views/dialogs/RoomSettingsDialog.js b/src/components/views/dialogs/RoomSettingsDialog.js index 740dc4d2c2b..b262a1f0785 100644 --- a/src/components/views/dialogs/RoomSettingsDialog.js +++ b/src/components/views/dialogs/RoomSettingsDialog.js @@ -24,6 +24,7 @@ import RolesRoomSettingsTab from "../settings/tabs/room/RolesRoomSettingsTab"; import GeneralRoomSettingsTab from "../settings/tabs/room/GeneralRoomSettingsTab"; import SecurityRoomSettingsTab from "../settings/tabs/room/SecurityRoomSettingsTab"; import NotificationSettingsTab from "../settings/tabs/room/NotificationSettingsTab"; +import BridgeSettingsTab from "../settings/tabs/room/BridgeSettingsTab"; import sdk from "../../../index"; import MatrixClientPeg from "../../../MatrixClientPeg"; import dis from "../../../dispatcher"; @@ -52,6 +53,7 @@ export default class RoomSettingsDialog extends React.Component { _getTabs() { const tabs = []; + const shouldShowBridgeIcon = BridgeSettingsTab.getBridgeStateEvents(this.props.roomId).length > 0; tabs.push(new Tab( _td("General"), @@ -73,6 +75,15 @@ export default class RoomSettingsDialog extends React.Component { "mx_RoomSettingsDialog_rolesIcon", , )); + + if (shouldShowBridgeIcon) { + tabs.push(new Tab( + _td("Bridge Info"), + "mx_RoomSettingsDialog_bridgesIcon", + , + )); + } + tabs.push(new Tab( _td("Advanced"), "mx_RoomSettingsDialog_warningIcon", From 626ab17ed38e9c8c11dd9accb70d38be7439f1ac Mon Sep 17 00:00:00 2001 From: Half-Shot Date: Mon, 2 Dec 2019 17:27:31 +0000 Subject: [PATCH 03/17] Styling --- .../views/dialogs/_RoomSettingsDialog.scss | 17 +++++++ res/img/feather-customised/bridge.svg | 50 +++++++++++++++++++ 2 files changed, 67 insertions(+) create mode 100644 res/img/feather-customised/bridge.svg diff --git a/res/css/views/dialogs/_RoomSettingsDialog.scss b/res/css/views/dialogs/_RoomSettingsDialog.scss index 723eb237adc..8e648e8881a 100644 --- a/res/css/views/dialogs/_RoomSettingsDialog.scss +++ b/res/css/views/dialogs/_RoomSettingsDialog.scss @@ -29,6 +29,11 @@ limitations under the License. mask-image: url('$(res)/img/feather-customised/users-sm.svg'); } +.mx_RoomSettingsDialog_bridgesIcon::before { + // This icon is pants, please improve :) + mask-image: url('$(res)/img/feather-customised/bridge.svg'); +} + .mx_RoomSettingsDialog_warningIcon::before { mask-image: url('$(res)/img/feather-customised/warning-triangle.svg'); } @@ -42,3 +47,15 @@ limitations under the License. padding-left: 40px; padding-right: 80px; } + + +.mx_RoomSettingsDialog_BridgeList { + padding: 0; +} + +.mx_RoomSettingsDialog_BridgeList li { + list-style-type: none; + padding: 0; + margin: 0; + border-bottom: 1px solid $panel-divider-color; +} \ No newline at end of file diff --git a/res/img/feather-customised/bridge.svg b/res/img/feather-customised/bridge.svg new file mode 100644 index 00000000000..f8f34681551 --- /dev/null +++ b/res/img/feather-customised/bridge.svg @@ -0,0 +1,50 @@ + + + + + + + image/svg+xml + + + + + + + + + + + From 2bc6e2e3326250fb55ebf3b4662fd42602db1ecf Mon Sep 17 00:00:00 2001 From: Half-Shot Date: Mon, 2 Dec 2019 17:27:38 +0000 Subject: [PATCH 04/17] Add the one string I bothered to i18n --- src/i18n/strings/en_EN.json | 1 + 1 file changed, 1 insertion(+) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 182c761c5f5..74ac452bb1d 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -725,6 +725,7 @@ "Room version:": "Room version:", "Developer options": "Developer options", "Open Devtools": "Open Devtools", + "Bridge Info": "Bridge Info", "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", From 9f2ccdf913dce10170a7d2465a2f97ac0936d77e Mon Sep 17 00:00:00 2001 From: Half-Shot Date: Wed, 4 Dec 2019 15:02:36 +0000 Subject: [PATCH 05/17] Add support for displaying avatars and links in bridge info --- .../settings/tabs/room/BridgeSettingsTab.js | 39 +++++++++++++++++-- 1 file changed, 35 insertions(+), 4 deletions(-) diff --git a/src/components/views/settings/tabs/room/BridgeSettingsTab.js b/src/components/views/settings/tabs/room/BridgeSettingsTab.js index 732d7b29473..459f11277c6 100644 --- a/src/components/views/settings/tabs/room/BridgeSettingsTab.js +++ b/src/components/views/settings/tabs/room/BridgeSettingsTab.js @@ -20,6 +20,8 @@ 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", @@ -47,9 +49,10 @@ export default class BridgeSettingsTab extends React.Component { if (!content || !content.channel || !content.protocol) { return null; } + const { channel, network } = content; const protocolName = content.protocol.displayname || content.protocol.id; - const channelName = content.channel.displayname || content.channel.id; - const networkName = content.network ? " on " + (content.network.displayname || content.network.id) : ""; + const channelName = channel.displayname || channel.id; + const networkName = network ? network.displayname || network.id : ""; let status = null; if (content.status === "active") { status = (

    Status: Active

    ); @@ -78,13 +81,41 @@ export default class BridgeSettingsTab extends React.Component { /> bot user.

    ); + const channelLink = channel.external_url ? ({channelName}) : channelName; + const networkLink = network && network.external_url ? ({networkName}) + : networkName; + const chanAndNetworkInfo = ( -

    Bridged into {channelName}{networkName}, on {protocolName}

    +

    Bridged into {channelLink} {networkLink}, on {protocolName}

    ); + let networkIcon = null; + if (networkName && network.avatar) { + const avatarUrl = ContentRepo.getHttpUriForMxc( + MatrixClientPeg.get().getHomeserverUrl(), + network.avatar, 32, 32, "crop", + ); + networkIcon = ; + } + + let channelIcon = null; + if (channel.avatar) { + const avatarUrl = ContentRepo.getHttpUriForMxc( + MatrixClientPeg.get().getHomeserverUrl(), + channel.avatar, 32, 32, "crop", + ); + console.log(channel.avatar); + channelIcon = ; + } + return (
  • -

    {channelName}{networkName} ({protocolName})

    +

    {channelIcon} {channelName} {networkName ? ` on ${networkName}` : ""} {networkIcon}

    +

    Connected via {protocolName}

    {status} {creator} From ce21ce8bbea93c9a2b48b0c0c6f341f4360d375b Mon Sep 17 00:00:00 2001 From: Will Hunt Date: Thu, 5 Dec 2019 00:28:29 +0000 Subject: [PATCH 06/17] Lint --- .../views/settings/tabs/room/BridgeSettingsTab.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/views/settings/tabs/room/BridgeSettingsTab.js b/src/components/views/settings/tabs/room/BridgeSettingsTab.js index 459f11277c6..031e2651c3c 100644 --- a/src/components/views/settings/tabs/room/BridgeSettingsTab.js +++ b/src/components/views/settings/tabs/room/BridgeSettingsTab.js @@ -80,10 +80,15 @@ export default class BridgeSettingsTab extends React.Component { shouldShowPillAvatar={true} /> bot user.

    ); + let channelLink = channelName; + if (channel.external_url) { + channelLink = {channelName}; + } - const channelLink = channel.external_url ? ({channelName}) : channelName; - const networkLink = network && network.external_url ? ({networkName}) - : networkName; + let networkLink = networkName; + if (network && network.external_url) { + networkLink = {networkName}; + } const chanAndNetworkInfo = (

    Bridged into {channelLink} {networkLink}, on {protocolName}

    From d9943754f7c936fae5643ae6c16205d99467d9f9 Mon Sep 17 00:00:00 2001 From: Half-Shot Date: Mon, 9 Dec 2019 13:28:16 +0000 Subject: [PATCH 07/17] Remove `status` as it's no longer part of the MSC --- .../views/settings/tabs/room/BridgeSettingsTab.js | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/components/views/settings/tabs/room/BridgeSettingsTab.js b/src/components/views/settings/tabs/room/BridgeSettingsTab.js index 031e2651c3c..a165a1db446 100644 --- a/src/components/views/settings/tabs/room/BridgeSettingsTab.js +++ b/src/components/views/settings/tabs/room/BridgeSettingsTab.js @@ -53,12 +53,6 @@ export default class BridgeSettingsTab extends React.Component { const protocolName = content.protocol.displayname || content.protocol.id; const channelName = channel.displayname || channel.id; const networkName = network ? network.displayname || network.id : ""; - let status = null; - if (content.status === "active") { - status = (

    Status: Active

    ); - } else if (content.status === "disabled") { - status = (

    Status: Disabled

    ); - } let creator = null; if (content.creator) { @@ -122,7 +116,6 @@ export default class BridgeSettingsTab extends React.Component {

    {channelIcon} {channelName} {networkName ? ` on ${networkName}` : ""} {networkIcon}

    Connected via {protocolName}

    - {status} {creator} {bot} {chanAndNetworkInfo} From 7ee5f7ba38e25cf5774e03008ba375c7d5e3f791 Mon Sep 17 00:00:00 2001 From: Half-Shot Date: Mon, 9 Dec 2019 13:28:43 +0000 Subject: [PATCH 08/17] Add feature flag --- src/components/views/dialogs/RoomSettingsDialog.js | 4 +++- src/i18n/strings/en_EN.json | 3 ++- src/settings/Settings.js | 6 ++++++ 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/components/views/dialogs/RoomSettingsDialog.js b/src/components/views/dialogs/RoomSettingsDialog.js index b262a1f0785..29524390761 100644 --- a/src/components/views/dialogs/RoomSettingsDialog.js +++ b/src/components/views/dialogs/RoomSettingsDialog.js @@ -28,6 +28,7 @@ import BridgeSettingsTab from "../settings/tabs/room/BridgeSettingsTab"; import sdk from "../../../index"; import MatrixClientPeg from "../../../MatrixClientPeg"; import dis from "../../../dispatcher"; +import SettingsStore from "../settings/SettingsStore"; export default class RoomSettingsDialog extends React.Component { static propTypes = { @@ -53,7 +54,8 @@ export default class RoomSettingsDialog extends React.Component { _getTabs() { const tabs = []; - const shouldShowBridgeIcon = BridgeSettingsTab.getBridgeStateEvents(this.props.roomId).length > 0; + const featureFlag = SettingsStore.isFeatureEnabled("feature_bridge_state"); + const shouldShowBridgeIcon = featureFlag && BridgeSettingsTab.getBridgeStateEvents(this.props.roomId).length > 0; tabs.push(new Tab( _td("General"), diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 74ac452bb1d..14ba96fa4ad 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1932,5 +1932,6 @@ "If you didn't remove the recovery method, an attacker may be trying to access your account. Change your account password and set a new recovery method immediately in Settings.": "If you didn't remove the recovery method, an attacker may be trying to access your account. Change your account password and set a new recovery method immediately in Settings.", "Failed to set direct chat tag": "Failed to set direct chat tag", "Failed to remove tag %(tagName)s from room": "Failed to remove tag %(tagName)s from room", - "Failed to add tag %(tagName)s to room": "Failed to add tag %(tagName)s to room" + "Failed to add tag %(tagName)s to room": "Failed to add tag %(tagName)s to room", + "Show info about bridges in room settings": "Show info about bridges in room settings" } diff --git a/src/settings/Settings.js b/src/settings/Settings.js index b02ab824005..94cc5b587db 100644 --- a/src/settings/Settings.js +++ b/src/settings/Settings.js @@ -154,6 +154,12 @@ export const SETTINGS = { displayName: _td("Enable local event indexing and E2EE search (requires restart)"), default: false, }, + "feature_bridge_state": { + isFeature: true, + supportedLevels: LEVELS_FEATURE, + displayName: _td("Show info about bridges in room settings"), + default: false, + }, "useCiderComposer": { displayName: _td("Use the new, faster, composer for writing messages"), supportedLevels: LEVELS_ACCOUNT_SETTINGS, From 6225e402ccdf7781cc6062c339265d63da455fc9 Mon Sep 17 00:00:00 2001 From: Half-Shot Date: Mon, 9 Dec 2019 13:54:21 +0000 Subject: [PATCH 09/17] i18n'ed all over the plaace --- .../views/dialogs/RoomSettingsDialog.js | 2 +- .../settings/tabs/room/BridgeSettingsTab.js | 58 ++++++++++++------- src/i18n/strings/en_EN.json | 10 +++- 3 files changed, 45 insertions(+), 25 deletions(-) diff --git a/src/components/views/dialogs/RoomSettingsDialog.js b/src/components/views/dialogs/RoomSettingsDialog.js index 29524390761..9ac2b17f23e 100644 --- a/src/components/views/dialogs/RoomSettingsDialog.js +++ b/src/components/views/dialogs/RoomSettingsDialog.js @@ -28,7 +28,7 @@ import BridgeSettingsTab from "../settings/tabs/room/BridgeSettingsTab"; import sdk from "../../../index"; import MatrixClientPeg from "../../../MatrixClientPeg"; import dis from "../../../dispatcher"; -import SettingsStore from "../settings/SettingsStore"; +import SettingsStore from "../../../settings/SettingsStore"; export default class RoomSettingsDialog extends React.Component { static propTypes = { diff --git a/src/components/views/settings/tabs/room/BridgeSettingsTab.js b/src/components/views/settings/tabs/room/BridgeSettingsTab.js index a165a1db446..82382e78286 100644 --- a/src/components/views/settings/tabs/room/BridgeSettingsTab.js +++ b/src/components/views/settings/tabs/room/BridgeSettingsTab.js @@ -52,28 +52,31 @@ export default class BridgeSettingsTab extends React.Component { 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 : ""; + const networkName = network ? network.displayname || network.id : protocolName; let creator = null; if (content.creator) { - creator = (

    - This bridge was provisioned by -

    ); + const pill = ; + creator = (

    { + _t("This bridge was provisioned by %(pill)s", { + pill, + }) + }

    ); } - const bot = (

    - The bridge is managed by the bot user.

    - ); + const bot = (

    {_t("This bridge is managed by the %(pill)s bot user.", { + pill: , + })}

    ); let channelLink = channelName; if (channel.external_url) { channelLink = {channelName}; @@ -85,7 +88,11 @@ export default class BridgeSettingsTab extends React.Component { } const chanAndNetworkInfo = ( -

    Bridged into {channelLink} {networkLink}, on {protocolName}

    + (_t("Bridged into %(channelLink)s %(networkLink)s, on %(protocolName)s", { + channelLink, + networkLink, + protocolName, + })) ); let networkIcon = null; @@ -111,14 +118,21 @@ export default class BridgeSettingsTab extends React.Component { url={ avatarUrl } />; } + const heading = _t("Connected to %(channelIcon)s %(channelName)s on %(networkIcon)s %(networkName)s", { + channelIcon, + channelName, + networkName, + networkIcon, + }); + return (
  • -

    {channelIcon} {channelName} {networkName ? ` on ${networkName}` : ""} {networkIcon}

    -

    Connected via {protocolName}

    +

    {heading}

    +

    {_t("Connected via %(protocolName)s", { protocolName })}

    {creator} {bot} - {chanAndNetworkInfo} +

    {chanAndNetworkInfo}

    • ); @@ -146,7 +160,7 @@ export default class BridgeSettingsTab extends React.Component {
    {_t("Bridge Info")}
    -

    Below is a list of bridges connected to this room.

    +

    { _t("Below is a list of bridges connected to this room.") }

      { bridgeEvents.map((event) => this._renderBridgeCard(event, room)) }
    diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 14ba96fa4ad..b76310ec27d 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -342,6 +342,7 @@ "Send verification requests in direct message, including a new verification UX in the member panel.": "Send verification requests in direct message, including a new verification UX in the member panel.", "Enable cross-signing to verify per-user instead of per-device (in development)": "Enable cross-signing to verify per-user instead of per-device (in development)", "Enable local event indexing and E2EE search (requires restart)": "Enable local event indexing and E2EE search (requires restart)", + "Show info about bridges in room settings": "Show info about bridges in room settings", "Use the new, faster, composer for writing messages": "Use the new, faster, composer for writing messages", "Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing", "Use compact timeline layout": "Use compact timeline layout", @@ -725,7 +726,13 @@ "Room version:": "Room version:", "Developer options": "Developer options", "Open Devtools": "Open Devtools", + "This bridge was provisioned by %(pill)s": "This bridge was provisioned by %(pill)s", + "This bridge is managed by the %(pill)s bot user.": "This bridge is managed by the %(pill)s bot user.", + "Bridged into %(channelLink)s %(networkLink)s, on %(protocolName)s": "Bridged into %(channelLink)s %(networkLink)s, on %(protocolName)s", + "Connected to %(channelIcon)s %(channelName)s on %(networkIcon)s %(networkName)s": "Connected to %(channelIcon)s %(channelName)s on %(networkIcon)s %(networkName)s", + "Connected via %(protocolName)s": "Connected via %(protocolName)s", "Bridge Info": "Bridge Info", + "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", @@ -1932,6 +1939,5 @@ "If you didn't remove the recovery method, an attacker may be trying to access your account. Change your account password and set a new recovery method immediately in Settings.": "If you didn't remove the recovery method, an attacker may be trying to access your account. Change your account password and set a new recovery method immediately in Settings.", "Failed to set direct chat tag": "Failed to set direct chat tag", "Failed to remove tag %(tagName)s from room": "Failed to remove tag %(tagName)s from room", - "Failed to add tag %(tagName)s to room": "Failed to add tag %(tagName)s to room", - "Show info about bridges in room settings": "Show info about bridges in room settings" + "Failed to add tag %(tagName)s to room": "Failed to add tag %(tagName)s to room" } From b1c28870878ee0e5fb6f634bf8a4b5ef030b3c12 Mon Sep 17 00:00:00 2001 From: Will Hunt Date: Mon, 30 Dec 2019 16:08:24 +0000 Subject: [PATCH 10/17] line length --- src/components/views/dialogs/RoomSettingsDialog.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/views/dialogs/RoomSettingsDialog.js b/src/components/views/dialogs/RoomSettingsDialog.js index 9ac2b17f23e..e01319e3bd5 100644 --- a/src/components/views/dialogs/RoomSettingsDialog.js +++ b/src/components/views/dialogs/RoomSettingsDialog.js @@ -55,7 +55,8 @@ 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; + const shouldShowBridgeIcon = featureFlag && + BridgeSettingsTab.getBridgeStateEvents(this.props.roomId).length > 0; tabs.push(new Tab( _td("General"), From fb94be4abdb713bb23b8b22461500b90f682ec92 Mon Sep 17 00:00:00 2001 From: Will Hunt Date: Mon, 30 Dec 2019 16:11:59 +0000 Subject: [PATCH 11/17] No trailing space --- src/components/views/dialogs/RoomSettingsDialog.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/dialogs/RoomSettingsDialog.js b/src/components/views/dialogs/RoomSettingsDialog.js index e01319e3bd5..c31fe1992d7 100644 --- a/src/components/views/dialogs/RoomSettingsDialog.js +++ b/src/components/views/dialogs/RoomSettingsDialog.js @@ -55,7 +55,7 @@ export default class RoomSettingsDialog extends React.Component { _getTabs() { const tabs = []; const featureFlag = SettingsStore.isFeatureEnabled("feature_bridge_state"); - const shouldShowBridgeIcon = featureFlag && + const shouldShowBridgeIcon = featureFlag && BridgeSettingsTab.getBridgeStateEvents(this.props.roomId).length > 0; tabs.push(new Tab( From fa9fd97a4e5b2a7e94d0185650402e214a649909 Mon Sep 17 00:00:00 2001 From: Will Hunt Date: Thu, 2 Jan 2020 09:41:50 +0000 Subject: [PATCH 12/17] missing } --- res/css/views/dialogs/_RoomSettingsDialog.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/views/dialogs/_RoomSettingsDialog.scss b/res/css/views/dialogs/_RoomSettingsDialog.scss index b7641a4ad0e..4b13684d9f8 100644 --- a/res/css/views/dialogs/_RoomSettingsDialog.scss +++ b/res/css/views/dialogs/_RoomSettingsDialog.scss @@ -54,6 +54,7 @@ limitations under the License. mask-repeat: no-repeat; mask-size: 36px; mask-position: center; +} .mx_RoomSettingsDialog_BridgeList { padding: 0; From 668479d94a477976b4113906b21cce56f01458ac Mon Sep 17 00:00:00 2001 From: Half-Shot Date: Fri, 3 Jan 2020 13:57:59 +0000 Subject: [PATCH 13/17] Tweak as per git review --- .../settings/tabs/room/BridgeSettingsTab.js | 69 +++++++++---------- src/i18n/strings/en_EN.json | 8 +-- 2 files changed, 35 insertions(+), 42 deletions(-) diff --git a/src/components/views/settings/tabs/room/BridgeSettingsTab.js b/src/components/views/settings/tabs/room/BridgeSettingsTab.js index 82382e78286..9e6bdf89585 100644 --- a/src/components/views/settings/tabs/room/BridgeSettingsTab.js +++ b/src/components/views/settings/tabs/room/BridgeSettingsTab.js @@ -1,5 +1,5 @@ /* -Copyright 2019 New Vector Ltd +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. @@ -33,17 +33,6 @@ export default class BridgeSettingsTab extends React.Component { roomId: PropTypes.string.isRequired, }; - constructor() { - super(); - - this.state = { - }; - } - - componentWillMount() { - - } - _renderBridgeCard(event, room) { const content = event.getContent(); if (!content || !content.channel || !content.protocol) { @@ -56,21 +45,18 @@ export default class BridgeSettingsTab extends React.Component { let creator = null; if (content.creator) { - const pill = ; - creator = (

    { - _t("This bridge was provisioned by %(pill)s", { - pill, - }) - }

    ); + creator =

    { _t("This bridge was provisioned by ", {}, { + user: , + })}

    ; } - const bot = (

    {_t("This bridge is managed by the %(pill)s bot user.", { - pill: {_t("This bridge is managed by the bot user.", {}, { + user: ); let channelLink = channelName; if (channel.external_url) { - channelLink = {channelName}; + channelLink = {channelName}; } let networkLink = networkName; if (network && network.external_url) { - networkLink = {networkName}; + networkLink = {networkName}; } const chanAndNetworkInfo = ( - (_t("Bridged into %(channelLink)s %(networkLink)s, on %(protocolName)s", { + _t("Bridged into , on ", {}, { channelLink, networkLink, protocolName, - })) + }) ); let networkIcon = null; @@ -101,9 +87,13 @@ export default class BridgeSettingsTab extends React.Component { MatrixClientPeg.get().getHomeserverUrl(), network.avatar, 32, 32, "crop", ); - networkIcon = ; + networkIcon = ; } let channelIcon = null; @@ -112,13 +102,16 @@ export default class BridgeSettingsTab extends React.Component { MatrixClientPeg.get().getHomeserverUrl(), channel.avatar, 32, 32, "crop", ); - console.log(channel.avatar); - channelIcon = ; + channelIcon = ; } - const heading = _t("Connected to %(channelIcon)s %(channelName)s on %(networkIcon)s %(networkName)s", { + const heading = _t("Connected to on ", { }, { channelIcon, channelName, networkName, @@ -127,7 +120,7 @@ export default class BridgeSettingsTab extends React.Component { return (

  • -

    {heading}

    +

    {heading}

    {_t("Connected via %(protocolName)s", { protocolName })}

    {creator} diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 6fcfd2eb952..1f66891857a 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -763,10 +763,10 @@ "Room version:": "Room version:", "Developer options": "Developer options", "Open Devtools": "Open Devtools", - "This bridge was provisioned by %(pill)s": "This bridge was provisioned by %(pill)s", - "This bridge is managed by the %(pill)s bot user.": "This bridge is managed by the %(pill)s bot user.", - "Bridged into %(channelLink)s %(networkLink)s, on %(protocolName)s": "Bridged into %(channelLink)s %(networkLink)s, on %(protocolName)s", - "Connected to %(channelIcon)s %(channelName)s on %(networkIcon)s %(networkName)s": "Connected to %(channelIcon)s %(channelName)s on %(networkIcon)s %(networkName)s", + "This bridge was provisioned by ": "This bridge was provisioned by ", + "This bridge is managed by the bot user.": "This bridge is managed by the bot user.", + "Bridged into , on ": "Bridged into , on ", + "Connected to on ": "Connected to on ", "Connected via %(protocolName)s": "Connected via %(protocolName)s", "Bridge Info": "Bridge Info", "Below is a list of bridges connected to this room.": "Below is a list of bridges connected to this room.", From 831053de112921eaffafac5d94933e0e6dcc6a88 Mon Sep 17 00:00:00 2001 From: Half-Shot Date: Fri, 3 Jan 2020 13:58:07 +0000 Subject: [PATCH 14/17] Make bridge info cards more obvious --- res/css/views/dialogs/_RoomSettingsDialog.scss | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/res/css/views/dialogs/_RoomSettingsDialog.scss b/res/css/views/dialogs/_RoomSettingsDialog.scss index 4b13684d9f8..aa66e97f9e4 100644 --- a/res/css/views/dialogs/_RoomSettingsDialog.scss +++ b/res/css/views/dialogs/_RoomSettingsDialog.scss @@ -62,8 +62,10 @@ limitations under the License. .mx_RoomSettingsDialog_BridgeList li { list-style-type: none; - padding: 0; - margin: 0; - border-bottom: 1px solid $panel-divider-color; + padding: 5px; + margin-bottom: 5px; + border-width: 1px 0px; + border-color: #dee1f3; + border-style: solid; } From 50e19ba43d64e168e670e4657153f9359477bcb6 Mon Sep 17 00:00:00 2001 From: Half-Shot Date: Fri, 3 Jan 2020 14:04:59 +0000 Subject: [PATCH 15/17] User may not be a bot, therefore do not imply it. --- src/components/views/settings/tabs/room/BridgeSettingsTab.js | 2 +- src/i18n/strings/en_EN.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/settings/tabs/room/BridgeSettingsTab.js b/src/components/views/settings/tabs/room/BridgeSettingsTab.js index 9e6bdf89585..c3c85ec31ce 100644 --- a/src/components/views/settings/tabs/room/BridgeSettingsTab.js +++ b/src/components/views/settings/tabs/room/BridgeSettingsTab.js @@ -55,7 +55,7 @@ export default class BridgeSettingsTab extends React.Component { })}

    ; } - const bot = (

    {_t("This bridge is managed by the bot user.", {}, { + const bot = (

    {_t("This bridge is managed by .", {}, { user: ": "This bridge was provisioned by ", - "This bridge is managed by the bot user.": "This bridge is managed by the bot user.", + "This bridge is managed by .": "This bridge is managed by .", "Bridged into , on ": "Bridged into , on ", "Connected to on ": "Connected to on ", "Connected via %(protocolName)s": "Connected via %(protocolName)s", From 2ccc8caa6974ed3787436815aea95e5fc38a5205 Mon Sep 17 00:00:00 2001 From: Will Hunt Date: Sun, 5 Jan 2020 15:50:06 +0000 Subject: [PATCH 16/17] Fix indent --- .../settings/tabs/room/BridgeSettingsTab.js | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/views/settings/tabs/room/BridgeSettingsTab.js b/src/components/views/settings/tabs/room/BridgeSettingsTab.js index c3c85ec31ce..5536a2eb069 100644 --- a/src/components/views/settings/tabs/room/BridgeSettingsTab.js +++ b/src/components/views/settings/tabs/room/BridgeSettingsTab.js @@ -88,12 +88,12 @@ export default class BridgeSettingsTab extends React.Component { network.avatar, 32, 32, "crop", ); networkIcon = ; + width={32} + height={32} + resizeMethod='crop' + name={ networkName } + idName={ networkName } + url={ avatarUrl } />; } let channelIcon = null; @@ -103,12 +103,12 @@ export default class BridgeSettingsTab extends React.Component { channel.avatar, 32, 32, "crop", ); channelIcon = ; + width={32} + height={32} + resizeMethod='crop' + name={ networkName } + idName={ networkName } + url={ avatarUrl } />; } const heading = _t("Connected to on ", { }, { From 7f0ed05ee1dc5e03ff718986ba2040621bc41b71 Mon Sep 17 00:00:00 2001 From: Will Hunt Date: Sun, 5 Jan 2020 23:32:49 +0000 Subject: [PATCH 17/17] Update BridgeSettingsTab.js --- .../settings/tabs/room/BridgeSettingsTab.js | 26 ++++++++++--------- 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/src/components/views/settings/tabs/room/BridgeSettingsTab.js b/src/components/views/settings/tabs/room/BridgeSettingsTab.js index 5536a2eb069..3022885701b 100644 --- a/src/components/views/settings/tabs/room/BridgeSettingsTab.js +++ b/src/components/views/settings/tabs/room/BridgeSettingsTab.js @@ -88,12 +88,13 @@ export default class BridgeSettingsTab extends React.Component { network.avatar, 32, 32, "crop", ); networkIcon = ; + width={32} + height={32} + resizeMethod='crop' + name={ networkName } + idName={ networkName } + url={ avatarUrl } + />; } let channelIcon = null; @@ -103,12 +104,13 @@ export default class BridgeSettingsTab extends React.Component { channel.avatar, 32, 32, "crop", ); channelIcon = ; + width={32} + height={32} + resizeMethod='crop' + name={ networkName } + idName={ networkName } + url={ avatarUrl } + />; } const heading = _t("Connected to on ", { }, {