Team members table with sorting, pagination and filtering.#124
Team members table with sorting, pagination and filtering.#124jacobo-dominguez-wgu wants to merge 15 commits intoopenedx:masterfrom
Conversation
openedx-webhooks
added
open-source-contribution
|
Thanks for the pull request, @jacobo-dominguez-wgu! This repository is currently maintained by Once you've gone through the following steps feel free to tag them in a comment and let them know that your changes are ready for engineering review. 🔘 Get product approvalIf you haven't already, check this list to see if your contribution needs to go through the product review process.
🔘 Provide contextTo help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:
🔘 Get a green buildIf one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green. DetailsWhere can I find more information?If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources: When can I expect my changes to be merged?Our goal is to get community contributions seen and reviewed as efficiently as possible. However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:
💡 As a result it may take up to several weeks or months to complete a review and merge your PR. |
jacobo-dominguez-wgu
force-pushed
the
team-members-table
branch
2 times, most recently
from
f3b1032 to
99d89d7
Compare
|
Sorry I haven't been following the frontend closely, just a question about the system scoped roles. Are these just users who have explicitly been given permissions in the given course/library, or would it include everyone with Staff / Superuser? I'm just concerned about it since very large instances could have dozens of those users and easily overwhelm the useful information. |
In my understanding system roles like Global Staff and Super Admin are shown with global access to all scopes and all organization like this (one row per user): |
Yes, we are working on the assumption that the filter will be enough to solve this problem. We are developing under the assumption that large and complex instances are less common than their counterparts; we may change the approach if we get stronger feedback for the next iteration. |
mphilbrick211
added
the
mao-onboarding
|
@gviedma-aulasneo would it be worth considering making the system users filtered by default since (I assume) there is no action that can be taken on them? |
We can discuss it, of course. The main reason they are listed here is transparency around who has access to the courses and libraries. I will add, only as context, that we even discussed whether this should be visible only to course/library admins and that there was also some discussion about placing them in a separate tab. It seems less likely that we would change the designs for Verawood, and forcing this now would likely result in a poor UI. The current UI responds to filters by showing that they are applied, so using a default filter here would look a bit hacky. In practice, this would mean having a default view with all non-superuser roles selected as filters from the start, which does not seem like the best approach right now. The designs for Willow are still being refined. A new way of grouping the list entries by user will help declutter the current view and make it easier to read. Unless you consider this to be something we should give more thought to, we can discuss showing superadmins in a separate list there. |
jacobo-dominguez-wgu
force-pushed
the
team-members-table
branch
from
99d89d7 to
8686a4d
Compare
jacobo-dominguez-wgu
force-pushed
the
team-members-table
branch
2 times, most recently
from
219ca51 to
af062a3
Compare
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## master #124 +/- ##
==========================================
+ Coverage 95.35% 95.63% +0.27%
==========================================
Files 53 68 +15
Lines 1055 1466 +411
Branches 208 323 +115
==========================================
+ Hits 1006 1402 +396
- Misses 46 62 +16
+ Partials 3 2 -1 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
jacobo-dominguez-wgu
force-pushed
the
team-members-table
branch
5 times, most recently
from
15956b3 to
4c2dc05
Compare
jacobo-dominguez-wgu
force-pushed
the
team-members-table
branch
from
4c2dc05 to
d6ea3d9
Compare
jacobo-dominguez-wgu
requested review from
arbrandes,
bra-i-am,
dcoa,
jesusbalderramawgu and
rodmgwgu
dcoa
left a comment
dcoa
left a comment
There was a problem hiding this comment.
The code looks good and works.
Just some minor fixes.
| Tabs: ({ children }: { children: React.ReactNode }) => <div data-testid="tabs">{children}</div>, | ||
| })); | ||
|
|
||
| jest.mock('@src/authz-module/team-members/TeamMembersTable', () => function MockTeamMembersTable() { |
There was a problem hiding this comment.
Lets try to avoid mocking components, you can setup the test:
import { screen } from '@testing-library/react';
import { renderWithAllProviders } from '@src/setupTest';
import { useAllRoleAssignments, useOrgs, useScopes } from '@src/authz-module/data/hooks';
import { ToastManagerProvider } from '@src/authz-module/libraries-manager/ToastManagerContext';
import AuthzHome from './index';
jest.mock('@src/authz-module/data/hooks', () => ({
useAllRoleAssignments: jest.fn(),
useOrgs: jest.fn(),
useScopes: jest.fn(),
}));
const emptyResponse = {
data: { results: [], count: 0, next: null, previous: null },
error: null,
isLoading: false,
refetch: jest.fn(),
};
beforeEach(() => {
(useAllRoleAssignments as jest.Mock).mockReturnValue(emptyResponse);
(useOrgs as jest.Mock).mockReturnValue(emptyResponse);
(useScopes as jest.Mock).mockReturnValue(emptyResponse);
});
const renderAuthzHome = () => renderWithAllProviders(
<ToastManagerProvider>
<AuthzHome />
</ToastManagerProvider>,
);And just test the accessibility assertions
expect(screen.getByRole('heading', { name: 'Library Team Management' })).toBeInTheDocument();
// Or we can use messages to make it more dynamic, it seems the final page header still need some modifications in terms of title
expect(screen.getByText(messages['authz.breadcrumb.root'].defaultMessage)).toBeInTheDocument();There was a problem hiding this comment.
I have refactored the tests to stop mocking components and focus on user centric assertions.
| return ( | ||
| <td> | ||
| {DJANGO_MANAGED_ROLES.includes(row.original.role) ? formatMessage(messages['authz.user.table.org.all.organizations.label']) : value} | ||
| </td> |
There was a problem hiding this comment.
| return ( | |
| <td> | |
| {DJANGO_MANAGED_ROLES.includes(row.original.role) ? formatMessage(messages['authz.user.table.org.all.organizations.label']) : value} | |
| </td> | |
| return ( | |
| <span> | |
| {DJANGO_MANAGED_ROLES.includes(row.original.role) ? formatMessage(messages['authz.user.table.org.all.organizations.label']) : value} | |
| </span> |
Otherwise we end with nested td the defautlt dataTable + this one
| }; | ||
|
|
||
| const RoleCell = ({ value, cell }: ExtendedCellProps) => ( | ||
| <td {...cell.getCellProps({ 'data-role': MAP_ROLE_KEY_TO_LABEL[value] || '' })}> |
There was a problem hiding this comment.
| filterButtonText, filterValue, setFilter, disabled, | ||
| }: ScopesFilterProps) => { | ||
| const { formatMessage } = useIntl(); | ||
| const [searchValue, setSearchValue] = React.useState<string | undefined>(undefined); |
There was a problem hiding this comment.
Just to keep the same pattern across the code.
| const [searchValue, setSearchValue] = React.useState<string | undefined>(undefined); | |
| const [searchValue, setSearchValue] = useState<string | undefined>(undefined); |
| @@ -0,0 +1,347 @@ | |||
| import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth'; | |||
There was a problem hiding this comment.
Sorry, I could not find the comment, the link was not working.
There was a problem hiding this comment.
Ohh I think it's because was marked as solved. This is not blocking but I still consider important to discuss it.
Let me just copy and paste the comment:
I'm not against introducing this test but I don't think it will introduce much value either.
I explain better, the functions usually call getAuthenticatedHttpClient and return a camel cased value, the logic is simple.
In addition, the hooks test follows the same pattern as here, mocking getAuthenticatedHttpClient, with the idea to cover the api during the test coverage. because of that, I prefer modify them if we find improvements than creating a solo api test suite.
| @@ -0,0 +1,433 @@ | |||
| import { PermissionMetadata, ResourceMetadata } from 'types'; | |||
There was a problem hiding this comment.
This is just a question to understand how the code with evolve, will will have distinct features per domain [libraries, courses, etc.], right?
There was a problem hiding this comment.
This is just a global comment but lets try to define and coordinate the location of object information (constants) across the PRs (https://github.com/openedx/frontend-app-admin-console/pull/109/changes#r3097406467)
@bra-i-am @jacobo-dominguez-wgu
Either using the role-permission folder, or grouping by domain/object as here.
There was a problem hiding this comment.
Oh! actually this constants file is not being used, forgot to remove it.
| @@ -35,8 +35,7 @@ const AuthzHome = () => { | |||
| className="bg-light-100 px-5" | |||
| > | |||
| <Tab eventKey="team" title={intl.formatMessage(messages['authz.tabs.team'])} className="p-5"> | |||
There was a problem hiding this comment.
| <Tab eventKey="team" title={intl.formatMessage(messages['authz.tabs.team'])} className="p-5"> | |
| <Tab eventKey="team" title={intl.formatMessage(messages['authz.tabs.team'])} className="p-5 bg-light-200"> |
There was a problem hiding this comment.
I also notice the design has a padding for the table you can achieve that by adding
.authz-module {
--height-action-divider: 30px;
.pgn__data-table-wrapper {
padding: 1rem;
}
// ...........
}
@dcoa Thanks for your review, I have addressed your suggestions. |
dcoa
left a comment
dcoa
left a comment
There was a problem hiding this comment.
Thanks for addressing the comments, one last comment (not blocking but still important as decision for the app patterns)
Thank you for your feedback, agreed! I've removed the test already |
7 participants
Description
Creating the team members table with new columns with filtering, sorting with pagination.
It closes #79
and all of its subissues: #81, #82, #83, #84
Includes code from #107(Already merged)Figma design
Pending things:
Unit testing.✅Integration with API when is ready.✅A couple of TODOs.✅Change row background color for django roles.✅Warning
Will be on draft status until the required endpoints are completed.This PR requires some the endpoints proposed in the section
"Proposed Endpoint for M2"How to test it
Pre - requisites
http://apps.local.openedx.io:2025/admin-console/authz/libraries/:libraryId,or can assign roles by directly using the api endpoint http://local.openedx.io:8000/api-docs/#/authz/authz_v1_roles_users_update (while the new role assignation wizard is ready feat: add step 1 for the role assignment wizard #109 and feat: add step 2 for the role assignment wizard #111)
Testing instructions
Scenario 1:
Scenario 2:
Verify it meets the acceptance criteria and matches the figma design