Add `gitlab_ui_radio_component` custom field to GitLab UI form builder

app/views/admin/users/_access_levels.html.haml

@@ -19,22 +19,20 @@
     .col-sm-10
       - editing_current_user = (current_user == @user)
 
-      = f.radio_button :access_level, :regular, disabled: editing_current_user
-      = f.label :access_level_regular, class: 'font-weight-bold' do
-        = s_('AdminUsers|Regular')
-      %p.light
-        = s_('AdminUsers|Regular users have access to their groups and projects')
+      = f.gitlab_ui_radio_component :access_level, :regular,
+          s_('AdminUsers|Regular'),
+          radio_options: { disabled: editing_current_user },
+          help_text: s_('AdminUsers|Regular users have access to their groups and projects.')
 
       = render_if_exists 'admin/users/auditor_access_level_radio', f: f, disabled: editing_current_user
 
-      = f.radio_button :access_level, :admin, disabled: editing_current_user
-      = f.label :access_level_admin, class: 'font-weight-bold' do
-        = s_('AdminUsers|Admin')
-      %p.light
-        = s_('AdminUsers|Administrators have access to all groups, projects and users and can manage all features in this installation')
-      - if editing_current_user
-        %p.light
-          = s_('AdminUsers|You cannot remove your own admin rights.')
+      - help_text = s_('AdminUsers|Administrators have access to all groups, projects and users and can manage all features in this installation.')
+      - help_text += ' ' + s_('AdminUsers|You cannot remove your own admin rights.') if editing_current_user
+      = f.gitlab_ui_radio_component :access_level, :admin,
+          s_('AdminUsers|Admin'),
+          radio_options: { disabled: editing_current_user },
+          help_text: help_text
+
 
   .form-group.row
     .col-sm-2.col-form-label.gl-pt-0

app/views/admin/users/_form.html.haml

 .user_new
-  = form_for [:admin, @user], html: { class: 'fieldset-form' } do |f|
+  = gitlab_ui_form_for [:admin, @user], html: { class: 'fieldset-form' } do |f|
     = form_errors(@user)
 
     %fieldset

doc/development/fe_guide/haml.md

@@ -57,7 +57,7 @@ For example:
 When using the GitLab UI form builder, the following components are available for use in HAML.
 
 NOTE:
-Currently only `gitlab_ui_checkbox_component` is available but more components are planned.
+Currently only the listed components are available but more components are planned.
 
 #### gitlab_ui_checkbox_component
 
