Added notification message when browser is wrong

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ability to change label color in tasks and predefined labels (<https://github.com/opencv/cvat/pull/2014>)
 - [Datumaro] Multi-dataset merge (https://github.com/opencv/cvat/pull/1695)
 - Link to django admin page from UI (<https://github.com/opencv/cvat/pull/2068>)
+- Notification message when users use wrong browser (<https://github.com/opencv/cvat/pull/2070>)
 
 ### Changed
 - Shape coordinates are rounded to 2 digits in dumped annotations (<https://github.com/opencv/cvat/pull/1970>)

cvat-ui/package.json

@@ -47,6 +47,7 @@
     "worker-loader": "^2.0.0"
   },
   "dependencies": {
+    "@types/platform": "^1.3.2",
     "@types/react": "^16.9.2",
     "@types/react-color": "^3.0.2",
     "@types/react-dom": "^16.9.0",
@@ -62,6 +63,7 @@
     "dotenv-webpack": "^1.7.0",
     "error-stack-parser": "^2.0.6",
     "moment": "^2.24.0",
+    "platform": "^1.3.6",
     "prop-types": "^15.7.2",
     "react": "^16.9.0",
     "react-color": "^2.18.1",

cvat-ui/src/components/cvat-app.tsx

@@ -10,6 +10,8 @@ import { withRouter, RouteComponentProps } from 'react-router-dom';
 import { GlobalHotKeys, ExtendedKeyMapOptions, configure } from 'react-hotkeys';
 import Spin from 'antd/lib/spin';
 import Layout from 'antd/lib/layout';
+import { Row, Col } from 'antd/lib/grid';
+import Text from 'antd/lib/typography/Text';
 import notification from 'antd/lib/notification';
 
 import GlobalErrorBoundary from 'components/global-error-boundary/global-error-boundary';
@@ -23,9 +25,11 @@ import LoginPageContainer from 'containers/login-page/login-page';
 import RegisterPageContainer from 'containers/register-page/register-page';
 import Header from 'components/header/header';
 import { customWaViewHit } from 'utils/enviroment';
+import showPlatformNotification, { stopNotifications, platformInfo } from 'utils/platform-checker';
 
 import getCore from 'cvat-core-wrapper';
 import { NotificationsState } from 'reducers/interfaces';
+import Modal from 'antd/lib/modal';
 
 interface CVATAppProps {
     loadFormats: () => void;
@@ -267,6 +271,36 @@ class CVATApplication extends React.PureComponent<CVATAppProps & RouteComponentP
             },
         };
 
+        if (showPlatformNotification()) {
+            stopNotifications(false);
+            const info = platformInfo();
+            Modal.warning({
+                title: 'Unsupported platform detected',
+                content: (
+                    <>
+                        <Row>
+                            <Col>
+                                <Text>
+                                    {`The browser you are using is ${info.name} ${info.version} based on ${info.engine} .`
+                                        + ' CVAT was tested in the latest versions of Chrome and Firefox.'
+                                        + ' We recommend to use Chrome (or another Chromium based browser)'}
+                                </Text>
+                            </Col>
+                        </Row>
+                        <Row>
+                            <Col>
+                                <Text type='secondary'>
+                                    {`The operating system is ${info.os}`}
+                                </Text>
+                            </Col>
+                        </Row>
+                    </>
+                ),
+                onOk: () => stopNotifications(true),
+            });
+        }
+
+
         if (readyForRender) {
             if (user) {
                 return (

cvat-ui/src/utils/platform-checker.ts

@@ -0,0 +1,40 @@
+// Copyright (C) 2020 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+
+import platform from 'platform';
+
+const engine = platform.layout || 'unknown';
+const name = platform.name || 'unknown';
+const version = platform.version || 'unknown';
+const os = platform.os ? platform.os.toString() : 'unknown';
+let platformNotificationShown = window.localStorage.getItem('platformNotiticationShown') !== null;
+
+export function platformInfo(): {
+    engine: string;
+    name: string;
+    version: string;
+    os: string;
+} {
+    return {
+        engine,
+        name,
+        version,
+        os,
+    };
+}
+
+export function stopNotifications(saveInStorage: boolean): void {
+    platformNotificationShown = true;
+    if (saveInStorage) {
+        window.localStorage.setItem('platformNotiticationShown', 'shown');
+    }
+}
+
+export default function showPlatformNotification(): boolean {
+    // Blick is engine of Chrome, Microsoft Edge >= v79
+    // Gecko is engine of Firefox, supported but works worse than in Chrome (let's show the message)
+    // WebKit is engine of Apple Safary, not supported
+    const unsupportedPlatform = !['Blink'].includes(engine);
+    return unsupportedPlatform && !platformNotificationShown;
+}