feat: add user table with filtering

src/Configuration/Customers/CustomerDetailView/CustomerIntegrations.jsx

@@ -17,6 +17,7 @@ const CustomerIntegrations = ({
       {(activeSSO || activeIntegrations || apiCredentialsEnabled) && (
       <div>
         <h2>Associated Integrations</h2>
+        <hr />
         {activeSSO && activeSSO.map((sso) => (
           <CustomerViewCard
             slug={slug}

src/Configuration/Customers/CustomerDetailView/CustomerPlanContainer.jsx

@@ -35,6 +35,7 @@ const CustomerPlanContainer = ({ slug }) => {
       {!isLoading ? (
         <div>
           <div className="d-flex justify-content-between">
+
             <h2>Associated subsidy plans ({showInactive ? countOfAllPlans : countOfActivePlans})</h2>
             <Form.Switch
               className="ml-2.5 mt-2.5"
@@ -48,6 +49,7 @@ const CustomerPlanContainer = ({ slug }) => {
               Show inactive
             </Form.Switch>
           </div>
+          <hr />
           {renderActivePoliciesCard}
           {renderActiveSubscriptions}
           {showInactive ? (

src/Configuration/Customers/CustomerDetailView/EnterpriseCustomerUserDetail.jsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-  Icon, IconButton, Stack, Chip
+  Icon, IconButton, Stack, Chip,
 } from '@openedx/paragon';
 import { Person, Check, Timelapse } from '@openedx/paragon/icons';
 
 export const EnterpriseCustomerUserDetail = ({
   row,
 }) => {
   let memberDetails;
-  let memberDetailIcon = (
+  const memberDetailIcon = (
     <IconButton
       isActive
       invertColors
@@ -31,7 +31,6 @@ export const EnterpriseCustomerUserDetail = ({
       </div>
     );
   } else {
-    console.log(row.original)
     memberDetails = (
       <p className="align-middle mb-0">
         {row.original.pendingEnterpriseCustomerUser?.userEmail}
@@ -47,20 +46,29 @@ export const EnterpriseCustomerUserDetail = ({
 };
 
 export const AdministratorCell = ({ row }) => {
+  if (row.original?.pendingEnterpriseCustomerUser?.isPendingAdmin) {
+    return (
+      <Chip
+        iconBefore={Timelapse}
+      >
+        Pending
+      </Chip>
+    );
+  }
   return (
     <div>
-      {row.original?.roleAssignments?.includes("enterprise_admin") ? <Check /> : null}
+      {row.original?.roleAssignments?.includes('enterprise_admin') ? <Check data-testid="admin check" aria-label="admin check" /> : null}
     </div>
-  )
-}
+  );
+};
 
 export const LearnerCell = ({ row }) => {
-  if (!row.original?.pendingEnterpriseCustomerUser) {
+  if (!row.original?.pendingEnterpriseCustomerUser?.isPendingLearner) {
     return (
       <div>
-        {row.original?.roleAssignments?.includes("enterprise_learner") ? <Check /> : null}
+        {row.original?.roleAssignments?.includes('enterprise_learner') ? <Check data-testid="learner check" aria-label="learner check" /> : null}
       </div>
-    )
+    );
   }
 
   return (
@@ -69,20 +77,43 @@ export const LearnerCell = ({ row }) => {
     >
       Pending
     </Chip>
-  )
+  );
 };
 
-
 EnterpriseCustomerUserDetail.propTypes = {
   row: PropTypes.shape({
     original: PropTypes.shape({
-      memberDetails: PropTypes.shape({
-        userEmail: PropTypes.string.isRequired,
-        userName: PropTypes.string,
+      enterpriseCustomerUser: PropTypes.shape({
+        email: PropTypes.string.isRequired,
+        username: PropTypes.string,
+      }),
+      pendingEnterpriseCustomerUser: PropTypes.shape({
+        isPendingAdmin: PropTypes.bool,
+        userEmail: PropTypes.string,
+      }),
+      roleAssignments: PropTypes.arrayOf(PropTypes.string),
+    }).isRequired,
+  }).isRequired,
+};
+
+AdministratorCell.propTypes = {
+  row: PropTypes.shape({
+    original: PropTypes.shape({
+      pendingEnterpriseCustomerUser: PropTypes.shape({
+        isPendingAdmin: PropTypes.bool,
+      }),
+      roleAssignments: PropTypes.arrayOf(PropTypes.string),
+    }).isRequired,
+  }).isRequired,
+};
+
+LearnerCell.propTypes = {
+  row: PropTypes.shape({
+    original: PropTypes.shape({
+      pendingEnterpriseCustomerUser: PropTypes.shape({
+        isPendingLearner: PropTypes.bool,
       }),
-      status: PropTypes.string,
-      recentAction: PropTypes.string.isRequired,
-      memberEnrollments: PropTypes.string,
+      roleAssignments: PropTypes.arrayOf(PropTypes.string),
     }).isRequired,
   }).isRequired,
 };

src/Configuration/Customers/CustomerDetailView/EnterpriseCustomerUsersTable.jsx

@@ -1,64 +1,64 @@
 import { useParams } from 'react-router-dom';
-import { Container, DataTable, TextFilter } from '@openedx/paragon';
+import { DataTable, TextFilter } from '@openedx/paragon';
 import { EnterpriseCustomerUserDetail, LearnerCell, AdministratorCell } from './EnterpriseCustomerUserDetail';
-import useEnterpriseUsersTableData from '../data/hooks/useCustomerUsersTableData';
+import useCustomerUsersTableData from '../data/hooks/useCustomerUsersTableData';
 
 const EnterpriseCustomerUsersTable = () => {
   const { id } = useParams();
   const {
     isLoading,
     enterpriseUsersTableData,
     fetchEnterpriseUsersData,
-  } = useEnterpriseUsersTableData(id);
+  } = useCustomerUsersTableData(id);
   return (
-    <Container>
-      <h2>Associated users ({ enterpriseUsersTableData.itemCount })</h2>
+    <div>
+      <h2>Associated users ({enterpriseUsersTableData.itemCount})</h2>
       <hr />
-        <DataTable
-          isLoading={isLoading}
-          isExpandable
-          isSortable
-          manualSortBy
-          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: 'userDetails',
-              Header: 'User details',
-              accessor: 'userDetails',
-              Cell: EnterpriseCustomerUserDetail,
-            },
-            {
-              id: 'administrator',
-              Header: 'Administrator',
-              accessor: 'administrator',
-              disableFilters: true,
-              Cell: AdministratorCell,
-            },
-            {
-              id: 'learner',
-              Header: 'Learner',
-              accessor: 'learner',
-              disableFilters: true,
-              Cell: LearnerCell,
-            },
-          ]}
-        />
-    </Container>
+      <DataTable
+        isLoading={isLoading}
+        isExpandable
+        isSortable
+        manualSortBy
+        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>
   );
 };
 
-export default EnterpriseCustomerUsersTable;
+export default EnterpriseCustomerUsersTable;

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

@@ -0,0 +1,80 @@
+/* eslint-disable react/prop-types */
+import {
+  screen,
+  render,
+} from '@testing-library/react';
+import '@testing-library/jest-dom';
+import {
+  EnterpriseCustomerUserDetail,
+  AdministratorCell,
+  LearnerCell,
+} from '../EnterpriseCustomerUserDetail';
+
+describe('EnterpriseCustomerUserDetail', () => {
+  it('renders enterprise customer detail', () => {
+    const enterpriseCustomerUser = {
+      original: {
+        enterpriseCustomerUser: {
+          username: 'ash ketchum',
+          email: 'ash@ketchum.org',
+        },
+      },
+    };
+    render(<EnterpriseCustomerUserDetail row={enterpriseCustomerUser} />);
+    expect(screen.getByText('ash ketchum')).toBeInTheDocument();
+    expect(screen.getByText('ash@ketchum.org')).toBeInTheDocument();
+  });
+
+  it('renders pending enterprise customer detail', () => {
+    const pendingEnterpriseCustomerUser = {
+      original: {
+        pendingEnterpriseCustomerUser: {
+          userEmail: 'pending@customer.org',
+        },
+      },
+    };
+    render(<EnterpriseCustomerUserDetail row={pendingEnterpriseCustomerUser} />);
+    expect(screen.getByText('pending@customer.org')).toBeInTheDocument();
+  });
+
+  it('renders AdministratorCell there is a pending admin', () => {
+    const pendingAdmin = {
+      original: {
+        pendingEnterpriseCustomerUser: {
+          isPendingAdmin: true,
+        },
+        roleAssignments: ['enterprise_learner'],
+      },
+    };
+    render(<AdministratorCell row={pendingAdmin} />);
+    expect(screen.getByText('Pending')).toBeInTheDocument();
+  });
+
+  it('renders AdministratorCell there is a registered admin', () => {
+    const adminRow = {
+      original: {
+        pendingEnterpriseCustomerUser: {
+          isPendingAdmin: false,
+        },
+        roleAssignments: ['enterprise_admin'],
+      },
+    };
+    render(<AdministratorCell row={adminRow} />);
+    expect(screen.queryByText('Pending')).not.toBeInTheDocument();
+  });
+
+  it('renders LearnerCell there is a registered learner and not pendning', () => {
+    const learnerRow = {
+      original: {
+        pendingEnterpriseCustomerUser: null,
+        enterpriseCustomerUser: {
+          username: 'ash ketchum',
+          email: 'ash@ketchum.org',
+        },
+        roleAssignments: ['enterprise_learner'],
+      },
+    };
+    render(<LearnerCell row={learnerRow} />);
+    expect(screen.queryByText('Pending')).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,64 @@
+/* eslint-disable react/prop-types */
+import { screen, render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import EnterpriseCustomerUsersTable from '../EnterpriseCustomerUsersTable';
+import useCustomerUsersTableData from '../../data/hooks/useCustomerUsersTableData';
+
+const mockData = {
+  isLoading: false,
+  enterpriseUsersTableData: {
+    itemCount: 2,
+    pageCount: 1,
+    results: [
+      {
+        enterpriseCustomerUser: {
+          username: 'ash ketchum',
+          email: 'ash@ketchum.org',
+        },
+        pendingEnterpriseCustomerUser: null,
+        roleAssignments: ['enterprise_learner'],
+      },
+      {
+        enterpriseCustomerUser: {
+          username: 'misty',
+          email: 'misty@pokemon.org',
+        },
+        pendingEnterpriseCustomerUser: null,
+        roleAssignments: ['enterprise_admin'],
+      },
+    ],
+    fetchEnterpriseUsersData: jest.fn(),
+  },
+};
+
+jest.mock('../../data/hooks/useCustomerUsersTableData');
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({ id: 'test-uuid' }),
+}));
+
+describe('EnterpriseCustomerUsersTable', () => {
+  it('renders the datatable with data', () => {
+    useCustomerUsersTableData.mockReturnValue(mockData);
+
+    render(
+      <IntlProvider locale="en">
+        <EnterpriseCustomerUsersTable />
+      </IntlProvider>,
+    );
+    expect(screen.getByText('Search user details')).toBeInTheDocument();
+    expect(screen.getByText('User details')).toBeInTheDocument();
+    expect(screen.getByText('Administrator')).toBeInTheDocument();
+    expect(screen.getByText('Learner')).toBeInTheDocument();
+    expect(screen.getByText('ash ketchum')).toBeInTheDocument();
+    expect(screen.getByText('ash@ketchum.org')).toBeInTheDocument();
+    expect(screen.getByTestId('learner check'));
+
+    expect(screen.getByText('misty')).toBeInTheDocument();
+    expect(screen.getByText('misty@pokemon.org')).toBeInTheDocument();
+    expect(screen.getByTestId('admin check')).toBeInTheDocument();
+  });
+});