Skip to content

Service Desk List - handle next and previous page

What does this MR do and why?

This is the fourth 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:

  • show Next / Previous buttons on Issuable list and handle the change of page
  • show dropdown for adjusting the number of shown issues and handle its change

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before After
pagination beefore.mov pagination after.mov

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

SERVICE DESK SETUP

  1. Setup a service desk on your GDK: https://gitlab.com/gitlab-org/gitlab-development-kit/-/blob/main/doc/howto/service_desk_mail_room.md
  2. 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)

  1. You can omit Service Desk setup and force an already existing issue to become a SD issue. Open the rails console: rails c
  2. 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)
  1. In rails console enable the feature flag

    Feature.enable(:service_desk_vue_list)
    Feature.enable(:frontend_caching)
  2. Visit the project that has Service Desk setup

  3. In the main navigation click Monitor, than Service Desk.

  4. Use Next and Previous buttons at the bottom of the list.

  5. Use the dropdown at the bottom of the list to change the number of issues shown on one list page

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #413092 (closed)

Edited by Paulina Sedlak-Jakubowska

Merge request reports