Skip to content

Change the disabled button tooltip to a popover on Policies page Drawer Component

  • Please check this box if this contribution uses AI-generated content (including content generated by GitLab Duo features) as outlined in the GitLab DCO & CLA

What does this MR do and why?

This MR addresses the issue where the disabled "Edit policy" button inside the Drawer component of the Policies page displays a tooltip component instead of the required popover component when hovered over. According to design guidelines, when there is a link in the text, a popover should be used instead of a tooltip. This MR replaces the tooltip component with a popover component to adhere to these guidelines.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Before After
Screenshot_2024-08-19_at_06.44.44 Screenshot_2024-08-19_at_06.44.06

How to set up and validate locally

  1. Setting Up:

    • Ensure you have an inherited policy for a specific project.
    • Navigate to the group containing your targeted project (e.g., http://localhost:3000/flightjs).
    • Go to the group's Policies pages by clicking Secure > Policies on the left sidebar.
    • Create a new policy by clicking the New policy button.
    • Select the Merge request approval policy for simplicity.
    • Fill out the form with arbitrary choices, ensuring the policy scope targets the desired project (all subgroups/projects in this group or specific projects | {YOUR_TARGETED_PROJECT_NAME}).
    • Click Configure with a merge request and merge the resulting merge request.
  2. Validation:

    • Navigate to your project (e.g., http://localhost:3000/flightjs/Flight).
    • Go to the project's Policies pages by clicking Secure > Policies.
    • Click on the inherited policy to open the drawer displaying policy information.
    • Hover over the disabled Edit policy button. It should now display a message using the popover component instead of a tooltip.

Related to #474841

Edited by Altair Rostam

Merge request reports

Loading