Delete groups (legacy communities system)

res/css/_components.scss

@@ -69,7 +69,6 @@
 @import "./views/context_menus/_IconizedContextMenu.scss";
 @import "./views/context_menus/_MessageContextMenu.scss";
 @import "./views/dialogs/_AddExistingToSpaceDialog.scss";
-@import "./views/dialogs/_AddressPickerDialog.scss";
 @import "./views/dialogs/_Analytics.scss";
 @import "./views/dialogs/_AnalyticsLearnMoreDialog.scss";
 @import "./views/dialogs/_BugReportDialog.scss";

res/css/structures/_LeftPanel.scss

@@ -117,11 +117,6 @@ $roomListCollapsedWidth: 68px;
             display: flex;
             align-items: center;
 
-            .mx_UserMenu {
-                // mini-mode for when Space Panel is disabled
-                margin-right: 12px;
-            }
-
             & + .mx_RoomListHeader {
                 margin-top: 12px;
             }

res/css/structures/_MatrixChat.scss

@@ -63,7 +63,7 @@ limitations under the License.
 }
 
 /* not the left panel, and not the resize handle, so the roomview and friends */
-.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle):not(.mx_LeftPanel_wrapper) {
+.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle):not(.mx_LeftPanel_outerWrapper) {
     background-color: $background;
 
     flex: 1 1 0;

res/css/views/dialogs/_InviteDialog.scss

@@ -43,7 +43,7 @@ limitations under the License.
             min-width: max-content; // prevent manipulation by flexbox
         }
 
-        // Mostly copied from AddressPickerDialog; overrides bunch of our default text input styles
+        // overrides bunch of our default text input styles
         > input[type="text"] {
             margin: 6px 0 !important;
             height: 24px;
@@ -439,3 +439,7 @@ limitations under the License.
         }
     }
 }
+
+.mx_InviteDialog_identityServer {
+    margin-top: 1em;
+}

src/PageTypes.ts

@@ -20,6 +20,7 @@ enum PageType {
     HomePage = "home_page",
     RoomView = "room_view",
     UserView = "user_view",
+    LegacyGroupView = "legacy_group_view",
 }
 
 export default PageType;

src/PosthogTrackers.ts

