From 7d023c40088c51009879c6f5caea4728bc06e7cd Mon Sep 17 00:00:00 2001
From: Boris Sekachev <boris@cvat.ai>
Date: Thu, 18 Jul 2024 16:44:23 +0300
Subject: [PATCH] Fixed: cancel button is not visible when removing a
 label/attribute

---
 cvat-ui/src/components/labels-editor/label-form.tsx  |  9 ++++++---
 .../src/components/labels-editor/labels-editor.tsx   | 12 +++++-------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/cvat-ui/src/components/labels-editor/label-form.tsx b/cvat-ui/src/components/labels-editor/label-form.tsx
index ac2d807e4a3..dfe3ce8fc7d 100644
--- a/cvat-ui/src/components/labels-editor/label-form.tsx
+++ b/cvat-ui/src/components/labels-editor/label-form.tsx
@@ -5,7 +5,7 @@
 
 import React, { RefObject } from 'react';
 import { Row, Col } from 'antd/lib/grid';
-import Icon, { DeleteOutlined, PlusCircleOutlined } from '@ant-design/icons';
+import Icon, { DeleteOutlined, PlusCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
 import Input from 'antd/lib/input';
 import Button from 'antd/lib/button';
 import Checkbox from 'antd/lib/checkbox';
@@ -416,14 +416,17 @@ export default class LabelForm extends React.Component<Props> {
             <CVATTooltip title='Delete the attribute'>
                 <Form.Item>
                     <Button
-                        disabled={attr.id >= 0} // temporary disabled, does not work on the server
                         type='link'
                         className='cvat-delete-attribute-button'
                         onClick={(): void => {
                             if (attr.id >= 0) {
                                 Modal.confirm({
+                                    className: 'cvat-modal-delete-label-attribute',
+                                    icon: <ExclamationCircleOutlined />,
                                     title: `Do you want to remove the "${attr.name}" attribute?`,
-                                    content: 'This action is irreversible. It will remove corresponding annotations.',
+                                    content: 'This action is undone. All annotations associated to the attribute will be removed',
+                                    type: 'warning',
+                                    okButtonProps: { type: 'primary', danger: true },
                                     onOk: () => {
                                         this.removeAttribute(key);
                                         setTimeout(() => {
diff --git a/cvat-ui/src/components/labels-editor/labels-editor.tsx b/cvat-ui/src/components/labels-editor/labels-editor.tsx
index 93e3f891472..72f61195013 100644
--- a/cvat-ui/src/components/labels-editor/labels-editor.tsx
+++ b/cvat-ui/src/components/labels-editor/labels-editor.tsx
@@ -7,10 +7,8 @@ import './styles.scss';
 import React from 'react';
 import Tabs from 'antd/lib/tabs';
 import Text from 'antd/lib/typography/Text';
-import ModalConfirm from 'antd/lib/modal/confirm';
-import {
-    EditOutlined, BuildOutlined, ExclamationCircleOutlined,
-} from '@ant-design/icons';
+import modal from 'antd/lib/modal';
+import { EditOutlined, BuildOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
 
 import { SerializedLabel, SerializedAttribute } from 'cvat-core-wrapper';
 import RawViewer from './raw-viewer';
@@ -160,13 +158,13 @@ export default class LabelsEditor extends React.PureComponent<LabelsEditorProps,
         };
 
         if (typeof label.id !== 'undefined' && label.id >= 0) {
-            ModalConfirm({
+            modal.confirm({
                 className: 'cvat-modal-delete-label',
                 icon: <ExclamationCircleOutlined />,
                 title: `Do you want to delete "${label.name}" label?`,
-                content: 'This action is irreversible. Annotation corresponding with this label will be deleted.',
+                content: 'This action is undone. All annotations associated to the label will be deleted.',
                 type: 'warning',
-                okType: 'danger',
+                okButtonProps: { type: 'primary', danger: true },
                 onOk() {
                     deleteLabel();
                 },