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,
+                        action: Action.ViewUserDeviceSettings,
-                        initialTabId: UserTab.Security,
                     });
                 }}
             >

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 (
+        const useNewSessionManager = SettingsStore.getValue("feature_new_device_manager");
-            <div className="mx_SettingsTab mx_SecurityUserSettingsTab">
+        const devicesSection = useNewSessionManager
-                { warning }
+            ? 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,
+            action: Action.ViewUserDeviceSettings,
-            initialTabId: UserTab.Security,
         });
     };
 

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,
+            action: Action.ViewUserDeviceSettings,
-            initialTabId: UserTab.Security,
         });
     };
 

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

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

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

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

@@ -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>
+`;

test/test-utils/client.ts

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