Merge pull request #5144 from matrix-org/travis/communities/proto/create-flow

Communities v2 prototype: Create community flow

src/components/structures/MatrixChat.tsx

@@ -77,6 +77,7 @@ import ErrorDialog from "../views/dialogs/ErrorDialog";
 import { RoomNotificationStateStore } from "../../stores/notifications/RoomNotificationStateStore";
 import { SettingLevel } from "../../settings/SettingLevel";
 import { leaveRoomBehaviour } from "../../utils/membership";
+import CreateCommunityPrototypeDialog from "../views/dialogs/CreateCommunityPrototypeDialog";
 
 /** constants for MatrixChat.state.view */
 export enum Views {
@@ -620,7 +621,10 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 this.createRoom(payload.public);
                 break;
             case 'view_create_group': {
-                const CreateGroupDialog = sdk.getComponent("dialogs.CreateGroupDialog");
+                let CreateGroupDialog = sdk.getComponent("dialogs.CreateGroupDialog")
+                if (SettingsStore.getValue("feature_communities_v2_prototypes")) {
+                    CreateGroupDialog = CreateCommunityPrototypeDialog;
+                }
                 Modal.createTrackedDialog('Create Community', '', CreateGroupDialog);
                 break;
             }

src/components/structures/TagPanel.js

@@ -146,6 +146,24 @@ const TagPanel = createReactClass({
             mx_TagPanel_items_selected: itemsSelected,
         });
 
+        let createButton = (
+            <ActionButton
+                tooltip
+                label={_t("Communities")}
+                action="toggle_my_groups"
+                className="mx_TagTile mx_TagTile_plus" />
+        );
+
+        if (SettingsStore.getValue("feature_communities_v2_prototypes")) {
+            createButton = (
+                <ActionButton
+                    tooltip
+                    label={_t("Create community")}
+                    action="view_create_group"
+                    className="mx_TagTile mx_TagTile_plus" />
+            );
+        }
+
         return <div className={classes}>
             <div className="mx_TagPanel_clearButton_container">
                 { clearButton }
@@ -168,11 +186,7 @@ const TagPanel = createReactClass({
                                 { this.renderGlobalIcon() }
                                 { tags }
                                 <div>
-                                    <ActionButton
-                                        tooltip
-                                        label={_t("Communities")}
-                                        action="toggle_my_groups"
-                                        className="mx_TagTile mx_TagTile_plus" />
+                                    {createButton}
                                 </div>
                                 { provided.placeholder }
                             </div>

src/components/views/dialogs/CommunityPrototypeInviteDialog.tsx

@@ -0,0 +1,252 @@
+/*
+Copyright 2020 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.
+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, { ChangeEvent, FormEvent } from 'react';
+import BaseDialog from "./BaseDialog";
+import { _t } from "../../../languageHandler";
+import { IDialogProps } from "./IDialogProps";
+import Field from "../elements/Field";
+import AccessibleButton from "../elements/AccessibleButton";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import InfoTooltip from "../elements/InfoTooltip";
+import dis from "../../../dispatcher/dispatcher";
+import {showCommunityRoomInviteDialog} from "../../../RoomInvite";
+import { arrayFastClone } from "../../../utils/arrays";
+import SdkConfig from "../../../SdkConfig";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import InviteDialog from "./InviteDialog";
+import BaseAvatar from "../avatars/BaseAvatar";
+import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
+import {inviteMultipleToRoom, showAnyInviteErrors} from "../../../RoomInvite";
+import {humanizeTime} from "../../../utils/humanize";
+import StyledCheckbox from "../elements/StyledCheckbox";
+import Modal from "../../../Modal";
+import ErrorDialog from "./ErrorDialog";
+
+interface IProps extends IDialogProps {
+    roomId: string;
+    communityName: string;
+}
+
+interface IPerson {
+    userId: string;
+    user: RoomMember;
+    lastActive: number;
+}
+
+interface IState {
+    emailTargets: string[];
+    userTargets: string[];
+    showPeople: boolean;
+    people: IPerson[];
+    numPeople: number;
+    busy: boolean;
+}
+
+export default class CommunityPrototypeInviteDialog extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            emailTargets: [],
+            userTargets: [],
+            showPeople: false,
+            people: this.buildSuggestions(),
+            numPeople: 5, // arbitrary default
+            busy: false,
+        };
+    }
+
+    private buildSuggestions(): IPerson[] {
+        const alreadyInvited = new Set([MatrixClientPeg.get().getUserId(), SdkConfig.get()['welcomeUserId']]);
+        if (this.props.roomId) {
+            const room = MatrixClientPeg.get().getRoom(this.props.roomId);
+            if (!room) throw new Error("Room ID given to InviteDialog does not look like a room");
+            room.getMembersWithMembership('invite').forEach(m => alreadyInvited.add(m.userId));
+            room.getMembersWithMembership('join').forEach(m => alreadyInvited.add(m.userId));
+            // add banned users, so we don't try to invite them
+            room.getMembersWithMembership('ban').forEach(m => alreadyInvited.add(m.userId));
+        }
+
+        return InviteDialog.buildRecents(alreadyInvited);
+    }
+
+    private onSubmit = async (ev: FormEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        this.setState({busy: true});
+        try {
+            const targets = [...this.state.emailTargets, ...this.state.userTargets];
+            const result = await inviteMultipleToRoom(this.props.roomId, targets);
+            const room = MatrixClientPeg.get().getRoom(this.props.roomId);
+            const success = showAnyInviteErrors(result.states, room, result.inviter);
+            if (success) {
+                this.props.onFinished(true);
+            } else {
+                this.setState({busy: false});
+            }
+        } catch (e) {
+            this.setState({busy: false});
+            console.error(e);
+            Modal.createTrackedDialog('Failed to invite', '', ErrorDialog, {
+                title: _t("Failed to invite"),
+                description: ((e && e.message) ? e.message : _t("Operation failed")),
+            });
+        }
+    };
+
+    private onAddressChange = (ev: ChangeEvent<HTMLInputElement>, index: number) => {
+        const targets = arrayFastClone(this.state.emailTargets);
+        if (index >= targets.length) {
+            targets.push(ev.target.value);
+        } else {
+            targets[index] = ev.target.value;
+        }
+        this.setState({emailTargets: targets});
+    };
+
+    private onAddressBlur = (index: number) => {
+        const targets = arrayFastClone(this.state.emailTargets);
+        if (index >= targets.length) return; // not important
+        if (targets[index].trim() === "") {
+            targets.splice(index, 1);
+            this.setState({emailTargets: targets});
+        }
+    };
+
+    private onShowPeopleClick = () => {
+        this.setState({showPeople: !this.state.showPeople});
+    };
+
+    private setPersonToggle = (person: IPerson, selected: boolean) => {
+        const targets = arrayFastClone(this.state.userTargets);
+        if (selected && !targets.includes(person.userId)) {
+            targets.push(person.userId);
+        } else if (!selected && targets.includes(person.userId)) {
+            targets.splice(targets.indexOf(person.userId), 1);
+        }
+        this.setState({userTargets: targets});
+    };
+
+    private renderPerson(person: IPerson, key: any) {
+        const avatarSize = 36;
+        return (
+            <div className="mx_CommunityPrototypeInviteDialog_person" key={key}>
+                <BaseAvatar
+                    url={getHttpUriForMxc(
+                        MatrixClientPeg.get().getHomeserverUrl(), person.user.getMxcAvatarUrl(),
+                        avatarSize, avatarSize, "crop")}
+                    name={person.user.name}
+                    idName={person.user.userId}
+                    width={avatarSize}
+                    height={avatarSize}
+                />
+                <div className="mx_CommunityPrototypeInviteDialog_personIdentifiers">
+                    <span className="mx_CommunityPrototypeInviteDialog_personName">{person.user.name}</span>
+                    <span className="mx_CommunityPrototypeInviteDialog_personId">{person.userId}</span>
+                </div>
+                <StyledCheckbox onChange={(e) => this.setPersonToggle(person, e.target.checked)} />
+            </div>
+        );
+    }
+
+    private onShowMorePeople = () => {
+        this.setState({numPeople: this.state.numPeople + 5}); // arbitrary increase
+    };
+
+    public render() {
+        const emailAddresses = [];
+        this.state.emailTargets.forEach((address, i) => {
+            emailAddresses.push(
+                <Field
+                    key={i}
+                    value={address}
+                    onChange={(e) => this.onAddressChange(e, i)}
+                    label={_t("Email address")}
+                    placeholder={_t("Email address")}
+                    onBlur={() => this.onAddressBlur(i)}
+                />
+            );
+        });
+
+        // Push a clean input
+        emailAddresses.push(
+            <Field
+                key={emailAddresses.length}
+                value={""}
+                onChange={(e) => this.onAddressChange(e, emailAddresses.length)}
+                label={emailAddresses.length > 0 ? _t("Add another email") : _t("Email address")}
+                placeholder={emailAddresses.length > 0 ? _t("Add another email") : _t("Email address")}
+            />
+        );
+
+        let peopleIntro = null;
+        let people = [];
+        if (this.state.showPeople) {
+            const humansToPresent = this.state.people.slice(0, this.state.numPeople);
+            humansToPresent.forEach((person, i) => {
+                people.push(this.renderPerson(person, i));
+            });
+            if (humansToPresent.length < this.state.people.length) {
+                people.push(
+                    <AccessibleButton
+                        onClick={this.onShowMorePeople}
+                        kind="link" key="more"
+                        className="mx_CommunityPrototypeInviteDialog_morePeople"
+                    >{_t("Show more")}</AccessibleButton>
+                );
+            }
+        }
+        if (this.state.people.length > 0) {
+            peopleIntro = (
+                <div className="mx_CommunityPrototypeInviteDialog_people">
+                    <span>{_t("People you know on %(brand)s", {brand: SdkConfig.get().brand})}</span>
+                    <AccessibleButton onClick={this.onShowPeopleClick}>
+                        {this.state.showPeople ? _t("Hide") : _t("Show")}
+                    </AccessibleButton>
+                </div>
+            );
+        }
+
+        let buttonText = _t("Skip");
+        const targetCount = this.state.userTargets.length + this.state.emailTargets.length;
+        if (targetCount > 0) {
+            buttonText = _t("Send %(count)s invites", {count: targetCount});
+        }
+
+        return (
+            <BaseDialog
+                className="mx_CommunityPrototypeInviteDialog"
+                onFinished={this.props.onFinished}
+                title={_t("Invite people to join %(communityName)s", {communityName: this.props.communityName})}
+            >
+                <form onSubmit={this.onSubmit}>
+                    <div className="mx_Dialog_content">
+                        {emailAddresses}
+                        {peopleIntro}
+                        {people}
+                        <AccessibleButton
+                            kind="primary" onClick={this.onSubmit}
+                            disabled={this.state.busy}
+                            className="mx_CommunityPrototypeInviteDialog_primaryButton"
+                        >{buttonText}</AccessibleButton>
+                    </div>
+                </form>
+            </BaseDialog>
+        );
+    }
+}

src/components/views/dialogs/CreateCommunityPrototypeDialog.tsx

@@ -0,0 +1,220 @@
+/*
+Copyright 2020 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.
+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, { ChangeEvent } from 'react';
+import BaseDialog from "./BaseDialog";
+import { _t } from "../../../languageHandler";
+import { IDialogProps } from "./IDialogProps";
+import Field from "../elements/Field";
+import AccessibleButton from "../elements/AccessibleButton";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import InfoTooltip from "../elements/InfoTooltip";
+import dis from "../../../dispatcher/dispatcher";
+import {showCommunityRoomInviteDialog} from "../../../RoomInvite";
+
+interface IProps extends IDialogProps {
+}
+
+interface IState {
+    name: string;
+    localpart: string;
+    error: string;
+    busy: boolean;
+    avatarFile: File;
+    avatarPreview: string;
+}
+
+export default class CreateCommunityPrototypeDialog extends React.PureComponent<IProps, IState> {
+    private avatarUploadRef: React.RefObject<HTMLInputElement> = React.createRef();
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            name: "",
+            localpart: "",
+            error: null,
+            busy: false,
+            avatarFile: null,
+            avatarPreview: null,
+        };
+    }
+
+    private onNameChange = (ev: ChangeEvent<HTMLInputElement>) => {
+        const localpart = (ev.target.value || "").toLowerCase().replace(/[^a-z0-9.\-_]/g, '-');
+        this.setState({name: ev.target.value, localpart});
+    };
+
+    private onSubmit = async (ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        if (this.state.busy) return;
+
+        // We'll create the community now to see if it's taken, leaving it active in
+        // the background for the user to look at while they invite people.
+        this.setState({busy: true});
+        try {
+            let avatarUrl = ''; // must be a string for synapse to accept it
+            if (this.state.avatarFile) {
+                avatarUrl = await MatrixClientPeg.get().uploadContent(this.state.avatarFile);
+            }
+
+            const result = await MatrixClientPeg.get().createGroup({
+                localpart: this.state.localpart,
+                profile: {
+                    name: this.state.name,
+                    avatar_url: avatarUrl,
+                },
+            });
+
+            // Ensure the tag gets selected now that we've created it
+            dis.dispatch({action: 'deselect_tags'}, true);
+            dis.dispatch({
+                action: 'select_tag',
+                tag: result.group_id,
+            });
+
+            // Close our own dialog before moving much further
+            this.props.onFinished(true);
+
+            if (result.room_id) {
+                dis.dispatch({
+                    action: 'view_room',
+                    room_id: result.room_id,
+                });
+                showCommunityRoomInviteDialog(result.room_id, this.state.name);
+            } else {
+                dis.dispatch({
+                    action: 'view_group',
+                    group_id: result.group_id,
+                    group_is_new: true,
+                });
+            }
+        } catch (e) {
+            console.error(e);
+            this.setState({
+                busy: false,
+                error: _t(
+                    "There was an error creating your community. The name may be taken or the " +
+                    "server is unable to process your request.",
+                ),
+            });
+        }
+    };
+
+    private onAvatarChanged = (e: ChangeEvent<HTMLInputElement>) => {
+        if (!e.target.files || !e.target.files.length) {
+            this.setState({avatarFile: null});
+        } else {
+            this.setState({busy: true});
+            const file = e.target.files[0];
+            const reader = new FileReader();
+            reader.onload = (ev: ProgressEvent<FileReader>) => {
+                this.setState({avatarFile: file, busy: false, avatarPreview: ev.target.result as string});
+            };
+            reader.readAsDataURL(file);
+        }
+    };
+
+    private onChangeAvatar = () => {
+        if (this.avatarUploadRef.current) this.avatarUploadRef.current.click();
+    };
+
+    public render() {
+        let communityId = null;
+        if (this.state.localpart) {
+            communityId = (
+                <span className="mx_CreateCommunityPrototypeDialog_communityId">
+                    {_t("Community ID: +<localpart />:%(domain)s", {
+                        domain: MatrixClientPeg.getHomeserverName(),
+                    }, {
+                        localpart: () => <u>{this.state.localpart}</u>,
+                    })}
+                    <InfoTooltip
+                        tooltip={_t(
+                            "Use this when referencing your community to others. The community ID " +
+                            "cannot be changed.",
+                        )}
+                    />
+                </span>
+            );
+        }
+
+        let helpText = (
+            <span className="mx_CreateCommunityPrototypeDialog_subtext">
+                {_t("You can change this later if needed.")}
+            </span>
+        );
+        if (this.state.error) {
+            helpText = (
+                <span className="mx_CreateCommunityPrototypeDialog_subtext mx_CreateCommunityPrototypeDialog_subtext_error">
+                    {this.state.error}
+                </span>
+            );
+        }
+
+        let preview = <img src={this.state.avatarPreview} className="mx_CreateCommunityPrototypeDialog_avatar" />;
+        if (!this.state.avatarPreview) {
+            preview = <div className="mx_CreateCommunityPrototypeDialog_placeholderAvatar" />
+        }
+
+        return (
+            <BaseDialog
+                className="mx_CreateCommunityPrototypeDialog"
+                onFinished={this.props.onFinished}
+                title={_t("What's the name of your community or team?")}
+            >
+                <form onSubmit={this.onSubmit}>
+                    <div className="mx_Dialog_content">
+                        <div className="mx_CreateCommunityPrototypeDialog_colName">
+                            <Field
+                                value={this.state.name}
+                                onChange={this.onNameChange}
+                                placeholder={_t("Enter name")}
+                                label={_t("Enter name")}
+                            />
+                            {helpText}
+                            <span className="mx_CreateCommunityPrototypeDialog_subtext">
+                                {/*nbsp is to reserve the height of this element when there's nothing*/}
+                                &nbsp;{communityId}
+                            </span>
+                            <AccessibleButton kind="primary" onClick={this.onSubmit} disabled={this.state.busy}>
+                                {_t("Create")}
+                            </AccessibleButton>
+                        </div>
+                        <div className="mx_CreateCommunityPrototypeDialog_colAvatar">
+                            <input
+                                type="file" style={{display: "none"}}
+                                ref={this.avatarUploadRef} accept="image/*"
+                                onChange={this.onAvatarChanged}
+                            />
+                            <AccessibleButton onClick={this.onChangeAvatar} className="mx_CreateCommunityPrototypeDialog_avatarContainer">
+                                {preview}
+                            </AccessibleButton>
+                            <div className="mx_CreateCommunityPrototypeDialog_tip">
+                                <b>{_t("Add image (optional)")}</b>
+                                <span>
+                                    {_t("An image will help people identify your community.")}
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </form>
+            </BaseDialog>
+        );
+    }
+}

