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.

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', () => {

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

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();
   });
 });