Merge remote-tracking branch 'upstream/develop' into ts/address-stuff

src/components/views/elements/AppTile.js

@@ -408,7 +408,7 @@ export default class AppTile extends React.Component {
                     // AppTile's border is in the wrong place
                     appTileBody = <div className="mx_AppTile_persistedWrapper">
                         <PersistedElement persistKey={this._persistKey}>
-                            {appTileBody}
+                            { appTileBody }
                         </PersistedElement>
                     </div>;
                 }
@@ -453,13 +453,13 @@ export default class AppTile extends React.Component {
                             title={_t('Popout widget')}
                             onClick={this._onPopoutWidgetClick}
                         /> }
-                        { <ContextMenuButton
+                        <ContextMenuButton
                             className="mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton_menu"
                             label={_t("Options")}
                             isExpanded={this.state.menuDisplayed}
                             inputRef={this._contextMenuButton}
                             onClick={this._onContextMenuClick}
-                        /> }
+                        />
                     </span>
                 </div> }
                 { appTileBody }

src/components/views/elements/DNDTagTile.js

@@ -41,6 +41,6 @@ export default function DNDTagTile(props) {
             menuDisplayed={menuDisplayed}
             openMenu={openMenu}
         />
-        {contextMenu}
+        { contextMenu }
     </>;
 }

src/components/views/elements/DesktopBuildsNotice.tsx

