Add latest changes from gitlab-org/gitlab@master

2 files changed, 48 insertions, 0 deletions

diff --git a/app/assets/javascripts/snippet/collapsible_input.js b/app/assets/javascripts/snippet/collapsible_input.js
new file mode 100644
index 00000000000..e7225162f86
--- /dev/null
+++ b/app/assets/javascripts/snippet/collapsible_input.js
@@ -0,0 +1,45 @@
+const hide = el => el.classList.add('d-none');
+const show = el => el.classList.remove('d-none');
+
+const setupCollapsibleInput = el => {
+  const collapsedEl = el.querySelector('.js-collapsed');
+  const expandedEl = el.querySelector('.js-expanded');
+  const collapsedInputEl = collapsedEl.querySelector('textarea,input,select');
+  const expandedInputEl = expandedEl.querySelector('textarea,input,select');
+  const formEl = el.closest('form');
+
+  const collapse = () => {
+    hide(expandedEl);
+    show(collapsedEl);
+  };
+
+  const expand = () => {
+    hide(collapsedEl);
+    show(expandedEl);
+  };
+
+  // NOTE:
+  // We add focus listener to all form inputs so that we can collapse
+  // when something is focused that's not the expanded input.
+  formEl.addEventListener('focusin', e => {
+    if (e.target === collapsedInputEl) {
+      expand();
+      expandedInputEl.focus();
+    } else if (!el.contains(e.target) && !expandedInputEl.value) {
+      collapse();
+    }
+  });
+};
+
+/**
+ * Usage in HAML
+ *
+ * .js-collapsible-input
+ *   .js-collapsed{ class: ('d-none' if is_expanded) }
+ *     = input
+ *   .js-expanded{ class: ('d-none' if !is_expanded) }
+ *     = big_input
+ */
+export default () => {
+  Array.from(document.querySelectorAll('.js-collapsible-input')).forEach(setupCollapsibleInput);
+};
diff --git a/app/assets/javascripts/snippet/snippet_bundle.js b/app/assets/javascripts/snippet/snippet_bundle.js
index dcee17453b8..652531a1289 100644
--- a/app/assets/javascripts/snippet/snippet_bundle.js
+++ b/app/assets/javascripts/snippet/snippet_bundle.js
@@ -1,6 +1,7 @@
 /* global ace */
 
 import $ from 'jquery';
+import setupCollapsibleInputs from './collapsible_input';
 
 export default () => {
   const editor = ace.edit('editor');
@@ -8,4 +9,6 @@ export default () => {
   $('.snippet-form-holder form').on('submit', () => {
     $('.snippet-file-content').val(editor.getValue());
   });
+
+  setupCollapsibleInputs();
 };