diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss index 90dca32e48..3c2736459a 100644 --- a/res/css/views/auth/_AuthBody.scss +++ b/res/css/views/auth/_AuthBody.scss @@ -58,10 +58,6 @@ limitations under the License. background-color: $authpage-body-bg-color; } - .mx_Field label { - color: $authpage-primary-color; - } - .mx_Field_labelAlwaysTopLeft label, .mx_Field select + label /* Always show a select's label on top to not collide with the value */, .mx_Field input:focus + label, diff --git a/res/css/views/dialogs/_AddExistingToSpaceDialog.scss b/res/css/views/dialogs/_AddExistingToSpaceDialog.scss index 444b29c9bf..8b19f506f5 100644 --- a/res/css/views/dialogs/_AddExistingToSpaceDialog.scss +++ b/res/css/views/dialogs/_AddExistingToSpaceDialog.scss @@ -75,7 +75,7 @@ limitations under the License. @mixin ProgressBarBorderRadius 8px; } - .mx_AddExistingToSpace_progressText { + .mx_AddExistingToSpaceDialog_progressText { margin-top: 8px; font-size: $font-15px; line-height: $font-24px; diff --git a/res/css/views/dialogs/_CreateSpaceFromCommunityDialog.scss b/res/css/views/dialogs/_CreateSpaceFromCommunityDialog.scss index 6ff328f6ab..f1af24cc5f 100644 --- a/res/css/views/dialogs/_CreateSpaceFromCommunityDialog.scss +++ b/res/css/views/dialogs/_CreateSpaceFromCommunityDialog.scss @@ -74,6 +74,7 @@ limitations under the License. font-size: $font-12px; line-height: $font-15px; color: $secondary-content; + margin-top: -13px; // match height of buttons to prevent height changing .mx_ProgressBar { height: 8px; diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss index 71d37a015d..37d335b76d 100644 --- a/res/css/views/elements/_Field.scss +++ b/res/css/views/elements/_Field.scss @@ -100,7 +100,6 @@ limitations under the License. color 0.25s ease-out 0.1s, transform 0.25s ease-out 0.1s, background-color 0.25s ease-out 0.1s; - color: $primary-content; background-color: transparent; font-size: $font-14px; transform: translateY(0); diff --git a/res/css/views/rooms/_RoomSublist.scss b/res/css/views/rooms/_RoomSublist.scss index 6db2185dd5..95b9f1822d 100644 --- a/res/css/views/rooms/_RoomSublist.scss +++ b/res/css/views/rooms/_RoomSublist.scss @@ -22,6 +22,12 @@ limitations under the License. display: none; } + &:not(.mx_RoomSublist_minimized) { + .mx_RoomSublist_headerContainer { + height: auto; + } + } + .mx_RoomSublist_headerContainer { // Create a flexbox to make alignment easy display: flex; @@ -41,9 +47,7 @@ limitations under the License. // The combined height must be set in the LeftPanel component for sticky headers // to work correctly. padding-bottom: 8px; - // Allow the container to collapse on itself if its children - // are not in the normal document flow - max-height: 24px; + height: 24px; color: $roomlist-header-color; .mx_RoomSublist_stickable { @@ -172,14 +176,6 @@ limitations under the License. } } - // In the general case, we reserve space for each sublist header to prevent - // scroll jumps when they become sticky. However, that leaves a gap when - // scrolled to the top above the first sublist (whose header can only ever - // stick to top), so we make sure to exclude the first visible sublist. - &:not(.mx_RoomSublist_hidden) ~ .mx_RoomSublist .mx_RoomSublist_headerContainer { - height: 24px; - } - .mx_RoomSublist_resizeBox { position: relative; diff --git a/src/Avatar.ts b/src/Avatar.ts index c0ecb19eaf..93109a470e 100644 --- a/src/Avatar.ts +++ b/src/Avatar.ts @@ -142,15 +142,11 @@ export function avatarUrlForRoom(room: Room, width: number, height: number, resi // space rooms cannot be DMs so skip the rest if (SpaceStore.spacesEnabled && room.isSpaceRoom()) return null; - let otherMember = null; - const otherUserId = DMRoomMap.shared().getUserIdForRoomId(room.roomId); - if (otherUserId) { - otherMember = room.getMember(otherUserId); - } else { - // if the room is not marked as a 1:1, but only has max 2 members - // then still try to show any avatar (pref. other member) - otherMember = room.getAvatarFallbackMember(); - } + // If the room is not a DM don't fallback to a member avatar + if (!DMRoomMap.shared().getUserIdForRoomId(room.roomId)) return null; + + // If there are only two members in the DM use the avatar of the other member + const otherMember = room.getAvatarFallbackMember(); if (otherMember?.getMxcAvatarUrl()) { return mediaFromMxc(otherMember.getMxcAvatarUrl()).getThumbnailOfSourceHttp(width, height, resizeMethod); } diff --git a/src/RoomInvite.tsx b/src/RoomInvite.tsx index 7d093f4092..5c9d96f509 100644 --- a/src/RoomInvite.tsx +++ b/src/RoomInvite.tsx @@ -42,10 +42,15 @@ export interface IInviteResult { * * @param {string} roomId The ID of the room to invite to * @param {string[]} addresses Array of strings of addresses to invite. May be matrix IDs or 3pids. + * @param {function} progressCallback optional callback, fired after each invite. * @returns {Promise} Promise */ -export function inviteMultipleToRoom(roomId: string, addresses: string[]): Promise { - const inviter = new MultiInviter(roomId); +export function inviteMultipleToRoom( + roomId: string, + addresses: string[], + progressCallback?: () => void, +): Promise { + const inviter = new MultiInviter(roomId, progressCallback); return inviter.invite(addresses).then(states => Promise.resolve({ states, inviter })); } @@ -104,8 +109,8 @@ export function isValid3pidInvite(event: MatrixEvent): boolean { return true; } -export function inviteUsersToRoom(roomId: string, userIds: string[]): Promise { - return inviteMultipleToRoom(roomId, userIds).then((result) => { +export function inviteUsersToRoom(roomId: string, userIds: string[], progressCallback?: () => void): Promise { + return inviteMultipleToRoom(roomId, userIds, progressCallback).then((result) => { const room = MatrixClientPeg.get().getRoom(roomId); showAnyInviteErrors(result.states, room, result.inviter); }).catch((err) => { diff --git a/src/ScalarMessaging.ts b/src/ScalarMessaging.ts index 888b9ce9ed..d068c1f924 100644 --- a/src/ScalarMessaging.ts +++ b/src/ScalarMessaging.ts @@ -452,7 +452,9 @@ function setBotOptions(event: MessageEvent, roomId: string, userId: string) }); } -function setBotPower(event: MessageEvent, roomId: string, userId: string, level: number): void { +async function setBotPower( + event: MessageEvent, roomId: string, userId: string, level: number, ignoreIfGreater?: boolean, +): Promise { if (!(Number.isInteger(level) && level >= 0)) { sendError(event, _t('Power level must be positive integer.')); return; @@ -465,22 +467,34 @@ function setBotPower(event: MessageEvent, roomId: string, userId: string, l return; } - client.getStateEvent(roomId, "m.room.power_levels", "").then((powerLevels) => { - const powerEvent = new MatrixEvent( + try { + const powerLevels = await client.getStateEvent(roomId, "m.room.power_levels", ""); + + // If the PL is equal to or greater than the requested PL, ignore. + if (ignoreIfGreater === true) { + // As per https://matrix.org/docs/spec/client_server/r0.6.0#m-room-power-levels + const currentPl = ( + powerLevels.content.users && powerLevels.content.users[userId] + ) || powerLevels.content.users_default || 0; + + if (currentPl >= level) { + return sendResponse(event, { + success: true, + }); + } + } + await client.setPowerLevel(roomId, userId, level, new MatrixEvent( { type: "m.room.power_levels", content: powerLevels, }, - ); - - client.setPowerLevel(roomId, userId, level, powerEvent).then(() => { - sendResponse(event, { - success: true, - }); - }, (err) => { - sendError(event, err.message ? err.message : _t('Failed to send request.'), err); + )); + return sendResponse(event, { + success: true, }); - }); + } catch (err) { + sendError(event, err.message ? err.message : _t('Failed to send request.'), err); + } } function getMembershipState(event: MessageEvent, roomId: string, userId: string): void { @@ -678,7 +692,7 @@ const onMessage = function(event: MessageEvent): void { setBotOptions(event, roomId, userId); break; case Action.SetBotPower: - setBotPower(event, roomId, userId, event.data.level); + setBotPower(event, roomId, userId, event.data.level, event.data.ignoreIfGreater); break; default: console.warn("Unhandled postMessage event with action '" + event.data.action +"'"); diff --git a/src/components/structures/ContextMenu.tsx b/src/components/structures/ContextMenu.tsx index 9f1a5adc9d..4250b5925b 100644 --- a/src/components/structures/ContextMenu.tsx +++ b/src/components/structures/ContextMenu.tsx @@ -19,6 +19,7 @@ limitations under the License. import React, { CSSProperties, RefObject, SyntheticEvent, useRef, useState } from "react"; import ReactDOM from "react-dom"; import classNames from "classnames"; +import FocusLock from "react-focus-lock"; import { Key } from "../../Keyboard"; import { Writeable } from "../../@types/common"; @@ -43,8 +44,6 @@ function getOrCreateContainer(): HTMLDivElement { return container; } -const ARIA_MENU_ITEM_ROLES = new Set(["menuitem", "menuitemcheckbox", "menuitemradio"]); - export interface IPosition { top?: number; bottom?: number; @@ -84,6 +83,10 @@ export interface IProps extends IPosition { // it will be mounted to a container at the root of the DOM. mountAsChild?: boolean; + // If specified, contents will be wrapped in a FocusLock, this is only needed if the context menu is being rendered + // within an existing FocusLock e.g inside a modal. + focusLock?: boolean; + // Function to be called on menu close onFinished(); // on resize callback @@ -99,7 +102,7 @@ interface IState { // this will allow the ContextMenu to manage its own focus using arrow keys as per the ARIA guidelines. @replaceableComponent("structures.ContextMenu") export class ContextMenu extends React.PureComponent { - private initialFocus: HTMLElement; + private readonly initialFocus: HTMLElement; static defaultProps = { hasBackground: true, @@ -108,6 +111,7 @@ export class ContextMenu extends React.PureComponent { constructor(props, context) { super(props, context); + this.state = { contextMenuElem: null, }; @@ -121,14 +125,13 @@ export class ContextMenu extends React.PureComponent { this.initialFocus.focus(); } - private collectContextMenuRect = (element) => { + private collectContextMenuRect = (element: HTMLDivElement) => { // We don't need to clean up when unmounting, so ignore if (!element) return; - let first = element.querySelector('[role^="menuitem"]'); - if (!first) { - first = element.querySelector('[tab-index]'); - } + const first = element.querySelector('[role^="menuitem"]') + || element.querySelector('[tab-index]'); + if (first) { first.focus(); } @@ -205,7 +208,7 @@ export class ContextMenu extends React.PureComponent { descending = true; } } - } while (element && !ARIA_MENU_ITEM_ROLES.has(element.getAttribute("role"))); + } while (element && !element.getAttribute("role")?.startsWith("menuitem")); if (element) { (element as HTMLElement).focus(); @@ -383,6 +386,17 @@ export class ContextMenu extends React.PureComponent { ); } + let body = <> + { chevron } + { props.children } + ; + + if (props.focusLock) { + body = + { body } + ; + } + return (
{ ref={this.collectContextMenuRect} role={this.props.managed ? "menu" : undefined} > - { chevron } - { props.children } + { body }
{ background } diff --git a/src/components/structures/SpaceHierarchy.tsx b/src/components/structures/SpaceHierarchy.tsx index ed87b04c8a..c97c984d59 100644 --- a/src/components/structures/SpaceHierarchy.tsx +++ b/src/components/structures/SpaceHierarchy.tsx @@ -15,17 +15,17 @@ limitations under the License. */ import React, { + Dispatch, + KeyboardEvent, + KeyboardEventHandler, ReactNode, + SetStateAction, useCallback, + useContext, useEffect, useMemo, useRef, useState, - KeyboardEvent, - KeyboardEventHandler, - useContext, - SetStateAction, - Dispatch, } from "react"; import { Room } from "matrix-js-sdk/src/models/room"; import { RoomHierarchy } from "matrix-js-sdk/src/room-hierarchy"; @@ -33,7 +33,8 @@ import { EventType, RoomType } from "matrix-js-sdk/src/@types/event"; import { IHierarchyRelation, IHierarchyRoom } from "matrix-js-sdk/src/@types/spaces"; import { MatrixClient } from "matrix-js-sdk/src/matrix"; import classNames from "classnames"; -import { sortBy } from "lodash"; +import { sortBy, uniqBy } from "lodash"; +import { GuestAccess, HistoryVisibility } from "matrix-js-sdk/src/@types/partials"; import dis from "../../dispatcher/dispatcher"; import defaultDispatcher from "../../dispatcher/dispatcher"; @@ -333,6 +334,30 @@ interface IHierarchyLevelProps { onToggleClick?(parentId: string, childId: string): void; } +const toLocalRoom = (cli: MatrixClient, room: IHierarchyRoom): IHierarchyRoom => { + const history = cli.getRoomUpgradeHistory(room.room_id, true); + const cliRoom = history[history.length - 1]; + if (cliRoom) { + return { + ...room, + room_id: cliRoom.roomId, + room_type: cliRoom.getType(), + name: cliRoom.name, + topic: cliRoom.currentState.getStateEvents(EventType.RoomTopic, "")?.getContent().topic, + avatar_url: cliRoom.getMxcAvatarUrl(), + canonical_alias: cliRoom.getCanonicalAlias(), + aliases: cliRoom.getAltAliases(), + world_readable: cliRoom.currentState.getStateEvents(EventType.RoomHistoryVisibility, "")?.getContent() + .history_visibility === HistoryVisibility.WorldReadable, + guest_can_join: cliRoom.currentState.getStateEvents(EventType.RoomGuestAccess, "")?.getContent() + .guest_access === GuestAccess.CanJoin, + num_joined_members: cliRoom.getJoinedMemberCount(), + }; + } + + return room; +}; + export const HierarchyLevel = ({ root, roomSet, @@ -353,7 +378,7 @@ export const HierarchyLevel = ({ const [subspaces, childRooms] = sortedChildren.reduce((result, ev: IHierarchyRelation) => { const room = hierarchy.roomMap.get(ev.state_key); if (room && roomSet.has(room)) { - result[room.room_type === RoomType.Space ? 0 : 1].push(room); + result[room.room_type === RoomType.Space ? 0 : 1].push(toLocalRoom(cli, room)); } return result; }, [[] as IHierarchyRoom[], [] as IHierarchyRoom[]]); @@ -361,7 +386,7 @@ export const HierarchyLevel = ({ const newParents = new Set(parents).add(root.room_id); return { - childRooms.map(room => ( + uniqBy(childRooms, "room_id").map(room => ( ; } => { const [rooms, setRooms] = useState([]); - const [loading, setLoading] = useState(true); const [hierarchy, setHierarchy] = useState(); const resetHierarchy = useCallback(() => { const hierarchy = new RoomHierarchy(space, INITIAL_PAGE_SIZE); - setHierarchy(hierarchy); - - let discard = false; hierarchy.load().then(() => { - if (discard) return; + if (space !== hierarchy.root) return; // discard stale results setRooms(hierarchy.rooms); - setLoading(false); }); - - return () => { - discard = true; - }; + setHierarchy(hierarchy); }, [space]); useEffect(resetHierarchy, [resetHierarchy]); useDispatcher(defaultDispatcher, (payload => { if (payload.action === Action.UpdateSpaceHierarchy) { - setLoading(true); setRooms([]); // TODO resetHierarchy(); } })); const loadMore = useCallback(async (pageSize?: number) => { - if (loading || !hierarchy.canLoadMore || hierarchy.noSupport) return; - - setLoading(true); + if (hierarchy.loading || !hierarchy.canLoadMore || hierarchy.noSupport) return; await hierarchy.load(pageSize); setRooms(hierarchy.rooms); - setLoading(false); - }, [loading, hierarchy]); + }, [hierarchy]); + const loading = hierarchy?.loading ?? true; return { loading, rooms, hierarchy, loadMore }; }; @@ -587,7 +601,7 @@ const SpaceHierarchy = ({ const [selected, setSelected] = useState(new Map>()); // Map> - const { loading, rooms, hierarchy, loadMore } = useSpaceSummary(space); + const { loading, rooms, hierarchy, loadMore } = useRoomHierarchy(space); const filteredRoomSet = useMemo>(() => { if (!rooms?.length) return new Set(); diff --git a/src/components/views/dialogs/CreateSpaceFromCommunityDialog.tsx b/src/components/views/dialogs/CreateSpaceFromCommunityDialog.tsx index e74082427f..c7706c115c 100644 --- a/src/components/views/dialogs/CreateSpaceFromCommunityDialog.tsx +++ b/src/components/views/dialogs/CreateSpaceFromCommunityDialog.tsx @@ -39,6 +39,8 @@ import dis from "../../../dispatcher/dispatcher"; import { Action } from "../../../dispatcher/actions"; import { UserTab } from "./UserSettingsDialog"; import TagOrderActions from "../../../actions/TagOrderActions"; +import { inviteUsersToRoom } from "../../../RoomInvite"; +import ProgressBar from "../elements/ProgressBar"; interface IProps { matrixClient: MatrixClient; @@ -90,10 +92,22 @@ export interface IGroupSummary { } /* eslint-enable camelcase */ +enum Progress { + NotStarted, + ValidatingInputs, + FetchingData, + CreatingSpace, + InvitingUsers, + // anything beyond here is inviting user n - 4 +} + const CreateSpaceFromCommunityDialog: React.FC = ({ matrixClient: cli, groupId, onFinished }) => { const [loading, setLoading] = useState(true); const [error, setError] = useState(null); - const [busy, setBusy] = useState(false); + + const [progress, setProgress] = useState(Progress.NotStarted); + const [numInvites, setNumInvites] = useState(0); + const busy = progress > 0; const [avatar, setAvatar] = useState(null); // undefined means to remove avatar const [name, setName] = useState(""); @@ -122,30 +136,34 @@ const CreateSpaceFromCommunityDialog: React.FC = ({ matrixClient: cli, g if (busy) return; setError(null); - setBusy(true); + setProgress(Progress.ValidatingInputs); // require & validate the space name field if (!(await spaceNameField.current.validate({ allowEmpty: false }))) { - setBusy(false); + setProgress(0); spaceNameField.current.focus(); spaceNameField.current.validate({ allowEmpty: false, focused: true }); return; } // validate the space name alias field but do not require it if (joinRule === JoinRule.Public && !(await spaceAliasField.current.validate({ allowEmpty: true }))) { - setBusy(false); + setProgress(0); spaceAliasField.current.focus(); spaceAliasField.current.validate({ allowEmpty: true, focused: true }); return; } try { + setProgress(Progress.FetchingData); + const [rooms, members, invitedMembers] = await Promise.all([ cli.getGroupRooms(groupId).then(parseRoomsResponse) as Promise, cli.getGroupUsers(groupId).then(parseMembersResponse) as Promise, cli.getGroupInvitedUsers(groupId).then(parseMembersResponse) as Promise, ]); + setNumInvites(members.length + invitedMembers.length); + const viaMap = new Map(); for (const { roomId, canonicalAlias } of rooms) { const room = cli.getRoom(roomId); @@ -167,6 +185,8 @@ const CreateSpaceFromCommunityDialog: React.FC = ({ matrixClient: cli, g } } + setProgress(Progress.CreatingSpace); + const spaceAvatar = avatar !== undefined ? avatar : groupSummary.profile.avatar_url; const roomId = await createSpace(name, joinRule === JoinRule.Public, alias, topic, spaceAvatar, { creation_content: { @@ -179,11 +199,16 @@ const CreateSpaceFromCommunityDialog: React.FC = ({ matrixClient: cli, g via: viaMap.get(roomId) || [], }, })), - invite: [...members, ...invitedMembers].map(m => m.userId).filter(m => m !== cli.getUserId()), + // we do not specify the inviters here because Synapse applies a limit and this may cause it to trip }, { andView: false, }); + setProgress(Progress.InvitingUsers); + + const userIds = [...members, ...invitedMembers].map(m => m.userId).filter(m => m !== cli.getUserId()); + await inviteUsersToRoom(roomId, userIds, () => setProgress(p => p + 1)); + // eagerly remove it from the community panel dis.dispatch(TagOrderActions.removeTag(cli, groupId)); @@ -250,7 +275,7 @@ const CreateSpaceFromCommunityDialog: React.FC = ({ matrixClient: cli, g setError(e); } - setBusy(false); + setProgress(Progress.NotStarted); }; let footer; @@ -267,13 +292,41 @@ const CreateSpaceFromCommunityDialog: React.FC = ({ matrixClient: cli, g { _t("Retry") } ; + } else if (busy) { + let description: string; + switch (progress) { + case Progress.ValidatingInputs: + case Progress.FetchingData: + description = _t("Fetching data..."); + break; + case Progress.CreatingSpace: + description = _t("Creating Space..."); + break; + case Progress.InvitingUsers: + default: + description = _t("Adding rooms... (%(progress)s out of %(count)s)", { + count: numInvites, + progress, + }); + break; + } + + footer = + Progress.FetchingData ? progress : 0} + max={numInvites + Progress.InvitingUsers} + /> +
+ { description } +
+ ; } else { footer = <> - onFinished()}> + onFinished()}> { _t("Cancel") } - - { busy ? _t("Creating...") : _t("Create Space") } + + { _t("Create Space") } ; } diff --git a/src/components/views/dialogs/RoomSettingsDialog.tsx b/src/components/views/dialogs/RoomSettingsDialog.tsx index a73f0a595b..b0c6fc4050 100644 --- a/src/components/views/dialogs/RoomSettingsDialog.tsx +++ b/src/components/views/dialogs/RoomSettingsDialog.tsx @@ -44,18 +44,31 @@ interface IProps { initialTabId?: string; } +interface IState { + roomName: string; +} + @replaceableComponent("views.dialogs.RoomSettingsDialog") -export default class RoomSettingsDialog extends React.Component { +export default class RoomSettingsDialog extends React.Component { private dispatcherRef: string; + constructor(props: IProps) { + super(props); + this.state = { roomName: '' }; + } + public componentDidMount() { this.dispatcherRef = dis.register(this.onAction); + MatrixClientPeg.get().on("Room.name", this.onRoomName); + this.onRoomName(); } public componentWillUnmount() { if (this.dispatcherRef) { dis.unregister(this.dispatcherRef); } + + MatrixClientPeg.get().removeListener("Room.name", this.onRoomName); } private onAction = (payload): void => { @@ -66,6 +79,12 @@ export default class RoomSettingsDialog extends React.Component { } }; + private onRoomName = (): void => { + this.setState({ + roomName: MatrixClientPeg.get().getRoom(this.props.roomId).name, + }); + }; + private getTabs(): Tab[] { const tabs: Tab[] = []; @@ -122,7 +141,7 @@ export default class RoomSettingsDialog extends React.Component { } render() { - const roomName = MatrixClientPeg.get().getRoom(this.props.roomId).name; + const roomName = this.state.roomName; return ( + content =
{ options } diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx index 3ac4088182..7de38b587f 100644 --- a/src/components/views/right_panel/UserInfo.tsx +++ b/src/components/views/right_panel/UserInfo.tsx @@ -817,7 +817,7 @@ const RoomAdminToolsContainer: React.FC = ({ const isMe = me.userId === member.userId; const canAffectUser = member.powerLevel < me.powerLevel || isMe; - if (canAffectUser && me.powerLevel >= kickPowerLevel) { + if (!isMe && canAffectUser && me.powerLevel >= kickPowerLevel) { kickButton = ; } if (me.powerLevel >= redactPowerLevel && (!SpaceStore.spacesEnabled || !room.isSpaceRoom())) { @@ -825,10 +825,10 @@ const RoomAdminToolsContainer: React.FC = ({ ); } - if (canAffectUser && me.powerLevel >= banPowerLevel) { + if (!isMe && canAffectUser && me.powerLevel >= banPowerLevel) { banButton = ; } - if (canAffectUser && me.powerLevel >= editPowerLevel && !room.isSpaceRoom()) { + if (!isMe && canAffectUser && me.powerLevel >= editPowerLevel && !room.isSpaceRoom()) { muteButton = ( ; canSetName: boolean; canSetTopic: boolean; canSetAvatar: boolean; @@ -71,7 +71,7 @@ export default class RoomProfileSettings extends React.Component avatarFile: null, originalTopic: topic, topic: topic, - enableProfileSave: false, + profileFieldsTouched: {}, canSetName: room.currentState.maySendStateEvent('m.room.name', client.getUserId()), canSetTopic: room.currentState.maySendStateEvent('m.room.topic', client.getUserId()), canSetAvatar: room.currentState.maySendStateEvent('m.room.avatar', client.getUserId()), @@ -88,17 +88,24 @@ export default class RoomProfileSettings extends React.Component this.setState({ avatarUrl: null, avatarFile: null, - enableProfileSave: true, + profileFieldsTouched: { + ...this.state.profileFieldsTouched, + avatar: true, + }, }); }; + private isSaveEnabled = () => { + return Boolean(Object.values(this.state.profileFieldsTouched).length); + }; + private cancelProfileChanges = async (e: React.MouseEvent): Promise => { e.stopPropagation(); e.preventDefault(); - if (!this.state.enableProfileSave) return; + if (!this.isSaveEnabled()) return; this.setState({ - enableProfileSave: false, + profileFieldsTouched: {}, displayName: this.state.originalDisplayName, topic: this.state.originalTopic, avatarUrl: this.state.originalAvatarUrl, @@ -110,8 +117,8 @@ export default class RoomProfileSettings extends React.Component e.stopPropagation(); e.preventDefault(); - if (!this.state.enableProfileSave) return; - this.setState({ enableProfileSave: false }); + if (!this.isSaveEnabled()) return; + this.setState({ profileFieldsTouched: {} }); const client = MatrixClientPeg.get(); @@ -156,18 +163,38 @@ export default class RoomProfileSettings extends React.Component private onDisplayNameChanged = (e: React.ChangeEvent): void => { this.setState({ displayName: e.target.value }); if (this.state.originalDisplayName === e.target.value) { - this.setState({ enableProfileSave: false }); + this.setState({ + profileFieldsTouched: { + ...this.state.profileFieldsTouched, + name: false, + }, + }); } else { - this.setState({ enableProfileSave: true }); + this.setState({ + profileFieldsTouched: { + ...this.state.profileFieldsTouched, + name: true, + }, + }); } }; private onTopicChanged = (e: React.ChangeEvent): void => { this.setState({ topic: e.target.value }); if (this.state.originalTopic === e.target.value) { - this.setState({ enableProfileSave: false }); + this.setState({ + profileFieldsTouched: { + ...this.state.profileFieldsTouched, + topic: false, + }, + }); } else { - this.setState({ enableProfileSave: true }); + this.setState({ + profileFieldsTouched: { + ...this.state.profileFieldsTouched, + topic: true, + }, + }); } }; @@ -176,7 +203,10 @@ export default class RoomProfileSettings extends React.Component this.setState({ avatarUrl: this.state.originalAvatarUrl, avatarFile: null, - enableProfileSave: false, + profileFieldsTouched: { + ...this.state.profileFieldsTouched, + avatar: false, + }, }); return; } @@ -187,7 +217,10 @@ export default class RoomProfileSettings extends React.Component this.setState({ avatarUrl: String(ev.target.result), avatarFile: file, - enableProfileSave: true, + profileFieldsTouched: { + ...this.state.profileFieldsTouched, + avatar: true, + }, }); }; reader.readAsDataURL(file); @@ -205,14 +238,14 @@ export default class RoomProfileSettings extends React.Component { _t("Cancel") } { _t("Save") } diff --git a/src/components/views/settings/account/PhoneNumbers.tsx b/src/components/views/settings/account/PhoneNumbers.tsx index e5cca72867..9105dfc312 100644 --- a/src/components/views/settings/account/PhoneNumbers.tsx +++ b/src/components/views/settings/account/PhoneNumbers.tsx @@ -268,7 +268,7 @@ export default class PhoneNumbers extends React.Component { { _t("Continue") } diff --git a/src/components/views/spaces/SpaceCreateMenu.tsx b/src/components/views/spaces/SpaceCreateMenu.tsx index 52f7786957..1d63f85f71 100644 --- a/src/components/views/spaces/SpaceCreateMenu.tsx +++ b/src/components/views/spaces/SpaceCreateMenu.tsx @@ -17,9 +17,8 @@ limitations under the License. import React, { ComponentProps, RefObject, SyntheticEvent, KeyboardEvent, useContext, useRef, useState } from "react"; import classNames from "classnames"; import { RoomType } from "matrix-js-sdk/src/@types/event"; -import FocusLock from "react-focus-lock"; -import { HistoryVisibility, Preset } from "matrix-js-sdk/src/@types/partials"; import { ICreateRoomOpts } from "matrix-js-sdk/src/@types/requests"; +import { HistoryVisibility, Preset } from "matrix-js-sdk/src/@types/partials"; import { _t } from "../../../languageHandler"; import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; @@ -361,9 +360,7 @@ const SpaceCreateMenu = ({ onFinished }) => { wrapperClassName="mx_SpaceCreateMenu_wrapper" managed={false} > - - { body } - + { body } ; }; diff --git a/src/emoji.ts b/src/emoji.ts index ee84583fc9..73898c12eb 100644 --- a/src/emoji.ts +++ b/src/emoji.ts @@ -74,7 +74,7 @@ export const EMOJI: IEmoji[] = EMOJIBASE.map((emojiData: Omit has been made and everyone who was a part of the community has been invited to it.": " has been made and everyone who was a part of the community has been invited to it.", "To create a Space from another community, just pick the community in Preferences.": "To create a Space from another community, just pick the community in Preferences.", "Failed to migrate community": "Failed to migrate community", + "Fetching data...": "Fetching data...", + "Creating Space...": "Creating Space...", "Create Space from community": "Create Space from community", "A link to the Space will be put in your community description.": "A link to the Space will be put in your community description.", "All rooms will be added and all community members will be invited.": "All rooms will be added and all community members will be invited.", diff --git a/src/settings/SettingsStore.ts b/src/settings/SettingsStore.ts index af858d2379..d2f5568988 100644 --- a/src/settings/SettingsStore.ts +++ b/src/settings/SettingsStore.ts @@ -162,9 +162,10 @@ export default class SettingsStore { const watcherId = `${new Date().getTime()}_${SettingsStore.watcherCount++}_${settingName}_${roomId}`; - const localizedCallback = (changedInRoomId, atLevel, newValAtLevel) => { + const localizedCallback = (changedInRoomId: string | null, atLevel: SettingLevel, newValAtLevel: any) => { const newValue = SettingsStore.getValue(originalSettingName); - callbackFn(originalSettingName, changedInRoomId, atLevel, newValAtLevel, newValue); + const newValueAtLevel = SettingsStore.getValueAt(atLevel, originalSettingName) ?? newValAtLevel; + callbackFn(originalSettingName, changedInRoomId, atLevel, newValueAtLevel, newValue); }; SettingsStore.watchers.set(watcherId, localizedCallback); diff --git a/src/stores/SpaceStore.ts b/src/stores/SpaceStore.ts index bb22aa4dbb..b4a1889d3e 100644 --- a/src/stores/SpaceStore.ts +++ b/src/stores/SpaceStore.ts @@ -283,7 +283,8 @@ export class SpaceStoreClass extends AsyncStoreWithClient { const createTs = childRoom?.currentState.getStateEvents(EventType.RoomCreate, "")?.getTs(); return getChildOrder(ev.getContent().order, createTs, roomId); }).map(ev => { - return this.matrixClient.getRoom(ev.getStateKey()); + const history = this.matrixClient.getRoomUpgradeHistory(ev.getStateKey(), true); + return history[history.length - 1]; }).filter(room => { return room?.getMyMembership() === "join" || room?.getMyMembership() === "invite"; }) || []; @@ -511,8 +512,13 @@ export class SpaceStoreClass extends AsyncStoreWithClient { hiddenChildren.get(spaceId)?.forEach(roomId => { roomIds.add(roomId); }); - this.spaceFilteredRooms.set(spaceId, roomIds); - return roomIds; + + // Expand room IDs to all known versions of the given rooms + const expandedRoomIds = new Set(Array.from(roomIds).flatMap(roomId => { + return this.matrixClient.getRoomUpgradeHistory(roomId, true).map(r => r.roomId); + })); + this.spaceFilteredRooms.set(spaceId, expandedRoomIds); + return expandedRoomIds; }; fn(s.roomId, new Set()); @@ -793,7 +799,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient { // 1 is Home, 2-9 are the spaces after Home if (payload.num === 1) { this.setActiveSpace(null); - } else if (this.spacePanelSpaces.length >= payload.num) { + } else if (payload.num > 0 && this.spacePanelSpaces.length > payload.num - 2) { this.setActiveSpace(this.spacePanelSpaces[payload.num - 2]); } break; diff --git a/src/utils/MultiInviter.ts b/src/utils/MultiInviter.ts index 5b79a2ff93..abf72c97ff 100644 --- a/src/utils/MultiInviter.ts +++ b/src/utils/MultiInviter.ts @@ -62,8 +62,9 @@ export default class MultiInviter { /** * @param {string} targetId The ID of the room or group to invite to + * @param {function} progressCallback optional callback, fired after each invite. */ - constructor(targetId: string) { + constructor(targetId: string, private readonly progressCallback?: () => void) { if (targetId[0] === '+') { this.roomId = null; this.groupId = targetId; @@ -181,6 +182,7 @@ export default class MultiInviter { delete this.errors[address]; resolve(); + this.progressCallback?.(); }).catch((err) => { if (this.canceled) { return; diff --git a/test/components/views/rooms/RoomHeader-test.tsx b/test/components/views/rooms/RoomHeader-test.tsx new file mode 100644 index 0000000000..859107416e --- /dev/null +++ b/test/components/views/rooms/RoomHeader-test.tsx @@ -0,0 +1,251 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + +import "../../../skinned-sdk"; + +import * as TestUtils from '../../../test-utils'; + +import { MatrixClientPeg } from '../../../../src/MatrixClientPeg'; + +import DMRoomMap from '../../../../src/utils/DMRoomMap'; +import RoomHeader from '../../../../src/components/views/rooms/RoomHeader'; + +import { Room, PendingEventOrdering, MatrixEvent, MatrixClient } from 'matrix-js-sdk'; +import { SearchScope } from '../../../../src/components/views/rooms/SearchBar'; +import { E2EStatus } from '../../../../src/utils/ShieldUtils'; +import { PlaceCallType } from '../../../../src/CallHandler'; +import { mkEvent } from '../../../test-utils'; + +describe('RoomHeader', () => { + it('shows the room avatar in a room with only ourselves', () => { + // When we render a non-DM room with 1 person in it + const room = createRoom({ name: "X Room", isDm: false, userIds: [] }); + const rendered = render(room); + + // Then the room's avatar is the initial of its name + const initial = findSpan(rendered, ".mx_BaseAvatar_initial"); + expect(initial.innerHTML).toEqual("X"); + + // And there is no image avatar (because it's not set on this room) + const image = findImg(rendered, ".mx_BaseAvatar_image"); + expect(image.src).toEqual("data:image/png;base64,00"); + }); + + it('shows the room avatar in a room with 2 people', () => { + // When we render a non-DM room with 2 people in it + const room = createRoom( + { name: "Y Room", isDm: false, userIds: ["other"] }); + const rendered = render(room); + + // Then the room's avatar is the initial of its name + const initial = findSpan(rendered, ".mx_BaseAvatar_initial"); + expect(initial.innerHTML).toEqual("Y"); + + // And there is no image avatar (because it's not set on this room) + const image = findImg(rendered, ".mx_BaseAvatar_image"); + expect(image.src).toEqual("data:image/png;base64,00"); + }); + + it('shows the room avatar in a room with >2 people', () => { + // When we render a non-DM room with 3 people in it + const room = createRoom( + { name: "Z Room", isDm: false, userIds: ["other1", "other2"] }); + const rendered = render(room); + + // Then the room's avatar is the initial of its name + const initial = findSpan(rendered, ".mx_BaseAvatar_initial"); + expect(initial.innerHTML).toEqual("Z"); + + // And there is no image avatar (because it's not set on this room) + const image = findImg(rendered, ".mx_BaseAvatar_image"); + expect(image.src).toEqual("data:image/png;base64,00"); + }); + + it('shows the room avatar in a DM with only ourselves', () => { + // When we render a non-DM room with 1 person in it + const room = createRoom({ name: "Z Room", isDm: true, userIds: [] }); + const rendered = render(room); + + // Then the room's avatar is the initial of its name + const initial = findSpan(rendered, ".mx_BaseAvatar_initial"); + expect(initial.innerHTML).toEqual("Z"); + + // And there is no image avatar (because it's not set on this room) + const image = findImg(rendered, ".mx_BaseAvatar_image"); + expect(image.src).toEqual("data:image/png;base64,00"); + }); + + it('shows the user avatar in a DM with 2 people', () => { + // Note: this is the interesting case - this is the ONLY + // time we should use the user's avatar. + + // When we render a DM room with only 2 people in it + const room = createRoom({ name: "Y Room", isDm: true, userIds: ["other"] }); + const rendered = render(room); + + // Then we use the other user's avatar as our room's image avatar + const image = findImg(rendered, ".mx_BaseAvatar_image"); + expect(image.src).toEqual( + "http://this.is.a.url/example.org/other"); + + // And there is no initial avatar + expect( + rendered.querySelectorAll(".mx_BaseAvatar_initial"), + ).toHaveLength(0); + }); + + it('shows the room avatar in a DM with >2 people', () => { + // When we render a DM room with 3 people in it + const room = createRoom({ + name: "Z Room", isDm: true, userIds: ["other1", "other2"] }); + const rendered = render(room); + + // Then the room's avatar is the initial of its name + const initial = findSpan(rendered, ".mx_BaseAvatar_initial"); + expect(initial.innerHTML).toEqual("Z"); + + // And there is no image avatar (because it's not set on this room) + const image = findImg(rendered, ".mx_BaseAvatar_image"); + expect(image.src).toEqual("data:image/png;base64,00"); + }); +}); + +interface IRoomCreationInfo { + name: string; + isDm: boolean; + userIds: string[]; +} + +function createRoom(info: IRoomCreationInfo) { + TestUtils.stubClient(); + const client: MatrixClient = MatrixClientPeg.get(); + + const roomId = '!1234567890:domain'; + const userId = client.getUserId(); + if (info.isDm) { + client.getAccountData = (eventType) => { + expect(eventType).toEqual("m.direct"); + return mkDirectEvent(roomId, userId, info.userIds); + }; + } + + DMRoomMap.makeShared().start(); + + const room = new Room(roomId, client, userId, { + pendingEventOrdering: PendingEventOrdering.Detached, + }); + + const otherJoinEvents = []; + for (const otherUserId of info.userIds) { + otherJoinEvents.push(mkJoinEvent(roomId, otherUserId)); + } + + room.currentState.setStateEvents([ + mkCreationEvent(roomId, userId), + mkNameEvent(roomId, userId, info.name), + mkJoinEvent(roomId, userId), + ...otherJoinEvents, + ]); + room.recalculate(); + + return room; +} + +function render(room: Room): HTMLDivElement { + const parentDiv = document.createElement('div'); + document.body.appendChild(parentDiv); + ReactDOM.render( + ( + {}} + onSearchClick={() => {}} + onForgetClick={() => {}} + onCallPlaced={(_type: PlaceCallType) => {}} + onAppsClick={() => {}} + e2eStatus={E2EStatus.Normal} + appsShown={true} + searchInfo={{ + searchTerm: "", + searchScope: SearchScope.Room, + searchCount: 0, + }} + /> + ), + parentDiv, + ); + return parentDiv; +} + +function mkCreationEvent(roomId: string, userId: string): MatrixEvent { + return mkEvent({ + event: true, + type: "m.room.create", + room: roomId, + user: userId, + content: { + creator: userId, + room_version: "5", + predecessor: { + room_id: "!prevroom", + event_id: "$someevent", + }, + }, + }); +} + +function mkNameEvent( + roomId: string, userId: string, name: string, +): MatrixEvent { + return mkEvent({ + event: true, + type: "m.room.name", + room: roomId, + user: userId, + content: { name }, + }); +} + +function mkJoinEvent(roomId: string, userId: string) { + const ret = mkEvent({ + event: true, + type: "m.room.member", + room: roomId, + user: userId, + content: { + "membership": "join", + "avatar_url": "mxc://example.org/" + userId, + }, + }); + ret.event.state_key = userId; + return ret; +} + +function mkDirectEvent( + roomId: string, userId: string, otherUsers: string[], +): MatrixEvent { + const content = {}; + for (const otherUserId of otherUsers) { + content[otherUserId] = [roomId]; + } + return mkEvent({ + event: true, + type: "m.direct", + room: roomId, + user: userId, + content, + }); +} + +function findSpan(parent: HTMLElement, selector: string): HTMLSpanElement { + const els = parent.querySelectorAll(selector); + expect(els.length).toEqual(1); + return els[0] as HTMLSpanElement; +} + +function findImg(parent: HTMLElement, selector: string): HTMLImageElement { + const els = parent.querySelectorAll(selector); + expect(els.length).toEqual(1); + return els[0] as HTMLImageElement; +} diff --git a/test/stores/SpaceStore-test.ts b/test/stores/SpaceStore-test.ts index e7ca727e28..cdc3e58a4f 100644 --- a/test/stores/SpaceStore-test.ts +++ b/test/stores/SpaceStore-test.ts @@ -77,6 +77,7 @@ describe("SpaceStore", () => { const run = async () => { client.getRoom.mockImplementation(roomId => rooms.find(room => room.roomId === roomId)); + client.getRoomUpgradeHistory.mockImplementation(roomId => [rooms.find(room => room.roomId === roomId)]); await testUtils.setupAsyncStoreWithClient(store, client); jest.runAllTimers(); }; diff --git a/test/test-utils.js b/test/test-utils.js index c06149991f..d43a08ab3a 100644 --- a/test/test-utils.js +++ b/test/test-utils.js @@ -47,6 +47,8 @@ export function createTestClient() { getIdentityServerUrl: jest.fn(), getDomain: jest.fn().mockReturnValue("matrix.rog"), getUserId: jest.fn().mockReturnValue("@userId:matrix.rog"), + getUser: jest.fn().mockReturnValue({ on: jest.fn() }), + credentials: { userId: "@userId:matrix.rog" }, getPushActionsForEvent: jest.fn(), getRoom: jest.fn().mockImplementation(mkStubRoom), @@ -76,7 +78,7 @@ export function createTestClient() { content: {}, }); }, - mxcUrlToHttp: (mxc) => 'http://this.is.a.url/', + mxcUrlToHttp: (mxc) => `http://this.is.a.url/${mxc.substring(6)}`, setAccountData: jest.fn(), setRoomAccountData: jest.fn(), sendTyping: jest.fn().mockResolvedValue({}), @@ -93,12 +95,15 @@ export function createTestClient() { sessionStore: { store: { getItem: jest.fn(), + setItem: jest.fn(), }, }, pushRules: {}, decryptEventIfNeeded: () => Promise.resolve(), isUserIgnored: jest.fn().mockReturnValue(false), getCapabilities: jest.fn().mockResolvedValue({}), + supportsExperimentalThreads: () => false, + getRoomUpgradeHistory: jest.fn().mockReturnValue([]), }; } @@ -130,9 +135,11 @@ export function mkEvent(opts) { }; if (opts.skey) { event.state_key = opts.skey; - } else if (["m.room.name", "m.room.topic", "m.room.create", "m.room.join_rules", - "m.room.power_levels", "m.room.topic", "m.room.history_visibility", "m.room.encryption", - "com.example.state"].indexOf(opts.type) !== -1) { + } else if ([ + "m.room.name", "m.room.topic", "m.room.create", "m.room.join_rules", + "m.room.power_levels", "m.room.topic", "m.room.history_visibility", + "m.room.encryption", "m.room.member", "com.example.state", + ].indexOf(opts.type) !== -1) { event.state_key = ""; } return opts.event ? new MatrixEvent(event) : event;