User management frontend design

[nguyen-katie]

Making the user interface for adding, editing, and removing users based on these designs: https://design.penpot.app/#/workspace?team-id=458ded29-7ef8-80f7-8006-fbe6a1e610a7&file-id=794377fd-803b-81c8-8006-fc2af12d7597&page-id=c78ced04-580e-80f2-8006-fc2ba55b1def&board-id=29a75be7-1ff3-80f6-8007-018321800082

STEPS TO SEE CHANGES:

Go to http://localhost:3001/admin/manage-users/ or http://localhost:3001/admin/add-user/

TODO:

• pending invitation status
• deleting/adding users to aws cognito
• connect manage users page to dashboard
• replace list of users from the database to instead list users from aws cognito after rust update
  • update list users query in invite form as well
• get back to Cara about delete_user conflicting with audio contributor

CHANGES:

• adjusted listUser query to include all items instead of id, displayName, and role to prevent null user changes while using userUpdate mutation

• add_user & delete_user mutation. Add user takes in a role and username, while delete user takes in a id

• Created path /admin/manage-users for admin user management board that lists every user on DAILP website with auth guard

• Edit user role feature with fully designed confirmation dialog box

• Created the following components in website/components/dialog:

  • Empty dialog component created with title, subtitle, body, and exit button (empty-dialog.tsx)
  • Confirmation dialog component created with title, subtitle, body, exit button, and cancel + submit buttons (confirmation-dialog.tsx)

• Created the following components in website/components/user-management:

  • Stylized component created for role menu (role-dropdown.tsx)
  • User list with remove user button, role change feature, all usernames, and pending invitation status

• Invite user page created that adds users to the database and rejects invalid email formats.

• Search query in user management dashboard with a select all users button that performs role switch and deletion of users in bulk.

---

[netlify]

✅ Deploy Preview for dailp ready!

Name	Link
🔨 Latest commit	8333b32
🔍 Latest deploy log	https://app.netlify.com/projects/dailp/deploys/69e2d0d6a46a5d00088003d8
😎 Deploy Preview	https://deploy-preview-672--dailp.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.