Merge branch '361142-visibility-radios' into 'master'

This MR migrates radio button to pajamas radio component

See merge request !88759

app/assets/javascripts/projects/project_visibility.js

@@ -10,7 +10,7 @@ const visibilityLevel = {
 };
 
 function setVisibilityOptions({ name, visibility, showPath, editPath }) {
-  document.querySelectorAll('.visibility-level-setting .form-check').forEach((option) => {
+  document.querySelectorAll('.visibility-level-setting .gl-form-radio').forEach((option) => {
     // Don't change anything if the option is restricted by admin
     if (option.classList.contains('restricted')) {
       return;
@@ -24,7 +24,7 @@ function setVisibilityOptions({ name, visibility, showPath, editPath }) {
       optionInput.disabled = true;
       const reason = option.querySelector('.option-disabled-reason');
       if (reason) {
-        const optionTitle = option.querySelector('.option-title');
+        const optionTitle = option.querySelector('.form-check-label span');
         const optionName = optionTitle ? optionTitle.innerText.toLowerCase() : '';
         reason.innerHTML = sprintf(
           __(

app/assets/stylesheets/pages/settings.scss

@@ -156,39 +156,33 @@
 }
 
 .visibility-level-setting {
-  .form-check {
-    margin-bottom: 10px;
-
-    .option-title {
-      font-weight: $gl-font-weight-normal;
-      display: inline-block;
-      color: $gl-text-color;
-      vertical-align: top;
-    }
+  .option-title {
+    font-weight: $gl-font-weight-normal;
+    display: inline-block;
+    color: $gl-text-color;
+    vertical-align: top;
+  }
 
-    .option-description,
-    .option-disabled-reason {
-      margin-left: 20px;
-      color: $project-option-descr-color;
-      margin-top: -5px;
+  .option-description,
+  .option-disabled-reason {
+    color: $project-option-descr-color;
+  }
+
+  .option-disabled-reason {
+    display: none;
+  }
+
+  .disabled {
+    svg {
+      opacity: 0.5;
     }
 
-    .option-disabled-reason {
+    .option-description {
       display: none;
     }
 
-    &.disabled {
-      svg {
-        opacity: 0.5;
-      }
-
-      .option-description {
-        display: none;
-      }
-
-      .option-disabled-reason {
-        display: block;
-      }
+    .option-disabled-reason {
+      display: block;
     }
   }
 }

app/views/groups/settings/_general.html.haml

-= form_for @group, html: { multipart: true, class: 'gl-show-field-errors js-general-settings-form' }, authenticity_token: true do |f|
+= gitlab_ui_form_for @group, html: { multipart: true, class: 'gl-show-field-errors js-general-settings-form' }, authenticity_token: true do |f|
   %input{ type: 'hidden', name: 'update_section', value: 'js-general-settings' }
   = form_errors(@group, pajamas_alert: true)
 

app/views/projects/new.html.haml

@@ -12,7 +12,7 @@
 
   .row{ 'v-cloak': true }
     #blank-project-pane.tab-pane.active
-      = form_for @project, html: { class: 'new_project gl-mt-3' } do |f|
+      = gitlab_ui_form_for @project, html: { class: 'new_project gl-mt-3' } do |f|
         = render 'new_project_fields', f: f, project_name_id: "blank-project-name"
 
     #create-from-template-pane.tab-pane
@@ -22,7 +22,7 @@
             - contributing_templates_url = 'https://gitlab.com/gitlab-org/project-templates/contributing'
             - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: contributing_templates_url }
             = _('Learn how to %{link_start}contribute to the built-in templates%{link_end}').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
-      = form_for @project, html: { class: 'new_project' } do |f|
+      = gitlab_ui_form_for @project, html: { class: 'new_project' } do |f|
         .project-template
           .form-group
             %div

app/views/shared/_visibility_radios.html.haml

@@ -2,15 +2,13 @@
 - selected_level = snippets_selected_visibility_level(available_visibility_levels, selected_level)
 
 - available_visibility_levels.each do |level|
-  .form-check
-    = form.radio_button model_method, level, checked: (selected_level == level), class: 'form-check-input', data: { track_label: "blank_project", track_action: "activate_form_input", track_property: "#{model_method}_#{level}", track_value: "", qa_selector: "#{visibility_level_label(level).downcase}_radio" }
-    = form.label "#{model_method}_#{level}", class: 'form-check-label' do
-      = visibility_level_icon(level)
-      .option-title
-        = visibility_level_label(level)
-      .option-description
-        = visibility_level_description(level, form_model)
-      .option-disabled-reason
+
+  = form.gitlab_ui_radio_component model_method, level,
+     "#{visibility_level_icon(level)} #{visibility_level_label(level)}".html_safe,
+     help_text: '<span class="option-description">%{visibility_level_description}</span><span class="option-disabled-reason"></span>'.html_safe % { visibility_level_description: visibility_level_description(level, form_model)},
+     radio_options: { checked: (selected_level == level), data: { track_label: "blank_project", track_action: "activate_form_input", track_property: "#{model_method}_#{level}", track_value: "", qa_selector: "#{visibility_level_label(level).downcase}_radio" } },
+     label_options: { class: 'form-check-label gl-mb-2' }
+
 
 .text-muted
   - if all_visibility_levels_restricted?

ee/app/views/registrations/projects/new.html.haml

@@ -28,7 +28,7 @@
 
         .tab-content.gitlab-tab-content.gl-bg-white
           #blank-project-pane.tab-pane.js-toggle-container.active{ role: 'tabpanel' }
-            = form_for @project, url: users_sign_up_projects_path(trial_onboarding_flow: params[:trial_onboarding_flow]), html: { class: 'new_project' } do |f|
+            = gitlab_ui_form_for @project, url: users_sign_up_projects_path(trial_onboarding_flow: params[:trial_onboarding_flow]), html: { class: 'new_project' } do |f|
               = form_errors(@project, pajamas_alert: true)
               = f.hidden_field :namespace_id, value: @project.namespace_id
               #blank-project-name.row

ee/app/views/subscriptions/groups/edit.html.haml

@@ -11,7 +11,7 @@
         %div= _('A group represents your organization in GitLab. Groups allow you to manage users and collaborate across multiple projects.')
         %div= _('Your %{plan} plan will be applied to your group.' % { plan: plan_title })
 
-      = form_for [:subscriptions, @group], html: { class: 'gl-show-field-errors card w-100 gl-p-5' } do |f|
+      = gitlab_ui_form_for [:subscriptions, @group], html: { class: 'gl-show-field-errors card w-100 gl-p-5' } do |f|
         = hidden_field_tag :new_user, params[:new_user]
         = form_errors(@group, pajamas_alert: true)
         .row

qa/qa/page/component/visibility_setting.rb

@@ -15,7 +15,7 @@ def self.included(base)
         end
 
         def set_visibility(visibility)
-          choose_element("#{visibility.downcase}_radio", false, true)
+          find('label', text: visibility.capitalize).click
         end
       end
     end

qa/qa/page/project/new.rb

@@ -76,7 +76,7 @@ def click_create_from_template_tab
         end
 
         def set_visibility(visibility)
-          choose visibility.capitalize
+          find('label', text: visibility.capitalize).click
         end
 
         # Disable experiment for SAST at project creation https://gitlab.com/gitlab-org/gitlab/-/issues/333196