Add "id" to sidebar issue item. Update Cypress test. (#2784)

* Add id to sidebar issue item.

* Test adaptation

* Some fix

* Apply comments.

cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/issues-list.tsx

@@ -1,4 +1,4 @@
-// Copyright (C) 2020 Intel Corporation
+// Copyright (C) 2020-2021 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -84,6 +84,7 @@ export default function LabelsListComponent(): JSX.Element {
                 {frameIssues.map(
                     (frameIssue: any): JSX.Element => (
                         <div
+                            id={`cvat-objects-sidebar-issue-item-${frameIssue.id}`}
                             className='cvat-objects-sidebar-issue-item'
                             onMouseEnter={() => {
                                 const element = window.document.getElementById(

tests/cypress/integration/actions_users/registration_involved/case_28_review_pipeline_feature.js

@@ -351,25 +351,15 @@ context('Review pipeline feature', () => {
         });
 
         it('Select an issue on sidebar. Issue indication has changed the color for highlighted issue', () => {
-            let index = 0;
             cy.collectIssueRegionId().then(($issueRegionList) => {
-                cy.get('.cvat-objects-sidebar-issue-item').then((sidebarIssueItems) => {
-                    for (let i = 0; i < sidebarIssueItems.length; i++) {
-                        cy.get(sidebarIssueItems[i]).trigger('mousemove').trigger('mouseover');
-                        cy.get(`#cvat_canvas_issue_region_${$issueRegionList[index]}`).should(
-                            'have.attr',
-                            'fill',
-                            'url(#cvat_issue_region_pattern_2)',
-                        );
-                        cy.get(sidebarIssueItems[i]).trigger('mouseout');
-                        cy.get(`#cvat_canvas_issue_region_${$issueRegionList[index]}`).should(
-                            'have.attr',
-                            'fill',
-                            'url(#cvat_issue_region_pattern_1)',
-                        );
-                        index++;
-                    }
-                });
+                for (const issueRegionID of $issueRegionList) {
+                    const objectsSidebarIssueItem = `#cvat-objects-sidebar-issue-item-${issueRegionID}`;
+                    const canvasIssueRegion = `#cvat_canvas_issue_region_${issueRegionID}`;
+                    cy.get(objectsSidebarIssueItem).trigger('mousemove').trigger('mouseover');
+                    cy.get(canvasIssueRegion).should('have.attr', 'fill', 'url(#cvat_issue_region_pattern_2)');
+                    cy.get(objectsSidebarIssueItem).trigger('mouseout');
+                    cy.get(canvasIssueRegion).should('have.attr', 'fill', 'url(#cvat_issue_region_pattern_1)');
+                }
             });
         });
 

tests/cypress/support/commands_review_pipeline.js

@@ -75,21 +75,17 @@ Cypress.Commands.add('collectIssueRegionId', () => {
     cy.document().then((doc) => {
         const issueRegionList = Array.from(doc.querySelectorAll('.cvat_canvas_issue_region'));
         for (let i = 0; i < issueRegionList.length; i++) {
-            issueRegionIdList.push(Number(issueRegionList[i].id.match(/\d+$/)));
+            issueRegionIdList.push(Number(issueRegionList[i].id.match(/\-?\d+$/)));
         }
         return issueRegionIdList;
     });
 });
 
-Cypress.Commands.add('checkIssueRegion', (afterSave = false) => {
+Cypress.Commands.add('checkIssueRegion', () => {
     const sccSelectorIssueRegionId = '#cvat_canvas_issue_region_';
     cy.collectIssueRegionId().then((issueRegionIdList) => {
         const maxId = Math.max(...issueRegionIdList);
-        if (!afterSave) {
-            cy.get(`${sccSelectorIssueRegionId}-${maxId}`).trigger('mousemove').should('exist').and('be.visible');
-        } else {
-            cy.get(`${sccSelectorIssueRegionId}${maxId}`).trigger('mousemove').should('exist').and('be.visible');
-        }
+        cy.get(`${sccSelectorIssueRegionId}${maxId}`).trigger('mousemove').should('exist').and('be.visible');
     });
 });