1 files changed, 27 insertions, 31 deletions
diff --git a/app/views/projects/_merge_request_merge_method_settings.html.haml b/app/views/projects/_merge_request_merge_method_settings.html.haml
index cb660750632..f205fe2b9bf 100644
--- a/app/views/projects/_merge_request_merge_method_settings.html.haml
+++ b/app/views/projects/_merge_request_merge_method_settings.html.haml
@@ -1,38 +1,34 @@
 - form = local_assigns.fetch(:form)
 
+- labelMerge = s_('ProjectSettings|Merge commit')
+- everyMergeCommit = s_('ProjectSettings|Every merge creates a merge commit.')
+
+- labelRebase = s_('ProjectSettings|Merge commit with semi-linear history')
+- rebaseUpToDate = s_('ProjectSettings|Merging is only allowed when the source branch is up-to-date with its target.')
+- rebaseSemiLinear = s_('ProjectSettings|When semi-linear merge is not possible, the user is given the option to rebase.')
+
+- labelFastForward = s_('ProjectSettings|Fast-forward merge')
+- noMergeCommit = s_('ProjectSettings|No merge commits are created.')
+- ffOnly = s_('ProjectSettings|Fast-forward merges only.')
+- ffConflictRebase = s_('ProjectSettings|When there is a merge conflict, the user is given the option to rebase.')
+- ffTrains = s_('ProjectSettings|If merge trains are enabled, merging is only possible if the branch can be rebased without conflicts.')
+- ffTrainsHelp = link_to s_('ProjectSettings|What are merge trains?'), help_page_path('ci/pipelines/merge_trains.md', anchor: 'enable-merge-trains'), target: '_blank', rel: 'noopener noreferrer'
+
 .form-group
   %b= s_('ProjectSettings|Merge method')
   %p.text-secondary
     = s_('ProjectSettings|Determine what happens to the commit history when you merge a merge request.')
     = link_to s_('ProjectSettings|How do they differ?'), help_page_path('user/project/merge_requests/methods/index.md'), target: '_blank', rel: 'noopener noreferrer'
-  .form-check.mb-2
-    = form.radio_button :merge_method, :merge, class: "js-merge-method-radio form-check-input"
-    = label_tag :project_merge_method_merge, class: 'form-check-label' do
-      = s_('ProjectSettings|Merge commit')
-      .text-secondary
-        = s_('ProjectSettings|Every merge creates a merge commit.')
-
-  .form-check.mb-2
-    = form.radio_button :merge_method, :rebase_merge, class: "js-merge-method-radio form-check-input"
-    = label_tag :project_merge_method_rebase_merge, class: 'form-check-label' do
-      = s_('ProjectSettings|Merge commit with semi-linear history')
-      .text-secondary
-        = s_('ProjectSettings|Every merge creates a merge commit.')
-        %br
-        = s_('ProjectSettings|Merging is only allowed when the source branch is up-to-date with its target.')
-        %br
-        = s_('ProjectSettings|When semi-linear merge is not possible, the user is given the option to rebase.')
-
-  .form-check.mb-2
-    = form.radio_button :merge_method, :ff, class: "js-merge-method-radio form-check-input", data: { qa_selector: 'merge_ff_radio' }
-    = label_tag :project_merge_method_ff, class: 'form-check-label' do
-      = s_('ProjectSettings|Fast-forward merge')
-      .text-secondary
-        = s_('ProjectSettings|No merge commits are created.')
-        %br
-        = s_('ProjectSettings|Fast-forward merges only.')
-        %br
-        = s_('ProjectSettings|When there is a merge conflict, the user is given the option to rebase.')
-        %div
-          = s_('ProjectSettings|If merge trains are enabled, merging is only possible if the branch can be rebased without conflicts.')
-          = link_to s_('ProjectSettings|What are merge trains?'), help_page_path('ci/pipelines/merge_trains.md', anchor: 'enable-merge-trains'), target: '_blank', rel: 'noopener noreferrer'
+  = form.gitlab_ui_radio_component :merge_method,
+    :merge,
+    labelMerge,
+    help_text: everyMergeCommit
+  = form.gitlab_ui_radio_component :merge_method,
+    :rebase_merge,
+    labelRebase,
+    help_text: (everyMergeCommit + "<br />" + rebaseUpToDate + "<br />" + rebaseSemiLinear).html_safe
+  = form.gitlab_ui_radio_component :merge_method,
+    :ff,
+    labelFastForward,
+    help_text: (noMergeCommit + "<br />" + ffOnly + "<br />" + ffConflictRebase + "<br />" + ffTrains + " " + ffTrainsHelp).html_safe,
+    radio_options: { data: { qa_selector: 'merge_ff_radio' } }