Offer a way to create a space based on existing community

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<Community[]>(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 <Spinner />;
+    }
+
+    return <div className="mx_PreferencesUserSettingsTab_CommunityMigrator">
+        { communities.map(community => (
+            <div key={community.groupId}>
+                <GroupAvatar
+                    groupId={community.groupId}
+                    groupAvatarUrl={community.profile.avatar_url}
+                    groupName={community.profile.name}
+                    width={32}
+                    height={32}
+                />
+                { community.profile.name }
+                <AccessibleButton
+                    kind="primary_outline"
+                    onClick={() => {
+                        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") }
+                </AccessibleButton>
+            </div>
+        )) }
+    </div>;
+};
+
 @replaceableComponent("views.settings.tabs.user.PreferencesUserSettingsTab")
-export default class PreferencesUserSettingsTab extends React.Component<{}, IState> {
+export default class PreferencesUserSettingsTab extends React.Component<IProps, IState> {
     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',
     ];
@@ -241,6 +337,20 @@ export default class PreferencesUserSettingsTab extends React.Component<{}, ISta
                     { this.renderGroup(PreferencesUserSettingsTab.SPACES_SETTINGS) }
                 </div> }
 
+                <div className="mx_SettingsTab_section">
+                    <span className="mx_SettingsTab_subheading">{ _t("Communities") }</span>
+                    <p>{ _t("Communities have been archived to make way for Spaces but you can convert your " +
+                        "communities into Spaces below.") }</p>
+                    <span>{ _t("Convert your Communities to Spaces") }</span>
+                    <p>{ _t("Converting will ensure your conversations get the latest features.") }</p>
+                    <details>
+                        <summary>{ _t("Show my Communities") }</summary>
+                        <p>{ _t("If a community isn't shown you may not have permission to convert it.") }</p>
+                        <CommunityMigrator onFinished={this.props.closeSettingsFn} />
+                    </details>
+                    { this.renderGroup(PreferencesUserSettingsTab.COMMUNITIES_SETTINGS) }
+                </div>
+
                 <div className="mx_SettingsTab_section">
                     <span className="mx_SettingsTab_subheading">{ _t("Keyboard shortcuts") }</span>
                     <AccessibleButton className="mx_SettingsFlag" onClick={KeyboardShortcuts.toggleDialog}>