Fixed: cancel button is not visible when removing a label/attribute (#…

…8196)
cvat-ai · Jul 18, 2024 · 6fea78c · 6fea78c
1 parent 511a2d9
commit 6fea78c
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 9 deletions.
diff --git a/changelog.d/20240718_164741_boris_fixed_delete_label_button.md 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
@@ -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
@@ -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();
                 },