Merge remote-tracking branch 'origin' into knguyen2/ent-9159

openedx · Aug 7, 2024 · a9d69ae · a9d69ae
2 parents e433e78 + e541f84
commit a9d69ae
Show file tree

Hide file tree

Showing 12 changed files with 173 additions and 48 deletions.
diff --git a/src/Configuration/Customers/CustomerDataTable/CustomerDetailSubComponent.jsx b/src/Configuration/Customers/CustomerDataTable/CustomerDetailSubComponent.jsx
@@ -44,7 +44,7 @@ export const OtherSubsidies = () => (
           <div>
             <FormattedMessage
               id="configuration.customersPage.otherSubsidiesColumn.tooltip"
-              defaultMessage="Includes Offers and Codes"
+              defaultMessage="Includes offers and codes"
               description="Tooltip for the Other Subsidies column header in the Customers table"
             />
           </div>

diff --git a/src/Configuration/Customers/CustomerDataTable/CustomerDetails.jsx b/src/Configuration/Customers/CustomerDataTable/CustomerDetails.jsx
@@ -25,6 +25,7 @@ export const CustomerDetailLink = ({ row }) => {
         <Hyperlink
           destination={`${HOME}/${row.original.uuid}/view`}
           key={row.original.uuid}
+          rel="noopener noreferrer"
           variant="muted"
           target="_blank"
           showLaunchIcon={false}
@@ -37,6 +38,7 @@ export const CustomerDetailLink = ({ row }) => {
         <Hyperlink
           destination={`${ADMIN_PORTAL_BASE_URL}/${row.original.slug}/admin/learners`}
           key={row.original.uuid}
+          rel="noopener noreferrer"
           variant="muted"
           target="_blank"
           showLaunchIcon
@@ -61,7 +63,7 @@ export const CustomerDetailLink = ({ row }) => {
         show={showToast}
         delay={2000}
       >
-        Copied to clipboard!
+        Copied to clipboard
       </Toast>
     </div>
   );

diff --git a/src/Configuration/Customers/CustomerDataTable/CustomersPage.jsx b/src/Configuration/Customers/CustomerDataTable/CustomersPage.jsx
@@ -60,7 +60,6 @@ const CustomersPage = () => {
           }}
           renderRowSubComponent={({ row }) => <CustomerDetailRowSubComponent row={row} />}
           isPaginated
-          isSortable
           isFilterable
           defaultColumnValues={{ Filter: TextFilter }}
           itemCount={enterpriseList?.length || 0}

diff --git a/src/Configuration/Customers/CustomerDataTable/tests/CustomerDetails.test.jsx b/src/Configuration/Customers/CustomerDataTable/tests/CustomerDetails.test.jsx
@@ -107,11 +107,11 @@ describe('CustomerDetails', () => {
         <CustomerDetailLink row={row} />
       </IntlProvider>,
     );
-    expect(screen.getByRole('link', { name: 'Ash Ketchum' })).toHaveAttribute('href', '/enterprise-configuration/customers/ash-ketchum/view');
+    expect(screen.getByRole('link', { name: 'Ash Ketchum' })).toHaveAttribute('href', '/enterprise-configuration/customers/123456789/view');
     expect(screen.getByRole('link', { name: '/ash-ketchum/ in a new tab' })).toHaveAttribute('href', 'http://www.testportal.com/ash-ketchum/admin/learners');
     expect(screen.getByText('123456789')).toBeInTheDocument();
     const copy = screen.getByTestId('copy');
     userEvent.click(copy);
-    await waitFor(() => expect(screen.getByText('Copied to clipboard!')).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByText('Copied to clipboard')).toBeInTheDocument());
   });
 });
