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>
cvat-ai · Dec 25, 2021 · b7a50ac · b7a50ac
1 parent 7bdac66
commit b7a50ac
Show file tree

Hide file tree

Showing 17 changed files with 86 additions and 26 deletions.
diff --git a/CHANGELOG.md b/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>)

diff --git a/cvat-ui/package-lock.json b/cvat-ui/package-lock.json
diff --git a/cvat-ui/package.json b/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": {

diff --git a/cvat-ui/src/assets/openvino.svg b/cvat-ui/src/assets/openvino.svg
diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/context-image/context-image.tsx b/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';

diff --git a/cvat-ui/src/components/annotation-page/top-bar/filters-modal.tsx b/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 =>
-        QbUtils.queryString(state.tree, config)?.trim().length > 0 && QbUtils.isValidTree(state.tree);
+    const isModalConfirmable = (): boolean => (
+        (QbUtils.queryString(state.tree, config) || '').trim().length > 0 && QbUtils.isValidTree(state.tree)
+    );
 
     const renderBuilder = (builderProps: any): JSX.Element => (
         <div className='query-builder-container'>

diff --git a/cvat-ui/src/components/create-cloud-storage-page/cloud-storage-form.tsx b/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';

diff --git a/cvat-ui/src/components/create-project-page/create-project-content.tsx b/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';

diff --git a/cvat-ui/src/components/header/header.tsx b/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();

diff --git a/cvat-ui/src/components/login-page/intel-footer-drawer.tsx b/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';

diff --git a/cvat-ui/src/components/login-page/login-page.tsx b/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 },
-        sm: { span: 14 },
-        md: { span: 10 },
-        lg: { span: 4 },
-        xl: { span: 4 },
+        style: {
+            width: 400,
+        },
     };
 
     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>

diff --git a/cvat-ui/src/components/login-page/styles.scss b/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;
+        }
+    }
+}
diff --git a/cvat-ui/src/components/register-page/register-page.tsx b/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 },
-        sm: { span: 14 },
-        md: { span: 10 },
-        lg: { span: 6 },
-        xl: { span: 5 },
+        style: {
+            width: 400,
+        },
     };
 
     const { fetching, userAgreements, onRegister } = props;

diff --git a/cvat-ui/src/components/reset-password-confirm-page/reset-password-confirm-page.tsx b/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';

diff --git a/cvat-ui/src/components/reset-password-page/reset-password-page.tsx b/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';

diff --git a/cvat-ui/src/consts.ts b/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,
 };
diff --git a/cvat-ui/src/icons.tsx b/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 />);