Service Desk list - handle alerts
What does this MR do and why?
This is the last MR in a series of changes that will change Service Desk issues list from haml file to a Vue app.
Issues | Status |
---|---|
Create the app for service desk issues and add queries that will show all the issues created by the bot and issues count for tabs |
|
Recreate info banner about service desk |
|
Define tokens for search bar |
CE search tokens EE search tokens searching functionality |
Add sorting functionality |
|
Add loading state and improve empty state |
empty states loading state alert for errors with dismiss handle handling of next/previous page |
This MR covers:
- handling dismiss action on alert within IssuableList component
- displaying and clearing alert for not loaded issues/issues counts (I decided to display an empty state after dismissing)
- displaying and clearing alerts for errors from any user interaction within IssuableList
Screenshots or screen recordings
Screenshots are required for UI changes, and strongly recommended for all other merge requests.
Context | Before | After |
---|---|---|
errors from interacting with IssuableList | Screen Recording 2023-08-21 at 18.00.23.mov | Screen Recording 2023-08-21 at 17.55.40.mov |
no issues loaded due to an error | Screen Recording 2023-08-21 at 18.00.48.mov | Screen Recording 2023-08-21 at 17.54.36.mov |
How to set up and validate locally
Numbered steps to set up and validate the change are strongly suggested.
SERVICE DESK SETUP
- Setup a service desk on your GDK: https://gitlab.com/gitlab-org/gitlab-development-kit/-/blob/main/doc/howto/service_desk_mail_room.md
- Send 21 emails to your Service Desk, so you have something to display on the list.
ALTERNATIVE SETUP (not idea, for this MR you will need at least 21 Service Desk issues)
- You can omit Service Desk setup and force an already existing issue to become a SD issue. Open the rails console:
rails c
- Use these commands. Change
7
to the project id that matches the one you want to use for testing:
email = 'your-email@gitlab.com'
project = Project.find 7
issue = project.issues.last
issue.update!(service_desk_reply_to: email, author: User.support_bot)
IssueEmailParticipant.create!(issue: issue, email: email)
-
In rails console enable the feature flag
Feature.enable(:service_desk_vue_list) Feature.enable(:frontend_caching)
-
Visit the project that has Service Desk setup
-
In the main navigation click
Monitor
, thanService Desk
. -
Emulate error for fetching Service Desk issues:
- Open file
app/assets/javascripts/service_desk/components/service_desk_list_app.vue
- In line 180, change
fullPath: this.fullPath,
tofullPath: this.fullPat,
- Reload the view
- Open file
-
Emulate error from IssuableList component:
- Open file
app/assets/javascripts/service_desk/components/service_desk_list_app.vue
- In line 500, change
.put(joinPaths(issueToMove.webPath, 'reorder'), {
to.put(joinPaths(issueToMove.webPath, 'reord'), {
- Reload the view, choose manual sorting, drag & drop any issue.
- Open file
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.
Related to #413092 (closed)