Merge branch 'develop' into psf-910/timeline-beacon-happy-path

Author: Kerry

src/components/views/messages/MessageActionBar.tsx

@@ -16,7 +16,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ReactElement, useEffect } from 'react';
+import React, { ReactElement, useContext, useEffect } from 'react';
 import { EventStatus, MatrixEvent, MatrixEventEvent } from 'matrix-js-sdk/src/models/event';
 import classNames from 'classnames';
 import { MsgType, RelationType } from 'matrix-js-sdk/src/@types/event';
@@ -45,6 +45,7 @@ import { Key } from "../../../Keyboard";
 import { ALTERNATE_KEY_NAME } from "../../../accessibility/KeyboardShortcuts";
 import { UserTab } from '../dialogs/UserTab';
 import { Action } from '../../../dispatcher/actions';
+import SdkConfig from "../../../SdkConfig";
 
 interface IOptionsButtonProps {
     mxEvent: MatrixEvent;
@@ -154,6 +155,76 @@ const ReactButton: React.FC<IReactButtonProps> = ({ mxEvent, reactions, onFocusC
     </React.Fragment>;
 };
 
+interface IReplyInThreadButton {
+    mxEvent: MatrixEvent;
+}
+
+const ReplyInThreadButton = ({ mxEvent }: IReplyInThreadButton) => {
+    const context = useContext(CardContext);
+
+    const relationType = mxEvent?.getRelation()?.rel_type;
+    const hasARelation = !!relationType && relationType !== RelationType.Thread;
+    const firstTimeSeeingThreads = localStorage.getItem("mx_seen_feature_thread") === null &&
+        !SettingsStore.getValue("feature_thread");
+
+    const onClick = (): void => {
+        if (localStorage.getItem("mx_seen_feature_thread") === null) {
+            localStorage.setItem("mx_seen_feature_thread", "true");
+        }
+
+        if (!SettingsStore.getValue("feature_thread")) {
+            dis.dispatch({
+                action: Action.ViewUserSettings,
+                initialTabId: UserTab.Labs,
+            });
+        } else if (mxEvent.isThreadRelation) {
+            showThread({
+                rootEvent: mxEvent.getThread().rootEvent,
+                initialEvent: mxEvent,
+                scroll_into_view: true,
+                highlighted: true,
+                push: context.isCard,
+            });
+        } else {
+            showThread({
+                rootEvent: mxEvent,
+                push: context.isCard,
+            });
+        }
+    };
+
+    return <RovingAccessibleTooltipButton
+        className="mx_MessageActionBar_maskButton mx_MessageActionBar_threadButton"
+
+        disabled={hasARelation}
+        tooltip={<>
+            <div className="mx_Tooltip_title">
+                { !hasARelation
+                    ? _t("Reply in thread")
+                    : _t("Can't create a thread from an event with an existing relation") }
+            </div>
+            { !hasARelation && (
+                <div className="mx_Tooltip_sub">
+                    { SettingsStore.getValue("feature_thread")
+                        ? _t("Beta feature")
+                        : _t("Beta feature. Click to learn more.")
+                    }
+                </div>
+            ) }
+        </>}
+
+        title={!hasARelation
+            ? _t("Reply in thread")
+            : _t("Can't create a thread from an event with an existing relation")}
+
+        onClick={onClick}
+    >
+        { firstTimeSeeingThreads && (
+            <div className="mx_Indicator" />
+        ) }
+    </RovingAccessibleTooltipButton>;
+};
+
 interface IMessageActionBarProps {
     mxEvent: MatrixEvent;
     reactions?: Relations;
@@ -222,32 +293,6 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
         });
     };
 
-    private onThreadClick = (isCard: boolean): void => {
-        if (localStorage.getItem("mx_seen_feature_thread") === null) {
-            localStorage.setItem("mx_seen_feature_thread", "true");
-        }
-
-        if (!SettingsStore.getValue("feature_thread")) {
-            dis.dispatch({
-                action: Action.ViewUserSettings,
-                initialTabId: UserTab.Labs,
-            });
-        } else if (this.props.mxEvent.isThreadRelation) {
-            showThread({
-                rootEvent: this.props.mxEvent.getThread().rootEvent,
-                initialEvent: this.props.mxEvent,
-                scroll_into_view: true,
-                highlighted: true,
-                push: isCard,
-            });
-        } else {
-            showThread({
-                rootEvent: this.props.mxEvent,
-                push: isCard,
-            });
-        }
-    };
-
     private onEditClick = (): void => {
         editEvent(this.props.mxEvent, this.context.timelineRenderingType, this.props.getRelationsForEvent);
     };
