Add a developer mode flag and use it for accessing space timelines (#6994)

Fixes https://github.com/vector-im/element-web/issues/19416

src/components/structures/LoggedInView.tsx

@@ -108,6 +108,7 @@ interface IProps {
     currentGroupIsNew?: boolean;
     justRegistered?: boolean;
     roomJustCreatedOpts?: IOpts;
+    forceTimeline?: boolean; // see props on MatrixChat
 }
 
 interface IUsageLimit {
@@ -611,6 +612,7 @@ class LoggedInView extends React.Component<IProps, IState> {
                     key={this.props.currentRoomId || 'roomview'}
                     resizeNotifier={this.props.resizeNotifier}
                     justCreatedOpts={this.props.roomJustCreatedOpts}
+                    forceTimeline={this.props.forceTimeline}
                 />;
                 break;
 

src/components/structures/MatrixChat.tsx

@@ -176,6 +176,9 @@ interface IRoomInfo {
     threepid_invite?: IThreepidInvite;
 
     justCreatedOpts?: IOpts;
+
+    // Whether or not to override default behaviour to end up at a timeline
+    forceTimeline?: boolean;
 }
 /* eslint-enable camelcase */
 
@@ -238,6 +241,7 @@ interface IState {
     pendingInitialSync?: boolean;
     justRegistered?: boolean;
     roomJustCreatedOpts?: IOpts;
+    forceTimeline?: boolean; // see props
 }
 
 @replaceableComponent("structures.MatrixChat")
@@ -968,6 +972,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 page_type: PageType.RoomView,
                 threepidInvite: roomInfo.threepid_invite,
                 roomOobData: roomInfo.oob_data,
+                forceTimeline: roomInfo.forceTimeline,
                 ready: true,
                 roomJustCreatedOpts: roomInfo.justCreatedOpts,
             }, () => {

src/components/structures/RoomView.tsx

@@ -110,6 +110,8 @@ interface IRoomProps extends MatrixClientProps {
     resizeNotifier: ResizeNotifier;
     justCreatedOpts?: IOpts;
 
+    forceTimeline?: boolean; // should we force access to the timeline, overriding (for eg) spaces
+
     // Called with the credentials of a registered user (if they were a ROU that transitioned to PWLU)
     onRegistered?(credentials: IMatrixClientCreds): void;
 }
@@ -1911,7 +1913,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             );
         }
 
-        if (this.state.room?.isSpaceRoom()) {
+        if (this.state.room?.isSpaceRoom() && !this.props.forceTimeline) {
             return <SpaceRoomView
                 space={this.state.room}
                 justCreatedOpts={this.props.justCreatedOpts}

src/components/views/context_menus/SpaceContextMenu.tsx

@@ -40,6 +40,7 @@ import { SetRightPanelPhasePayload } from "../../../dispatcher/payloads/SetRight
 import { Action } from "../../../dispatcher/actions";
 import { RightPanelPhases } from "../../../stores/RightPanelStorePhases";
 import { BetaPill } from "../beta/BetaCard";
+import SettingsStore from "../../../settings/SettingsStore";
 
 interface IProps extends IContextMenuProps {
     space: Room;
@@ -105,6 +106,29 @@ const SpaceContextMenu = ({ space, onFinished, ...props }: IProps) => {
         </IconizedContextMenuOptionList>;
     }
 
+    let devtoolsSection;
+    if (SettingsStore.getValue("developerMode")) {
+        const onViewTimelineClick = (ev: ButtonEvent) => {
+            ev.preventDefault();
+            ev.stopPropagation();
+
+            defaultDispatcher.dispatch({
+                action: 'view_room',
+                room_id: space.roomId,
+                forceTimeline: true,
+            });
+            onFinished();
+        };
+
+        devtoolsSection = <IconizedContextMenuOptionList first>
+            <IconizedContextMenuOption
+                iconClassName="mx_SpacePanel_iconSettings"
+                label={_t("See room timeline (devtools)")}
+                onClick={onViewTimelineClick}
+            />
+        </IconizedContextMenuOptionList>;
+    }
+
     const canAddRooms = space.currentState.maySendStateEvent(EventType.SpaceChild, userId);
 
     let newRoomSection;
@@ -209,6 +233,7 @@ const SpaceContextMenu = ({ space, onFinished, ...props }: IProps) => {
         </IconizedContextMenuOptionList>
         { newRoomSection }
         { leaveSection }
+        { devtoolsSection }
     </IconizedContextMenu>;
 };
 

src/components/views/settings/tabs/user/LabsUserSettingsTab.tsx

@@ -87,6 +87,7 @@ export default class LabsUserSettingsTab extends React.Component<{}, IState> {
             }
 
             labsSection = <div className="mx_SettingsTab_section">
+                <SettingsFlag name="developerMode" level={SettingLevel.ACCOUNT} />
                 { flags }
                 <SettingsFlag name="enableWidgetScreenshots" level={SettingLevel.ACCOUNT} />
                 <SettingsFlag name="showHiddenEventsInTimeline" level={SettingLevel.DEVICE} />

src/i18n/strings/en_EN.json

@@ -886,6 +886,7 @@
     "All rooms you're in will appear in Home.": "All rooms you're in will appear in Home.",
     "Display Communities instead of Spaces": "Display Communities instead of Spaces",
     "Temporarily show communities instead of Spaces for this session. Support for this will be removed in the near future. This will reload Element.": "Temporarily show communities instead of Spaces for this session. Support for this will be removed in the near future. This will reload Element.",
+    "Developer mode": "Developer mode",
     "Collecting app version information": "Collecting app version information",
     "Collecting logs": "Collecting logs",
     "Uploading logs": "Uploading logs",
@@ -2701,6 +2702,7 @@
     "Collapse reply thread": "Collapse reply thread",
     "Report": "Report",
     "View in room": "View in room",
+    "See room timeline (devtools)": "See room timeline (devtools)",
     "Add space": "Add space",
     "Manage & explore rooms": "Manage & explore rooms",
     "Clear status": "Clear status",

src/settings/Settings.tsx

@@ -757,6 +757,11 @@ export const SETTINGS: {[setting: string]: ISetting} = {
         default: false,
         controller: new ReloadOnChangeController(),
     },
+    "developerMode": {
+        displayName: _td("Developer mode"),
+        supportedLevels: LEVELS_ACCOUNT_SETTINGS,
+        default: false,
+    },
     [UIFeature.RoomHistorySettings]: {
         supportedLevels: LEVELS_UI_FEATURE,
         default: true,