fix: lms access link and budget filter (#1229)

fix: lms access link and budget filter
openedx · May 21, 2024 · 3fcadf5 · 3fcadf5
1 parent 093c977
commit 3fcadf5
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 38 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>
@@ -114,7 +114,7 @@ const BudgetActions = ({
  values={{ apostrophe: "'" }}
  />
  </p>
- <Link to={`/${enterpriseSlug}/admin/settings/lms`}>
+ <Link to={`/${enterpriseSlug}/admin/settings/access`}>
  <Button variant="outline-primary">
  <FormattedMessage
  id="lcm.budget.detail.page.overview.budget.actions.configure.access"
@@ -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
@@ -85,6 +85,7 @@ const MultipleBudgetsPicker = ({
  description: 'Header for the status column in the budget picker page.',
  }),
  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 = {