Skip to content

Commit

Permalink
feat: add flex group filtering on lpr page
Browse files Browse the repository at this point in the history
  • Loading branch information
@omar-sarfraz
omar-sarfraz committed Dec 31, 2024
1 parent 383989c commit a0918ad
Show file tree
Hide file tree
Showing 14 changed files with 2,491 additions and 547 deletions.
27 changes: 27 additions & 0 deletions src/components/Admin/Admin.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,10 @@ const store = mockStore({
loading: null,
budgets: null,
},
enterpriseGroups: {
loading: null,
groups: [],
},
});

const AdminWrapper = props => (
Expand Down Expand Up @@ -86,10 +90,13 @@ const AdminWrapper = props => (
subsidy_access_policy_uuid: '8d6503dd-e40d-42b8-442b-37dd4c5450e3',
subsidy_access_policy_display_name: 'Everything',
}]}
groups={[]}
fetchDashboardInsights={() => {}}
clearDashboardInsights={() => {}}
fetchEnterpriseBudgets={() => {}}
clearEnterpriseBudgets={() => {}}
fetchEnterpriseGroups={() => {}}
clearEnterpriseGroups={() => {}}
/>
</IntlProvider>
</Provider>
Expand All @@ -108,6 +115,7 @@ describe('<Admin />', () => {
numberOfUsers: 3,
insights: null,
budgets: [],
groups: [],
};

describe('renders correctly', () => {
Expand Down Expand Up @@ -401,6 +409,25 @@ describe('<Admin />', () => {
expect(tree).toMatchSnapshot();
});
});

describe('with enterprise groups data', () => {
it('renders groups correctly', () => {
const groups = [{
enterprise_group_uuid: 'test-group-uuid',
enterprise_group_name: 'test-group-name',
}];
const tree = renderer
.create((
<AdminWrapper
{...baseProps}
groups={groups}
/>
))
.toJSON();

expect(tree).toMatchSnapshot();
});
});
});

