New portafly Account settings > Users page

Mockups:
https://marvelapp.com/ab13h96/screen/67417391 (no tabs)
https://marvelapp.com/ab13h96/screen/67417389 (tabs)

New page merges two previous pages in a single one using tabs:
Account settings > Users > Listing
Account settings > Users > Invitations

Tabs

Depending on the user, page will show:

Pro/admin account: Users list and Invitations tabs (https://marvelapp.com/ab13h96/screen/67417389)
Regular account: only Users list (no tab needed) (https://marvelapp.com/ab13h96/screen/67417389)

Users list

• It shows a table with all users
  • 1 user = 1 row
  • Columns:
    • Name
      • Name column links to Edit page
    • Email
    • Role
    • Permission groups
  • Current user shows different options:
    • Not selectable for bulk deletion
    • In Role column, suffix "(you)" is added, example: admin (you)
    • Link to Personal details instead of Edit user page
• Should be paginated
• Should be selectable
• Should be sortable
• Should allow bulk actions (delete)
• Should allow filtering

Actions:

• Delete user
  • Requires confirmation (modal)
• Delete multiple users
  • Requires confirmation (modal)
• Select user/s
  • Select one or multiple rows
• Sort table
  • Sorts by: Name, Email, Role
• Filter
  • By: Name, Email, Role, Permissions
• Link to edit user or personal details page
  • Current user, link to Personal details
  • Not current user, link to edit user page
• Paginate
  • Default to 5 elements per page
• Action buttons (3 vertical dots)
  • Not current user
    • Link to Edit page
    • Delete button
  • Current user:
    • Link to Personal details
    • Delete button NOT available

Invitations

• Shows a link (Invite a new User) at top right
• Shows a table with all invitations sent
  • 1 invitation = 1 row
  • Columns:
    • Recipient
    • Sent on (UTC)
    • Accepted? (UTC)
      • If invitation is not accepted, shows link to Resend
• Should be paginated
• Should be selectable
• Should be sortable
• Should allow bulk actions (delete)
• Should allow filtering

Actions:

• Send a new Invitation
• Delete invitation
  • Requires confirmation (modal)
• Delete multiple invitations
  • Requires confirmation (modal)
• Select invitations
  • Select one or multiple rows
• Sort table
  • Sorts by: Recipient, Sent on (UTC)
• Filter
  • By: Recipient, Accepted?
• Paginate
  • Default to 5 elements per page
• Action buttons (3 vertical dots)
  • Delete button

Info needed:

To implement the features above we need the following info of the User:

• Role
• Permissions
• Is current user?
• Can delete users?
• Path to invitation link
• Is authenticated through SSO ? (Any difference in the UI when SSO acontini?)
• Invitation sent date
• Invitation accepted ?
• Invitation accepted date
• User can invite new users?

Components needed:

• Users and invitations (table)
  • https://www.patternfly.org/v4/documentation/react/components/table
• Dropdown
  • https://www.patternfly.org/v4/documentation/react/components/dropdown
• Button
  • https://www.patternfly.org/v4/documentation/react/components/button/
• Search and Filter
  • https://www.patternfly.org/v4/documentation/react/components/datatoolbar
• Pagination
  • https://www.patternfly.org/v4/documentation/react/components/pagination/
• Modal
  • https://www.patternfly.org/v4/documentation/react/components/modal
• Icons
  • https://www.patternfly.org/v4/design-guidelines/styles/icons