fix: user management people report tab opening bug

Author: Venkataramanan Venkateswaran

src/components/UserManagement/UserTableData.jsx

@@ -181,41 +181,50 @@ const UserTableData = React.memo(props => {
           ''
         )}
         <span style={{ position: 'absolute', top: 0, right: 0 }}>
-          <button
-            type="button"
+          <a
+            href={`/peoplereport/${props.user._id}`}
+            id={`report-icon-${props.user._id}`}
             className="team-member-tasks-user-report-link"
+            target="_blank"
+            rel="noopener noreferrer"
             style={{
               fontSize: 18,
               opacity: canSeeReports ? 1 : 0.7,
               background: 'none',
               border: 'none',
               padding: 0,
+              display: 'inline-block',
+              cursor: canSeeReports ? 'pointer' : 'not-allowed',
             }}
             onClick={(event) => {
               if (!canSeeReports) {
                 event.preventDefault();
                 return;
               }
 
-              if (event.metaKey || event.ctrlKey || event.button === 1) {
-                window.open(`/peoplereport/${props.user._id}`, '_blank');
-                return;
+              const isModified = event.metaKey || event.ctrlKey || event.button === 1;
+              if (!isModified) {
+                event.preventDefault();
+                history.push(`/peoplereport/${props.user._id}`);
               }
-
-              event.preventDefault(); // prevent full reload
-              history.push(`/peoplereport/${props.user._id}`);
             }}
           >
             <img
               src="/report_icon.png"
               alt="reportsicon"
               className="team-member-tasks-user-report-link-image"
-              id={`report-icon-${props.user._id}`}
-              style={{
-                cursor: canSeeReports ? 'pointer' : 'not-allowed', // Change cursor style to indicate the disabled state
-              }}
             />
-          </button>
+          </a>
+          {!canSeeReports && (
+            <Tooltip
+              placement="bottom"
+              isOpen={tooltipReportsOpen}
+              target={`report-icon-${props.user._id}`}
+              toggle={toggleReportsTooltip}
+            >
+              You don&apos;t have permission to view user reports
+            </Tooltip>
+          )}
         </span>
 
         <span style={{ position: 'absolute', bottom: 0, right: 0 }}>