Merge pull request openedx#431 from openedx/kiram15/ENT-9551

feat: adding link to user page to icon

src/Configuration/Customers/CustomerDetailView/EnterpriseCustomerUserDetail.jsx

@@ -1,33 +1,58 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-  Icon, IconButton, Stack, Chip,
+  Hyperlink, Icon, IconButton, Stack, Chip,
 } from '@openedx/paragon';
 import { Person, Check, Timelapse } from '@openedx/paragon/icons';
+import ROUTES from '../../../data/constants/routes';
 
 export const EnterpriseCustomerUserDetail = ({
   row,
 }) => {
+  const user = row.original.enterpriseCustomerUser;
   let memberDetails;
-  const memberDetailIcon = (
-    <IconButton
-      isActive
-      invertColors
-      src={Person}
-      iconAs={Icon}
-      className="border rounded-circle mr-3"
-      alt="members detail column icon"
-      style={{ opacity: 1, flexShrink: 0 }}
-    />
-  );
+  const iconLink = `${ROUTES.SUPPORT_TOOLS_TABS.SUB_DIRECTORY.LEARNER_INFORMATION}/?email=${user?.email}`;
+  const memberDetailIcon = () => {
+    if (user) {
+      return (
+        <Hyperlink
+          destination={iconLink}
+          key={user?.email}
+          data-testId="icon-hyperlink"
+          target="_blank"
+          showLaunchIcon={false}
+        >
+          <IconButton
+            isActive
+            invertColors
+            src={Person}
+            iconAs={Icon}
+            className="border rounded-circle mr-3"
+            alt="members detail column icon"
+            style={{ opacity: 1, flexShrink: 0 }}
+          />
+        </Hyperlink>
+      );
+    }
+    return (
+      <IconButton
+        isActive
+        invertColors
+        src={Person}
+        iconAs={Icon}
+        className="icon-button border rounded-circle mr-3"
+        alt="members detail column icon"
+      />
+    );
+  };
 
-  if (row.original.enterpriseCustomerUser?.username) {
+  if (user?.username) {
     memberDetails = (
       <div className="mb-n3">
         <p className="font-weight-bold mb-0">
-          {row.original.enterpriseCustomerUser?.username}
+          {user?.username}
         </p>
-        <p>{row.original.enterpriseCustomerUser?.email}</p>
+        <p>{user?.email}</p>
       </div>
     );
   } else {
@@ -39,7 +64,7 @@ export const EnterpriseCustomerUserDetail = ({
   }
   return (
     <Stack gap={0} direction="horizontal">
-      {memberDetailIcon}
+      {memberDetailIcon()}
       {memberDetails}
     </Stack>
   );

src/Configuration/Customers/CustomerDetailView/tests/EnterpriseCustomerUserDetail.test.jsx

@@ -23,6 +23,7 @@ describe('EnterpriseCustomerUserDetail', () => {
     render(<EnterpriseCustomerUserDetail row={enterpriseCustomerUser} />);
     expect(screen.getByText('ash ketchum')).toBeInTheDocument();
     expect(screen.getByText('[email protected]')).toBeInTheDocument();
+    expect(screen.getByTestId('icon-hyperlink')).toHaveAttribute('href', '/learner-information/[email protected]');
   });
 
   it('renders pending enterprise customer detail', () => {
@@ -35,6 +36,7 @@ describe('EnterpriseCustomerUserDetail', () => {
     };
     render(<EnterpriseCustomerUserDetail row={pendingEnterpriseCustomerUser} />);
     expect(screen.getByText('[email protected]')).toBeInTheDocument();
+    expect(screen.queryByTestId('icon-hyperlink')).not.toBeInTheDocument();
   });
 
   it('renders AdministratorCell there is a pending admin', () => {

src/Configuration/index.scss

@@ -25,3 +25,9 @@
   color: black !important;
   font-weight: bold;
 }
+
+.icon-button {
+  opacity: 1;
+  flex-shrink: 0;
+  pointer-events: none;
+}