feat: fix multiple api requests and datatable

src/Configuration/Customers/CustomerDetailView/CustomerIntegrations.jsx

@@ -27,6 +27,7 @@ const CustomerIntegrations = ({
         <hr />
         {activeSSO && activeSSO.map((sso) => (
           <CustomerViewCard
+            key={sso.displayName}
             slug={slug}
             header="SSO"
             title={sso.displayName}
@@ -37,6 +38,7 @@ const CustomerIntegrations = ({
         ))}
         {activeIntegrations && activeIntegrations.map((config) => (
           <CustomerViewCard
+            key={config.channelCode[0].toUpperCase()}
             slug={slug}
             header="Learning platform"
             title={config.channelCode[0].toUpperCase() + config.channelCode.substr(1).toLowerCase()}
@@ -47,6 +49,7 @@ const CustomerIntegrations = ({
         ))}
         {apiCredentialsEnabled && (
         <CustomerViewCard
+          key="api"
           slug={slug}
           header="Integration"
           title="API"

src/Configuration/Customers/CustomerDetailView/CustomerPlanContainer.jsx

@@ -8,13 +8,14 @@ const CustomerPlanContainer = ({
   slug,
   activePolicies,
   activeSubscriptions,
-  countOfActivePlans,
-  countOfAllPlans,
   inactivePolicies,
   inactiveSubscriptions,
   isLoading,
 }) => {
   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,

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;

src/Configuration/Customers/CustomerDetailView/CustomerViewContainer.jsx

@@ -38,7 +38,7 @@ const CustomerViewContainer = () => {
 
   useEffect(() => {
     fetchData();
-  }, []);
+  }, [fetchData]);
 
   const renderPlanContainer = () => {
     if (!isLoading && !associatedPlans.isLoading && associatedPlans.countOfAllPlans) {

src/Configuration/Customers/CustomerDetailView/EnterpriseCustomerUsersTable.jsx

@@ -9,60 +9,55 @@ const EnterpriseCustomerUsersTable = () => {
     isLoading,
     enterpriseUsersTableData,
     fetchEnterpriseUsersData,
-    showTable,
   } = useCustomerUsersTableData(id);
 
   return (
     <div>
-      {showTable ? (
-        <div>
-          <h2>Associated users {enterpriseUsersTableData.itemCount > 0
-            && <span>({enterpriseUsersTableData.itemCount})</span>}
-          </h2>
-          <hr />
-          <DataTable
-            isLoading={isLoading}
-            isExpandable
-            isPaginated
-            manualPagination
-            isFilterable
-            manualFilters
-            initialState={{
-              pageSize: 8,
-              pageIndex: 0,
-              sortBy: [],
-              filters: [],
-            }}
-            defaultColumnValues={{ Filter: TextFilter }}
-            fetchData={fetchEnterpriseUsersData}
-            data={enterpriseUsersTableData.results}
-            itemCount={enterpriseUsersTableData.itemCount}
-            pageCount={enterpriseUsersTableData.pageCount}
-            columns={[
-              {
-                id: 'details',
-                Header: 'User details',
-                accessor: 'details',
-                Cell: EnterpriseCustomerUserDetail,
-              },
-              {
-                id: 'administrator',
-                Header: 'Administrator',
-                accessor: 'administrator',
-                disableFilters: true,
-                Cell: AdministratorCell,
-              },
-              {
-                id: 'learner',
-                Header: 'Learner',
-                accessor: 'learner',
-                disableFilters: true,
-                Cell: LearnerCell,
-              },
-            ]}
-          />
-        </div>
-      ) : null}
+      <h2>Associated users {enterpriseUsersTableData.itemCount > 0
+        && <span>({enterpriseUsersTableData.itemCount})</span>}
+      </h2>
+      <hr />
+      <DataTable
+        isLoading={isLoading}
+        isExpandable
+        isPaginated
+        manualPagination
+        isFilterable
+        manualFilters
+        initialState={{
+          pageSize: 8,
+          pageIndex: 0,
+          sortBy: [],
+          filters: [],
+        }}
+        defaultColumnValues={{ Filter: TextFilter }}
+        fetchData={fetchEnterpriseUsersData}
+        data={enterpriseUsersTableData.results}
+        itemCount={enterpriseUsersTableData.itemCount}
+        pageCount={enterpriseUsersTableData.pageCount}
+        columns={[
+          {
+            id: 'details',
+            Header: 'User details',
+            accessor: 'details',
+            Cell: EnterpriseCustomerUserDetail,
+          },
+          {
+            id: 'administrator',
+            Header: 'Administrator',
+            accessor: 'administrator',
+            disableFilters: true,
+            Cell: AdministratorCell,
+          },
+          {
+            id: 'learner',
+            Header: 'Learner',
+            accessor: 'learner',
+            disableFilters: true,
+            Cell: LearnerCell,
+          },
+        ]}
+      />
     </div>
   );
 };

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(
-      <IntlProvider locale="en">
-        <EnterpriseCustomerUsersTable />
-      </IntlProvider>,
-    );
-    expect(screen.queryByText('Search user details')).not.toBeInTheDocument();
-    expect(screen.queryByText('Associated users (0)')).not.toBeInTheDocument();
-  });
 });

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,

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,
   };
 };