Commit 2690c71b authored by Bob Van Landuyt's avatar Bob Van Landuyt

Merge branch '33668-gitlab-ui-radio-component' into 'master'

Add `gitlab_ui_radio_component` custom field to GitLab UI form builder

See merge request gitlab-org/gitlab!66773
parents 0d56ebfc 631a1dd5
......@@ -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
......
.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
......
......@@ -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` (`{}`) |
- 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.')
......@@ -22,29 +22,53 @@ module Gitlab
format_options(checkbox_options, ['custom-control-input']),
checked_value,
unchecked_value
) +
@template.label(
@object_name, method, format_options(label_options, ['custom-control-label'])
) do
if help_text
@template.content_tag(
:span,
label
) +
@template.content_tag(
:p,
help_text,
class: 'help-text'
)
else
label
end
end
) + 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.merge({ value: value }), ['custom-control-label'])
) do
if help_text
@template.content_tag(
:span,
label
) +
@template.content_tag(
:p,
help_text,
class: 'help-text'
)
else
label
end
end
end
def format_options(options, classes)
classes << options[:class]
......
......@@ -2567,7 +2567,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"
......@@ -2582,6 +2582,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 ""
......@@ -2717,7 +2723,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"
......
......@@ -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
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment