Create filtered permissions data component

[JackHaeg]

Overview

Currently, there is no way for admins to identify at scale which users are VRMS admins, or project managers (aka project leads) and which projects they are associated with on VRMS. Given that, we need to create a feature that enables admin users to filter & search for VRMS admins or all project leads linked to their respective projects, as well as view a full list of existing VRMS admins or project leads and their linked projects.

Action Items

• Create Filtered Permissions Data component on the “User Permission Search” screen (see Create the "User Permission Search" screen #1752)
• Takes props data and type
  • data is an array of user data
  • type is a string defining the type of data being passed
• Render a MUI Text field
  • Filter data based on text field contents.
    • Admin only filters by name string
    • Project Leads filters by name string and by project string
  • Styled after the screenshots below:

Screenshot of text field with "Admin" selected

Screenshot of text field with "Project Leads" selected

• Render data in a MUI Box component styled after the screenshots below

Screenshot of admin selected

Screenshot of Project Leads selected

• Render user information based off of type
  • Each data element renders a link to the associated user profile.
  • Admin = name and email
    • Sort order:
      • Alphabetically by first name
  • Project Leads = name and project
    • If a user is a project lead on multiple projects, list that user again for each project they are a part of.
    • Sort order:
      • alphabetically by project name first
      • alphabetically by first name within each project

Resources/Instructions

Screenshot of User Permission Search Screen mockups

• Low-fi mockups created by Bonnie / Jack - see page 2 of mockups
• Use MUI styling on all components.
• This issue is part of this epic: Epic - User Permission Search #1737

[JackHaeg]

Hi @jng34 - This issue is part of a larger epic (#1737), which requires each issue to be completed in order.

So, #1752 needs to be completed first before working on this issue. This issue will also rely on API calls that are still in development (see #1771). We will be un-assigning you from this issue for now and placing it in the icebox until these dependencies can be met.

Please feel free to pick up #1752 in the meantime! And once all the dependencies are met, you can pick up this issue again :)

[jng34]

@JackHaeg Ahh, thank you for letting me know.

[vorleakyek]

@JackHaeg, @trillium, the search result in this ticket should be based on the dummy data created in #1752. Is that correct? It looks like we're doing the API integration in the next ticket #1801.

[JackHaeg]

@vorleakyek Yes, the search results in this ticket should be based on the dummy data created in #1752. The API integration occurs in #1801