From bc687d19e27ff3b307f2b2f5982c3d6a53a69d7f Mon Sep 17 00:00:00 2001 From: omar-sarfraz Date: Tue, 24 Dec 2024 16:45:36 +0500 Subject: [PATCH] feat: add flex group filtering on lpr page --- src/components/Admin/Admin.test.jsx | 30 + src/components/Admin/AdminSearchForm.jsx | 128 +- src/components/Admin/AdminSearchForm.test.jsx | 28 + .../Admin/__snapshots__/Admin.test.jsx.snap | 3385 ++++++++++++++--- src/components/Admin/index.jsx | 12 +- src/containers/AdminPage/AdminPage.test.jsx | 4 + src/containers/AdminPage/index.jsx | 9 + src/data/actions/enterpriseGroups.js | 41 + src/data/constants/enterpriseGroups.js | 11 + src/data/reducers/enterpriseGroups.js | 47 + src/data/reducers/enterpriseGroups.test.js | 80 + src/data/reducers/index.js | 2 + src/data/services/EnterpriseDataApiService.js | 6 + src/utils.js | 3 + 14 files changed, 3118 insertions(+), 668 deletions(-) create mode 100644 src/data/actions/enterpriseGroups.js create mode 100644 src/data/constants/enterpriseGroups.js create mode 100644 src/data/reducers/enterpriseGroups.js create mode 100644 src/data/reducers/enterpriseGroups.test.js diff --git a/src/components/Admin/Admin.test.jsx b/src/components/Admin/Admin.test.jsx index 0cd7685cf4..622b293ecb 100644 --- a/src/components/Admin/Admin.test.jsx +++ b/src/components/Admin/Admin.test.jsx @@ -58,6 +58,10 @@ const store = mockStore({ loading: null, budgets: null, }, + enterpriseGroups: { + loading: null, + groups: [], + }, }); const AdminWrapper = props => ( @@ -86,10 +90,16 @@ const AdminWrapper = props => ( subsidy_access_policy_uuid: '8d6503dd-e40d-42b8-442b-37dd4c5450e3', subsidy_access_policy_display_name: 'Everything', }]} + groups={[{ + enterprise_group_uuid: '7d6503dd-e40d-42b8-442b-37dd4c5450e3', + enterprise_group_name: 'Test Group', + }]} fetchDashboardInsights={() => {}} clearDashboardInsights={() => {}} fetchEnterpriseBudgets={() => {}} clearEnterpriseBudgets={() => {}} + fetchEnterpriseGroups={() => {}} + clearEnterpriseGroups={() => {}} /> @@ -108,6 +118,7 @@ describe('', () => { numberOfUsers: 3, insights: null, budgets: [], + groups: [], }; describe('renders correctly', () => { @@ -401,6 +412,25 @@ describe('', () => { 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(( + + )) + .toJSON(); + + expect(tree).toMatchSnapshot(); + }); + }); }); describe('handle changes to enterpriseId prop', () => { diff --git a/src/components/Admin/AdminSearchForm.jsx b/src/components/Admin/AdminSearchForm.jsx index e93626f166..6b9bd1e469 100644 --- a/src/components/Admin/AdminSearchForm.jsx +++ b/src/components/Admin/AdminSearchForm.jsx @@ -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 { @@ -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) { this.handleSearch(); } } @@ -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 (
+ {groups?.length ? ( +
+ + + + + this.onGroupSelect(e)} + > + + {groups.map(group => ( + + ))} + + +
+ ) : null}
@@ -170,6 +218,41 @@ class AdminSearchForm extends React.Component {
+ {budgets?.length ? ( +
+ + + + + this.onBudgetSelect(e)} + > + + {budgets.map(budget => ( + + ))} + + +
+ ) : null }
- {budgets?.length && ( -
- - - - - this.onBudgetSelect(e)} - > - - {budgets.map(budget => ( - - ))} - - -
- )}
@@ -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, diff --git a/src/components/Admin/AdminSearchForm.test.jsx b/src/components/Admin/AdminSearchForm.test.jsx index dada76b682..840a7ac1a2 100644 --- a/src/components/Admin/AdminSearchForm.test.jsx +++ b/src/components/Admin/AdminSearchForm.test.jsx @@ -81,4 +81,32 @@ describe('', () => { }, ); }); + + it('select the correct group', () => { + const groupUUID = '7d6503dd-e40d-42b8-442b-37dd4c5450e3'; + const groups = [{ + enterprise_group_uuid: groupUUID, + enterprise_group_name: 'Test Group', + }]; + const props = { + ...DEFAULT_PROPS, + groups, + location: { pathname: '/admin/learners' }, + }; + const wrapper = mount( + , + ); + 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, + }, + ); + }); }); diff --git a/src/components/Admin/__snapshots__/Admin.test.jsx.snap b/src/components/Admin/__snapshots__/Admin.test.jsx.snap index 5b2458ef53..466902e810 100644 --- a/src/components/Admin/__snapshots__/Admin.test.jsx.snap +++ b/src/components/Admin/__snapshots__/Admin.test.jsx.snap @@ -1657,6 +1657,42 @@ exports[` renders correctly with dashboard analytics data renders # cou
+
+
+ +
+ +
+
+
@@ -1665,7 +1701,7 @@ exports[` renders correctly with dashboard analytics data renders # cou > @@ -1674,7 +1710,7 @@ exports[` renders correctly with dashboard analytics data renders # cou > renders correctly with dashboard analytics data renders # cou
+
+
+ +
+ +
+
+
@@ -1769,7 +1841,7 @@ exports[` renders correctly with dashboard analytics data renders # cou >
-
-
- -
- -
-
-
@@ -1891,7 +1927,7 @@ exports[` renders correctly with dashboard analytics data renders # cou >