React UI: Added message when share is empty or not mounted (#1373)

* Added message when share is empty or not mounted

* Updated changelog

* Update CHANGELOG.md

Co-authored-by: Nikita Manovich <40690625+nmanovic@users.noreply.github.com>

CHANGELOG.md

@@ -10,7 +10,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Dialog window with some helpful information about using filters
 - Ability to display a bitmap in the new UI
 - Button to reset colors settings (brightness, saturation, contrast) in the new UI
-- Added option to display shape text always
+- Option to display shape text always
+- Dedicated message with clarifications when share is unmounted (https://github.com/opencv/cvat/pull/1373)
 
 ### Changed
 - Increase preview size of a task till 256, 256 on the server

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

@@ -3,20 +3,16 @@
 // SPDX-License-Identifier: MIT
 
 import React from 'react';
-
-import {
-    Row,
-    Col,
-    Icon,
-    Alert,
-    Button,
-    Tooltip,
-    message,
-    notification,
-} from 'antd';
-
+import { Row, Col } from 'antd/lib/grid';
+import Icon from 'antd/lib/icon';
+import Alert from 'antd/lib/alert';
+import Button from 'antd/lib/button';
+import Tooltip from 'antd/lib/tooltip';
+import message from 'antd/lib/message';
+import notification from 'antd/lib/notification';
 import Text from 'antd/lib/typography/Text';
 
+import consts from 'consts';
 import ConnectedFileManager, {
     FileManagerContainer,
 } from 'containers/file-manager/file-manager';
@@ -107,7 +103,7 @@ export default class CreateModelContent extends React.PureComponent<Props> {
         const status = modelCreatingStatus
             && modelCreatingStatus !== 'CREATED' ? modelCreatingStatus : '';
 
-        const guideLink = 'https://github.com/opencv/cvat/blob/develop/cvat/apps/auto_annotation/README.md';
+        const { AUTO_ANNOTATION_GUIDE_URL } = consts;
         return (
             <Row type='flex' justify='start' align='middle' className='cvat-create-model-content'>
                 <Col span={24}>
@@ -116,7 +112,7 @@ export default class CreateModelContent extends React.PureComponent<Props> {
                             onClick={(): void => {
                                 // false positive
                                 // eslint-disable-next-line
-                                window.open(guideLink, '_blank');
+                                window.open(AUTO_ANNOTATION_GUIDE_URL, '_blank');
                             }}
                             type='question-circle'
                         />

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

@@ -4,13 +4,10 @@
 
 import './styles.scss';
 import React from 'react';
-
-import {
-    Button,
-    Icon,
-    Popover,
-} from 'antd';
-
+import Button from 'antd/lib/button';
+import Icon from 'antd/lib/icon';
+import Popover from 'antd/lib/popover';
+import Text from 'antd/lib/typography/Text';
 import {
     FacebookShareButton,
     LinkedinShareButton,
@@ -30,59 +27,59 @@ import {
     LinkedinIcon,
 } from 'react-share';
 
-import Text from 'antd/lib/typography/Text';
+import consts from 'consts';
 
 function renderContent(): JSX.Element {
-    const githubURL = 'https://github.com/opencv/cvat';
-    const githubImage = 'https://raw.githubusercontent.com/opencv/'
-        + 'cvat/develop/cvat/apps/documentation/static/documentation/images/cvat.jpg';
-    const questionsURL = 'https://gitter.im/opencv-cvat/public';
-    const feedbackURL = 'https://gitter.im/opencv-cvat/public';
+    const {
+        GITHUB_URL,
+        GITHUB_IMAGE_URL,
+        GITTER_PUBLIC_URL,
+    } = consts;
 
     return (
         <>
             <Icon type='star' />
             <Text style={{ marginLeft: '10px' }}>
                 Star us on
-                <a target='_blank' rel='noopener noreferrer' href={githubURL}> GitHub</a>
+                <a target='_blank' rel='noopener noreferrer' href={GITHUB_URL}> GitHub</a>
             </Text>
             <br />
             <Icon type='like' />
             <Text style={{ marginLeft: '10px' }}>
                 Leave a
-                <a target='_blank' rel='noopener noreferrer' href={feedbackURL}> feedback</a>
+                <a target='_blank' rel='noopener noreferrer' href={GITTER_PUBLIC_URL}> feedback</a>
             </Text>
             <hr />
             <div style={{ display: 'flex' }}>
-                <FacebookShareButton url={githubURL} quote='Computer Vision Annotation Tool'>
+                <FacebookShareButton url={GITHUB_URL} quote='Computer Vision Annotation Tool'>
                     <FacebookIcon size={32} round />
                 </FacebookShareButton>
-                <VKShareButton url={githubURL} title='Computer Vision Annotation Tool' image={githubImage} description='CVAT'>
+                <VKShareButton url={GITHUB_URL} title='Computer Vision Annotation Tool' image={GITHUB_IMAGE_URL} description='CVAT'>
                     <VKIcon size={32} round />
                 </VKShareButton>
-                <TwitterShareButton url={githubURL} title='Computer Vision Annotation Tool' hashtags={['CVAT']}>
+                <TwitterShareButton url={GITHUB_URL} title='Computer Vision Annotation Tool' hashtags={['CVAT']}>
                     <TwitterIcon size={32} round />
                 </TwitterShareButton>
-                <RedditShareButton url={githubURL} title='Computer Vision Annotation Tool'>
+                <RedditShareButton url={GITHUB_URL} title='Computer Vision Annotation Tool'>
                     <RedditIcon size={32} round />
                 </RedditShareButton>
-                <LinkedinShareButton url={githubURL}>
+                <LinkedinShareButton url={GITHUB_URL}>
                     <LinkedinIcon size={32} round />
                 </LinkedinShareButton>
-                <TelegramShareButton url={githubURL} title='Computer Vision Annotation Tool'>
+                <TelegramShareButton url={GITHUB_URL} title='Computer Vision Annotation Tool'>
                     <TelegramIcon size={32} round />
                 </TelegramShareButton>
-                <WhatsappShareButton url={githubURL} title='Computer Vision Annotation Tool'>
+                <WhatsappShareButton url={GITHUB_URL} title='Computer Vision Annotation Tool'>
                     <WhatsappIcon size={32} round />
                 </WhatsappShareButton>
-                <ViberShareButton url={githubURL} title='Computer Vision Annotation Tool'>
+                <ViberShareButton url={GITHUB_URL} title='Computer Vision Annotation Tool'>
                     <ViberIcon size={32} round />
                 </ViberShareButton>
             </div>
             <hr />
             <Text style={{ marginTop: '50px' }}>
                 Do you need help? Contact us on
-                <a target='_blank' rel='noopener noreferrer' href={questionsURL}> gitter</a>
+                <a target='_blank' rel='noopener noreferrer' href={GITTER_PUBLIC_URL}> gitter</a>
             </Text>
         </>
     );

cvat-ui/src/components/file-manager/file-manager.tsx

@@ -4,17 +4,16 @@
 
 import './styles.scss';
 import React from 'react';
-
-import {
-    Tabs,
-    Icon,
-    Input,
-    Upload,
-} from 'antd';
-
-import Tree, { AntTreeNode, TreeNodeNormal } from 'antd/lib/tree/Tree';
-import { RcFile } from 'antd/lib/upload';
+import Tabs from 'antd/lib/tabs';
+import Icon from 'antd/lib/icon';
+import Input from 'antd/lib/input';
 import Text from 'antd/lib/typography/Text';
+import Paragraph from 'antd/lib/typography/Paragraph';
+import Upload, { RcFile } from 'antd/lib/upload';
+import Empty from 'antd/lib/empty';
+import Tree, { AntTreeNode, TreeNodeNormal } from 'antd/lib/tree/Tree';
+
+import consts from 'consts';
 
 export interface Files {
     local: File[];
@@ -148,6 +147,7 @@ export default class FileManager extends React.PureComponent<Props, State> {
             });
         }
 
+        const { SHARE_MOUNT_GUIDE_URL } = consts;
         const { treeData } = this.props;
         const {
             expandedKeys,
@@ -156,7 +156,7 @@ export default class FileManager extends React.PureComponent<Props, State> {
 
         return (
             <Tabs.TabPane key='share' tab='Connected file share'>
-                { treeData.length
+                { treeData[0].children && treeData[0].children.length
                     ? (
                         <Tree
                             className='cvat-share-tree'
@@ -190,7 +190,18 @@ export default class FileManager extends React.PureComponent<Props, State> {
                         >
                             { renderTreeNodes(treeData) }
                         </Tree>
-                    ) : <Text className='cvat-text-color'>No data found</Text>}
+                    ) : (
+                        <div className='cvat-empty-share-tree'>
+                            <Empty />
+                            <Paragraph className='cvat-text-color'>
+                                Please, be sure you had
+                                <Text strong>
+                                    <a href={SHARE_MOUNT_GUIDE_URL}> mounted </a>
+                                </Text>
+                                share before you built CVAT and the shared storage contains files
+                            </Paragraph>
+                        </div>
+                    )}
             </Tabs.TabPane>
         );
     }

cvat-ui/src/components/file-manager/styles.scss

@@ -10,3 +10,9 @@
     max-height: 20em;
     overflow: auto;
 }
+
+.cvat-empty-share-tree {
+    > .ant-typography {
+        margin-top: 10px;
+    }
+}

cvat-ui/src/components/global-error-boundary/global-error-boundary.tsx

@@ -19,6 +19,7 @@ import ErrorStackParser from 'error-stack-parser';
 import { resetAfterErrorAsync } from 'actions/boundaries-actions';
 import { CombinedState } from 'reducers/interfaces';
 import logger, { LogType } from 'cvat-logger';
+import consts from 'consts';
 
 interface StateToProps {
     job: any | null;
@@ -161,7 +162,7 @@ class GlobalErrorBoundary extends React.PureComponent<Props, State> {
                                 </li>
                                 <li>
                                     Notify an administrator or submit the issue directly on
-                                    <a href='https://github.com/opencv/cvat'> GitHub. </a>
+                                    <a href={consts.GITHUB_URL}> GitHub. </a>
                                     Please, provide also:
                                     <ul>
                                         <li>Steps to reproduce the issue</li>

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

@@ -16,6 +16,7 @@ import Modal from 'antd/lib/modal';
 import Text from 'antd/lib/typography/Text';
 
 import { CVATLogo, AccountIcon } from 'icons';
+import consts from 'consts';
 
 interface HeaderContainerProps {
     onLogout: () => void;
@@ -60,12 +61,15 @@ function HeaderContainer(props: Props): JSX.Element {
         || installedTFAnnotation
         || installedTFSegmentation;
 
-    function aboutModal(): void {
-        const CHANGELOG = 'https://github.com/opencv/cvat/blob/develop/CHANGELOG.md';
-        const LICENSE = 'https://github.com/opencv/cvat/blob/develop/LICENSE';
-        const GITTER = 'https://gitter.im/opencv-cvat';
-        const FORUM = 'https://software.intel.com/en-us/forums/intel-distribution-of-openvino-toolkit';
+    const {
+        CHANGELOG_URL,
+        LICENSE_URL,
+        GITTER_URL,
+        FORUM_URL,
+        GITHUB_URL,
+    } = consts;
 
+    function aboutModal(): void {
         Modal.info({
             title: `${toolName}`,
             content: (
@@ -106,10 +110,10 @@ function HeaderContainer(props: Props): JSX.Element {
                         </Text>
                     </p>
                     <Row type='flex' justify='space-around'>
-                        <Col><a href={CHANGELOG} target='_blank' rel='noopener noreferrer'>{'What\'s new?'}</a></Col>
-                        <Col><a href={LICENSE} target='_blank' rel='noopener noreferrer'>License</a></Col>
-                        <Col><a href={GITTER} target='_blank' rel='noopener noreferrer'>Need help?</a></Col>
-                        <Col><a href={FORUM} target='_blank' rel='noopener noreferrer'>Forum on Intel Developer Zone</a></Col>
+                        <Col><a href={CHANGELOG_URL} target='_blank' rel='noopener noreferrer'>{'What\'s new?'}</a></Col>
+                        <Col><a href={LICENSE_URL} target='_blank' rel='noopener noreferrer'>License</a></Col>
+                        <Col><a href={GITTER_URL} target='_blank' rel='noopener noreferrer'>Need help?</a></Col>
+                        <Col><a href={FORUM_URL} target='_blank' rel='noopener noreferrer'>Forum on Intel Developer Zone</a></Col>
                     </Row>
                 </div>
             ),
@@ -199,7 +203,9 @@ function HeaderContainer(props: Props): JSX.Element {
                     type='link'
                     onClick={
                         (): void => {
-                            window.open('https://github.com/opencv/cvat', '_blank');
+                            // false positive
+                            // eslint-disable-next-line security/detect-non-literal-fs-filename
+                            window.open(GITHUB_URL, '_blank');
                         }
                     }
                 >

cvat-ui/src/consts.ts

@@ -4,8 +4,26 @@
 
 const UNDEFINED_ATTRIBUTE_VALUE = '__undefined__';
 const NO_BREAK_SPACE = '\u00a0';
+const CHANGELOG_URL = 'https://github.com/opencv/cvat/blob/develop/CHANGELOG.md';
+const LICENSE_URL = 'https://github.com/opencv/cvat/blob/develop/LICENSE';
+const GITTER_URL = 'https://gitter.im/opencv-cvat';
+const GITTER_PUBLIC_URL = 'https://gitter.im/opencv-cvat/public';
+const FORUM_URL = 'https://software.intel.com/en-us/forums/intel-distribution-of-openvino-toolkit';
+const GITHUB_URL = 'https://github.com/opencv/cvat';
+const GITHUB_IMAGE_URL = 'https://raw.githubusercontent.com/opencv/cvat/develop/cvat/apps/documentation/static/documentation/images/cvat.jpg';
+const AUTO_ANNOTATION_GUIDE_URL = 'https://github.com/opencv/cvat/blob/develop/cvat/apps/auto_annotation/README.md';
+const SHARE_MOUNT_GUIDE_URL = 'https://github.com/opencv/cvat/blob/master/cvat/apps/documentation/installation.md#share-path';
 
 export default {
     UNDEFINED_ATTRIBUTE_VALUE,
     NO_BREAK_SPACE,
+    CHANGELOG_URL,
+    LICENSE_URL,
+    GITTER_URL,
+    GITTER_PUBLIC_URL,
+    FORUM_URL,
+    GITHUB_URL,
+    GITHUB_IMAGE_URL,
+    AUTO_ANNOTATION_GUIDE_URL,
+    SHARE_MOUNT_GUIDE_URL,
 };