diff --git a/src/Configuration/Customers/CustomerDetailView/EnterpriseCustomerUserDetail.jsx b/src/Configuration/Customers/CustomerDetailView/EnterpriseCustomerUserDetail.jsx index 5f772cdd..942a5e96 100644 --- a/src/Configuration/Customers/CustomerDetailView/EnterpriseCustomerUserDetail.jsx +++ b/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 = ( - - ); + const iconLink = `${ROUTES.SUPPORT_TOOLS_TABS.SUB_DIRECTORY.LEARNER_INFORMATION}/?email=${user?.email}`; + const memberDetailIcon = () => { + if (user) { + return ( + + + + ); + } + return ( + + ); + }; - if (row.original.enterpriseCustomerUser?.username) { + if (user?.username) { memberDetails = (

- {row.original.enterpriseCustomerUser?.username} + {user?.username}

-

{row.original.enterpriseCustomerUser?.email}

+

{user?.email}

); } else { @@ -39,7 +64,7 @@ export const EnterpriseCustomerUserDetail = ({ } return ( - {memberDetailIcon} + {memberDetailIcon()} {memberDetails} ); diff --git a/src/Configuration/Customers/CustomerDetailView/tests/EnterpriseCustomerUserDetail.test.jsx b/src/Configuration/Customers/CustomerDetailView/tests/EnterpriseCustomerUserDetail.test.jsx index ad269199..30a8decb 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(); 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(); 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 c3780b47..ba077443 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