Device manager - promote to beta (#9380)

* 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

src/actions/handlers/viewUserDeviceSettings.ts

@@ -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,
+    });
+};

src/components/structures/MatrixChat.tsx

@@ -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,

src/components/views/right_panel/UserInfo.tsx

@@ -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,
                     });
                 }}
             >

src/components/views/settings/tabs/user/LabsUserSettingsTab.tsx

@@ -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>

src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx

@@ -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 }

src/dispatcher/actions.ts

@@ -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.
      */

src/i18n/strings/en_EN.json

@@ -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",

src/settings/Settings.tsx

@@ -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"),

src/toasts/BulkUnverifiedSessionsToast.ts

@@ -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,
         });
     };
 

src/toasts/UnverifiedSessionToast.ts

@@ -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,
         });
     };
 

test/actions/handlers/viewUserDeviceSettings-test.ts

@@ -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,
+        });
+    });
+});

test/components/views/settings/tabs/user/LabsUserSettingsTab-test.tsx

@@ -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);
+    });
+});