Skip to content

Create ServiceDeskList vue app

What does this MR do and why?

This is the first 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 we are here
Recreate info banner about service desk 🚫
Define tokens for search bar 🚫
Add sorting functionality 🚫
Add loading state and improve empty state 🚫

This MR covers:

  1. Introduce a feature flag to hide new view
  2. Initiate Vue app for service desk list
  3. Query for issues and issues counts for issues created in that project, by the support-bot
  4. Handle switching between tabs

I was planning to also include the info banner that is currently between the search bar and the list, but this MR is getting quite big, so I will make another one for that.

Screenshots or screen recordings

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

Before After
before_service_desk_list after_service_desk_list

How to set up and validate locally

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

  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 an email to your Service Desk, so you have something to display on the list.
  3. In rails console enable the feature flag
    Feature.enable(:service_desk_vue_list)
  4. Visit the project that has Service Desk setup
  5. In the main navigation click Monitor, than Service Desk.

FYI There is a known problem that Issues in the main navigation highlight when you are on Service Desk view.

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