Merge branch 'template_dropdown' into 'master'

Implements TemplateDropdown class to create custom template dropdowns

## What does this MR do?
Refactorize template dropdowns. This MR creates a base TemplateSelector class so it can be reused for multiple types of templates.

## Does this MR meet the acceptance criteria?

- [ ] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [ ] API support added
- [ ] Tests
  - [ ] Added for this feature/bug
  - [x] All builds are passing
- [ ] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if you do - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

See merge request !4697

6 files changed, 104 insertions, 87 deletions

diff --git a/app/assets/javascripts/blob/blob_gitignore_selector.js.coffee b/app/assets/javascripts/blob/blob_gitignore_selector.js.coffee
index cc8a497d081..8d0e3f363d1 100644
--- a/app/assets/javascripts/blob/blob_gitignore_selector.js.coffee
+++ b/app/assets/javascripts/blob/blob_gitignore_selector.js.coffee
@@ -1,58 +1,5 @@
-class @BlobGitignoreSelector
-  constructor: (opts) ->
-    {
-      @dropdown
-      @editor
-      @$wrapper        = @dropdown.closest('.gitignore-selector')
-      @$filenameInput  = $('#file_name')
-      @data           = @dropdown.data('filenames')
-    } = opts
+#= require blob/template_selector
 
-    @dropdown.glDropdown(
-      data: @data,
-      filterable: true,
-      selectable: true,
-      search:
-        fields: ['name']
-      clicked: @onClick
-      text: (gitignore) ->
-        gitignore.name
-    )
-
-    @toggleGitignoreSelector()
-    @bindEvents()
-
-  bindEvents: ->
-    @$filenameInput
-      .on 'keyup blur', (e) =>
-        @toggleGitignoreSelector()
-
-  toggleGitignoreSelector: ->
-    filename = @$filenameInput.val() or $('.editor-file-name').text().trim()
-    @$wrapper.toggleClass 'hidden', filename isnt '.gitignore'
-
-  onClick: (item, el, e) =>
-    e.preventDefault()
-    @requestIgnoreFile(item.name)
-
-  requestIgnoreFile: (name) ->
-    Api.gitignoreText name, @requestIgnoreFileSuccess.bind(@)
-
-  requestIgnoreFileSuccess: (gitignore) ->
-    @editor.setValue(gitignore.content, 1)
-    @editor.focus()
-
-class @BlobGitignoreSelectors
-  constructor: (opts) ->
-    {
-      @$dropdowns = $('.js-gitignore-selector')
-      @editor
-    } = opts
-
-    @$dropdowns.each (i, dropdown) =>
-      $dropdown = $(dropdown)
-
-      new BlobGitignoreSelector(
-        dropdown: $dropdown,
-        editor: @editor
-      )
+class @BlobGitignoreSelector extends TemplateSelector
+  requestFile: (query) ->
+    Api.gitignoreText query.name, @requestFileSuccess.bind(@)
diff --git a/app/assets/javascripts/blob/blob_gitignore_selectors.js.coffee b/app/assets/javascripts/blob/blob_gitignore_selectors.js.coffee
new file mode 100644
index 00000000000..a719ba25122
--- /dev/null
+++ b/app/assets/javascripts/blob/blob_gitignore_selectors.js.coffee
@@ -0,0 +1,17 @@
+class @BlobGitignoreSelectors
+  constructor: (opts) ->
+    {
+      @$dropdowns = $('.js-gitignore-selector')
+      @editor
+    } = opts
+
+    @$dropdowns.each (i, dropdown) =>
+      $dropdown = $(dropdown)
+
+      new BlobGitignoreSelector(
+        pattern: /(.gitignore)/,
+        data: $dropdown.data('data'),
+        wrapper: $dropdown.closest('.js-gitignore-selector-wrap'),
+        dropdown: $dropdown,
+        editor: @editor
+      )
diff --git a/app/assets/javascripts/blob/blob_license_selector.js.coffee b/app/assets/javascripts/blob/blob_license_selector.js.coffee
index e17eaa75dc1..a3cc8dd844c 100644
--- a/app/assets/javascripts/blob/blob_license_selector.js.coffee
+++ b/app/assets/javascripts/blob/blob_license_selector.js.coffee
@@ -1,30 +1,9 @@
-class @BlobLicenseSelector
-  licenseRegex: /^(.+\/)?(licen[sc]e|copying)($|\.)/i
+#= require blob/template_selector
 