@@ -257,6 +302,15 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
     ];
 
     private get showReplyInThreadAction(): boolean {
+        if (!SettingsStore.getBetaInfo("feature_thread") &&
+            !SettingsStore.getValue("feature_thread") &&
+            !SdkConfig.get("show_labs_settings")
+        ) {
+            // Hide the beta prompt if there is no UI to enable it,
+            // e.g if config.json disables it and doesn't enable show labs flags
+            return false;
+        }
+
         const inNotThreadTimeline = this.context.timelineRenderingType !== TimelineRenderingType.Thread;
 
         const isAllowedMessageType = !this.forbiddenThreadHeadMsgType.includes(
@@ -319,44 +373,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
             key="cancel"
         />;
 
-        const relationType = this.props.mxEvent?.getRelation()?.rel_type;
-        const hasARelation = !!relationType && relationType !== RelationType.Thread;
-        const firstTimeSeeingThreads = localStorage.getItem("mx_seen_feature_thread") === null &&
-            !SettingsStore.getValue("feature_thread");
-        const threadTooltipButton = <CardContext.Consumer key="thread">
-            { context =>
-                <RovingAccessibleTooltipButton
-                    className="mx_MessageActionBar_maskButton mx_MessageActionBar_threadButton"
-
-                    disabled={hasARelation}
-                    tooltip={<>
-                        <div className="mx_Tooltip_title">
-                            { !hasARelation
-                                ? _t("Reply in thread")
-                                : _t("Can't create a thread from an event with an existing relation") }
-                        </div>
-                        { !hasARelation && (
-                            <div className="mx_Tooltip_sub">
-                                { SettingsStore.getValue("feature_thread")
-                                    ? _t("Beta feature")
-                                    : _t("Beta feature. Click to learn more.")
-                                }
-                            </div>
-                        ) }
-                    </>}
-
-                    title={!hasARelation
-                        ? _t("Reply in thread")
-                        : _t("Can't create a thread from an event with an existing relation")}
-
-                    onClick={this.onThreadClick.bind(null, context.isCard)}
-                >
-                    { firstTimeSeeingThreads && (
-                        <div className="mx_Indicator" />
-                    ) }
-                </RovingAccessibleTooltipButton>
-            }
-        </CardContext.Consumer>;
+        const threadTooltipButton = <ReplyInThreadButton mxEvent={this.props.mxEvent} />;
 
         // We show a different toolbar for failed events, so detect that first.
         const mxEvent = this.props.mxEvent;

src/components/views/rooms/RoomListHeader.tsx

@@ -140,6 +140,15 @@ const RoomListHeader = ({ onVisibilityChange }: IProps) => {
         }
     });
 
+    const canShowMainMenu = activeSpace || spaceKey === MetaSpace.Home;
+
+    useEffect(() => {
+        if (mainMenuDisplayed && !canShowMainMenu) {
+            // Space changed under us and we no longer has a main menu to draw
+            closeMainMenu();
+        }
+    }, [closeMainMenu, canShowMainMenu, mainMenuDisplayed]);
+
     // we pass null for the queryLength to inhibit the metrics hook for when there is no filterCondition
     useWebSearchMetrics(count, filterCondition ? filterCondition.search.length : null, false);
 
