Change spaceroomfacepile tooltip if memberlist is shown (#8571)

src/components/structures/SpaceRoomView.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2021 The Matrix.org Foundation C.I.C.
+Copyright 2021-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.
@@ -14,35 +14,32 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { RefObject, useContext, useRef, useState } from "react";
 import { EventType, RoomType } from "matrix-js-sdk/src/@types/event";
 import { JoinRule, Preset } from "matrix-js-sdk/src/@types/partials";
-import { Room, RoomEvent } from "matrix-js-sdk/src/models/room";
 import { logger } from "matrix-js-sdk/src/logger";
+import { Room, RoomEvent } from "matrix-js-sdk/src/models/room";
+import React, { RefObject, useCallback, useContext, useRef, useState } from "react";
 
 import MatrixClientContext from "../../contexts/MatrixClientContext";
-import RoomAvatar from "../views/avatars/RoomAvatar";
-import { _t } from "../../languageHandler";
-import AccessibleButton from "../views/elements/AccessibleButton";
-import RoomName from "../views/elements/RoomName";
-import RoomTopic from "../views/elements/RoomTopic";
-import { inviteMultipleToRoom, showRoomInviteDialog } from "../../RoomInvite";
-import { useFeatureEnabled } from "../../hooks/useSettings";
 import createRoom, { IOpts } from "../../createRoom";
-import Field from "../views/elements/Field";
+import { shouldShowComponent } from "../../customisations/helpers/UIComponents";
-import withValidation from "../views/elements/Validation";
-import * as Email from "../../email";
-import defaultDispatcher from "../../dispatcher/dispatcher";
 import { Action } from "../../dispatcher/actions";
-import ResizeNotifier from "../../utils/ResizeNotifier";
+import defaultDispatcher from "../../dispatcher/dispatcher";
-import MainSplit from './MainSplit';
-import ErrorBoundary from "../views/elements/ErrorBoundary";
 import { ActionPayload } from "../../dispatcher/payloads";
-import RightPanel from "./RightPanel";
+import { ViewRoomPayload } from "../../dispatcher/payloads/ViewRoomPayload";
+import * as Email from "../../email";
+import { useEventEmitterState } from "../../hooks/useEventEmitter";
+import { useMyRoomMembership } from "../../hooks/useRoomMembers";
+import { useFeatureEnabled } from "../../hooks/useSettings";
+import { useStateArray } from "../../hooks/useStateArray";
+import { _t } from "../../languageHandler";
+import PosthogTrackers from "../../PosthogTrackers";
+import { inviteMultipleToRoom, showRoomInviteDialog } from "../../RoomInvite";
+import { UIComponent } from "../../settings/UIFeature";
+import { UPDATE_EVENT } from "../../stores/AsyncStore";
 import RightPanelStore from "../../stores/right-panel/RightPanelStore";
 import { RightPanelPhases } from "../../stores/right-panel/RightPanelStorePhases";
-import { useStateArray } from "../../hooks/useStateArray";
+import ResizeNotifier from "../../utils/ResizeNotifier";
-import SpacePublicShare from "../views/spaces/SpacePublicShare";
 import {
     shouldShowSpaceInvite,
     shouldShowSpaceSettings,
@@ -52,29 +49,33 @@ import {
     showSpaceInvite,
     showSpaceSettings,
 } from "../../utils/space";
-import SpaceHierarchy, { showRoom } from "./SpaceHierarchy";
+import RoomAvatar from "../views/avatars/RoomAvatar";
-import RoomFacePile from "../views/elements/RoomFacePile";
+import { BetaPill } from "../views/beta/BetaCard";
+import IconizedContextMenu, {
+    IconizedContextMenuOption,
+    IconizedContextMenuOptionList,
+} from "../views/context_menus/IconizedContextMenu";
 import {
     AddExistingToSpace,
     defaultDmsRenderer,
     defaultRoomsRenderer,
 } from "../views/dialogs/AddExistingToSpaceDialog";
-import { ChevronFace, ContextMenuButton, useContextMenu } from "./ContextMenu";
+import AccessibleButton from "../views/elements/AccessibleButton";
-import IconizedContextMenu, {
-    IconizedContextMenuOption,
-    IconizedContextMenuOptionList,
-} from "../views/context_menus/IconizedContextMenu";
 import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
-import { BetaPill } from "../views/beta/BetaCard";
+import ErrorBoundary from "../views/elements/ErrorBoundary";
-import { SpaceFeedbackPrompt } from "../views/spaces/SpaceCreateMenu";
+import Field from "../views/elements/Field";
+import RoomFacePile from "../views/elements/RoomFacePile";
+import RoomName from "../views/elements/RoomName";
+import RoomTopic from "../views/elements/RoomTopic";
+import withValidation from "../views/elements/Validation";
 import RoomInfoLine from "../views/rooms/RoomInfoLine";
 import RoomPreviewCard from "../views/rooms/RoomPreviewCard";
-import { useMyRoomMembership } from "../../hooks/useRoomMembers";
+import { SpaceFeedbackPrompt } from "../views/spaces/SpaceCreateMenu";
-import { shouldShowComponent } from "../../customisations/helpers/UIComponents";
+import SpacePublicShare from "../views/spaces/SpacePublicShare";
-import { UIComponent } from "../../settings/UIFeature";
+import { ChevronFace, ContextMenuButton, useContextMenu } from "./ContextMenu";
-import { UPDATE_EVENT } from "../../stores/AsyncStore";
+import MainSplit from './MainSplit';
-import PosthogTrackers from "../../PosthogTrackers";
+import RightPanel from "./RightPanel";
-import { ViewRoomPayload } from "../../dispatcher/payloads/ViewRoomPayload";
+import SpaceHierarchy, { showRoom } from "./SpaceHierarchy";
 
 interface IProps {
     space: Room;
@@ -195,6 +196,13 @@ const SpaceLanding = ({ space }: { space: Room }) => {
     const myMembership = useMyRoomMembership(space);
     const userId = cli.getUserId();
 
+    const storeIsShowingSpaceMembers = useCallback(
+        () => RightPanelStore.instance.isOpenForRoom(space.roomId)
+            && RightPanelStore.instance.currentCardForRoom(space.roomId)?.phase === RightPanelPhases.SpaceMemberList,
+        [space.roomId],
+    );
+    const isShowingMembers = useEventEmitterState(RightPanelStore.instance, UPDATE_EVENT, storeIsShowingSpaceMembers);
+
     let inviteButton;
     if (shouldShowSpaceInvite(space) && shouldShowComponent(UIComponent.InviteUsers)) {
         inviteButton = (
@@ -249,7 +257,12 @@ const SpaceLanding = ({ space }: { space: Room }) => {
         <div className="mx_SpaceRoomView_landing_infoBar">
             <RoomInfoLine room={space} />
             <div className="mx_SpaceRoomView_landing_infoBar_interactive">
-                <RoomFacePile room={space} onlyKnownUsers={false} numShown={7} onClick={onMembersClick} />
+                <RoomFacePile
+                    room={space}
+                    onlyKnownUsers={false}
+                    numShown={7}
+                    onClick={isShowingMembers ? undefined : onMembersClick}
+                />
                 { inviteButton }
                 { settingsButton }
             </div>

src/components/views/elements/RoomFacePile.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2021 The Matrix.org Foundation C.I.C.
+Copyright 2021-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.
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { FC, HTMLAttributes, ReactNode, useContext } from "react";
+import React, { FC, HTMLAttributes, useContext } from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { sortBy } from "lodash";
@@ -60,36 +60,18 @@ const RoomFacePile: FC<IProps> = (
     // reverse members in tooltip order to make the order between the two match up.
     const commaSeparatedMembers = shownMembers.map(m => m.name).reverse().join(", ");
 
-    let tooltip: ReactNode;
+    const tooltip = <div>
-    if (props.onClick) {
-        let subText: string;
-        if (isJoined) {
-            subText = _t("Including you, %(commaSeparatedMembers)s", { commaSeparatedMembers });
-        } else {
-            subText = _t("Including %(commaSeparatedMembers)s", { commaSeparatedMembers });
-        }
-
-        tooltip = <div>
         <div className="mx_Tooltip_title">
-                { _t("View all %(count)s members", { count }) }
+            { props.onClick
+                ? _t("View all %(count)s members", { count })
+                : _t("%(count)s members", { count }) }
         </div>
         <div className="mx_Tooltip_sub">
-                { subText }
+            { isJoined
+                ? _t("Including you, %(commaSeparatedMembers)s", { commaSeparatedMembers })
+                : _t("Including %(commaSeparatedMembers)s", { commaSeparatedMembers }) }
         </div>
     </div>;
-    } else {
-        if (isJoined) {
-            tooltip = _t("%(count)s members including you, %(commaSeparatedMembers)s", {
-                count: count - 1,
-                commaSeparatedMembers,
-            });
-        } else {
-            tooltip = _t("%(count)s members including %(commaSeparatedMembers)s", {
-                count,
-                commaSeparatedMembers,
-            });
-        }
-    }
 
     return <FacePile
         members={shownMembers}

src/i18n/strings/en_EN.json

@@ -2364,15 +2364,10 @@
     "This address is available to use": "This address is available to use",
     "This address is already in use": "This address is already in use",
     "This address had invalid server or is already in use": "This address had invalid server or is already in use",
-    "Including you, %(commaSeparatedMembers)s": "Including you, %(commaSeparatedMembers)s",
-    "Including %(commaSeparatedMembers)s": "Including %(commaSeparatedMembers)s",
     "View all %(count)s members|other": "View all %(count)s members",
     "View all %(count)s members|one": "View 1 member",
-    "%(count)s members including you, %(commaSeparatedMembers)s|other": "%(count)s members including you, %(commaSeparatedMembers)s",
+    "Including you, %(commaSeparatedMembers)s": "Including you, %(commaSeparatedMembers)s",
-    "%(count)s members including you, %(commaSeparatedMembers)s|zero": "You",
+    "Including %(commaSeparatedMembers)s": "Including %(commaSeparatedMembers)s",
-    "%(count)s members including you, %(commaSeparatedMembers)s|one": "%(count)s members including you and %(commaSeparatedMembers)s",
-    "%(count)s members including %(commaSeparatedMembers)s|other": "%(count)s members including %(commaSeparatedMembers)s",
-    "%(count)s members including %(commaSeparatedMembers)s|one": "%(commaSeparatedMembers)s",
     "%(count)s people you know have already joined|other": "%(count)s people you know have already joined",
     "%(count)s people you know have already joined|one": "%(count)s person you know has already joined",
     "Message search initialisation failed, check <a>your settings</a> for more information": "Message search initialisation failed, check <a>your settings</a> for more information",