Merge branch '6860-FE-instance-level-project-templates' into 'master'

Backport changes from gitlab-ee!6740

See merge request gitlab-org/gitlab-ce!21012

app/assets/javascripts/groups_select.js

@@ -12,6 +12,7 @@ export default function groupsSelect() {
     const skipGroups = $select.data('skipGroups') || [];
     $select.select2({
       placeholder: 'Search for a group',
+      allowClear: $select.hasClass('allowClear'),
       multiple: $select.hasClass('multiselect'),
       minimumInputLength: 0,
       ajax: {

app/assets/javascripts/pages/projects/new/index.js

-import initProjectLoadingSpinner from '../shared/save_project_loader';
 import initProjectVisibilitySelector from '../../../project_visibility';
 import initProjectNew from '../../../projects/project_new';
 
 document.addEventListener('DOMContentLoaded', () => {
-  initProjectLoadingSpinner();
   initProjectVisibilitySelector();
   initProjectNew.bindEvents();
 });

app/assets/javascripts/projects/project_new.js

@@ -37,9 +37,10 @@ const bindEvents = () => {
   const $projectFieldsForm = $('.project-fields-form');
   const $selectedTemplateText = $('.selected-template');
   const $changeTemplateBtn = $('.change-template');
-  const $selectedIcon = $('.selected-icon svg');
+  const $selectedIcon = $('.selected-icon');
   const $templateProjectNameInput = $('#template-project-name #project_path');
   const $pushNewProjectTipTrigger = $('.push-new-project-tip');
+  const $projectTemplateButtons = $('.project-templates-buttons');
 
   if ($newProjectForm.length !== 1) {
     return;
@@ -88,35 +89,35 @@ const bindEvents = () => {
   }
 
   function chooseTemplate() {
-    $('.template-option').hide();
+    $projectTemplateButtons.addClass('hidden');
     $projectFieldsForm.addClass('selected');
-    $selectedIcon.removeClass('d-block');
+    $selectedIcon.empty();
     const value = $(this).val();
     const templates = {
       rails: {
         text: 'Ruby on Rails',
-        icon: '.selected-icon .icon-rails',
+        icon: '.template-option svg.icon-rails',
       },
       express: {
         text: 'NodeJS Express',
-        icon: '.selected-icon .icon-node-express',
+        icon: '.template-option svg.icon-node-express',
       },
       spring: {
         text: 'Spring',
-        icon: '.selected-icon .icon-java-spring',
+        icon: '.template-option svg.icon-java-spring',
       },
     };
 
     const selectedTemplate = templates[value];
     $selectedTemplateText.text(selectedTemplate.text);
-    $(selectedTemplate.icon).addClass('d-block');
+    $(selectedTemplate.icon).clone().addClass('d-block').appendTo($selectedIcon);
     $templateProjectNameInput.focus();
   }
 
   $useTemplateBtn.on('change', chooseTemplate);
 
   $changeTemplateBtn.on('click', () => {
-    $('.template-option').show();
+    $projectTemplateButtons.removeClass('hidden');
     $projectFieldsForm.removeClass('selected');
     $useTemplateBtn.prop('checked', false);
   });

app/assets/stylesheets/pages/projects.scss

@@ -490,30 +490,31 @@
     margin-bottom: 0;
   }
 
+  .tab-pane {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
   .template-option {
-    padding: $gl-padding $gl-padding $gl-padding ($gl-padding * 4);
-    position: relative;
+    .logo {
+      .btn-template-icon {
+        width: 40px !important;
+      }
+    }
+
+    padding: 16px 0;
 
     &:not(:first-child) {
       border-top: 1px solid $border-color;
     }
 
-    .btn-template-icon {
-      position: absolute;
-      left: $gl-padding;
-      top: $gl-padding;
+    .controls {
+      margin-left: auto;
     }
-  }
 
-  .template-title {
-    font-size: 16px;
   }
 
-  .template-description {
-    margin: 6px 0 12px;
-  }
-
-  .template-button {
+  .choose-template {
     input {
       position: absolute;
       clip: rect(0, 0, 0, 0);
@@ -540,8 +541,6 @@
     }
 
     .selected-icon {
-      padding-right: $gl-padding;
-
       svg {
         display: none;
         top: 7px;

app/views/admin/application_settings/show.html.haml

@@ -336,5 +336,6 @@
   .settings-content
     = render 'third_party_offers', application_setting: @application_setting
 
-= render_if_exists 'admin/application_settings/pseudonymizer_settings', expanded: expanded
+= render_if_exists 'admin/application_settings/custom_templates_form', expanded: expanded
 
+= render_if_exists 'admin/application_settings/pseudonymizer_settings', expanded: expanded

app/views/projects/_project_templates.html.haml

-.project-templates-buttons.import-buttons
-  - Gitlab::ProjectTemplate.all.each do |template|
-    .template-option
-      = custom_icon(template.logo)
-      .template-title= template.title
-      .template-description= template.description
-      %label.btn.btn-success.template-button.choose-template.append-right-10{ for: template.name }
-        %input{ type: "radio",  autocomplete: "off", name: "project[template_name]", id: template.name, value: template.name }
-        %span Use template
-      %a.btn.btn-default{ href: template.preview, rel: 'noopener noreferrer', target: '_blank' } Preview
+- f ||= local_assigns[:f]
 
-  .project-fields-form
-    .row
-      .form-group.col-sm-12
-        %label.label-bold
-          Template
-        .input-group.template-input-group
-          .input-group-prepend
-            .input-group-text
-              .selected-icon
-                - Gitlab::ProjectTemplate.all.each do |template|
-                  = custom_icon(template.logo)
-              .selected-template
-          .input-group-append
-            %button.btn.btn-default.change-template{ type: "button" } Change template
+.project-templates-buttons.import-buttons.col-sm-12
+  = render 'projects/project_templates/built_in_templates'
 
-    = render 'new_project_fields', f: f, project_name_id: "template-project-name"
+.project-fields-form
+  = render 'projects/project_templates/project_fields_form'
+  = render 'projects/new_project_fields', f: f, project_name_id: "template-project-name"

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

+- Gitlab::ProjectTemplate.all.each do |template|
+  .template-option.d-flex.align-items-center
+    .logo.append-right-10
+      = custom_icon(template.logo, size: 40)
+    .description
+      %strong
+        = template.title
+      %br
+      .text-muted
+        = template.description
+    .controls.d-flex.align-items-center
+      %label.btn.btn-success.template-button.choose-template.append-right-10.append-bottom-0{ for: template.name }
+        %input{ type: "radio",  autocomplete: "off", name: "project[template_name]", id: template.name, value: template.name }
+        %span
+          = _("Use template")
+      %a.btn.btn-default{ href: template.preview, rel: 'noopener noreferrer', target: '_blank' }
+        = _("Preview")

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

+.row
+  .form-group.col-sm-12
+    %label.label-bold
+      = _('Template')
+    .input-group.template-input-group
+      .input-group-prepend
+        .input-group-text
+          .selected-icon.append-right-10
+          .selected-template
+      .input-group-append
+        %button.btn.btn-default.change-template{ type: "button" }
+          = _('Change template')

changelogs/unreleased/6860-FE-instance-level-project-templates.yml

+---
+title: Update design of project templates
+merge_request: 21012
+author:
+type: changed

locale/gitlab.pot

@@ -1050,6 +1050,9 @@ msgstr ""
 msgid "Cannot modify managed Kubernetes cluster"
 msgstr ""
 
+msgid "Change template"
+msgstr ""
+
 msgid "Change this value to influence how frequently the GitLab UI polls for updates."
 msgstr ""
 
@@ -4028,6 +4031,9 @@ msgstr ""
 msgid "Preferences|Navigation theme"
 msgstr ""
 
+msgid "Preview"
+msgstr ""
+
 msgid "Prioritize"
 msgstr ""
 
@@ -5081,6 +5087,9 @@ msgstr ""
 msgid "Team"
 msgstr ""
 
+msgid "Template"
+msgstr ""
+
 msgid "Terms of Service Agreement and Privacy Policy"
 msgstr ""
 
@@ -5655,6 +5664,9 @@ msgstr ""
 msgid "Use one line per URI"
 msgstr ""
 
+msgid "Use template"
+msgstr ""
+
 msgid "Use the following registration token during setup:"
 msgstr ""