From 7cd4a9e3a12d88a1c07c92feaded809dc794b6db Mon Sep 17 00:00:00 2001
From: Paul W <19602001-paintedbicycle-gitlab@users.noreply.gitlab.com>
Date: Mon, 5 Feb 2024 21:37:35 +0000
Subject: [PATCH] Migrate Use template button to Pajamas
---
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, 8 insertions(+), 22 deletions(-)
diff --git a/app/assets/javascripts/projects/project_new.js b/app/assets/javascripts/projects/project_new.js
index 9e71e662d709..8b09c9045230 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 = $('.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', () => {
diff --git a/app/views/projects/project_templates/_template.html.haml b/app/views/projects/project_templates/_template.html.haml
index ab1c1e6e9a44..2d30b94e73ee 100644
--- a/app/views/projects/project_templates/_template.html.haml
+++ b/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")
diff --git a/qa/qa/page/project/new.rb b/qa/qa/page/project/new.rb
index 3019557f78b9..fc6029734921 100644
--- a/qa/qa/page/project/new.rb
+++ b/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
diff --git a/spec/features/projects/new_project_spec.rb b/spec/features/projects/new_project_spec.rb
index d6b27d8c618f..b2c32a74150c 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("[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')
diff --git a/spec/features/projects_spec.rb b/spec/features/projects_spec.rb
index 1fb1e21ac67f..1875a7716014 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 = '.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
--
GitLab