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