Refactored JS

Added spec

app/assets/javascripts/blob/blob_ci_yaml.js.es6

@@ -38,40 +38,4 @@
 
   global.BlobCiYamlSelectors = BlobCiYamlSelectors;
 
-    class BlobDockerfileSelector extends gl.TemplateSelector {
-        requestFile(query) {
-            return Api.dockerfileYml(query.name, this.requestFileSuccess.bind(this));
-        }
-
-        requestFileSuccess(file) {
-            return super.requestFileSuccess(file);
-        }
-    }
-
-    global.BlobDockerfileSelector = BlobDockerfileSelector;
-
-    class BlobDockerfileSelectors {
-        constructor({ editor, $dropdowns } = {}) {
-            this.editor = editor;
-            this.$dropdowns = $dropdowns || $('.js-dockerfile-selector');
-            this.initSelectors();
-        }
-
-        initSelectors() {
-            const editor = this.editor;
-            this.$dropdowns.each((i, dropdown) => {
-                const $dropdown = $(dropdown);
-                return new BlobDockerfileSelector({
-                    editor,
-                    pattern: /(Dockerfile)/,
-                    data: $dropdown.data('data'),
-                    wrapper: $dropdown.closest('.js-dockerfile-selector-wrap'),
-                    dropdown: $dropdown
-                });
-            });
-        }
-    }
-
-    global.BlobDockerfileSelectors = BlobDockerfileSelectors;
-
 })(window.gl || (window.gl = {}));

app/assets/javascripts/blob/blob_dockerfile_selector.js.es6

@@ -0,0 +1,18 @@
+/* global Api */
+/*= require blob/template_selector */
+
+(() => {
+  const global = window.gl || (window.gl = {});
+
+  class BlobDockerfileSelector extends gl.TemplateSelector {
+    requestFile(query) {
+      return Api.dockerfileYml(query.name, this.requestFileSuccess.bind(this));
+    }
+
+    requestFileSuccess(file) {
+      return super.requestFileSuccess(file);
+    }
+  }
+
+  global.BlobDockerfileSelector = BlobDockerfileSelector;
+})();

app/assets/javascripts/blob/blob_dockerfile_selectors.js.es6

@@ -0,0 +1,27 @@
+(() => {
+  const global = window.gl || (window.gl = {});
+
+  class BlobDockerfileSelectors {
+    constructor({ editor, $dropdowns } = {}) {
+      this.editor = editor;
+      this.$dropdowns = $dropdowns || $('.js-dockerfile-selector');
+      this.initSelectors();
+    }
+
+    initSelectors() {
+      const editor = this.editor;
+      this.$dropdowns.each((i, dropdown) => {
+        const $dropdown = $(dropdown);
+        return new gl.BlobDockerfileSelector({
+          editor,
+          pattern: /(Dockerfile)/,
+          data: $dropdown.data('data'),
+          wrapper: $dropdown.closest('.js-dockerfile-selector-wrap'),
+          dropdown: $dropdown,
+        });
+      });
+    }
+  }
+
+  global.BlobDockerfileSelectors = BlobDockerfileSelectors;
+})();

app/assets/javascripts/blob_edit/edit_blob.js

@@ -33,9 +33,9 @@
       new gl.BlobCiYamlSelectors({
         editor: this.editor
       });
-        new gl.BlobDockerfileSelectors({
-            editor: this.editor
-        });
+      new gl.BlobDockerfileSelectors({
+        editor: this.editor
+      });
     }
 
     EditBlob.prototype.initModePanesAndLinks = function() {

app/views/projects/blob/_editor.html.haml

@@ -21,8 +21,8 @@
         = 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 } } )
-      .gitlab-ci-yml-selector.js-dockerfile-selector-wrap.hidden
-        = dropdown_tag("Choose a Dockerfile template", options: { toggle_class: 'js-dockerfile-selector', title: "Choose a template", filter: true, placeholder: "Filter", data: { data: dockerfile_names } } )
+      .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
         %span.no-wrap
           = custom_icon('icon_no_wrap')

lib/api/templates.rb

@@ -9,7 +9,10 @@ module API
         klass: Gitlab::Template::GitlabCiYmlTemplate,
         gitlab_version: 8.9
       },
-      dockerfiles:    Gitlab::Template::DockerfileTemplate
+      dockerfiles: {
+        klass: Gitlab::Template::DockerfileTemplate,
+        gitlab_version: 8.9
+      }
     }.freeze
     PROJECT_TEMPLATE_REGEX =
       /[\<\{\[]

spec/features/projects/files/dockerfile_dropdown_spec.rb

@@ -0,0 +1,30 @@
+require 'spec_helper'
+
+feature 'User wants to add a Dockerfile file', feature: true do
+  include WaitForAjax
+
+  before do
+    user = create(:user)
+    project = create(:project)
+    project.team << [user, :master]
+    login_as user
+    visit namespace_project_new_blob_path(project.namespace, project, 'master', file_name: 'Dockerfile')
+  end
+
+  scenario 'user can see Dockerfile dropdown' do
+    expect(page).to have_css('.dockerfile-selector')
+  end
+
+  scenario 'user can pick a Dockerfile file from the dropdown', js: true do
+    find('.js-dockerfile-selector').click
+    wait_for_ajax
+    within '.dockerfile-selector' do
+      find('.dropdown-input-field').set('HTTPd')
+      find('.dropdown-content li', text: 'HTTPd').click
+    end
+    wait_for_ajax
+
+    expect(page).to have_css('.dockerfile-selector .dropdown-toggle-text', text: 'HTTPd')
+    expect(page).to have_content('COPY ./ /usr/local/apache2/htdocs/')
+  end
+end