Apply prettier formatting

src/components/views/settings/BridgeTile.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React from "react";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { logger } from "matrix-js-sdk/src/logger";
@@ -24,7 +24,7 @@ import Pill, { PillType } from "../elements/Pill";
 import { makeUserPermalink } from "../../../utils/permalinks/Permalinks";
 import BaseAvatar from "../avatars/BaseAvatar";
 import SettingsStore from "../../../settings/SettingsStore";
-import { isUrlPermitted } from '../../../HtmlUtils';
+import { isUrlPermitted } from "../../../HtmlUtils";
 import { mediaFromMxc } from "../../../customisations/Media";
 
 interface IProps {
@@ -75,8 +75,10 @@ export default class BridgeTile extends React.PureComponent<IProps> {
         if (!content.bridgebot) {
             // Bridgebot was not required previously, so in order to not break rooms we are allowing
             // the sender to be used in place. When the proposal is merged, this should be removed.
-            logger.warn(`Bridge info event ${this.props.ev.getId()} does not provide a 'bridgebot' key which`
-             + "is deprecated behaviour. Using sender for now.");
+            logger.warn(
+                `Bridge info event ${this.props.ev.getId()} does not provide a 'bridgebot' key which` +
+                    "is deprecated behaviour. Using sender for now.",
+            );
             content.bridgebot = this.props.ev.getSender();
         }
         const { channel, network, protocol } = content;
@@ -85,77 +87,116 @@ export default class BridgeTile extends React.PureComponent<IProps> {
 
         let creator = null;
         if (content.creator) {
-            creator = <li>{ _t("This bridge was provisioned by <user />.", {}, {
-                user: () => <Pill
-                    type={PillType.UserMention}
-                    room={this.props.room}
-                    url={makeUserPermalink(content.creator)}
-                    shouldShowPillAvatar={SettingsStore.getValue("Pill.shouldShowPillAvatar")}
-                />,
-            }) }</li>;
+            creator = (
+                <li>
+                    {_t(
+                        "This bridge was provisioned by <user />.",
+                        {},
+                        {
+                            user: () => (
+                                <Pill
+                                    type={PillType.UserMention}
+                                    room={this.props.room}
+                                    url={makeUserPermalink(content.creator)}
+                                    shouldShowPillAvatar={SettingsStore.getValue("Pill.shouldShowPillAvatar")}
+                                />
+                            ),
+                        },
+                    )}
+                </li>
+            );
         }
 
-        const bot = <li>{ _t("This bridge is managed by <user />.", {}, {
-            user: () => <Pill
-                type={PillType.UserMention}
-                room={this.props.room}
-                url={makeUserPermalink(content.bridgebot)}
-                shouldShowPillAvatar={SettingsStore.getValue("Pill.shouldShowPillAvatar")}
-            />,
-        }) }</li>;
+        const bot = (
+            <li>
+                {_t(
+                    "This bridge is managed by <user />.",
+                    {},
+                    {
+                        user: () => (
+                            <Pill
+                                type={PillType.UserMention}
+                                room={this.props.room}
+                                url={makeUserPermalink(content.bridgebot)}
+                                shouldShowPillAvatar={SettingsStore.getValue("Pill.shouldShowPillAvatar")}
+                            />
+                        ),
+                    },
+                )}
+            </li>
+        );
 
         let networkIcon;
 
         if (protocol.avatar_url) {
             const avatarUrl = mediaFromMxc(protocol.avatar_url).getSquareThumbnailHttp(64);
 
-            networkIcon = <BaseAvatar className="mx_RoomSettingsDialog_protocolIcon"
-                width={48}
-                height={48}
-                resizeMethod='crop'
-                name={protocolName}
-                idName={protocolName}
-                url={avatarUrl}
-            />;
+            networkIcon = (
+                <BaseAvatar
+                    className="mx_RoomSettingsDialog_protocolIcon"
+                    width={48}
+                    height={48}
+                    resizeMethod="crop"
+                    name={protocolName}
+                    idName={protocolName}
+                    url={avatarUrl}
+                />
+            );
         } else {
             networkIcon = <div className="mx_RoomSettingsDialog_noProtocolIcon" />;
         }
         let networkItem = null;
         if (network) {
             const networkName = network.displayname || network.id;
-            let networkLink = <span>{ networkName }</span>;
+            let networkLink = <span>{networkName}</span>;
             if (typeof network.external_url === "string" && isUrlPermitted(network.external_url)) {
                 networkLink = (
-                    <a href={network.external_url} target="_blank" rel="noreferrer noopener">{ networkName }</a>
+                    <a href={network.external_url} target="_blank" rel="noreferrer noopener">
+                        {networkName}
+                    </a>
                 );
             }
-            networkItem = _t("Workspace: <networkLink/>", {}, {
-                networkLink: () => networkLink,
-            });
+            networkItem = _t(
+                "Workspace: <networkLink/>",
+                {},
+                {
+                    networkLink: () => networkLink,
+                },
+            );
         }
 
-        let channelLink = <span>{ channelName }</span>;
+        let channelLink = <span>{channelName}</span>;
         if (typeof channel.external_url === "string" && isUrlPermitted(channel.external_url)) {
-            channelLink = <a href={channel.external_url} target="_blank" rel="noreferrer noopener">{ channelName }</a>;
+            channelLink = (
+                <a href={channel.external_url} target="_blank" rel="noreferrer noopener">
+                    {channelName}
+                </a>
+            );
         }
 
         const id = this.props.ev.getId();
-        return (<li key={id} className="mx_RoomSettingsDialog_BridgeList_listItem">
-            <div className="mx_RoomSettingsDialog_column_icon">
-                { networkIcon }
-            </div>
-            <div className="mx_RoomSettingsDialog_column_data">
-                <h3 className="mx_RoomSettingsDialog_column_data_protocolName">{ protocolName }</h3>
-                <p className="mx_RoomSettingsDialog_column_data_details mx_RoomSettingsDialog_workspace_channel_details">
-                    { networkItem }
-                    <span className="mx_RoomSettingsDialog_channel">{ _t("Channel: <channelLink/>", {}, {
-                        channelLink: () => channelLink,
-                    }) }</span>
-                </p>
-                <ul className="mx_RoomSettingsDialog_column_data_metadata mx_RoomSettingsDialog_metadata">
-                    { creator } { bot }
-                </ul>
-            </div>
-        </li>);
+        return (
+            <li key={id} className="mx_RoomSettingsDialog_BridgeList_listItem">
+                <div className="mx_RoomSettingsDialog_column_icon">{networkIcon}</div>
+                <div className="mx_RoomSettingsDialog_column_data">
+                    <h3 className="mx_RoomSettingsDialog_column_data_protocolName">{protocolName}</h3>
+                    <p className="mx_RoomSettingsDialog_column_data_details mx_RoomSettingsDialog_workspace_channel_details">
+                        {networkItem}
+                        <span className="mx_RoomSettingsDialog_channel">
+                            {_t(
+                                "Channel: <channelLink/>",
+                                {},
+                                {
+                                    channelLink: () => channelLink,
+                                },
+                            )}
+                        </span>
+                    </p>
+                    <ul className="mx_RoomSettingsDialog_column_data_metadata mx_RoomSettingsDialog_metadata">
+                        {creator} {bot}
+                    </ul>
+                </div>
+            </li>
+        );
     }
 }