@@ -40,6 +40,7 @@ const loggedInPageTypeMap: Record<PageType, ScreenName> = {
     [PageType.HomePage]: "Home",
     [PageType.RoomView]: "Room",
     [PageType.UserView]: "User",
+    [PageType.LegacyGroupView]: "Group",
 };
 
 export default class PosthogTrackers {

src/SdkConfig.ts

@@ -31,6 +31,9 @@ export interface ConfigOptions {
     sso_redirect_options?: ISsoRedirectOptions;
 
     custom_translations_url?: string;
+
+    // XXX: Undocumented URL for the "Learn more about spaces" link in the "Communities don't exist" messaging.
+    spaces_learn_more_url?: string;
 }
 /* eslint-enable camelcase*/
 
@@ -53,6 +56,7 @@ export const DEFAULTS: ConfigOptions = {
         logo: require("../res/img/element-desktop-logo.svg").default,
         url: "https://element.io/get-started",
     },
+    spaces_learn_more_url: "https://element.io/blog/spaces-blast-out-of-beta/",
 };
 
 export default class SdkConfig {

src/components/structures/LegacyGroupView.tsx

@@ -0,0 +1,51 @@
+/*
+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 * as React from "react";
+
+import AutoHideScrollbar from './AutoHideScrollbar';
+import { _t } from "../../languageHandler";
+import SdkConfig, { DEFAULTS } from "../../SdkConfig";
+
+interface IProps {
+    groupId: string;
+}
+
+const LegacyGroupView: React.FC<IProps> = ({ groupId }) => {
+    // XXX: Stealing classes from the HomePage component for CSS simplicity.
+    // XXX: Inline CSS because this is all temporary
+    const learnMoreUrl = SdkConfig.get().spaces_learn_more_url ?? DEFAULTS.spaces_learn_more_url;
+    return <AutoHideScrollbar className="mx_HomePage mx_HomePage_default">
+        <div className="mx_HomePage_default_wrapper">
+            <h1 style={{ fontSize: '24px' }}>{ _t("That link is no longer supported") }</h1>
+            <p>
+                { _t(
+                    "You're trying to access a community link (%(groupId)s).<br/>" +
+                    "Communities are no longer supported and have been replaced by spaces.<br2/>" +
+                    "<a>Learn more about spaces here.</a>",
+                    { groupId },
+                    {
+                        br: () => <br />,
+                        br2: () => <br />,
+                        a: (sub) => <a href={learnMoreUrl} rel="noreferrer noopener" target="_blank">{ sub }</a>,
+                    },
+                ) }
+            </p>
+        </div>
+    </AutoHideScrollbar>;
+};
+
+export default LegacyGroupView;

src/components/structures/LoggedInView.tsx

@@ -69,6 +69,7 @@ import RightPanelStore from '../../stores/right-panel/RightPanelStore';
 import { TimelineRenderingType } from "../../contexts/RoomContext";
 import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
 import { SwitchSpacePayload } from "../../dispatcher/payloads/SwitchSpacePayload";
+import LegacyGroupView from "./LegacyGroupView";
 import LeftPanelLiveShareWarning from '../views/beacon/LeftPanelLiveShareWarning';
 
 // We need to fetch each pinned message individually (if we don't already have it)
@@ -107,6 +108,8 @@ interface IProps {
     justRegistered?: boolean;
     roomJustCreatedOpts?: IOpts;
     forceTimeline?: boolean; // see props on MatrixChat
+
+    currentGroupId?: string;
 }
 
 interface IState {
@@ -644,6 +647,10 @@ class LoggedInView extends React.Component<IProps, IState> {
             case PageTypes.UserView:
                 pageElement = <UserView userId={this.props.currentUserId} resizeNotifier={this.props.resizeNotifier} />;
                 break;
+
+            case PageTypes.LegacyGroupView:
+                pageElement = <LegacyGroupView groupId={this.props.currentGroupId} />;
+                break;
         }
 
         const wrapperClasses = classNames({
@@ -671,25 +678,27 @@ class LoggedInView extends React.Component<IProps, IState> {
                 >
                     <ToastContainer />
                     <div className={bodyClasses}>
-                        <div className='mx_LeftPanel_wrapper'>
-                            <>
+                        <div className='mx_LeftPanel_outerWrapper'>
+                            <LeftPanelLiveShareWarning isMinimized={this.props.collapseLhs || false} />
+                            <div className='mx_LeftPanel_wrapper'>
                                 <BackdropPanel
+                                    blurMultiplier={0.5}
                                     backgroundImage={this.state.backgroundImage}
                                 />
                                 <SpacePanel />
-                            </>
-                            <BackdropPanel
-                                backgroundImage={this.state.backgroundImage}
-                            />
-                            <div
-                                className="mx_LeftPanel_wrapper--user"
-                                ref={this._resizeContainer}
-                                data-collapsed={this.props.collapseLhs ? true : undefined}
-                            >
-                                <LeftPanel
-                                    isMinimized={this.props.collapseLhs || false}
-                                    resizeNotifier={this.props.resizeNotifier}
+                                <BackdropPanel
+                                    backgroundImage={this.state.backgroundImage}
                                 />
+                                <div
+                                    className="mx_LeftPanel_wrapper--user"
+                                    ref={this._resizeContainer}
+                                    data-collapsed={this.props.collapseLhs ? true : undefined}
+                                >
+                                    <LeftPanel
+                                        isMinimized={this.props.collapseLhs || false}
+                                        resizeNotifier={this.props.resizeNotifier}
+                                    />
+                                </div>
                             </div>
                         </div>
                         <ResizeHandle passRef={this.resizeHandler} id="lp-resizer" />

src/components/structures/MatrixChat.tsx

@@ -184,6 +184,8 @@ interface IState {
     currentRoomId?: string;
     // If we're trying to just view a user ID (i.e. /user URL), this is it
     currentUserId?: string;
+    // Group ID for legacy "communities don't exist" page
+    currentGroupId?: string;
     // this is persisted as mx_lhs_size, loaded in LoggedInView
     collapseLhs: boolean;
     // Parameters used in the registration dance with the IS
@@ -664,6 +666,9 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 }
                 break;
             }
+            case 'view_legacy_group':
+                this.viewLegacyGroup(payload.groupId);
+                break;
             case Action.ViewUserSettings: {
                 const tabPayload = payload as OpenToTabPayload;
                 Modal.createTrackedDialog('User settings', '', UserSettingsDialog,
@@ -982,6 +987,16 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         });
     }
 
+    private viewLegacyGroup(groupId: string) {
+        this.setStateForNewView({
+            view: Views.LOGGED_IN,
+            currentRoomId: null,
+            currentGroupId: groupId,
+        });
+        this.notifyNewScreen('group/' + groupId);
+        this.setPage(PageType.LegacyGroupView);
+    }
+
     private async createRoom(defaultPublic = false, defaultName?: string) {
         const modal = Modal.createTrackedDialog('Create Room', '', CreateRoomDialog, {
             defaultPublic,
@@ -1788,6 +1803,12 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 userId: userId,
                 subAction: params.action,
             });
+        } else if (screen.indexOf('group/') === 0) {
+            const groupId = screen.substring(6);
+            dis.dispatch({
+                action: 'view_legacy_group',
+                groupId: groupId,
+            });
         } else {
             logger.info("Ignoring showScreen for '%s'", screen);
         }

src/components/structures/RoomView.tsx

@@ -1238,7 +1238,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
     };
 
     private onInviteButtonClick = () => {
-        // call AddressPickerDialog
+        // open the room inviter
         dis.dispatch({
             action: 'view_invite',
             roomId: this.state.room.roomId,