Added track removing confirmation (#4846)

* Added track removing confirmation

* Updated version & changelog

* Adjusted styles

* Fixed styles

* Updated package.json

CHANGELOG.md

@@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Publishing dev version of CVAT docker images (<https://github.com/cvat-ai/cvat/pull/53>)
 - Support of Human Pose Estimation, Facial Landmarks (and similar) use-cases, new shape type: Skeleton (<https://github.com/cvat-ai/cvat/pull/1>)
 - Added helm chart support for serverless functions and analytics (<https://github.com/cvat-ai/cvat/pull/110>)
+- Added confirmation when remove a track (<https://github.com/opencv/cvat/pull/4846>)
 
 ### Changed
 - Bumped nuclio version to 1.8.14

cvat-ui/package.json

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

cvat-ui/src/components/annotation-page/standard-workspace/remove-confirm.tsx

@@ -1,18 +1,21 @@
 // Copyright (C) 2022 Intel Corporation
+// Copyright (C) CVAT.ai corp
 //
 // SPDX-License-Identifier: MIT
 
 import React, { useCallback, useEffect, useState } from 'react';
-
 import { useDispatch, useSelector } from 'react-redux';
-import { CombinedState } from 'reducers';
-
+import { CombinedState, ObjectType } from 'reducers';
+import Text from 'antd/lib/typography/Text';
 import Modal from 'antd/lib/modal';
+
+import consts from 'consts';
 import { removeObjectAsync, removeObject as removeObjectAction } from 'actions/annotation-actions';
 
 export default function RemoveConfirmComponent(): JSX.Element | null {
     const [visible, setVisible] = useState(false);
     const [title, setTitle] = useState('');
+    const [description, setDescription] = useState<JSX.Element>(<></>);
     const objectState = useSelector((state: CombinedState) => state.annotation.remove.objectState);
     const force = useSelector((state: CombinedState) => state.annotation.remove.force);
     const jobInstance = useSelector((state: CombinedState) => state.annotation.job.instance);
@@ -21,13 +24,37 @@ export default function RemoveConfirmComponent(): JSX.Element | null {
     const onOk = useCallback(() => {
         dispatch(removeObjectAsync(jobInstance, objectState, true));
     }, [jobInstance, objectState]);
+
     const onCancel = useCallback(() => {
         dispatch(removeObjectAction(null, false));
     }, []);
 
     useEffect(() => {
-        const newVisible = !!objectState && !force && objectState.lock;
+        const newVisible = (!!objectState && !force && objectState.lock) ||
+            (objectState?.objectType === ObjectType.TRACK && !force);
         setTitle(objectState?.lock ? 'Object is locked' : 'Remove object');
+        let descriptionMessage: string | JSX.Element = 'Are you sure you want to remove it?';
+
+        if (objectState?.objectType === ObjectType.TRACK && !force) {
+            descriptionMessage = (
+                <>
+                    <Text>
+                        {
+                            `The object you are trying to remove is a track.
+                            If you continue, it removes many drawn objects on different frames.
+                            If you want to hide it only on this frame, use the outside feature instead.
+                            ${descriptionMessage}`
+                        }
+                    </Text>
+                    <div className='cvat-remove-object-confirm-wrapper'>
+                        {/* eslint-disable-next-line */}
+                        <img src={consts.OUTSIDE_PIC_URL} />
+                    </div>
+                </>
+            );
+        }
+
+        setDescription(descriptionMessage);
         setVisible(newVisible);
         if (!newVisible && objectState) {
             dispatch(removeObjectAsync(jobInstance, objectState, true));
@@ -46,7 +73,7 @@ export default function RemoveConfirmComponent(): JSX.Element | null {
             className='cvat-modal-confirm'
         >
             <div>
-                Are you sure you want to remove it?
+                {description}
             </div>
         </Modal>
     );

cvat-ui/src/components/annotation-page/standard-workspace/styles.scss

@@ -328,3 +328,9 @@
         margin: 0 5px;
     }
 }
+
+.cvat-remove-object-confirm-wrapper {
+    display: flex;
+    justify-content: center;
+    margin-top: $grid-unit-size * 2;
+}

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 OUTSIDE_PIC_URL = 'https://opencv.github.io/cvat/images/image019.jpg';
 const DEFAULT_AWS_S3_REGIONS: string[][] = [
     ['us-east-1', 'US East (N. Virginia)'],
     ['us-east-2', 'US East (Ohio)'],
@@ -108,4 +109,5 @@ export default {
     INTEL_PRIVACY_URL,
     DEFAULT_AWS_S3_REGIONS,
     DEFAULT_GOOGLE_CLOUD_STORAGE_LOCATIONS,
+    OUTSIDE_PIC_URL,
 };