@@ -38,7 +38,7 @@ export default function DesktopBuildsNotice({ isRoomEncrypted, kind }: IProps) {
 
     if (EventIndexPeg.error) {
         return <>
-            {_t("Message search initialisation failed, check <a>your settings</a> for more information", {}, {
+            { _t("Message search initialisation failed, check <a>your settings</a> for more information", {}, {
                 a: sub => (<a onClick={(evt) => {
                     evt.preventDefault();
                     dis.dispatch({
@@ -46,9 +46,9 @@ export default function DesktopBuildsNotice({ isRoomEncrypted, kind }: IProps) {
                         initialTabId: UserTab.Security,
                     });
                 }}>
-                    {sub}
+                    { sub }
                 </a>),
-            })}
+            }) }
         </>;
     }
 
@@ -61,12 +61,12 @@ export default function DesktopBuildsNotice({ isRoomEncrypted, kind }: IProps) {
         switch (kind) {
             case WarningKind.Files:
                 text = _t("Use the <a>Desktop app</a> to see all encrypted files", {}, {
-                    a: sub => (<a href={desktopBuilds.url} target="_blank" rel="noreferrer noopener">{sub}</a>),
+                    a: sub => (<a href={desktopBuilds.url} target="_blank" rel="noreferrer noopener">{ sub }</a>),
                 });
                 break;
             case WarningKind.Search:
                 text = _t("Use the <a>Desktop app</a> to search encrypted messages", {}, {
-                    a: sub => (<a href={desktopBuilds.url} target="_blank" rel="noreferrer noopener">{sub}</a>),
+                    a: sub => (<a href={desktopBuilds.url} target="_blank" rel="noreferrer noopener">{ sub }</a>),
                 });
                 break;
         }
@@ -89,8 +89,8 @@ export default function DesktopBuildsNotice({ isRoomEncrypted, kind }: IProps) {
 
     return (
         <div className="mx_DesktopBuildsNotice">
-            {logo}
-            <span>{text}</span>
+            { logo }
+            <span>{ text }</span>
         </div>
     );
 }

src/components/views/elements/DesktopCapturerSourcePicker.tsx

@@ -56,7 +56,7 @@ export class ExistingSource extends React.Component<DesktopCapturerSourceIProps>
                     className="mx_desktopCapturerSourcePicker_stream_thumbnail"
                     src={this.props.source.thumbnailURL}
                 />
-                <span className="mx_desktopCapturerSourcePicker_stream_name">{this.props.source.name}</span>
+                <span className="mx_desktopCapturerSourcePicker_stream_name">{ this.props.source.name }</span>
             </AccessibleButton>
         );
     }
@@ -157,13 +157,13 @@ export default class DesktopCapturerSourcePicker extends React.Component<
                         className={screensButtonStyle}
                         onClick={this.onScreensClick}
                     >
-                        {_t("Screens")}
+                        { _t("Screens") }
                     </AccessibleButton>
                     <AccessibleButton
                         className={windowsButtonStyle}
                         onClick={this.onWindowsClick}
                     >
-                        {_t("Windows")}
+                        { _t("Windows") }
                     </AccessibleButton>
                 </div>
                 <div className="mx_desktopCapturerSourcePicker_panel">

src/components/views/elements/DialogButtons.js

@@ -92,7 +92,7 @@ export default class DialogButtons extends React.Component {
 
         let additive = null;
         if (this.props.additive) {
-            additive = <div className="mx_Dialog_buttons_additive">{this.props.additive}</div>;
+            additive = <div className="mx_Dialog_buttons_additive">{ this.props.additive }</div>;
         }
 
         return (

src/components/views/elements/DirectorySearchBox.js

@@ -88,7 +88,7 @@ export default class DirectorySearchBox extends React.Component {
         if (this.props.showJoinButton) {
             joinButton = <AccessibleButton className="mx_DirectorySearchBox_joinButton"
                 onClick={this._onJoinButtonClick}
-            >{_t("Join")}</AccessibleButton>;
+            >{ _t("Join") }</AccessibleButton>;
         }
 
         return <div className={`mx_DirectorySearchBox ${this.props.className} mx_textinput`}>

src/components/views/elements/EditableItemList.tsx

@@ -63,21 +63,21 @@ export class EditableItem extends React.Component<IItemProps, IItemState> {
             return (
                 <div className="mx_EditableItem">
                     <span className="mx_EditableItem_promptText">
-                        {_t("Are you sure?")}
+                        { _t("Are you sure?") }
                     </span>
                     <AccessibleButton
                         onClick={this.onActuallyRemove}
                         kind="primary_sm"
                         className="mx_EditableItem_confirmBtn"
                     >
-                        {_t("Yes")}
+                        { _t("Yes") }
                     </AccessibleButton>
                     <AccessibleButton
                         onClick={this.onDontRemove}
                         kind="danger_sm"
                         className="mx_EditableItem_confirmBtn"
                     >
-                        {_t("No")}
+                        { _t("No") }
                     </AccessibleButton>
                 </div>
             );
@@ -86,7 +86,7 @@ export class EditableItem extends React.Component<IItemProps, IItemState> {
         return (
             <div className="mx_EditableItem">
                 <div onClick={this.onRemove} className="mx_EditableItem_delete" title={_t("Remove")} role="button" />
-                <span className="mx_EditableItem_item">{this.props.value}</span>
+                <span className="mx_EditableItem_item">{ this.props.value }</span>
             </div>
         );
     }
@@ -155,7 +155,7 @@ export default class EditableItemList<P = {}> extends React.PureComponent<IProps
     render() {
         const editableItems = this.props.items.map((item, index) => {
             if (!this.props.canRemove) {
-                return <li key={item}>{item}</li>;
+                return <li key={item}>{ item }</li>;
             }
 
             return <EditableItem
@@ -166,7 +166,7 @@ export default class EditableItemList<P = {}> extends React.PureComponent<IProps
             />;
         });
 
-        const editableItemsSection = this.props.canRemove ? editableItems : <ul>{editableItems}</ul>;
+        const editableItemsSection = this.props.canRemove ? editableItems : <ul>{ editableItems }</ul>;
         const label = this.props.items.length > 0 ? this.props.itemsLabel : this.props.noItemsLabel;
 
         return (

src/components/views/elements/ErrorBoundary.tsx

@@ -81,33 +81,33 @@ export default class ErrorBoundary extends React.PureComponent<{}, IState> {
             let bugReportSection;
             if (SdkConfig.get().bug_report_endpoint_url) {
                 bugReportSection = <React.Fragment>
-                    <p>{_t(
+                    <p>{ _t(
                         "Please <newIssueLink>create a new issue</newIssueLink> " +
                         "on GitHub so that we can investigate this bug.", {}, {
                             newIssueLink: (sub) => {
                                 return <a target="_blank" rel="noreferrer noopener" href={newIssueUrl}>{ sub }</a>;
                             },
                         },
-                    )}</p>
-                    <p>{_t(
+                    ) }</p>
+                    <p>{ _t(
                         "If you've submitted a bug via GitHub, debug logs can help " +
                         "us track down the problem. Debug logs contain application " +
                         "usage data including your username, the IDs or aliases of " +
                         "the rooms or groups you have visited and the usernames of " +
                         "other users. They do not contain messages.",
-                    )}</p>
+                    ) }</p>
                     <AccessibleButton onClick={this.onBugReport} kind='primary'>
-                        {_t("Submit debug logs")}
+                        { _t("Submit debug logs") }
                     </AccessibleButton>
                 </React.Fragment>;
             }
 
             return <div className="mx_ErrorBoundary">
                 <div className="mx_ErrorBoundary_body">
-                    <h1>{_t("Something went wrong!")}</h1>
+                    <h1>{ _t("Something went wrong!") }</h1>
                     { bugReportSection }
                     <AccessibleButton onClick={this.onClearCacheAndReload} kind='danger'>
-                        {_t("Clear cache and reload")}
+                        { _t("Clear cache and reload") }
                     </AccessibleButton>
                 </div>
             </div>;

src/components/views/elements/EventListSummary.tsx

@@ -63,7 +63,7 @@ const EventListSummary: React.FC<IProps> = ({
     // If we are only given few events then just pass them through
     if (events.length < threshold) {
         return (
-            <li className="mx_EventListSummary" data-scroll-tokens={eventIds}>
+            <li className="mx_EventListSummary" data-scroll-tokens={eventIds} data-expanded={true}>
                 { children }
             </li>
         );
@@ -92,7 +92,7 @@ const EventListSummary: React.FC<IProps> = ({
     }
 
     return (
-        <li className="mx_EventListSummary" data-scroll-tokens={eventIds}>
+        <li className="mx_EventListSummary" data-scroll-tokens={eventIds} data-expanded={expanded + ""}>
             <AccessibleButton className="mx_EventListSummary_toggle" onClick={toggleExpanded} aria-expanded={expanded}>
                 { expanded ? _t('collapse') : _t('expand') }
             </AccessibleButton>
@@ -101,4 +101,8 @@ const EventListSummary: React.FC<IProps> = ({
     );
 };
 
+EventListSummary.defaultProps = {
+    startExpanded: false,
+};
+
 export default EventListSummary;

src/components/views/elements/FacePile.tsx

@@ -78,7 +78,7 @@ const FacePile = ({ room, onlyKnownUsers = true, numShown = DEFAULT_NUM_FACES, .
         <TextWithTooltip class="mx_FacePile_faces" tooltip={tooltip} tooltipProps={{ yOffset: 32 }}>
             { members.length > numShown ? <span className="mx_FacePile_face mx_FacePile_more" /> : null }
             { shownMembers.map(m =>
-                <MemberAvatar key={m.userId} member={m} width={28} height={28} className="mx_FacePile_face" /> )}
+                <MemberAvatar key={m.userId} member={m} width={28} height={28} className="mx_FacePile_face" /> ) }
         </TextWithTooltip>
         { onlyKnownUsers && <span className="mx_FacePile_summary">
             { _t("%(count)s people you know have already joined", { count: members.length }) }

src/components/views/elements/Field.tsx

@@ -240,11 +240,11 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
 
         let prefixContainer = null;
         if (prefixComponent) {
-            prefixContainer = <span className="mx_Field_prefix">{prefixComponent}</span>;
+            prefixContainer = <span className="mx_Field_prefix">{ prefixComponent }</span>;
         }
         let postfixContainer = null;
         if (postfixComponent) {
-            postfixContainer = <span className="mx_Field_postfix">{postfixComponent}</span>;
+            postfixContainer = <span className="mx_Field_postfix">{ postfixComponent }</span>;
         }
 
         const hasValidationFlag = forceValidity !== null && forceValidity !== undefined;
@@ -273,11 +273,11 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
         }
 
         return <div className={fieldClasses}>
-            {prefixContainer}
-            {fieldInput}
-            <label htmlFor={this.id}>{this.props.label}</label>
-            {postfixContainer}
-            {fieldTooltip}
+            { prefixContainer }
+            { fieldInput }
+            <label htmlFor={this.id}>{ this.props.label }</label>
+            { postfixContainer }
+            { fieldTooltip }
         </div>;
     }
 }

src/components/views/elements/ImageView.tsx

@@ -457,7 +457,7 @@ export default class ImageView extends React.Component<IProps, IState> {
                         <AccessibleTooltipButton
                             className="mx_ImageView_button mx_ImageView_button_rotateCCW"
                             title={_t("Rotate Left")}
-                            onClick={ this.onRotateCounterClockwiseClick }>
+                            onClick={this.onRotateCounterClockwiseClick}>
                         </AccessibleTooltipButton>
                         <AccessibleTooltipButton
                             className="mx_ImageView_button mx_ImageView_button_rotateCW"
@@ -467,13 +467,13 @@ export default class ImageView extends React.Component<IProps, IState> {
                         <AccessibleTooltipButton
                             className="mx_ImageView_button mx_ImageView_button_download"
                             title={_t("Download")}
-                            onClick={ this.onDownloadClick }>
+                            onClick={this.onDownloadClick}>
                         </AccessibleTooltipButton>
                         { contextMenuButton }
                         <AccessibleTooltipButton
                             className="mx_ImageView_button mx_ImageView_button_close"
                             title={_t("Close")}
-                            onClick={ this.props.onFinished }>
+                            onClick={this.props.onFinished}>
                         </AccessibleTooltipButton>
                         { this.renderContextMenu() }
                     </div>

src/components/views/elements/InfoTooltip.tsx

@@ -66,8 +66,8 @@ export default class InfoTooltip extends React.PureComponent<ITooltipProps, ISta
         return (
             <div onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave} className="mx_InfoTooltip">
                 <span className="mx_InfoTooltip_icon" aria-label={title} />
-                {children}
-                {tip}
+                { children }
+                { tip }
             </div>
         );
     }

src/components/views/elements/InlineSpinner.tsx

@@ -39,7 +39,7 @@ export default class InlineSpinner extends React.PureComponent<IProps> {
                     style={{ width: this.props.w, height: this.props.h }}
                     aria-label={_t("Loading...")}
                 >
-                    {this.props.children}
+                    { this.props.children }
                 </div>
             </div>
         );

src/components/views/elements/InviteReason.tsx

@@ -51,11 +51,11 @@ export default class InviteReason extends React.PureComponent<IProps, IState> {
         });
 
         return <div className={classes}>
-            <div className="mx_InviteReason_reason">{this.props.reason}</div>
+            <div className="mx_InviteReason_reason">{ this.props.reason }</div>
             <div className="mx_InviteReason_view"
                 onClick={this.onViewClick}
             >
-                {_t("View message")}
+                { _t("View message") }
             </div>
         </div>;
     }

src/components/views/elements/LabelledToggleSwitch.tsx

@@ -57,8 +57,8 @@ export default class LabelledToggleSwitch extends React.PureComponent<IProps> {
         const classes = `mx_SettingsFlag ${this.props.className || ""}`;
         return (
             <div className={classes}>
-                {firstPart}
-                {secondPart}
+                { firstPart }
+                { secondPart }
             </div>
         );
     }

src/components/views/elements/PersistedElement.js

@@ -83,7 +83,7 @@ export default class PersistedElement extends React.Component {
         // for this, so we bodge it by listening for document resize and
         // the timeline_resize action.
         window.addEventListener('resize', this._repositionChild);
-        this._dispatcherRef = dis.register(this._onAction);
+        this.dispatcherRef = dis.register(this._onAction);
     }
 
     /**
@@ -156,7 +156,7 @@ export default class PersistedElement extends React.Component {
     renderApp() {
         const content = <MatrixClientContext.Provider value={MatrixClientPeg.get()}>
             <div ref={this.collectChild} style={this.props.style}>
-                {this.props.children}
+                { this.props.children }
             </div>
         </MatrixClientContext.Provider>;
 

src/components/views/elements/PowerSelector.js

@@ -161,7 +161,7 @@ export default class PowerSelector extends React.Component {
                     label={label} onChange={this.onSelectChange}
                     value={String(this.state.selectValue)} disabled={this.props.disabled}
                 >
-                    {options}
+                    { options }
                 </Field>
             );
         }

src/components/views/elements/RoomAliasField.tsx

@@ -55,7 +55,7 @@ export default class RoomAliasField extends React.PureComponent<IProps, IState>
     render() {
         const poundSign = (<span>#</span>);
         const aliasPostfix = ":" + this.props.domain;
-        const domain = (<span title={aliasPostfix}>{aliasPostfix}</span>);
+        const domain = (<span title={aliasPostfix}>{ aliasPostfix }</span>);
         const maxlength = 255 - this.props.domain.length - 2;   // 2 for # and :
         return (
             <Field

src/components/views/elements/ServerPicker.tsx

@@ -63,28 +63,28 @@ const ServerPicker = ({ title, dialogTitle, serverConfig, onServerConfigChange }
             });
         };
         editBtn = <AccessibleButton className="mx_ServerPicker_change" kind="link" onClick={onClick}>
-            {_t("Edit")}
+            { _t("Edit") }
         </AccessibleButton>;
     }
 
     let serverName: React.ReactNode = serverConfig.isNameResolvable ? serverConfig.hsName : serverConfig.hsUrl;
     if (serverConfig.hsNameIsDifferent) {
         serverName = <TextWithTooltip class="mx_Login_underlinedServerName" tooltip={serverConfig.hsUrl}>
-            {serverConfig.hsName}
+            { serverConfig.hsName }
         </TextWithTooltip>;
     }
 
     let desc;
     if (serverConfig.hsName === "matrix.org") {
         desc = <span className="mx_ServerPicker_desc">
-            {_t("Join millions for free on the largest public server")}
+            { _t("Join millions for free on the largest public server") }
         </span>;
     }
 
     return <div className="mx_ServerPicker">
-        <h3>{title || _t("Homeserver")}</h3>
+        <h3>{ title || _t("Homeserver") }</h3>
         <AccessibleButton className="mx_ServerPicker_help" onClick={onHelpClick} />
-        <span className="mx_ServerPicker_server">{serverName}</span>
+        <span className="mx_ServerPicker_server">{ serverName }</span>
         { editBtn }
         { desc }
     </div>;

src/components/views/elements/SettingsFlag.tsx

@@ -88,12 +88,12 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
                 onChange={this.checkBoxOnChange}
                 disabled={this.props.disabled || !canChange}
             >
-                {label}
+                { label }
             </StyledCheckbox>;
         } else {
             return (
                 <div className="mx_SettingsFlag">
-                    <span className="mx_SettingsFlag_label">{label}</span>
+                    <span className="mx_SettingsFlag_label">{ label }</span>
                     <ToggleSwitch
                         checked={this.state.value}
                         onChange={this.onChange}

src/components/views/elements/Slider.tsx

@@ -98,7 +98,7 @@ export default class Slider extends React.Component<IProps> {
                     { selection }
                 </div>
                 <div className="mx_Slider_dotContainer">
-                    {dots}
+                    { dots }
                 </div>
             </div>
         </div>;
@@ -139,7 +139,7 @@ class Dot extends React.PureComponent<IDotProps> {
             <div className={className} />
             <div className="mx_Slider_labelContainer">
                 <div className="mx_Slider_label">
-                    {this.props.label}
+                    { this.props.label }
                 </div>
             </div>
         </span>;

src/components/views/elements/SpellCheckLanguagesDropdown.tsx

@@ -45,7 +45,7 @@ export default class SpellCheckLanguagesDropdown extends React.Component<SpellCh
                                                                          SpellCheckLanguagesDropdownIState> {
     constructor(props) {
         super(props);
-        this._onSearchChange = this._onSearchChange.bind(this);
+        this.onSearchChange = this.onSearchChange.bind(this);
 
         this.state = {
             searchQuery: '',
@@ -76,10 +76,8 @@ export default class SpellCheckLanguagesDropdown extends React.Component<SpellCh
         }
     }
 
-    _onSearchChange(search) {
-        this.setState({
-            searchQuery: search,
-        });
+    private onSearchChange(searchQuery: string) {
+        this.setState({ searchQuery });
     }
 
     render() {
@@ -117,7 +115,7 @@ export default class SpellCheckLanguagesDropdown extends React.Component<SpellCh
             id="mx_LanguageDropdown"
             className={this.props.className}
             onOptionChange={this.props.onOptionChange}
-            onSearchChange={this._onSearchChange}
+            onSearchChange={this.onSearchChange}
             searchEnabled={true}
             value={value}
             label={_t("Language Dropdown")}>

src/components/views/elements/Spoiler.js

@@ -37,7 +37,7 @@ export default class Spoiler extends React.Component {
 
     render() {
         const reason = this.props.reason ? (
-            <span className="mx_EventTile_spoiler_reason">{"(" + this.props.reason + ")"}</span>
+            <span className="mx_EventTile_spoiler_reason">{ "(" + this.props.reason + ")" }</span>
         ) : null;
         // react doesn't allow appending a DOM node as child.
         // as such, we pass the this.props.contentHtml instead and then set the raw

src/components/views/elements/StyledCheckbox.tsx

@@ -44,7 +44,7 @@ export default class StyledCheckbox extends React.PureComponent<IProps, IState>
         return <span className={"mx_Checkbox " + className}>
             <input id={this.id} {...otherProps} type="checkbox" />
             <label htmlFor={this.id}>
-                {/* Using the div to center the image */}
+                { /* Using the div to center the image */ }
                 <div className="mx_Checkbox_background">
                     <img src={require("../../../../res/img/feather-customised/check.svg")} />
                 </div>

src/components/views/elements/StyledRadioButton.tsx

@@ -50,22 +50,22 @@ export default class StyledRadioButton extends React.PureComponent<IProps, IStat
 
         const radioButton = <React.Fragment>
             <input type='radio' disabled={disabled} {...otherProps} />
-            {/* Used to render the radio button circle */}
+            { /* Used to render the radio button circle */ }
             <div><div /></div>
         </React.Fragment>;
 
         if (childrenInLabel) {
             return <label className={_className}>
-                {radioButton}
-                <div className="mx_RadioButton_content">{children}</div>
+                { radioButton }
+                <div className="mx_RadioButton_content">{ children }</div>
                 <div className="mx_RadioButton_spacer" />
             </label>;
         } else {
             return <div className={_className}>
                 <label className="mx_RadioButton_innerLabel">
-                    {radioButton}
+                    { radioButton }
                 </label>
-                <div className="mx_RadioButton_content">{children}</div>
+                <div className="mx_RadioButton_content">{ children }</div>
                 <div className="mx_RadioButton_spacer" />
             </div>;
         }

src/components/views/elements/StyledRadioGroup.tsx

@@ -52,7 +52,7 @@ function StyledRadioGroup<T extends string>({
     };
 
     return <React.Fragment>
-        {definitions.map(d => <React.Fragment key={d.value}>
+        { definitions.map(d => <React.Fragment key={d.value}>
             <StyledRadioButton
                 className={classNames(className, d.className)}
                 onChange={_onChange}
@@ -65,7 +65,7 @@ function StyledRadioGroup<T extends string>({
                 { d.label }
             </StyledRadioButton>
             { d.description ? <span>{ d.description }</span> : null }
-        </React.Fragment>)}
+        </React.Fragment>) }
     </React.Fragment>;
 }
 

src/components/views/elements/TagTile.js

@@ -152,7 +152,7 @@ export default class TagTile extends React.Component {
                 "mx_TagTile_badge": true,
                 "mx_TagTile_badgeHighlight": badge.highlight,
             });
-            badgeElement = (<div className={badgeClasses}>{FormattingUtils.formatCount(badge.count)}</div>);
+            badgeElement = (<div className={badgeClasses}>{ FormattingUtils.formatCount(badge.count) }</div>);
         }
 
         const contextButton = this.state.hover || this.props.menuDisplayed ?
@@ -161,7 +161,7 @@ export default class TagTile extends React.Component {
                 onClick={this.openMenu}
                 inputRef={this.props.contextMenuButtonRef}
             >
-                {"\u00B7\u00B7\u00B7"}
+                { "\u00B7\u00B7\u00B7" }
             </AccessibleButton> : <div ref={this.props.contextMenuButtonRef} />;
 
         const AccessibleTooltipButton = sdk.getComponent("elements.AccessibleTooltipButton");
@@ -184,8 +184,8 @@ export default class TagTile extends React.Component {
                     width={avatarSize}
                     height={avatarSize}
                 />
-                {contextButton}
-                {badgeElement}
+                { contextButton }
+                { badgeElement }
             </div>
         </AccessibleTooltipButton>;
     }

src/components/views/elements/TextWithTooltip.js

@@ -51,12 +51,12 @@ export default class TextWithTooltip extends React.Component {
 
         return (
             <span {...props} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave} className={className}>
-                {children}
-                {this.state.hover && <Tooltip
+                { children }
+                { this.state.hover && <Tooltip
                     {...tooltipProps}
                     label={tooltip}
                     tooltipClassName={tooltipClass}
-                    className={"mx_TextWithTooltip_tooltip"}
+                    className="mx_TextWithTooltip_tooltip"
                 /> }
             </span>
         );

src/components/views/elements/Validation.tsx

@@ -147,16 +147,16 @@ export default function withValidation<T = undefined, D = void>({
         let details;
         if (results && results.length) {
             details = <ul className="mx_Validation_details">
-                {results.map(result => {
+                { results.map(result => {
                     const classes = classNames({
                         "mx_Validation_detail": true,
                         "mx_Validation_valid": result.valid,
                         "mx_Validation_invalid": !result.valid,
                     });
                     return <li key={result.key} className={classes}>
-                        {result.text}
+                        { result.text }
                     </li>;
-                })}
+                }) }
             </ul>;
         }
 
@@ -165,14 +165,14 @@ export default function withValidation<T = undefined, D = void>({
             // We're setting `this` to whichever component holds the validation
             // function. That allows rules to access the state of the component.
             const content = description.call(this, derivedData);
-            summary = <div className="mx_Validation_description">{content}</div>;
+            summary = <div className="mx_Validation_description">{ content }</div>;
         }
 
         let feedback;
         if (summary || details) {
             feedback = <div className="mx_Validation">
-                {summary}
-                {details}
+                { summary }
+                { details }
             </div>;
         }