diff --git a/src/Configuration/Customers/CustomerDetailView/CustomerIntegrations.jsx b/src/Configuration/Customers/CustomerDetailView/CustomerIntegrations.jsx index c81ff8883..057b09d88 100644 --- a/src/Configuration/Customers/CustomerDetailView/CustomerIntegrations.jsx +++ b/src/Configuration/Customers/CustomerDetailView/CustomerIntegrations.jsx @@ -27,6 +27,7 @@ const CustomerIntegrations = ({
{activeSSO && activeSSO.map((sso) => ( ( { const [showInactive, setShowInactive] = useState(false); + const countOfActivePlans = activeSubscriptions.length + activePolicies.length; + const countOfInactivePlans = inactiveSubscriptions.length + inactivePolicies.length; + const countOfAllPlans = countOfActivePlans + countOfInactivePlans; useEffect(() => { if (!countOfActivePlans && countOfAllPlans) { setShowInactive(true); @@ -82,8 +83,6 @@ CustomerPlanContainer.propTypes = { expirationDate: PropTypes.string.isRequired, created: PropTypes.string.isRequired, })).isRequired, - countOfActivePlans: PropTypes.number.isRequired, - countOfAllPlans: PropTypes.number.isRequired, inactivePolicies: PropTypes.arrayOf(PropTypes.shape({ uuid: PropTypes.string.isRequired, subsidyActiveDatetime: PropTypes.string.isRequired, diff --git a/src/Configuration/Customers/CustomerDetailView/CustomerViewCard.jsx b/src/Configuration/Customers/CustomerDetailView/CustomerViewCard.jsx index bbe316c23..8f12c7fbc 100644 --- a/src/Configuration/Customers/CustomerDetailView/CustomerViewCard.jsx +++ b/src/Configuration/Customers/CustomerDetailView/CustomerViewCard.jsx @@ -40,9 +40,15 @@ const CustomerViewCard = ( CustomerViewCard.propTypes = { header: PropTypes.string.isRequired, title: PropTypes.string.isRequired, - subtext: PropTypes.string.isRequired, - buttonText: PropTypes.string.isRequired, - buttonLink: PropTypes.string.isRequired, + subtext: PropTypes.string, + buttonText: PropTypes.string, + buttonLink: PropTypes.string, +}; + +CustomerViewCard.defaultProps = { + subtext: null, + buttonText: null, + buttonLink: null, }; export default CustomerViewCard; diff --git a/src/Configuration/Customers/CustomerDetailView/CustomerViewContainer.jsx b/src/Configuration/Customers/CustomerDetailView/CustomerViewContainer.jsx index 4e3d2c344..23716a271 100644 --- a/src/Configuration/Customers/CustomerDetailView/CustomerViewContainer.jsx +++ b/src/Configuration/Customers/CustomerDetailView/CustomerViewContainer.jsx @@ -38,7 +38,7 @@ const CustomerViewContainer = () => { useEffect(() => { fetchData(); - }, []); + }, [fetchData]); const renderPlanContainer = () => { if (!isLoading && !associatedPlans.isLoading && associatedPlans.countOfAllPlans) { diff --git a/src/Configuration/Customers/CustomerDetailView/EnterpriseCustomerUsersTable.jsx b/src/Configuration/Customers/CustomerDetailView/EnterpriseCustomerUsersTable.jsx index e3b310346..f36104186 100644 --- a/src/Configuration/Customers/CustomerDetailView/EnterpriseCustomerUsersTable.jsx +++ b/src/Configuration/Customers/CustomerDetailView/EnterpriseCustomerUsersTable.jsx @@ -9,60 +9,55 @@ const EnterpriseCustomerUsersTable = () => { isLoading, enterpriseUsersTableData, fetchEnterpriseUsersData, - showTable, } = useCustomerUsersTableData(id); return (
- {showTable ? ( -
-

Associated users {enterpriseUsersTableData.itemCount > 0 - && ({enterpriseUsersTableData.itemCount})} -

-
- -
- ) : null} +

Associated users {enterpriseUsersTableData.itemCount > 0 + && ({enterpriseUsersTableData.itemCount})} +

+
+
); }; diff --git a/src/Configuration/Customers/CustomerDetailView/tests/EnterpriseCustomerUsersTable.test.jsx b/src/Configuration/Customers/CustomerDetailView/tests/EnterpriseCustomerUsersTable.test.jsx index 4fde961e5..1848313a9 100644 --- a/src/Configuration/Customers/CustomerDetailView/tests/EnterpriseCustomerUsersTable.test.jsx +++ b/src/Configuration/Customers/CustomerDetailView/tests/EnterpriseCustomerUsersTable.test.jsx @@ -33,7 +33,6 @@ const mockData = { ], }, fetchEnterpriseUsersData: mockFetchEnterpriseUsersData, - showTable: true, }; jest.mock('../../data/hooks/useCustomerUsersTableData'); @@ -81,24 +80,4 @@ describe('EnterpriseCustomerUsersTable', () => { }); }); }); - - it('does not render user table section', () => { - const emptyResults = { - isLoading: false, - enterpriseUsersTableData: { - itemCount: 0, - pageCount: 1, - results: [], - }, - fetchEnterpriseUsersData: mockFetchEnterpriseUsersData, - }; - useCustomerUsersTableData.mockReturnValue(emptyResults); - render( - - - , - ); - expect(screen.queryByText('Search user details')).not.toBeInTheDocument(); - expect(screen.queryByText('Associated users (0)')).not.toBeInTheDocument(); - }); }); diff --git a/src/Configuration/Customers/data/hooks/useAllAssociatedPlans.js b/src/Configuration/Customers/data/hooks/useAllAssociatedPlans.js index 7f50a0cb0..38edf67e8 100644 --- a/src/Configuration/Customers/data/hooks/useAllAssociatedPlans.js +++ b/src/Configuration/Customers/data/hooks/useAllAssociatedPlans.js @@ -11,8 +11,6 @@ const useAllAssociatedPlans = (enterpriseId) => { const [activeSubscriptions, setActiveSubscriptions] = useState([]); const [activePolicies, setActivePolicies] = useState([]); const [inactivePolicies, setInactivePolicies] = useState([]); - const [countOfActivePlans, setCountOfActivePlans] = useState(0); - const [countOfAllPlans, setCountOfAllPlans] = useState(0); const fetchData = useCallback( async () => { @@ -39,19 +37,11 @@ const useAllAssociatedPlans = (enterpriseId) => { useEffect(() => { fetchData(); - if (!isLoading) { - const activePlanCount = activeSubscriptions.length + activePolicies.length; - const inactivePlanCount = inactiveSubscriptions.length + inactivePolicies.length; - setCountOfActivePlans(prev => prev + activePlanCount); - setCountOfAllPlans(prev => prev + activePlanCount + inactivePlanCount); - } - }, [fetchData, isLoading]); + }, [fetchData]); return { activePolicies, activeSubscriptions, - countOfActivePlans, - countOfAllPlans, inactivePolicies, inactiveSubscriptions, isLoading, diff --git a/src/Configuration/Customers/data/hooks/useCustomerUsersTableData.js b/src/Configuration/Customers/data/hooks/useCustomerUsersTableData.js index e7e52efc4..ab673e938 100644 --- a/src/Configuration/Customers/data/hooks/useCustomerUsersTableData.js +++ b/src/Configuration/Customers/data/hooks/useCustomerUsersTableData.js @@ -1,5 +1,5 @@ import { - useCallback, useMemo, useState, useEffect, + useCallback, useMemo, useState, } from 'react'; import { camelCaseObject } from '@edx/frontend-platform/utils'; import { logError } from '@edx/frontend-platform/logging'; @@ -9,7 +9,6 @@ import LmsApiService from '../../../../data/services/EnterpriseApiService'; const useCustomerUsersTableData = (enterpriseUuid) => { const [isLoading, setIsLoading] = useState(true); - const [showTable, setShowTable] = useState(false); const [enterpriseUsersTableData, setEnterpriseUsersTableData] = useState({ itemCount: 0, pageCount: 0, @@ -67,23 +66,10 @@ const useCustomerUsersTableData = (enterpriseUuid) => { [fetchEnterpriseUsersData], ); - useEffect(() => { - const args = { - pageIndex: 0, - filters: [], - sortBy: [], - }; - fetchEnterpriseUsersData(args); - if (enterpriseUsersTableData.itemCount) { - setShowTable(true); - } - }, [fetchEnterpriseUsersData, enterpriseUsersTableData.itemCount]); - return { isLoading, enterpriseUsersTableData, fetchEnterpriseUsersData: debouncedFetchEnterpriseUsersData, - showTable, }; };