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 users page contextual bar user form #32041

Merged
merged 24 commits into from
Aug 22, 2024

Conversation

rique223
Copy link
Contributor

@rique223 rique223 commented Mar 20, 2024

Proposed changes (including videos or screenshots)

Refactored User Creation Form:

  1. User Briefing: Added a briefing at the top of the form explaining the new pending users flow.
  2. Email Verification Input: Moved the email verification input to below the email field, improved its label, and added a tooltip for clarity.
  3. Password Field Update: Changed the password field from a simple input to a hybrid component with two radio options and a password policy component:
    • Set randomly and send by email: Automatically generates and emails a password to the registered user upon form submission.
    • Set manually: Displays threefields (Require Password change, Password & Confirm Password). If password policies are enabled, a component shows how well the entered password complies with these policies.
  4. Additional Fields Toggle: Created a "Hide/Show additional fields" button that highlights additional fields and allows users to hide them if desired.
  5. Form Buttons: Replaced "Save" and "Reset" buttons with a single "Add User" button.
  6. Email Validation: Added an email validation logic informing users if they entered an invalid email address.
  7. Post-Submission Step: Implemented a new step after form submission where users see a states component indicating a new user has been created. Users have two options:
    • Add more users: Returns to the form with empty fields.
    • Done: Closes the contextual bar and displays the newly created user info.
  8. SMTP Settings: Disabled email-related fields when SMTP settings are not enabled and informed users accordingly.
  9. Email Verification Setting: Disabled the email verification input when the email verification setting is not enabled and informed users accordingly.
  10. Input Repositioning: Repositioned some inputs to follow a more intuitive user creation flow.
  11. Form Title Icon: Added an icon to the user creation form title for better representation.

Other Changes in This PR:

  1. Settings Label Update: Changed the setting label from "Only allow verified users to login Make sure you have correct SMTP settings to use this feature" to "Require email verification to login. Ensure SMTP is configured to enable."
  2. Edit User Form: Refactored the logic that hides the "Join default channels" toggle input.
  3. MultiSelectCustom Component: Refactored the component for readability and improved some logic.
  4. UsersTableFilters: Refactored the component to stop using the FilterByText component, which complicated making the filters responsive.
  5. Administration Tests: Adapted the administration.spec.ts tests to accommodate the new user creation flow.
  6. i18n Translations: Added necessary new i18n translation entries.
  7. PasswordVerifier Component: Added a new "vertical" prop to the PasswordVerifier.tsx component that forces the component to a single column when set to true.

Demo videos:
https://www.loom.com/share/d2dc00a2f2674abb9555e77414944817
https://www.loom.com/share/aad5696db4b0476b9c9520b262d3f192

Issue(s)

Steps to test or reproduce

Further comments

Related to: #30236
Old Jira task: WM-88
New Jira task for Conn: CONN-263

Copy link

changeset-bot bot commented Mar 20, 2024

⚠️ No Changeset found

Latest commit: 2df65e3

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

Copy link

codecov bot commented Mar 20, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 59.38%. Comparing base (7f88158) to head (2df65e3).
Report is 1 commits behind head on develop.

Additional details and impacted files

Impacted file tree graph

@@             Coverage Diff             @@
##           develop   #32041      +/-   ##
===========================================
- Coverage    59.40%   59.38%   -0.02%     
===========================================
  Files         2547     2547              
  Lines        63309    63255      -54     
  Branches     14248    14228      -20     
===========================================
- Hits         37610    37567      -43     
+ Misses       22980    22978       -2     
+ Partials      2719     2710       -9     
Flag Coverage Δ
unit 75.84% <100.00%> (+<0.01%) ⬆️

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

@rique223 rique223 added this to the 7.0 milestone Mar 21, 2024
@rique223 rique223 changed the title feat: New users page user form feat: New users page contextual bar user form Mar 21, 2024
Copy link
Contributor

