Added notification message when browser is wrong (#2070)

* Added notification message when browser is wrong

* Removed extra code, updated changelog

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-lock.json

@@ -1046,6 +1046,11 @@
       "integrity": "sha512-opgSsy+cEF9N8MgaVPnWVtdJ3o4mV2aMHvDq7thkQUFt0EuOHJon4rQpJfhjmNHB+ikl0Cd6WhWIErOyQ+f7tw==",
       "dev": true
     },
+    "@types/platform": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@types/platform/-/platform-1.3.2.tgz",
+      "integrity": "sha512-Tn6OuJDAG7bJbyi4R7HqcxXp1w2lmIxVXqyNhPt1Bm0FO2EWIi3CI87JVzF7ncqK0ZMPuUycS3wTMIk85EeF1Q=="
+    },
     "@types/prop-types": {
       "version": "15.7.3",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
@@ -12247,6 +12252,7 @@
             "convert-source-map": "^1.1.0",
             "fs-readdir-recursive": "^1.1.0",
             "glob": "^7.0.0",
+            "lodash": "^4.17.13",
             "make-dir": "^2.1.0",
             "slash": "^2.0.0",
             "source-map": "^0.5.0"
@@ -12286,6 +12292,7 @@
             "debug": "^4.1.0",
             "gensync": "^1.0.0-beta.1",
             "json5": "^2.1.0",
+            "lodash": "^4.17.13",
             "resolve": "^1.3.2",
             "semver": "^5.4.1",
             "source-map": "^0.5.0"
@@ -12313,6 +12320,7 @@
           "requires": {
             "@babel/types": "^7.8.7",
             "jsesc": "^2.5.1",
+            "lodash": "^4.17.13",
             "source-map": "^0.5.0"
           }
         },
@@ -12371,7 +12379,8 @@
           "integrity": "sha512-PoeBYtxoZGtct3md6xZOCWPcKuMuk3IHhgxsRRNtnNShebf4C8YonTSblsK4tvDbm+eJAw2HAPOfCr+Q/YRG/g==",
           "requires": {
             "@babel/helper-function-name": "^7.8.3",
-            "@babel/types": "^7.8.3"
+            "@babel/types": "^7.8.3",
+            "lodash": "^4.17.13"
           }
         },
         "@babel/helper-explode-assignable-expression": {
@@ -12435,7 +12444,8 @@
             "@babel/helper-simple-access": "^7.8.3",
             "@babel/helper-split-export-declaration": "^7.8.3",
             "@babel/template": "^7.8.6",
-            "@babel/types": "^7.8.6"
+            "@babel/types": "^7.8.6",
+            "lodash": "^4.17.13"
           }
         },
         "@babel/helper-optimise-call-expression": {
@@ -12454,7 +12464,10 @@
         "@babel/helper-regex": {
           "version": "7.8.3",
           "resolved": "https://registry.npmjs.org/@babel/helper-regex/-/helper-regex-7.8.3.tgz",
-          "integrity": "sha512-BWt0QtYv/cg/NecOAZMdcn/waj/5P26DR4mVLXfFtDokSR6fyuG0Pj+e2FqtSME+MqED1khnSMulkmGl8qWiUQ=="
+          "integrity": "sha512-BWt0QtYv/cg/NecOAZMdcn/waj/5P26DR4mVLXfFtDokSR6fyuG0Pj+e2FqtSME+MqED1khnSMulkmGl8qWiUQ==",
+          "requires": {
+            "lodash": "^4.17.13"
+          }
         },
         "@babel/helper-remap-async-to-generator": {
           "version": "7.8.3",
@@ -12700,7 +12713,8 @@
           "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.8.3.tgz",
           "integrity": "sha512-pGnYfm7RNRgYRi7bids5bHluENHqJhrV4bCZRwc5GamaWIIs07N4rZECcmJL6ZClwjDz1GbdMZFtPs27hTB06w==",
           "requires": {
-            "@babel/helper-plugin-utils": "^7.8.3"
+            "@babel/helper-plugin-utils": "^7.8.3",
+            "lodash": "^4.17.13"
           }
         },
         "@babel/plugin-transform-classes": {
@@ -13038,7 +13052,8 @@
             "@babel/parser": "^7.8.6",
             "@babel/types": "^7.8.6",
             "debug": "^4.1.0",
-            "globals": "^11.1.0"
+            "globals": "^11.1.0",
+            "lodash": "^4.17.13"
           },
           "dependencies": {
             "debug": {
@@ -13062,6 +13077,7 @@
           "integrity": "sha512-k2TreEHxFA4CjGkL+GYjRyx35W0Mr7DP5+9q6WMkyKXB+904bYmG40syjMFV0oLlhhFCwWl0vA0DyzTDkwAiJw==",
           "requires": {
             "esutils": "^2.0.2",
+            "lodash": "^4.17.13",
             "to-fast-properties": "^2.0.0"
           }
         },
@@ -14212,7 +14228,10 @@
         "catharsis": {
           "version": "0.8.11",
           "resolved": "https://registry.npmjs.org/catharsis/-/catharsis-0.8.11.tgz",
-          "integrity": "sha512-a+xUyMV7hD1BrDQA/3iPV7oc+6W26BgVJO05PGEoatMyIuPScQKsde6i3YorWX1qs+AZjnJ18NqdKoCtKiNh1g=="
+          "integrity": "sha512-a+xUyMV7hD1BrDQA/3iPV7oc+6W26BgVJO05PGEoatMyIuPScQKsde6i3YorWX1qs+AZjnJ18NqdKoCtKiNh1g==",
+          "requires": {
+            "lodash": "^4.17.14"
+          }
         },
         "chalk": {
           "version": "2.4.2",
@@ -15188,6 +15207,7 @@
             "js-yaml": "^3.13.1",
             "json-stable-stringify-without-jsonify": "^1.0.1",
             "levn": "^0.3.0",
+            "lodash": "^4.17.14",
             "minimatch": "^3.0.4",
             "mkdirp": "^0.5.1",
             "natural-compare": "^1.4.0",
@@ -15559,6 +15579,7 @@
                 "js-yaml": "^3.5.1",
                 "json-stable-stringify": "^1.0.0",
                 "levn": "^0.3.0",
+                "lodash": "^4.0.0",
                 "mkdirp": "^0.5.0",
                 "natural-compare": "^1.4.0",
                 "optionator": "^0.8.2",
@@ -15633,6 +15654,7 @@
                 "cli-cursor": "^1.0.1",
                 "cli-width": "^2.0.0",
                 "figures": "^1.3.5",
+                "lodash": "^4.3.0",
                 "readline2": "^1.0.1",
                 "run-async": "^0.1.0",
                 "rx-lite": "^3.1.2",
@@ -15717,6 +15739,7 @@
                 "ajv": "^4.7.0",
                 "ajv-keywords": "^1.0.0",
                 "chalk": "^1.1.1",
+                "lodash": "^4.0.0",
                 "slice-ansi": "0.0.4",
                 "string-width": "^2.0.0"
               },
@@ -17168,6 +17191,7 @@
             "cli-width": "^2.0.0",
             "external-editor": "^3.0.3",
             "figures": "^2.0.0",
+            "lodash": "^4.17.12",
             "mute-stream": "0.0.7",
             "run-async": "^2.2.0",
             "rxjs": "^6.4.0",
@@ -18279,6 +18303,11 @@
             "path-exists": "^3.0.0"
           }
         },
