Merge branch '18136-ui-for-restricting-global-visibility-levels-is-unclear' into 'master'

Restricted visibility buttons to checkboxes

## What does this MR do?

Changes the `Restricted visibility levels` settings to use checkboxes instead of a button group.

## Are there points in the code the reviewer needs to double check?

## Why was this MR needed?

## Screenshots (if relevant)

![Screen_Shot_2016-11-14_at_19.25.48](/uploads/0c6ee415ee0c89c0a7e3ffd98f88df71/Screen_Shot_2016-11-14_at_19.25.48.png)

## Does this MR meet the acceptance criteria?

- [x] [Changelog entry](https://docs.gitlab.com/ce/development/changelog.html) added
- [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [ ] API support added
- Tests
  - [ ] Added for this feature/bug
  - [x] All builds are passing
- [x] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if it does - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?


Closes #18136

See merge request !7463

3 files changed, 11 insertions, 8 deletions

diff --git a/app/helpers/application_settings_helper.rb b/app/helpers/application_settings_helper.rb
index be5e0301a43..6d10fe3e9d7 100644
--- a/app/helpers/application_settings_helper.rb
+++ b/app/helpers/application_settings_helper.rb
@@ -50,14 +50,14 @@ module ApplicationSettingsHelper
   def restricted_level_checkboxes(help_block_id)
     Gitlab::VisibilityLevel.options.map do |name, level|
       checked = restricted_visibility_levels(true).include?(level)
-      css_class = 'btn'
-      css_class += ' active' if checked
-      checkbox_name = 'application_setting[restricted_visibility_levels][]'
+      css_class = checked ? 'active' : ''
+      checkbox_name = "application_setting[restricted_visibility_levels][]"
 
-      label_tag(checkbox_name, class: css_class) do
+      label_tag(name, class: css_class) do
         check_box_tag(checkbox_name, level, checked,
                       autocomplete: 'off',
-                      'aria-describedby' => help_block_id) + name
+                      'aria-describedby' => help_block_id,
+                      id: name) + visibility_level_icon(level) + name
       end
     end
   end
diff --git a/app/views/admin/application_settings/_form.html.haml b/app/views/admin/application_settings/_form.html.haml
index a236335131a..95cae5ea24b 100644
--- a/app/views/admin/application_settings/_form.html.haml
+++ b/app/views/admin/application_settings/_form.html.haml
@@ -22,9 +22,8 @@
     .form-group
       = f.label :restricted_visibility_levels, class: 'control-label col-sm-2'
       .col-sm-10
-        - data_attrs = { toggle: 'buttons' }
-        .btn-group{ data: data_attrs }
-          - restricted_level_checkboxes('restricted-visibility-help').each do |level|
+        - restricted_level_checkboxes('restricted-visibility-help').each do |level|
+          .checkbox
             = level
         %span.help-block#restricted-visibility-help
           Selected levels cannot be used by non-admin users for projects or snippets.
diff --git a/changelogs/unreleased/18136-ui-for-restricting-global-visibility-levels-is-unclear.yml b/changelogs/unreleased/18136-ui-for-restricting-global-visibility-levels-is-unclear.yml
new file mode 100644
index 00000000000..b8b8810ecfa
--- /dev/null
+++ b/changelogs/unreleased/18136-ui-for-restricting-global-visibility-levels-is-unclear.yml
@@ -0,0 +1,4 @@
+---
+title: Changed restricted visibility admin buttons to checkboxes
+merge_request: 7463
+author: