Create the "User Permission Search" screen

[JackHaeg]

Overview

Currently, there is no way for admins to see a list of other admins on the VRMS app, or a list of users with Project Management (PM) access to specific projects. We need to create a "User Permission Search" screen, which will host these features.

Requirements

Details

• Design the skeleton of this page: ( See page 2 of mockups ):

  • Page is contained within the "Users" tab on VRMS.
  • "User Permission Search" title at the top of the screen,
  • "Admins" and "Project Leads" filter (similar to our existing "User Search" screen)
    • NOTE - Although this filter component with both "Admins" and "Project Leads" can be created for design purposes, we are aiming to create only a functioning "Admins" component first, as this is highest priority.
  • A search bar below the filter buttons (similar to our existing "User Search" screen), which will have different functions depending on the filter selected (i.e., user selects "Admins" or "Project Leads" and is presented with a different search experience)
    • Full search bar functionality will be discussed & implemented in Create Search Display Component #1753 & Create filtered permissions data component #1754
  • Depending on filter selection ("Admins" or "Project Leads"), Admins = this screen will display a list of all admin users on VRMS, "Project Leads" = a list of all Project Leads (project managers) and their linked projects (alphabetical order based on project name and then below the search bar.
  • List of Admins (alphabetical order based on first name of user)
  • List of Project Leads (alphabetical order based on first name of user)
  • Default view on this screen will display the "Admins" filter as selected with a list of all VRMS admin users underneath the search bar - more on this in Create Search Display Component #1753

Action Items

• Create "User Permission Search" page using dummy data (refer to page 2 of Low Fi Mockup)
• Add to routes
  • /users/permission-search
• Create state for admin / Project Leads button with "Admin" as default.
• Create dummy data
• Create dummy component (defined inside this component will be replaced later)
• Filter dummy data based on Admin permission or PM permission (tied to the Admin / Project Leads button).
• Pass filter data to dummy component in prop called "data"
• Pass prop type as a string that either = admin or projectLeads
• User Permission Search consists of two slugs: /users/permission-search/admin and /users/permission-search/projects
• When navigating to /users/permission-search that page will change the navigation to add /admin by default (i.e., /users/permission-search/admin), that state is dependent on the toggle box selected between /projects and /admin
  • Note: this should not be a navigating trigger, this is meant to be a soft update of the URL.

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

[jng34]

@JackHaeg @trillium

Filtering Project Leads

Hey all, I was able to filter the Project Leads in alphabetical order according to their project names and then first name, as per the action item mentioned:

- Depending on filter selection ("Admins" or "Project Leads"), Admins = this screen will display a list of all admin users on VRMS, "Project Leads" = a list of all Project Leads (project managers) and their linked projects (alphabetical order based on project name and then below the search bar.

The dummy data I used was an array of users with the following structure (meant to mirror the current VRMS user object):

const user = {
     _id: 1,
     name: {
         firstName: "John",
         lastName: "Doe"
     },
     accessLevel: "projectLead", // or "admin"
     email: "[email protected]",
     projects: ["Home Unite Us, VRMS"] 
}

Screenshots

I looped through all the users and for each project in projects array, push a modified user object
const modifiedUser = { ...user, project: "projectName" } into a tempArray and then finally map each modified user in the frontend tempArray.map((u) => <ListItem>{u.name.firstName} {u.project}</ListItem>). The code is not exact here, so I'm not sure if this makes sense.

I was wondering if there was a more efficient way to do it, or should I continue by creating a pull request so someone can review the code? All other actionable items are complete.

[vorleakyek]

@jng34, maybe it's good to create a PR for this so that I can take a look at your code because I plan to work on #1754, which is related to your work. Thanks!

cc: @trillium, @JackHaeg

[JackHaeg]

@trillium provided guidance during Monday All Team call, @jng34 to implement recommendations and submit PR

[jng34]

@trillium Issue has been resolved! I was able to run git pull vrms development and then continue to create the PR. I think one of those commands did the trick. Thanks!

cc: @JackHaeg @vorleakyek