diff --git a/res/css/views/dialogs/_SpaceSettingsDialog.scss b/res/css/views/dialogs/_SpaceSettingsDialog.scss index 78fbd573bd..8f064f6b38 100644 --- a/res/css/views/dialogs/_SpaceSettingsDialog.scss +++ b/res/css/views/dialogs/_SpaceSettingsDialog.scss @@ -38,7 +38,7 @@ limitations under the License. } & + .mx_SettingsTab_subheading { - border-top: 1px solid $quinary-content; + border-top: 1px solid $menu-border-color; margin-top: 0; padding-top: 24px; } @@ -60,15 +60,6 @@ limitations under the License. margin-left: 26px; } } - - .mx_SettingsTab_showAdvanced { - margin: 16px 0; - padding: 0; - } - - .mx_SettingsFlag { - margin-top: 24px; - } } .mx_SpaceSettingsDialog_buttons { @@ -86,6 +77,11 @@ limitations under the License. .mx_AccessibleButton_hasKind { padding: 8px 22px; + + &.mx_SettingsTab_showAdvanced { + margin: 16px 0; + padding: 0; + } } .mx_TabbedView_tabLabel { diff --git a/res/css/views/settings/_JoinRuleSettings.scss b/res/css/views/settings/_JoinRuleSettings.scss index 76b1b6333a..30d6b6b678 100644 --- a/res/css/views/settings/_JoinRuleSettings.scss +++ b/res/css/views/settings/_JoinRuleSettings.scss @@ -77,7 +77,7 @@ limitations under the License. color: $secondary-content; & + .mx_StyledRadioButton { - border-top: 1px solid $menu-border-color; + border-top: 1px solid $quinary-content; } } } diff --git a/res/css/views/settings/_ProfileSettings.scss b/res/css/views/settings/_ProfileSettings.scss index ce27b5dd13..46c89347a8 100644 --- a/res/css/views/settings/_ProfileSettings.scss +++ b/res/css/views/settings/_ProfileSettings.scss @@ -54,7 +54,6 @@ limitations under the License. .mx_ProfileSettings_profileForm { @mixin mx_Settings_fullWidthField; - border-bottom: 1px solid $menu-border-color; } .mx_ProfileSettings_buttons { diff --git a/res/css/views/settings/tabs/_SettingsTab.scss b/res/css/views/settings/tabs/_SettingsTab.scss index 684935152c..cb0d6b249e 100644 --- a/res/css/views/settings/tabs/_SettingsTab.scss +++ b/res/css/views/settings/tabs/_SettingsTab.scss @@ -98,3 +98,7 @@ limitations under the License. .mx_SettingsTab a { color: $accent-alt; } + +.mx_SettingsTab_toggleWithDescription { + margin-top: 24px; +} diff --git a/src/components/views/room_settings/AliasSettings.tsx b/src/components/views/room_settings/AliasSettings.tsx index 9cf035e3bc..1c127e5731 100644 --- a/src/components/views/room_settings/AliasSettings.tsx +++ b/src/components/views/room_settings/AliasSettings.tsx @@ -384,6 +384,7 @@ export default class AliasSettings extends React.Component { return (
{ isSpaceRoom @@ -429,7 +430,9 @@ export default class AliasSettings extends React.Component { placeholder={_t('New published address (e.g. #alias:server)')} /> - - - { _t("Hide advanced") } - + advancedSection =
+ + { showAdvancedSection ? _t("Hide advanced") : _t("Show advanced") } + + { showAdvancedSection &&
{ _t("This may be useful for public spaces.") }

- ; - } else { - advancedSection = <> - - { _t("Show advanced") } - - ; - } +
+ } +
; } let addressesSection; @@ -111,34 +111,34 @@ const SpaceSettingsVisibilityTab = ({ matrixClient: cli, space, closeSettingsFn return
{ _t("Visibility") }
- { error &&
{ error }
} + { error &&
{ error }
} -
-
- { _t("Decide who can view and join %(spaceName)s.", { spaceName: space.name }) } -
- -
- setError(_t("Failed to update the visibility of this space"))} - closeSettingsFn={closeSettingsFn} - /> -
- - { advancedSection } - - { - setHistoryVisibility(checked ? HistoryVisibility.WorldReadable : HistoryVisibility.Shared); - }} - disabled={!canSetHistoryVisibility} - label={_t("Preview Space")} + + setError(_t("Failed to update the visibility of this space"))} + closeSettingsFn={closeSettingsFn} /> -
{ _t("Allow people to preview your space before they join.") }
- { _t("Recommended for public spaces.") } -
+ { advancedSection } +
+ { + setHistoryVisibility(checked ? HistoryVisibility.WorldReadable : HistoryVisibility.Shared); + }} + disabled={!canSetHistoryVisibility} + label={_t("Preview Space")} + /> +

+ { _t("Allow people to preview your space before they join.") }
+ { _t("Recommended for public spaces.") } +

+
+ { addressesSection }
; diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 4fec00823e..298bcf5cf3 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1143,11 +1143,12 @@ "Failed to update the guest access of this space": "Failed to update the guest access of this space", "Failed to update the history visibility of this space": "Failed to update the history visibility of this space", "Hide advanced": "Hide advanced", + "Show advanced": "Show advanced", "Enable guest access": "Enable guest access", "Guests can join a space without having an account.": "Guests can join a space without having an account.", "This may be useful for public spaces.": "This may be useful for public spaces.", - "Show advanced": "Show advanced", "Visibility": "Visibility", + "Access": "Access", "Decide who can view and join %(spaceName)s.": "Decide who can view and join %(spaceName)s.", "Failed to update the visibility of this space": "Failed to update the visibility of this space", "Preview Space": "Preview Space", @@ -1580,7 +1581,6 @@ "Once enabled, encryption for a room cannot be disabled. Messages sent in an encrypted room cannot be seen by the server, only by the participants of the room. Enabling encryption may prevent many bots and bridges from working correctly. Learn more about encryption.": "Once enabled, encryption for a room cannot be disabled. Messages sent in an encrypted room cannot be seen by the server, only by the participants of the room. Enabling encryption may prevent many bots and bridges from working correctly. Learn more about encryption.", "To link to this room, please add an address.": "To link to this room, please add an address.", "Decide who can join %(roomName)s.": "Decide who can join %(roomName)s.", - "Access": "Access", "Failed to update the join rules": "Failed to update the join rules", "Unknown failure": "Unknown failure", "Are you sure you want to make this encrypted room public?": "Are you sure you want to make this encrypted room public?", diff --git a/test/components/views/spaces/SpaceSettingsVisibilityTab-test.tsx b/test/components/views/spaces/SpaceSettingsVisibilityTab-test.tsx new file mode 100644 index 0000000000..d5157ecf7b --- /dev/null +++ b/test/components/views/spaces/SpaceSettingsVisibilityTab-test.tsx @@ -0,0 +1,236 @@ +// skinned-sdk should be the first import in most tests +import '../../../skinned-sdk'; +import React from "react"; +import { + renderIntoDocument, + Simulate, +} from 'react-dom/test-utils'; +import { act } from "react-dom/test-utils"; +import { EventType, MatrixClient, Room } from 'matrix-js-sdk'; +import { GuestAccess, HistoryVisibility, JoinRule } from 'matrix-js-sdk/src/@types/partials'; + +import _SpaceSettingsVisibilityTab from "../../../../src/components/views/spaces/SpaceSettingsVisibilityTab"; +import { createTestClient, mkEvent, wrapInMatrixClientContext } from '../../../test-utils'; +import { mkSpace, mockStateEventImplementation } from '../../../utils/test-utils'; +import { MatrixClientPeg } from '../../../../src/MatrixClientPeg'; + +const SpaceSettingsVisibilityTab = wrapInMatrixClientContext(_SpaceSettingsVisibilityTab); + +jest.useFakeTimers(); + +describe('', () => { + const mockMatrixClient = createTestClient() as MatrixClient; + + const makeJoinEvent = (rule: JoinRule = JoinRule.Invite) => mkEvent({ + type: EventType.RoomJoinRules, event: true, content: { + join_rule: rule, + }, + } as any); + const makeGuestAccessEvent = (rule: GuestAccess = GuestAccess.CanJoin) => mkEvent({ + type: EventType.RoomGuestAccess, event: true, content: { + guest_access: rule, + }, + } as any); + const makeHistoryEvent = (rule: HistoryVisibility = HistoryVisibility.Shared) => mkEvent({ + type: EventType.RoomHistoryVisibility, event: true, content: { + history_visibility: rule, + }, + } as any); + + const mockSpaceId = 'mock-space'; + + // TODO case for canonical + const makeMockSpace = ( + client: MatrixClient, + joinRule: JoinRule = JoinRule.Invite, + guestRule: GuestAccess = GuestAccess.CanJoin, + historyRule: HistoryVisibility = HistoryVisibility.WorldReadable, + ): Room => { + const events = [ + makeJoinEvent(joinRule), + makeGuestAccessEvent(guestRule), + makeHistoryEvent(historyRule), + ]; + const space = mkSpace(client, mockSpaceId); + const getStateEvents = mockStateEventImplementation(events); + space.currentState.getStateEvents.mockImplementation(getStateEvents); + space.currentState.mayClientSendStateEvent.mockReturnValue(false); + const mockGetJoinRule = jest.fn().mockReturnValue(joinRule); + space.getJoinRule = mockGetJoinRule; + space.currentState.getJoinRule = mockGetJoinRule; + return space as unknown as Room; + }; + const defaultProps = { + matrixClient: mockMatrixClient, + space: makeMockSpace(mockMatrixClient), + closeSettingsFn: jest.fn(), + }; + + const getComponent = (props = {}) => { + const wrapper = renderIntoDocument( + // wrap in element so renderIntoDocument can render functional component + + + , + ) as HTMLSpanElement; + return wrapper.children[0]; + }; + + const getByTestId = (container: Element, id: string) => container.querySelector(`[data-test-id=${id}]`); + const toggleGuestAccessSection = async (component) => { + const toggleButton = getByTestId(component, 'toggle-guest-access-btn'); + await act(async () => { + Simulate.click(toggleButton); + }); + }; + const getGuestAccessToggle = component => component.querySelector('[aria-label="Enable guest access"'); + const getHistoryVisibilityToggle = component => component.querySelector('[aria-label="Preview Space"'); + const getErrorMessage = component => getByTestId(component, 'space-settings-error')?.textContent; + + beforeEach(() => { + (mockMatrixClient.sendStateEvent as jest.Mock).mockClear().mockResolvedValue({}); + MatrixClientPeg.get = jest.fn().mockReturnValue(mockMatrixClient); + }); + + afterEach(() => { + jest.runAllTimers(); + }); + + it('renders container', () => { + const component = getComponent(); + expect(component).toMatchSnapshot(); + }); + + describe('for a private space', () => { + const joinRule = JoinRule.Invite; + it('does not render addresses section', () => { + const space = makeMockSpace(mockMatrixClient, joinRule); + const component = getComponent({ space }); + + expect(getByTestId(component, 'published-address-fieldset')).toBeFalsy(); + expect(getByTestId(component, 'local-address-fieldset')).toBeFalsy(); + }); + }); + + describe('for a public space', () => { + const joinRule = JoinRule.Public; + const guestRule = GuestAccess.CanJoin; + const historyRule = HistoryVisibility.Joined; + + describe('Access', () => { + it('renders guest access section toggle', async () => { + const space = makeMockSpace(mockMatrixClient, joinRule, guestRule); + const component = getComponent({ space }); + + await toggleGuestAccessSection(component); + + expect(getGuestAccessToggle(component)).toMatchSnapshot(); + }); + + it('send guest access event on toggle', async () => { + const space = makeMockSpace(mockMatrixClient, joinRule, guestRule); + + const component = getComponent({ space }); + await toggleGuestAccessSection(component); + const guestAccessInput = getGuestAccessToggle(component); + + expect(guestAccessInput.getAttribute('aria-checked')).toEqual("true"); + + await act(async () => { + Simulate.click(guestAccessInput); + }); + + expect(mockMatrixClient.sendStateEvent).toHaveBeenCalledWith( + mockSpaceId, + EventType.RoomGuestAccess, + // toggled off + { guest_access: GuestAccess.Forbidden }, + "", + ); + + // toggled off + expect(guestAccessInput.getAttribute('aria-checked')).toEqual("false"); + }); + + it('renders error message when update fails', async () => { + const space = makeMockSpace(mockMatrixClient, joinRule, guestRule); + (mockMatrixClient.sendStateEvent as jest.Mock).mockRejectedValue({}); + const component = getComponent({ space }); + await toggleGuestAccessSection(component); + await act(async () => { + Simulate.click(getGuestAccessToggle(component)); + }); + + expect(getErrorMessage(component)).toEqual("Failed to update the guest access of this space"); + }); + + it('disables guest access toggle when setting guest access is not allowed', async () => { + const space = makeMockSpace(mockMatrixClient, joinRule, guestRule); + (space.currentState.maySendStateEvent as jest.Mock).mockReturnValue(false); + const component = getComponent({ space }); + + await toggleGuestAccessSection(component); + + expect(getGuestAccessToggle(component).getAttribute('aria-disabled')).toEqual("true"); + }); + }); + + describe('Preview', () => { + it('renders preview space toggle', () => { + const space = makeMockSpace(mockMatrixClient, joinRule, guestRule, historyRule); + const component = getComponent({ space }); + + // toggle off because space settings is != WorldReadable + expect(getHistoryVisibilityToggle(component).getAttribute('aria-checked')).toEqual("false"); + }); + + it('updates history visibility on toggle', async () => { + const space = makeMockSpace(mockMatrixClient, joinRule, guestRule, historyRule); + const component = getComponent({ space }); + + // toggle off because space settings is != WorldReadable + expect(getHistoryVisibilityToggle(component).getAttribute('aria-checked')).toEqual("false"); + + await act(async () => { + Simulate.click(getHistoryVisibilityToggle(component)); + }); + + expect(mockMatrixClient.sendStateEvent).toHaveBeenCalledWith( + mockSpaceId, + EventType.RoomHistoryVisibility, + { history_visibility: HistoryVisibility.WorldReadable }, + "", + ); + + expect(getHistoryVisibilityToggle(component).getAttribute('aria-checked')).toEqual("true"); + }); + + it('renders error message when history update fails', async () => { + const space = makeMockSpace(mockMatrixClient, joinRule, guestRule, historyRule); + (mockMatrixClient.sendStateEvent as jest.Mock).mockRejectedValue({}); + const component = getComponent({ space }); + + await act(async () => { + Simulate.click(getHistoryVisibilityToggle(component)); + }); + + expect(getErrorMessage(component)).toEqual("Failed to update the history visibility of this space"); + }); + + it('disables room preview toggle when history visability changes are not allowed', () => { + const space = makeMockSpace(mockMatrixClient, joinRule, guestRule, historyRule); + (space.currentState.maySendStateEvent as jest.Mock).mockReturnValue(false); + const component = getComponent({ space }); + expect(getHistoryVisibilityToggle(component).getAttribute('aria-disabled')).toEqual("true"); + }); + }); + + it('renders addresses section', () => { + const space = makeMockSpace(mockMatrixClient, joinRule, guestRule); + const component = getComponent({ space }); + + expect(getByTestId(component, 'published-address-fieldset')).toBeTruthy(); + expect(getByTestId(component, 'local-address-fieldset')).toBeTruthy(); + }); + }); +}); diff --git a/test/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap b/test/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap new file mode 100644 index 0000000000..ab43705b37 --- /dev/null +++ b/test/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap @@ -0,0 +1,133 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` for a public space Access renders guest access section toggle 1`] = ` +
+
+
+`; + +exports[` renders container 1`] = ` +
+
+ Visibility +
+ +
+ + Access + +
+ Decide who can view and join mock-space. +
+
+
+`; diff --git a/test/test-utils.js b/test/test-utils.js index 1f6cb85d16..27869584cd 100644 --- a/test/test-utils.js +++ b/test/test-utils.js @@ -2,6 +2,7 @@ import React from 'react'; import EventEmitter from "events"; import ShallowRenderer from 'react-test-renderer/shallow'; import { MatrixEvent } from "matrix-js-sdk/src/models/event"; +import { JoinRule } from 'matrix-js-sdk/src/@types/partials'; import { MatrixClientPeg as peg } from '../src/MatrixClientPeg'; import dis from '../src/dispatcher/dispatcher'; @@ -88,6 +89,7 @@ export function createTestClient() { setRoomAccountData: jest.fn(), sendTyping: jest.fn().mockResolvedValue({}), sendMessage: () => jest.fn().mockResolvedValue({}), + sendStateEvent: jest.fn().mockResolvedValue(), getSyncState: () => "SYNCING", generateClientSecret: () => "t35tcl1Ent5ECr3T", isGuest: () => false, @@ -113,6 +115,7 @@ export function createTestClient() { registerWithIdentityServer: jest.fn().mockResolvedValue({}), getIdentityAccount: jest.fn().mockResolvedValue({}), getTerms: jest.fn().mockResolvedValueOnce(), + doesServerSupportUnstableFeature: jest.fn().mockResolvedValue(), getPushRules: jest.fn().mockResolvedValue(), getPushers: jest.fn().mockResolvedValue({ pushers: [] }), getThreePids: jest.fn().mockResolvedValue({ threepids: [] }), @@ -154,6 +157,7 @@ export function mkEvent(opts) { "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", + "m.room.guest_access", ].indexOf(opts.type) !== -1) { event.state_key = ""; } @@ -281,6 +285,8 @@ export function mkStubRoom(roomId = null, name, client) { maySendStateEvent: jest.fn().mockReturnValue(true), maySendEvent: jest.fn().mockReturnValue(true), members: [], + getJoinRule: jest.fn().mockReturnValue(JoinRule.Invite), + on: jest.fn(), }, tags: {}, setBlacklistUnverifiedDevices: jest.fn(),