Make file templates easy to use and discover

16 files changed, 459 insertions, 133 deletions

diff --git a/app/assets/javascripts/blob/file_template_mediator.js b/app/assets/javascripts/blob/file_template_mediator.js
new file mode 100644
index 00000000000..3062cd51ee3
--- /dev/null
+++ b/app/assets/javascripts/blob/file_template_mediator.js
@@ -0,0 +1,241 @@
+/* eslint-disable class-methods-use-this */
+/* global Flash */
+
+import FileTemplateTypeSelector from './template_selectors/type_selector';
+import BlobCiYamlSelector from './template_selectors/ci_yaml_selector';
+import DockerfileSelector from './template_selectors/dockerfile_selector';
+import GitignoreSelector from './template_selectors/gitignore_selector';
+import LicenseSelector from './template_selectors/license_selector';
+
+export default class FileTemplateMediator {
+  constructor({ editor, currentAction }) {
+    this.editor = editor;
+    this.currentAction = currentAction;
+
+    this.initTemplateSelectors();
+    this.initTemplateTypeSelector();
+    this.initDomElements();
+    this.initDropdowns();
+    this.initPageEvents();
+  }
+
+  initTemplateSelectors() {
+    // Order dictates template type dropdown item order
+    this.templateSelectors = [
+      GitignoreSelector,
+      BlobCiYamlSelector,
+      DockerfileSelector,
+      LicenseSelector,
+    ].map(TemplateSelectorClass => new TemplateSelectorClass({ mediator: this }));
+  }
+
+  initTemplateTypeSelector() {
+    this.typeSelector = new FileTemplateTypeSelector({
+      mediator: this,
+      dropdownData: this.templateSelectors
+        .map((templateSelector) => {
+          const cfg = templateSelector.config;
+
+          return {
+            name: cfg.name,
+            key: cfg.key,
+          };
+        }),
+    });
+  }
+
+  initDomElements() {
+    const $templatesMenu = $('.template-selectors-menu');
+    const $undoMenu = $templatesMenu.find('.template-selectors-undo-menu');
+    const $fileEditor = $('.file-editor');
+
+    this.$templatesMenu = $templatesMenu;
+    this.$undoMenu = $undoMenu;
+    this.$undoBtn = $undoMenu.find('button');
+    this.$templateSelectors = $templatesMenu.find('.template-selector-dropdowns-wrap');
+    this.$filenameInput = $fileEditor.find('.js-file-path-name-input');
+    this.$fileContent = $fileEditor.find('#file-content');
+    this.$commitForm = $fileEditor.find('form');
+    this.$navLinks = $fileEditor.find('.nav-links');
+  }
+
+  initDropdowns() {
+    if (this.currentAction === 'create') {
+      this.typeSelector.show();
+    } else {
+      this.hideTemplateSelectorMenu();
+    }
+
+    this.displayMatchedTemplateSelector();
+  }
+
+  initPageEvents() {
+    this.listenForFilenameInput();
+    this.prepFileContentForSubmit();
+    this.listenForPreviewMode();
+  }
+
+  listenForFilenameInput() {
+    this.$filenameInput.on('keyup blur', () => {
+      this.displayMatchedTemplateSelector();
+    });
+  }
+
+  prepFileContentForSubmit() {
+    this.$commitForm.submit(() => {
+      this.$fileContent.val(this.editor.getValue());
+    });
+  }
+
+  listenForPreviewMode() {
+    this.$navLinks.on('click', 'a', (e) => {
+      const urlPieces = e.target.href.split('#');
+      const hash = urlPieces[1];
+      if (hash === 'preview') {
+        this.hideTemplateSelectorMenu();
+      } else if (hash === 'editor') {
+        this.showTemplateSelectorMenu();
+      }
+    });
+  }
+
+  selectTemplateType(item, el, e) {
+    if (e) {
+      e.preventDefault();
+    }
+
+    this.templateSelectors.forEach((selector) => {
+      if (selector.config.key === item.key) {
+        selector.show();
+      } else {
+        selector.hide();
+      }
+    });
+
+    this.typeSelector.setToggleText(item.name);
+
+    this.cacheToggleText();
+  }
+
+  selectTemplateFile(selector, query, data) {
+    selector.renderLoading();
+    // in case undo menu is already already there
+    this.destroyUndoMenu();
+    this.fetchFileTemplate(selector.config.endpoint, query, data)
+      .then((file) => {
+        this.showUndoMenu();
+        this.setEditorContent(file);
+        this.setFilename(selector.config.name);
+        selector.renderLoaded();
+      })
+      .catch(err => new Flash(`An error occurred while fetching the template: ${err}`));
+  }
+
+  displayMatchedTemplateSelector() {
+    const currentInput = this.getFilename();
+    this.templateSelectors.forEach((selector) => {
+      const match = selector.config.pattern.test(currentInput);
+
+      if (match) {
+        this.typeSelector.show();
+        this.selectTemplateType(selector.config);
+        this.showTemplateSelectorMenu();
+      }
+    });
+  }
+
+  fetchFileTemplate(apiCall, query, data) {
+    return new Promise((resolve) => {
+      const resolveFile = file => resolve(file);
+
+      if (!data) {
+        apiCall(query, resolveFile);
+      } else {
+        apiCall(query, data, resolveFile);
+      }
+    });
+  }
+
+  setEditorContent(file) {
+    if (!file && file !== '') return;
+
+    const newValue = file.content || file;
+
+    this.editor.setValue(newValue, 1);
+
+    this.editor.focus();
+
+    this.editor.navigateFileStart();
+  }
+
+  findTemplateSelectorByKey(key) {
+    return this.templateSelectors.find(selector => selector.config.key === key);
+  }
+
+  showUndoMenu() {
+    this.$undoMenu.removeClass('hidden');
+
+    this.$undoBtn.on('click', () => {
+      this.restoreFromCache();
+      this.destroyUndoMenu();
+    });
+  }
+
+  destroyUndoMenu() {
+    this.cacheFileContents();
+    this.cacheToggleText();
+    this.$undoMenu.addClass('hidden');
+    this.$undoBtn.off('click');
+  }
+
+  hideTemplateSelectorMenu() {
+    this.$templatesMenu.hide();
+  }
+
+  showTemplateSelectorMenu() {
+    this.$templatesMenu.show();
+  }
+
+  cacheToggleText() {
+    this.cachedToggleText = this.getTemplateSelectorToggleText();
+  }
+
+  cacheFileContents() {
+    this.cachedContent = this.editor.getValue();
+    this.cachedFilename = this.getFilename();
+  }
+
+  restoreFromCache() {
+    this.setEditorContent(this.cachedContent);
+    this.setFilename(this.cachedFilename);
+    this.setTemplateSelectorToggleText();
+  }
+
+  getTemplateSelectorToggleText() {
+    return this.$templateSelectors
+      .find('.js-template-selector-wrap:visible .dropdown-toggle-text')
+      .text();
+  }
+
+  setTemplateSelectorToggleText() {
+    return this.$templateSelectors
+      .find('.js-template-selector-wrap:visible .dropdown-toggle-text')
+      .text(this.cachedToggleText);
+  }
+
+  getTypeSelectorToggleText() {
+    return this.typeSelector.getToggleText();
+  }
+
+  getFilename() {
+    return this.$filenameInput.val();
+  }
+
+  setFilename(name) {
+    this.$filenameInput.val(name);
+  }
+
+  getSelected() {
+    return this.templateSelectors.find(selector => selector.selected);
+  }
+}
diff --git a/app/assets/javascripts/blob/file_template_selector.js b/app/assets/javascripts/blob/file_template_selector.js
new file mode 100644
index 00000000000..31dd45fac89
--- /dev/null
+++ b/app/assets/javascripts/blob/file_template_selector.js
@@ -0,0 +1,60 @@
+/* global Api */
+
+export default class FileTemplateSelector {
+  constructor(mediator) {
+    this.mediator = mediator;
+    this.$dropdown = null;
+    this.$wrapper = null;
+  }
+
+  init() {
+    const cfg = this.config;
+
+    this.$dropdown = $(cfg.dropdown);
+    this.$wrapper = $(cfg.wrapper);
+    this.$loadingIcon = this.$wrapper.find('.fa-chevron-down');
+    this.$dropdownToggleText = this.$wrapper.find('.dropdown-toggle-text');
+
+    this.initDropdown();
+  }
+
+  show() {
+    if (this.$dropdown === null) {
+      this.init();
+    }
+
+    this.$wrapper.removeClass('hidden');
+  }
+
+  hide() {
+    if (this.$dropdown !== null) {
+      this.$wrapper.addClass('hidden');
+    }
+  }
+
+  getToggleText() {
+    return this.$dropdownToggleText.text();
+  }
+
+  setToggleText(text) {
+    this.$dropdownToggleText.text(text);
+  }
+
+  renderLoading() {
+    this.$loadingIcon
+      .addClass('fa-spinner fa-spin')
+      .removeClass('fa-chevron-down');
+  }
+
+  renderLoaded() {
+    this.$loadingIcon
+      .addClass('fa-chevron-down')
+      .removeClass('fa-spinner fa-spin');
+  }
+
+  reportSelection(query, el, e, data) {
+    e.preventDefault();
+    return this.mediator.selectTemplateFile(this, query, data);
+  }
+}
+
diff --git a/app/assets/javascripts/blob/template_selectors/template_selector.js b/app/assets/javascripts/blob/template_selector.js
index d7c1c32efbd..d7c1c32efbd 100644
--- a/app/assets/javascripts/blob/template_selectors/template_selector.js
+++ b/app/assets/javascripts/blob/template_selector.js
diff --git a/app/assets/javascripts/blob/template_selectors/blob_ci_yaml_selector.js b/app/assets/javascripts/blob/template_selectors/blob_ci_yaml_selector.js
deleted file mode 100644
index 5a5954e7751..00000000000
--- a/app/assets/javascripts/blob/template_selectors/blob_ci_yaml_selector.js
+++ /dev/null
@@ -1,9 +0,0 @@
-/* global Api */
-
-import TemplateSelector from './template_selector';
-
-export default class BlobCiYamlSelector extends TemplateSelector {
-  requestFile(query) {
-    return Api.gitlabCiYml(query.name, (file, config) => this.setEditorContent(file, config));
-  }
-}
diff --git a/app/assets/javascripts/blob/template_selectors/blob_ci_yaml_selectors.js b/app/assets/javascripts/blob/template_selectors/blob_ci_yaml_selectors.js
deleted file mode 100644
index 7a4d6a42a03..00000000000
--- a/app/assets/javascripts/blob/template_selectors/blob_ci_yaml_selectors.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/* global Api */
-
-import BlobCiYamlSelector from './blob_ci_yaml_selector';
-
-export default class BlobCiYamlSelectors {
-  constructor({ editor, $dropdowns }) {
-    this.$dropdowns = $dropdowns || $('.js-gitlab-ci-yml-selector');
-    this.initSelectors(editor);
-  }
-
-  initSelectors(editor) {
-    this.$dropdowns.each((i, dropdown) => {
-      const $dropdown = $(dropdown);
-      return new BlobCiYamlSelector({
-        editor,
-        pattern: /(.gitlab-ci.yml)/,
-        data: $dropdown.data('data'),
-        wrapper: $dropdown.closest('.js-gitlab-ci-yml-selector-wrap'),
-        dropdown: $dropdown,
-      });
-    });
-  }
-}
diff --git a/app/assets/javascripts/blob/template_selectors/blob_dockerfile_selector.js b/app/assets/javascripts/blob/template_selectors/blob_dockerfile_selector.js
deleted file mode 100644
index 19f8820a0cb..00000000000
--- a/app/assets/javascripts/blob/template_selectors/blob_dockerfile_selector.js
+++ /dev/null
@@ -1,9 +0,0 @@
-/* global Api */
-
-import TemplateSelector from './template_selector';
-
-export default class BlobDockerfileSelector extends TemplateSelector {
-  requestFile(query) {
-    return Api.dockerfileYml(query.name, (file, config) => this.setEditorContent(file, config));
-  }
-}
diff --git a/app/assets/javascripts/blob/template_selectors/blob_dockerfile_selectors.js b/app/assets/javascripts/blob/template_selectors/blob_dockerfile_selectors.js
deleted file mode 100644
index da067035b43..00000000000
--- a/app/assets/javascripts/blob/template_selectors/blob_dockerfile_selectors.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import BlobDockerfileSelector from './blob_dockerfile_selector';
-
-export default 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,
-      });
-    });
-  }
-}
diff --git a/app/assets/javascripts/blob/template_selectors/blob_gitignore_selector.js b/app/assets/javascripts/blob/template_selectors/blob_gitignore_selector.js
deleted file mode 100644
index 0b6b02fc2b3..00000000000
--- a/app/assets/javascripts/blob/template_selectors/blob_gitignore_selector.js
+++ /dev/null
@@ -1,9 +0,0 @@
-/* global Api */
-
-import TemplateSelector from './template_selector';
-
-export default class BlobGitignoreSelector extends TemplateSelector {
-  requestFile(query) {
-    return Api.gitignoreText(query.name, (file, config) => this.setEditorContent(file, config));
-  }
-}
diff --git a/app/assets/javascripts/blob/template_selectors/blob_gitignore_selectors.js b/app/assets/javascripts/blob/template_selectors/blob_gitignore_selectors.js
deleted file mode 100644
index dc485d97677..00000000000
--- a/app/assets/javascripts/blob/template_selectors/blob_gitignore_selectors.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import BlobGitignoreSelector from './blob_gitignore_selector';
-
-export default class BlobGitignoreSelectors {
-  constructor({ editor, $dropdowns }) {
-    this.$dropdowns = $dropdowns || $('.js-gitignore-selector');
-    this.editor = editor;
-    this.initSelectors();
-  }
-
-  initSelectors() {
-    this.$dropdowns.each((i, dropdown) => {
-      const $dropdown = $(dropdown);
-
-      return new BlobGitignoreSelector({
-        pattern: /(.gitignore)/,
-        data: $dropdown.data('data'),
-        wrapper: $dropdown.closest('.js-gitignore-selector-wrap'),
-        dropdown: $dropdown,
-        editor: this.editor,
-      });
-    });
-  }
-}
diff --git a/app/assets/javascripts/blob/template_selectors/blob_license_selector.js b/app/assets/javascripts/blob/template_selectors/blob_license_selector.js
deleted file mode 100644
index e9cb31cc2dc..00000000000
--- a/app/assets/javascripts/blob/template_selectors/blob_license_selector.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/* global Api */
-
-import TemplateSelector from './template_selector';
-
-export default class BlobLicenseSelector extends TemplateSelector {
-  requestFile(query) {
-    const data = {
-      project: this.dropdown.data('project'),
-      fullname: this.dropdown.data('fullname'),
-    };
-    return Api.licenseText(query.id, data, (file, config) => this.setEditorContent(file, config));
-  }
-}
diff --git a/app/assets/javascripts/blob/template_selectors/blob_license_selectors.js b/app/assets/javascripts/blob/template_selectors/blob_license_selectors.js
deleted file mode 100644
index a44f4f78b2d..00000000000
--- a/app/assets/javascripts/blob/template_selectors/blob_license_selectors.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/* eslint-disable no-unused-vars, no-param-reassign */
-
-import BlobLicenseSelector from './blob_license_selector';
-
-export default class BlobLicenseSelectors {
-  constructor({ $dropdowns, editor }) {
-    this.$dropdowns = $dropdowns || $('.js-license-selector');
-    this.initSelectors(editor);
-  }
-
-  initSelectors(editor) {
-    this.$dropdowns.each((i, dropdown) => {
-      const $dropdown = $(dropdown);
-
-      return new BlobLicenseSelector({
-        editor,
-        pattern: /^(.+\/)?(licen[sc]e|copying)($|\.)/i,
-        data: $dropdown.data('data'),
-        wrapper: $dropdown.closest('.js-license-selector-wrap'),
-        dropdown: $dropdown,
-      });
-    });
-  }
-}
diff --git a/app/assets/javascripts/blob/template_selectors/ci_yaml_selector.js b/app/assets/javascripts/blob/template_selectors/ci_yaml_selector.js
new file mode 100644
index 00000000000..935df07677c
--- /dev/null
+++ b/app/assets/javascripts/blob/template_selectors/ci_yaml_selector.js
@@ -0,0 +1,32 @@
+/* global Api */
+
+import FileTemplateSelector from '../file_template_selector';
+
+export default class BlobCiYamlSelector extends FileTemplateSelector {
+  constructor({ mediator }) {
+    super(mediator);
+    this.config = {
+      key: 'gitlab-ci-yaml',
+      name: '.gitlab-ci.yml',
+      pattern: /(.gitlab-ci.yml)/,
+      endpoint: Api.gitlabCiYml,
+      dropdown: '.js-gitlab-ci-yml-selector',
+      wrapper: '.js-gitlab-ci-yml-selector-wrap',
+    };
+  }
+
+  initDropdown() {
+    // maybe move to super class as well
+    this.$dropdown.glDropdown({
+      data: this.$dropdown.data('data'),
+      filterable: true,
+      selectable: true,
+      toggleLabel: item => item.name,
+      search: {
+        fields: ['name'],
+      },
+      clicked: (query, el, e) => this.reportSelection(query.name, el, e),
+      text: item => item.name,
+    });
+  }
+}
diff --git a/app/assets/javascripts/blob/template_selectors/dockerfile_selector.js b/app/assets/javascripts/blob/template_selectors/dockerfile_selector.js
new file mode 100644
index 00000000000..b4b4d09c315
--- /dev/null
+++ b/app/assets/javascripts/blob/template_selectors/dockerfile_selector.js
@@ -0,0 +1,32 @@
+/* global Api */
+
+import FileTemplateSelector from '../file_template_selector';
+
+export default class DockerfileSelector extends FileTemplateSelector {
+  constructor({ mediator }) {
+    super(mediator);
+    this.config = {
+      key: 'dockerfile',
+      name: 'Dockerfile',
+      pattern: /(Dockerfile)/,
+      endpoint: Api.dockerfileYml,
+      dropdown: '.js-dockerfile-selector',
+      wrapper: '.js-dockerfile-selector-wrap',
+    };
+  }
+
+  initDropdown() {
+    // maybe move to super class as well
+    this.$dropdown.glDropdown({
+      data: this.$dropdown.data('data'),
+      filterable: true,
+      selectable: true,
+      toggleLabel: item => item.name,
+      search: {
+        fields: ['name'],
+      },
+      clicked: (query, el, e) => this.reportSelection(query.name, el, e),
+      text: item => item.name,
+    });
+  }
+}
diff --git a/app/assets/javascripts/blob/template_selectors/gitignore_selector.js b/app/assets/javascripts/blob/template_selectors/gitignore_selector.js
new file mode 100644
index 00000000000..aefae54ae71
--- /dev/null
+++ b/app/assets/javascripts/blob/template_selectors/gitignore_selector.js
@@ -0,0 +1,31 @@
+/* global Api */
+
+import FileTemplateSelector from '../file_template_selector';
+
+export default class BlobGitignoreSelector extends FileTemplateSelector {
+  constructor({ mediator }) {
+    super(mediator);
+    this.config = {
+      key: 'gitignore',
+      name: '.gitignore',
+      pattern: /(.gitignore)/,
+      endpoint: Api.gitignoreText,
+      dropdown: '.js-gitignore-selector',
+      wrapper: '.js-gitignore-selector-wrap',
+    };
+  }
+
+  initDropdown() {
+    this.$dropdown.glDropdown({
+      data: this.$dropdown.data('data'),
+      filterable: true,
+      selectable: true,
+      toggleLabel: item => item.name,
+      search: {
+        fields: ['name'],
+      },
+      clicked: (query, el, e) => this.reportSelection(query.name, el, e),
+      text: item => item.name,
+    });
+  }
+}
diff --git a/app/assets/javascripts/blob/template_selectors/license_selector.js b/app/assets/javascripts/blob/template_selectors/license_selector.js
new file mode 100644
index 00000000000..c8abd689ab4
--- /dev/null
+++ b/app/assets/javascripts/blob/template_selectors/license_selector.js
@@ -0,0 +1,38 @@
+/* global Api */
+
+import FileTemplateSelector from '../file_template_selector';
+
+export default class BlobLicenseSelector extends FileTemplateSelector {
+  constructor({ mediator }) {
+    super(mediator);
+    this.config = {
+      key: 'license',
+      name: 'LICENSE',
+      pattern: /^(.+\/)?(licen[sc]e|copying)($|\.)/i,
+      endpoint: Api.licenseText,
+      dropdown: '.js-license-selector',
+      wrapper: '.js-license-selector-wrap',
+    };
+  }
+
+  initDropdown() {
+    this.$dropdown.glDropdown({
+      data: this.$dropdown.data('data'),
+      filterable: true,
+      selectable: true,
+      toggleLabel: item => item.name,
+      search: {
+        fields: ['name'],
+      },
+      clicked: (query, el, e) => {
+        const data = {
+          project: this.$dropdown.data('project'),
+          fullname: this.$dropdown.data('fullname'),
+        };
+
+        this.reportSelection(query.id, el, e, data);
+      },
+      text: item => item.name,
+    });
+  }
+}
diff --git a/app/assets/javascripts/blob/template_selectors/type_selector.js b/app/assets/javascripts/blob/template_selectors/type_selector.js
new file mode 100644
index 00000000000..56f23ef0568
--- /dev/null
+++ b/app/assets/javascripts/blob/template_selectors/type_selector.js
@@ -0,0 +1,25 @@
+import FileTemplateSelector from '../file_template_selector';
+
+export default class FileTemplateTypeSelector extends FileTemplateSelector {
+  constructor({ mediator, dropdownData }) {
+    super(mediator);
+    this.mediator = mediator;
+    this.config = {
+      dropdown: '.js-template-type-selector',
+      wrapper: '.js-template-type-selector-wrap',
+      dropdownData,
+    };
+  }
+
+  initDropdown() {
+    this.$dropdown.glDropdown({
+      data: this.config.dropdownData,
+      filterable: false,
+      selectable: true,
+      toggleLabel: item => item.name,
+      clicked: (item, el, e) => this.mediator.selectTemplateType(item, el, e),
+      text: item => item.name,
+    });
+  }
+
+}