Fix bug causing repo mirror settings UI to breakfix-repo-settings-file-upload-error

Fixes an exception relating to the new project
cleanup settings in 11.6 that causes the mirror
repo settings UI to become unusable.

3 files changed, 44 insertions, 8 deletions

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>
     `);
+  });
+
+  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');
 
-    fileUpload('.js-button', '.js-input');
+      input.value = 'path/to/file/index.js';
+
+      input.dispatchEvent(new CustomEvent('change'));
+
+      expect(document.querySelector('.js-filename').textContent).toEqual('index.js');
+    });
   });
 
-  it('clicks file input after clicking button', () => {
-    const btn = document.querySelector('.js-button');
+  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();
   });
 });