dionisio-bot bot commented Apr 4, 2024

Looks like this PR is ready to merge! 🎉
If you have any trouble, please check the PR guidelines

@rique223 rique223 removed this from the 7.0 milestone Apr 10, 2024
@rique223 rique223 force-pushed the feat/new-user-panel-deactivated branch 2 times, most recently from 7cb7f3e to 7d12186 Compare July 17, 2024 22:43
@rique223 rique223 changed the base branch from feat/new-user-panel-deactivated to CORE-519-2 July 29, 2024 21:20
@rique223 rique223 changed the base branch from CORE-519-2 to feat/new-user-panel-deactivated July 29, 2024 21:21
@rique223 rique223 force-pushed the feat/new-user-panel-contextual branch 2 times, most recently from ede03e6 to f92f17d Compare July 30, 2024 03:58
Base automatically changed from feat/new-user-panel-deactivated to develop July 30, 2024 17:13
Implemented the new email field as the first input of the new user form, with the mark email as verified option right bellow it with a new info tooltip explaining what the toggle does. Also added a briefing text at the top of the new user form.
Added the PasswordVerifier component to the password field of the New User form and refactored the field to merge it with the "Set random password and send it by email" option.
Implemented a 'hide/show custom fields' button in the new user form and refactored it to follow new figma specs.
Implemented a new step for the users page user creation contextual bar in which the user will be able to choose from creating another user right away or finishing the user creation process and being redirected to the most recently created user. Also fixed some tests, created new translations and changed some logic to improve the roles filter.
Fixed an issue with the spacing of the MultiSelectCustom Search bar in which unnecessary padding and margin were being applied to the component.
@rique223 rique223 force-pushed the feat/new-user-panel-contextual branch from 24ec187 to f9c4fee Compare July 31, 2024 19:10
Removed the FilterByText component from the UsersTableFilters component because the Margins component that wraps the children of that component made impossible to control flexGrow and Width in smaller screens.
…l loading states

Solved a problem on the initial render of the setRandomPassword, sendWelcomeEmail and Verify email that happened due to the asynchronous nature of the isSmtpEnabled variable. Also improved some boolean verifications and added a useMemo for the availableRoles variable.
Fix UX issues

Fixed two copy issues on the texts of the Status message and and user created toast. Also fixed a spacing issue on the Mark Email as Verified field in which the space between the label and the tooltip was too big.
…too small

Fixed a bug where the roles filter list wouldn't resize or scroll on smaller screens because it was set to position: absolute. Also, resolved a UI issue where the users table scrollbar appeared on top of the roles filter due to a low z-index on the filter list.
@rique223 rique223 marked this pull request as ready for review August 14, 2024 18:59
@rique223 rique223 requested review from a team as code owners August 14, 2024 18:59
@rique223 rique223 added this to the 6.12 milestone Aug 14, 2024
Changed the users table GenericNoResults component to better align with new figma specs.
@rique223 rique223 marked this pull request as draft August 15, 2024 15:35
I replaced the w='50%' property of the buttons on the user-created page with flexBasis='0'. This, combined with the stretch property of the ButtonGroup, ensures that the buttons now occupy exactly half of the available space each
…t/Rocket.Chat into feat/new-user-panel-contextual
@rique223 rique223 marked this pull request as ready for review August 16, 2024 21:18
@tassoevan tassoevan added the stat: QA assured Means it has been tested and approved by a company insider label Aug 22, 2024
@dionisio-bot dionisio-bot bot added the stat: ready to merge PR tested and approved waiting for merge label Aug 22, 2024
@kodiakhq kodiakhq bot merged commit 9a69771 into develop Aug 22, 2024
47 checks passed
@kodiakhq kodiakhq bot deleted the feat/new-user-panel-contextual branch August 22, 2024 03:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
stat: QA assured Means it has been tested and approved by a company insider stat: ready to merge PR tested and approved waiting for merge
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants