Add notification toasts and alerts for error/success messages in the management section #5726
Conversation
- Added toast messages to provide user feedback on success and failure actions while creating and updating information about a license. - Intercepted network requests to mock error responses. - Mock subset implementations of the toast library and updated test cases to include assertions to calls for toast messages.
- Added toast messages to provide user feedback on success and failure actions while creating and updating information about a category. - Intercepted network requests to mock error responses (only for creation). - Mock subset implementations of the toast library and updated test cases to include assertions to calls for toast messages(only for creation). - Render test component with createComponentWithMemoryRouter to pass parameters during tests run time.
- Added toast messages to provide user feedback on success and failure actions while creating and updating information about a campaign. - Intercepted network requests to mock error responses. - Mock subset implementations of the toast library and updated test cases to include assertions to calls for toast messages.
- Added toast messages to provide user feedback on success and failure actions while creating and updating information about a team. - Intercepted network requests to mock error responses. - Mock subset implementations of the toast library and updated test cases to include assertions to calls for toast messages.
- Added toast messages to provide user feedback on success and failure actions while creating, deleting and updating information about a campaign. - Intercepted a network request to mock error responses for organization creation failure. - Mock subset implementations of the toast library and updated test cases to include assertions to calls for toast messages.
github-actions
bot
added
scope: frontend
dependencies
…esponses Address SonarCloud duplication issue by extracting common error handling logic to generate a network failure error in MSW while intercepting network requests for faulty handlers
- Refactored the updateManagers() and updateMembers() functions to use a common updateAffiliation() function. - Updated function calls to getMembersDiff() to pass the correct parameters based on affiliationType. - Replaced hardcoded affiliationType values with dynamic affiliationType parameter in success and failure toast messages.
- Refactored the updation function for organizations, teams, campaigns, categories and licenses to eliminate code duplication flagged by SonarCloud. - Extracted common functionality into a reusable function called updateEntity(). Replaced the duplicated code with a single function call to updateEntity(), passing the required parameters. - Updated success and failure toast messages to use a dynamic entity parameter instead of hardcoding entity type.
There was a problem hiding this comment.
-
Out of scope for this PR but lets also add a toast message while updating a user role and level in user management section, updating user info on user settings page and notification page.
-
While there is an error during creating organisation another alert message is also shown alongside toast message. I feel showing 2 error messages are redundant here as both are displaying same information. Is this expected behavior?
-
Same case if error occurs while creating campaign.
-
Getting this error instead of toast with error message if project creation fails.
-
Add toast message while sending messages to all contributors of a project instead of alert as toast message is shown while sending messages to all members of a team.
- Adds toast messages for user role and mapper level update. Adds test cases for the same. - Intercepted request handlers to mock error responses for these updates. - Button role has been added to the attribute container to improve screen reading.
Added the toast messages for the user role and mapper level update.
Yes, it is the expected behavior. While implementing the toast messages, I hadn't given much thought to it. I went with the idea that the toast message is a generic message that provides feedback to the user about the success or failure of their action. In contrast, the alert message provides specific details about the error. However, I understand the concern, and we can review and decide on this implementation to determine if it can be improved.
haha nice catch. I discovered that the error is not being handled gracefully, resulting in the crash. While handling such errors is important, it's not within the scope of this pull request, which focuses on implementing toasts for C
Yes, we could add toast messages when messaging all contributors of the project. But, like you said, wouldn't that be redundant haha :P ? Up for discussion. cc @ramyaragupathy |
There was a problem hiding this comment.
Tested the creating, updating, and deleting of the different resources under the manage tab, i.e. projects, licences, categories, campaigns, teams, organisations. The toasts appear for the different actions undertaken which works as expected.
However, as noted by previous reviewers, there is some redundancy with having a toast appear as well as an alert while showing the same thing, for example via project creation.
I also noticed that after deleting a category, the user is redirected to a non-existent page instead of the categories list, i.e. is redirected to /manage/interests instead of /manage/categories/
|
Per discussion today w/ @Aadesh-Baral @HelNershingThapa :
|
- Adds a new EntityError component to display it when creation and updation of entities fail. The same component is display when an entity updation or deletion fails - Removed toast success and error messages for deletion actions
HelNershingThapa
changed the title
|
Kudos, SonarCloud Quality Gate passed!
|
This pull request partially addresses issue #3424 of adding notification toasts to inform users of error/success messages in the management section of the app when interacting with APIs. The react-hot-toast dependency has been added to display toasts. The toasts are displayed at the bottom left of the app for success messages in the following sub-sections: Projects, Organizations, Teams, Campaigns, Categories, and Licenses. Toasts are shown when entities are created, updated, or deleted successfully. On failure, the callout alert component will be displayed. The toast component is centralized for consistency across the app.
Changes Made:
Some example toasts:
In addition to the above changes, there were some SonarCloud duplication issues. To fix those, the following changes were made: