Fix incorrect selection of custom templates

Previously if multiple project templates had similar names, it was
possible the wrong template were used. For example, if you had three
different templates with the names:

1. docker
2. docker-image
3. docker-image-and-app

Clicking on `docker` would cause the search to match all three items,
and `CreateFromTemplateService` would just pick the first one returned
from the database.

Instead of using names, this commit uses the project ID to avoid this
ambiguity.

The backend support for this feature went in GitLab 12.4 via
https://gitlab.com/gitlab-org/gitlab/merge_requests/18178. This change
updates the frontend to use this.

Closes https://gitlab.com/gitlab-org/gitlab/issues/9146

changelogs/unreleased/sh-use-template-project-id.yml

+---
+title: Fix incorrect selection of custom templates
+merge_request: 17205
+author:
+type: fixed

ee/app/assets/javascripts/projects/custom_project_templates.js

@@ -54,8 +54,8 @@ const bindEvents = () => {
   }
 
   function chooseTemplate() {
-    const value = $(this).val();
     const subgroupId = $(this).data('subgroup-id');
+    const templateName = $(this).data('template-name');
 
     if (subgroupId) {
       $subgroupWithTemplatesIdInput.val(subgroupId);
@@ -70,7 +70,7 @@ const bindEvents = () => {
     $projectFieldsForm.addClass('selected');
     $selectedIcon.empty();
 
-    $selectedTemplateText.text(value);
+    $selectedTemplateText.text(templateName);
 
     $(this)
       .parents('.template-option')

ee/app/views/users/_custom_project_templates.html.haml

@@ -14,7 +14,7 @@
           %a.btn.btn-default.append-right-10{ href: project_path(template), rel: 'noopener noreferrer', target: '_blank' }
             = _('Preview')
           %label.btn.btn-success.custom-template-button.choose-template.append-bottom-0{ for: template.name }
-            %input{ type: "radio", autocomplete: "off", name: "project[template_name]", id: template.name, value: template.name }
+            %input{ type: "radio", autocomplete: "off", name: "project[template_project_id]", id: template.name, value: template.id, data: { template_name: template.name } }
             %span.qa-use-template-button
               = _('Use template')
 

ee/app/views/users/_custom_project_templates_from_groups.html.haml

@@ -33,7 +33,7 @@
               %a.btn.btn-default.append-right-10{ href: project_path(project), rel: 'noopener noreferrer', target: '_blank' }
                 = _('Preview')
               %label.btn.btn-success.custom-template-button.choose-template.append-bottom-0{ for: project.name }
-                %input{ type: "radio", autocomplete: "off", name: "project[template_name]", id: project.name, value: project.name, data: { subgroup_id: project.namespace_id } }
+                %input{ type: "radio", autocomplete: "off", name: "project[template_project_id]", id: project.name, value: project.id, data: { subgroup_id: project.namespace_id, template_name: project.name } }
                 %span.qa-use-template-button
                   = _('Use template')
 

ee/spec/features/projects/new_project_spec.rb

@@ -224,7 +224,7 @@ describe 'New project' do
           visit_create_from_group_template_tab
 
           page.within('.custom-project-templates') do
-            page.find(".template-option input[value='#{subgroup1_project1.name}']").first(:xpath, './/..').click
+            page.find(".template-option input[value='#{subgroup1_project1.id}']").first(:xpath, './/..').click
             wait_for_all_requests
           end
         end
@@ -253,7 +253,7 @@ describe 'New project' do
             page.within('#create-from-template-pane') do
               click_button 'Change template'
 
-              page.find(:xpath, "//input[@type='radio' and @value='#{subgroup1_project1.name}']/..").click
+              page.find(:xpath, "//input[@type='radio' and @value='#{subgroup1_project1.id}']/..").click
 
               wait_for_all_requests
             end