{
{
this.showScreenAfterLogin();
break;
case 'toggle_my_groups':
+ // persist that the user has interacted with this, use it to dismiss the beta dot
+ localStorage.setItem("mx_seenSpacesBeta", "1");
// We just dispatch the page change rather than have to worry about
// what the logic is for each of these branches.
if (this.state.page_type === PageTypes.MyGroups) {
@@ -1094,7 +1096,7 @@ export default class MatrixChat extends React.PureComponent {
private leaveRoomWarnings(roomId: string) {
const roomToLeave = MatrixClientPeg.get().getRoom(roomId);
- const isSpace = roomToLeave?.isSpaceRoom();
+ const isSpace = SettingsStore.getValue("feature_spaces") && roomToLeave?.isSpaceRoom();
// Show a warning if there are additional complications.
const warnings = [];
@@ -1133,7 +1135,7 @@ export default class MatrixChat extends React.PureComponent {
const roomToLeave = MatrixClientPeg.get().getRoom(roomId);
const warnings = this.leaveRoomWarnings(roomId);
- const isSpace = roomToLeave?.isSpaceRoom();
+ const isSpace = SettingsStore.getValue("feature_spaces") && roomToLeave?.isSpaceRoom();
Modal.createTrackedDialog(isSpace ? "Leave space" : "Leave room", '', QuestionDialog, {
title: isSpace ? _t("Leave space") : _t("Leave room"),
description: (
@@ -1684,6 +1686,10 @@ export default class MatrixChat extends React.PureComponent {
const type = screen === "start_sso" ? "sso" : "cas";
PlatformPeg.get().startSingleSignOn(cli, type, this.getFragmentAfterLogin());
} else if (screen === 'groups') {
+ if (SettingsStore.getValue("feature_spaces")) {
+ dis.dispatch({ action: "view_home_page" });
+ return;
+ }
dis.dispatch({
action: 'view_my_groups',
});
@@ -1767,6 +1773,11 @@ export default class MatrixChat extends React.PureComponent {
subAction: params.action,
});
} else if (screen.indexOf('group/') === 0) {
+ if (SettingsStore.getValue("feature_spaces")) {
+ dis.dispatch({ action: "view_home_page" });
+ return;
+ }
+
const groupId = screen.substring(6);
// TODO: Check valid group ID
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index c93f07fa0f..e5e0065be8 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -544,11 +544,13 @@ export default class MessagePanel extends React.Component {
}
if (!grouper) {
const wantTile = this._shouldShowEvent(mxEv);
+ const isGrouped = false;
if (wantTile) {
// make sure we unpack the array returned by _getTilesForEvent,
// otherwise react will auto-generate keys and we will end up
// replacing all of the DOM elements every time we paginate.
- ret.push(...this._getTilesForEvent(prevEvent, mxEv, last, nextEvent, nextTile));
+ ret.push(...this._getTilesForEvent(prevEvent, mxEv, last, isGrouped,
+ nextEvent, nextTile));
prevEvent = mxEv;
}
@@ -564,7 +566,7 @@ export default class MessagePanel extends React.Component {
return ret;
}
- _getTilesForEvent(prevEvent, mxEv, last, nextEvent, nextEventWithTile) {
+ _getTilesForEvent(prevEvent, mxEv, last, isGrouped=false, nextEvent, nextEventWithTile) {
const TileErrorBoundary = sdk.getComponent('messages.TileErrorBoundary');
const EventTile = sdk.getComponent('rooms.EventTile');
const DateSeparator = sdk.getComponent('messages.DateSeparator');
@@ -584,7 +586,7 @@ export default class MessagePanel extends React.Component {
// do we need a date separator since the last event?
const wantsDateSeparator = this._wantsDateSeparator(prevEvent, eventDate);
- if (wantsDateSeparator) {
+ if (wantsDateSeparator && !isGrouped) {
const dateSeparator =
*/}
+
{ contentHeader }
{ content }
diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index 5bcb3b2450..d8c763eabd 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -35,6 +35,7 @@ import {Action} from "../../dispatcher/actions";
import RoomSummaryCard from "../views/right_panel/RoomSummaryCard";
import WidgetCard from "../views/right_panel/WidgetCard";
import {replaceableComponent} from "../../utils/replaceableComponent";
+import SettingsStore from "../../settings/SettingsStore";
@replaceableComponent("structures.RightPanel")
export default class RightPanel extends React.Component {
@@ -85,7 +86,9 @@ export default class RightPanel extends React.Component {
return RightPanelPhases.GroupMemberList;
}
return rps.groupPanelPhase;
- } else if (this.props.room?.isSpaceRoom() && !RIGHT_PANEL_SPACE_PHASES.includes(rps.roomPanelPhase)) {
+ } else if (SettingsStore.getValue("feature_spaces") && this.props.room?.isSpaceRoom()
+ && !RIGHT_PANEL_SPACE_PHASES.includes(rps.roomPanelPhase)
+ ) {
return RightPanelPhases.SpaceMemberList;
} else if (userForPanel) {
// XXX FIXME AAAAAARGH: What is going on with this class!? It takes some of its state
diff --git a/src/components/structures/RoomSearch.tsx b/src/components/structures/RoomSearch.tsx
index 34682877e0..bda46aef07 100644
--- a/src/components/structures/RoomSearch.tsx
+++ b/src/components/structures/RoomSearch.tsx
@@ -27,8 +27,8 @@ import { Action } from "../../dispatcher/actions";
import RoomListStore from "../../stores/room-list/RoomListStore";
import { NameFilterCondition } from "../../stores/room-list/filters/NameFilterCondition";
import { getKeyBindingsManager, RoomListAction } from "../../KeyBindingsManager";
-import {replaceableComponent} from "../../utils/replaceableComponent";
-import SpaceStore, {UPDATE_SELECTED_SPACE, UPDATE_TOP_LEVEL_SPACES} from "../../stores/SpaceStore";
+import { replaceableComponent } from "../../utils/replaceableComponent";
+import SpaceStore, { UPDATE_SELECTED_SPACE, UPDATE_TOP_LEVEL_SPACES } from "../../stores/SpaceStore";
interface IProps {
isMinimized: boolean;
diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index 5108643673..c0f3c59457 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -1750,7 +1750,10 @@ export default class RoomView extends React.Component {
}
const myMembership = this.state.room.getMyMembership();
- if (myMembership === "invite" && !this.state.room.isSpaceRoom()) { // SpaceRoomView handles invites itself
+ if (myMembership === "invite"
+ // SpaceRoomView handles invites itself
+ && (!SettingsStore.getValue("feature_spaces") || !this.state.room.isSpaceRoom())
+ ) {
if (this.state.joining || this.state.rejecting) {
return (
@@ -1892,7 +1895,7 @@ export default class RoomView extends React.Component {
room={this.state.room}
/>
);
- if (!this.state.canPeek && !this.state.room?.isSpaceRoom()) {
+ if (!this.state.canPeek && (!SettingsStore.getValue("feature_spaces") || !this.state.room?.isSpaceRoom())) {
return (
-
;
};
@@ -328,7 +430,9 @@ const SpaceSetupFirstRooms = ({ space, title, description, onFinished }) => {
/>;
});
- const onNextClick = async () => {
+ const onNextClick = async (ev) => {
+ ev.preventDefault();
+ if (busy) return;
setError("");
setBusy(true);
try {
@@ -353,7 +457,10 @@ const SpaceSetupFirstRooms = ({ space, title, description, onFinished }) => {
setBusy(false);
};
- let onClick = onFinished;
+ let onClick = (ev) => {
+ ev.preventDefault();
+ onFinished();
+ };
let buttonLabel = _t("Skip for now");
if (roomNames.some(name => name.trim())) {
onClick = onNextClick;
@@ -365,16 +472,20 @@ const SpaceSetupFirstRooms = ({ space, title, description, onFinished }) => {
{ previewBar }
@@ -1914,7 +1917,7 @@ export default class RoomView extends React.Component {
);
}
- if (SettingsStore.getValue("feature_spaces") && this.state.room?.isSpaceRoom()) {
+ if (this.state.room?.isSpaceRoom()) {
return = ({
const cliRoom = cli.getRoom(room.room_id);
const myMembership = cliRoom?.getMyMembership();
- const onPreviewClick = () => onViewRoomClick(false);
- const onJoinClick = () => onViewRoomClick(true);
+ const onPreviewClick = (ev: ButtonEvent) => {
+ ev.preventDefault();
+ ev.stopPropagation();
+ onViewRoomClick(false);
+ }
+ const onJoinClick = (ev: ButtonEvent) => {
+ ev.preventDefault();
+ ev.stopPropagation();
+ onViewRoomClick(true);
+ }
let button;
if (myMembership === "join") {
@@ -254,7 +265,11 @@ export const HierarchyLevel = ({
const space = cli.getRoom(spaceId);
const hasPermissions = space?.currentState.maySendStateEvent(EventType.SpaceChild, cli.getUserId());
- const sortedChildren = sortBy([...(relations.get(spaceId)?.values() || [])], ev => ev.content.order || null);
+ const children = Array.from(relations.get(spaceId)?.values() || []);
+ const sortedChildren = sortBy(children, ev => {
+ // XXX: Space Summary API doesn't give the child origin_server_ts but once it does we should use it for sorting
+ return getOrder(ev.content.order, null, ev.state_key);
+ });
const [subspaces, childRooms] = sortedChildren.reduce((result, ev: ISpaceSummaryEvent) => {
const roomId = ev.state_key;
if (!rooms.has(roomId)) return result;
@@ -350,6 +365,7 @@ export const SpaceHierarchy: React.FC = ({
initialText = "",
showRoom,
refreshToken,
+ additionalButtons,
children,
}) => {
const cli = MatrixClientPeg.get();
@@ -415,78 +431,83 @@ export const SpaceHierarchy: React.FC = ({
countsStr = _t("%(count)s rooms", { count: numRooms, numSpaces });
}
- let editSection;
+ let manageButtons;
if (space.getMyMembership() === "join" && space.currentState.maySendStateEvent(EventType.SpaceChild, userId)) {
const selectedRelations = Array.from(selected.keys()).flatMap(parentId => {
return [...selected.get(parentId).values()].map(childId => [parentId, childId]) as [string, string][];
});
- let buttons;
- if (selectedRelations.length) {
- const selectionAllSuggested = selectedRelations.every(([parentId, childId]) => {
- return parentChildMap.get(parentId)?.get(childId)?.content.suggested;
- });
+ const selectionAllSuggested = selectedRelations.every(([parentId, childId]) => {
+ return parentChildMap.get(parentId)?.get(childId)?.content.suggested;
+ });
- const disabled = removing || saving;
+ const disabled = !selectedRelations.length || removing || saving;
- buttons = <>
- {
- setRemoving(true);
- try {
- for (const [parentId, childId] of selectedRelations) {
- await cli.sendStateEvent(parentId, EventType.SpaceChild, {}, childId);
- parentChildMap.get(parentId).get(childId).content = {};
- parentChildMap.set(parentId, new Map(parentChildMap.get(parentId)));
- }
- } catch (e) {
- setError(_t("Failed to remove some rooms. Try again later"));
- }
- setRemoving(false);
- }}
- kind="danger_outline"
- disabled={disabled}
- >
- { removing ? _t("Removing...") : _t("Remove") }
-
- {
- setSaving(true);
- try {
- for (const [parentId, childId] of selectedRelations) {
- const suggested = !selectionAllSuggested;
- const existingContent = parentChildMap.get(parentId)?.get(childId)?.content;
- if (!existingContent || existingContent.suggested === suggested) continue;
-
- const content = {
- ...existingContent,
- suggested: !selectionAllSuggested,
- };
-
- await cli.sendStateEvent(parentId, EventType.SpaceChild, content, childId);
-
- parentChildMap.get(parentId).get(childId).content = content;
- parentChildMap.set(parentId, new Map(parentChildMap.get(parentId)));
- }
- } catch (e) {
- setError("Failed to update some suggestions. Try again later");
- }
- setSaving(false);
- }}
- kind="primary_outline"
- disabled={disabled}
- >
- { saving
- ? _t("Saving...")
- : (selectionAllSuggested ? _t("Mark as not suggested") : _t("Mark as suggested"))
- }
-
- ;
+ let Button: React.ComponentType> = AccessibleButton;
+ let props = {};
+ if (!selectedRelations.length) {
+ Button = AccessibleTooltipButton;
+ props = {
+ tooltip: _t("Select a room below first"),
+ yOffset: -40,
+ };
}
- editSection =
- { buttons }
- ;
+ manageButtons = <>
+
+
+ ;
}
let results;
@@ -532,7 +553,10 @@ export const SpaceHierarchy: React.FC = ({
content = <>
{
+ dis.dispatch({
+ action: "leave_room",
+ room_id: space.roomId,
+ });
+ }}
+ >
+ { _t("Leave") }
+
+ );
+ } else if (myMembership === "invite") {
const inviteSender = space.getMember(cli.getUserId())?.events.member?.getSender();
const inviter = inviteSender && space.getMember(inviteSender);
@@ -174,6 +208,7 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
setBusy(true);
onJoinButtonClicked();
}}
+ disabled={!spacesEnabled}
>
{ _t("Accept") }
@@ -186,10 +221,11 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
setBusy(true);
onJoinButtonClicked();
}}
+ disabled={!spacesEnabled}
>
{ _t("Join") }
- )
+ );
}
if (busy) {
@@ -197,6 +233,7 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
}
return
+
+ {
+ e.preventDefault();
+ e.stopPropagation();
+ closeMenu();
+
+ if (await showCreateNewRoom(cli, space)) {
+ onNewRoomAdded();
+ }
+ }}
+ />
+ {
+ e.preventDefault();
+ e.stopPropagation();
+ closeMenu();
+
+ const [added] = await showAddExistingRooms(cli, space);
+ if (added) {
+ onNewRoomAdded();
+ }
+ }}
+ />
+
+ ;
+ }
+
+ return <>
+
+ { _t("Add") }
+
+ { contextMenu }
+ ;
+};
+
const SpaceLanding = ({ space }) => {
const cli = useContext(MatrixClientContext);
const myMembership = useMyRoomMembership(space);
@@ -241,32 +353,20 @@ const SpaceLanding = ({ space }) => {
const [refreshToken, forceUpdate] = useStateToggle(false);
- let addRoomButtons;
+ let addRoomButton;
if (canAddRooms) {
- addRoomButtons =
- {
- const [added] = await showAddExistingRooms(cli, space);
- if (added) {
- forceUpdate();
- }
- }}>
- { _t("Add existing rooms & spaces") }
-
- {
- showCreateNewRoom(cli, space);
- }}>
- { _t("Create a new room") }
-
- ;
+ addRoomButton = {
- showSpaceSettings(cli, space);
- }}>
- { _t("Settings") }
- ;
+ settingsButton = {
+ showSpaceSettings(cli, space);
+ }}
+ title={_t("Settings")}
+ />;
}
const onMembersClick = () => {
@@ -293,17 +393,19 @@ const SpaceLanding = ({ space }) => {
{ countsStr }
- { editSection }
+
+ { additionalButtons }
+ { manageButtons }
+
{ error &&
{ error }
diff --git a/src/components/structures/SpaceRoomView.tsx b/src/components/structures/SpaceRoomView.tsx
index a7a95d711c..031928f22b 100644
--- a/src/components/structures/SpaceRoomView.tsx
+++ b/src/components/structures/SpaceRoomView.tsx
@@ -54,6 +54,16 @@ import FacePile from "../views/elements/FacePile";
import {AddExistingToSpace} from "../views/dialogs/AddExistingToSpaceDialog";
import {sleep} from "../../utils/promise";
import {calculateRoomVia} from "../../utils/permalinks/Permalinks";
+import {ChevronFace, ContextMenuButton, useContextMenu} from "./ContextMenu";
+import IconizedContextMenu, {
+ IconizedContextMenuOption,
+ IconizedContextMenuOptionList,
+} from "../views/context_menus/IconizedContextMenu";
+import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
+import {BetaPill} from "../views/beta/BetaCard";
+import {USER_LABS_TAB} from "../views/dialogs/UserSettingsDialog";
+import SettingsStore from "../../settings/SettingsStore";
+import dis from "../../dispatcher/dispatcher";
interface IProps {
space: Room;
@@ -130,15 +140,39 @@ const SpaceInfo = ({ space }) => {
};
+const onBetaClick = () => {
+ defaultDispatcher.dispatch({
+ action: Action.ViewUserSettings,
+ initialTabId: USER_LABS_TAB,
+ });
+};
+
const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) => {
const cli = useContext(MatrixClientContext);
const myMembership = useMyRoomMembership(space);
const [busy, setBusy] = useState(false);
+ const spacesEnabled = SettingsStore.getValue("feature_spaces");
+
let inviterSection;
let joinButtons;
- if (myMembership === "invite") {
+ if (myMembership === "join") {
+ // XXX remove this when spaces leaves Beta
+ joinButtons = (
+
+
@@ -214,9 +251,84 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
;
};
+const SpaceLandingAddButton = ({ space, onNewRoomAdded }) => {
+ const cli = useContext(MatrixClientContext);
+ const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu();
+
+ let contextMenu;
+ if (menuDisplayed) {
+ const rect = handle.current.getBoundingClientRect();
+ contextMenu =
@@ -214,9 +251,84 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
{ joinButtons }
+ { !spacesEnabled &&
+ { myMembership === "join"
+ ? _t("To view %(spaceName)s, turn on the Spaces beta", {
+ spaceName: space.name,
+ }, {
+ a: sub => { sub } ,
+ })
+ : _t("To join %(spaceName)s, turn on the Spaces beta", {
+ spaceName: space.name,
+ }, {
+ a: sub => { sub } ,
+ })
+ }
+ }
-
- { addRoomButtons }
- { settingsButton }
-
- { description }
{ error && { error }
}
- { fields }
+
-
;
};
-const SpaceSetupPrivateScope = ({ space, onFinished }) => {
+const SpaceSetupPrivateScope = ({ space, justCreatedOpts, onFinished }) => {
return { _t("Share %(name)s", { name: space.name }) }
+{ _t("Share %(name)s", { + name: justCreatedOpts?.createOpts?.name || space.name, + }) }
{ _t("It's just you at the moment, it will be even better with others.") }
@@ -464,11 +577,13 @@ const SpaceSetupPublicShare = ({ space, onFinished }) => {
{ _t("Who are you working with?") }
- { _t("Make sure the right people have access to %(name)s", { name: space.name }) }
+ { _t("Make sure the right people have access to %(name)s", {
+ name: justCreatedOpts?.createOpts?.name || space.name,
+ }) }
+
+
{ error && { error }
}
- { fields }
+
-
- { buttonLabel }
-
+
;
};
@@ -702,7 +841,7 @@ export default class SpaceRoomView extends React.PureComponent
+ { _t("Spaces is a beta feature") }
+
+
+ { _t("Tap for more info") }
+
+ }
+ onClick={onClick}
+ tooltipProps={{ yOffset: -10 }}
+ >
+ { _t("Beta") }
+
+ 
+
;
+};
+
+export default BetaCard;
diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index 35efd12c9c..365f2ab1de 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -78,8 +78,10 @@ export default class MessageContextMenu extends React.Component {
// We explicitly decline to show the redact option on ACL events as it has a potential
// to obliterate the room - https://github.com/matrix-org/synapse/issues/4042
+ // Similarly for encryption events, since redacting them "breaks everything"
const canRedact = room.currentState.maySendRedactionForEvent(this.props.mxEvent, cli.credentials.userId)
- && this.props.mxEvent.getType() !== EventType.RoomServerAcl;
+ && this.props.mxEvent.getType() !== EventType.RoomServerAcl
+ && this.props.mxEvent.getType() !== EventType.RoomEncryption;
let canPin = room.currentState.mayClientSendStateEvent('m.room.pinned_events', cli);
// HACK: Intentionally say we can't pin if the user doesn't want to use the functionality
diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx
index 2ebc84ec7c..ec9c71ccbe 100644
--- a/src/components/views/dialogs/InviteDialog.tsx
+++ b/src/components/views/dialogs/InviteDialog.tsx
@@ -1312,7 +1312,7 @@ export default class InviteDialog extends React.PureComponent
+
+ { titleOverride || _t(title) }
+
+ { _t(caption) }
+ SettingsStore.setValue(featureId, null, SettingLevel.DEVICE, !value)}
+ kind="primary"
+ >
+ { value ? _t("Leave the beta") : _t("Join the beta") }
+
+ { disclaimer &&
+
+ { titleOverride || _t(title) }
+
+ { _t(caption) }
+
+ { disclaimer(value) }
+
}
+
- 
+ 
{this.props.file.name} ({filesize(this.props.file.size)})