fix: lms access link and budget filter

openedx · May 17, 2024 · 3f44946 · 3f44946
1 parent 58488e3
commit 3f44946
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 37 deletions.
diff --git a/src/components/learner-credit-management/BudgetDetailPageOverviewAvailability.jsx b/src/components/learner-credit-management/BudgetDetailPageOverviewAvailability.jsx
@@ -30,7 +30,7 @@ const BudgetActions = ({
   const { enterpriseSlug, enterpriseAppPage } = useParams();
   const { subsidyAccessPolicyId } = useBudgetId();
   const { data: subsidyAccessPolicy } = useSubsidyAccessPolicy(subsidyAccessPolicyId);
-  const { data: appliesToAllContexts } = useEnterpriseGroup(subsidyAccessPolicy);
+  const { data: enterpriseGroup } = useEnterpriseGroup(subsidyAccessPolicy);
   const { data: enterpriseCustomer } = useEnterpriseCustomer(enterpriseId);
   const { openInviteModal } = useContext(BudgetDetailPageContext);
   const supportUrl = configuration.ENTERPRISE_SUPPORT_URL;
@@ -95,15 +95,15 @@ const BudgetActions = ({
 
   if (!isAssignable) {
     if (enterpriseGroupsV1) {
-      if (isLmsBudget(enterpriseCustomer?.activeIntegrations.length, appliesToAllContexts)) {
+      if (isLmsBudget(enterpriseCustomer?.activeIntegrations.length, enterpriseGroup?.appliesToAllContexts)) {
         return (
           <div className="h-100 d-flex align-items-center pt-4 pt-lg-0">
             <div>
               <h3>
                 <FormattedMessage
                   id="lcm.budget.detail.page.overview.budget.actions.manage.edx.in.integrated.learning.platform"
                   defaultMessage="Manage edX in your integrated learning platform"
-                  description="Titlte which tells to customer to manage edX in their integrated learning platform"
+                  description="Title which tells to customer to manage edX in their integrated learning platform"
                 />
               </h3>
               <p>
@@ -126,36 +126,41 @@ const BudgetActions = ({
             </div>
           </div>
         );
-      } if (appliesToAllContexts === true) {
-        <div className="h-100 d-flex align-items-center pt-4 pt-lg-0">
-          <div>
-            <h3>
-              <FormattedMessage
-                id="lcm.budget.detail.page.overview.budget.actions.manage.edx.for.organization"
-                defaultMessage="Manage edX for your organization"
-                description="Title for the budget actions section on the budget detail page overview"
-              />
-            </h3>
-            <p>
-              <FormattedMessage
-                id="lcm.budget.detail.page.overview.budget.actions.all.people.choose.learn"
-                defaultMessage="All people in your organization can choose what to learn
-                from the catalog and spend from the available balance to enroll."
-                description="Decription which tells that user can choose from the catalog and spend from the available balance to enroll"
-              />
-            </p>
-            <Link to={`/${enterpriseSlug}/admin/settings/access`}>
-              <Button variant="outline-primary">
+      }
+
+      if (enterpriseGroup?.appliesToAllContexts === true) {
+        return (
+          <div className="h-100 d-flex align-items-center pt-4 pt-lg-0">
+            <div>
+              <h3>
                 <FormattedMessage
-                  id="lcm.budget.detail.page.overview.budget.actions.configure.access.general"
-                  defaultMessage="Configure access"
-                  description="Configure access button on the budget detail page overview"
+                  id="lcm.budget.detail.page.overview.budget.actions.manage.edx.for.organization"
+                  defaultMessage="Manage edX for your organization"
+                  description="Title for the budget actions section on the budget detail page overview"
                 />
-              </Button>
-            </Link>,
+              </h3>
+              <p>
+                <FormattedMessage
+                  id="lcm.budget.detail.page.overview.budget.actions.all.people.choose.learn"
+                  defaultMessage="All people in your organization can choose what to learn
+                from the catalog and spend from the available balance to enroll."
+                  description="Description which tells that user can choose from the catalog and spend from the available balance to enroll"
+                />
+              </p>
+              <Link to={`/${enterpriseSlug}/admin/settings/access`}>
+                <Button variant="outline-primary">
+                  <FormattedMessage
+                    id="lcm.budget.detail.page.overview.budget.actions.configure.access.general"
+                    defaultMessage="Configure access"
+                    description="Configure access button on the budget detail page overview"
+                  />
+                </Button>
+              </Link>
+            </div>
           </div>
-        </div>;
+        );
       }
+
       return (
         <div className="h-100 d-flex align-items-center pt-4 pt-lg-0">
           <div>

diff --git a/src/components/learner-credit-management/MultipleBudgetsPicker.jsx b/src/components/learner-credit-management/MultipleBudgetsPicker.jsx
@@ -72,6 +72,7 @@ const MultipleBudgetsPicker = ({
           {
             Header: 'Status',
             accessor: 'status',
+            filter: 'includesValue',
             Filter: CheckboxFilter,
             filterChoices: reducedChoices,
           },

diff --git a/src/components/learner-credit-management/tests/MultipleBudgetsPage.test.jsx b/src/components/learner-credit-management/tests/MultipleBudgetsPage.test.jsx
@@ -9,6 +9,7 @@ import {
   render,
 } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
+import userEvent from '@testing-library/user-event';
 
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 
@@ -36,14 +37,34 @@ jest.mock('../../EnterpriseSubsidiesContext/data/hooks', () => ({
   ...jest.requireActual('../../EnterpriseSubsidiesContext/data/hooks'),
   useEnterpriseBudgets: jest.fn().mockReturnValue({
     data: {
-      budgets: [{
-        source: 'subsidy',
-        id: '392f1fe1-ee91-4f44-b174-13ecf59866eb',
-        name: 'Subsidy 2 for Executive Education (2U) Integration QA',
-        start: '2023-06-07T15:38:29Z',
-        end: '2024-06-07T15:38:30Z',
-        isCurrent: true,
-      },
+      budgets: [
+        {
+          source: 'subsidy',
+          id: '392f1fe1-ee91-4f44-b174-13ecf59866eb',
+          name: 'Subsidy 2 for Executive Education (2U) Integration QA',
+          start: '2023-06-07T15:38:29Z',
+          end: '2024-06-07T15:38:30Z',
+          isCurrent: true,
+          isRetired: false,
+        },
+        {
+          source: 'subsidy',
+          id: '392f1fe1-ee91-4f44-b174-13ecf59866e3',
+          name: 'Subsidy 3',
+          start: '2023-06-07T15:38:29Z',
+          end: '2024-06-07T15:38:30Z',
+          isCurrent: true,
+          isRetired: true,
+        },
+        {
+          source: 'subsidy',
+          id: '392f1fe1-ee91-4f44-b174-13ecf59866ef',
+          name: 'Subsidy 4',
+          start: '2023-06-07T15:38:29Z',
+          end: '2024-06-07T15:38:30Z',
+          isCurrent: true,
+          isRetired: false,
+        },
       ],
     },
   }),
@@ -88,6 +109,13 @@ describe('<MultipleBudgetsPage />', () => {
   it('budgets for your organization', () => {
     render(<MultipleBudgetsPageWrapper enterpriseUUID={enterpriseUUID} enterpriseSlug={enterpriseId} />);
     expect(screen.getByText('Budgets'));
+    const filterButton = screen.getByText('Filters');
+    userEvent.click(filterButton);
+    const checkboxes = screen.queryAllByRole('checkbox');
+    checkboxes.forEach(checkbox => {
+      userEvent.click(checkbox);
+    });
+    expect(screen.getByText('Showing 3 of 3.')).toBeInTheDocument();
   });
   it('Shows loading spinner', () => {
     const enterpriseSubsidiesContextValue = {