Migrate Use template button to Pajamas

app/assets/javascripts/projects/project_new.js

@@ -219,7 +219,7 @@ const bindEvents = () => {
   const $projectImportUrlPassword = $('#project_import_url_password');
   const $projectImportUrlError = $('.js-import-url-error');
   const $projectImportForm = $('form.js-project-import');
-  const $useTemplateBtn = $('.template-button > input');
+  const $useTemplateBtn = $('.js-use-template-button');
   const $changeTemplateBtn = $('.change-template');
 
   const $projectImportUrl = document.querySelector('#project_import_url');
@@ -256,9 +256,7 @@ const bindEvents = () => {
     clearChildren($selectedIcon);
 
     const $selectedTemplate = this;
-    $selectedTemplate.checked = true;
-
-    const { value } = $selectedTemplate;
+    const value = $($selectedTemplate).data('templateName');
     const selectedTemplate = DEFAULT_PROJECT_TEMPLATES[value];
     $selectedTemplateText.textContent = selectedTemplate.text;
     const clone = document.querySelector(selectedTemplate.icon).cloneNode(true);
@@ -273,11 +271,6 @@ const bindEvents = () => {
     setProjectNamePathHandlers($activeTabProjectName, $activeTabProjectPath);
   }
 
-  function toggleActiveClassOnLabel(event) {
-    const $label = $(event.target).parent();
-    $label.toggleClass('active');
-  }
-
   function chooseTemplateOnEnter(event) {
     if (event.code === ENTER_KEY) {
       chooseTemplate.call(this);
@@ -285,14 +278,11 @@ const bindEvents = () => {
   }
 
   $useTemplateBtn.on('click', chooseTemplate);
-
-  $useTemplateBtn.on('focus focusout', toggleActiveClassOnLabel);
   $useTemplateBtn.on('keypress', chooseTemplateOnEnter);
 
   $changeTemplateBtn.on('click', () => {
     $projectTemplateButtons.forEach((ptb) => ptb.classList.remove('hidden'));
     $projectFieldsForm.classList.remove('selected');
-    $useTemplateBtn.prop('checked', false);
   });
 
   $newProjectForm.on('submit', () => {

app/views/projects/project_templates/_template.html.haml

@@ -10,8 +10,5 @@
   .controls.d-flex.gl-align-items-center
     = render Pajamas::ButtonComponent.new(button_options: { class: 'gl-mr-3', data: { track_label: "template_preview", track_property: template.name, track_action: "click_button", track_value: "" }, rel: 'noopener noreferrer' }, href: template.preview, target: '_blank') do
       = _("Preview")
-    %label.btn.gl-button.btn-confirm.template-button.choose-template.gl-mb-0{ for: template.name,
-      'data-testid': "use_template_#{template.name}" }
-      %input{ type: "radio", autocomplete: "off", name: "project[template_name]", id: template.name, value: template.name, data: { track_label: "template_use", track_property: template.name, track_action: "click_button", track_value: "" } }
-      %span{ data: { testid: 'use-template-button' } }
-        = _("Use template")
+    = render Pajamas::ButtonComponent.new(variant: :confirm, button_options: { class: 'js-use-template-button', data: { testid: "use-template-#{template.name}", track_label: 'template_use', track_property: template.name, track_action: 'click_button', track_value: '', template_name: template.name } }) do
+      = _("Use template")

qa/qa/page/project/new.rb

@@ -23,7 +23,6 @@ class New < Page::Base
         end
 
         view 'app/views/projects/project_templates/_template.html.haml' do
-          element 'use-template-button'
           element 'template-option-container'
         end
 

spec/features/projects/new_project_spec.rb

@@ -63,7 +63,7 @@
       click_link 'Create from template'
 
       page.within('#create-from-template-pane') do
-        find("[data-testid='use_template_#{Gitlab::ProjectTemplate.localized_templates_table.first.name}']").click
+        find_by_testid("use-template-#{Gitlab::ProjectTemplate.localized_templates_table.first.name}").click
 
         expect(page).to have_content(description_label)
       end
@@ -284,7 +284,7 @@
       it 'does not show the initialize with Readme checkbox on "Create from template" tab' do
         visit new_project_path
         click_link 'Create from template'
-        first('.choose-template').click
+        click_link_or_button('Use template', match: :first)
 
         page.within '.project-fields-form' do
           expect(page).not_to have_css('input#project_initialize_with_readme')

spec/features/projects_spec.rb

@@ -18,14 +18,14 @@
     shared_examples 'creates from template' do |template, sub_template_tab = nil|
       let(:selected_template) { page.find('.project-fields-form .selected-template') }
 
-      choose_template_selector = '.choose-template'
+      choose_template_selector = '.js-use-template-button'
       template_option_selector = '.template-option'
       template_name_selector = '.description strong'
 
       it "is created from template", :js do
         click_link 'Create from template'
         find(".project-template #{sub_template_tab}").click if sub_template_tab
-        find("label[for=#{template.name}]").click
+        find("button[data-template-name=#{template.name}]").click
         fill_in("project_name", with: template.name)
 
         page.within '#content-body' do