Skip to content

Server side rendering in AI settings

Frédéric Caplette requested to merge fc-settings-server-side-rendering into master

What does this MR do and why?

In the Group and Admin settings, the AI section is implemented in Vue, but most of the settings are in Haml. This mean that as it loads, the page will have most of its content visible (although non-interactive) but the AI settings will appear after all of the other settings and push down the DOM content. To avoid this, we need some form of loading state for the server side.

An easy approach for this would be to render the same header from rails that is the actual Vue mounting point of the settings. So when the page first render, we get some of the layout formatted, and as soon as the JS has loaded, the Vue app mounts over the loading state and becomes interactive. We would get a nice transition from static to dynamic, improve time to first print and would avoid the DOM popping.

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

In groups:

Screen_Recording_2024-07-09_at_2.42.03_PM

In admin:

Screen_Recording_2024-07-09_at_2.40.57_PM

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. Note that you will not see the AI settings if you are on SAAS. You can comment out ee/app/views/admin/application_settings/_ai_powered.html.haml:1
  6. Go to the AI settings header
  7. Refresh the page
  8. notice the skeleton loader
  9. Notice the header AI-powered features appears after some time
  10. Go to your rails console and run Feature.enable(:ai_settings_vue_group)
  11. Navigate to a group where you are the admin and have AI features enabled
  12. Navigate to Settings -> General
  13. Notice the group header for AI-powered features
  14. Refresh the page
  15. Notice the skeleton loader
  16. Notice the settings appear after some time

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. Do you have an ultimate license for your instance?
Edited by Frédéric Caplette

Merge request reports