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-62max-width constraint, which made the form appear visually offset. - Replace the grey background (
gl-bg-subtle) on the platform-dependent section with aGlCard. 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 usegl-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 |
|---|---|
![]() |
![]() |
Edit
| Before | After |
|---|---|
![]() |
![]() |
How to set up and validate locally
- 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 - Visit the add form at
/admin/gitlab_duo/model_selection/models/newand switch the platform between API, Amazon Bedrock, and Google Vertex AI. - Visit the edit form for each seeded record using the printed URLs.
- 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.