describe('handle changes to enterpriseId prop', () => {
Expand Down
128 changes: 89 additions & 39 deletions src/components/Admin/AdminSearchForm.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ class AdminSearchForm extends React.Component {
componentDidUpdate(prevProps) {
const {
searchParams: {
searchQuery, searchCourseQuery, searchDateQuery, searchBudgetQuery,
searchQuery, searchCourseQuery, searchDateQuery, searchBudgetQuery, searchGroupQuery,
},
} = this.props;
const {
Expand All @@ -26,11 +26,13 @@ class AdminSearchForm extends React.Component {
searchCourseQuery: prevSearchCourseQuery,
searchDateQuery: prevSearchDateQuery,
searchBudgetQuery: prevSearchBudgetQuery,
searchGroupQuery: prevSearchGroupQuery,
},
} = prevProps;

if (searchQuery !== prevSearchQuery || searchCourseQuery !== prevSearchCourseQuery
|| searchDateQuery !== prevSearchDateQuery || searchBudgetQuery !== prevSearchBudgetQuery) {
|| searchDateQuery !== prevSearchDateQuery || searchBudgetQuery !== prevSearchBudgetQuery
|| searchGroupQuery !== prevSearchGroupQuery) {

Check warning on line 35 in src/components/Admin/AdminSearchForm.jsx

View check run for this annotation

Codecov / codecov/patch

src/components/Admin/AdminSearchForm.jsx#L35 

Added line #L35 was not covered by tests
this.handleSearch();
}
}
Expand Down Expand Up @@ -60,23 +62,69 @@ class AdminSearchForm extends React.Component {
updateUrl(navigate, location.pathname, updateParams);
}

onGroupSelect(event) {
const { navigate, location } = this.props;
const updateParams = {
group_uuid: event.target.value,
page: 1,
};
updateUrl(navigate, location.pathname, updateParams);
}

render() {
const {
intl,
tableData,
budgets,
groups,
searchParams: {
searchCourseQuery, searchDateQuery, searchQuery, searchBudgetQuery,
searchCourseQuery, searchDateQuery, searchQuery, searchBudgetQuery, searchGroupQuery,
},
} = this.props;

const courseTitles = Array.from(new Set(tableData.map(en => en.course_title).sort()));
const courseDates = Array.from(new Set(tableData.map(en => en.course_start_date).sort().reverse()));
const columnWidth = budgets?.length ? 'col-md-3' : 'col-md-6';
const columnWidth = (budgets?.length || groups?.length) ? 'col-md-3' : 'col-md-6';

return (
<div className="row">
<div className="col-12 pr-md-0 mb-0">
<div className="row w-100 m-0">
{groups?.length ? (
<div className="col-12 col-md-3 my-2 my-md-0 px-0 px-md-2 px-lg-3">
<Form.Group>
<Form.Label className="search-label mb-2">
<FormattedMessage
id="admin.portal.lpr.filter.by.group.dropdown.label"
defaultMessage="Filter by group"
description="Label for the group filter dropdown in the admin portal LPR page."
/>
</Form.Label>
<Form.Control
className="w-100 groups-dropdown"
as="select"
value={searchGroupQuery}
onChange={e => this.onGroupSelect(e)}
>
<option value="">
{intl.formatMessage({
id: 'admin.portal.lpr.filter.by.group.dropdown.option.all.groups',
defaultMessage: 'All Groups',
description: 'Label for the all groups option in the group filter dropdown in the admin portal LPR page.',
})}
</option>
{groups.map(group => (
<option
value={group.enterprise_group_uuid}
key={group.enterprise_group_uuid}
>
{group.enterprise_group_name}
</option>
))}
</Form.Control>
</Form.Group>
</div>
) : null}
<div className="col-12 col-md-3 px-0 pl-0 pr-md-2 pr-lg-3">
<Form.Group>
<Form.Label className="search-label mb-2">
Expand Down Expand Up @@ -170,6 +218,41 @@ class AdminSearchForm extends React.Component {
</Form.Control>
</Form.Group>
</div>
{budgets?.length ? (
<div className="col-12 col-md-3 my-2 my-md-0 px-0 px-md-2 px-lg-3">
<Form.Group>
<Form.Label className="search-label mb-2">
<FormattedMessage
id="admin.portal.lpr.filter.by.budget.dropdown.label"
defaultMessage="Filter by budget"
description="Label for the budget filter dropdown in the admin portal LPR page."
/>
</Form.Label>
<Form.Control
className="w-100 budgets-dropdown"
as="select"
value={searchBudgetQuery}
onChange={e => this.onBudgetSelect(e)}
>
<option value="">
{intl.formatMessage({
id: 'admin.portal.lpr.filter.by.budget.dropdown.option.all.budgets',
defaultMessage: 'All budgets',
description: 'Label for the all budgets option in the budget filter dropdown in the admin portal LPR page.',
})}
</option>
{budgets.map(budget => (
<option
value={budget.subsidy_access_policy_uuid}
key={budget.subsidy_access_policy_uuid}
>
{budget.subsidy_access_policy_display_name}
</option>
))}
</Form.Control>
</Form.Group>
</div>
) : null }
<div className={classNames('col-12 my-2 my-md-0 px-0 px-md-2 px-lg-3', columnWidth)}>
<Form.Label id="search-email-label" className="mb-2">
<FormattedMessage
Expand All @@ -195,41 +278,6 @@ class AdminSearchForm extends React.Component {
inputProps={{ 'data-hj-suppress': true }}
/>
</div>
{budgets?.length && (
<div className="col-12 col-md-3 my-2 my-md-0 px-0 px-md-2 px-lg-3">
<Form.Group>
<Form.Label className="search-label mb-2">
<FormattedMessage
id="admin.portal.lpr.filter.by.budget.dropdown.label"
defaultMessage="Filter by budget"
description="Label for the budget filter dropdown in the admin portal LPR page."
/>
</Form.Label>
<Form.Control
className="w-100 budgets-dropdown"
as="select"
value={searchBudgetQuery}
onChange={e => this.onBudgetSelect(e)}
>
<option value="">
{intl.formatMessage({
id: 'admin.portal.lpr.filter.by.budget.dropdown.option.all.budgets',
defaultMessage: 'All budgets',
description: 'Label for the all budgets option in the budget filter dropdown in the admin portal LPR page.',
})}
</option>
{budgets.map(budget => (
<option
value={budget.subsidy_access_policy_uuid}
key={budget.subsidy_access_policy_uuid}
>
{budget.subsidy_access_policy_display_name}
</option>
))}
</Form.Control>
</Form.Group>
</div>
)}
</div>
</div>
</div>
Expand All @@ -248,9 +296,11 @@ AdminSearchForm.propTypes = {
searchCourseQuery: PropTypes.string,
searchDateQuery: PropTypes.string,
searchBudgetQuery: PropTypes.string,
searchGroupQuery: PropTypes.string,
}).isRequired,
tableData: PropTypes.arrayOf(PropTypes.shape({})),
budgets: PropTypes.arrayOf(PropTypes.shape({})),
groups: PropTypes.arrayOf(PropTypes.shape({})),
navigate: PropTypes.func,
location: PropTypes.shape({
pathname: PropTypes.string,
Expand Down
29 changes: 29 additions & 0 deletions src/components/Admin/AdminSearchForm.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ const DEFAULT_PROPS = {
searchEnrollmentsList: () => {},
searchParams: {},
tableData: [],
groups: [],
};

const AdminSearchFormWrapper = props => (
Expand Down Expand Up @@ -81,4 +82,32 @@ describe('<AdminSearchForm />', () => {
},
);
});

it('select the correct group', () => {
const groupUUID = '8d6503dd-e40d-42b8-442b-37dd4c5450e3';
const groups = [{
enterprise_group_uuid: groupUUID,
enterprise_group_name: 'Test',
}];
const props = {
...DEFAULT_PROPS,
groups,
location: { pathname: '/admin/learners' },
};
const wrapper = mount(
<AdminSearchFormWrapper {...props} />,
);
const selectElement = wrapper.find('.groups-dropdown select');

selectElement.simulate('change', { target: { value: groupUUID } });
expect(updateUrl).toHaveBeenCalled();
expect(updateUrl).toHaveBeenCalledWith(
undefined,
'/admin/learners',
{
group_uuid: groupUUID,
page: 1,
},
);
});
});
Loading

0 comments on commit a0918ad

Please sign in to comment.