-  constructor: (editor) ->
-    @$licenseSelector = $('.js-license-selector')
-    $fileNameInput = $('#file_name')
+class @BlobLicenseSelector extends TemplateSelector
+  requestFile: (query) ->
+    data =
+      project: @dropdown.data('project')
+      fullname: @dropdown.data('fullname')
 
-    initialFileNameValue = if $fileNameInput.length
-      $fileNameInput.val()
-    else if $('.editor-file-name').length
-      $('.editor-file-name').text().trim()
-
-    @toggleLicenseSelector(initialFileNameValue)
-
-    if $fileNameInput
-      $fileNameInput.on 'keyup blur', (e) =>
-        @toggleLicenseSelector($(e.target).val())
-
-    $('select.license-select').on 'change', (e) ->
-      data =
-        project: $(this).data('project')
-        fullname: $(this).data('fullname')
-      Api.licenseText $(this).val(), data, (license) ->
-        editor.setValue(license.content, -1)
-
-  toggleLicenseSelector: (fileName) =>
-    if @licenseRegex.test(fileName)
-      @$licenseSelector.show()
-    else
-      @$licenseSelector.hide()
+    Api.licenseText query.id, data, @requestFileSuccess.bind(@)
diff --git a/app/assets/javascripts/blob/blob_license_selectors.js.coffee b/app/assets/javascripts/blob/blob_license_selectors.js.coffee
new file mode 100644
index 00000000000..68438733108
--- /dev/null
+++ b/app/assets/javascripts/blob/blob_license_selectors.js.coffee
@@ -0,0 +1,17 @@
+class @BlobLicenseSelectors
+  constructor: (opts) ->
+    {
+      @$dropdowns = $('.js-license-selector')
+      @editor
+    } = opts
+
+    @$dropdowns.each (i, dropdown) =>
+      $dropdown = $(dropdown)
+
+      new BlobLicenseSelector(
+        pattern: /^(.+\/)?(licen[sc]e|copying)($|\.)/i,
+        data: $dropdown.data('data'),
+        wrapper: $dropdown.closest('.js-license-selector-wrap'),
+        dropdown: $dropdown,
+        editor: @editor
+      )
diff --git a/app/assets/javascripts/blob/edit_blob.js.coffee b/app/assets/javascripts/blob/edit_blob.js.coffee
index 79141e768b8..636f909dbd0 100644
--- a/app/assets/javascripts/blob/edit_blob.js.coffee
+++ b/app/assets/javascripts/blob/edit_blob.js.coffee
@@ -12,8 +12,9 @@ class @EditBlob
       $("#file-content").val(@editor.getValue())
 
     @initModePanesAndLinks()
-    new BlobLicenseSelector(@editor)
-    new BlobGitignoreSelectors(editor: @editor)
+
+    new BlobLicenseSelectors { @editor }
+    new BlobGitignoreSelectors { @editor }
 
   initModePanesAndLinks: ->
     @$editModePanes = $(".js-edit-mode-pane")
diff --git a/app/assets/javascripts/blob/template_selector.js.coffee b/app/assets/javascripts/blob/template_selector.js.coffee
new file mode 100644
index 00000000000..e76e303189d
--- /dev/null
+++ b/app/assets/javascripts/blob/template_selector.js.coffee
@@ -0,0 +1,56 @@
+class @TemplateSelector
+  constructor: (opts = {}) ->
+    {
+      @dropdown,
+      @data,
+      @pattern,
+      @wrapper,
+      @editor,
+      @fileEndpoint,
+      @$input = $('#file_name')
+    } = opts
+
+    @buildDropdown()
+    @bindEvents()
+    @onFilenameUpdate()
+
+  buildDropdown: ->
+    @dropdown.glDropdown(
+      data: @data,
+      filterable: true,
+      selectable: true,
+      search:
+        fields: ['name']
+      clicked: @onClick
+      text: (item) ->
+        item.name
+    )
+
+  bindEvents: ->
+    @$input.on('keyup blur', (e) =>
+      @onFilenameUpdate()
+    )
+
+  onFilenameUpdate: ->
+    return unless @$input.length
+
+    filenameMatches = @pattern.test(@$input.val().trim())
+
+    if not filenameMatches
+      @wrapper.addClass('hidden')
+      return
+
+    @wrapper.removeClass('hidden')
+
+  onClick: (item, el, e) =>
+    e.preventDefault()
+    @requestFile(item)
+
+  requestFile: (item) ->
+    # To be implemented on the extending class
+    # e.g.
+    # Api.gitignoreText item.name, @requestFileSuccess.bind(@)
+
+  requestFileSuccess: (file) ->
+    @editor.setValue(file.content, 1)
+    @editor.focus()