Skip to content

Draft: Resolve "Create a generic settings header component in vue_shared"

What does this MR do and why?

Create a generic wrapper for group and admin settings which should simplify migration of future settings from HAML to Vue. Currently, the styling for the Admin page and the Group page are different (h2 and h4 respectively) so the component should handle this distinction.

Structurally, we want a group-settings-row and a admin-settings-row which both wrap around the same settings-row component. Use all the latest tailwinds css classes. Accept a slot to pass in the settings component and handle toggling on and off.

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

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

Before After

How to set up and validate locally

  1. Make sure you have AI features enabled to test this change https://docs.gitlab.com/ee/development/ai_features/index.html

  2. Go to your rails console and run Feature.enable(:ai_settings_vue_admin)

  3. Navigate to the admin area

  4. Go in Settings => General

  5. Notice the header AI-powered features

  6. Notice the subtitle

  7. Notice the styling is consistent with other areas on the page

    Note: if you do not see the settings, try to turn off the FF. If you still do not see it, then it can mean either of these criteria is not met:

    1. Is the group you are looking at has enabled AI features on your GDK? https://docs.gitlab.com/ee/development/ai_features/index.html#recommended-run-gdk-in-saas-mode-and-enable-ai-features-for-a-test-group
    2. Your GDK license was applied to your instance (in self-hosted) and you are now simulating SAAS, which mean that your group may not have a license.

Related to #470549 (closed)

Merge request reports