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
-
Make sure you have AI features enabled to test this change https://docs.gitlab.com/ee/development/ai_features/index.html
-
Go to your rails console and run
Feature.enable(:ai_settings_vue_admin)
-
Navigate to the admin area
-
Go in
Settings => General
-
Notice the header
AI-powered features
-
Notice the subtitle
-
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:
- 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
- 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)