Highlight report in dashboard when mouse hovers it in the report list

CHANGELOG.md

@@ -30,6 +30,9 @@ Several pages already work without any AngularJS code:
 
 - After a successful login, redirect the user to where it was before being
   redirected to the login page
+- When the mouse hovers a report in the dashboard sidebar, the corresponding
+  report in the dashboard view is highlighted to help locate where a report
+  is used.
 
 ### Fixed
 

public/css/main.css

@@ -3232,3 +3232,7 @@ a.list-group-item:hover {
 .label-lg {
     font-size: 1em;
 }
+
+[report-view].hovered {
+    outline: auto;
+}

public/js/ng/dashboard-edit/dashboard-edit.component.js

@@ -21,6 +21,8 @@
         vm.onFilterPromptDragStart = onFilterPromptDragStart;
         vm.onLayoutDragStart = onLayoutDragStart;
         vm.onReportDragStart = onReportDragStart;
+        vm.onReportMouseEnter = onReportMouseEnter;
+        vm.onReportMouseLeave = onReportMouseLeave;
 
         $scope.reportModal = 'partials/report-edit/report-edit.component.html';
         $scope.settingsTemplate = 'partials/widgets/inspector.html';
@@ -553,5 +555,17 @@
                 repaintReports();
             }
         }
+
+        function onReportMouseEnter (ev) {
+            document.querySelectorAll('#REPORT_CONTAINER_' + ev.currentTarget.id).forEach(n => {
+                n.classList.add('hovered');
+            });
+        }
+
+        function onReportMouseLeave (ev) {
+            document.querySelectorAll('#REPORT_CONTAINER_' + ev.currentTarget.id).forEach(n => {
+                n.classList.remove('hovered');
+            });
+        }
     }
 })();

public/partials/dashboard-edit/dashboard-edit.component.html

@@ -91,7 +91,7 @@ <h3 app-editable-text="selectedDashboard.dashboardName">{{ selectedDashboard.das
             <button class="btn btn-info btn-sm" ng-click="newReport()" translate>New Report</button>
             <button class="btn btn-info btn-sm" ng-click="importReport()" translate>Import Report</button>
 
-            <div ng-repeat="item in selectedDashboard.reports" draggable="true" app-dragstart="vm.onReportDragStart($event, item)" style="margin-bottom: 5px; margin-top: 5px; display: flex; align-items: center; border: 1px white solid; border-radius: 5px;" id="{{item.id}}">
+            <div ng-repeat="item in selectedDashboard.reports" draggable="true" app-dragstart="vm.onReportDragStart($event, item)" style="margin-bottom: 5px; margin-top: 5px; display: flex; align-items: center; border: 1px white solid; border-radius: 5px;" id="{{item.id}}" ng-mouseenter="vm.onReportMouseEnter($event)" ng-mouseleave="vm.onReportMouseLeave($event)">
                 <span style="padding: 2px; border-right: 2px white solid; margin-right: 5px; background-color: white;">
                     <img draggable="false" ng-if="item.reportType == 'grid'" src="images/grid.png" data-pin-nopin="true">
                     <img draggable="false" ng-if="item.reportType == 'chart-line'" src="images/chart_line.png" data-pin-nopin="true">