Added test and docs for hide mask feature (cvat-ai#8633)

<!-- Raise an issue to propose your change
(https://github.com/cvat-ai/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://docs.cvat.ai/docs/contributing/).
-->

<!-- 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. -->
Test and docs for cvat-ai#8554

### How has this been tested?
<!-- 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
- ~~[ ] 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/cvat-ai/cvat/tree/develop/cvat-canvas#versioning),

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

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

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

### License

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


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **Tests**
- Introduced a new test case to verify the functionality of hiding and
showing masks through both button clicks and keyboard shortcuts.
- Enhanced the test suite with comprehensive checks for the hide mask
feature, ensuring expected behavior during UI interactions and editing.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Boris Sekachev <[email protected]>

Author: klakhov

site/content/en/docs/manual/advanced/annotation-with-brush-tool.md

@@ -42,6 +42,7 @@ It has the following elements:
 | ![Brush size](/images/brushing_tools_brush_size.png)            | **Brush size** in pixels. <br>**Note:** Visible only when **Brush** or **Eraser** are selected.                                                                                                          |
 | ![Brush shape](/images/brushing_tools_brush_shape.png)          | **Brush shape** with two options: circle and square. <br>**Note:** Visible only when **Brush** or **Eraser** are selected.                                                                               |
 | ![Pixel remove](/images/brushing_tools_pixels.png)              | **Remove underlying pixels**. When you are drawing or editing a mask with this tool, <br>pixels on other masks that are located at the same positions as the pixels of the <br>current mask are deleted. |
+| ![Hide mask](/images/brushing_tools_hide.png)              | **Hide mask**. When drawing or editing a mask, you can enable this feature to temporarily hide the mask, allowing you to see the objects underneath more clearly. |
 | ![Label](/images/brushing_tools_label_drop.png)                 | **Label** that will be assigned to the newly created mask                                                                                                                                                |     |
 | ![Move](/images/brushing_tools_brush_move.png)                  | **Move**. Click and hold to move the menu bar to the other place on the screen                                                                                                                           |
 

site/content/en/images/brushing_tool_menu.png

@@ -226,6 +226,59 @@ context('Manipulations with masks', { scrollBehavior: false }, () => {
             cy.get('body').type('n');
             cy.get('.cvat-brush-tools-toolbox').should('not.be.visible');
         });
+
+        it('Check hide mask feature', () => {
+            function checkHideFeature() {
+                cy.get('.cvat-brush-tools-hide').click();
+                cy.get('.cvat-brush-tools-hide').should('have.class', 'cvat-brush-tools-active-tool');
+                cy.get('.cvat_masks_canvas_wrapper').should('not.be.visible');
+                cy.get('.cvat-brush-tools-hide').click();
+                cy.get('.cvat_masks_canvas_wrapper').should('be.visible');
+            }
+
+            function checkHideShortcut() {
+                cy.get('body').type('h');
+                cy.get('.cvat-brush-tools-hide').should('have.class', 'cvat-brush-tools-active-tool');
+                cy.get('.cvat_masks_canvas_wrapper').should('not.be.visible');
+            }
+
+            function checkObjectIsHidden() {
+                cy.get('#cvat-objects-sidebar-state-item-1').within(() => {
+                    cy.get('.cvat-object-item-button-hidden-enabled').should('exist');
+                });
+            }
+
+            const mask = [{
+                method: 'brush',
+                coordinates: [[450, 250], [600, 400]],
+            }];
+            const drawPolygon = [{
+                method: 'polygon-plus',
+                coordinates: [[450, 210], [650, 400], [450, 600], [260, 400]],
+            }];
+            cy.startMaskDrawing();
+            cy.drawMask(mask);
+
+            checkHideFeature();
+            checkHideShortcut();
+
+            cy.finishMaskDrawing();
+            cy.get('#cvat_canvas_shape_1').should('be.visible');
+
+            cy.interactAnnotationObjectMenu('#cvat-objects-sidebar-state-item-1', 'Edit');
+            checkHideFeature();
+
+            cy.drawMask(drawPolygon);
+            checkHideShortcut();
+            cy.get('.cvat_canvas_shape_drawing')
+                .invoke('attr', 'fill-opacity')
+                .then((opacity) => expect(+opacity).to.be.equal(0));
+            checkObjectIsHidden();
+            cy.get('.cvat-brush-tools-brush').click();
+            cy.get('.cvat-brush-tools-brush').should('have.class', 'cvat-brush-tools-active-tool');
+            cy.finishMaskDrawing();
+            checkObjectIsHidden();
+        });
     });
 
     describe('Tests to make sure that empty masks cannot be created', () => {