Polish the add and edit self-hosted model form

What does this MR do and why?

UI polish on the admin "add/edit self-hosted model" form (GitLab Duo self-hosted models). The form is shared by both the New and Edit flows.

Changes:

  • Remove the form's gl-max-w-62 max-width constraint, which made the form appear visually offset.
  • Replace the grey background (gl-bg-subtle) on the platform-dependent section with a GlCard. The card header shows the Platform label on the left and the platform selector on the right; the card body holds the fields that change with the selected platform (model family, endpoint/identifier, and the API key input or cloud-setup message).
  • Restore consistent spacing between the nested form fields.
  • Clean up the page <h1> in the New/Edit components to use gl-heading-1 gl-m-0.

Implementation note: to place the deployment name field outside the card and the platform-dependent fields inside the card body, the single GlFormFields was split into two instances that share the same form-values object. Because GlFormFields emits only its own field set (including on mount), the instances merge their input events into the shared object rather than replacing it, so no field value is dropped when the platform is switched.

References

None.

Screenshots or screen recordings

Add

Before After
CleanShot_2026-09-21_at_7.05.08_PM_2x CleanShot_2026-09-21_at_7.28.37_PM_2x

Edit

Before After
CleanShot_2026-09-21_at_7.45.29_PM_2x CleanShot_2026-09-21_at_7.28.16_PM_2x

How to set up and validate locally

  1. Seed dummy self-hosted models (one per platform) in the rails console:
    [
      { name: 'dummy-api-model',     provider: :api,       model: :mistral,
        endpoint: 'http://localhost:11434/v1', identifier: 'custom_openai/mistral-7b',
        api_token: 'dummy-token' },
      { name: 'dummy-bedrock-model', provider: :bedrock,   model: :claude_3,
        endpoint: 'http://bedrock.local', identifier: 'bedrock/claude-3' },
      { name: 'dummy-vertex-model',  provider: :vertex_ai, model: :claude_3,
        endpoint: 'http://vertex.local', identifier: 'vertex_ai/claude-3' }
    ].each do |attrs|
      m = Ai::SelfHostedModel.find_or_initialize_by(name: attrs[:name])
      m.assign_attributes(attrs)
      m.save!
      puts "#{attrs[:provider]}: /admin/gitlab_duo/model_selection/models/#{m.id}/edit"
    end
  2. Visit the add form at /admin/gitlab_duo/model_selection/models/new and switch the platform between API, Amazon Bedrock, and Google Vertex AI.
  3. Visit the edit form for each seeded record using the printed URLs.
  4. Clean up when done:
    Ai::SelfHostedModel.where(name: %w[dummy-api-model dummy-bedrock-model dummy-vertex-model]).destroy_all

MR acceptance checklist

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

Edited by Austin Regnery

Merge request reports

Loading
Loading