diff --git a/src/Configuration/Customers/CustomerDetailView/CustomerCard.jsx b/src/Configuration/Customers/CustomerDetailView/CustomerCard.jsx
@@ -1,22 +1,37 @@
-import { ActionRow, Button, Card, Hyperlink } from '@openedx/paragon';
+import PropTypes from 'prop-types';
+import {
+  ActionRow,
+  Button,
+  Card,
+  Hyperlink,
+} from '@openedx/paragon';
 import { Launch } from '@openedx/paragon/icons';
 import { getConfig } from '@edx/frontend-platform';
 import { formatDate } from '../data/utils';
 
 const CustomerCard = ({ enterpriseCustomer }) => {
-  const { ADMIN_PORTAL_BASE_URL } = getConfig();
-
+  const { ADMIN_PORTAL_BASE_URL, LMS_BASE_URL } = getConfig();
   return (
-    <Card variant="dark mb-0">
+    <Card variant="dark" className="mb-0">
       <Card.Section
-        actions={
+        actions={(
           <ActionRow>
             <Button>View Details</Button>
-            <Button variant="inverse-primary" iconAfter={Launch}>Open in Django</Button>
+            <Button
+              className="text-dark-500"
+              as="a"
+              href={`${LMS_BASE_URL}/admin/enterprise/enterprisecustomer/${enterpriseCustomer.uuid}/change`}
+              variant="inverse-primary"
+              target="_blank"
+              rel="noopener noreferrer"
+              iconAfter={Launch}
+            >
+              Open in Django
+            </Button>
           </ActionRow>
-        }
+        )}
       >
-        <p className="small font-weight-bold mb-0 mt-4">
+        <p className="small font-weight-bold mb-0 mt-2">
           CUSTOMER RECORD
         </p>
         <p className="lead font-weight-bold mb-0">
@@ -35,11 +50,21 @@ const CustomerCard = ({ enterpriseCustomer }) => {
           {enterpriseCustomer.uuid}
         </p>
         <p className="small mb-1">
-          Created {enterpriseCustomer.created} • Last modified {formatDate(enterpriseCustomer.modified)}
+          Created {formatDate(enterpriseCustomer.created)} • Last modified {formatDate(enterpriseCustomer.modified)}
         </p>
       </Card.Section>
     </Card>
-  )
+  );
+};
+
+CustomerCard.propTypes = {
+  enterpriseCustomer: PropTypes.shape({
+    created: PropTypes.string,
+    modified: PropTypes.string,
+    slug: PropTypes.string,
+    name: PropTypes.string,
+    uuid: PropTypes.string,
+  }).isRequired,
 };
 
-export default CustomerCard;
+export default CustomerCard;
diff --git a/src/Configuration/Customers/CustomerDetailView/CustomerViewContainer.jsx b/src/Configuration/Customers/CustomerDetailView/CustomerViewContainer.jsx
@@ -1,22 +1,27 @@
-import { Breadcrumb, Stack, Container } from '@openedx/paragon';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import CustomerCard from "./CustomerCard";
 import { useState, useEffect, useCallback } from 'react';
-import { useParams  } from 'react-router-dom';
-import { getEnterpriseCustomer } from '../data/utils';
+import { useParams } from 'react-router-dom';
 import { logError } from '@edx/frontend-platform/logging';