+        "lodash": {
+          "version": "4.17.20",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
+          "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
+        },
         "lodash.sortby": {
           "version": "4.7.0",
           "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
@@ -19451,7 +19480,10 @@
         "request-promise-core": {
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/request-promise-core/-/request-promise-core-1.1.3.tgz",
-          "integrity": "sha512-QIs2+ArIGQVp5ZYbWD5ZLCY29D5CfWizP8eWnm8FoGD1TX61veauETVQbrV60662V0oFBkrDOuaBI8XgtuyYAQ=="
+          "integrity": "sha512-QIs2+ArIGQVp5ZYbWD5ZLCY29D5CfWizP8eWnm8FoGD1TX61veauETVQbrV60662V0oFBkrDOuaBI8XgtuyYAQ==",
+          "requires": {
+            "lodash": "^4.17.15"
+          }
         },
         "request-promise-native": {
           "version": "1.0.8",
@@ -19492,7 +19524,10 @@
         "requizzle": {
           "version": "0.2.3",
           "resolved": "https://registry.npmjs.org/requizzle/-/requizzle-0.2.3.tgz",
-          "integrity": "sha512-YanoyJjykPxGHii0fZP0uUPEXpvqfBDxWV7s6GKAiiOsiqhX6vHNyW3Qzdmqp/iq/ExbhaGbVrjB4ruEVSM4GQ=="
+          "integrity": "sha512-YanoyJjykPxGHii0fZP0uUPEXpvqfBDxWV7s6GKAiiOsiqhX6vHNyW3Qzdmqp/iq/ExbhaGbVrjB4ruEVSM4GQ==",
+          "requires": {
+            "lodash": "^4.17.14"
+          }
         },
         "resolve": {
           "version": "1.15.1",
@@ -20174,6 +20209,7 @@
           "integrity": "sha512-wmEc8m4fjnob4gt5riFRtTu/6+4rSe12TpAELNSqHMfF3IqnA+CH37USM6/YR3qRZv7e56kAEAtd6nKZaxe0Ug==",
           "requires": {
             "ajv": "^6.10.2",
+            "lodash": "^4.17.14",
             "slice-ansi": "^2.1.0",
             "string-width": "^3.0.0"
           }
@@ -26159,6 +26195,11 @@
         "find-up": "^3.0.0"
       }
     },
+    "platform": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/platform/-/platform-1.3.6.tgz",
+      "integrity": "sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg=="
+    },
     "portfinder": {
       "version": "1.0.25",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.25.tgz",

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