From 9e05ffca35caf10f5f5acac9a1f53db190a8dac4 Mon Sep 17 00:00:00 2001 From: Boris Sekachev Date: Mon, 24 Aug 2020 14:32:36 +0300 Subject: [PATCH] Added notification message when browser is wrong (#2070) * Added notification message when browser is wrong * Removed extra code, updated changelog --- CHANGELOG.md | 1 + cvat-ui/package-lock.json | 57 +++++++++++++++++++++++---- cvat-ui/package.json | 2 + cvat-ui/src/components/cvat-app.tsx | 34 ++++++++++++++++ cvat-ui/src/utils/platform-checker.ts | 40 +++++++++++++++++++ 5 files changed, 126 insertions(+), 8 deletions(-) create mode 100644 cvat-ui/src/utils/platform-checker.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 3c2cf34b..ca2dea56 100644 --- a/CHANGELOG.md +++ b/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 () - [Datumaro] Multi-dataset merge (https://github.com/opencv/cvat/pull/1695) - Link to django admin page from UI () +- Notification message when users use wrong browser () ### Changed - Shape coordinates are rounded to 2 digits in dumped annotations () diff --git a/cvat-ui/package-lock.json b/cvat-ui/package-lock.json index f5f4b8dc..4f97ca1e 100644 --- a/cvat-ui/package-lock.json +++ b/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", diff --git a/cvat-ui/package.json b/cvat-ui/package.json index 6c8da4ea..64353225 100644 --- a/cvat-ui/package.json +++ b/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", diff --git a/cvat-ui/src/components/cvat-app.tsx b/cvat-ui/src/components/cvat-app.tsx index 517cf192..83a81ede 100644 --- a/cvat-ui/src/components/cvat-app.tsx +++ b/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 + + + + {`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)'} + + + + + + + {`The operating system is ${info.os}`} + + + + + ), + onOk: () => stopNotifications(true), + }); + } + + if (readyForRender) { if (user) { return ( diff --git a/cvat-ui/src/utils/platform-checker.ts b/cvat-ui/src/utils/platform-checker.ts new file mode 100644 index 00000000..71335db6 --- /dev/null +++ b/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; +}