From fce8aff9afe8fc390863eacb9f79513614f84260 Mon Sep 17 00:00:00 2001
From: Kira Miller <kira.miller15@yahoo.com>
Date: Mon, 30 Sep 2024 21:08:23 +0000
Subject: [PATCH 1/2] feat: adding link to user page to icon

---
 .../EnterpriseCustomerUserDetail.jsx          | 51 +++++++++++++------
 .../EnterpriseCustomerUserDetail.test.jsx     |  2 +
 src/Configuration/index.scss                  |  6 +++
 3 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/src/Configuration/Customers/CustomerDetailView/EnterpriseCustomerUserDetail.jsx b/src/Configuration/Customers/CustomerDetailView/EnterpriseCustomerUserDetail.jsx
index 5f772cddf..f14b6fc4b 100644
--- a/src/Configuration/Customers/CustomerDetailView/EnterpriseCustomerUserDetail.jsx
+++ b/src/Configuration/Customers/CustomerDetailView/EnterpriseCustomerUserDetail.jsx
@@ -1,33 +1,52 @@
 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">
+          <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 +58,7 @@ export const EnterpriseCustomerUserDetail = ({
   }
   return (
     <Stack gap={0} direction="horizontal">
-      {memberDetailIcon}
+      {memberDetailIcon()}
       {memberDetails}
     </Stack>
   );
diff --git a/src/Configuration/Customers/CustomerDetailView/tests/EnterpriseCustomerUserDetail.test.jsx b/src/Configuration/Customers/CustomerDetailView/tests/EnterpriseCustomerUserDetail.test.jsx
index ad269199f..30a8decb3 100644
--- a/src/Configuration/Customers/CustomerDetailView/tests/EnterpriseCustomerUserDetail.test.jsx
+++ b/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('ash@ketchum.org')).toBeInTheDocument();
+    expect(screen.getByTestId('icon-hyperlink')).toHaveAttribute('href', '/learner-information/?email=ash@ketchum.org');
   });
 
   it('renders pending enterprise customer detail', () => {
@@ -35,6 +36,7 @@ describe('EnterpriseCustomerUserDetail', () => {
     };
     render(<EnterpriseCustomerUserDetail row={pendingEnterpriseCustomerUser} />);
     expect(screen.getByText('pending@customer.org')).toBeInTheDocument();
+    expect(screen.queryByTestId('icon-hyperlink')).not.toBeInTheDocument();
   });
 
   it('renders AdministratorCell there is a pending admin', () => {
diff --git a/src/Configuration/index.scss b/src/Configuration/index.scss
index c3780b47c..ba0774437 100644
--- a/src/Configuration/index.scss
+++ b/src/Configuration/index.scss
@@ -25,3 +25,9 @@
   color: black !important;
   font-weight: bold;
 }
+
+.icon-button {
+  opacity: 1;
+  flex-shrink: 0;
+  pointer-events: none;
+}
\ No newline at end of file

From 24ac3cbcddf0ead2ac05626654e5d9a7d4ed487d Mon Sep 17 00:00:00 2001
From: Kira Miller <kira.miller15@yahoo.com>
Date: Tue, 1 Oct 2024 23:13:39 +0000
Subject: [PATCH 2/2] fix: PR requests

---
 .../CustomerDetailView/EnterpriseCustomerUserDetail.jsx   | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/Configuration/Customers/CustomerDetailView/EnterpriseCustomerUserDetail.jsx b/src/Configuration/Customers/CustomerDetailView/EnterpriseCustomerUserDetail.jsx
index f14b6fc4b..942a5e962 100644
--- a/src/Configuration/Customers/CustomerDetailView/EnterpriseCustomerUserDetail.jsx
+++ b/src/Configuration/Customers/CustomerDetailView/EnterpriseCustomerUserDetail.jsx
@@ -15,7 +15,13 @@ export const EnterpriseCustomerUserDetail = ({
   const memberDetailIcon = () => {
     if (user) {
       return (
-        <Hyperlink destination={iconLink} key={user?.email} data-testId="icon-hyperlink">
+        <Hyperlink
+          destination={iconLink}
+          key={user?.email}
+          data-testId="icon-hyperlink"
+          target="_blank"
+          showLaunchIcon={false}
+        >
           <IconButton
             isActive
             invertColors