[MM-60308] Add a set of "Developer Mode" settings that allow the user to turn off systems or force the app to behave a certain way (#3144)

* Add developer mode manager, implement browser-only mode

* Add indicator when developer mode is enabled

* Add switch to disable notification storage

* Add setting to disable the user activity monitor

* Add switchOff method for easily creating switches to disable/enable functionality, added setting to disable context menu

* Add setting to force legacy API

* Add force new API to remove any support for legacy mode, fix i18n

* Fix lint

* Use one call to `push`

src/renderer/components/DeveloperModeIndicator.tsx

@@ -0,0 +1,36 @@
+// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import classNames from 'classnames';
+import React from 'react';
+// eslint-disable-next-line no-restricted-imports
+import {OverlayTrigger, Tooltip} from 'react-bootstrap';
+import {FormattedMessage} from 'react-intl';
+
+import 'renderer/css/components/DeveloperModeIndicator.scss';
+
+export default function DeveloperModeIndicator({developerMode, darkMode}: {developerMode: boolean; darkMode: boolean}) {
+    if (!developerMode) {
+        return null;
+    }
+
+    return (
+        <OverlayTrigger
+            placement='left'
+            overlay={
+                <Tooltip id='DeveloperModeIndicator__tooltip'>
+                    <FormattedMessage
+                        id='renderer.components.developerModeIndicator.tooltip'
+                        defaultMessage='Developer mode is enabled. You should only have this enabled if a Mattermost developer has instructed you to.'
+                    />
+                </Tooltip>
+            }
+        >
+            <div className={classNames('DeveloperModeIndicator', {darkMode})}>
+                <i className='icon-flask-outline'/>
+                <span className='DeveloperModeIndicator__badge'/>
+            </div>
+        </OverlayTrigger>
+    );
+}
+

src/renderer/components/MainPage.tsx

@@ -12,6 +12,7 @@ import {injectIntl} from 'react-intl';
 import type {UniqueView, UniqueServer} from 'types/config';
 import type {DownloadedItems} from 'types/downloads';
 
+import DeveloperModeIndicator from './DeveloperModeIndicator';
 import DownloadsDropdownButton from './DownloadsDropdown/DownloadsDropdownButton';
 import ErrorView from './ErrorView';
 import ExtraBar from './ExtraBar';
@@ -55,6 +56,7 @@ type State = {
     showDownloadsBadge: boolean;
     hasDownloads: boolean;
     threeDotsIsFocused: boolean;
+    developerMode: boolean;
 };
 
 type TabViewStatus = {
@@ -88,6 +90,7 @@ class MainPage extends React.PureComponent<Props, State> {
             showDownloadsBadge: false,
             hasDownloads: false,
             threeDotsIsFocused: false,
+            developerMode: false,
         };
     }
 
@@ -263,6 +266,10 @@ class MainPage extends React.PureComponent<Props, State> {
         }
 
         window.addEventListener('click', this.handleCloseDropdowns);
+
+        window.desktop.isDeveloperModeEnabled().then((developerMode) => {
+            this.setState({developerMode});
+        });
     }
 
     componentWillUnmount() {
@@ -471,6 +478,10 @@ class MainPage extends React.PureComponent<Props, State> {
                         />
                     )}
                     {tabsRow}
+                    <DeveloperModeIndicator
+                        darkMode={this.props.darkMode}
+                        developerMode={this.state.developerMode}
+                    />
                     {downloadsDropdownButton}
                     {window.process.platform !== 'darwin' && this.state.fullScreen &&
                         <span className='title-bar-btns'>