From 76e2a4296c22d077e8bc0ba1edf569f84cafb37b Mon Sep 17 00:00:00 2001 From: Thomas Randolph Date: Fri, 20 May 2022 15:40:41 -0600 Subject: [PATCH] Convert all locations that have the visibility radios The bulk of the work is just converting the shared partial to the new Pajamas UI HAML helper, but many of the places that partial is used also needed to be switched to the new form helper. --- app/assets/stylesheets/pages/settings.scss | 36 +++++-------------- app/views/groups/new.html.haml | 2 +- app/views/groups/settings/_general.html.haml | 2 +- app/views/projects/new.html.haml | 4 +-- app/views/shared/_visibility_radios.html.haml | 20 ++++++----- .../registrations/projects/new.html.haml | 2 +- .../views/subscriptions/groups/edit.html.haml | 2 +- .../helpers/features/snippet_helpers.rb | 4 ++- 8 files changed, 29 insertions(+), 43 deletions(-) diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss index 0c7b74684ccbda..ba10fab90fb87d 100644 --- a/app/assets/stylesheets/pages/settings.scss +++ b/app/assets/stylesheets/pages/settings.scss @@ -156,39 +156,21 @@ } .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-disabled-reason { + display: none; + } - .option-description, - .option-disabled-reason { - margin-left: 20px; - color: $project-option-descr-color; - margin-top: -5px; + &.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; } } } diff --git a/app/views/groups/new.html.haml b/app/views/groups/new.html.haml index 58a78a8adc1a67..3fb2b88dadd48e 100644 --- a/app/views/groups/new.html.haml +++ b/app/views/groups/new.html.haml @@ -10,7 +10,7 @@ .row{ 'v-cloak': true } #create-group-pane.tab-pane - = form_for @group, html: { class: 'group-form gl-show-field-errors gl-mt-3' } do |f| + = gitlab_ui_form_for @group, html: { class: 'group-form gl-show-field-errors gl-mt-3' } do |f| = render 'new_group_fields', f: f, group_name_id: 'create-group-name' #import-group-pane.tab-pane diff --git a/app/views/groups/settings/_general.html.haml b/app/views/groups/settings/_general.html.haml index ad0780e869c883..fab95c0ee2d016 100644 --- a/app/views/groups/settings/_general.html.haml +++ b/app/views/groups/settings/_general.html.haml @@ -1,4 +1,4 @@ -= 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) diff --git a/app/views/projects/new.html.haml b/app/views/projects/new.html.haml index 4e4738ebd25632..247107d462bb2a 100644 --- a/app/views/projects/new.html.haml +++ b/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 = ''.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: ''.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 diff --git a/app/views/shared/_visibility_radios.html.haml b/app/views/shared/_visibility_radios.html.haml index 760fe18ddece06..843872d95c354c 100644 --- a/app/views/shared/_visibility_radios.html.haml +++ b/app/views/shared/_visibility_radios.html.haml @@ -2,15 +2,17 @@ - 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 + - labelIcon = visibility_level_icon(level) + - labelText = (" " + visibility_level_label(level)).html_safe + - labelDescription = ('' + ( visibility_level_description(level, form_model) || "" ) + '').html_safe + - labelDisableReason = ''.html_safe + - 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" } } + + = form.gitlab_ui_radio_component model_method, + level, + labelIcon + labelText, + help_text: labelDescription + labelDisableReason, + radio_options: options .text-muted - if all_visibility_levels_restricted? diff --git a/ee/app/views/registrations/projects/new.html.haml b/ee/app/views/registrations/projects/new.html.haml index 302986039ac058..ca1691ce39bef2 100644 --- a/ee/app/views/registrations/projects/new.html.haml +++ b/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) = f.hidden_field :namespace_id, value: @project.namespace_id #blank-project-name.row diff --git a/ee/app/views/subscriptions/groups/edit.html.haml b/ee/app/views/subscriptions/groups/edit.html.haml index 1e01ab6c6f2fef..b27d3bff24209c 100644 --- a/ee/app/views/subscriptions/groups/edit.html.haml +++ b/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) .row diff --git a/spec/support/helpers/features/snippet_helpers.rb b/spec/support/helpers/features/snippet_helpers.rb index 3e32b0e4c67686..1bd442182df0e0 100644 --- a/spec/support/helpers/features/snippet_helpers.rb +++ b/spec/support/helpers/features/snippet_helpers.rb @@ -42,7 +42,9 @@ def snippet_description_value end def snippet_fill_in_visibility(text) - page.find('#visibility-level-setting').choose(text) + levels = { 'Private' => 0, 'Internal' => 1, 'Public' => 2 } + + page.find('#visibility-level-setting').choose({ option: levels[text] }) end def snippet_fill_in_title(value) -- GitLab