From 498539a2c9bce1b437865839c44405221d4ff7ed Mon Sep 17 00:00:00 2001
From: Jay McCure <jmccure@gitlab.com>
Date: Tue, 6 Feb 2024 08:27:49 +0000
Subject: [PATCH] Revert `pw-papercut-use-template-button-migration` branch
This reverts merge request !143297
---
app/assets/javascripts/projects/project_new.js | 14 ++++++++++++--
.../projects/project_templates/_template.html.haml | 7 +++++--
qa/qa/page/project/new.rb | 1 +
spec/features/projects/new_project_spec.rb | 4 ++--
spec/features/projects_spec.rb | 4 ++--
5 files changed, 22 insertions(+), 8 deletions(-)
diff --git a/app/assets/javascripts/projects/project_new.js b/app/assets/javascripts/projects/project_new.js
index 8b09c90452303..9e71e662d709b 100644
--- a/app/assets/javascripts/projects/project_new.js
+++ b/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', () => {
diff --git a/app/views/projects/project_templates/_template.html.haml b/app/views/projects/project_templates/_template.html.haml
index 2d30b94e73eeb..ab1c1e6e9a446 100644
--- a/app/views/projects/project_templates/_template.html.haml
+++ b/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")
diff --git a/qa/qa/page/project/new.rb b/qa/qa/page/project/new.rb
index fc6029734921f..3019557f78b9f 100644
--- a/qa/qa/page/project/new.rb
+++ b/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
diff --git a/spec/features/projects/new_project_spec.rb b/spec/features/projects/new_project_spec.rb
index b2c32a74150cc..d6b27d8c618fa 100644
--- a/spec/features/projects/new_project_spec.rb
+++ b/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')
diff --git a/spec/features/projects_spec.rb b/spec/features/projects_spec.rb
index 1875a7716014a..1fb1e21ac67fb 100644
--- a/spec/features/projects_spec.rb
+++ b/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
--
GitLab