Skip to content

Create InfoBanner component

Paulina Sedlak-Jakubowska requested to merge 413092-psj-recreate-banner-info into master

What does this MR do and why?

This is the second 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 we are here
Define tokens for search bar 🚫
Add sorting functionality 🚫
Add loading state and improve empty state 🚫

This MR covers:

  • recreating the info banner about Service Desk into a Vue component
  • changing the placement of the banner to above the list, since <issuable-list> component includes tabs with the filter and the list,
  • placing the banner image in the way that it doesn't scale down with the component on smaller devices, and is not rendered on xs screens
  • pushing a feature flag for caching (missed in the previous MR)
  • providing merge strategy for cacheConfig

Screenshots or screen recordings

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

Note: Action buttons (New Issue, Actions) that can be seen on the before screenshot, will not be implemented in the new version of SD Issues list

Before After
before_sd_banner_desktop after_sd_banner_desktop
before_sd_banner_tablet after_sd_banner_tablet
before_sd_banner_mobile after_sd_banner_mobile

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)
Feature.enable(:frontend_caching)

  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