Fix connect endpoint issues in Firefox

src/frontend/packages/core/src/core/browser-helper.ts

@@ -0,0 +1,8 @@
+export const getEventTarget = (event) => {
+  // Ensure we work on Firefox as well as Chrome etc
+  return event.target || event.srcElement;
+};
+
+export const getEventFiles = (event) => {
+  return getEventTarget(event).files;
+};

src/frontend/packages/core/src/features/applications/deploy-application/deploy-application-step2/deploy-application-fs/deploy-application-fs-utils.ts

@@ -29,16 +29,14 @@ export class DeployApplicationFsUtils {
       for (const item of items) {
         const filePath = item.webkitRelativePath.split('/');
         // First part is the root folder name
-        if (filePath.length === 2 && !rootFolderName) {
+        if (filePath.length > 1 && !rootFolderName) {
           rootFolderName = filePath[0];
         }
-        if (filePath.length > 2) {
-          // Don't traverse below the 1st level of files (could take a while)
-          break;
-        }
+
         if (!cfIgnoreFile && filePath.length === 2 && filePath[1] === CF_IGNORE_FILE) {
           cfIgnoreFile = item;
         }
+
         if (filePath.length === 2 && filePath[1] === CF_MANIFEST_FILE) {
           manifestFile = item;
         }

src/frontend/packages/core/src/features/applications/deploy-application/deploy-application-step2/deploy-application-fs/deploy-application-fs.component.ts

@@ -3,6 +3,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { BehaviorSubject } from 'rxjs';
 import { filter, first } from 'rxjs/operators';
 
+import { getEventFiles } from '../../../../../core/browser-helper';
 import { FileScannerInfo } from './deploy-application-fs-scanner';
 import { DeployApplicationFsUtils } from './deploy-application-fs-utils';
 
@@ -31,7 +32,7 @@ export class DeployApplicationFsComponent implements ControlValueAccessor {
 
   // Handle result of a file input form field selection
   onFileChange(event) {
-    const files = event.srcElement.files;
+    const files = getEventFiles(event);
     const utils = new DeployApplicationFsUtils();
     utils.handleFileInputSelection(files).pipe(
       filter(res => !!res),

src/frontend/packages/core/src/features/endpoints/create-endpoint/create-endpoint-connect/create-endpoint-connect.component.html

@@ -6,9 +6,10 @@
     <mat-checkbox class="connect__checkbox" [(ngModel)]="doConnect">Connect to
       <b>{{ connectService?.config.name }}</b> now
       (optional).
-      <div class="connect__subtext">You may connect this endpoint at a later date from the
-        endpoints page.</div>
     </mat-checkbox>
+    <div class="connect__subtext">You may connect this endpoint at a later date from the
+      endpoints page.
+    </div>
   </div>
   <div>
     <div class="connect__title">

src/frontend/packages/core/src/features/endpoints/create-endpoint/create-endpoint-connect/create-endpoint-connect.component.scss

@@ -26,7 +26,7 @@
   }
   &__subtext {
     font-size: 13px;
-    margin-top: -5px;
+    margin: 2px 0 0 24px;
     opacity: .5;
     position: absolute;
   }

src/frontend/packages/core/src/shared/components/file-input/file-input.component.ts

@@ -14,6 +14,7 @@ import {
 import { ControlContainer, FormGroupName } from '@angular/forms';
 import { Subscription } from 'rxjs';
 
+import { getEventFiles } from '../../../core/browser-helper';
 import { safeUnsubscribe } from '../../../core/utils.service';
 
 @Component({
@@ -58,7 +59,7 @@ export class FileInputComponent implements OnInit, OnDestroy {
   get fileCount(): number { return this.files && this.files.length || 0; }
 
   onNativeInputFileSelect($event) {
-    const fs = $event.srcElement.files;
+    const fs = getEventFiles($event);
     if (fs.length > 0) {
       this.files = fs;
       this.onFileSelect.emit(this.files[0]);