Merge branch 'master' into mashal-m/update_lockfile

openedx · Sep 11, 2023 · 41d656f · 41d656f
2 parents 9b49466 + 4da552c
commit 41d656f
Show file tree

Hide file tree

Showing 36 changed files with 1,081 additions and 69 deletions.
diff --git a/.env.development b/.env.development
@@ -40,6 +40,7 @@ FEATURE_SETTINGS_PAGE_LMS_TAB='true'
 FEATURE_SETTINGS_PAGE_APPEARANCE_TAB='true'
 FEATURE_LEARNER_CREDIT_MANAGEMENT='true'
 FEATURE_CONTENT_HIGHLIGHTS='true'
+FEATURE_API_CREDENTIALS_TAB='true'
 HOTJAR_APP_ID=''
 HOTJAR_VERSION='6'
 HOTJAR_DEBUG=''

diff --git a/src/components/ContactCustomerSupportButton/index.jsx b/src/components/ContactCustomerSupportButton/index.jsx
@@ -31,7 +31,7 @@ ContactCustomerSupportButton.propTypes = {
 
 ContactCustomerSupportButton.defaultProps = {
   children: 'Contact support',
-  variant: 'btn-outline-primary',
+  variant: 'outline-primary',
 };
 
 export default ContactCustomerSupportButton;
diff --git a/src/components/forms/FormWorkflow.tsx b/src/components/forms/FormWorkflow.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import type { Dispatch } from 'react';
 import {
-  ActionRow, Button, FullscreenModal, Hyperlink, Stepper, useToggle,
+  ActionRow, Button, FullscreenModal, Stepper, useToggle,
 } from '@edx/paragon';
 import { Launch } from '@edx/paragon/icons';
 
@@ -14,6 +14,7 @@ import { HELP_CENTER_LINK, SUBMIT_TOAST_MESSAGE } from '../settings/data/constan
 import UnsavedChangesModal from '../settings/SettingsLMSTab/UnsavedChangesModal';
 import ConfigErrorModal from '../settings/ConfigErrorModal';
 import { channelMapping, pollAsync } from '../../utils';
+import HelpCenterButton from '../settings/HelpCenterButton';
 
 export const WAITING_FOR_ASYNC_OPERATION = 'WAITING FOR ASYNC OPERATION';
 
@@ -201,13 +202,9 @@ const FormWorkflow = <FormConfigData extends unknown>({
           className="stepper-modal"
           footerNode={(
             <ActionRow>
-              <Hyperlink
-                destination={helpCenterLink}
-                className="btn btn-outline-tertiary"
-                target="_blank"
-              >
+              <HelpCenterButton url={helpCenterLink}>
                 Help Center: Integrations
-              </Hyperlink>
+              </HelpCenterButton>
               <ActionRow.Spacer />
               <Button variant="tertiary" onClick={onCancel}>Cancel</Button>
               {nextButtonConfig && (

diff --git a/src/components/learner-credit-management/BudgetCard-V2.jsx b/src/components/learner-credit-management/BudgetCard-V2.jsx
@@ -19,6 +19,7 @@ const BudgetCard = ({
   offer,
   enterpriseUUID,
   enterpriseSlug,
+  enableLearnerPortal,
 }) => {
   const {
     start,
@@ -143,6 +144,8 @@ const BudgetCard = ({
             tableData={offerRedemptions}
             fetchTableData={fetchOfferRedemptions}
             enterpriseUUID={enterpriseUUID}
+            enterpriseSlug={enterpriseSlug}
+            enableLearnerPortal={enableLearnerPortal}
           />
         )}
     </Stack>
@@ -158,6 +161,7 @@ BudgetCard.propTypes = {
   }).isRequired,
   enterpriseUUID: PropTypes.string.isRequired,
   enterpriseSlug: PropTypes.string.isRequired,
+  enableLearnerPortal: PropTypes.bool.isRequired,
 };
 
 export default BudgetCard;
diff --git a/src/components/learner-credit-management/LearnerCreditAllocationTable.jsx b/src/components/learner-credit-management/LearnerCreditAllocationTable.jsx
@@ -1,24 +1,31 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import dayjs from 'dayjs';
-import {
-  DataTable, useMediaQuery, breakpoints,
-} from '@edx/paragon';
-
+import { DataTable, Hyperlink } from '@edx/paragon';
+import { getConfig } from '@edx/frontend-platform/config';
 import TableTextFilter from './TableTextFilter';
 import EmailAddressTableCell from './EmailAddressTableCell';
 import { getCourseProductLineText } from '../../utils';
 
 export const PAGE_SIZE = 20;
 export const DEFAULT_PAGE = 0; // `DataTable` uses zero-index array
 
+const getEnrollmentDetailsAccessor = row => ({
+  courseTitle: row.courseTitle,
+  userEmail: row.userEmail,
+  courseKey: row.courseKey,
+});
+
+const FilterStatus = (rest) => <DataTable.FilterStatus showFilteredFields={false} {...rest} />;
+
 const LearnerCreditAllocationTable = ({
   isLoading,
   tableData,
   fetchTableData,
   enterpriseUUID,
+  enterpriseSlug,
+  enableLearnerPortal,
 }) => {
-  const isDesktopTable = useMediaQuery({ minWidth: breakpoints.extraLarge.minWidth });
   const defaultFilter = [];
 
   return (
@@ -29,32 +36,46 @@ const LearnerCreditAllocationTable = ({
       manualPagination
       isFilterable
       manualFilters
-      showFiltersInSidebar={isDesktopTable}
       isLoading={isLoading}
       defaultColumnValues={{ Filter: TableTextFilter }}
+      FilterStatusComponent={FilterStatus}
+      /* eslint-disable */
       columns={[
         {
-          Header: 'Email Address',
-          accessor: 'userEmail',
-          // eslint-disable-next-line react/prop-types, react/no-unstable-nested-components
-          Cell: ({ row }) => <EmailAddressTableCell row={row} enterpriseUUID={enterpriseUUID} />,
+          Header: 'Date',
+          accessor: 'enrollmentDate',
+          Cell: ({ row }) => dayjs(row.values.enrollmentDate).format('MMM D, YYYY'),
+          disableFilters: true,
         },
         {
-          Header: 'Course Name',
-          accessor: 'courseTitle',
+          Header: 'Enrollment details',
+          accessor: getEnrollmentDetailsAccessor,
+          Cell: ({ row }) => (
+            <>
+              <EmailAddressTableCell row={row} enterpriseUUID={enterpriseUUID} />
+              <div>
+                {enableLearnerPortal ? (
+                <Hyperlink
+                  destination={`${getConfig().ENTERPRISE_LEARNER_PORTAL_URL}/${enterpriseSlug}/course/${row.original.courseKey}`}
+                  target="_blank"
+                >
+                  {row.original.courseTitle}
+                </Hyperlink>
+                ) : (
+                  row.original.courseTitle
+                )}
+              </div>
+            </>
+          ),
+          disableFilters: false,
+          disableSortBy: true,
         },
         {
-          Header: 'Course Price',
+          Header: 'Amount',
           accessor: 'courseListPrice',
           Cell: ({ row }) => `$${row.values.courseListPrice}`,
           disableFilters: true,
         },
-        {
-          Header: 'Date Spent',
-          accessor: 'enrollmentDate',
-          Cell: ({ row }) => dayjs(row.values.enrollmentDate).format('MMMM DD, YYYY'),
-          disableFilters: true,
-        },
         {
           Header: 'Product',
           accessor: 'courseProductLine',
@@ -78,7 +99,6 @@ const LearnerCreditAllocationTable = ({
       itemCount={tableData.itemCount}
       pageCount={tableData.pageCount}
       EmptyTableComponent={
-        // eslint-disable-next-line react/no-unstable-nested-components
         () => {
           if (isLoading) {
             return null;
@@ -89,9 +109,12 @@ const LearnerCreditAllocationTable = ({
     />
   );
 };
+/* eslint-enable */
 
 LearnerCreditAllocationTable.propTypes = {
   enterpriseUUID: PropTypes.string.isRequired,
+  enterpriseSlug: PropTypes.string.isRequired,
+  enableLearnerPortal: PropTypes.bool.isRequired,
   isLoading: PropTypes.bool.isRequired,
   tableData: PropTypes.shape({
     results: PropTypes.arrayOf(PropTypes.shape({

diff --git a/src/components/learner-credit-management/MultipleBudgetsPage.jsx b/src/components/learner-credit-management/MultipleBudgetsPage.jsx
@@ -22,6 +22,7 @@ const PAGE_TITLE = 'Learner Credit';
 const MultipleBudgetsPage = ({
   enterpriseUUID,
   enterpriseSlug,
+  enableLearnerPortal,
 }) => {
   const { offers, isLoading } = useContext(EnterpriseSubsidiesContext);
 
@@ -66,6 +67,7 @@ const MultipleBudgetsPage = ({
         offers={offers}
         enterpriseUUID={enterpriseUUID}
         enterpriseSlug={enterpriseSlug}
+        enableLearnerPortal={enableLearnerPortal}
       />
     </>
   );
@@ -74,11 +76,13 @@ const MultipleBudgetsPage = ({
 const mapStateToProps = state => ({
   enterpriseUUID: state.portalConfiguration.enterpriseId,
   enterpriseSlug: state.portalConfiguration.enterpriseSlug,
+  enableLearnerPortal: state.portalConfiguration.enableLearnerPortal,
 });
 
 MultipleBudgetsPage.propTypes = {
   enterpriseUUID: PropTypes.string.isRequired,
   enterpriseSlug: PropTypes.string.isRequired,
+  enableLearnerPortal: PropTypes.bool.isRequired,
 };
 
 export default connect(mapStateToProps)(MultipleBudgetsPage);
diff --git a/src/components/learner-credit-management/MultipleBudgetsPicker.jsx b/src/components/learner-credit-management/MultipleBudgetsPicker.jsx
@@ -12,6 +12,7 @@ const MultipleBudgetsPicker = ({
   offers,
   enterpriseUUID,
   enterpriseSlug,
+  enableLearnerPortal,
 }) => (
   <Stack>
     <Row>
@@ -22,6 +23,7 @@ const MultipleBudgetsPicker = ({
             offer={offer}
             enterpriseUUID={enterpriseUUID}
             enterpriseSlug={enterpriseSlug}
+            enableLearnerPortal={enableLearnerPortal}
           />
         ))}
       </Col>
@@ -33,6 +35,7 @@ MultipleBudgetsPicker.propTypes = {
   offers: PropTypes.arrayOf(PropTypes.shape()).isRequired,
   enterpriseUUID: PropTypes.string.isRequired,
   enterpriseSlug: PropTypes.string.isRequired,
+  enableLearnerPortal: PropTypes.bool.isRequired,
 };
 
 export default MultipleBudgetsPicker;
diff --git a/src/components/learner-credit-management/data/hooks.js b/src/components/learner-credit-management/data/hooks.js
@@ -63,18 +63,15 @@ const applySortByToOptions = (sortBy, options) => {
 };
 
 const applyFiltersToOptions = (filters, options) => {
-  const userSearchQuery = filters?.find(filter => filter.id === 'userEmail')?.value;
-  const courseTitleSearchQuery = filters?.find(filter => filter.id === 'courseTitle')?.value;
   const courseProductLineSearchQuery = filters?.find(filter => filter.id === 'courseProductLine')?.value;
-  if (userSearchQuery) {
-    Object.assign(options, { search: userSearchQuery });
-  }
-  if (courseTitleSearchQuery) {
-    Object.assign(options, { searchCourse: courseTitleSearchQuery });
-  }
+  const searchQuery = filters?.find(filter => filter.id.toLowerCase() === 'enrollment details')?.value;
+
   if (courseProductLineSearchQuery) {
     Object.assign(options, { courseProductLine: courseProductLineSearchQuery });
   }
+  if (searchQuery) {
+    Object.assign(options, { searchAll: searchQuery });
+  }
 };
 
 export const useOfferRedemptions = (enterpriseUUID, offerId) => {

diff --git a/src/components/learner-credit-management/data/tests/hooks.test.js b/src/components/learner-credit-management/data/tests/hooks.test.js
@@ -105,8 +105,7 @@ describe('useOfferRedemptions', () => {
           { id: 'enrollmentDate', desc: true },
         ],
         filters: [
-          { id: 'userEmail', value: mockOfferEnrollments[0].user_email },
-          { id: 'courseTitle', value: mockOfferEnrollments[0].course_title },
+          { id: 'Enrollment Details', value: mockOfferEnrollments[0].user_email },
         ],
       });
     });
@@ -118,8 +117,7 @@ describe('useOfferRedemptions', () => {
       pageSize: 20,
       offerId: mockEnterpriseOffer.id,
       ordering: '-enrollment_date', // default sort order
-      search: mockOfferEnrollments[0].user_email,
-      searchCourse: mockOfferEnrollments[0].course_title,
+      searchAll: mockOfferEnrollments[0].user_email,
       ignoreNullCourseListPrice: true,
     };
     expect(EnterpriseDataApiService.fetchCourseEnrollments).toHaveBeenCalledWith(

diff --git a/src/components/learner-credit-management/data/utils.js b/src/components/learner-credit-management/data/utils.js
@@ -68,6 +68,7 @@ export const transformUtilizationTableResults = results => results.map(result =>
   enrollmentDate: result.enrollmentDate,
   courseProductLine: result.courseProductLine,
   uuid: uuidv4(),
+  courseKey: result.courseKey,
 }));
 
 /**

diff --git a/src/components/learner-credit-management/tests/BudgetCard.test.jsx b/src/components/learner-credit-management/tests/BudgetCard.test.jsx
@@ -141,7 +141,6 @@ describe('<BudgetCard />', () => {
       const elementsWithTestId = screen.getAllByTestId('view-budget');
       const firstElementWithTestId = elementsWithTestId[0];
       await waitFor(() => userEvent.click(firstElementWithTestId));
-      expect(screen.getByText('Filters'));
       expect(screen.getByText('No results found'));
     });
   });