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

openedx · Aug 6, 2024 · 81e5d0b · 81e5d0b
2 parents e433e78 + e541f84
commit 81e5d0b
Show file tree

Hide file tree

Showing 9 changed files with 64 additions and 47 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
@@ -112,6 +112,6 @@ describe('CustomerDetails', () => {
     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/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/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,