Phase 3: Create UI Entry Point - Resolve with AI Button

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

• Close this issue

Overview

Add "Resolve with AI" button to merge request conflict pages that opens chat with the Conflict Resolver agent.

Tasks

Vue Component

• Create ee/app/assets/javascripts/merge_conflicts/components/resolve_with_ai_button.vue
• Implement button with AI icon and clear messaging
• Use sendDuoChatCommand to open chat with agent
• Pass merge request context (resourceId, projectId)
• Write component specs

Template Integration

• Add button mount point to app/views/projects/merge_requests/conflicts/show.html.haml
• Pass required data attributes (merge_request_id, project_id as global IDs)
• Conditionally show based on can_resolve_with_ai? helper

JavaScript Integration

• Update app/assets/javascripts/merge_conflicts/index.js
• Dynamically import EE component
• Mount component with proper data
• Handle graceful degradation for CE

Backend Helper

• Add can_resolve_with_ai? to app/helpers/merge_requests_helper.rb
• Check: MR has conflicts (cannot_be_merged?)
• Check: Conflicts resolvable in UI
• Check: Feature flag enabled
• Check: Agent enabled for namespace
• Check: User has permission
• Write helper specs

Frontend Testing

• Write component unit tests
• Test button click triggers chat
• Test correct parameters passed
• Test button not shown when conditions not met

Integration Testing

• Write feature spec: button appears on conflict page
• Test: button opens chat panel
• Test: agent receives MR context
• Test: button hidden when feature disabled
• Test: button hidden when no conflicts

Acceptance Criteria

• "Resolve with AI" button appears on conflict pages when conditions met
• Button opens chat with Conflict Resolver agent selected
• MR context (global ID) passed to agent
• Button not shown when: no conflicts, feature disabled, agent disabled, or user lacks permission
• All tests pass (unit and integration)
• Component gracefully handles CE/EE differences

User Experience

The button should:

• Be prominently placed but not intrusive
• Have clear, inviting messaging
• Include AI icon for recognition
• Explain what will happen ("analyze conflicts and suggest resolutions")

Files Changed

• ee/app/assets/javascripts/merge_conflicts/components/resolve_with_ai_button.vue
• ee/spec/frontend/merge_conflicts/components/resolve_with_ai_button_spec.js
• app/views/projects/merge_requests/conflicts/show.html.haml
• app/assets/javascripts/merge_conflicts/index.js
• app/helpers/merge_requests_helper.rb
• spec/helpers/merge_requests_helper_spec.rb
• ee/spec/features/merge_requests/user_resolves_conflicts_with_ai_spec.rb

Mockup