Revert `pw-papercut-use-template-button-migration` branch

This reverts merge request !143297

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 = $('.js-use-template-button');
+  const $useTemplateBtn = $('.template-button > input');
   const $changeTemplateBtn = $('.change-template');
 
   const $projectImportUrl = document.querySelector('#project_import_url');
@@ -256,7 +256,9 @@ const bindEvents = () => {
     clearChildren($selectedIcon);
 
     const $selectedTemplate = this;
-    const value = $($selectedTemplate).data('templateName');
+    $selectedTemplate.checked = true;
+
+    const { value } = $selectedTemplate;
     const selectedTemplate = DEFAULT_PROJECT_TEMPLATES[value];
     $selectedTemplateText.textContent = selectedTemplate.text;
     const clone = document.querySelector(selectedTemplate.icon).cloneNode(true);
@@ -271,6 +273,11 @@ 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);
@@ -278,11 +285,14 @@ 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,5 +10,8 @@
   .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")
-    = 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")
+    %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")

qa/qa/page/project/new.rb

@@ -23,6 +23,7 @@ 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_by_testid("use-template-#{Gitlab::ProjectTemplate.localized_templates_table.first.name}").click
+        find("[data-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'
-        click_link_or_button('Use template', match: :first)
+        first('.choose-template').click
 
         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 = '.js-use-template-button'
+      choose_template_selector = '.choose-template'
       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("button[data-template-name=#{template.name}]").click
+        find("label[for=#{template.name}]").click
         fill_in("project_name", with: template.name)
 
         page.within '#content-body' do