@@ -72,3 +72,16 @@ Currently only `gitlab_ui_checkbox_component` is available but more components a
 | `checked_value` | Value when checkbox is checked. | `String` | `false` (`'1'`) |
 | `unchecked_value` | Value when checkbox is unchecked. | `String` | `false` (`'0'`) |
 | `label_options` | Options that are passed to [Rails `label` method](https://api.rubyonrails.org/classes/ActionView/Helpers/FormBuilder.html#method-i-label). | `Hash` | `false` (`{}`) |
+
+#### gitlab_ui_radio_component
+
+[GitLab UI Docs](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-form-form-radio--default)
+
+| Argument | Description | Type | Required (default value) |
+|---|---|---|---|
+| `method` | Attribute on the object passed to `gitlab_ui_form_for`. | `Symbol` | `true` |
+| `value` | The value of the radio tag. | `Symbol` | `true` |
+| `label` | Radio label. | `String` | `true` |
+| `help_text` | Help text displayed below the radio button. | `String` | `false` (`nil`) |
+| `radio_options` | Options that are passed to [Rails `radio_button` method](https://api.rubyonrails.org/classes/ActionView/Helpers/FormBuilder.html#method-i-radio_button). | `Hash` | `false` (`{}`) |
+| `label_options` | Options that are passed to [Rails `label` method](https://api.rubyonrails.org/classes/ActionView/Helpers/FormBuilder.html#method-i-label). | `Hash` | `false` (`{}`) |

ee/app/views/admin/users/_auditor_access_level_radio.html.haml

-- disabled = params.fetch(:disabled, false)
+- disabled = local_assigns.fetch(:disabled, false)
 
 - if license_allows_auditor_user?
-  = f.radio_button :access_level, :auditor, disabled: disabled
-  = f.label :access_level_auditor, class: 'font-weight-bold' do
-    Auditor
-  %p.light
-    Auditors have read-only access to all groups, projects and users
+  = f.gitlab_ui_radio_component :access_level, :auditor,
+    s_('AdminUsers|Auditor'),
+    radio_options: { disabled: disabled },
+    help_text: s_('AdminUsers|Auditors have read-only access to all groups, projects, and users.')

lib/gitlab/form_builders/gitlab_ui_form_builder.rb

@@ -22,9 +22,36 @@ module Gitlab
             format_options(checkbox_options, ['custom-control-input']),
             checked_value,
             unchecked_value
-          ) +
+          ) + generic_label(method, label, label_options, help_text: help_text)
+        end
+      end
+
+      def gitlab_ui_radio_component(
+        method,
+        value,
+        label,
+        help_text: nil,
+        radio_options: {},
+        label_options: {}
+      )
+        @template.content_tag(
+          :div,
+          class: 'gl-form-radio custom-control custom-radio'
+        ) do
+          @template.radio_button(
+            @object_name,
+            method,
+            value,
+            format_options(radio_options, ['custom-control-input'])
+          ) + generic_label(method, label, label_options, help_text: help_text, value: value)
+        end
+      end
+
+      private
+
+      def generic_label(method, label, label_options, help_text: nil, value: nil)
         @template.label(
-            @object_name, method, format_options(label_options, ['custom-control-label'])
+          @object_name, method, format_options(label_options.merge({ value: value }), ['custom-control-label'])
         ) do
           if help_text
             @template.content_tag(
@@ -41,9 +68,6 @@ module Gitlab
           end
         end
       end
-      end
-
-      private
 
       def format_options(options, classes)
         classes << options[:class]

locale/gitlab.pot

@@ -2564,7 +2564,7 @@ msgstr ""
 msgid "AdminUsers|Admin"
 msgstr ""
 
-msgid "AdminUsers|Administrators have access to all groups, projects and users and can manage all features in this installation"
+msgid "AdminUsers|Administrators have access to all groups, projects and users and can manage all features in this installation."
 msgstr ""
 
 msgid "AdminUsers|Admins"
@@ -2579,6 +2579,12 @@ msgstr ""
 msgid "AdminUsers|Approved users can:"
 msgstr ""
 
+msgid "AdminUsers|Auditor"
+msgstr ""
+
+msgid "AdminUsers|Auditors have read-only access to all groups, projects, and users."
+msgstr ""
+
 msgid "AdminUsers|Automatically marked as default internal user"
 msgstr ""
 
@@ -2714,7 +2720,7 @@ msgstr ""
 msgid "AdminUsers|Regular"
 msgstr ""
 
-msgid "AdminUsers|Regular users have access to their groups and projects"
+msgid "AdminUsers|Regular users have access to their groups and projects."
 msgstr ""
 
 msgid "AdminUsers|Reject"

spec/lib/gitlab/form_builders/gitlab_ui_form_builder_spec.rb

@@ -75,7 +75,68 @@ RSpec.describe Gitlab::FormBuilders::GitlabUiFormBuilder do
 
         checkbox_html
 
-        expect(fake_template).to have_received(:label).with(:user, :view_diffs_file_by_file, { class: %w(custom-control-label label-foo-bar), object: user })
+        expect(fake_template).to have_received(:label).with(:user, :view_diffs_file_by_file, { class: %w(custom-control-label label-foo-bar), object: user, value: nil })
+      end
+    end
+  end
+
+  describe '#gitlab_ui_radio_component' do
+    let(:optional_args) { {} }
+
+    subject(:radio_html) { form_builder.gitlab_ui_radio_component(:access_level, :admin, "Access Level", **optional_args) }
+
+    context 'without optional arguments' do
+      it 'renders correct html' do
+        expected_html = <<~EOS
+          <div class="gl-form-radio custom-control custom-radio">
+            <input class="custom-control-input" type="radio" value="admin" name="user[access_level]" id="user_access_level_admin" />
+            <label class="custom-control-label" for="user_access_level_admin">
+              Access Level
+            </label>
+          </div>
+        EOS
+
+        expect(radio_html).to eq(html_strip_whitespace(expected_html))
+      end
+    end
+
+    context 'with optional arguments' do
+      let(:optional_args) do
+        {
+          help_text: 'Administrators have access to all groups, projects, and users and can manage all features in this installation',
+          radio_options: { class: 'radio-foo-bar' },
+          label_options: { class: 'label-foo-bar' }
+        }
+      end
+
+      it 'renders help text' do
+        expected_html = <<~EOS
+          <div class="gl-form-radio custom-control custom-radio">
+            <input class="custom-control-input radio-foo-bar" type="radio" value="admin" name="user[access_level]" id="user_access_level_admin" />
+            <label class="custom-control-label label-foo-bar" for="user_access_level_admin">
+              <span>Access Level</span>
+              <p class="help-text">Administrators have access to all groups, projects, and users and can manage all features in this installation</p>
+            </label>
+          </div>
+        EOS
+
+        expect(radio_html).to eq(html_strip_whitespace(expected_html))
+      end
+
+      it 'passes arguments to `radio_button` method' do
+        allow(fake_template).to receive(:radio_button).and_return('')
+
+        radio_html
+
+        expect(fake_template).to have_received(:radio_button).with(:user, :access_level, :admin, { class: %w(custom-control-input radio-foo-bar), object: user })
+      end
+
+      it 'passes arguments to `label` method' do
+        allow(fake_template).to receive(:label).and_return('')
+
+        radio_html
+
+        expect(fake_template).to have_received(:label).with(:user, :access_level, { class: %w(custom-control-label label-foo-bar), object: user, value: :admin })
       end
     end
   end