Add Role Management UI

[bears4barrett]

This PR includes:

• Roles as a new tab in Control Panel / Settings
• Adds Edit Role functionality
• Adds Role Member management
• Delete Role functionality

Screenshots:

• Roles Overview

• Edit Role:

• Assign members to role:

[gemini-code-assist]

Summary of Changes

Hello @bears4barrett, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces a comprehensive Role Management UI within the Control Panel's Settings section. It enables administrators to create, view, edit, and delete custom roles, as well as manage the assignment and removal of members to these roles, enhancing granular control over user permissions.

Highlights

• New "Roles" Tab: A dedicated tab has been added to the Control Panel/Settings for managing roles.
• Role CRUD Operations: Users can now create, view details of, edit (name and description), and delete roles directly from the UI.
• Member Assignment & Removal: Functionality to assign new members to roles and remove existing members from roles has been implemented.
• Dynamic Control Panel Header: The Control Panel's header has been refactored to dynamically display titles and provide a back navigation option, improving user experience within nested settings views.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a comprehensive UI for role management, including viewing, editing, and deleting roles, as well as managing role members. The implementation is solid, leveraging React state management and new API endpoints effectively. My review includes suggestions for improving performance, state management, and code clarity by addressing issues like inefficient data fetching, missing hook dependencies, and redundant code. These changes will enhance the robustness and maintainability of the new feature.

[mlanlazc]

Could you attach some screenshots?

[bears4barrett]

Could you attach some screenshots?

I have attached some screenshots to the PR description.

[mlanlazc]

One small remark about the UI is that border-radius is not the same across different elements (e.g. "Search members" field and the "Assign Members" button, or input fields for name and description). If you could just tweak the border-radius on Search field and align it with the less rounded elements, it would be great.

[mlanlazc]

Could you add a reason why we're doing this? To add more emphasis and to prevent somebody from deleting this line without reason.

[bears4barrett]

Will add in the next PR.