Merge branch '417815-add-support-to-pajamas-for-sso-button-to' into 'master'

Migrated signup omniauth buttons to pajamas

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/133432



Merged-by: Eduardo Sanz García <esanz-garcia@gitlab.com>
Approved-by: Ammar Alakkad <aalakkad@gitlab.com>
Approved-by: Javiera Tapia <jtapia@gitlab.com>
Approved-by: Eduardo Sanz García <esanz-garcia@gitlab.com>
Reviewed-by: Eduardo Sanz García <esanz-garcia@gitlab.com>
Reviewed-by: Javiera Tapia <jtapia@gitlab.com>
Co-authored-by: Ross Byrne <robyrne@gitlab.com>
Co-authored-by: Doug Stull <dstull@gitlab.com>

app/components/pajamas/button_component.html.haml

@@ -7,7 +7,11 @@
     %span.gl-button-text{ class: @button_text_classes }
       = content
 
-- if link?
+- if form?
+  -# workaround for link_to dropping snowplow tracking. Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/417815
+  = button_to @href, { **@button_options, **base_attributes, class: button_class, target: @target, method: @method } do
+    = content_for :pajamas_button_content
+- elsif link?
   = link_to @href, { **@button_options, **base_attributes, class: button_class, target: @target, method: @method } do
     = content_for :pajamas_button_content
 - else

app/components/pajamas/button_component.rb

@@ -12,6 +12,7 @@ class ButtonComponent < Pajamas::Component
     # @param [Boolean] selected
     # @param [String] icon
     # @param [String] href
+    # @param [Boolean] form
     # @param [String] target
     # @param [Symbol] method
     # @param [Hash] button_options
@@ -28,6 +29,7 @@ def initialize(
       selected: false,
       icon: nil,
       href: nil,
+      form: false,
       target: nil,
       method: nil,
       button_options: {},
@@ -44,6 +46,7 @@ def initialize(
       @selected = selected
       @icon = icon
       @href = href
+      @form = form
       @target = filter_attribute(target, TARGET_OPTIONS)
       @method = filter_attribute(method, METHOD_OPTIONS)
       @button_options = button_options
@@ -109,6 +112,10 @@ def link?
       @href.present?
     end
 
+    def form?
+      @href.present? && @form.present?
+    end
+
     def base_attributes
       attributes = {}
 

app/views/devise/shared/_signup_omniauth_provider_button.haml

+- data = { provider: provider, track_action: "#{provider}_sso", track_label: tracking_label }
+- button_options = { class: 'js-oauth-login', data: data, id: "oauth-login-#{provider}" }
+
+= render Pajamas::ButtonComponent.new(href: href, method: :post, form: true, block: true, button_options: button_options) do
+  - if provider_has_icon?(provider)
+    = provider_image_tag(provider)
+  %span.gl-button-text
+    = label_for_provider(provider)

app/views/devise/shared/_signup_omniauth_provider_list.haml

@@ -2,23 +2,20 @@
   .gl-text-center.gl-pt-5
     %label.gl-font-weight-normal
       = _("Register with:")
-    .gl-text-center.gl-ml-auto.gl-mr-auto
+    .gl-display-flex.gl-flex-direction-column.gl-gap-3
       - providers.each do |provider|
-        = button_to omniauth_authorize_path(:user, provider, register_omniauth_params(local_assigns)), class: "btn gl-button btn-default gl-w-full gl-mb-4 js-oauth-login #{test_id_for_provider(provider)}", data: { provider: provider, track_action: "#{provider}_sso", track_label: tracking_label }, id: "oauth-login-#{provider}" do
-          - if provider_has_icon?(provider)
-            = provider_image_tag(provider)
-          %span.gl-button-text
-            = label_for_provider(provider)
+        = render 'devise/shared/signup_omniauth_provider_button',
+          href: omniauth_authorize_path(:user, provider, register_omniauth_params(local_assigns)),
+          provider: provider,
+          tracking_label: tracking_label
+
+
 - else
   %label.gl-font-weight-bold
     = _("Create an account using:")
-  .gl-display-flex.gl-justify-content-between.gl-flex-wrap
+  .gl-display-flex.gl-flex-direction-column.gl-gap-3
     - providers.each do |provider|
-      = button_to omniauth_authorize_path(:user, provider, register_omniauth_params(local_assigns)),
-        class: "btn gl-button btn-default gl-w-full gl-mb-4 js-oauth-login #{test_id_for_provider(provider)}",
-        data: { provider: provider, track_action: "#{provider}_sso", track_label: tracking_label },
-        id: "oauth-login-#{provider}" do
-        - if provider_has_icon?(provider)
-          = provider_image_tag(provider)
-        %span.gl-button-text
-          = label_for_provider(provider)
+      = render 'devise/shared/signup_omniauth_provider_button',
+          href: omniauth_authorize_path(:user, provider, register_omniauth_params(local_assigns)),
+          provider: provider,
+          tracking_label: tracking_label

ee/app/views/trial_registrations/_new_design.html.haml

@@ -4,15 +4,11 @@
       = _('Sign up for your free trial with:')
     .gl-display-flex.gl-gap-3
       - popular_enabled_button_based_providers.each do |provider|
-        = button_to omniauth_authorize_path(:user, provider, register_omniauth_params(trial: true)),
-          class: "btn gl-button btn-default gl-w-full gl-mb-4 js-oauth-login #{test_id_for_provider(provider)}",
-          data: { provider: provider, track_action: "#{provider}_sso",
-                  track_label: ::Onboarding::Status::TRACKING_LABEL[:trial] },
-          id: "oauth-login-#{provider}" do
-          - if provider_has_icon?(provider)
-            = provider_image_tag(provider)
-          %span.gl-button-text
-            = label_for_provider(provider)
+        = render 'devise/shared/signup_omniauth_provider_button',
+          href: omniauth_authorize_path(:user, provider, register_omniauth_params(trial: true)),
+          provider: provider,
+          tracking_label: ::Onboarding::Status::TRACKING_LABEL[:trial]
+
   .omniauth-divider.gl-display-flex.gl-align-items-center.gl-mb-5.gl-mt-5.gl-font-weight-bold.gl-max-w-75
     = _('Or create your own GitLab account:')
 

spec/views/devise/shared/_signup_omniauth_provider_list_spec.rb

@@ -47,4 +47,14 @@
 
     it_behaves_like 'sso buttons have snowplow tracking'
   end
+
+  context 'when rendering button' do
+    before do
+      render
+    end
+
+    it 'renders button in form' do
+      expect(rendered).to have_css('form[action="/users/auth/github"]')
+    end
+  end
 end