Device Manager - add new labsed session manager screen (PSG-636) (#9119)

* add feature_new_device_manager labs flag

* add generic settings tab container

* settingstab section styles

* add session manager tab to user settings

* add sessions tab case to UserSettingDialog test

* fussy import ordering

* remove posthog tracking

* i18n

src/components/views/dialogs/UserSettingsDialog.tsx

@@ -35,6 +35,7 @@ import BaseDialog from "./BaseDialog";
 import { IDialogProps } from "./IDialogProps";
 import SidebarUserSettingsTab from "../settings/tabs/user/SidebarUserSettingsTab";
 import KeyboardUserSettingsTab from "../settings/tabs/user/KeyboardUserSettingsTab";
+import SessionManagerTab from '../settings/tabs/user/SessionManagerTab';
 import { UserTab } from "./UserTab";
 
 interface IProps extends IDialogProps {
@@ -43,25 +44,30 @@ interface IProps extends IDialogProps {
 
 interface IState {
     mjolnirEnabled: boolean;
+    newSessionManagerEnabled: boolean;
 }
 
 export default class UserSettingsDialog extends React.Component<IProps, IState> {
-    private mjolnirWatcher: string | undefined;
+    private settingsWatchers: string[] = [];
 
     constructor(props) {
         super(props);
 
         this.state = {
             mjolnirEnabled: SettingsStore.getValue("feature_mjolnir"),
+            newSessionManagerEnabled: SettingsStore.getValue("feature_new_device_manager"),
         };
     }
 
     public componentDidMount(): void {
-        this.mjolnirWatcher = SettingsStore.watchSetting("feature_mjolnir", null, this.mjolnirChanged);
+        this.settingsWatchers = [
+            SettingsStore.watchSetting("feature_mjolnir", null, this.mjolnirChanged),
+            SettingsStore.watchSetting("feature_new_device_manager", null, this.sessionManagerChanged),
+        ];
     }
 
     public componentWillUnmount(): void {
-        this.mjolnirWatcher && SettingsStore.unwatchSetting(this.mjolnirWatcher);
+        this.settingsWatchers.forEach(watcherRef => SettingsStore.unwatchSetting(watcherRef));
     }
 
     private mjolnirChanged: CallbackFn = (settingName, roomId, atLevel, newValue) => {
@@ -69,6 +75,11 @@ export default class UserSettingsDialog extends React.Component<IProps, IState>
         this.setState({ mjolnirEnabled: newValue });
     };
 
+    private sessionManagerChanged: CallbackFn = (settingName, roomId, atLevel, newValue) => {
+        // We can cheat because we know what levels a feature is tracked at, and how it is tracked
+        this.setState({ newSessionManagerEnabled: newValue });
+    };
+
     private getTabs() {
         const tabs: Tab[] = [];
 
@@ -132,6 +143,16 @@ export default class UserSettingsDialog extends React.Component<IProps, IState>
             <SecurityUserSettingsTab closeSettingsFn={this.props.onFinished} />,
             "UserSettingsSecurityPrivacy",
         ));
+        if (this.state.newSessionManagerEnabled) {
+            tabs.push(new Tab(
+                UserTab.SessionManager,
+                _td("Sessions"),
+                "mx_UserSettingsDialog_securityIcon",
+                <SessionManagerTab />,
+                // don't track with posthog while under construction
+                undefined,
+            ));
+        }
         // Show the Labs tab if enabled or if there are any active betas
         if (SdkConfig.get("show_labs_settings")
             || SettingsStore.getFeatureSettingNames().some(k => SettingsStore.getBetaInfo(k))

src/components/views/dialogs/UserTab.ts

@@ -26,4 +26,5 @@ export enum UserTab {
     Labs = "USER_LABS_TAB",
     Mjolnir = "USER_MJOLNIR_TAB",
     Help = "USER_HELP_TAB",
+    SessionManager = "USER_SESSION_MANAGER_TAB",
 }

src/components/views/settings/tabs/SettingsTab.tsx

@@ -0,0 +1,34 @@
+/*
+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 Heading from "../../typography/Heading";
+
+export interface SettingsTabProps {
+    heading: string;
+    children?: React.ReactNode;
+}
+
+const SettingsTab: React.FC<SettingsTabProps> = ({ heading, children }) => (
+    <div className="mx_SettingsTab">
+        <Heading size='h2'>{ heading }</Heading>
+        <div className="mx_SettingsTab_sections">
+            { children }
+        </div>
+    </div>
+);
+
+export default SettingsTab;

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

@@ -0,0 +1,26 @@
+/*
+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 { _t } from "../../../../../languageHandler";
+import SettingsTab from '../SettingsTab';
+
+const SessionManagerTab: React.FC = () => {
+    return <SettingsTab heading={_t('Sessions')} />;
+};
+
+export default SessionManagerTab;