feat: add users table

Author: katrinan029

src/Configuration/Customers/CustomerDataTable/CustomerDetails.jsx

@@ -12,7 +12,7 @@ import { useCopyToClipboard } from '../data/utils';
 const { HOME } = ROUTES.CONFIGURATION.SUB_DIRECTORY.CUSTOMERS;
 
 export const CustomerDetailLink = ({ row }) => {
-  const { showToast, copyToClipboard, setShowToast } = useCopyToClipboard();
+  const { showToast, copyToClipboard, setShowToast } = useCopyToClipboard(row.original.uuid);
   const { ADMIN_PORTAL_BASE_URL } = getConfig();
 
   return (

src/Configuration/Customers/CustomerDetailView/CustomerCard.jsx

@@ -14,7 +14,7 @@ import DJANGO_ADMIN_BASE_URL from '../data/constants';
 
 const CustomerCard = ({ enterpriseCustomer }) => {
   const { ADMIN_PORTAL_BASE_URL } = getConfig();
-  const { showToast, copyToClipboard, setShowToast } = useCopyToClipboard();
+  const { showToast, copyToClipboard, setShowToast } = useCopyToClipboard(enterpriseCustomer.uuid);
 
   return (
     <div>

src/Configuration/Customers/CustomerDetailView/CustomerViewContainer.jsx

@@ -11,6 +11,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import CustomerCard from './CustomerCard';
 import { getEnterpriseCustomer } from '../data/utils';
 import CustomerIntegrations from './CustomerIntegrations';
+import EnterpriseCustomerUsersTable from './EnterpriseCustomerUsersTable';
 
 const CustomerViewContainer = () => {
   const { id } = useParams();
@@ -65,6 +66,7 @@ const CustomerViewContainer = () => {
             activeSSO={enterpriseCustomer.activeSsoConfigurations}
             apiCredentialsEnabled={enterpriseCustomer.enableGenerationOfApiCredentials}
           />
+          <EnterpriseCustomerUsersTable />
         </Stack>
       </Container>
     </div>

src/Configuration/Customers/CustomerDetailView/EnterpriseCustomerUserDetail.jsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Icon, IconButton, Stack, Chip
+} from '@openedx/paragon';
+import { Person, Check, Timelapse } from '@openedx/paragon/icons';
+
+export const EnterpriseCustomerUserDetail = ({
+  row,
+}) => {
+  let memberDetails;
+  let memberDetailIcon = (
+    <IconButton
+      isActive
+      invertColors
+      src={Person}
+      iconAs={Icon}
+      className="border rounded-circle mr-3"
+      alt="members detail column icon"
+      style={{ opacity: 1, flexShrink: 0 }}
+    />
+  );
+
+  if (row.original.enterpriseCustomerUser?.username) {
+    memberDetails = (
+      <div className="mb-n3">
+        <p className="font-weight-bold mb-0">
+          {row.original.enterpriseCustomerUser?.username}
+        </p>
+        <p>{row.original.enterpriseCustomerUser?.email}</p>
+      </div>
+    );
+  } else {
+    console.log(row.original)
+    memberDetails = (
+      <p className="align-middle mb-0">
+        {row.original.pendingEnterpriseCustomerUser?.userEmail}
+      </p>
+    );
+  }
+  return (
+    <Stack gap={0} direction="horizontal">
+      {memberDetailIcon}
+      {memberDetails}
+    </Stack>
+  );
+};
+
+export const AdministratorCell = ({ row }) => {
+  return (
+    <div>
+      {row.original?.roleAssignments?.includes("enterprise_admin") ? <Check /> : null}
+    </div>
+  )
+}
+
+export const LearnerCell = ({ row }) => {
+  if (!row.original?.pendingEnterpriseCustomerUser) {
+    return (
+      <div>
+        {row.original?.roleAssignments?.includes("enterprise_learner") ? <Check /> : null}
+      </div>
+    )
+  }
+
+  return (
+    <Chip
+      iconBefore={Timelapse}
+    >
+      Pending
+    </Chip>
+  )
+};
+
+
+EnterpriseCustomerUserDetail.propTypes = {
+  row: PropTypes.shape({
+    original: PropTypes.shape({
+      memberDetails: PropTypes.shape({
+        userEmail: PropTypes.string.isRequired,
+        userName: PropTypes.string,
+      }),
+      status: PropTypes.string,
+      recentAction: PropTypes.string.isRequired,
+      memberEnrollments: PropTypes.string,
+    }).isRequired,
+  }).isRequired,
+};

src/Configuration/Customers/CustomerDetailView/EnterpriseCustomerUsersTable.jsx

@@ -0,0 +1,64 @@
+import { useParams } from 'react-router-dom';
+import { Container, DataTable, TextFilter } from '@openedx/paragon';
+import { EnterpriseCustomerUserDetail, LearnerCell, AdministratorCell } from './EnterpriseCustomerUserDetail';
+import useEnterpriseUsersTableData from '../data/hooks/useCustomerUsersTableData';
+
+const EnterpriseCustomerUsersTable = () => {
+  const { id } = useParams();
+  const {
+    isLoading,
+    enterpriseUsersTableData,
+    fetchEnterpriseUsersData,
+  } = useEnterpriseUsersTableData(id);
+  return (
+    <Container>
+      <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>
+  );
+};
+
+export default EnterpriseCustomerUsersTable;

src/Configuration/Customers/data/hooks/useCustomerUsersTableData.js

@@ -0,0 +1,77 @@
+import {
+  useCallback, useMemo, useState,
+} from 'react';
+import _ from 'lodash';
+import { camelCaseObject } from '@edx/frontend-platform/utils';
+import { logError } from '@edx/frontend-platform/logging';
+import debounce from 'lodash.debounce';
+
+import LmsApiService from '../../../../data/services/EnterpriseApiService';
+
+const useEnterpriseUsersTableData = (enterpriseUuid) => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [enterpriseUsersTableData, setEnterpriseUsersTableData] = useState({
+    itemCount: 0,
+    pageCount: 0,
+    results: [],
+  });
+  const fetchEnterpriseUsersData = useCallback((args) => {
+    const fetch = async () => {
+      try {
+        setIsLoading(true);
+        const options = {};
+
+        args.sortBy.filter((sort) => {
+          const { id, desc } = sort;
+          if (id === 'administrator') {
+            options.ordering = desc ? id : `-${id}`;
+          }
+          if (id === 'userDetails') {
+            options.ordering = desc ? id : `-${id}`;
+          }
+          if (id === 'learner') {
+            options.ordering = desc ? id : `-${id}`;
+          } 
+        });
+
+        args.filters.forEach((filter) => {
+          const { id, value } = filter;
+          if (id === 'username') {
+            options.user_query = value;
+          }
+        });
+      
+
+        options.page = args.pageIndex + 1;
+        const response = await LmsApiService.fetchEnterpriseCustomerUsers(enterpriseUuid, options);
+        const { data } = camelCaseObject(response);
+        console.log(args)
+        setEnterpriseUsersTableData({
+          itemCount: data.count,
+          pageCount: data.numPages,
+          results:data.results,
+        });
+      } catch (error) {
+        logError(error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    if (enterpriseUuid) {
+      fetch();
+    }
+  }, [enterpriseUuid]);
+
+  const debouncedFetchEnterpriseUsersData = useMemo(
+    () => debounce(fetchEnterpriseUsersData, 300),
+    [fetchEnterpriseUsersData],
+  );
+
+  return {
+    isLoading,
+    enterpriseUsersTableData,
+    fetchEnterpriseUsersData: debouncedFetchEnterpriseUsersData,
+  };
+};
+
+export default useEnterpriseUsersTableData;

src/data/services/EnterpriseApiService.js

@@ -22,10 +22,19 @@ class LmsApiService {
 
   static integratedChannelsUrl = `${LmsApiService.baseUrl}/integrated_channels/api/v1/configs/`;
 
+  static enterpriseCustomerSupportUrl = `${LmsApiService.enterpriseAPIBaseUrl}enterprise-customer-support/`;
+
   static fetchEnterpriseCatalogQueries = () => LmsApiService.apiClient().get(LmsApiService.enterpriseCatalogQueriesUrl);
 
   static fetchEnterpriseCustomersBasicList = (enterpriseNameOrUuid) => LmsApiService.apiClient().get(`${LmsApiService.enterpriseCustomersBasicListUrl}${enterpriseNameOrUuid !== undefined ? `?name_or_uuid=${enterpriseNameOrUuid}` : ''}`);
 
+  static fetchEnterpriseCustomerUsers = (enterpriseUuid, options) => {
+    const queryParams = new URLSearchParams({
+      ...options,
+    });
+    return LmsApiService.apiClient().get(`${LmsApiService.enterpriseCustomerSupportUrl}${enterpriseUuid}?${queryParams}`);
+  };
+
   static postEnterpriseCustomerCatalog = (
     enterpriseCustomerUuid,
     catalogQueryId,