{
viaServers={this.props.viaServers}
key={this.props.currentRoomId || 'roomview'}
resizeNotifier={this.props.resizeNotifier}
+ justCreatedOpts={this.props.roomJustCreatedOpts}
/>;
break;
diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx
index 5045e44182..8e3d3e6b5f 100644
--- a/src/components/structures/MatrixChat.tsx
+++ b/src/components/structures/MatrixChat.tsx
@@ -48,7 +48,7 @@ import * as Lifecycle from '../../Lifecycle';
import '../../stores/LifecycleStore';
import PageTypes from '../../PageTypes';
-import createRoom from "../../createRoom";
+import createRoom, {IOpts} from "../../createRoom";
import {_t, _td, getCurrentLanguage} from '../../languageHandler';
import SettingsStore from "../../settings/SettingsStore";
import ThemeController from "../../settings/controllers/ThemeController";
@@ -144,6 +144,8 @@ interface IRoomInfo {
oob_data?: object;
via_servers?: string[];
threepid_invite?: IThreepidInvite;
+
+ justCreatedOpts?: IOpts;
}
/* eslint-enable camelcase */
@@ -201,6 +203,7 @@ interface IState {
viaServers?: string[];
pendingInitialSync?: boolean;
justRegistered?: boolean;
+ roomJustCreatedOpts?: IOpts;
}
export default class MatrixChat extends React.PureComponent {
@@ -922,6 +925,7 @@ export default class MatrixChat extends React.PureComponent {
roomOobData: roomInfo.oob_data,
viaServers: roomInfo.via_servers,
ready: true,
+ roomJustCreatedOpts: roomInfo.justCreatedOpts,
}, () => {
this.notifyNewScreen('room/' + presentedId, replaceLast);
});
diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index d66049d3a5..3d9df2e927 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -24,7 +24,11 @@ import dis from '../../dispatcher/dispatcher';
import RateLimitedFunc from '../../ratelimitedfunc';
import { showGroupInviteDialog, showGroupAddRoomDialog } from '../../GroupAddressPicker';
import GroupStore from '../../stores/GroupStore';
-import {RightPanelPhases, RIGHT_PANEL_PHASES_NO_ARGS} from "../../stores/RightPanelStorePhases";
+import {
+ RightPanelPhases,
+ RIGHT_PANEL_PHASES_NO_ARGS,
+ RIGHT_PANEL_SPACE_PHASES,
+} from "../../stores/RightPanelStorePhases";
import RightPanelStore from "../../stores/RightPanelStore";
import MatrixClientContext from "../../contexts/MatrixClientContext";
import {Action} from "../../dispatcher/actions";
@@ -79,6 +83,8 @@ export default class RightPanel extends React.Component {
return RightPanelPhases.GroupMemberList;
}
return rps.groupPanelPhase;
+ } else if (this.props.room?.isSpaceRoom() && !RIGHT_PANEL_SPACE_PHASES.includes(rps.roomPanelPhase)) {
+ return RightPanelPhases.SpaceMemberList;
} else if (userForPanel) {
// XXX FIXME AAAAAARGH: What is going on with this class!? It takes some of its state
// from its props and some from a store, except if the contents of the store changes
@@ -99,9 +105,8 @@ export default class RightPanel extends React.Component {
return rps.roomPanelPhase;
}
return RightPanelPhases.RoomMemberInfo;
- } else {
- return rps.roomPanelPhase;
}
+ return rps.roomPanelPhase;
}
componentDidMount() {
@@ -181,6 +186,7 @@ export default class RightPanel extends React.Component {
verificationRequest: payload.verificationRequest,
verificationRequestPromise: payload.verificationRequestPromise,
widgetId: payload.widgetId,
+ space: payload.space,
});
}
}
@@ -232,6 +238,13 @@ export default class RightPanel extends React.Component {
panel = {
});
};
- private onRejectButtonClicked = ev => {
+ private onRejectButtonClicked = () => {
this.setState({
rejecting: true,
});
@@ -1457,7 +1460,7 @@ export default class RoomView extends React.Component {
}
};
- private onRejectThreepidInviteButtonClicked = ev => {
+ private onRejectThreepidInviteButtonClicked = () => {
// We can reject 3pid invites in the same way that we accept them,
// using /leave rather than /join. In the short term though, we
// just ignore them.
@@ -1720,7 +1723,7 @@ export default class RoomView extends React.Component {
}
const myMembership = this.state.room.getMyMembership();
- if (myMembership == 'invite') {
+ if (myMembership === "invite" && !this.state.room.isSpaceRoom()) { // SpaceRoomView handles invites itself
if (this.state.joining || this.state.rejecting) {
return (
@@ -1849,7 +1852,7 @@ export default class RoomView extends React.Component {
room={this.state.room}
/>
);
- if (!this.state.canPeek) {
+ if (!this.state.canPeek && !this.state.room?.isSpaceRoom()) {
return (
{ previewBar }
@@ -1871,6 +1874,18 @@ export default class RoomView extends React.Component {
);
}
+ if (this.state.room?.isSpaceRoom()) {
+ return {
+ const members = useRoomMembers(room);
+ const count = members.length;
+
+ if (children) return children(count);
+ return count;
+};
+
+const useMyRoomMembership = (room: Room) => {
+ const [membership, setMembership] = useState(room.getMyMembership());
+ useEventEmitter(room, "Room.myMembership", () => {
+ setMembership(room.getMyMembership());
+ });
+ return membership;
+};
+
+const SpaceLanding = ({ space, onJoinButtonClicked, onRejectButtonClicked }) => {
+ const cli = useContext(MatrixClientContext);
+ const myMembership = useMyRoomMembership(space);
+ const joinRule = space.getJoinRule();
+ const userId = cli.getUserId();
+
+ let joinButtons;
+ if (myMembership === "invite") {
+ joinButtons = setRoomName(i, ev.target.value)}
+ />;
+ });
+
+ const onNextClick = async () => {
+ setError("");
+ setBusy(true);
+ try {
+ await Promise.all(roomNames.map(name => name.trim()).filter(Boolean).map(name => {
+ return createRoom({
+ createOpts: {
+ preset: space.getJoinRule() === "public" ? Preset.PublicChat : Preset.PrivateChat,
+ name,
+ },
+ spinner: false,
+ encryption: false,
+ andView: false,
+ inlineErrors: true,
+ parentSpace: space,
+ });
+ }));
+ onFinished();
+ } catch (e) {
+ console.error("Failed to create initial space rooms", e);
+ setError(_t("Failed to create initial space rooms"));
+ }
+ setBusy(false);
+ };
+
+ let onClick = onFinished;
+ let buttonLabel = _t("Skip for now");
+ if (roomNames.some(name => name.trim())) {
+ onClick = onNextClick;
+ buttonLabel = busy ? _t("Creating rooms...") : _t("Next")
+ }
+
+ return (null);
+
+ return [] = [useRef(), useRef(), useRef()];
+ const [emailAddresses, setEmailAddress] = useStateArray(numFields, "");
+ const fields = new Array(numFields).fill(0).map((_, i) => {
+ const name = "emailAddress" + i;
+ return setEmailAddress(i, ev.target.value)}
+ ref={fieldRefs[i]}
+ onValidate={validateEmailRules}
+ />;
+ });
+
+ const onNextClick = async () => {
+ setError("");
+ for (let i = 0; i < fieldRefs.length; i++) {
+ const fieldRef = fieldRefs[i];
+ const valid = await fieldRef.current.validate({ allowEmpty: true });
+
+ if (valid === false) { // true/null are allowed
+ fieldRef.current.focus();
+ fieldRef.current.validate({ allowEmpty: true, focused: true });
+ return;
+ }
+ }
+
+ setBusy(true);
+ const targetIds = emailAddresses.map(name => name.trim()).filter(Boolean);
+ try {
+ const result = await inviteMultipleToRoom(space.roomId, targetIds);
+
+ const failedUsers = Object.keys(result.states).filter(a => result.states[a] === "error");
+ if (failedUsers.length > 0) {
+ console.log("Failed to invite users to space: ", result);
+ setError(_t("Failed to invite the following users to your space: %(csvUsers)s", {
+ csvUsers: failedUsers.join(", "),
+ }));
+ } else {
+ onFinished();
+ }
+ } catch (err) {
+ console.error("Failed to invite users to space: ", err);
+ setError(_t("We couldn't invite those users. Please check the users you want to invite and try again."));
+ }
+ setBusy(false);
+ };
+
+ return {
+ static contextType = MatrixClientContext;
+
+ private readonly creator: string;
+ private readonly dispatcherRef: string;
+ private readonly rightPanelStoreToken: EventSubscription;
+
+ constructor(props, context) {
+ super(props, context);
+
+ let phase = Phase.Landing;
+
+ this.creator = this.props.space.currentState.getStateEvents(EventType.RoomCreate, "")?.getSender();
+ const showSetup = this.props.justCreatedOpts && this.context.getUserId() === this.creator;
+
+ if (showSetup) {
+ phase = this.props.justCreatedOpts.createOpts.preset === Preset.PublicChat
+ ? Phase.PublicCreateRooms : Phase.PrivateScope;
+ }
+
+ this.state = {
+ phase,
+ showRightPanel: RightPanelStore.getSharedInstance().isOpenForRoom,
+ };
+
+ this.dispatcherRef = defaultDispatcher.register(this.onAction);
+ this.rightPanelStoreToken = RightPanelStore.getSharedInstance().addListener(this.onRightPanelStoreUpdate);
+ }
+
+ componentWillUnmount() {
+ defaultDispatcher.unregister(this.dispatcherRef);
+ this.rightPanelStoreToken.remove();
+ }
+
+ private onRightPanelStoreUpdate = () => {
+ this.setState({
+ showRightPanel: RightPanelStore.getSharedInstance().isOpenForRoom,
+ });
+ };
+
+ private onAction = (payload: ActionPayload) => {
+ if (payload.action !== Action.ViewUser && payload.action !== "view_3pid_invite") return;
+
+ if (payload.action === Action.ViewUser && payload.member) {
+ defaultDispatcher.dispatch({
+ action: Action.SetRightPanelPhase,
+ phase: RightPanelPhases.SpaceMemberInfo,
+ refireParams: {
+ space: this.props.space,
+ member: payload.member,
+ },
+ });
+ } else if (payload.action === "view_3pid_invite" && payload.event) {
+ defaultDispatcher.dispatch({
+ action: Action.SetRightPanelPhase,
+ phase: RightPanelPhases.Space3pidMemberInfo,
+ refireParams: {
+ space: this.props.space,
+ event: payload.event,
+ },
+ });
+ } else {
+ defaultDispatcher.dispatch({
+ action: Action.SetRightPanelPhase,
+ phase: RightPanelPhases.SpaceMemberList,
+ refireParams: { space: this.props.space },
+ });
+ }
+ };
+
+ private renderBody() {
+ switch (this.state.phase) {
+ case Phase.Landing:
+ return this.setState({ phase: Phase.PublicShare })}
+ />;
+ case Phase.PublicShare:
+ return this.setState({ phase: Phase.Landing })}
+ />;
+
+ case Phase.PrivateScope:
+ return {
+ this.setState({ phase: invite ? Phase.PrivateInvite : Phase.PrivateCreateRooms });
+ }}
+ />;
+ case Phase.PrivateInvite:
+ return this.setState({ phase: Phase.PrivateCreateRooms })}
+ />;
+ case Phase.PrivateCreateRooms:
+ return this.setState({ phase: Phase.Landing })}
+ />;
+ }
+ }
+
+ render() {
+ const rightPanel = this.state.showRightPanel && this.state.phase === Phase.Landing
+ ?
+
+
+ { this.renderBody() }
+
+
+ ;
+ }
+}
diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx
index 5b936e822c..9bc5b6476f 100644
--- a/src/components/views/dialogs/InviteDialog.tsx
+++ b/src/components/views/dialogs/InviteDialog.tsx
@@ -15,7 +15,7 @@ limitations under the License.
*/
import React, {createRef} from 'react';
-import {_t} from "../../../languageHandler";
+import {_t, _td} from "../../../languageHandler";
import * as sdk from "../../../index";
import {MatrixClientPeg} from "../../../MatrixClientPeg";
import {makeRoomPermalink, makeUserPermalink} from "../../../utils/permalinks/Permalinks";
@@ -48,6 +48,7 @@ import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
export const KIND_DM = "dm";
export const KIND_INVITE = "invite";
+export const KIND_SPACE_INVITE = "space_invite";
export const KIND_CALL_TRANSFER = "call_transfer";
const INITIAL_ROOMS_SHOWN = 3; // Number of rooms to show at first
@@ -309,7 +310,7 @@ interface IInviteDialogProps {
// not provided.
kind: string,
- // The room ID this dialog is for. Only required for KIND_INVITE.
+ // The room ID this dialog is for. Only required for KIND_INVITE and KIND_SPACE_INVITE.
roomId: string,
// The call to transfer. Only required for KIND_CALL_TRANSFER.
@@ -348,8 +349,8 @@ export default class InviteDialog extends React.PureComponent();
+ const [avatar, setAvatarDataUrl] = useState(avatarUrl); // avatar data url cache
+
+ let avatarSection;
+ if (avatarDisabled) {
+ if (avatar) {
+ avatarSection = 
;
+ } else {
+ avatarSection = ;
+ }
+ } else {
+ if (avatar) {
+ avatarSection =
+ avatarUploadRef.current?.click()}
+ element="img"
+ src={avatar}
+ alt=""
+ />
+ {
+ avatarUploadRef.current.value = "";
+ setAvatarDataUrl(undefined);
+ setAvatar(undefined);
+ }} kind="link" className="mx_SpaceBasicSettings_avatar_remove">
+ { _t("Delete") }
+
+ ;
+ } else {
+ avatarSection =
+ setPanelCollapsed(!isPanelCollapsed)}
title={expandCollapseButtonTitle}
/>
+ { contextMenu }
)}
diff --git a/src/components/views/spaces/SpacePublicShare.tsx b/src/components/views/spaces/SpacePublicShare.tsx
new file mode 100644
index 0000000000..064d1640a2
--- /dev/null
+++ b/src/components/views/spaces/SpacePublicShare.tsx
@@ -0,0 +1,65 @@
+/*
+Copyright 2021 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, {useState} from "react";
+import {Room} from "matrix-js-sdk/src/models/room";
+
+import {_t} from "../../../languageHandler";
+import AccessibleButton from "../elements/AccessibleButton";
+import {copyPlaintext} from "../../../utils/strings";
+import {sleep} from "../../../utils/promise";
+import {RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks";
+import {showSpaceInviteDialog} from "../../../RoomInvite";
+
+interface IProps {
+ space: Room;
+ onFinished(): void;
+}
+
+const SpacePublicShare = ({ space, onFinished }: IProps) => {
+ const [copiedText, setCopiedText] = useState(_t("Click to copy"));
+
+ return {
});
}
+ if (opts.parentSpace) {
+ opts.createOpts.initial_state.push(makeSpaceParentEvent(opts.parentSpace, true));
+ opts.createOpts.initial_state.push({
+ type: EventType.RoomHistoryVisibility,
+ content: {
+ "history_visibility": opts.createOpts.preset === Preset.PublicChat ? "world_readable" : "invited",
+ },
+ });
+ }
+
let modal;
if (opts.spinner) modal = Modal.createDialog(Loader, null, 'mx_Dialog_spinner');
@@ -189,6 +203,9 @@ export default function createRoom(opts: IOpts): Promise {
return Promise.resolve();
}
}).then(() => {
+ if (opts.parentSpace) {
+ return SpaceStore.instance.addRoomToSpace(opts.parentSpace, roomId, [client.getDomain()], true);
+ }
if (opts.associatedWithCommunity) {
return GroupStore.addRoomToGroup(opts.associatedWithCommunity, roomId, false);
}
@@ -197,6 +214,9 @@ export default function createRoom(opts: IOpts): Promise {
// room has been created, so we race here with the client knowing that
// the room exists, causing things like
// https://github.com/vector-im/vector-web/issues/1813
+ // Even if we were to block on the echo, servers tend to split the room
+ // state over multiple syncs so we can't atomically know when we have the
+ // entire thing.
if (opts.andView) {
dis.dispatch({
action: 'view_room',
@@ -206,6 +226,7 @@ export default function createRoom(opts: IOpts): Promise {
// so we are expecting the room to come down the sync
// stream, if it hasn't already.
joining: true,
+ justCreatedOpts: opts,
});
}
CountlyAnalytics.instance.trackRoomCreate(startTime, roomId);
diff --git a/src/dispatcher/payloads/SetRightPanelPhasePayload.ts b/src/dispatcher/payloads/SetRightPanelPhasePayload.ts
index 4126e8a669..430fad6145 100644
--- a/src/dispatcher/payloads/SetRightPanelPhasePayload.ts
+++ b/src/dispatcher/payloads/SetRightPanelPhasePayload.ts
@@ -15,6 +15,7 @@ limitations under the License.
*/
import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
+import { Room } from "matrix-js-sdk/src/models/room";
import { RoomMember } from "matrix-js-sdk/src/models/room-member";
import { RightPanelPhases } from "../../stores/RightPanelStorePhases";
import { ActionPayload } from "../payloads";
@@ -35,4 +36,5 @@ export interface SetRightPanelPhaseRefireParams {
// XXX: The type for event should 'view_3pid_invite' action's payload
event?: any;
widgetId?: string;
+ space?: Room;
}
diff --git a/src/hooks/useStateArray.ts b/src/hooks/useStateArray.ts
new file mode 100644
index 0000000000..e8ff6efff0
--- /dev/null
+++ b/src/hooks/useStateArray.ts
@@ -0,0 +1,29 @@
+/*
+Copyright 2021 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 {useState} from "react";
+
+// Hook to simplify managing state of arrays of a common type
+export const useStateArray = (initialSize: number, initialState: T | T[]): [T[], (i: number, v: T) => void] => {
+ const [data, setData] = useState(() => {
+ return Array.isArray(initialState) ? initialState : new Array(initialSize).fill(initialState);
+ });
+ return [data, (index: number, value: T) => setData(data => {
+ const copy = [...data];
+ copy[index] = value;
+ return copy;
+ })]
+};
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 4fd60f9466..8abe12c528 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -978,11 +978,32 @@
"From %(deviceName)s (%(deviceId)s)": "From %(deviceName)s (%(deviceId)s)",
"Decline (%(counter)s)": "Decline (%(counter)s)",
"Accept ![]()
": "%(senderDisplayName)s changed the room avatar to ![]()
",
"Click here to see older messages.": "Click here to see older messages.",
"This room is a continuation of another conversation.": "This room is a continuation of another conversation.",
- "Copied!": "Copied!",
- "Failed to copy": "Failed to copy",
"Add an Integration": "Add an Integration",
"You are about to be taken to a third-party site so you can authenticate your account for use with %(integrationsUrl)s. Do you wish to continue?": "You are about to be taken to a third-party site so you can authenticate your account for use with %(integrationsUrl)s. Do you wish to continue?",
"Edited at %(date)s": "Edited at %(date)s",
@@ -2012,7 +2030,6 @@
"You can change this later if needed.": "You can change this later if needed.",
"What's the name of your community or team?": "What's the name of your community or team?",
"Enter name": "Enter name",
- "Create": "Create",
"Add image (optional)": "Add image (optional)",
"An image will help people identify your community.": "An image will help people identify your community.",
"Community IDs cannot be empty.": "Community IDs cannot be empty.",
@@ -2034,7 +2051,6 @@
"Create a public room": "Create a public room",
"Create a private room": "Create a private room",
"Create a room in %(communityName)s": "Create a room in %(communityName)s",
- "Name": "Name",
"Topic (optional)": "Topic (optional)",
"Make this room public": "Make this room public",
"Block anyone not part of %(serverName)s from ever joining this room.": "Block anyone not part of %(serverName)s from ever joining this room.",
@@ -2152,8 +2168,11 @@
"Start a conversation with someone using their name or username (like
Click here to open settings and give it one!": "Your community hasn't got a Long Description, a HTML page to show to community members.
Click here to open settings and give it one!", "Long Description (HTML)": "Long Description (HTML)", "Upload avatar": "Upload avatar", - "Description": "Description", "Community %(groupId)s not found": "Community %(groupId)s not found", "This homeserver does not support communities": "This homeserver does not support communities", "Failed to load %(groupId)s": "Failed to load %(groupId)s", @@ -2539,6 +2557,37 @@ "Failed to reject invite": "Failed to reject invite", "You have %(count)s unread notifications in a prior version of this room.|other": "You have %(count)s unread notifications in a prior version of this room.", "You have %(count)s unread notifications in a prior version of this room.|one": "You have %(count)s unread notification in a prior version of this room.", + "Accept Invite": "Accept Invite", + "%(count)s members|other": "%(count)s members", + "%(count)s members|one": "%(count)s member", + "
+
+ {_t("Decline")}
+
+
;
+ } else if (myMembership !== "join" && joinRule === "public") {
+ joinButtons =
+
;
+ }
+
+ return
+
;
+};
+
+const SpaceSetupFirstRooms = ({ space, title, description, onFinished }) => {
+ const [busy, setBusy] = useState(false);
+ const [error, setError] = useState("");
+ const numFields = 3;
+ const placeholders = [_t("General"), _t("Random"), _t("Support")];
+ // TODO vary default prefills for "Just Me" spaces
+ const [roomNames, setRoomName] = useStateArray(numFields, [_t("General"), _t("Random"), ""]);
+ const fields = new Array(numFields).fill(0).map((_, i) => {
+ const name = "roomName" + i;
+ return
+
+ {(name) => {
+ const tags = { name: () =>
+
+
+
+ {(count) => count > 0 ? (
+ {
+ defaultDispatcher.dispatch({
+ action: Action.SetRightPanelPhase,
+ phase: RightPanelPhases.RoomMemberList,
+ refireParams: { space },
+ });
+ }}
+ >
+ { _t("%(count)s members", { count }) }
+
+ ) : null}
+
+
};
+ if (myMembership === "invite") {
+ const inviteSender = space.getMember(userId)?.events.member?.getSender();
+ const inviter = inviteSender && space.getMember(inviteSender);
+
+ if (inviteSender) {
+ return _t("{ name }
+
+
+ { joinButtons }
+
+
;
+};
+
+const SpaceSetupPublicShare = ({ space, onFinished }) => {
+ return { title }
+{ description }
+
+ { error && { error }
}
+ { fields }
+
+
+
+
+
;
+};
+
+const SpaceSetupPrivateScope = ({ onFinished }) => {
+ const [option, setOption] = useState{ _t("Share your public space") }
+{ _t("At the moment only you can see it.") }
+
+
+
+
+
+
+ ,
+ },
+ ]}
+ />
+
+
;
+};
+
+const validateEmailRules = withValidation({
+ rules: [{
+ key: "email",
+ test: ({ value }) => !value || Email.looksValid(value),
+ invalid: () => _t("Doesn't look like a valid email address"),
+ }],
+});
+
+const SpaceSetupPrivateInvite = ({ space, onFinished }) => {
+ const [busy, setBusy] = useState(false);
+ const [error, setError] = useState("");
+ const numFields = 3;
+ const fieldRefs: RefObject{ _t("Who are you working with?") }
+{ _t("Ensure the right people have access to the space.") }
+
+ { _t("Just Me") }
+{ _t("A private space just for you") }
+ ,
+ }, {
+ value: "meAndMyTeammates",
+ className: "mx_SpaceRoomView_privateScope_meAndMyTeammatesButton",
+ label: { _t("Me and my teammates") }
+{ _t("A private space for you and your teammates") }
+
+ onFinished(option !== "justMe")} />
+
+
+
;
+};
+
+export default class SpaceRoomView extends React.PureComponent{ _t("Invite your teammates") }
+{ _t("Ensure the right people have access to the space.") }
+
+ { error && { error }
}
+ { fields }
+
+
+ showSpaceInviteDialog(space.roomId)}
+ >
+ { _t("Invite by username") }
+
+
+
+
+ {_t("Skip for now")}
+
+ avatarUploadRef.current?.click()} />
+ avatarUploadRef.current?.click()} kind="link">
+ { _t("Upload") }
+
+ ;
+ }
+ }
+
+ return
+
+ );
+};
+
+enum Visibility {
+ Public,
+ Private,
+}
+
+const SpaceCreateMenu = ({ onFinished }) => {
+ const cli = useContext(MatrixClientContext);
+ const [visibility, setVisibility] = useState(null);
+ const [name, setName] = useState("");
+ const [avatar, setAvatar] = useState(null);
+ const [topic, setTopic] = useState("");
+ const [busy, setBusy] = useState(false);
+
+ const onSpaceCreateClick = async () => {
+ if (busy) return;
+ setBusy(true);
+ const initialState: IStateEvent[] = [
+ {
+ type: EventType.RoomHistoryVisibility,
+ content: {
+ "history_visibility": visibility === Visibility.Public ? "world_readable" : "invited",
+ },
+ },
+ ];
+ if (avatar) {
+ const url = await cli.uploadContent(avatar);
+
+ initialState.push({
+ type: EventType.RoomAvatar,
+ content: { url },
+ });
+ }
+ if (topic) {
+ initialState.push({
+ type: EventType.RoomTopic,
+ content: { topic },
+ });
+ }
+
+ try {
+ await createRoom({
+ createOpts: {
+ preset: visibility === Visibility.Public ? Preset.PublicChat : Preset.PrivateChat,
+ name,
+ creation_content: {
+ // Based on MSC1840
+ [RoomCreateTypeField]: RoomType.Space,
+ },
+ initial_state: initialState,
+ power_level_content_override: {
+ // Only allow Admins to write to the timeline to prevent hidden sync spam
+ events_default: 100,
+ },
+ },
+ spinner: false,
+ encryption: false,
+ andView: true,
+ inlineErrors: true,
+ });
+
+ onFinished();
+ } catch (e) {
+ console.error(e);
+ }
+ };
+
+ let body;
+ if (visibility === null) {
+ body =
+ setVisibility(Visibility.Public)}
+ />
+ setVisibility(Visibility.Private)}
+ />
+
+ {/* ;
+ } else {
+ body =
+ setVisibility(null)}
+ title={_t("Go back")}
+ />
+
+ ;
+ }
+
+ return
+
+ { body }
+
+ ;
+}
+
+export default SpaceCreateMenu;
diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx
index 760181e0e0..48e2c86b2c 100644
--- a/src/components/views/spaces/SpacePanel.tsx
+++ b/src/components/views/spaces/SpacePanel.tsx
@@ -20,6 +20,8 @@ import {Room} from "matrix-js-sdk/src/models/room";
import {_t} from "../../../languageHandler";
import RoomAvatar from "../avatars/RoomAvatar";
+import {useContextMenu} from "../../structures/ContextMenu";
+import SpaceCreateMenu from "./SpaceCreateMenu";
import {SpaceItem} from "./SpaceTreeLevel";
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
import {useEventEmitter} from "../../../hooks/useEventEmitter";
@@ -112,9 +114,21 @@ const useSpaces = (): [Room[], Room | null] => {
};
const SpacePanel = () => {
+ // We don't need the handle as we position the menu in a constant location
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu();
const [spaces, activeSpace] = useSpaces();
const [isPanelCollapsed, setPanelCollapsed] = useState(true);
+ const newClasses = classNames("mx_SpaceButton_new", {
+ mx_SpaceButton_newCancel: menuDisplayed,
+ });
+
+ let contextMenu = null;
+ if (menuDisplayed) {
+ contextMenu =
+
+ setName(ev.target.value)}
+ disabled={nameDisabled}
+ />
+
+ setTopic(ev.target.value)}
+ rows={3}
+ disabled={topicDisabled}
+ />
+
;
+};
+
+export default SpaceBasicSettings;
diff --git a/src/components/views/spaces/SpaceCreateMenu.tsx b/src/components/views/spaces/SpaceCreateMenu.tsx
new file mode 100644
index 0000000000..9d0543a6c5
--- /dev/null
+++ b/src/components/views/spaces/SpaceCreateMenu.tsx
@@ -0,0 +1,175 @@
+/*
+Copyright 2021 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, {useContext, useState} from "react";
+import classNames from "classnames";
+import {EventType, RoomType, RoomCreateTypeField} from "matrix-js-sdk/src/@types/event";
+
+import {_t} from "../../../languageHandler";
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
+import {ChevronFace, ContextMenu} from "../../structures/ContextMenu";
+import FormButton from "../elements/FormButton";
+import createRoom, {IStateEvent, Preset} from "../../../createRoom";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import SpaceBasicSettings from "./SpaceBasicSettings";
+import AccessibleButton from "../elements/AccessibleButton";
+import FocusLock from "react-focus-lock";
+
+const SpaceCreateMenuType = ({ title, description, className, onClick }) => {
+ return (
+
+ { avatarSection }
+ {
+ if (!e.target.files?.length) return;
+ const file = e.target.files[0];
+ setAvatar(file);
+ const reader = new FileReader();
+ reader.onload = (ev) => {
+ setAvatarDataUrl(ev.target.result as string);
+ };
+ reader.readAsDataURL(file);
+ }} accept="image/*" />
+
+
+ { title }
+ { description } +{ _t("Create a space") }
+{ _t("Organise rooms into spaces, for just you or anyone") }
+ +{ _t("Looking to join an existing space?") }
*/} ++ { + visibility === Visibility.Public + ? _t("Personalise your public space") + : _t("Personalise your private space") + } +
++ { + _t("Give it a photo, name and description to help you identify it.") + } { + _t("You can change these at any point.") + } +
+ +
+ {
+ const permalinkCreator = new RoomPermalinkCreator(space);
+ permalinkCreator.load();
+ const success = await copyPlaintext(permalinkCreator.forRoom());
+ const text = success ? _t("Copied!") : _t("Failed to copy");
+ setCopiedText(text);
+ await sleep(10);
+ if (copiedText === text) { // if the text hasn't changed by another click then clear it after some time
+ setCopiedText(_t("Click to copy"));
+ }
+ }}
+ >
+ { _t("Share invite link") }
+ { copiedText }
+
+ {
+ showSpaceInviteDialog(space.roomId);
+ onFinished();
+ }}
+ >
+ { _t("Invite by email or username") }
+
+
;
+};
+
+export default SpacePublicShare;
diff --git a/src/createRoom.ts b/src/createRoom.ts
index 9e3960cdb7..a5343076ac 100644
--- a/src/createRoom.ts
+++ b/src/createRoom.ts
@@ -17,6 +17,7 @@ limitations under the License.
import { MatrixClient } from "matrix-js-sdk/src/client";
import { Room } from "matrix-js-sdk/src/models/room";
+import { EventType } from "matrix-js-sdk/src/@types/event";
import { MatrixClientPeg } from './MatrixClientPeg';
import Modal from './Modal';
@@ -31,6 +32,8 @@ import GroupStore from "./stores/GroupStore";
import CountlyAnalytics from "./CountlyAnalytics";
import { isJoinedOrNearlyJoined } from "./utils/membership";
import { VIRTUAL_ROOM_EVENT_TYPE } from "./CallHandler";
+import SpaceStore from "./stores/SpaceStore";
+import { makeSpaceParentEvent } from "./utils/space";
// we define a number of interfaces which take their names from the js-sdk
/* eslint-disable camelcase */
@@ -41,7 +44,7 @@ enum Visibility {
Private = "private",
}
-enum Preset {
+export enum Preset {
PrivateChat = "private_chat",
TrustedPrivateChat = "trusted_private_chat",
PublicChat = "public_chat",
@@ -54,7 +57,7 @@ interface Invite3PID {
address: string;
}
-interface IStateEvent {
+export interface IStateEvent {
type: string;
state_key?: string; // defaults to an empty string
content: object;
@@ -75,7 +78,7 @@ interface ICreateOpts {
power_level_content_override?: object;
}
-interface IOpts {
+export interface IOpts {
dmUserId?: string;
createOpts?: ICreateOpts;
spinner?: boolean;
@@ -84,6 +87,7 @@ interface IOpts {
inlineErrors?: boolean;
andView?: boolean;
associatedWithCommunity?: string;
+ parentSpace?: Room;
}
/**
@@ -175,6 +179,16 @@ export default function createRoom(opts: IOpts): PromiseClick here to open settings and give it one!": "Your community hasn't got a Long Description, a HTML page to show to community members.
Click here to open settings and give it one!", "Long Description (HTML)": "Long Description (HTML)", "Upload avatar": "Upload avatar", - "Description": "Description", "Community %(groupId)s not found": "Community %(groupId)s not found", "This homeserver does not support communities": "This homeserver does not support communities", "Failed to load %(groupId)s": "Failed to load %(groupId)s", @@ -2539,6 +2557,37 @@ "Failed to reject invite": "Failed to reject invite", "You have %(count)s unread notifications in a prior version of this room.|other": "You have %(count)s unread notifications in a prior version of this room.", "You have %(count)s unread notifications in a prior version of this room.|one": "You have %(count)s unread notification in a prior version of this room.", + "Accept Invite": "Accept Invite", + "%(count)s members|other": "%(count)s members", + "%(count)s members|one": "%(count)s member", + "