Merge branch '37399-simplify-project-page' into 'master'

Simplify project page

Closes #37399 and #38839

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

18 files changed, 313 insertions, 187 deletions

diff --git a/app/assets/javascripts/projects/project_new.js b/app/assets/javascripts/projects/project_new.js
index 7f972b6f6ee..3ecc0c2a6e5 100644
--- a/app/assets/javascripts/projects/project_new.js
+++ b/app/assets/javascripts/projects/project_new.js
@@ -29,6 +29,12 @@ const bindEvents = () => {
   const $newProjectForm = $('#new_project');
   const $projectImportUrl = $('#project_import_url');
   const $projectPath = $('#project_path');
+  const $useTemplateBtn = $('.template-button > input');
+  const $projectFieldsForm = $('.project-fields-form');
+  const $selectedTemplateText = $('.selected-template');
+  const $changeTemplateBtn = $('.change-template');
+  const $selectedIcon = $('.selected-icon svg');
+  const $templateProjectNameInput = $('#template-project-name #project_path');
 
   if ($newProjectForm.length !== 1) {
     return;
@@ -48,6 +54,40 @@ const bindEvents = () => {
     $('.btn_import_gitlab_project').attr('href', `${importHref}?namespace_id=${$('#project_namespace_id').val()}&path=${$projectPath.val()}`);
   });
 
+  function chooseTemplate() {
+    $('.template-option').hide();
+    $projectFieldsForm.addClass('selected');
+    $selectedIcon.removeClass('active');
+    const value = $(this).val();
+    const templates = {
+      rails: {
+        text: 'Ruby on Rails',
+        icon: '.selected-icon .icon-rails',
+      },
+      express: {
+        text: 'NodeJS Express',
+        icon: '.selected-icon .icon-node-express',
+      },
+      spring: {
+        text: 'Spring',
+        icon: '.selected-icon .icon-java-spring',
+      },
+    };
+
+    const selectedTemplate = templates[value];
+    $selectedTemplateText.text(selectedTemplate.text);
+    $(selectedTemplate.icon).addClass('active');
+    $templateProjectNameInput.focus();
+  }
+
+  $useTemplateBtn.on('change', chooseTemplate);
+
+  $changeTemplateBtn.on('click', () => {
+    $('.template-option').show();
+    $projectFieldsForm.removeClass('selected');
+    $useTemplateBtn.prop('checked', false);
+  });
+
   $newProjectForm.on('submit', () => {
     $projectPath.val($projectPath.val().trim());
   });
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index c7be94e2c8e..0d7a5cba928 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -38,6 +38,7 @@
 @import "framework/new-sidebar";
 @import "framework/tables";
 @import "framework/notes";
+@import "framework/tabs";
 @import "framework/timeline";
 @import "framework/tooltips";
 @import "framework/typography";
diff --git a/app/assets/stylesheets/framework/tabs.scss b/app/assets/stylesheets/framework/tabs.scss
new file mode 100644
index 00000000000..c8ba14b7066
--- /dev/null
+++ b/app/assets/stylesheets/framework/tabs.scss
@@ -0,0 +1,35 @@
+.gitlab-tabs {
+  background: $gray-light;
+  border: 1px solid $border-color;
+
+  li {
+    width: 50%;
+
+    &:not(:last-child) {
+      border-right: 1px solid $border-color;
+    }
+
+    &.active {
+      background: $white-light;
+    }
+
+    a {
+      width: 100%;
+      text-align: center;
+    }
+  }
+}
+
+.gitlab-tab-content {
+  border: 1px solid $border-color;
+  border-top: 0;
+  margin-bottom: $gl-padding;
+
+  .tab-pane {
+    padding: $gl-padding;
+
+    &.no-padding {
+      padding: 0;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index bbbd16322eb..089a67a7c98 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -699,14 +699,6 @@ $perf-bar-bucket-color: #ccc;
 $perf-bar-bucket-box-shadow-from: rgba($white-light, .2);
 $perf-bar-bucket-box-shadow-to: rgba($black, .25);
 
-
-/*
-Project Templates Icons
-*/
-$rails: #c00;
-$node: #353535;
-$java: #70ad51;
-
 /*
 Issuable warning
 */
diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss
index b3bab082a35..692acf74a58 100644
--- a/app/assets/stylesheets/pages/members.scss
+++ b/app/assets/stylesheets/pages/members.scss
@@ -3,41 +3,12 @@
   border-bottom: 1px solid $border-color;
 }
 
-.project-member-tabs {
-  background: $gray-light;
-  border: 1px solid $border-color;
-
-  li {
-    width: 50%;
-
-    &.active {
-      background: $white-light;
-    }
-
-    &:first-child {
-      border-right: 1px solid $border-color;
-    }
-
-    a {
-      width: 100%;
-      text-align: center;
-    }
-  }
-}
-
 .users-project-form {
   .btn-create {
     margin-right: 10px;
   }
 }
 
-.project-member-tab-content {
-  padding: $gl-padding;
-  border: 1px solid $border-color;
-  border-top: 0;
-  margin-bottom: $gl-padding;
-}
-
 .member {
   .list-item-name {
     @media (min-width: $screen-sm-min) {
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index a086c11324d..61dc9f13d50 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -48,7 +48,8 @@
       border: 1px solid $border-color;
     }
 
-    + .select2 a {
+    + .select2 a,
+    + .btn-default {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
     }
@@ -549,10 +550,92 @@ a.deploy-project-label {
   }
 }
 
-.project-template,
+.project-template {
+  > .form-group {
+    margin-bottom: 0;
+  }
+
+  .template-option {
+    padding: $gl-padding $gl-padding $gl-padding ($gl-padding * 4);
+    position: relative;
+
+    &:not(:first-child) {
+      border-top: 1px solid $border-color;
+    }
+  }
+
+  .template-title {
+    font-size: 16px;
+  }
+
+  .template-description {
+    margin: 6px 0 12px;
+  }
+
+  .template-button {
+    input {
+      position: absolute;
+      clip: rect(0, 0, 0, 0);
+    }
+  }
+
+  svg {
+    position: absolute;
+    left: $gl-padding;
+    top: $gl-padding;
+  }
+
+  .project-fields-form {
+    display: none;
+
+    &.selected {
+      display: block;
+      padding: $gl-padding;
+    }
+  }
+
+  .template-input-group {
+    position: relative;
+
+    @media (min-width: $screen-sm-min) {
+      display: flex;
+    }
+
+    .input-group-addon {
+      flex: 1;
+      text-align: left;
+      padding-left: ($gl-padding * 3);
+      background-color: $white-light;
+    }
+
+    .selected-template {
+      line-height: 20px;
+    }
+
+    .selected-icon {
+      svg {
+        display: none;
+        top: 7px;
+        height: 20px;
+        width: 20px;
+
+        &.active {
+          display: block;
+        }
+      }
+    }
+  }
+}
+
+.gitlab-tab-content {
+  .import-project-pane {
+    padding-bottom: 6px;
+  }
+}
+
 .project-import {
   .form-group {
-    margin-bottom: 5px;
+    margin-bottom: 0;
   }
 
   .import-buttons {
@@ -567,10 +650,6 @@ a.deploy-project-label {
       margin-right: 10px;
     }
 
-    .blank-option {
-      min-width: 70px;
-    }
-
     .btn-template-icon {
       height: 24px;
       width: inherit;
@@ -592,18 +671,6 @@ a.deploy-project-label {
       }
     }
 
-    .icon-rails path {
-      fill: $rails;
-    }
-
-    .icon-node-express path {
-      fill: $node;
-    }
-
-    .icon-java-spring path {
-      fill: $java;
-    }
-
     > div {
       margin-bottom: 10px;
       padding-left: 0;
@@ -611,10 +678,6 @@ a.deploy-project-label {
   }
 }
 
-.project-templates-buttons .btn:last-child {
-  margin-right: 0;
-}
-
 .create-project-options {
   display: flex;
 
@@ -1053,6 +1116,12 @@ pre.light-well {
     min-width: 100px;
   }
 
+  &.form-group {
+    @media (min-width: $screen-sm-min) {
+      margin-bottom: 0;
+    }
+  }
+
   .select2-choice {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
diff --git a/app/views/projects/_new_project_fields.html.haml b/app/views/projects/_new_project_fields.html.haml
new file mode 100644
index 00000000000..a78a8e5d628
--- /dev/null
+++ b/app/views/projects/_new_project_fields.html.haml
@@ -0,0 +1,41 @@
+- visibility_level = params.dig(:project, :visibility_level) || default_project_visibility
+
+.row{ id: project_name_id }
+  .form-group.project-path.col-sm-6
+    = f.label :namespace_id, class: 'label-light' do
+      %span
+        Project path
+    .input-group
+      - if current_user.can_select_namespace?
+        .input-group-addon
+          = root_url
+        = f.select :namespace_id, namespaces_options(namespace_id_from(params) || :current_user, display_path: true, extra_group: namespace_id_from(params)), {}, { class: 'select2 js-select-namespace', tabindex: 1}
+
+      - else
+        .input-group-addon.static-namespace
+          #{user_url(current_user.username)}/
+        = f.hidden_field :namespace_id, value: current_user.namespace_id
+  .form-group.project-path.col-sm-6
+    = f.label :path, class: 'label-light' do
+      %span
+        Project name
+    = f.text_field :path, placeholder: "my-awesome-project", class: "form-control", tabindex: 2, autofocus: true, required: true
+- if current_user.can_create_group?
+  .help-block
+    Want to house several dependent projects under the same namespace?
+    = link_to "Create a group", new_group_path
+
+.form-group
+  = f.label :description, class: 'label-light' do
+    Project description
+    %span (optional)
+  = f.text_area :description, placeholder: 'Description format',  class: "form-control", rows: 3, maxlength: 250
+
+.form-group.visibility-level-setting
+  = f.label :visibility_level, class: 'label-light' do
+    Visibility Level
+    = link_to icon('question-circle'), help_page_path("public_access/public_access"), aria: { label: 'Documentation for Visibility Level' }
+  = render 'shared/visibility_level', f: f, visibility_level: visibility_level.to_i, can_change_visibility_level: true, form_model: @project, with_label: false
+
+= f.submit 'Create project', class: "btn btn-create project-submit", tabindex: 4
+= link_to 'Cancel', dashboard_projects_path, class: 'btn btn-cancel'
diff --git a/app/views/projects/_project_templates.html.haml b/app/views/projects/_project_templates.html.haml
index 5638b7da1b0..d50175727be 100644
--- a/app/views/projects/_project_templates.html.haml
+++ b/app/views/projects/_project_templates.html.haml
@@ -1,10 +1,24 @@
-.project-templates-buttons.import-buttons{ data: { toggle: "buttons" } }
-  .btn.blank-option.active
-    %input{ type: "radio",  autocomplete: "off", name: "project[template_name]", id: "blank", checked: "true", value: "" }
-    = icon('file-o', class: 'btn-template-icon')
-    Blank
+.project-templates-buttons.import-buttons
   - Gitlab::ProjectTemplate.all.each do |template|
-    .btn
-      %input{ type: "radio",  autocomplete: "off", name: "project[template_name]", id: template.name, value: template.name }
+    .template-option
       = custom_icon(template.logo)
-      = template.title
+      .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
+
+  .project-fields-form
+    .form-group
+      %label.label-light
+        Template
+      .input-group.template-input-group
+        .input-group-addon
+          .selected-icon
+            - Gitlab::ProjectTemplate.all.each do |template|
+              = custom_icon(template.logo)
+          .selected-template
+        %button.btn.btn-default.change-template{ type: "button" } Change template
+
+    = render 'new_project_fields', f: f, project_name_id: "template-project-name"
diff --git a/app/views/projects/new.html.haml b/app/views/projects/new.html.haml
index cc41b908946..0934c47a8e2 100644
--- a/app/views/projects/new.html.haml
+++ b/app/views/projects/new.html.haml
@@ -14,24 +14,40 @@
     .col-lg-3.profile-settings-sidebar
       %h4.prepend-top-0
         New project
-      - if import_sources_enabled?
-        %p
-          A project is where you house your files (repository), plan your work (issues), and publish your documentation (wiki), #{link_to 'among other things', help_page_path("user/project/index.md", anchor: "projects-features"), target: '_blank'}.
-        %p
-          All features are enabled when you create a project, but you can disable the ones you don’t need in the project settings.
+      %p
+        A project is where you house your files (repository), plan your work (issues), and publish your documentation (wiki), #{link_to 'among other things', help_page_path("user/project/index.md", anchor: "projects-features"), target: '_blank'}.
+      %p
+        All features are enabled when you create a project, but you can disable the ones you don’t need in the project settings.
     .col-lg-9.js-toggle-container
-      = form_for @project, html: { class: 'new_project' } do |f|
-        .create-project-options
-          .first-column
+      %ul.nav-links.gitlab-tabs{ role: 'tablist' }
+        %li.active{ role: 'presentation' }
+          %a{ href: '#blank-project-pane', id: 'blank-project-tab', data: { toggle: 'tab' }, role: 'tab' }
+            %span.hidden-xs Blank project
+            %span.visible-xs Blank
+        %li{ role: 'presentation' }
+          %a{ href: '#create-from-template-pane', id: 'create-from-template-tab', data: { toggle: 'tab' }, role: 'tab' }
+            %span.hidden-xs Create from template
+            %span.visible-xs Template
+        %li{ role: 'presentation' }
+          %a{ href: '#import-project-pane', id: 'import-project-tab', data: { toggle: 'tab' }, role: 'tab' }
+            %span.hidden-xs Import project
+            %span.visible-xs Import
+
+      .tab-content.gitlab-tab-content
+        .tab-pane.active{ id: 'blank-project-pane', role: 'tabpanel' }
+          = form_for @project, html: { class: 'new_project' } do |f|
+            = render 'new_project_fields', f: f, project_name_id: "blank-project-name"
+
+        .tab-pane.no-padding{ id: 'create-from-template-pane', role: 'tabpanel' }
+          = form_for @project, html: { class: 'new_project' } do |f|
             .project-template
               .form-group
-                = f.label :template_project, class: 'label-light' do
-                  Create from template
-                  = link_to icon('question-circle'), help_page_path("gitlab-basics/create-project"), target: '_blank', aria: { label: "What’s included in a template?" }, title: "What’s included in a template?", class: 'has-tooltip', data: { placement: 'top'}
                 %div
                   = render 'project_templates', f: f
-          - if import_sources_enabled?
-            .second-column
+
+        .tab-pane.import-project-pane{ id: 'import-project-pane', role: 'tabpanel' }
+          = form_for @project, html: { class: 'new_project' } do |f|
+            - if import_sources_enabled?
               .project-import
                 .form-group.clearfix
                   = f.label :visibility_level, class: 'label-light' do #the label here seems wrong
@@ -74,54 +90,10 @@
                       .import_gitlab_project.has-tooltip{ data: { container: 'body' } }
                         = link_to new_import_gitlab_project_path, class: 'btn btn_import_gitlab_project project-submit' do
                           = icon('gitlab', text: 'GitLab export')
-
-        .row
-          .col-lg-12
-            .js-toggle-content.hide
-              %hr
-                = render "shared/import_form", f: f
-        %hr
-
-        .row
-          .form-group.col-xs-12.col-sm-6
-            = f.label :namespace_id, class: 'label-light' do
-              %span
-                Project path
-            .form-group
-              .input-group
-                - if current_user.can_select_namespace?
-                  .input-group-addon
-                    = root_url
-                  = f.select :namespace_id, namespaces_options(namespace_id_from(params) || :current_user, display_path: true, extra_group: namespace_id_from(params)), {}, { class: 'select2 js-select-namespace', tabindex: 1}
-
-                - else
-                  .input-group-addon.static-namespace
-                    #{root_url}#{current_user.username}/
-                  = f.hidden_field :namespace_id, value: current_user.namespace_id
-          .form-group.col-xs-12.col-sm-6.project-path
-            = f.label :path, class: 'label-light' do
-              %span
-                Project name
-            = f.text_field :path, placeholder: "my-awesome-project", class: "form-control", tabindex: 2, autofocus: true, required: true
-        - if current_user.can_create_group?
-          .help-block
-            Want to house several dependent projects under the same namespace?
-            = link_to "Create a group", new_group_path
-
-        .form-group
-          = f.label :description, class: 'label-light' do
-            Project description
-            %span.light (optional)
-          = f.text_area :description, placeholder: 'Description format',  class: "form-control", rows: 3, maxlength: 250
-
-        .form-group.visibility-level-setting
-          = f.label :visibility_level, class: 'label-light' do
-            Visibility Level
-            = link_to icon('question-circle'), help_page_path("public_access/public_access"), aria: { label: 'Documentation for Visibility Level' }
-          = render 'shared/visibility_level', f: f, visibility_level: visibility_level.to_i, can_change_visibility_level: true, form_model: @project, with_label: false
-
-        = f.submit 'Create project', class: "btn btn-create project-submit", tabindex: 4
-        = link_to 'Cancel', dashboard_projects_path, class: 'btn btn-cancel'
+                  .col-lg-12
+                    .js-toggle-content.hide
+                      %hr
+                        = render "shared/import_form", f: f
 
 .save-project-loader.hide
   .center
diff --git a/app/views/projects/project_members/index.html.haml b/app/views/projects/project_members/index.html.haml
index 25153fd0b6f..fd5d3ec56da 100644
--- a/app/views/projects/project_members/index.html.haml
+++ b/app/views/projects/project_members/index.html.haml
@@ -17,14 +17,14 @@
         %i Owners
     .light
       - if can?(current_user, :admin_project_member, @project)
-        %ul.nav-links.project-member-tabs{ role: 'tablist' }
+        %ul.nav-links.gitlab-tabs{ role: 'tablist' }
           %li.active{ role: 'presentation' }
             %a{ href: '#add-member-pane', id: 'add-member-tab', data: { toggle: 'tab' }, role: 'tab' } Add member
           - if @project.allowed_to_share_with_group?
             %li{ role: 'presentation' }
               %a{ href: '#share-with-group-pane', id: 'share-with-group-tab', data: { toggle: 'tab' }, role: 'tab' } Share with group
 
-        .tab-content.project-member-tab-content
+        .tab-content.gitlab-tab-content
           .tab-pane.active{ id: 'add-member-pane', role: 'tabpanel' }
             = render 'projects/project_members/new_project_member', tab_title: 'Add member'
           .tab-pane{ id: 'share-with-group-pane', role: 'tabpanel' }
diff --git a/app/views/shared/icons/_express.svg b/app/views/shared/icons/_express.svg
index f2c94319f19..a51e81e5568 100644
--- a/app/views/shared/icons/_express.svg
+++ b/app/views/shared/icons/_express.svg
@@ -1,6 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="27" height="32" viewBox="0 0 27 32" class="btn-template-icon icon-node-express">
-  <g fill="none" fill-rule="evenodd" transform="translate(-3)">
-    <rect width="32" height="32"/>
-    <path fill="#353535" d="M4.19170065,16.2667139 C4.23142421,18.3323387 4.47969269,20.2489714 4.93651356,22.0166696 C5.39333443,23.7843677 6.09841693,25.3236323 7.05178222,26.6345096 C8.00514751,27.9453869 9.23655921,28.9781838 10.7460543,29.7329313 C12.2555493,30.4876788 14.1026668,30.8650469 16.2874623,30.8650469 C19.5050701,30.8650469 22.1764391,30.0209341 24.3016492,28.3326831 C26.4268593,26.644432 27.7476477,24.1120935 28.2640539,20.7355914 L29.4557545,20.7355914 C29.0187954,24.3107112 27.6086304,27.0813875 25.2252172,29.0477034 C22.841804,31.0140194 19.9023051,31.9971626 16.4066324,31.9971626 C14.0232191,32.0368861 11.9874175,31.659518 10.2991665,30.8650469 C8.61091547,30.0705759 7.23054269,28.9484023 6.15800673,27.4984926 C5.08547078,26.0485829 4.29101162,24.3404957 3.77460543,22.3741798 C3.25819923,20.4078639 3,18.2926164 3,16.0283738 C3,13.4860664 3.3773681,11.2218578 4.13211562,9.23568007 C4.88686314,7.24950238 5.87993709,5.57120741 7.11136726,4.20074481 C8.34279742,2.8302822 9.77282391,1.78755456 11.4014896,1.07253059 C13.0301553,0.357506621 14.6985195,0 16.4066324,0 C18.7900456,0 20.8457087,0.456814016 22.5736832,1.37045575 C24.3016578,2.28409749 25.7118228,3.4956477 26.8042206,5.00514275 C27.8966183,6.51463779 28.6910775,8.24258646 29.1876219,10.1890406 C29.6841663,12.1354947 29.8927118,14.1613656 29.8132647,16.2667139 L4.19170065,16.2667139 Z M28.6215641,15.0750133 C28.6215641,13.2080062 28.3633648,11.4304039 27.8469586,9.74215285 C27.3305524,8.05390181 26.5658855,6.57422163 25.5529349,5.30306791 C24.5399843,4.03191419 23.2787803,3.0289095 21.7692853,2.29402376 C20.2597903,1.55913801 18.5119801,1.19170065 16.5258024,1.19170065 C14.8574132,1.19170065 13.2982871,1.50948432 11.8483774,2.14506118 C10.3984676,2.78063804 9.12733299,3.70419681 8.03493526,4.9157652 C6.94253754,6.12733359 6.05870172,7.58715229 5.38340131,9.2952651 C4.70810089,11.0033779 4.31087132,12.9299414 4.19170065,15.0750133 L28.6215641,15.0750133 Z"/>
-  </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="27" height="32" viewBox="0 0 27 32" class="btn-template-icon icon-node-express"><g fill="none" fill-rule="evenodd"><path d="M-3 0h32v32H-3z"/><path fill="#353535" d="M1.192 16.267c.04 2.065.288 3.982.745 5.75.456 1.767 1.16 3.307 2.115 4.618.953 1.31 2.185 2.343 3.694 3.098 1.51.755 3.357 1.132 5.54 1.132 3.22 0 5.89-.844 8.016-2.532 2.125-1.69 3.446-4.22 3.962-7.597h1.192c-.437 3.575-1.847 6.345-4.23 8.312-2.384 1.966-5.324 2.95-8.82 2.95-2.383.04-4.42-.338-6.107-1.133-1.69-.794-3.07-1.917-4.142-3.367-1.073-1.45-1.867-3.158-2.383-5.124C.258 20.408 0 18.294 0 16.028c0-2.542.377-4.806 1.132-6.792C1.887 7.25 2.88 5.57 4.112 4.2 5.34 2.83 6.77 1.79 8.4 1.074 10.03.358 11.698 0 13.406 0c2.383 0 4.44.457 6.167 1.37 1.728.914 3.138 2.126 4.23 3.635 1.093 1.51 1.887 3.238 2.384 5.184.496 1.945.705 3.97.625 6.077H1.193zm24.43-1.192c0-1.867-.26-3.645-.775-5.333-.516-1.688-1.28-3.168-2.294-4.44-1.013-1.27-2.274-2.273-3.784-3.008-1.51-.735-3.258-1.102-5.244-1.102-1.67 0-3.228.317-4.678.953-1.45.636-2.72 1.56-3.813 2.77-1.092 1.212-1.976 2.672-2.652 4.38-.675 1.708-1.072 3.635-1.19 5.78h24.43z"/></g></svg>
diff --git a/app/views/shared/icons/_rails.svg b/app/views/shared/icons/_rails.svg
index 0bb09a705df..852bd183cc7 100644
--- a/app/views/shared/icons/_rails.svg
+++ b/app/views/shared/icons/_rails.svg
@@ -1,6 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="20" viewBox="0 0 32 20" class="btn-template-icon icon-rails">
-  <g fill="none" fill-rule="evenodd" transform="translate(0 -6)">
-    <rect width="32" height="32"/>
-    <path fill="#C00" fill-rule="nonzero" d="M0.984615385,25.636044 C0.984615385,25.636044 1.40659341,21.4725275 4.36043956,16.5494505 C7.31428571,11.6263736 12.3498901,7.8989011 16.4430769,7.53318681 C24.5872527,6.71736264 31.9015385,14.0175824 31.9015385,14.0175824 C31.9015385,14.0175824 31.6624176,14.1863736 31.4092308,14.3973626 C23.4197802,8.48967033 18.5389011,11.2747253 17.0057143,12.0202198 C9.97274725,15.9446154 12.0967033,25.636044 12.0967033,25.636044 L0.984615385,25.636044 Z M24.1371429,8.32087912 C23.687033,8.13802198 23.2369231,7.96923077 22.7727473,7.81450549 L22.829011,6.88615385 C23.7151648,7.13934066 24.0668132,7.30813187 24.1934066,7.37846154 L24.1371429,8.32087912 Z M22.8008791,11.3028571 C23.250989,11.330989 23.7151648,11.3872527 24.1934066,11.4857143 L24.1371429,12.3578022 C23.672967,12.2593407 23.2087912,12.2030769 22.7446154,12.189011 L22.8008791,11.3028571 Z M17.5964835,6.91428571 C17.1885714,6.91428571 16.7806593,6.92835165 16.3727473,6.97054945 L16.1054945,6.14065934 C16.5696703,6.0843956 17.0197802,6.05626374 17.4558242,6.05626374 L17.7371429,6.91428571 C17.6949451,6.91428571 17.6386813,6.91428571 17.5964835,6.91428571 Z M18.2716484,12.0905495 C18.6232967,11.9358242 19.0312088,11.7810989 19.5094505,11.6404396 L19.8189011,12.5687912 C19.410989,12.6953846 19.0030769,12.8641758 18.5951648,13.0610989 L18.2716484,12.0905495 Z M11.8857143,8.39120879 C11.52,8.57406593 11.1683516,8.78505495 10.8026374,9.01010989 L10.1556044,8.02549451 C10.5353846,7.80043956 10.9010989,7.60351648 11.2527473,7.42065934 L11.8857143,8.39120879 Z M14.7692308,14.7208791 C15.0224176,14.3973626 15.3178022,14.0738462 15.6413187,13.7784615 L16.2742857,14.7349451 C15.9648352,15.0584615 15.6835165,15.381978 15.4443956,15.7336264 L14.7692308,14.7208791 Z M12.7296703,19.2501099 C12.8421978,18.7437363 12.9687912,18.2232967 13.1516484,17.7028571 L14.1643956,18.5046154 C14.0237363,19.0531868 13.9252747,19.6017582 13.869011,20.1503297 L12.7296703,19.2501099 Z M6.56879121,12.5687912 C6.23120879,12.9204396 5.90769231,13.3002198 5.61230769,13.68 L4.52923077,12.7516484 C4.85274725,12.4 5.2043956,12.0483516 5.57010989,11.6967033 L6.56879121,12.5687912 Z M2.32087912,18.8562637 C2.09582418,19.3767033 1.80043956,20.0659341 1.61758242,20.5441758 L0,19.9534066 C0.140659341,19.5736264 0.436043956,18.8703297 0.703296703,18.2654945 L2.32087912,18.8562637 Z M12.5186813,22.8228571 L14.0378022,23.3714286 C14.1221978,24.0325275 14.2487912,24.6514286 14.3753846,25.2 L12.6874725,24.5951648 C12.6171429,24.1731868 12.5468132,23.5683516 12.5186813,22.8228571 Z"/>
-  </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="20" viewBox="0 0 32 20" class="btn-template-icon icon-rails"><g fill="none" fill-rule="evenodd"><path d="M0-6h32v32H0z"/><path fill="#c00" fill-rule="nonzero" d="M.985 19.636s.422-4.163 3.375-9.087c2.954-4.924 7.99-8.65 12.083-9.017 8.144-.816 15.46 6.485 15.46 6.485s-.24.168-.494.38C23.42 2.49 18.54 5.274 17.005 6.02c-7.033 3.925-4.91 13.616-4.91 13.616H.987zM24.137 2.32c-.45-.182-.9-.35-1.364-.505l.056-.93c.885.254 1.237.423 1.363.493l-.056.943zM22.8 5.304c.45.028.915.084 1.393.183l-.056.872c-.464-.1-.928-.155-1.392-.17l.056-.885zM17.597.913c-.407 0-.815.015-1.223.058l-.268-.83c.465-.056.915-.084 1.35-.084l.282.858h-.14zm.676 5.178c.35-.154.76-.31 1.237-.45l.31.93c-.41.125-.817.294-1.225.49l-.323-.97zm-6.386-3.7c-.366.184-.718.395-1.083.62l-.647-.985c.38-.225.745-.42 1.097-.604l.633.97zm2.883 6.33c.252-.323.548-.646.87-.942l.634.957c-.31.323-.59.647-.83 1L14.77 8.72zm-2.04 4.53c.112-.506.24-1.027.422-1.547l1.012.802c-.14.548-.24 1.097-.295 1.645l-1.14-.9zM6.57 6.57c-.34.35-.662.73-.958 1.11L4.53 6.752c.323-.352.674-.704 1.04-1.055l1 .872zm-4.25 6.286c-.224.52-.52 1.21-.702 1.688L0 13.954c.14-.38.436-1.084.703-1.69l1.618.592zm10.2 3.967l1.518.548c.084.663.21 1.28.337 1.83l-1.688-.605c-.07-.422-.14-1.027-.168-1.772z"/></g></svg>
diff --git a/app/views/shared/icons/_spring.svg b/app/views/shared/icons/_spring.svg
index 508349aa456..ccf18749029 100644
--- a/app/views/shared/icons/_spring.svg
+++ b/app/views/shared/icons/_spring.svg
@@ -1,6 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" class="btn-template-icon icon-java-spring">
-  <g fill="none" fill-rule="evenodd">
-    <rect width="32" height="32"/>
-    <path fill="#70AD51" d="M5.46647617,27.9932117 C6.0517027,28.4658996 6.91159892,28.3777063 7.38425926,27.7914452 C7.85922261,27.2048452 7.76991326,26.3449044 7.18398981,25.8699411 C6.59874295,25.3956543 5.74015536,25.4869934 5.26383884,26.0722403 C4.81393367,26.6267596 4.87238621,27.4284565 5.37913494,27.9159868 L5.11431334,27.6818383 C1.97157151,24.7616933 0,20.5966301 0,15.9782542 C0,7.16842834 7.16775175,0 15.9796074,0 C20.4586065,0 24.5113565,1.8565519 27.4145869,4.8362365 C28.0749348,3.93840692 28.6466499,2.93435335 29.115524,1.82069284 C31.1513712,7.93770658 32.3482517,13.0811131 31.909824,17.1311567 C31.3178113,25.4044499 24.4017495,31.9585382 15.9796074,31.9585382 C12.0682639,31.9585382 8.48438805,30.5444735 5.7042963,28.2034861 L5.46647617,27.9932117 Z M29.0471888,23.0106888 C33.0546075,17.6737787 30.8211972,9.04527781 28.9612624,3.529749 C27.3029502,6.98304378 23.2217836,9.62375882 19.6981239,10.4613722 C16.3950312,11.2482417 13.4715032,10.6021021 10.4153644,11.7780085 C3.44517575,14.457289 3.55613585,22.7698242 7.39373146,24.6365249 C7.39711439,24.6392312 7.62444728,24.7616933 7.62174094,24.7576338 C7.62309411,24.7562806 13.2658211,23.6358542 16.3862356,22.4843049 C20.9450718,20.7996058 25.9524846,16.6494275 27.5986182,11.8273993 C26.723116,16.8415779 22.4179995,21.6669891 18.093262,23.8828081 C15.7908399,25.0648038 14.0005934,25.3279957 10.2123886,26.6385428 C9.74892722,26.798217 9.38492397,26.9538318 9.38492397,26.9538318 C10.3463526,26.7948341 11.301692,26.7420604 11.301692,26.7420604 C16.6954354,26.4869875 25.1087819,28.2582896 29.0471888,23.0106888 Z"/>
-  </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" class="btn-template-icon icon-java-spring"><g fill="none" fill-rule="evenodd"><path d="M0 0h32v32H0z"/><path fill="#70AD51" d="M5.466 27.993c.586.473 1.446.385 1.918-.202.475-.585.386-1.445-.2-1.92-.585-.474-1.444-.383-1.92.202-.45.555-.392 1.356.115 1.844l-.266-.234C1.972 24.762 0 20.597 0 15.978 0 7.168 7.168 0 15.98 0c4.48 0 8.53 1.857 11.435 4.836.66-.898 1.232-1.902 1.7-3.015 2.036 6.118 3.233 11.26 2.795 15.31-.592 8.274-7.508 14.83-15.93 14.83-3.912 0-7.496-1.416-10.276-3.757l-.238-.21zm23.58-4.982c4.01-5.336 1.775-13.965-.085-19.48-1.657 3.453-5.738 6.094-9.262 6.93-3.303.788-6.226.142-9.283 1.318-6.97 2.68-6.86 10.992-3.02 12.86.002 0 .23.124.227.12 0-.002 5.644-1.122 8.764-2.274 4.56-1.684 9.566-5.835 11.213-10.657-.877 5.015-5.182 9.84-9.507 12.056-2.302 1.182-4.092 1.445-7.88 2.756-.464.158-.828.314-.828.314.96-.16 1.917-.212 1.917-.212 5.393-.255 13.807 1.516 17.745-3.73z"/></g></svg>
diff --git a/lib/gitlab/project_template.rb b/lib/gitlab/project_template.rb
index 732fbf68dad..0b43377a579 100644
--- a/lib/gitlab/project_template.rb
+++ b/lib/gitlab/project_template.rb
@@ -1,9 +1,9 @@
 module Gitlab
   class ProjectTemplate
-    attr_reader :title, :name
+    attr_reader :title, :name, :description, :preview
 
-    def initialize(name, title)
-      @name, @title = name, title
+    def initialize(name, title, description, preview)
+      @name, @title, @description, @preview = name, title, description, preview
     end
 
     alias_method :logo, :name
@@ -25,9 +25,9 @@ module Gitlab
     end
 
     TEMPLATES_TABLE = [
-      ProjectTemplate.new('rails', 'Ruby on Rails'),
-      ProjectTemplate.new('spring', 'Spring'),
-      ProjectTemplate.new('express', 'NodeJS Express')
+      ProjectTemplate.new('rails', 'Ruby on Rails', 'Includes a MVC structure, gemfile, rakefile, and .gitlab-ci.yml file, along with many others, to help you get started.', 'https://gitlab.com/gitlab-org/project-templates/rails'),
+      ProjectTemplate.new('spring', 'Spring', 'Includes a MVC structure, mvnw, pom.xml, and .gitlab-ci.yml file to help you get started.', 'https://gitlab.com/gitlab-org/project-templates/spring'),
+      ProjectTemplate.new('express', 'NodeJS Express', 'Includes a MVC structure, and .gitlab-ci.yml file to help you get started.', 'https://gitlab.com/gitlab-org/project-templates/express')
     ].freeze
 
     class << self
diff --git a/spec/features/projects/import_export/import_file_spec.rb b/spec/features/projects/import_export/import_file_spec.rb
index c928459f911..026aa03f7cf 100644
--- a/spec/features/projects/import_export/import_file_spec.rb
+++ b/spec/features/projects/import_export/import_file_spec.rb
@@ -27,6 +27,7 @@ feature 'Import/Export - project import integration test', :js do
 
         select2(namespace.id, from: '#project_namespace_id')
         fill_in :project_path, with: project_path, visible: true
+        click_import_project_tab
         click_link 'GitLab export'
 
         expect(page).to have_content('Import an exported GitLab project')
@@ -51,6 +52,7 @@ feature 'Import/Export - project import integration test', :js do
     context 'path is not prefilled' do
       scenario 'user imports an exported project successfully' do
         visit new_project_path
+        click_import_project_tab
         click_link 'GitLab export'
 
         fill_in :path, with: 'test-project-path', visible: true
@@ -72,6 +74,7 @@ feature 'Import/Export - project import integration test', :js do
 
     select2(user.namespace.id, from: '#project_namespace_id')
     fill_in :project_path, with: project.name, visible: true
+    click_import_project_tab
     click_link 'GitLab export'
     attach_file('file', file)
     click_on 'Import project'
@@ -81,19 +84,6 @@ feature 'Import/Export - project import integration test', :js do
     end
   end
 
-  context 'when limited to the default user namespace' do
-    scenario 'passes correct namespace ID in the URL' do
-      visit new_project_path
-
-      fill_in :project_path, with: 'test-project-path', visible: true
-
-      click_link 'GitLab export'
-
-      expect(page).to have_content('GitLab project export')
-      expect(URI.parse(current_url).query).to eq("namespace_id=#{user.namespace.id}&path=test-project-path")
-    end
-  end
-
   def wiki_exists?(project)
     wiki = ProjectWiki.new(project)
     File.exist?(wiki.repository.path_to_repo) && !wiki.repository.empty?
@@ -102,4 +92,8 @@ feature 'Import/Export - project import integration test', :js do
   def project_hook_exists?(project)
     Gitlab::Git::Hook.new('post-receive', project.repository.raw_repository).exists?
   end
+
+  def click_import_project_tab
+    find('#import-project-tab').trigger('click')
+  end
 end
diff --git a/spec/features/projects/new_project_spec.rb b/spec/features/projects/new_project_spec.rb
index cd3dc72d3c6..8e11cb94350 100644
--- a/spec/features/projects/new_project_spec.rb
+++ b/spec/features/projects/new_project_spec.rb
@@ -9,12 +9,14 @@ feature 'New project' do
     sign_in(user)
   end
 
-  it 'shows "New project" page' do
+  it 'shows "New project" page', :js do
     visit new_project_path
 
     expect(page).to have_content('Project path')
     expect(page).to have_content('Project name')
 
+    find('#import-project-tab').trigger('click')
+
     expect(page).to have_link('GitHub')
     expect(page).to have_link('Bitbucket')
     expect(page).to have_link('GitLab.com')
@@ -23,14 +25,15 @@ feature 'New project' do
     expect(page).to have_link('GitLab export')
   end
 
-  context 'Visibility level selector' do
+  context 'Visibility level selector', :js do
     Gitlab::VisibilityLevel.options.each do |key, level|
       it "sets selector to #{key}" do
         stub_application_setting(default_project_visibility: level)
 
         visit new_project_path
-
-        expect(find_field("project_visibility_level_#{level}")).to be_checked
+        page.within('#blank-project-pane') do
+          expect(find_field("project_visibility_level_#{level}")).to be_checked
+        end
       end
 
       it "saves visibility level #{level} on validation error" do
@@ -38,8 +41,9 @@ feature 'New project' do
 
         choose(s_(key))
         click_button('Create project')
-
-        expect(find_field("project_visibility_level_#{level}")).to be_checked
+        page.within('#blank-project-pane') do
+          expect(find_field("project_visibility_level_#{level}")).to be_checked
+        end
       end
     end
   end
@@ -51,9 +55,11 @@ feature 'New project' do
       end
 
       it 'selects the user namespace' do
-        namespace = find('#project_namespace_id')
+        page.within('#blank-project-pane') do
+          namespace = find('#project_namespace_id')
 
-        expect(namespace.text).to eq user.username
+          expect(namespace.text).to eq user.username
+        end
       end
     end
 
@@ -66,9 +72,11 @@ feature 'New project' do
       end
 
       it 'selects the group namespace' do
-        namespace = find('#project_namespace_id option[selected]')
+        page.within('#blank-project-pane') do
+          namespace = find('#project_namespace_id option[selected]')
 
-        expect(namespace.text).to eq group.name
+          expect(namespace.text).to eq group.name
+        end
       end
     end
 
@@ -82,9 +90,11 @@ feature 'New project' do
       end
 
       it 'selects the group namespace' do
-        namespace = find('#project_namespace_id option[selected]')
+        page.within('#blank-project-pane') do
+          namespace = find('#project_namespace_id option[selected]')
 
-        expect(namespace.text).to eq subgroup.full_path
+          expect(namespace.text).to eq subgroup.full_path
+        end
       end
     end
 
@@ -124,9 +134,10 @@ feature 'New project' do
     end
   end
 
-  context 'Import project options' do
+  context 'Import project options', :js do
     before do
       visit new_project_path
+      find('#import-project-tab').trigger('click')
     end
 
     context 'from git repository url' do
diff --git a/spec/features/projects_spec.rb b/spec/features/projects_spec.rb
index ac62280e4ca..3bc7ec3123f 100644
--- a/spec/features/projects_spec.rb
+++ b/spec/features/projects_spec.rb
@@ -12,8 +12,9 @@ feature 'Project' do
       visit new_project_path
     end
 
-    it "allows creation from templates" do
-      page.choose(template.name)
+    it "allows creation from templates", :js do
+      find('#create-from-template-tab').trigger('click')
+      find("##{template.name}").trigger('click')
       fill_in("project_path", with: template.name)
 
       page.within '#content-body' do
diff --git a/spec/lib/gitlab/project_template_spec.rb b/spec/lib/gitlab/project_template_spec.rb
index d19bd611919..57b0ef8d1ad 100644
--- a/spec/lib/gitlab/project_template_spec.rb
+++ b/spec/lib/gitlab/project_template_spec.rb
@@ -4,9 +4,9 @@ describe Gitlab::ProjectTemplate do
   describe '.all' do
     it 'returns a all templates' do
       expected = [
-        described_class.new('rails', 'Ruby on Rails'),
-        described_class.new('spring', 'Spring'),
-        described_class.new('express', 'NodeJS Express')
+        described_class.new('rails', 'Ruby on Rails', 'Includes an MVC structure, .gitignore, Gemfile, and more great stuff', 'https://gitlab.com/gitlab-org/project-templates/rails'),
+        described_class.new('spring', 'Spring', 'Includes an MVC structure, .gitignore, Gemfile, and more great stuff', 'https://gitlab.com/gitlab-org/project-templates/spring'),
+        described_class.new('express', 'NodeJS Express', 'Includes an MVC structure, .gitignore, Gemfile, and more great stuff', 'https://gitlab.com/gitlab-org/project-templates/express')
       ]
 
       expect(described_class.all).to be_an(Array)
@@ -31,7 +31,7 @@ describe Gitlab::ProjectTemplate do
   end
 
   describe 'instance methods' do
-    subject { described_class.new('phoenix', 'Phoenix Framework') }
+    subject { described_class.new('phoenix', 'Phoenix Framework', 'Phoenix description', 'link-to-template') }
 
     it { is_expected.to respond_to(:logo, :file, :archive_path) }
   end