+import {
+  Breadcrumb,
+  Stack,
+  Container,
+  Skeleton,
+} from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import CustomerCard from './CustomerCard';
+import { getEnterpriseCustomer } from '../data/utils';
 
 const CustomerViewContainer = () => {
   const { id } = useParams();
-  const [enterpriseCustomer, setEnterpriseCustomer] = useState([])
+  const [enterpriseCustomer, setEnterpriseCustomer] = useState({});
   const [isLoading, setIsLoading] = useState(true);
   const intl = useIntl();
 
   const fetchData = useCallback(
     async () => {
       try {
-        const enterpriseCustomer = await getEnterpriseCustomer(id);
-        setEnterpriseCustomer(enterpriseCustomer);
+        const response = await getEnterpriseCustomer({ uuid: id });
+        setEnterpriseCustomer(response[0]);
       } catch (error) {
         logError(error);
       } finally {
@@ -33,26 +38,27 @@ const CustomerViewContainer = () => {
   return (
     <div>
       <Container className="mt-5">
-        <Breadcrumb arialLabel="customer detail"
+        <Breadcrumb
+          arial-label="customer detail"
           links={[
             {
               label: intl.formatMessage({
                 id: 'lcm.budget.detail.page.breadcrumb.budgets',
                 defaultMessage: 'Budgets',
                 description: 'Breadcrumb label for the budgets page',
-              })
+              }),
             },
-            { label: `${enterpriseCustomer.name}`, href: 'here' }
+            { label: `${enterpriseCustomer.name}`, href: 'here' },
           ]}
         />
       </Container>
       <Container className="mt-4">
         <Stack gap={2}>
-          <CustomerCard enterpriseCustomer={enterpriseCustomer} />
+          {!isLoading ? <CustomerCard enterpriseCustomer={enterpriseCustomer} /> : <Skeleton height={230} />}
         </Stack>
       </Container>
     </div>
   );
-}
+};
 
-export default CustomerViewContainer;
+export default CustomerViewContainer;
diff --git a/src/Configuration/Customers/CustomerDetailView/tests/CustomerCard.test.jsx b/src/Configuration/Customers/CustomerDetailView/tests/CustomerCard.test.jsx
@@ -0,0 +1,35 @@
+/* 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 { formatDate } from '../../data/utils';
+import CustomerCard from '../CustomerCard';
+
+jest.mock('../../data/utils', () => ({
+  getEnterpriseCustomer: jest.fn(),
+  formatDate: jest.fn(),
+}));
+
+const mockData = {
+  uuid: 'test-id',
+  name: 'Test Customer Name',
+  slug: 'customer-6',
+  created: '2024-07-23T20:02:57.651943Z',
+  modified: '2024-07-23T20:02:57.651943Z',
+};
+
+describe('CustomerCard', () => {
+  it('renders customer card data', () => {
+    formatDate.mockReturnValue('July 23, 2024');
+    render(
+      <IntlProvider locale="en">
+        <CustomerCard enterpriseCustomer={mockData} />
+      </IntlProvider>,
+    );
+    expect(screen.getByText('test-id')).toBeInTheDocument();
+    expect(screen.getByText('/customer-6/')).toBeInTheDocument();
+    expect(screen.getByText('Created July 23, 2024 • Last modified July 23, 2024')).toBeInTheDocument();
+    expect(screen.getByText('Test Customer Name'));
+  });
+});
diff --git a/src/Configuration/Customers/CustomerDetailView/tests/CustomerViewContainer.test.jsx b/src/Configuration/Customers/CustomerDetailView/tests/CustomerViewContainer.test.jsx
@@ -0,0 +1,44 @@
+/* eslint-disable react/prop-types */
+import { screen, render, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { getEnterpriseCustomer, formatDate } from '../../data/utils';
+import CustomerViewContainer from '../CustomerViewContainer';
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({ id: 'test-id' }),
+}));
+
+jest.mock('../../data/utils', () => ({
+  getEnterpriseCustomer: jest.fn(),
+  formatDate: jest.fn(),
+}));
+
+describe('CustomerViewContainer', () => {
+  it('renders data', async () => {
+    getEnterpriseCustomer.mockReturnValue([{
+      uuid: 'test-id',
+      name: 'Test Customer Name',
+      slug: 'customer-6',
+      created: '2024-07-23T20:02:57.651943Z',
+      modified: '2024-07-23T20:02:57.651943Z',
+    }]);
+    formatDate.mockReturnValue('July 23, 2024');
+    render(
+      <IntlProvider locale="en">
+        <CustomerViewContainer />
+      </IntlProvider>,
+    );
+    await waitFor(() => {
+      expect(screen.getByText('test-id')).toBeInTheDocument();
+      expect(screen.getByText('/customer-6/')).toBeInTheDocument();
+      expect(screen.getByText('Created July 23, 2024 • Last modified July 23, 2024')).toBeInTheDocument();
+      const customerNameText = screen.getAllByText('Test Customer Name');
+      customerNameText.forEach(customerName => {
+        expect(customerName).toBeInTheDocument();
+      });
+    });
+  });
+});
diff --git a/src/Configuration/Customers/data/utils.js b/src/Configuration/Customers/data/utils.js
@@ -29,13 +29,10 @@ export const getSubsidyAccessPolicies = async (enterpriseId) => {
   return subsidyAccessPolicies;
 };
 