@@ -168,7 +177,7 @@ const RoomListHeader = ({ onVisibilityChange }: IProps) => {
     const canShowPlusMenu = canCreateRooms || canExploreRooms || activeSpace;
 
     let contextMenu: JSX.Element;
-    if (mainMenuDisplayed) {
+    if (mainMenuDisplayed && mainMenuHandle.current) {
         let ContextMenuComponent;
         if (activeSpace) {
             ContextMenuComponent = SpaceContextMenu;
@@ -364,7 +373,7 @@ const RoomListHeader = ({ onVisibilityChange }: IProps) => {
         .join("\n");
 
     let contextMenuButton: JSX.Element = <div className="mx_RoomListHeader_contextLessTitle">{ title }</div>;
-    if (activeSpace || spaceKey === MetaSpace.Home) {
+    if (canShowMainMenu) {
         contextMenuButton = <ContextMenuTooltipButton
             inputRef={mainMenuHandle}
             onClick={openMainMenu}

src/i18n/strings/en_EN.json

@@ -2081,11 +2081,11 @@
     "Error processing audio message": "Error processing audio message",
     "View live location": "View live location",
     "React": "React",
-    "Edit": "Edit",
     "Reply in thread": "Reply in thread",
     "Can't create a thread from an event with an existing relation": "Can't create a thread from an event with an existing relation",
     "Beta feature": "Beta feature",
     "Beta feature. Click to learn more.": "Beta feature. Click to learn more.",
+    "Edit": "Edit",
     "Reply": "Reply",
     "Collapse quotes": "Collapse quotes",
     "Expand quotes": "Expand quotes",

test/components/views/rooms/RoomListHeader-test.tsx

@@ -0,0 +1,136 @@
+/*
+Copyright 2022 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 from 'react';
+import { mount } from 'enzyme';
+import { MatrixClient } from 'matrix-js-sdk/src/client';
+import { act } from "react-dom/test-utils";
+
+import SpaceStore from "../../../../src/stores/spaces/SpaceStore";
+import { MetaSpace } from "../../../../src/stores/spaces";
+import RoomListHeader from "../../../../src/components/views/rooms/RoomListHeader";
+import * as testUtils from "../../../test-utils";
+import { createTestClient, mkSpace } from "../../../test-utils";
+import DMRoomMap from "../../../../src/utils/DMRoomMap";
+import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
+import SettingsStore from "../../../../src/settings/SettingsStore";
+import { SettingLevel } from "../../../../src/settings/SettingLevel";
+
+describe("RoomListHeader", () => {
+    let client: MatrixClient;
+
+    beforeEach(() => {
+        client = createTestClient();
+    });
+
+    it("renders a main menu for the home space", () => {
+        act(() => {
+            SpaceStore.instance.setActiveSpace(MetaSpace.Home);
+        });
+
+        const wrapper = mount(<MatrixClientContext.Provider value={client}>
+            <RoomListHeader />
+        </MatrixClientContext.Provider>);
+
+        expect(wrapper.text()).toBe("Home");
+        act(() => {
+            wrapper.find('[aria-label="Home options"]').hostNodes().simulate("click");
+        });
+        wrapper.update();
+
+        const menu = wrapper.find(".mx_IconizedContextMenu");
+        const items = menu.find(".mx_IconizedContextMenu_item").hostNodes();
+        expect(items).toHaveLength(1);
+        expect(items.at(0).text()).toBe("Show all rooms");
+    });
+
+    it("renders a main menu for spaces", async () => {
+        const testSpace = mkSpace(client, "!space:server");
+        testSpace.name = "Test Space";
+        client.getRoom = () => testSpace;
+
+        const getUserIdForRoomId = jest.fn();
+        const getDMRoomsForUserId = jest.fn();
+        // @ts-ignore
+        DMRoomMap.sharedInstance = { getUserIdForRoomId, getDMRoomsForUserId };
+
+        await testUtils.setupAsyncStoreWithClient(SpaceStore.instance, client);
+        act(() => {
+            SpaceStore.instance.setActiveSpace(testSpace.roomId);
+        });
+
+        const wrapper = mount(<MatrixClientContext.Provider value={client}>
+            <RoomListHeader />
+        </MatrixClientContext.Provider>);
+
+        expect(wrapper.text()).toBe("Test Space");
+        act(() => {
+            wrapper.find('[aria-label="Test Space menu"]').hostNodes().simulate("click");
+        });
+        wrapper.update();
+
+        const menu = wrapper.find(".mx_IconizedContextMenu");
+        const items = menu.find(".mx_IconizedContextMenu_item").hostNodes();
+        expect(items).toHaveLength(6);
+        expect(items.at(0).text()).toBe("Space home");
+        expect(items.at(1).text()).toBe("Manage & explore rooms");
+        expect(items.at(2).text()).toBe("Preferences");
+        expect(items.at(3).text()).toBe("Settings");
+        expect(items.at(4).text()).toBe("Room");
+        expect(items.at(4).text()).toBe("Room");
+    });
+
+    it("closes menu if space changes from under it", async () => {
+        await SettingsStore.setValue("Spaces.enabledMetaSpaces", null, SettingLevel.DEVICE, {
+            [MetaSpace.Home]: true,
+            [MetaSpace.Favourites]: true,
+        });
+
+        const testSpace = mkSpace(client, "!space:server");
+        testSpace.name = "Test Space";
+        client.getRoom = () => testSpace;
+
+        const getUserIdForRoomId = jest.fn();
+        const getDMRoomsForUserId = jest.fn();
+        // @ts-ignore
+        DMRoomMap.sharedInstance = { getUserIdForRoomId, getDMRoomsForUserId };
+
+        await testUtils.setupAsyncStoreWithClient(SpaceStore.instance, client);
+        act(() => {
+            SpaceStore.instance.setActiveSpace(testSpace.roomId);
+        });
+
+        const wrapper = mount(<MatrixClientContext.Provider value={client}>
+            <RoomListHeader />
+        </MatrixClientContext.Provider>);
+
+        expect(wrapper.text()).toBe("Test Space");
+        act(() => {
+            wrapper.find('[aria-label="Test Space menu"]').hostNodes().simulate("click");
+        });
+        wrapper.update();
+
+        act(() => {
+            SpaceStore.instance.setActiveSpace(MetaSpace.Favourites);
+        });
+        wrapper.update();
+
+        expect(wrapper.text()).toBe("Favourites");
+
+        const menu = wrapper.find(".mx_IconizedContextMenu");
+        expect(menu).toHaveLength(0);
+    });
+});

test/test-utils/test-utils.ts

@@ -379,6 +379,7 @@ export function mkStubRoom(roomId: string = null, name: string, client: MatrixCl
         getJoinRule: jest.fn().mockReturnValue("invite"),
         loadMembersIfNeeded: jest.fn(),
         client,
+        canInvite: jest.fn(),
     } as unknown as Room;
 }