Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: New user panel: First phase #30236

Closed
wants to merge 92 commits into from
Closed

feat: New user panel: First phase #30236

wants to merge 92 commits into from

Conversation

rique223
Copy link
Contributor

@rique223 rique223 commented Aug 31, 2023

Proposed changes (including videos or screenshots)

Jira epic: WM-51

Demo video: https://www.loom.com/share/210fcb90a4724ae39d59c8405b645814?sid=c66bd484-935a-403e-aa48-c0bfa7ecbfae

This PR describes the first phase of a complete refactor of the users page by:

  • Dividing the page in 4 tabs:

    • All: Lists all users and changes the status column to Registration status;
    • Pending: Lists users that either havent been activated by an admin yet or that have been activated but did not login for the first time, has a Pending action column that lists which action the given user is pending and added two new buttons, Activate so that the admin can quickly activate an user without having to access inner menus and the Resend welcome email so that the user can resend the welcome email and remind users that they can login for the first time;
    • Active: Lists the active users (Users that have been activated and logged in for the first time);
    • Deactivated: Lists the deactivatedf users (Users that have logged in for the first time but for some reason where deactivated);
  • Implementing a multi select roles filter;

  • Refactoring the contextual bar by:

    • Changing the order of the inputs to a more logical one;
    • Adding the reason for joining info when the Manually activate new users setting is enabled;
  • Refactoring the New user contextual bar by:

    • Changing the order of the inputs to a more logical one;
    • Changing the verified toggle label to Mark email as verified and adding an info icon that explains the functionality of that toggle;
    • Dividing the Set random password and send by email toggle into two radios, one for setting the password randomly and the other to set the password manually;
    • Hidding the password field behind the new set random password radios and only showing it when the Set manually radio has been checked;
    • Creating a Confirm password input;
    • Implementing the PasswordVerifier component in those password fields;
    • Implementing a Hide additional fields at the end of the contextual bar;
    • Changing the Reset and Save buttons to a single Add user button;
    • Changing the invalid email address error message to Please ensure that the email address is valid;
    • Implementing a post-save confirmation page that allows the admin to create more than one user in sequence;
    • Implementing verifications to make sure email related form inputs are disabled when the SMTP is not configured;
    • Implementing a verification to disable the Mark email as verified input and to warn the user that email verification is not needed in case the Require email verification to login setting is disabled;
    • Changing the Only allow verified users to login / Make sure you have correct SMTP to Require email verification to login / Ensure SMTP is configured to enable
  • Refactoring the back-end by:

    • Creating a whole new endpoint called users.list/:status in order not to break probable unknown places that use the old endpoint;
    • Adding a status url param to the endpoint that receives the current tab and filters the returned users list to have only users that belong to that given tab;
    • Adding a roles query param to the endpoint that receives a list of role name strings and filters the returned users list to have only users that have at least one of those roles;
    • Adding the lastLogin, type and reason fields to the user objects;
    • Correctly implement the view-full-other-user-info setting on the users list;
    • Adding JSON Schema verification to the request params and implementing proper typing to those;
    • Refactoring the users.list endpoint typing to a more concise version of it´

List of jira tasks closed in this PR and their respective PRs:

WM-117 -> feat: User Panel > Tab ALL

WM-164 -> feat: pending tab new

WM-86 -> feat: Implement users page active tab

WM-87 -> feat: Implement users page deactivated tab

WM-88 -> feat: New create user contextual bar

WM-185 -> feat: endpoints to new users panel

Obs.: The contextual bar refactors and the filters are considered under the tab tasks.

Issue(s)

Steps to test or reproduce

Further comments

* all tab initial

* remove "-" fallback

* change 'status' to 'registration status'

---------

Co-authored-by: dougfabris <[email protected]>
Co-authored-by: Felipe <[email protected]>
@changeset-bot
Copy link

changeset-bot bot commented Aug 31, 2023

🦋 Changeset detected