-export const getEnterpriseCustomer = async (enterpriseId) => {
-  const response = await LmsApiService.fetchEnterpriseCustomer(enterpriseId)
+export const getEnterpriseCustomer = async (options) => {
+  const response = await LmsApiService.fetchEnterpriseCustomerSupportTool(options);
   const enterpriseCustomer = camelCaseObject(response.data);
-  console.log(enterpriseCustomer)
   return enterpriseCustomer;
 };
 
-export const formatDate = (date) => {
-  return dayjs(date).utc().format('MMMM DD, YYYY');
-};
+export const formatDate = (date) => dayjs(date).utc().format('MMMM DD, YYYY');
diff --git a/src/Configuration/Customers/data/utils.test.js b/src/Configuration/Customers/data/utils.test.js
@@ -4,6 +4,8 @@ import {
   getCouponOrders,
   getCustomerAgreements,
   getSubsidyAccessPolicies,
+  getEnterpriseCustomer,
+  formatDate,
 } from './utils';
 
 jest.mock('@edx/frontend-platform/auth', () => ({
@@ -100,3 +102,30 @@ describe('getCustomerAgreements', () => {
     expect(results).toEqual(agreementsResults.data);
   });
 });
+
+describe('getEnterpriseCustomer', () => {
+  it('returns the correct data', async () => {
+    const enterpriseCustomer = {
+      data: [{
+        uuid: '0b466242-75ff-4c27-8237-680dac3737f7',
+        name: 'customer-6',
+        slug: 'customer-6',
+        active: true,
+      }],
+    };
+    getAuthenticatedHttpClient.mockImplementation(() => ({
+      get: jest.fn().mockResolvedValue(enterpriseCustomer),
+    }));
+    const results = await getEnterpriseCustomer(TEST_ENTERPRISE_UUID);
+    expect(results).toEqual(enterpriseCustomer.data);
+  });
+});
+
+describe('formatDate', () => {
+  it('returns the formatted date', async () => {
+    const date = '2024-07-23T20:02:57.651943Z';
+    const formattedDate = formatDate(date);
+    const expectedFormattedDate = 'July 23, 2024';
+    expect(expectedFormattedDate).toEqual(formattedDate);
+  });
+});
diff --git a/src/data/constants/routes.js b/src/data/constants/routes.js
@@ -14,10 +14,7 @@ const ROUTES = {
       CUSTOMERS: {
         HOME: '/enterprise-configuration/customers',
         SUB_DIRECTORY: {
-          NEW: '/enterprise-configuration/customers/new',
           VIEW: '/enterprise-configuration/customers/:id/view',
-          EDIT: '/enterprise-configuration/customers/:id/edit',
-          ERROR: '/enterprise-configuration/customers/error',
         },
       },
       PROVISIONING: {

diff --git a/src/data/services/EnterpriseApiService.js b/src/data/services/EnterpriseApiService.js
@@ -12,8 +12,6 @@ class LmsApiService {
 
   static enterpriseCustomerCatalogsWriteUrl = `${LmsApiService.enterpriseAPIBaseUrl}enterprise_customer_catalog/`;
 
-  static enterpriseCustomerUrl = `${LmsApiService.enterpriseAPIBaseUrl}enterprise-customer/`
-
   static enterpriseCustomersBasicListUrl = `${LmsApiService.baseUrl}/enterprise/api/v1/enterprise-customer/basic_list/`;
 
   static enterpriseCustomersSupportToolUrl = `${LmsApiService.baseUrl}/enterprise/api/v1/enterprise-customer/support_tool/`;
@@ -44,13 +42,6 @@ class LmsApiService {
     title,
   });
 
-  static fetchEnterpriseCustomer = (enterpriseId) => {
-    console.log(enterpriseId)
-    return LmsApiService.apiClient().get(
-      `${LmsApiService.enterpriseCustomerUrl}${enterpriseId}/`,
-    );
-  }
-
   static fetchEnterpriseCustomerSupportTool = (options) => {
     const queryParams = new URLSearchParams({
       ...options,