From 6b466e38738e3e6bcf4b13cca1e5f680daa43ae4 Mon Sep 17 00:00:00 2001
From: Luke Bennett <lbennett@gitlab.com>
Date: Tue, 11 Dec 2018 01:08:48 +0000
Subject: [PATCH] Fix bug causing repo mirror settings UI to break

Fixes an exception relating to the new project
cleanup settings in 11.6 that causes the mirror
repo settings UI to become unusable.
---
 .../javascripts/lib/utils/file_upload.js      |  3 ++
 .../fix-repo-settings-file-upload-error.yml   |  5 ++
 .../javascripts/lib/utils/file_upload_spec.js | 46 +++++++++++++++----
 3 files changed, 45 insertions(+), 9 deletions(-)
 create mode 100644 changelogs/unreleased/fix-repo-settings-file-upload-error.yml

diff --git a/app/assets/javascripts/lib/utils/file_upload.js b/app/assets/javascripts/lib/utils/file_upload.js
index b41ffb44971..82ee83e4348 100644
--- a/app/assets/javascripts/lib/utils/file_upload.js
+++ b/app/assets/javascripts/lib/utils/file_upload.js
@@ -1,6 +1,9 @@
 export default (buttonSelector, fileSelector) => {
   const btn = document.querySelector(buttonSelector);
   const fileInput = document.querySelector(fileSelector);
+
+  if (!btn || !fileInput) return;
+
   const form = btn.closest('form');
 
   btn.addEventListener('click', () => {
diff --git a/changelogs/unreleased/fix-repo-settings-file-upload-error.yml b/changelogs/unreleased/fix-repo-settings-file-upload-error.yml
new file mode 100644
index 00000000000..b219fdfaa1e
--- /dev/null
+++ b/changelogs/unreleased/fix-repo-settings-file-upload-error.yml
@@ -0,0 +1,5 @@
+---
+title: Fix bug causing repository mirror settings UI to break
+merge_request: 23712
+author:
+type: fixed
diff --git a/spec/javascripts/lib/utils/file_upload_spec.js b/spec/javascripts/lib/utils/file_upload_spec.js
index 92c9cc70aaf..8f7092f63de 100644
--- a/spec/javascripts/lib/utils/file_upload_spec.js
+++ b/spec/javascripts/lib/utils/file_upload_spec.js
@@ -9,28 +9,56 @@ describe('File upload', () => {
         <span class="js-filename"></span>
       </form>
     `);
-
-    fileUpload('.js-button', '.js-input');
   });
 
-  it('clicks file input after clicking button', () => {
-    const btn = document.querySelector('.js-button');
+  describe('when there is a matching button and input', () => {
+    beforeEach(() => {
+      fileUpload('.js-button', '.js-input');
+    });
+
+    it('clicks file input after clicking button', () => {
+      const btn = document.querySelector('.js-button');
+      const input = document.querySelector('.js-input');
+
+      spyOn(input, 'click');
+
+      btn.click();
+
+      expect(input.click).toHaveBeenCalled();
+    });
+
+    it('updates file name text', () => {
+      const input = document.querySelector('.js-input');
+
+      input.value = 'path/to/file/index.js';
+
+      input.dispatchEvent(new CustomEvent('change'));
+
+      expect(document.querySelector('.js-filename').textContent).toEqual('index.js');
+    });
+  });
+
+  it('fails gracefully when there is no matching button', () => {
     const input = document.querySelector('.js-input');
+    const btn = document.querySelector('.js-button');
+    fileUpload('.js-not-button', '.js-input');
 
     spyOn(input, 'click');
 
     btn.click();
 
-    expect(input.click).toHaveBeenCalled();
+    expect(input.click).not.toHaveBeenCalled();
   });
 
-  it('updates file name text', () => {
+  it('fails gracefully when there is no matching input', () => {
     const input = document.querySelector('.js-input');
+    const btn = document.querySelector('.js-button');
+    fileUpload('.js-button', '.js-not-input');
 
-    input.value = 'path/to/file/index.js';
+    spyOn(input, 'click');
 
-    input.dispatchEvent(new CustomEvent('change'));
+    btn.click();
 
-    expect(document.querySelector('.js-filename').textContent).toEqual('index.js');
+    expect(input.click).not.toHaveBeenCalled();
   });
 });