Latest commit: 0b47cda

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 31 packages
Name Type
@rocket.chat/meteor Minor
@rocket.chat/rest-typings Minor
@rocket.chat/core-typings Minor
@rocket.chat/ui-client Major
@rocket.chat/core-services Patch
@rocket.chat/ui-contexts Major
@rocket.chat/account-service Patch
@rocket.chat/authorization-service Patch
@rocket.chat/ddp-streamer Patch
@rocket.chat/stream-hub-service Patch
@rocket.chat/api-client Patch
@rocket.chat/ddp-client Patch
@rocket.chat/omnichannel-services Patch
@rocket.chat/presence Patch
rocketchat-services Patch
@rocket.chat/cron Patch
@rocket.chat/gazzodown Major
@rocket.chat/livechat Patch
@rocket.chat/model-typings Patch
@rocket.chat/omnichannel-transcript Patch
@rocket.chat/presence-service Patch
@rocket.chat/queue-worker Patch
@rocket.chat/license Patch
@rocket.chat/pdf-worker Patch
@rocket.chat/web-ui-registration Major
@rocket.chat/fuselage-ui-kit Major
@rocket.chat/ui-avatar Major
@rocket.chat/ui-video-conf Major
@rocket.chat/uikit-playground Patch
@rocket.chat/models Patch
@rocket.chat/instance-status Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@codecov
Copy link

codecov bot commented Aug 31, 2023

Codecov Report

Attention: Patch coverage is 60.41667% with 114 lines in your changes missing coverage. Please review.

Project coverage is 54.55%. Comparing base (51f90dc) to head (0b47cda).
Report is 885 commits behind head on develop.

Additional details and impacted files

Impacted file tree graph

@@             Coverage Diff             @@
##           develop   #30236      +/-   ##
===========================================
+ Coverage    54.47%   54.55%   +0.08%     
===========================================
  Files         2275     2286      +11     
  Lines        50143    50343     +200     
  Branches     10228    10285      +57     