src/components/views/dialogs/CreateGroupDialog.js

@@ -88,6 +88,13 @@ export default createReactClass({
                     action: 'view_room',
                     room_id: result.room_id,
                 });
+
+                // Ensure the tag gets selected now that we've created it
+                dis.dispatch({action: 'deselect_tags'}, true);
+                dis.dispatch({
+                    action: 'select_tag',
+                    tag: result.group_id,
+                });
             } else {
                 dis.dispatch({
                     action: 'view_group',

src/components/views/dialogs/IDialogProps.ts

@@ -0,0 +1,19 @@
+/*
+Copyright 2020 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.
+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.
+*/
+
+export interface IDialogProps {
+    onFinished: (bool) => void;
+}

src/components/views/dialogs/InviteDialog.js

@@ -327,7 +327,7 @@ export default class InviteDialog extends React.PureComponent {
         this.state = {
             targets: [], // array of Member objects (see interface above)
             filterText: "",
-            recents: this._buildRecents(alreadyInvited),
+            recents: InviteDialog.buildRecents(alreadyInvited),
             numRecentsShown: INITIAL_ROOMS_SHOWN,
             suggestions: this._buildSuggestions(alreadyInvited),
             numSuggestionsShown: INITIAL_ROOMS_SHOWN,
@@ -344,7 +344,7 @@ export default class InviteDialog extends React.PureComponent {
         this._editorRef = createRef();
     }
 
-    _buildRecents(excludedTargetIds: Set<string>): {userId: string, user: RoomMember, lastActive: number} {
+    static buildRecents(excludedTargetIds: Set<string>): {userId: string, user: RoomMember, lastActive: number} {
         const rooms = DMRoomMap.shared().getUniqueRoomsWithIndividuals(); // map of userId => js-sdk Room
 
         // Also pull in all the rooms tagged as DefaultTagID.DM so we don't miss anything. Sometimes the

src/components/views/dialogs/ServerOfflineDialog.tsx

@@ -27,9 +27,9 @@ import Spinner from "../elements/Spinner";
 import AccessibleButton from "../elements/AccessibleButton";
 import { UPDATE_EVENT } from "../../../stores/AsyncStore";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import { IDialogProps } from "./IDialogProps";
 
-interface IProps {
-    onFinished: (bool) => void;
+interface IProps extends IDialogProps {
 }
 
 export default class ServerOfflineDialog extends React.PureComponent<IProps> {

src/components/views/dialogs/ShareDialog.tsx

@@ -31,6 +31,7 @@ import {toRightOf} from "../../structures/ContextMenu";
 import {copyPlaintext, selectText} from "../../../utils/strings";
 import StyledCheckbox from '../elements/StyledCheckbox';
 import AccessibleTooltipButton from '../elements/AccessibleTooltipButton';
+import { IDialogProps } from "./IDialogProps";
 
 const socials = [
     {
@@ -60,8 +61,7 @@ const socials = [
     },
 ];
 
-interface IProps {
-    onFinished: () => void;
+interface IProps extends IDialogProps {
     target: Room | User | Group | RoomMember | MatrixEvent;
     permalinkCreator: RoomPermalinkCreator;
 }

src/components/views/elements/InfoTooltip.tsx

@@ -0,0 +1,73 @@
+/*
+Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
+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.
+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 classNames from 'classnames';
+
+import AccessibleButton from "./AccessibleButton";
+import Tooltip from './Tooltip';
+import { _t } from "../../../languageHandler";
+
+interface ITooltipProps {
+    tooltip?: React.ReactNode;
+    tooltipClassName?: string;
+}
+
+interface IState {
+    hover: boolean;
+}
+
+export default class InfoTooltip extends React.PureComponent<ITooltipProps, IState> {
+    constructor(props: ITooltipProps) {
+        super(props);
+        this.state = {
+            hover: false,
+        };
+    }
+
+    onMouseOver = () => {
+        this.setState({
+            hover: true,
+        });
+    };
+
+    onMouseLeave = () => {
+        this.setState({
+            hover: false,
+        });
+    };
+
+    render() {
+        const {tooltip, children, tooltipClassName} = this.props;
+        const title = _t("Information");
+
+        // Tooltip are forced on the right for a more natural feel to them on info icons
+        const tip = this.state.hover ? <Tooltip
+            className="mx_InfoTooltip_container"
+            tooltipClassName={classNames("mx_InfoTooltip_tooltip", tooltipClassName)}
+            label={tooltip || title}
+            forceOnRight={true}
+        /> : <div />;
+        return (
+            <div onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave} className="mx_InfoTooltip">
+                <span className="mx_InfoTooltip_icon" aria-label={title} />
+                {children}
+                {tip}
+            </div>
+        );
+    }
+}