Added information about OpenVINO toolkit to login page (#4077)

Co-authored-by: Boris Sekachev <boris.sekachev@yandex.ru>
Co-authored-by: Boris Sekachev <boris.sekachev@intel.com>
Co-authored-by: Nikita Manovich <nikita.manovich@intel.com>

CHANGELOG.md

@@ -26,6 +26,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Dataset importing to a project (<https://github.com/openvinotoolkit/cvat/pull/3790>)
 - User is able to customize information that text labels show (<https://github.com/openvinotoolkit/cvat/pull/4029>)
 - Support for uploading manifest with any name (<https://github.com/openvinotoolkit/cvat/pull/4041>)
+- Added information about OpenVINO toolkit to login page (<https://github.com/openvinotoolkit/cvat/pull/4077>)
 
 ### Changed
 - Users don't have access to a task object anymore if they are assigneed only on some jobs of the task (<https://github.com/openvinotoolkit/cvat/pull/3788>)

cvat-ui/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cvat-ui",
-  "version": "1.32.1",
+  "version": "1.32.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "cvat-ui",
-      "version": "1.32.1",
+      "version": "1.32.2",
       "license": "MIT",
       "dependencies": {
         "@ant-design/icons": "^4.6.3",

cvat-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.32.1",
+  "version": "1.32.2",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {

cvat-ui/src/assets/openvino.svg

@@ -0,0 +1,14 @@
+<svg width="120" height="28" viewBox="0 -3 120 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M117.045 0.566335H116.582V0.264099H117.898V0.566335H117.435V1.97881H117.044V0.566335H117.045Z" fill="black"/>
+<path d="M118.188 0.26413H118.7L119.101 1.33112L119.496 0.26413H120V1.97884H119.614V0.77498L119.139 1.97884H119.012L118.535 0.77498V1.97884H118.187V0.26413H118.188Z" fill="black"/>
+<path d="M23.0686 17.0748V24.4231H20.4009V6.05237H23.0686V7.81389C23.9997 6.58052 25.5852 5.80051 27.2714 5.80051C30.568 5.80051 33.5375 8.31711 33.5375 12.3434C33.5375 16.3447 30.4673 18.8862 27.2963 18.8862C25.5598 18.8867 23.9748 18.2324 23.0686 17.0748ZM30.8698 12.3184C30.8698 10.0283 29.1332 8.2418 26.8939 8.2418C24.6037 8.2418 22.918 10.0791 22.918 12.3184C22.918 14.5832 24.6042 16.4205 26.8939 16.4205C29.1337 16.4205 30.8698 14.6086 30.8698 12.3184Z" fill="black"/>
+<path d="M34.778 12.3943C34.778 8.69466 37.6217 5.80103 41.3208 5.80103C45.0453 5.80103 47.7884 8.49368 47.7884 12.2182V13.275H37.3704C37.7225 15.2126 39.2326 16.4963 41.4221 16.4963C43.1332 16.4963 44.4419 15.5901 45.0962 14.2316L47.3106 15.465C46.2034 17.5287 44.2149 18.8878 41.4221 18.8878C37.4457 18.8867 34.778 16.043 34.778 12.3943ZM37.496 10.9848H45.0458C44.6434 9.17294 43.2589 8.16651 41.3213 8.16651C39.4585 8.16651 37.9993 9.32406 37.496 10.9848Z" fill="black"/>
+<path d="M49.409 6.05237H52.0767V7.68821C52.9325 6.53066 54.2916 5.80051 55.9524 5.80051C59.1233 5.80051 61.0609 7.86426 61.0609 11.2866V18.6349H58.3428V11.5135C58.3428 9.44973 57.3109 8.14106 55.2975 8.14106C53.4856 8.14106 52.1016 9.5001 52.1016 11.7145V18.6349H49.409V6.05237Z" fill="black"/>
+<path d="M60.3419 0.264099H63.1856L68.1435 14.5832L73.1009 0.264099H75.9447L69.5275 18.6349H66.7595L60.3419 0.264099Z" fill="black"/>
+<path d="M76.9639 0.264099H79.7069V18.6349H76.9639V0.264099Z" fill="black"/>
+<path d="M82.2078 0.264099H85.3034L94.6147 14.1558V0.264099H97.3323V18.6349H94.4382L84.9508 4.51729V18.6349H82.2078V0.264099Z" fill="black"/>
+<path d="M12.9117 7.96652C12.6675 8.46617 12.1663 8.81369 11.5633 8.81369C10.7172 8.81369 10.0583 8.12629 10.0583 7.28572C10.0583 6.6782 10.4048 6.15208 10.9151 5.9048C10.4587 5.70738 9.95395 5.59747 9.41817 5.59747C7.302 5.59747 5.65497 7.32999 5.65497 9.4319C5.65497 11.5338 7.30251 13.2516 9.41817 13.2516C11.5481 13.2516 13.1956 11.5333 13.1956 9.4319C13.1951 8.91393 13.0938 8.41936 12.9117 7.96652Z" fill="black"/>
+<path d="M0 9.437C0 4.22775 4.20281 0 9.41206 0C14.6468 0 18.8491 4.22775 18.8491 9.437C18.8491 14.6462 14.6462 18.874 9.41206 18.874C4.20281 18.874 0 14.6462 0 9.437ZM16.106 9.437C16.106 5.71247 13.187 2.64228 9.41206 2.64228C5.66261 2.64228 2.74302 5.71247 2.74302 9.437C2.74302 13.1615 5.6621 16.2063 9.41206 16.2063C13.187 16.2068 16.106 13.1615 16.106 9.437Z" fill="black"/>
+<path d="M111.862 7.97924C111.618 8.4789 111.117 8.82642 110.514 8.82642C109.668 8.82642 109.008 8.13901 109.008 7.29845C109.008 6.69092 109.355 6.16481 109.865 5.91752C109.409 5.7201 108.904 5.6102 108.368 5.6102C106.252 5.6102 104.605 7.34272 104.605 9.44463C104.605 11.5465 106.252 13.2648 108.368 13.2648C110.498 13.2648 112.145 11.5465 112.145 9.44463C112.145 8.92666 112.044 8.43158 111.862 7.97924Z" fill="black"/>
+<path d="M98.9503 9.44972C98.9503 4.24047 103.153 0.0127258 108.362 0.0127258C113.597 0.0127258 117.799 4.24047 117.799 9.44972C117.799 14.659 113.596 18.8867 108.362 18.8867C103.153 18.8867 98.9503 14.659 98.9503 9.44972ZM115.056 9.44972C115.056 5.72519 112.137 2.655 108.362 2.655C104.613 2.655 101.693 5.72519 101.693 9.44972C101.693 13.1743 104.612 16.219 108.362 16.219C112.137 16.219 115.056 13.1743 115.056 9.44972Z" fill="black"/>
+</svg>

cvat-ui/src/components/annotation-page/standard-workspace/context-image/context-image.tsx

@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: MIT
 
 import React, { useEffect, useState } from 'react';
-import { notification } from 'antd';
+import notification from 'antd/lib/notification';
 import { useDispatch, useSelector } from 'react-redux';
 import { QuestionCircleOutlined, ShrinkOutlined } from '@ant-design/icons';
 import Spin from 'antd/lib/spin';

cvat-ui/src/components/annotation-page/top-bar/filters-modal.tsx

@@ -11,7 +11,8 @@ import AntdWidgets from 'react-awesome-query-builder/lib/components/widgets/antd
 import AntdConfig from 'react-awesome-query-builder/lib/config/antd';
 import 'react-awesome-query-builder/lib/css/styles.css';
 import { DownOutlined } from '@ant-design/icons';
-import { Dropdown, Menu } from 'antd';
+import Dropdown from 'antd/lib/dropdown';
+import Menu from 'antd/lib/menu';
 import Button from 'antd/lib/button';
 import Modal from 'antd/lib/modal';
 import { omit } from 'lodash';
@@ -212,8 +213,9 @@ function FiltersModalComponent(): JSX.Element {
         applyFilters([QbUtils.jsonLogicFormat(state.tree, config).logic]);
     };
 
-    const isModalConfirmable = (): boolean =>
+    const isModalConfirmable = (): boolean => (
-        QbUtils.queryString(state.tree, config)?.trim().length > 0 && QbUtils.isValidTree(state.tree);
+        (QbUtils.queryString(state.tree, config) || '').trim().length > 0 && QbUtils.isValidTree(state.tree)
+    );
 
     const renderBuilder = (builderProps: any): JSX.Element => (
         <div className='query-builder-container'>

cvat-ui/src/components/create-cloud-storage-page/cloud-storage-form.tsx

@@ -19,7 +19,7 @@ import { createCloudStorageAsync, updateCloudStorageAsync } from 'actions/cloud-
 import { ProviderType, CredentialsType } from 'utils/enums';
 import { QuestionCircleOutlined, UploadOutlined } from '@ant-design/icons';
 import Upload, { RcFile } from 'antd/lib/upload';
-import { Space } from 'antd';
+import Space from 'antd/lib/space';
 import { AzureProvider, S3Provider, GoogleCloudProvider } from '../../icons';
 import S3Region from './s3-region';
 import GCSLocation from './gcs-locatiion';

cvat-ui/src/components/create-project-page/create-project-content.tsx

@@ -7,7 +7,8 @@ import React, {
 } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router';
-import { Switch, Select } from 'antd';
+import Switch from 'antd/lib/switch';
+import Select from 'antd/lib/select';
 import { Col, Row } from 'antd/lib/grid';
 import Text from 'antd/lib/typography/Text';
 import Form, { FormInstance } from 'antd/lib/form';

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

@@ -27,6 +27,7 @@ import Menu from 'antd/lib/menu';
 import Dropdown from 'antd/lib/dropdown';
 import Modal from 'antd/lib/modal';
 import Text from 'antd/lib/typography/Text';
+import Select from 'antd/lib/select';
 
 import getCore from 'cvat-core-wrapper';
 import consts from 'consts';
@@ -37,7 +38,6 @@ import CVATTooltip from 'components/common/cvat-tooltip';
 import { switchSettingsDialog as switchSettingsDialogAction } from 'actions/settings-actions';
 import { logoutAsync, authActions } from 'actions/auth-actions';
 import { CombinedState } from 'reducers/interfaces';
-import { Select } from 'antd';
 import SettingsModal from './settings-modal/settings-modal';
 
 const core = getCore();

cvat-ui/src/components/login-page/intel-footer-drawer.tsx

@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: MIT
 
 import React from 'react';
-import { Layout } from 'antd';
+import Layout from 'antd/lib/layout';
 
 import { isPublic } from 'utils/enviroment';
 import consts from 'consts';

cvat-ui/src/components/login-page/login-page.tsx

@@ -2,16 +2,21 @@
 //
 // SPDX-License-Identifier: MIT
 
+import './styles.scss';
 import React from 'react';
 import { RouteComponentProps } from 'react-router';
 import { Link, withRouter } from 'react-router-dom';
 import Title from 'antd/lib/typography/Title';
 import Text from 'antd/lib/typography/Text';
 import { Row, Col } from 'antd/lib/grid';
-import { Layout } from 'antd';
+import Button from 'antd/lib/button';
+import Divider from 'antd/lib/divider';
+import Layout from 'antd/lib/layout';
 
 import FooterDrawer from 'components/login-page/intel-footer-drawer';
 
+import consts from 'consts';
+import { OpenVINOIcon } from 'icons';
 import LoginForm, { LoginData } from './login-form';
 
 interface LoginPageComponentProps {
@@ -22,11 +27,9 @@ interface LoginPageComponentProps {
 
 function LoginPageComponent(props: LoginPageComponentProps & RouteComponentProps): JSX.Element {
     const sizes = {
-        xs: { span: 14 },
+        style: {
-        sm: { span: 14 },
+            width: 400,
-        md: { span: 10 },
+        },
-        lg: { span: 4 },
-        xl: { span: 4 },
     };
 
     const { Content } = Layout;
@@ -36,7 +39,8 @@ function LoginPageComponent(props: LoginPageComponentProps & RouteComponentProps
     return (
         <Layout>
             <Content>
-                <Row justify='center' align='middle' style={{ height: '100%' }}>
+                <Row style={{ height: '33%' }} />
+                <Row justify='center' align='middle'>
                     <Col {...sizes}>
                         <Title level={2}> Login </Title>
                         <LoginForm
@@ -62,6 +66,23 @@ function LoginPageComponent(props: LoginPageComponentProps & RouteComponentProps
                                 </Col>
                             </Row>
                         )}
+
+                    </Col>
+                </Row>
+                <Row className='cvat-login-openvino-block' justify='center'>
+                    <Col {...sizes}>
+                        <Divider />
+                        <Text type='secondary'>
+                            Learn more about products of
+                            <a target='_blank' rel='noopener noreferrer' href={consts.OPENVINO_URL}> OpenVINO™ Toolkit </a>
+                        </Text>
+                        <Button
+                            href={consts.OPENVINO_URL}
+                            icon={<OpenVINOIcon />}
+                            block
+                            type='link'
+                            target='_blank'
+                        />
                     </Col>
                 </Row>
             </Content>

cvat-ui/src/components/login-page/styles.scss

@@ -0,0 +1,19 @@
+// Copyright (C) 2021 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+
+@import './../../base.scss';
+
+.cvat-login-openvino-block {
+    > div {
+        text-align: center;
+
+        .ant-divider {
+            margin-bottom: $grid-unit-size;
+        }
+
+        > a {
+            margin-top: $grid-unit-size;
+        }
+    }
+}

cvat-ui/src/components/register-page/register-page.tsx

@@ -9,7 +9,7 @@ import { Link, withRouter } from 'react-router-dom';
 import Title from 'antd/lib/typography/Title';
 import Text from 'antd/lib/typography/Text';
 import { Row, Col } from 'antd/lib/grid';
-import { Layout } from 'antd';
+import Layout from 'antd/lib/layout';
 
 import { UserAgreement } from 'reducers/interfaces';
 import FooterDrawer from 'components/login-page/intel-footer-drawer';
@@ -31,11 +31,9 @@ interface RegisterPageComponentProps {
 
 function RegisterPageComponent(props: RegisterPageComponentProps & RouteComponentProps): JSX.Element {
     const sizes = {
-        xs: { span: 14 },
+        style: {
-        sm: { span: 14 },
+            width: 400,
-        md: { span: 10 },
+        },
-        lg: { span: 6 },
-        xl: { span: 5 },
     };
 
     const { fetching, userAgreements, onRegister } = props;

cvat-ui/src/components/reset-password-confirm-page/reset-password-confirm-page.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import Title from 'antd/lib/typography/Title';
 import { Row, Col } from 'antd/lib/grid';
-import { Layout } from 'antd';
+import Layout from 'antd/lib/layout';
 
 import { CombinedState } from 'reducers/interfaces';
 import { resetPasswordAsync } from 'actions/auth-actions';

cvat-ui/src/components/reset-password-page/reset-password-page.tsx

@@ -8,7 +8,7 @@ import { connect } from 'react-redux';
 import Title from 'antd/lib/typography/Title';
 import Text from 'antd/lib/typography/Text';
 import { Row, Col } from 'antd/lib/grid';
-import { Layout } from 'antd';
+import Layout from 'antd/lib/layout';
 
 import { requestPasswordResetAsync } from 'actions/auth-actions';
 import { CombinedState } from 'reducers/interfaces';

cvat-ui/src/consts.ts

@@ -25,6 +25,7 @@ const DEFAULT_PROJECT_SUBSETS = ['Train', 'Test', 'Validation'];
 const INTEL_TERMS_OF_USE_URL = 'https://www.intel.com/content/www/us/en/legal/terms-of-use.html';
 const INTEL_COOKIES_URL = 'https://www.intel.com/content/www/us/en/privacy/intel-cookie-notice.html';
 const INTEL_PRIVACY_URL = 'https://www.intel.com/content/www/us/en/privacy/intel-privacy-notice.html';
+const OPENVINO_URL = 'https://docs.openvino.ai';
 const DEFAULT_AWS_S3_REGIONS: string[][] = [
     ['us-east-1', 'US East (N. Virginia)'],
     ['us-east-2', 'US East (Ohio)'],
@@ -106,6 +107,7 @@ export default {
     INTEL_TERMS_OF_USE_URL,
     INTEL_COOKIES_URL,
     INTEL_PRIVACY_URL,
+    OPENVINO_URL,
     DEFAULT_AWS_S3_REGIONS,
     DEFAULT_GOOGLE_CLOUD_STORAGE_LOCATIONS,
 };

cvat-ui/src/icons.tsx

@@ -52,6 +52,7 @@ import SVGFilterIcon from './assets/object-filter-icon.svg';
 import SVGCVATAzureProvider from './assets/vscode-icons_file-type-azure.svg';
 import SVGCVATS3Provider from './assets/S3.svg';
 import SVGCVATGoogleCloudProvider from './assets/google-cloud.svg';
+import SVGOpenVINO from './assets/openvino.svg';
 
 export const CVATLogo = React.memo((): JSX.Element => <SVGCVATLogo />);
 export const EmptyTasksIcon = React.memo((): JSX.Element => <SVGEmptyTasksIcon />);
@@ -101,3 +102,4 @@ export const FilterIcon = React.memo((): JSX.Element => <SVGFilterIcon />);
 export const AzureProvider = React.memo((): JSX.Element => <SVGCVATAzureProvider />);
 export const S3Provider = React.memo((): JSX.Element => <SVGCVATS3Provider />);
 export const GoogleCloudProvider = React.memo((): JSX.Element => <SVGCVATGoogleCloudProvider />);
+export const OpenVINOIcon = React.memo((): JSX.Element => <SVGOpenVINO />);