===========================================
+ Hits         27314    27464     +150     
- Misses       20350    20370      +20     
- Partials      2479     2509      +30     
Flag Coverage Δ
e2e 53.55% <62.35%> (+0.20%) ⬆️
e2e-api 39.88% <78.57%> (-0.07%) ⬇️
unit 76.44% <21.05%> (-0.04%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

* feat: ✨ Filter users list by active users

Implemented the necessary resources to filter the list of users and to return only those who are active, when the active tab is enabled.

* feat: ✨ Implement new roles filter in the admin users page

Implemented a new filter on the users' page that retrieves the roles list and creates a dropdown menu. When any of its options is selected, it will filter the users' list to display only those with the selected roles. Additionally, I made some minor adjustments to the MultiSelectCustom component and introduced some new hooks.

* WIP: Remove filters

* feat: ✨ WIP: Implement new actions menu for users page table

* feat: ✨ Finish users table menu

Completed the implementation of the users table actions menu by preventing the propagation of the click event that triggered the opening of the contextual bar when the menu was clicked. Also, ensured that the contextual bar only opens when the "Enter" or "Space" keys are used for keyboard navigation and enhanced the options menu in the contextual bar as specified in Figma.

* refactor: ♻️ Remove status badge from contextual bar and reorg

Removed the status from the users page contextual bar (the need to remove this may not be concrete, for now it will be only commented until the final decision is made). Also changed the order of the contextual bar info and changed some minor styles to follow figma specs.

* Typecheck

* Re-add icon back to InfoPanelTitle

* Hide registration status and justify actions menu

* Review, reintroduce contextual bar full name and status
rique223 and others added 21 commits October 5, 2023 11:01
* feat: ✨ New SetRandomPassword UI/ux

Created a new ui logic for the SetRandomPassword form with 2 radio buttons instead of a toggle and changed the email field to be the first one in the create user contextual bar.

* feat: ✨ Implement password confirmation and password verification

Implemented the password verification and confirmation flows in the users page contextual bar, changed some types to follow the changes, removed the old Verified toggle and componentized the setRandomPassword radios.

* feat: ✨ Create briefing field in new users contextual bar

Created a briefing text warning users of the new tab layout functionality in the new user contextual bar of the admin users page.

* feat: ✨ Create visual part of hide custom fields button

Created a button that will hide or show the custom fields of the new users form on click. Also added an icon to the user form title, changed the password field position in the form, removed the addon icons from some fields and created a new briefing message in the top of the form.

* feat: ✨ Create logic for 'hide additional fields' button

Created the logic that hides the custom fields of the new user form when the 'hide additional fields' button is clicked

* feat: ✨ Implement multiple user creation flow

Added a new screen to enhance the user creation experience. This screen appears immediately after you create a new user. On this page, you have two options: you can either complete the process and view the user you just created, or you can return to the form to create another user without exiting the contextual bar. Additionally, I've made some minor logic improvements and removed commented-out code.

* feat: ✨ Make user created contextual bar page count dynamic

Implemented logic to the user created contextual bar, now for each user created without exiting or refreshing the page the number of the message will be incremented by 1. Also stopped using the old Field.Component components in favor of their standalone versions and made the message of the Hide Additional Fields button change to Show additional fields when the fields are hidden.

* feat: ✨ Implement label tooltip in the user creation page email field

Implemented a tooltip in the email verification field of the user creation contextual bar that explains what toggling on this field will do. Also implemented a way to use a single value in order to controll the setRandomPassword radios instead of two and added the necessary entries in the i18n to follow the aforementioned changes.

* refactor: ♻️ Change "Only allow verified users to login" setting copy

Changed the title of the "Only allow verified users to login" setting to "Require email verification to login" and its description from "Make sure you have correct SMTP settings to use this feature" to "Ensure SMTP is configured to enable this feature"

* refactor: ♻️ Ensure requirePasswordChange is true when setRandomPassword is true

Created some logic to make sure the requirePasswordChange field will be true even if the user changed it to false and then changed setRandomPassword to true. Also changed some strings and sizes to follow figma specs.

* refactor: ♻️ Remove useEffect + reset usage of new user creation form

Removed un-optimal usage of the useEffect hook together with RHF's reset function, implemented a function that changes the requirePasswordChange value based on which setRandomPassword radio is checked, switched resetField for setValue to make sure the value is always correct, changed some rendering logic to make sure the first state of some fields is correct and optimized some parts of the getInitialValues function return.

* refactor: ♻️ Componentize setRandomPassword field content

Changed the name of the AdminUserSetRandomPassword component to AdminUserSetRandomPasswordRadios and created a new component called AdminUserSetRandomPasswordContent to organize and clean the AdminUserForm component.

* fix: 🐛 Refetch user form data after editing user

Implemented a refecthUserData function for the AdminuserInfoWithData component that will run when the handleUpdateUser mutation is succesful to refetch the user data of the edited user. This fixes a bug in which the user form would show the old data instead of the updated one.

* Move tabs component to Page instead of Page content

* Fix imports

* First test fix

* Fix create user test

* Fix tests

* Fix test typo

* Test fix
* create pending tab

* remove button on 'all' tab

* fix

* remove extra tab

* Standardize empty state

* fix

* fix merge

---------

Co-authored-by: rique223 <[email protected]>
* refactor: ♻️ Change string to states in user created contextual bar

Changed the simple string that was shown in the user created page to the states component and updated the toast message to follow figma specs.

* Revert some changes

* Remove unnecessary checks and props

* refactor: ♻️ Implement i18n plurals in user created page

Implemented the plurals functionality in the user created page instead of manually verifying the number of created users.
@dionisio-bot dionisio-bot bot added the stat: ready to merge PR tested and approved waiting for merge label Jan 30, 2024
@dionisio-bot dionisio-bot bot added stat: ready to merge PR tested and approved waiting for merge and removed stat: ready to merge PR tested and approved waiting for merge labels Jan 31, 2024
@kodiakhq kodiakhq bot removed the stat: ready to merge PR tested and approved waiting for merge label Feb 5, 2024
Copy link
Contributor

kodiakhq bot commented Feb 5, 2024

This PR currently has a merge conflict. Please resolve this and then re-add the ['stat: ready to merge', 'automerge'] label.

@dionisio-bot dionisio-bot bot added stat: ready to merge PR tested and approved waiting for merge and removed stat: conflict labels Feb 20, 2024
@dionisio-bot dionisio-bot bot added stat: ready to merge PR tested and approved waiting for merge and removed stat: ready to merge PR tested and approved waiting for merge labels Feb 20, 2024
@kodiakhq kodiakhq bot removed the stat: ready to merge PR tested and approved waiting for merge label Feb 28, 2024
Copy link
Contributor

kodiakhq bot commented Feb 28, 2024

This PR currently has a merge conflict. Please resolve this and then re-add the ['stat: ready to merge', 'automerge'] label.

Copy link
Contributor

dionisio-bot bot commented Apr 11, 2024

Looks like this PR is not ready to merge, because of the following issues:

  • This PR has conflicts, please resolve them before merging
  • This PR is missing the 'stat: QA assured' label
  • This PR is not mergeable
  • This PR is targeting the wrong base branch. It should target 7.0.0, but it targets 6.7.0

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

8 participants