[GSoC2024] Added Validations, testcases to Labels Constructor (#7627)

<!-- Raise an issue to propose your change
(https://github.com/opencv/cvat/issues).
It helps to avoid duplication of efforts from multiple independent
contributors.
Discuss your ideas with maintainers to be sure that changes will be
approved and merged.
Read the [Contribution
guide](https://opencv.github.io/cvat/docs/contributing/). -->

1. Added new Label Validation to handle empty label name given to
constructor.
2. Fixed existing validation for Duplicate label name to make it more
clear.
3. Added tests for both.

<!-- Provide a general summary of your changes in the Title above -->

### Motivation and context
<!-- Why is this change required? What problem does it solve? If it
fixes an open
issue, please link to the issue here. Describe your changes in detail,
add
screenshots. -->
#### Background
- Mentioned as an`ui-ux` `enhancement` issue in #5729, Two problems were
raised:
1. Hint when user tries to add existing label in project is incorrect as
the same code validation is triggered in both project and task.
2. When user enters an empty label name, It is not intuitively clear
that the state of the constructor is reset and skeleton is not added.

#### Fix
1. Tests were written for the desired outcome.
2. Fixed the Unique Label Validation by changing the display message to
a generalized one.
<img width="1511" alt="Screenshot 2024-03-18 at 1 20 47 AM"
src="https://github.com/opencv/cvat/assets/89384052/4d29dee0-2859-4219-bdd4-70eb6f42b36d">
<img width="1511" alt="Screenshot 2024-03-18 at 1 21 03 AM"
src="https://github.com/opencv/cvat/assets/89384052/6dcdee8c-015d-4558-be77-9db52ae09906">

4. Added a new Empty Label Validation which stops the form from
submitting when label name is empty and displays an error message.
   

<img width="1511" alt="Screenshot 2024-03-18 at 1 21 20 AM"
src="https://github.com/opencv/cvat/assets/89384052/9848dde8-f178-412b-ac6c-24ad42c95576">

### How has this been tested?
- The issue was first triggered locally.
- Test cases were written using Cypress, Here are the screenshots of the
same.

<img width="1511" alt="Screenshot 2024-03-18 at 1 22 29 AM"
src="https://github.com/opencv/cvat/assets/89384052/2fdc7c5a-e200-461d-b3cb-6cb2a5f8216c">

<img width="1511" alt="Screenshot 2024-03-18 at 1 23 51 AM"
src="https://github.com/opencv/cvat/assets/89384052/1eb9c6d1-81f6-4a5e-88b5-62acdf654b41">

<!-- Please describe in detail how you tested your changes.
Include details of your testing environment, and the tests you ran to
see how your change affects other areas of the code, etc. -->

### Checklist
<!-- Go over all the following points, and put an `x` in all the boxes
that apply.
If an item isn't applicable for some reason, then ~~explicitly
strikethrough~~ the whole
line. If you don't do that, GitHub will show incorrect progress for the
pull request.
If you're unsure about any of these, don't hesitate to ask. We're here
to help! -->
- [x] I submit my changes into the `develop` branch
- [x] I have created a changelog fragment <!-- see top comment in
CHANGELOG.md -->
- [ ] I have updated the documentation accordingly
- [x] I have added tests to cover my changes
- [x] I have linked related issues (see [GitHub docs](

https://help.github.com/en/github/managing-your-work-on-github/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword))
- [x] I have increased versions of npm packages if it is necessary

([cvat-canvas](https://github.com/opencv/cvat/tree/develop/cvat-canvas#versioning),

[cvat-core](https://github.com/opencv/cvat/tree/develop/cvat-core#versioning),

[cvat-data](https://github.com/opencv/cvat/tree/develop/cvat-data#versioning)
and

[cvat-ui](https://github.com/opencv/cvat/tree/develop/cvat-ui#versioning))

### License

- [x] I submit _my code changes_ under the same [MIT License](
https://github.com/opencv/cvat/blob/develop/LICENSE) that covers the
project.
  Feel free to contact the maintainers if that's a concern.

---------

Co-authored-by: Kirill Lakhov <[email protected]>

changelog.d/20240318_195644_mann.compi_labels_constructor_issue_5729.md

@@ -0,0 +1,4 @@
+### Fixed
+
+- Label constructor validation of empty label names
+  (<https://github.com/opencv/cvat/pull/7627>)

cvat-ui/src/components/labels-editor/label-form.tsx

@@ -493,7 +493,7 @@ export default class LabelForm extends React.Component<Props> {
                 name='name'
                 rules={[
                     {
-                        required: !!label,
+                        required: true,
                         message: 'Please specify a name',
                     },
                     {
@@ -503,7 +503,7 @@ export default class LabelForm extends React.Component<Props> {
                     {
                         validator: (_rule: any, labelName: string) => {
                             if (labelNames.includes(labelName) && label?.name !== labelName) {
-                                return Promise.reject(new Error('Label name must be unique for the task'));
+                                return Promise.reject(new Error('Label name must be unique'));
                             }
                             return Promise.resolve();
                         },

tests/cypress/e2e/actions_tasks2/case_118_create_label_with_empty_label_name.js

@@ -0,0 +1,27 @@
+// Copyright (C) 2024 CVAT.ai Corporation
+//
+// SPDX-License-Identifier: MIT
+
+/// <reference types="cypress" />
+
+import { taskName } from '../../support/const';
+
+context('Creating a label with an empty name.', () => {
+    const caseId = '118';
+
+    before(() => {
+        cy.openTask(taskName);
+    });
+
+    describe(`Testing case "${caseId}"`, () => {
+        it('Should display an error message if label name is empty', () => {
+            // Attempt to create a label with an empty name
+            cy.get('.cvat-constructor-viewer-new-item').click();
+            cy.get('button[type="submit"]').click();
+
+            cy.contains('[role="alert"]', 'Please specify a name')
+                .should('exist')
+                .and('be.visible');
+        });
+    });
+});

tests/cypress/e2e/actions_tasks2/case_42_change_label_name_via_label_constructor.js

@@ -21,8 +21,8 @@ context('Changing a label name via label constructor.', () => {
         it('Set empty label name. Press "Continue" button. Label name is not created. Label constructor is closed.', () => {
             cy.get('.cvat-constructor-viewer-new-item').click(); // Open label constructor
             cy.contains('[type="submit"]', 'Continue').click();
-            cy.get('.cvat-label-constructor-creator').should('not.exist');
-            cy.get('.cvat-constructor-viewer').should('be.visible');
+            cy.contains('[role="alert"]', 'Please specify a name').should('exist').and('be.visible');
+            cy.contains('[type="button"]', 'Cancel').click(); // Close label constructor
         });
 
         it('Change label name to any other correct value. Press "Continue" button. The label created.', () => {

tests/cypress/e2e/actions_tasks2/case_43_create_label_with_existing_label_name.js

@@ -24,7 +24,7 @@ context('Creating a label with existing label name.', () => {
                     // Try to create a label with existing label name
                     cy.get('.cvat-constructor-viewer-new-item').click();
                     cy.get('[placeholder="Label name"]').type(firstLabelName);
-                    cy.contains('[role="alert"]', 'Label name must be unique for the task') // Checking alert visibility
+                    cy.contains('[role="alert"]', 'Label name must be unique') // Checking alert visibility
                         .should('exist')
                         .and('be.visible');
                 });

tests/cypress/support/commands.js

@@ -1022,8 +1022,7 @@ Cypress.Commands.add('addNewSkeletonLabel', ({ name, points }) => {
 
         cy.contains('Continue').scrollIntoView();
         cy.contains('Continue').click();
-        cy.contains('Continue').scrollIntoView();
-        cy.contains('Continue').click();
+        cy.contains('Cancel').click();
     });
 });