From 6fea78cd7096d259091130080db3c4faf8d052e1 Mon Sep 17 00:00:00 2001
From: Boris Sekachev <boris.sekachev@yandex.ru>
Date: Thu, 18 Jul 2024 19:19:15 +0300
Subject: [PATCH] Fixed: cancel button is not visible when removing a
 label/attribute (#8196)

---
 ...0240718_164741_boris_fixed_delete_label_button.md |  4 ++++
 cvat-ui/src/components/labels-editor/label-form.tsx  |  8 ++++++--
 .../src/components/labels-editor/labels-editor.tsx   | 12 +++++-------
 3 files changed, 15 insertions(+), 9 deletions(-)
 create mode 100644 changelog.d/20240718_164741_boris_fixed_delete_label_button.md

diff --git a/changelog.d/20240718_164741_boris_fixed_delete_label_button.md b/changelog.d/20240718_164741_boris_fixed_delete_label_button.md
new file mode 100644
index 000000000000..a44038ee439e
--- /dev/null
+++ b/changelog.d/20240718_164741_boris_fixed_delete_label_button.md
@@ -0,0 +1,4 @@
+### Fixed
+
+- Delete label modal window does not have cancellation button
+  (<https://github.com/cvat-ai/cvat/pull/8196>)
diff --git a/cvat-ui/src/components/labels-editor/label-form.tsx b/cvat-ui/src/components/labels-editor/label-form.tsx
index ac2d807e4a34..981e68773b5b 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';
@@ -422,8 +422,12 @@ export default class LabelForm extends React.Component<Props> {
                         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 93e3f8914728..72f61195013b 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();
                 },