PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Device manager - promote to beta (#9380)

Browse source 
* promote new session manager to beta

* hide old sessions section when new dm enabled

* use correct logic

* add new ViewUserDeviceSettings action

* replace device management ctas with viewUserDeviceSettings

* test SecurityUserSettingsTab

* more complete mocks

* more thorough mocks

* more mocks

* test LabsUserSettingsTab

* lint

* updated copy

* update snaps for new copy
This commit is contained in:
Kerry 2022-10-11 11:10:55 +02:00 committed by GitHub
parent b336e18eae
commit 87d3fbd996
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 504 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/actions/handlers/viewUserDeviceSettings.ts Normal file
View file

@ -0,0 +1,30 @@
/*
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 { UserTab } from "../../components/views/dialogs/UserTab";
import { Action } from "../../dispatcher/actions";
import defaultDispatcher from "../../dispatcher/dispatcher";
/**
* Redirect to the correct device manager section
* Based on the labs setting
*/
export const viewUserDeviceSettings = (isNewDeviceManagerEnabled: boolean) => {
defaultDispatcher.dispatch({
action: Action.ViewUserSettings,
initialTabId: isNewDeviceManagerEnabled ? UserTab.SessionManager : UserTab.Security,
});
};

5
src/components/structures/MatrixChat.tsx
View file

@ -137,6 +137,7 @@ import { TimelineRenderingType } from "../../contexts/RoomContext";
import { UseCaseSelection } from '../views/elements/UseCaseSelection';
import { ValidatedServerConfig } from '../../utils/ValidatedServerConfig';
import { isLocalRoom } from '../../utils/localRoom/isLocalRoom';
import { viewUserDeviceSettings } from '../../actions/handlers/viewUserDeviceSettings';
// legacy export
export { default as Views } from "../../Views";
@ -677,6 +678,10 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
}
break;
}
case Action.ViewUserDeviceSettings: {
viewUserDeviceSettings(SettingsStore.getValue("feature_new_device_manager"));
break;
}
case Action.ViewUserSettings: {
const tabPayload = payload as OpenToTabPayload;
Modal.createDialog(UserSettingsDialog,

4
src/components/views/right_panel/UserInfo.tsx
View file

@ -48,7 +48,6 @@ import EncryptionPanel from "./EncryptionPanel";
import { useAsyncMemo } from '../../../hooks/useAsyncMemo';
import { legacyVerifyUser, verifyDevice, verifyUser } from '../../../verification';
import { Action } from "../../../dispatcher/actions";
import { UserTab } from "../dialogs/UserTab";
import { useIsEncrypted } from "../../../hooks/useIsEncrypted";
import BaseCard from "./BaseCard";
import { E2EStatus } from "../../../utils/ShieldUtils";
@ -1331,8 +1330,7 @@ const BasicUserInfo: React.FC<{
className="mx_UserInfo_field"
onClick={() => {
dis.dispatch({
action: Action.ViewUserSettings,
initialTabId: UserTab.Security,
action: Action.ViewUserDeviceSettings,
});
}}
>

11
src/components/views/settings/tabs/user/LabsUserSettingsTab.tsx
View file

@ -80,7 +80,10 @@ export default class LabsUserSettingsTab extends React.Component<{}, IState> {
let betaSection;
if (betas.length) {
betaSection = <div className="mx_SettingsTab_section">
betaSection = <div
data-testid="labs-beta-section"
className="mx_SettingsTab_section"
>
{ betas.map(f => <BetaCard key={f} featureId={f} />) }
</div>;
}
@ -137,7 +140,11 @@ export default class LabsUserSettingsTab extends React.Component<{}, IState> {
labsSections = <>
{ sortBy(Array.from(groups.entries()), "0").map(([group, flags]) => (
<div className="mx_SettingsTab_section" key={group}>
<div
className="mx_SettingsTab_section"
key={group}
data-testid={`labs-group-${group}`}
>
<span className="mx_SettingsTab_subheading">{ _t(labGroupNames[group]) }</span>
{ flags }
</div>

20
src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx
View file

@ -346,19 +346,29 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
}
}
return (
<div className="mx_SettingsTab mx_SecurityUserSettingsTab">
{ warning }
const useNewSessionManager = SettingsStore.getValue("feature_new_device_manager");
const devicesSection = useNewSessionManager
? null
: <>
<div className="mx_SettingsTab_heading">{ _t("Where you're signed in") }</div>
<div className="mx_SettingsTab_section">
<div
className="mx_SettingsTab_section"
data-testid="devices-section"
>
<span className="mx_SettingsTab_subsectionText">
{ _t(
"Manage your signed-in devices below. " +
"A device's name is visible to people you communicate with.",
"A device's name is visible to people you communicate with.",
) }
</span>
<DevicesPanel />
</div>
</>;
return (
<div className="mx_SettingsTab mx_SecurityUserSettingsTab">
{ warning }
{ devicesSection }
<div className="mx_SettingsTab_heading">{ _t("Encryption") }</div>
<div className="mx_SettingsTab_section">
{ secureBackup }

5
src/dispatcher/actions.ts
View file

@ -40,6 +40,11 @@ export enum Action {
*/
ViewUserSettings = "view_user_settings",
/**
* Open the user device settings. No additional payload information required.
*/
ViewUserDeviceSettings = "view_user_device_settings",
/**
* Opens the room directory. No additional payload information required.
*/

5
src/i18n/strings/en_EN.json
View file

@ -922,7 +922,10 @@
"Live Location Sharing (temporary implementation: locations persist in room history)": "Live Location Sharing (temporary implementation: locations persist in room history)",
"Favourite Messages (under active development)": "Favourite Messages (under active development)",
"Voice broadcast (under active development)": "Voice broadcast (under active development)",
"Use new session manager (under active development)": "Use new session manager (under active development)",
"Use new session manager": "Use new session manager",
"New session manager": "New session manager",
"Have greater visibility and control over all your sessions.": "Have greater visibility and control over all your sessions.",
"Our new sessions manager provides better visibility of all your sessions, and greater control over them including the ability to remotely toggle push notifications.": "Our new sessions manager provides better visibility of all your sessions, and greater control over them including the ability to remotely toggle push notifications.",
"Font size": "Font size",
"Use custom size": "Use custom size",
"Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing",

18
src/settings/Settings.tsx
View file

@ -475,8 +475,24 @@ export const SETTINGS: {[setting: string]: ISetting} = {
isFeature: true,
labsGroup: LabGroup.Experimental,
supportedLevels: LEVELS_FEATURE,
displayName: _td("Use new session manager (under active development)"),
displayName: _td("Use new session manager"),
default: false,
betaInfo: {
title: _td('New session manager'),
caption: () => <>
<p>
{ _td('Have greater visibility and control over all your sessions.') }
</p>
<p>
{ _td(
'Our new sessions manager provides better visibility of all your sessions, '
+ 'and greater control over them including the ability to remotely toggle push notifications.',
)
}
</p>
</>,
},
},
"baseFontSize": {
displayName: _td("Font size"),

4
src/toasts/BulkUnverifiedSessionsToast.ts
View file

@ -20,7 +20,6 @@ import DeviceListener from '../DeviceListener';
import GenericToast from "../components/views/toasts/GenericToast";
import ToastStore from "../stores/ToastStore";
import { Action } from "../dispatcher/actions";
import { UserTab } from "../components/views/dialogs/UserTab";
const TOAST_KEY = "reviewsessions";
@ -29,8 +28,7 @@ export const showToast = (deviceIds: Set<string>) => {
DeviceListener.sharedInstance().dismissUnverifiedSessions(deviceIds);
dis.dispatch({
action: Action.ViewUserSettings,
initialTabId: UserTab.Security,
action: Action.ViewUserDeviceSettings,
});
};

4
src/toasts/UnverifiedSessionToast.ts
View file

@ -21,7 +21,6 @@ import DeviceListener from '../DeviceListener';
import ToastStore from "../stores/ToastStore";
import GenericToast from "../components/views/toasts/GenericToast";
import { Action } from "../dispatcher/actions";
import { UserTab } from "../components/views/dialogs/UserTab";
function toastKey(deviceId: string) {
return "unverified_session_" + deviceId;
@ -33,8 +32,7 @@ export const showToast = async (deviceId: string) => {
const onAccept = () => {
DeviceListener.sharedInstance().dismissUnverifiedSessions([deviceId]);
dis.dispatch({
action: Action.ViewUserSettings,
initialTabId: UserTab.Security,
action: Action.ViewUserDeviceSettings,
});
};

48
test/actions/handlers/viewUserDeviceSettings-test.ts Normal file
View file

@ -0,0 +1,48 @@
/*
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 { viewUserDeviceSettings } from "../../../src/actions/handlers/viewUserDeviceSettings";
import { UserTab } from "../../../src/components/views/dialogs/UserTab";
import { Action } from "../../../src/dispatcher/actions";
import defaultDispatcher from "../../../src/dispatcher/dispatcher";
describe('viewUserDeviceSettings()', () => {
const dispatchSpy = jest.spyOn(defaultDispatcher, 'dispatch');
beforeEach(() => {
dispatchSpy.mockClear();
});
it('dispatches action to view new session manager when enabled', () => {
const isNewDeviceManagerEnabled = true;
viewUserDeviceSettings(isNewDeviceManagerEnabled);
expect(dispatchSpy).toHaveBeenCalledWith({
action: Action.ViewUserSettings,
initialTabId: UserTab.SessionManager,
});
});
it('dispatches action to view old session manager when disabled', () => {
const isNewDeviceManagerEnabled = false;
viewUserDeviceSettings(isNewDeviceManagerEnabled);
expect(dispatchSpy).toHaveBeenCalledWith({
action: Action.ViewUserSettings,
initialTabId: UserTab.Security,
});
});
});

73
test/components/views/settings/tabs/user/LabsUserSettingsTab-test.tsx Normal file
View file

@ -0,0 +1,73 @@
/*
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 { render } from '@testing-library/react';
import LabsUserSettingsTab from '../../../../../../src/components/views/settings/tabs/user/LabsUserSettingsTab';
import SettingsStore from '../../../../../../src/settings/SettingsStore';
import {
getMockClientWithEventEmitter,
mockClientMethodsServer,
mockClientMethodsUser,
} from '../../../../../test-utils';
import SdkConfig from '../../../../../../src/SdkConfig';
describe('<SecurityUserSettingsTab />', () => {
const sdkConfigSpy = jest.spyOn(SdkConfig, 'get');
const defaultProps = {
closeSettingsFn: jest.fn(),
};
const getComponent = () => <LabsUserSettingsTab {...defaultProps} />;
const userId = '@alice:server.org';
getMockClientWithEventEmitter({
...mockClientMethodsUser(userId),
...mockClientMethodsServer(),
});
const settingsValueSpy = jest.spyOn(SettingsStore, 'getValue');
beforeEach(() => {
jest.clearAllMocks();
settingsValueSpy.mockReturnValue(false);
sdkConfigSpy.mockReturnValue(false);
});
it('renders settings marked as beta as beta cards', () => {
const { getByTestId } = render(getComponent());
expect(getByTestId("labs-beta-section")).toMatchSnapshot();
});
it('does not render non-beta labs settings when disabled in config', () => {
const { container } = render(getComponent());
expect(sdkConfigSpy).toHaveBeenCalledWith('show_labs_settings');
const labsSections = container.getElementsByClassName('mx_SettingsTab_section');
// only section is beta section
expect(labsSections.length).toEqual(1);
});
it('renders non-beta labs settings when enabled in config', () => {
// enable labs
sdkConfigSpy.mockImplementation(configName => configName === 'show_labs_settings');
const { container } = render(getComponent());
const labsSections = container.getElementsByClassName('mx_SettingsTab_section');
expect(labsSections.length).toEqual(11);
});
});

68
test/components/views/settings/tabs/user/SecurityUserSettingsTab-test.tsx Normal file
View file

@ -0,0 +1,68 @@
/*
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 { render } from '@testing-library/react';
import React from 'react';
import SecurityUserSettingsTab from "../../../../../../src/components/views/settings/tabs/user/SecurityUserSettingsTab";
import SettingsStore from '../../../../../../src/settings/SettingsStore';
import {
getMockClientWithEventEmitter,
mockClientMethodsServer,
mockClientMethodsUser,
mockClientMethodsCrypto,
mockClientMethodsDevice,
mockPlatformPeg,
} from '../../../../../test-utils';
describe('<SecurityUserSettingsTab />', () => {
const defaultProps = {
closeSettingsFn: jest.fn(),
};
const getComponent = () => <SecurityUserSettingsTab {...defaultProps} />;
const userId = '@alice:server.org';
const deviceId = 'alices-device';
getMockClientWithEventEmitter({
...mockClientMethodsUser(userId),
...mockClientMethodsServer(),
...mockClientMethodsDevice(deviceId),
...mockClientMethodsCrypto(),
getRooms: jest.fn().mockReturnValue([]),
getIgnoredUsers: jest.fn(),
});
const settingsValueSpy = jest.spyOn(SettingsStore, 'getValue');
beforeEach(() => {
mockPlatformPeg();
jest.clearAllMocks();
settingsValueSpy.mockReturnValue(false);
});
it('renders sessions section when new session manager is disabled', () => {
settingsValueSpy.mockReturnValue(false);
const { getByTestId } = render(getComponent());
expect(getByTestId('devices-section')).toBeTruthy();
});
it('does not render sessions section when new session manager is enabled', () => {
settingsValueSpy.mockReturnValue(true);
const { queryByTestId } = render(getComponent());
expect(queryByTestId('devices-section')).toBeFalsy();
});
});

196
test/components/views/settings/tabs/user/__snapshots__/LabsUserSettingsTab-test.tsx.snap Normal file
View file

@ -0,0 +1,196 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<SecurityUserSettingsTab /> renders settings marked as beta as beta cards 1`] = `
<div
class="mx_SettingsTab_section"
data-testid="labs-beta-section"
>
<div
class="mx_BetaCard"
>
<div
class="mx_BetaCard_columns"
>
<div
class="mx_BetaCard_columns_description"
>
<h3
class="mx_BetaCard_title"
>
<span>
Video rooms
</span>
<span
class="mx_BetaCard_betaPill"
>
Beta
</span>
</h3>
<div
class="mx_BetaCard_caption"
>
<p>
A new way to chat over voice and video in .
</p>
<p>
Video rooms are always-on VoIP channels embedded within a room in .
</p>
</div>
<div
class="mx_BetaCard_buttons"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
role="button"
tabindex="0"
>
Join the beta
</div>
</div>
<div
class="mx_BetaCard_refreshWarning"
>
Joining the beta will reload .
</div>
<div
class="mx_BetaCard_faq"
/>
</div>
<div
class="mx_BetaCard_columns_image_wrapper"
>
<img
alt=""
class="mx_BetaCard_columns_image"
src="image-file-stub"
/>
</div>
</div>
</div>
<div
class="mx_BetaCard"
>
<div
class="mx_BetaCard_columns"
>
<div
class="mx_BetaCard_columns_description"
>
<h3
class="mx_BetaCard_title"
>
<span>
Threads
</span>
<span
class="mx_BetaCard_betaPill"
>
Beta
</span>
</h3>
<div
class="mx_BetaCard_caption"
>
<p>
Keep discussions organised with threads.
</p>
<p>
<span>
Threads help keep conversations on-topic and easy to track.
<a
href="https://element.io/help#threads"
rel="noreferrer noopener"
target="_blank"
>
Learn more
</a>
.
</span>
</p>
</div>
<div
class="mx_BetaCard_buttons"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
role="button"
tabindex="0"
>
Join the beta
</div>
</div>
<div
class="mx_BetaCard_refreshWarning"
>
Joining the beta will reload .
</div>
<div
class="mx_BetaCard_faq"
/>
</div>
<div
class="mx_BetaCard_columns_image_wrapper"
>
<img
alt=""
class="mx_BetaCard_columns_image"
src="image-file-stub"
/>
</div>
</div>
</div>
<div
class="mx_BetaCard"
>
<div
class="mx_BetaCard_columns"
>
<div
class="mx_BetaCard_columns_description"
>
<h3
class="mx_BetaCard_title"
>
<span>
New session manager
</span>
<span
class="mx_BetaCard_betaPill"
>
Beta
</span>
</h3>
<div
class="mx_BetaCard_caption"
>
<p>
Have greater visibility and control over all your sessions.
</p>
<p>
Our new sessions manager provides better visibility of all your sessions, and greater control over them including the ability to remotely toggle push notifications.
</p>
</div>
<div
class="mx_BetaCard_buttons"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
role="button"
tabindex="0"
>
Join the beta
</div>
</div>
</div>
<div
class="mx_BetaCard_columns_image_wrapper"
>
<img
alt=""
class="mx_BetaCard_columns_image"
/>
</div>
</div>
</div>
</div>
`;

32
test/test-utils/client.ts
View file

@ -15,7 +15,7 @@ limitations under the License.
*/
import EventEmitter from "events";
import { MethodKeysOf, mocked, MockedObject } from "jest-mock";
import { MethodKeysOf, mocked, MockedObject, PropertyKeysOf } from "jest-mock";
import { MatrixClient, User } from "matrix-js-sdk/src/matrix";
import { MatrixClientPeg } from "../../src/MatrixClientPeg";
@ -71,6 +71,7 @@ export const mockClientMethodsUser = (userId = '@alice:domain') => ({
credentials: { userId },
getThreePids: jest.fn().mockResolvedValue({ threepids: [] }),
getAccessToken: jest.fn(),
getDeviceId: jest.fn(),
});
/**
@ -94,6 +95,35 @@ export const mockClientMethodsServer = (): Partial<Record<MethodKeysOf<MatrixCli
getIdentityServerUrl: jest.fn(),
getHomeserverUrl: jest.fn(),
getCapabilities: jest.fn().mockReturnValue({}),
getClientWellKnown: jest.fn().mockReturnValue({}),
doesServerSupportUnstableFeature: jest.fn().mockResolvedValue(false),
});
export const mockClientMethodsDevice = (
deviceId = 'test-device-id',
): Partial<Record<MethodKeysOf<MatrixClient>, unknown>> => ({
getDeviceId: jest.fn().mockReturnValue(deviceId),
getDeviceEd25519Key: jest.fn(),
getDevices: jest.fn().mockResolvedValue({ devices: [] }),
});
export const mockClientMethodsCrypto = (): Partial<Record<
MethodKeysOf<MatrixClient> & PropertyKeysOf<MatrixClient>, unknown>
> => ({
isCryptoEnabled: jest.fn(),
isSecretStorageReady: jest.fn(),
isCrossSigningReady: jest.fn(),
isKeyBackupKeyStored: jest.fn(),
getCrossSigningCacheCallbacks: jest.fn().mockReturnValue({ getCrossSigningKeyCache: jest.fn() }),
getStoredCrossSigningForUser: jest.fn(),
checkKeyBackup: jest.fn().mockReturnValue({}),
crypto: {
getSessionBackupPrivateKey: jest.fn(),
secretStorage: { hasKey: jest.fn() },
crossSigningInfo: {
getId: jest.fn(),
isStoredInSecretStorage: jest.fn(),
},
},
});