Make file templates easy to use and discover

4 files changed, 33 insertions, 19 deletions

diff --git a/app/views/projects/blob/_editor.html.haml b/app/views/projects/blob/_editor.html.haml
index e7adef5558a..4b344b2edb9 100644
--- a/app/views/projects/blob/_editor.html.haml
+++ b/app/views/projects/blob/_editor.html.haml
@@ -1,29 +1,23 @@
+- action = current_action?(:edit) || current_action?(:update) ? 'edit' : 'create'
+
 .file-holder.file.append-bottom-default
-  .js-file-title.file-title.clearfix
+  .js-file-title.file-title.clearfix{ data: { current_action: action } }
     .editor-ref
       = icon('code-fork')
       = ref
     %span.editor-file-name
       - if current_action?(:edit) || current_action?(:update)
         = text_field_tag 'file_path', (params[:file_path] || @path),
-                                      class: 'form-control new-file-path'
+                                      class: 'form-control new-file-path js-file-path-name-input'
 
     - if current_action?(:new) || current_action?(:create)
       %span.editor-file-name
         \/
       = text_field_tag 'file_name', params[:file_name], placeholder: "File name",
-        required: true, class: 'form-control new-file-name'
+        required: true, class: 'form-control new-file-name js-file-path-name-input'
 
     .pull-right.file-buttons
-      .license-selector.js-license-selector-wrap.hidden
-        = dropdown_tag("Choose a License template", options: { toggle_class: 'btn js-license-selector', title: "Choose a license", filter: true, placeholder: "Filter", data: { data: licenses_for_select, project: @project.name, fullname: @project.namespace.human_name } } )
-      .gitignore-selector.js-gitignore-selector-wrap.hidden
-        = dropdown_tag("Choose a .gitignore template", options: { toggle_class: 'btn js-gitignore-selector', title: "Choose a template", filter: true, placeholder: "Filter", data: { data: gitignore_names } } )
-      .gitlab-ci-yml-selector.js-gitlab-ci-yml-selector-wrap.hidden
-        = dropdown_tag("Choose a GitLab CI Yaml template", options: { toggle_class: 'btn js-gitlab-ci-yml-selector', title: "Choose a template", filter: true, placeholder: "Filter", data: { data: gitlab_ci_ymls } } )
-      .dockerfile-selector.js-dockerfile-selector-wrap.hidden
-        = dropdown_tag("Choose a Dockerfile template", options: { toggle_class: 'btn js-dockerfile-selector', title: "Choose a template", filter: true, placeholder: "Filter", data: { data: dockerfile_names } } )
-      = button_tag class: 'soft-wrap-toggle btn', type: 'button' do
+      = button_tag class: 'soft-wrap-toggle btn', type: 'button', tabindex: '-1' do
         %span.no-wrap
           = custom_icon('icon_no_wrap')
           No wrap
@@ -31,7 +25,7 @@
           = custom_icon('icon_soft_wrap')
           Soft wrap
       .encoding-selector
-        = select_tag :encoding, options_for_select([ "base64", "text" ], "text"), class: 'select2'
+        = select_tag :encoding, options_for_select([ "base64", "text" ], "text"), class: 'select2', tabindex: '-1'
 
   .file-editor.code
     %pre.js-edit-mode-pane#editor= params[:content] || local_assigns[:blob_data]
diff --git a/app/views/projects/blob/_template_selectors.html.haml b/app/views/projects/blob/_template_selectors.html.haml
new file mode 100644
index 00000000000..d52733d2bd6
--- /dev/null
+++ b/app/views/projects/blob/_template_selectors.html.haml
@@ -0,0 +1,17 @@
+.template-selectors-menu
+  .templates-selectors-label
+    Template
+  .template-selector-dropdowns-wrap
+    .template-type-selector.js-template-type-selector-wrap.hidden
+      = dropdown_tag("Choose type", options: { toggle_class: 'btn js-template-type-selector', title: "Choose a template type" } )
+    .license-selector.js-license-selector-wrap.js-template-selector-wrap.hidden
+      = dropdown_tag("Apply a License template", options: { toggle_class: 'btn js-license-selector', title: "Apply a license", filter: true, placeholder: "Filter", data: { data: licenses_for_select, project: @project.name, fullname: @project.namespace.human_name } } )
+    .gitignore-selector.js-gitignore-selector-wrap.js-template-selector-wrap.hidden
+      = dropdown_tag("Apply a .gitignore template", options: { toggle_class: 'btn js-gitignore-selector', title: "Apply a template", filter: true, placeholder: "Filter", data: { data: gitignore_names } } )
+    .gitlab-ci-yml-selector.js-gitlab-ci-yml-selector-wrap.js-template-selector-wrap.hidden
+      = dropdown_tag("Apply a GitLab CI Yaml template", options: { toggle_class: 'btn js-gitlab-ci-yml-selector', title: "Apply a template", filter: true, placeholder: "Filter", data: { data: gitlab_ci_ymls } } )
+    .dockerfile-selector.js-dockerfile-selector-wrap.js-template-selector-wrap.hidden
+      = dropdown_tag("Apply a Dockerfile template", options: { toggle_class: 'btn js-dockerfile-selector', title: "Apply a template", filter: true, placeholder: "Filter", data: { data: dockerfile_names } } )
+  .template-selectors-undo-menu.hidden
+    %span.text-info Template applied
+    %button.btn.btn-sm.btn-info Undo
diff --git a/app/views/projects/blob/edit.html.haml b/app/views/projects/blob/edit.html.haml
index afe0b5dba45..4b26f944733 100644
--- a/app/views/projects/blob/edit.html.haml
+++ b/app/views/projects/blob/edit.html.haml
@@ -11,12 +11,15 @@
       Someone edited the file the same time you did. Please check out
       = link_to "the file", namespace_project_blob_path(@project.namespace, @project, tree_join(@target_branch, @file_path)), target: "_blank", rel: 'noopener noreferrer'
       and make sure your changes will not unintentionally remove theirs.
-
+  .editor-title-row
+    %h3.page-title.blob-edit-page-title
+      Edit file
+    = render 'template_selectors'
   .file-editor
     %ul.nav-links.no-bottom.js-edit-mode
       %li.active
         = link_to '#editor' do
-          Edit File
+          Write
 
       %li
         = link_to '#preview', 'data-preview-url' => namespace_project_preview_blob_path(@project.namespace, @project, @id) do
diff --git a/app/views/projects/blob/new.html.haml b/app/views/projects/blob/new.html.haml
index 4c449e040ee..2afb909572a 100644
--- a/app/views/projects/blob/new.html.haml
+++ b/app/views/projects/blob/new.html.haml
@@ -2,10 +2,10 @@
 - content_for :page_specific_javascripts do
   = page_specific_javascript_tag('lib/ace.js')
   = page_specific_javascript_bundle_tag('blob')
-
-%h3.page-title
-  New File
-
+.editor-title-row
+  %h3.page-title.blob-new-page-title
+    New file
+  = render 'template_selectors'
 .file-editor
   = form_tag(namespace_project_create_blob_path(@project.namespace, @project, @id), method: :post, class: 'form-horizontal js-edit-blob-form js-new-blob-form js-quick-submit js-requires-input', data: blob_editor_paths) do
     = render 'projects/blob/editor', ref: @ref