Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Admin: Use InteractiveTable for user and team tables #74821

Merged
merged 33 commits into from
Sep 27, 2023
Merged

Conversation

Clarity-89
Copy link
Contributor

@Clarity-89 Clarity-89 commented Sep 13, 2023

What is this feature?

Use the new InteractiveTable component for user and team tables in admin.
The new component has been introduced for the following pages:

  • /admin/users - both All and Organization users
  • /org/teams
  • /admin/orgs/edit/ORG_ID

Why do we need this feature?

To make the UI more consistent and enable sorting for these tables.

Which issue(s) does this PR fix?:

Fixes #74658

Special notes for your reviewer:
Not a part of this PR and will need a follow-up work:

  • The design for the Delete button needs to be updated to be consistent with the design system.
  • Due to the way the roles are loaded for the role pickers, a flickering can be seen when loading the tables.

Please check that:

  • It works as expected from a user's perspective.
  • If this is a pre-GA feature, it is behind a feature toggle.
  • The docs are updated, and if this is a notable improvement, it's added to our What's New doc.

@Clarity-89
Copy link
Contributor Author

I've tested this, and it mostly looks good! The sorting feature is great!

The only issue that I spotted is that with Enterprise RBAC role-picker the user tables for both /admin/users org view and admin/orgs/edit/ORG_ID view did not fit in the screen. I didn't see this issue with teams.

Before the change: Screenshot 2023-09-14 at 15 19 26

After the change: Screenshot 2023-09-14 at 15 20 47

Should be fixed by #74888

@Clarity-89
Copy link
Contributor Author

I have added back the separate pagination component, seeing as the table will need to be modified to support backend pagination and sorting (will be done in a separate PR).

export const Avatar = ({ src, alt }: AvatarProps) => {
const styles = useStyles2(getStyles);

if (!src) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this for the case where an image hasn't been loaded yet?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's a carry over from the previous implementation where the image src type is optional, I guess it can be missing in some cases.

@Clarity-89 Clarity-89 merged commit 87ced17 into main Sep 27, 2023
15 checks passed
@Clarity-89 Clarity-89 deleted the admin/sort-tables branch September 27, 2023 05:56
otilor pushed a commit to otilor/grafana that referenced this pull request Sep 28, 2023
* Admin: Use InteractiveTable

* Admin: Fix pagination

* Admin: Use CellWrapper

* Admin: Split components

* Admin: Separate OrgUsersTable

* Admin: Remove UsersTable

* Admin: Use the new table for TeamList

* Admin: Cleanup TeamList page

* Admin: Add edit team action

* Admin: Use explicit edit action instead of a link wrapper

* Admin: Fix responsive styles

* Cleanup

* Remove redundant sort

* Add item key

* Fix icon styles

* Set loading by default

* Use separate pagination component

* Use default sorting functionality

* Fix merge conflicts

* Update betterer

* Move pagination inside OrgUsersTable.tsx

* Disable sort if results have more than 1 page

* Update betterer results

* Use CSS objects

* More style fixes

* Update betterer
rwwiv pushed a commit that referenced this pull request Oct 2, 2023
* Admin: Use InteractiveTable

* Admin: Fix pagination

* Admin: Use CellWrapper

* Admin: Split components

* Admin: Separate OrgUsersTable

* Admin: Remove UsersTable

* Admin: Use the new table for TeamList

* Admin: Cleanup TeamList page

* Admin: Add edit team action

* Admin: Use explicit edit action instead of a link wrapper

* Admin: Fix responsive styles

* Cleanup

* Remove redundant sort

* Add item key

* Fix icon styles

* Set loading by default

* Use separate pagination component

* Use default sorting functionality

* Fix merge conflicts

* Update betterer

* Move pagination inside OrgUsersTable.tsx

* Disable sort if results have more than 1 page

* Update betterer results

* Use CSS objects

* More style fixes

* Update betterer
mildwonkey pushed a commit that referenced this pull request Oct 4, 2023
* Admin: Use InteractiveTable

* Admin: Fix pagination

* Admin: Use CellWrapper

* Admin: Split components

* Admin: Separate OrgUsersTable

* Admin: Remove UsersTable

* Admin: Use the new table for TeamList

* Admin: Cleanup TeamList page

* Admin: Add edit team action

* Admin: Use explicit edit action instead of a link wrapper

* Admin: Fix responsive styles

* Cleanup

* Remove redundant sort

* Add item key

* Fix icon styles

* Set loading by default

* Use separate pagination component

* Use default sorting functionality

* Fix merge conflicts

* Update betterer

* Move pagination inside OrgUsersTable.tsx

* Disable sort if results have more than 1 page

* Update betterer results

* Use CSS objects

* More style fixes

* Update betterer
@zerok zerok modified the milestones: 10.2.x, 10.2.0 Oct 23, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Sort the /org/teams, /org/users, and /admin/users tables
6 participants