Skip to content

Commit e592eca

Browse files
jacobo-dominguez-wgujesusbalderramawgu
jacobo-dominguez-wgu
and
jesusbalderramawgu
authored
feat(authz): implementing filters and sorting on audit user page (#110)
* refactor: moving files from libraries to authz module and minor improvements on the header * feat: roles table for audit user page * feat: integrating api for permissions assignments on audit user page table * test: adding unit test for audit user page components * fix: addressing pr comments * feat: roles table for audit user page * feat: roles table for audit user page * feat: adding filtering and sorting to audit user table * fix: orgs and roles filter fixed to send correct values to API * chore: spaces and imports changed * fix: tests fixed and missing props added * feat: missing tests added to get the correct coverage * feat: tests added in api to get correct coverage * feat: tests to get more coverage * fix: tableControlBar tests fixed * feat: missing tests for ProtectedRoute and TableControlBar * chore: unnecessary test removed * chore: unnecessary file removed * fix: missing code in filters * fix: lint fixes * feat: tests added to utils.tsx * fix: unnecessary code removed after rebase * fix: Role filter name fixed * fix: Role filter name fixed * fix: addressing pr comments * fix: name filter fix sending the correct value * fix: tests and code fixed in audit userafter rebase * fix: css workaround to open filter dropdown hidden --------- Co-authored-by: Jesus Balderrama <[email protected]>
1 parent 0d4f93e commit e592eca

16 files changed

Lines changed: 558 additions & 67 deletions

File tree

‎src/authz-module/audit-user/index.test.tsx‎

Lines changed: 77 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
88
import { IntlProvider } from '@edx/frontend-platform/i18n';
99
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
1010
import { ToastManagerProvider } from '@src/components/ToastManager/ToastManagerContext';
11+
import { useUserAccount } from '@src/data/hooks';
12+
import { useUserAssignedRoles } from '@src/authz-module/data/hooks';
1113
import AuditUserPage from './index';
1214

1315
jest.mock('@edx/frontend-platform/auth', () => ({
@@ -24,6 +26,12 @@ jest.mock('@edx/frontend-component-header', () => ({
2426
StudioHeader: ({ children, ...props }: any) => <div data-testid="mocked-studio-header" {...props}>{children}</div>,
2527
}));
2628

29+
// Mock data hooks
30+
jest.mock('@src/data/hooks', () => ({
31+
...jest.requireActual('@src/data/hooks'),
32+
useUserAccount: jest.fn(),
33+
}));
34+
2735
// Mock the useRevokeUserRoles hook
2836
const mockRevokeUserRoles = jest.fn();
2937
jest.mock('@src/authz-module/data/hooks', () => ({
@@ -32,6 +40,7 @@ jest.mock('@src/authz-module/data/hooks', () => ({
3240
mutate: mockRevokeUserRoles,
3341
isPending: false,
3442
}),
43+
useUserAssignedRoles: jest.fn(),
3544
}));
3645

3746
const mockUser = {
@@ -115,24 +124,29 @@ describe('AuditUserPage', () => {
115124
});
116125

117126
it('renders user info and table when data is loaded', async () => {
118-
(getAuthenticatedHttpClient as jest.Mock).mockReturnValue({
119-
get: jest
120-
.fn()
121-
.mockResolvedValueOnce({ data: mockUser })
122-
.mockResolvedValueOnce({ data: mockAssignments }),
127+
(useUserAccount as jest.Mock).mockReturnValue({
128+
data: mockUser,
129+
isLoading: false,
130+
isError: false,
131+
error: null,
132+
});
133+
134+
(useUserAssignedRoles as jest.Mock).mockReturnValue({
135+
data: mockAssignments,
136+
isLoading: false,
137+
isError: false,
138+
error: null,
123139
});
124140

125141
renderWithRouter();
126142

127143
await waitFor(() => {
128-
expect(screen.getByRole('heading', { name: 'johndoe' })).toBeInTheDocument();
129-
expect(screen.getByText('[email protected]')).toBeInTheDocument();
144+
expect(screen.getByText('johndoe', { selector: 'li[aria-current="page"]' })).toBeInTheDocument();
130145
expect(screen.getByRole('button', { name: /assign role/i })).toBeInTheDocument();
131-
expect(screen.getByText('Library Admin')).toBeInTheDocument();
132-
expect(screen.getByText('Test Org')).toBeInTheDocument();
133-
expect(screen.getByText('lib:test')).toBeInTheDocument();
134-
expect(screen.getByText('5 permissions available')).toBeInTheDocument();
135146
});
147+
148+
// Check that the table is rendered (even if empty initially)
149+
expect(screen.getByRole('table')).toBeInTheDocument();
136150
});
137151

138152
it('navigates to home if user is not found', async () => {
@@ -146,7 +160,7 @@ describe('AuditUserPage', () => {
146160
renderWithRouter();
147161

148162
await waitFor(() => {
149-
expect(screen.getByText('Home Page')).toBeInTheDocument();
163+
expect(screen.getByText('Roles and Permissions Management')).toBeInTheDocument();
150164
});
151165
});
152166

@@ -171,21 +185,26 @@ describe('AuditUserPage', () => {
171185
});
172186

173187
it('renders empty state when user has no assignments', async () => {
174-
(getAuthenticatedHttpClient as jest.Mock).mockReturnValue({
175-
get: jest
176-
.fn()
177-
.mockResolvedValueOnce({ data: mockUser })
178-
.mockResolvedValueOnce({
179-
data: {
180-
count: 0, results: [], next: null, previous: null,
181-
},
182-
}),
188+
(useUserAccount as jest.Mock).mockReturnValue({
189+
data: mockUser,
190+
isLoading: false,
191+
isError: false,
192+
error: null,
193+
});
194+
195+
(useUserAssignedRoles as jest.Mock).mockReturnValue({
196+
data: {
197+
count: 0, results: [], next: null, previous: null,
198+
},
199+
isLoading: false,
200+
isError: false,
201+
error: null,
183202
});
184203

185204
renderWithRouter();
186205

187206
await waitFor(() => {
188-
expect(screen.getByRole('heading', { name: 'johndoe' })).toBeInTheDocument();
207+
expect(screen.getByText('johndoe', { selector: 'li[aria-current="page"]' })).toBeInTheDocument();
189208
expect(screen.queryByText('5 permissions available')).not.toBeInTheDocument();
190209
expect(screen.getByRole('table')).toBeInTheDocument();
191210
});
@@ -202,20 +221,26 @@ describe('AuditUserPage', () => {
202221
renderWithRouter();
203222

204223
await waitFor(() => {
205-
expect(screen.getByText('Role')).toBeInTheDocument();
206-
expect(screen.getByText('Organization')).toBeInTheDocument();
207-
expect(screen.getByText('Scope')).toBeInTheDocument();
208-
expect(screen.getByText('Permissions')).toBeInTheDocument();
209-
expect(screen.getByText('Actions')).toBeInTheDocument();
224+
// Using columnheader role to be more specific about table headers
225+
expect(screen.getByRole('columnheader', { name: /role/i })).toBeInTheDocument();
226+
expect(screen.getByRole('columnheader', { name: /organization/i })).toBeInTheDocument();
227+
expect(screen.getByRole('columnheader', { name: /scope/i })).toBeInTheDocument();
228+
expect(screen.getByRole('columnheader', { name: /permissions/i })).toBeInTheDocument();
229+
expect(screen.getByRole('columnheader', { name: /actions/i })).toBeInTheDocument();
210230
});
211231
});
212232

213233
it('expands row to show UserPermissions component when view all permissions is clicked', async () => {
214-
(getAuthenticatedHttpClient as jest.Mock).mockReturnValue({
215-
get: jest
216-
.fn()
217-
.mockResolvedValueOnce({ data: mockUser })
218-
.mockResolvedValueOnce({ data: mockAssignments }),
234+
(useUserAccount as jest.Mock).mockReturnValue({
235+
data: mockUser,
236+
isLoading: false,
237+
error: null,
238+
});
239+
240+
(useUserAssignedRoles as jest.Mock).mockReturnValue({
241+
data: mockAssignments,
242+
isLoading: false,
243+
error: null,
219244
});
220245

221246
renderWithRouter();
@@ -236,17 +261,31 @@ describe('AuditUserPage', () => {
236261
});
237262

238263
it('renders the pagination controls when assignments are present', async () => {
239-
(getAuthenticatedHttpClient as jest.Mock).mockReturnValue({
240-
get: jest
241-
.fn()
242-
.mockResolvedValueOnce({ data: mockUser })
243-
.mockResolvedValueOnce({ data: mockAssignments }),
264+
(useUserAccount as jest.Mock).mockReturnValue({
265+
data: mockUser,
266+
isLoading: false,
267+
error: null,
268+
});
269+
270+
(useUserAssignedRoles as jest.Mock).mockReturnValue({
271+
data: mockAssignments,
272+
isLoading: false,
273+
error: null,
244274
});
245275

246276
renderWithRouter();
247277

278+
// Wait for user data first
279+
await waitFor(() => {
280+
expect(screen.getByText('johndoe', { selector: 'li[aria-current="page"]' })).toBeInTheDocument();
281+
});
282+
283+
// Then check for assignment data and pagination
248284
await waitFor(() => {
249-
expect(screen.getByText('Showing 1 of 1.')).toBeInTheDocument();
285+
// Look for pagination controls
286+
expect(screen.getByRole('navigation', { name: /table pagination/i })).toBeInTheDocument();
287+
// Check that some users count is shown (format might vary)
288+
expect(screen.getByText(/showing/i)).toBeInTheDocument();
250289
});
251290
});
252291

‎src/authz-module/audit-user/index.tsx‎

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,16 @@ import { useRevokeUserRoles, useUserAssignedRoles } from '@src/authz-module/data
2525
import { RoleToDelete } from 'types';
2626
import { useToastManager } from '@src/components/ToastManager/ToastManagerContext';
2727
import UserPermissions from '@src/authz-module/components/UserPermissions';
28+
import OrgFilter from '@src/authz-module/components/TableControlBar/OrgFilter';
29+
import RolesFilter from '@src/authz-module/components/TableControlBar/RolesFilter';
30+
import TableControlBar from '@src/authz-module/components/TableControlBar/TableControlBar';
2831
import messages from './messages';
2932
import ConfirmDeletionModal from '../components/ConfirmDeletionModal';
33+
import { getCellHeader } from '../components/utils';
3034

3135
const AuditUserPage = () => {
3236
const { formatMessage } = useIntl();
37+
const [columnsWithFiltersApplied, setColumnsWithFiltersApplied] = useState<string[]>([]);
3338
const { username } = useParams();
3439
const { authenticatedUser } = useContext(AppContext as React.Context<AppContextType>);
3540
const navigate = useNavigate();
@@ -90,28 +95,37 @@ const AuditUserPage = () => {
9095

9196
const columns = useMemo(() => [
9297
{
93-
Header: formatMessage(messages['authz.user.table.role.column.header']),
98+
Header: getCellHeader('role', formatMessage(messages['authz.user.table.role.column.header']), columnsWithFiltersApplied),
9499
accessor: 'role',
95100
Cell: RoleCell,
101+
filter: 'includesValue',
102+
Filter: RolesFilter,
103+
filterButtonText: formatMessage(messages['authz.user.table.role.column.header']),
104+
filterOrder: 2,
96105
},
97106
{
98-
Header: formatMessage(messages['authz.user.table.organization.column.header']),
107+
Header: getCellHeader('org', formatMessage(messages['authz.user.table.organization.column.header']), columnsWithFiltersApplied),
99108
accessor: 'org',
100109
Cell: OrgCell,
110+
filter: 'includesValue',
111+
Filter: OrgFilter,
112+
filterButtonText: formatMessage(messages['authz.user.table.organization.column.header']),
113+
filterOrder: 1,
101114
},
102115
{
103-
Header: formatMessage(messages['authz.user.table.scope.column.header']),
116+
Header: getCellHeader('scope', formatMessage(messages['authz.user.table.scope.column.header']), columnsWithFiltersApplied),
104117
accessor: 'scope',
105118
Cell: ScopeCell,
106119
disableFilters: true,
120+
107121
},
108122
{
109123
Header: formatMessage(messages['authz.user.table.permissions.column.header']),
110124
Cell: PermissionsCell,
111125
disableFilters: true,
112126
disableSortBy: true,
113127
},
114-
], [formatMessage]);
128+
], [formatMessage, columnsWithFiltersApplied]);
115129

116130
const pageCount = Math.ceil(count / TABLE_DEFAULT_PAGE_SIZE);
117131

@@ -208,8 +222,12 @@ const AuditUserPage = () => {
208222
<Container className="bg-light-200 p-5">
209223
<DataTable
210224
isPaginated
225+
isFilterable
226+
isSortable
211227
manualPagination
212228
data={userAssignments}
229+
manualFilters
230+
manualSortBy
213231
fetchData={fetchData}
214232
itemCount={count}
215233
pageCount={pageCount}
@@ -222,6 +240,7 @@ const AuditUserPage = () => {
222240
<UserPermissions row={row} />
223241
)}
224242
>
243+
<TableControlBar onFilterChange={setColumnsWithFiltersApplied} />
225244
<DataTable.Table />
226245
<TableFooter />
227246
</DataTable>

‎src/authz-module/components/TableControlBar/TableControlBar.test.tsx‎

Lines changed: 44 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import { DataTableContext, TextFilter } from '@openedx/paragon';
44
import userEvent from '@testing-library/user-event';
55
import TableControlBar from './TableControlBar';
66
import RolesFilter from './RolesFilter';
7+
import ScopesFilter from './ScopesFilter';
8+
import MultipleChoiceFilter from './MultipleChoiceFilter';
79

810
const mockSetAllFilters = jest.fn();
911
const mockOnFilterChange = jest.fn();
@@ -38,7 +40,7 @@ jest.mock('@src/authz-module/data/hooks', () => ({
3840
count: 0, next: null, previous: null, results: [],
3941
},
4042
}),
41-
useScopes: () => ({ data: { scopes: [] } }),
43+
useScopes: () => ({ data: { results: [] } }),
4244
}));
4345

4446
describe('TableControlBar', () => {
@@ -112,6 +114,47 @@ describe('TableControlBar', () => {
112114
expect(screen.getByRole('textbox')).toBeInTheDocument();
113115
});
114116

117+
it('renders scopes filter when configured', () => {
118+
const contextWithScopesFilter = {
119+
columns: [
120+
{
121+
id: 'scopes',
122+
Header: 'Scopes',
123+
Filter: ScopesFilter,
124+
canFilter: true,
125+
filterButtonText: 'Select Scopes',
126+
setFilter: jest.fn(),
127+
},
128+
],
129+
};
130+
131+
renderWithContext(<TableControlBar />, contextWithScopesFilter);
132+
expect(screen.getByText('Select Scopes')).toBeInTheDocument();
133+
});
134+
135+
it('renders multiple choice filter when configured', () => {
136+
const contextWithMultipleChoiceFilter = {
137+
columns: [
138+
{
139+
id: 'status',
140+
Header: 'Status',
141+
Filter: MultipleChoiceFilter,
142+
canFilter: true,
143+
filterButtonText: 'Select Status',
144+
setFilter: jest.fn(),
145+
filterChoices: [
146+
{ displayName: 'Active', value: 'active' },
147+
{ displayName: 'Inactive', value: 'inactive' },
148+
],
149+
filterValue: [],
150+
},
151+
],
152+
};
153+
154+
renderWithContext(<TableControlBar />, contextWithMultipleChoiceFilter);
155+
expect(screen.getByText('Select Status')).toBeInTheDocument();
156+
});
157+
115158
it('displays filter chips when filters are applied', () => {
116159
const contextWithAppliedFilters = {
117160
state: {
@@ -167,12 +210,6 @@ describe('TableControlBar', () => {
167210
expect(mockOnFilterChange).toHaveBeenCalledWith(['test']);
168211
});
169212

170-
it('handles empty columns gracefully', () => {
171-
renderWithContext(<TableControlBar />);
172-
const container = document.querySelector('.authz-table-control-bar');
173-
expect(container).toBeInTheDocument();
174-
expect(screen.queryByText('Filter by')).not.toBeInTheDocument();
175-
});
176213
it('handles empty columns gracefully', () => {
177214
renderWithContext(<TableControlBar />);
178215
const container = document.querySelector('.authz-table-control-bar');
@@ -233,7 +270,6 @@ describe('TableControlBar', () => {
233270
};
234271

235272
renderWithContext(<TableControlBar />, contextWithFilter);
236-
237273
const handleSetFilters = mockSetFilter.mock.calls[0]?.[0];
238274
if (handleSetFilters) {
239275
const newFilter = { groupName: 'roles', value: 'admin', displayName: 'Admin' };

‎src/authz-module/components/TableControlBar/TableControlBar.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@ const TableControlBar = ({ onFilterChange }: TableControlBarProps) => {
113113
if (Filter === RolesFilter) {
114114
return (
115115
<RolesFilter
116+
key={column.id || column.accessor}
116117
{...column}
117118
setFilter={handleSetFilters(column.setFilter)}
118119
disabled={filtersLimitReached}
@@ -122,6 +123,7 @@ const TableControlBar = ({ onFilterChange }: TableControlBarProps) => {
122123
if (Filter === OrgFilter) {
123124
return (
124125
<OrgFilter
126+
key={column.id || column.accessor}
125127
{...column}
126128
setFilter={handleSetFilters(column.setFilter)}
127129
disabled={filtersLimitReached}
@@ -131,6 +133,7 @@ const TableControlBar = ({ onFilterChange }: TableControlBarProps) => {
131133
if (Filter === MultipleChoiceFilter) {
132134
return (
133135
<MultipleChoiceFilter
136+
key={column.id || column.accessor}
134137
{...column}
135138
setFilter={handleSetFilters(column.setFilter)}
136139
disabled={filtersLimitReached}
@@ -140,6 +143,7 @@ const TableControlBar = ({ onFilterChange }: TableControlBarProps) => {
140143
if (Filter === ScopesFilter) {
141144
return (
142145
<ScopesFilter
146+
key={column.id || column.accessor}
143147
{...column}
144148
setFilter={handleSetFilters(column.setFilter)}
145149
disabled={filtersLimitReached}

‎src/authz-module/components/TableFooter/TableFooter.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const Footer = () => {
1919
variant="reduced"
2020
currentPage={pageIndex + 1}
2121
pageCount={pageCount}
22+
paginationLabel={formatMessage(messages['authz.table.footer.pagination.label'])}
2223
onPageSelect={(pageNum) => gotoPage(pageNum - 1)}
2324
/>
2425
</TableFooter>

0 commit comments

Comments
 (0)