diff --git a/src/components/views/context_menus/TagTileContextMenu.js b/src/components/views/context_menus/TagTileContextMenu.js
index c40ff4207b..0c3c48a07f 100644
--- a/src/components/views/context_menus/TagTileContextMenu.js
+++ b/src/components/views/context_menus/TagTileContextMenu.js
@@ -24,6 +24,8 @@ import { MenuItem } from "../../structures/ContextMenu";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import { replaceableComponent } from "../../../utils/replaceableComponent";
import GroupFilterOrderStore from "../../../stores/GroupFilterOrderStore";
+import { createSpaceFromCommunity } from "../../../utils/space";
+import GroupStore from "../../../stores/GroupStore";
@replaceableComponent("views.context_menus.TagTileContextMenu")
export default class TagTileContextMenu extends React.Component {
@@ -49,6 +51,11 @@ export default class TagTileContextMenu extends React.Component {
this.props.onFinished();
};
+ _onCreateSpaceClick = () => {
+ createSpaceFromCommunity(this.context, this.props.tag);
+ this.props.onFinished();
+ };
+
_onMoveUp = () => {
dis.dispatch(TagOrderActions.moveTag(this.context, this.props.tag, this.props.index - 1));
this.props.onFinished();
@@ -77,6 +84,16 @@ export default class TagTileContextMenu extends React.Component {
);
}
+ let createSpaceOption;
+ if (GroupStore.isUserPrivileged(this.props.tag)) {
+ createSpaceOption = <>
+
+
+ ;
+ }
+
return
;
}
}
diff --git a/src/components/views/dialogs/CreateSpaceFromCommunityDialog.tsx b/src/components/views/dialogs/CreateSpaceFromCommunityDialog.tsx
new file mode 100644
index 0000000000..4fb0994e23
--- /dev/null
+++ b/src/components/views/dialogs/CreateSpaceFromCommunityDialog.tsx
@@ -0,0 +1,340 @@
+/*
+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, { useEffect, useRef, useState } from "react";
+import { JoinRule } from "matrix-js-sdk/src/@types/partials";
+import { EventType } from "matrix-js-sdk/src/@types/event";
+import { MatrixClient } from "matrix-js-sdk/src/matrix";
+
+import { _t } from '../../../languageHandler';
+import BaseDialog from "./BaseDialog";
+import AccessibleButton from "../elements/AccessibleButton";
+import { createSpace, SpaceCreateForm } from "../spaces/SpaceCreateMenu";
+import JoinRuleDropdown from "../elements/JoinRuleDropdown";
+import Field from "../elements/Field";
+import RoomAliasField from "../elements/RoomAliasField";
+import { GroupMember } from "../right_panel/UserInfo";
+import { parseMembersResponse, parseRoomsResponse } from "../../../stores/GroupStore";
+import { calculateRoomVia, makeRoomPermalink } from "../../../utils/permalinks/Permalinks";
+import { useAsyncMemo } from "../../../hooks/useAsyncMemo";
+import Spinner from "../elements/Spinner";
+import { mediaFromMxc } from "../../../customisations/Media";
+import SpaceStore from "../../../stores/SpaceStore";
+import Modal from "../../../Modal";
+import InfoDialog from "./InfoDialog";
+import dis from "../../../dispatcher/dispatcher";
+import { Action } from "../../../dispatcher/actions";
+import { UserTab } from "./UserSettingsDialog";
+import TagOrderActions from "../../../actions/TagOrderActions";
+
+interface IProps {
+ matrixClient: MatrixClient;
+ groupId: string;
+ onFinished(spaceId?: string): void;
+}
+
+export const CreateEventField = "io.element.migrated_from_community";
+
+interface IGroupRoom {
+ displayname: string;
+ name?: string;
+ roomId: string;
+ canonicalAlias?: string;
+ avatarUrl?: string;
+ topic?: string;
+ numJoinedMembers?: number;
+ worldReadable?: boolean;
+ guestCanJoin?: boolean;
+ isPublic?: boolean;
+}
+
+/* eslint-disable camelcase */
+export interface IGroupSummary {
+ profile: {
+ avatar_url?: string;
+ is_openly_joinable?: boolean;
+ is_public?: boolean;
+ long_description: string;
+ name: string;
+ short_description: string;
+ };
+ rooms_section: {
+ rooms: unknown[];
+ categories: Record;
+ total_room_count_estimate: number;
+ };
+ user: {
+ is_privileged: boolean;
+ is_public: boolean;
+ is_publicised: boolean;
+ membership: string;
+ };
+ users_section: {
+ users: unknown[];
+ roles: Record;
+ total_user_count_estimate: number;
+ };
+}
+/* eslint-enable camelcase */
+
+const CreateSpaceFromCommunityDialog: React.FC = ({ matrixClient: cli, groupId, onFinished }) => {
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [busy, setBusy] = useState(false);
+
+ const [avatar, setAvatar] = useState(null); // undefined means to remove avatar
+ const [name, setName] = useState("");
+ const spaceNameField = useRef();
+ const [alias, setAlias] = useState("#" + groupId.substring(1, groupId.indexOf(":")) + ":" + cli.getDomain());
+ const spaceAliasField = useRef();
+ const [topic, setTopic] = useState("");
+ const [joinRule, setJoinRule] = useState(JoinRule.Public);
+
+ const groupSummary = useAsyncMemo(() => cli.getGroupSummary(groupId), [groupId]);
+ useEffect(() => {
+ if (groupSummary) {
+ setName(groupSummary.profile.name || "");
+ setTopic(groupSummary.profile.short_description || "");
+ setJoinRule(groupSummary.profile.is_openly_joinable ? JoinRule.Public : JoinRule.Invite);
+ setLoading(false);
+ }
+ }, [groupSummary]);
+
+ if (loading) {
+ return ,
+ cli.getGroupUsers(groupId).then(parseMembersResponse) as Promise,
+ cli.getGroupInvitedUsers(groupId).then(parseMembersResponse) as Promise,
+ ]);
+
+ const viaMap = new Map();
+ for (const { roomId, canonicalAlias } of rooms) {
+ const room = cli.getRoom(roomId);
+ if (room) {
+ viaMap.set(roomId, calculateRoomVia(room));
+ } else if (canonicalAlias) {
+ try {
+ const { servers } = await cli.getRoomIdForAlias(canonicalAlias);
+ viaMap.set(roomId, servers);
+ } catch (e) {
+ console.warn("Failed to resolve alias during community migration", e);
+ }
+ }
+
+ if (!viaMap.get(roomId)?.length) {
+ // XXX: lets guess the via, this might end up being incorrect.
+ const str = canonicalAlias || roomId;
+ viaMap.set(roomId, [str.substring(1, str.indexOf(":"))]);
+ }
+ }
+
+ const spaceAvatar = avatar !== undefined ? avatar : groupSummary.profile.avatar_url;
+ const roomId = await createSpace(name, joinRule === JoinRule.Public, alias, topic, spaceAvatar, {
+ creation_content: {
+ [CreateEventField]: groupId,
+ },
+ initial_state: rooms.map(({ roomId }) => ({
+ type: EventType.SpaceChild,
+ state_key: roomId,
+ content: {
+ via: viaMap.get(roomId) || [],
+ },
+ })),
+ invite: [...members, ...invitedMembers].map(m => m.userId).filter(m => m !== cli.getUserId()),
+ }, {
+ andView: false,
+ });
+
+ // eagerly remove it from the community panel
+ dis.dispatch(TagOrderActions.removeTag(cli, groupId));
+
+ // don't bother awaiting this, as we don't hugely care if it fails
+ cli.setGroupProfile(groupId, {
+ ...groupSummary.profile,
+ long_description: `` +
+ _t("This community has been upgraded into a Space") + `
`
+ + groupSummary.profile.long_description,
+ } as IGroupSummary["profile"]).catch(e => {
+ console.warn("Failed to update community profile during migration", e);
+ });
+
+ onFinished(roomId);
+
+ const onSpaceClick = () => {
+ dis.dispatch({
+ action: "view_room",
+ room_id: roomId,
+ });
+ };
+
+ const onPreferencesClick = () => {
+ dis.dispatch({
+ action: Action.ViewUserSettings,
+ initialTabId: UserTab.Preferences,
+ });
+ };
+
+ let spacesDisabledCopy;
+ if (!SpaceStore.spacesEnabled) {
+ spacesDisabledCopy = _t("To view Spaces, hide communities in Preferences", {}, {
+ a: sub => { sub } ,
+ });
+ }
+
+ Modal.createDialog(InfoDialog, {
+ title: _t("Space created"),
+ description: <>
+
+
+ { _t("
+ { name }
+ ,
+ }) }
+
+ { spacesDisabledCopy }
+
+
+ { _t("To create a Space from another community, just pick the community in Preferences.") }
+
+ ,
+ button: _t("Preferences"),
+ onFinished: (openPreferences: boolean) => {
+ if (openPreferences) {
+ onPreferencesClick();
+ }
+ },
+ }, "mx_CreateSpaceFromCommunityDialog_SuccessInfoDialog");
+ } catch (e) {
+ console.error(e);
+ setError(e);
+ }
+
+ setBusy(false);
+ };
+
+ let footer;
+ if (error) {
+ footer = <>
+ ![]({require("../../../../res/img/element-icons/warning-badge.svg")})
+
+
+ { _t("Failed to migrate community") }
+ { _t("Try again") }
+
+
+
+ { _t("Retry") }
+
+ ;
+ } else {
+ footer = <>
+ onFinished()}>
+ { _t("Cancel") }
+
+
+ { busy ? _t("Creating...") : _t("Create Space") }
+
+ ;
+ }
+
+ return
+
+
+ { _t("A link to the Space will be put in your community description.") }
+
+ { _t("All rooms will be added and all community members will be invited.") }
+
+
+ { _t("Flair won't be available in Spaces for the foreseeable future.") }
+
+
+
+ { _t("This description will be shown to people when they view your space") }
+ { joinRule === JoinRule.Public
+ ? _t("Open space for anyone, best for communities")
+ : _t("Invite only, best for yourself or teams")
+ }
+ { joinRule !== JoinRule.Public &&
+
+ }
+
+
+
+
+ { footer }
+
+ ;
+};
+
+export default CreateSpaceFromCommunityDialog;
+
diff --git a/src/components/views/dialogs/CreateSubspaceDialog.tsx b/src/components/views/dialogs/CreateSubspaceDialog.tsx
index 0d71eb2de3..03927c7d62 100644
--- a/src/components/views/dialogs/CreateSubspaceDialog.tsx
+++ b/src/components/views/dialogs/CreateSubspaceDialog.tsx
@@ -16,8 +16,7 @@ limitations under the License.
import React, { useRef, useState } from "react";
import { Room } from "matrix-js-sdk/src/models/room";
-import { JoinRule, Preset } from "matrix-js-sdk/src/@types/partials";
-import { RoomType } from "matrix-js-sdk/src/@types/event";
+import { JoinRule } from "matrix-js-sdk/src/@types/partials";
import { _t } from '../../../languageHandler';
import BaseDialog from "./BaseDialog";
@@ -27,8 +26,7 @@ import { BetaPill } from "../beta/BetaCard";
import Field from "../elements/Field";
import RoomAliasField from "../elements/RoomAliasField";
import SpaceStore from "../../../stores/SpaceStore";
-import { SpaceCreateForm } from "../spaces/SpaceCreateMenu";
-import createRoom from "../../../createRoom";
+import { createSpace, SpaceCreateForm } from "../spaces/SpaceCreateMenu";
import { SubspaceSelector } from "./AddExistingToSpaceDialog";
import JoinRuleDropdown from "../elements/JoinRuleDropdown";
@@ -81,28 +79,7 @@ const CreateSubspaceDialog: React.FC = ({ space, onAddExistingSpaceClick
}
try {
- await createRoom({
- createOpts: {
- preset: joinRule === JoinRule.Public ? Preset.PublicChat : Preset.PrivateChat,
- name,
- power_level_content_override: {
- // Only allow Admins to write to the timeline to prevent hidden sync spam
- events_default: 100,
- ...joinRule === JoinRule.Public ? { invite: 0 } : {},
- },
- room_alias_name: joinRule === JoinRule.Public && alias
- ? alias.substr(1, alias.indexOf(":") - 1)
- : undefined,
- topic,
- },
- avatar,
- roomType: RoomType.Space,
- parentSpace,
- spinner: false,
- encryption: false,
- andView: true,
- inlineErrors: true,
- });
+ await createSpace(name, joinRule === JoinRule.Public, alias, topic, avatar, {}, { parentSpace });
onFinished(true);
} catch (e) {
diff --git a/src/components/views/dialogs/UserSettingsDialog.tsx b/src/components/views/dialogs/UserSettingsDialog.tsx
index 7608d7cb55..9613b27d17 100644
--- a/src/components/views/dialogs/UserSettingsDialog.tsx
+++ b/src/components/views/dialogs/UserSettingsDialog.tsx
@@ -114,7 +114,7 @@ export default class UserSettingsDialog extends React.Component
UserTab.Preferences,
_td("Preferences"),
"mx_UserSettingsDialog_preferencesIcon",
- = ({
return ;
};
-interface GroupMember {
+export interface GroupMember {
userId: string;
displayname?: string; // XXX: GroupMember objects are inconsistent :((
avatarUrl?: string;
diff --git a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
index ca85db967a..21c3ab24ec 100644
--- a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
@@ -15,7 +15,9 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import React from 'react';
+import React, { useContext, useEffect, useState } from 'react';
+import { EventType } from 'matrix-js-sdk/src/@types/event';
+
import { _t } from "../../../../../languageHandler";
import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
import SettingsStore from "../../../../../settings/SettingsStore";
@@ -27,6 +29,18 @@ import SettingsFlag from '../../../elements/SettingsFlag';
import * as KeyboardShortcuts from "../../../../../accessibility/KeyboardShortcuts";
import AccessibleButton from "../../../elements/AccessibleButton";
import SpaceStore from "../../../../../stores/SpaceStore";
+import GroupAvatar from "../../../avatars/GroupAvatar";
+import dis from "../../../../../dispatcher/dispatcher";
+import GroupActions from "../../../../../actions/GroupActions";
+import MatrixClientContext from "../../../../../contexts/MatrixClientContext";
+import { useDispatcher } from "../../../../../hooks/useDispatcher";
+import { CreateEventField, IGroupSummary } from "../../../dialogs/CreateSpaceFromCommunityDialog";
+import { createSpaceFromCommunity } from "../../../../../utils/space";
+import Spinner from "../../../elements/Spinner";
+
+interface IProps {
+ closeSettingsFn(success: boolean): void;
+}
interface IState {
autoLaunch: boolean;
@@ -42,8 +56,86 @@ interface IState {
readMarkerOutOfViewThresholdMs: string;
}
+type Community = IGroupSummary & {
+ groupId: string;
+ spaceId?: string;
+};
+
+const CommunityMigrator = ({ onFinished }) => {
+ const cli = useContext(MatrixClientContext);
+ const [communities, setCommunities] = useState(null);
+ useEffect(() => {
+ dis.dispatch(GroupActions.fetchJoinedGroups(cli));
+ }, [cli]);
+ useDispatcher(dis, async payload => {
+ if (payload.action === "GroupActions.fetchJoinedGroups.success") {
+ const communities: Community[] = [];
+
+ const migratedSpaceMap = new Map(cli.getRooms().map(room => {
+ const createContent = room.currentState.getStateEvents(EventType.RoomCreate, "")?.getContent();
+ if (createContent?.[CreateEventField]) {
+ return [createContent[CreateEventField], room.roomId] as [string, string];
+ }
+ }).filter(Boolean));
+
+ for (const groupId of payload.result.groups) {
+ const summary = await cli.getGroupSummary(groupId) as IGroupSummary;
+ if (summary.user.is_privileged) {
+ communities.push({
+ ...summary,
+ groupId,
+ spaceId: migratedSpaceMap.get(groupId),
+ });
+ }
+ }
+
+ setCommunities(communities);
+ }
+ });
+
+ if (!communities) {
+ return {
+ if (community.spaceId) {
+ dis.dispatch({
+ action: "view_room",
+ room_id: community.spaceId,
+ });
+ onFinished();
+ } else {
+ createSpaceFromCommunity(cli, community.groupId).then(([spaceId]) => {
+ if (spaceId) {
+ community.spaceId = spaceId;
+ setCommunities([...communities]); // force component re-render
+ }
+ });
+ }
+ }}
+ >
+ { community.spaceId ? _t("Open Space") : _t("Create Space") }
+
+
+ )) }
+ ;
+};
+
@replaceableComponent("views.settings.tabs.user.PreferencesUserSettingsTab")
-export default class PreferencesUserSettingsTab extends React.Component<{}, IState> {
+export default class PreferencesUserSettingsTab extends React.Component {
static ROOM_LIST_SETTINGS = [
'breadcrumbs',
];
@@ -52,6 +144,10 @@ export default class PreferencesUserSettingsTab extends React.Component<{}, ISta
"Spaces.allRoomsInHome",
];
+ static COMMUNITIES_SETTINGS = [
+ // TODO: part of delabsing move the toggle here - https://github.com/vector-im/element-web/issues/18088
+ ];
+
static KEYBINDINGS_SETTINGS = [
'ctrlFForSearch',
];
@@ -242,6 +338,19 @@ export default class PreferencesUserSettingsTab extends React.Component<{}, ISta
{ this.renderGroup(PreferencesUserSettingsTab.SPACES_SETTINGS) }
` + + _t("This community has been upgraded into a Space") + `
` + + groupSummary.profile.long_description, + } as IGroupSummary["profile"]).catch(e => { + console.warn("Failed to update community profile during migration", e); + }); + + onFinished(roomId); + + const onSpaceClick = () => { + dis.dispatch({ + action: "view_room", + room_id: roomId, + }); + }; + + const onPreferencesClick = () => { + dis.dispatch({ + action: Action.ViewUserSettings, + initialTabId: UserTab.Preferences, + }); + }; + + let spacesDisabledCopy; + if (!SpaceStore.spacesEnabled) { + spacesDisabledCopy = _t("To view Spaces, hide communities in Preferences", {}, { + a: sub =>
+ { _t("
+ { _t("To create a Space from another community, just pick the community in Preferences.") } +
+ , + button: _t("Preferences"), + onFinished: (openPreferences: boolean) => { + if (openPreferences) { + onPreferencesClick(); + } + }, + }, "mx_CreateSpaceFromCommunityDialog_SuccessInfoDialog"); + } catch (e) { + console.error(e); + setError(e); + } + + setBusy(false); + }; + + let footer; + if (error) { + footer = <> +
+
+
+ { _t("Failed to migrate community") }
+ { _t("Try again") }
+
+
+
+
+
+
+
+ + { _t("A link to the Space will be put in your community description.") } + + { _t("All rooms will be added and all community members will be invited.") } +
++ { _t("Flair won't be available in Spaces for the foreseeable future.") } +
+ +{ _t("This description will be shown to people when they view your space") }
+{ joinRule === JoinRule.Public + ? _t("Open space for anyone, best for communities") + : _t("Invite only, best for yourself or teams") + }
+ { joinRule !== JoinRule.Public && + + } +
+ { footer }
+
+
+ { communities.map(community => (
+
;
+};
+
@replaceableComponent("views.settings.tabs.user.PreferencesUserSettingsTab")
-export default class PreferencesUserSettingsTab extends React.Component<{}, IState> {
+export default class PreferencesUserSettingsTab extends React.Component
+ {
+ if (community.spaceId) {
+ dis.dispatch({
+ action: "view_room",
+ room_id: community.spaceId,
+ });
+ onFinished();
+ } else {
+ createSpaceFromCommunity(cli, community.groupId).then(([spaceId]) => {
+ if (spaceId) {
+ community.spaceId = spaceId;
+ setCommunities([...communities]); // force component re-render
+ }
+ });
+ }
+ }}
+ >
+ { community.spaceId ? _t("Open Space") : _t("Create Space") }
+
+
+ )) }
+