added file upload for snowflake key auth

angular.json

@@ -31,7 +31,7 @@
               "src/styles.scss",
               "./node_modules/swagger-ui/dist/swagger-ui.css"
             ],
-            "allowedCommonJsDependencies": ["ace-builds", "flat", "minim"]
+            "allowedCommonJsDependencies": ["ace-builds", "flat", "minim", "prop-types", "swagger-ui"]
           },
           "configurations": {
             "production": {

src/app/adf-services/df-service-details/df-service-details.component.html

@@ -229,14 +229,15 @@ <h4 class="text-center" style="color: black !important">
                           'picklist',
                           'multi_picklist',
                           'boolean',
-                          'file_certificate'
+                          'file_certificate',
+                          'file_certificate_api'
                         ].includes(item.type)
                       "
                       [schema]="item"
                       [formControl]="getConfigControl(item.name)"
-                      [class.dynamic-width]="item.type !== 'file_certificate'"
+                      [class.dynamic-width]="['file_certificate', 'file_certificate_api'].indexOf(item.type) === -1"
                       [class.full-width]="
-                        item.type === 'file_certificate'
+                        ['file_certificate', 'file_certificate_api'].indexOf(item.type) !== -1
                       "></df-dynamic-field>
                     <df-array-field
                       *ngIf="item.type === 'array' || item.type === 'object'"
@@ -633,15 +634,16 @@ <h4>Full Access</h4>
                         'picklist',
                         'multi_picklist',
                         'boolean',
-                        'file_certificate'
+                        'file_certificate',
+                        'file_certificate_api'
                       ].includes(item.type)
                     "
                     color="primary"
                     [schema]="item"
                     [formControl]="getConfigControl(item.name)"
-                    [class.dynamic-width]="item.type !== 'file_certificate'"
+                    [class.dynamic-width]="['file_certificate', 'file_certificate_api'].indexOf(item.type) === -1"
                     [class.full-width]="
-                      item.type === 'file_certificate'
+                      ['file_certificate', 'file_certificate_api'].indexOf(item.type) !== -1
                     "></df-dynamic-field>
                   <df-array-field
                     *ngIf="item.type === 'array' || item.type === 'object'"

src/app/shared/components/df-dynamic-field/df-dynamic-field.component.html

@@ -25,6 +25,7 @@
           ? 'password'
           : 'text'
       "
+      [attr.autocomplete]="schema.type === 'password' ? 'current-password' : 'off'"
       [attr.aria-label]="schema.label" />
     <mat-select
       *ngIf="['picklist', 'multi_picklist'].includes(schema.type)"
@@ -41,6 +42,20 @@
       [icon]="faCircleInfo"
       [matTooltip]="schema.description" />
   </mat-form-field>
+
+  <!-- Use new file selector for file_certificate_api type -->
+  <ng-container *ngIf="schema.type === 'file_certificate_api'">
+    <df-file-selector
+      #fileSelector
+      [label]="schema.label"
+      [description]="schema.description || ''"
+      [allowedExtensions]="['.p8', '.pem', '.key']"
+      [initialValue]="control.value"
+      (fileSelected)="onFileSelected($event)">
+    </df-file-selector>
+  </ng-container>
+
+  <!-- Standard file upload for file_certificate type -->
   <ng-container *ngIf="schema.type === 'file_certificate'"
     ><input
       type="file"

src/app/shared/components/df-dynamic-field/df-dynamic-field.component.ts

@@ -5,6 +5,8 @@ import {
   OnInit,
   Optional,
   Self,
+  ViewChild,
+  AfterViewInit,
 } from '@angular/core';
 import {
   FormControl,
@@ -30,6 +32,8 @@ import { Observable, map, startWith } from 'rxjs';
 import { ActivatedRoute } from '@angular/router';
 import { addGroupEntries } from '../../utilities/eventScripts';
 import { DfThemeService } from '../../services/df-theme.service';
+import { DfFileSelectorComponent, SelectedFile } from '../df-file-selector/df-file-selector.component';
+
 @UntilDestroy({ checkProperties: true })
 @Component({
   selector: 'df-dynamic-field',
@@ -50,13 +54,16 @@ import { DfThemeService } from '../../services/df-theme.service';
     MatTooltipModule,
     MatAutocompleteModule,
     AsyncPipe,
+    DfFileSelectorComponent
   ],
 })
-export class DfDynamicFieldComponent implements OnInit, DoCheck {
+export class DfDynamicFieldComponent implements OnInit, DoCheck, AfterViewInit {
   @Input() schema: ConfigSchema;
   @Input() showLabel = true;
+  @ViewChild('fileSelector') fileSelector: DfFileSelectorComponent;
   faCircleInfo = faCircleInfo;
   control = new FormControl();
+  private pendingFilePath: string | null = null;
 
   onChange: (value: any) => void;
   onTouched: () => void;
@@ -69,18 +76,21 @@ export class DfDynamicFieldComponent implements OnInit, DoCheck {
     controlDir.valueAccessor = this;
   }
 
-  eventList: string[];
+  eventList: string[] = [];
   filteredEventList: Observable<string[]>;
   isDarkMode = this.themeService.darkMode$;
 
   ngOnInit(): void {
     if (this.schema.type === 'event_picklist') {
-      this.activedRoute.data.subscribe(({ systemEvents }) => {
-        this.eventList = addGroupEntries(systemEvents.resource);
+      this.activedRoute.data.subscribe((data: any) => {
+        if (data.systemEvents && data.systemEvents.resource) {
+          this.eventList = addGroupEntries(data.systemEvents.resource);
+        }
       });
       this.filteredEventList = this.control.valueChanges.pipe(
         startWith(''),
-        map(value => {
+        map((value: string) => {
+          if (!value || !this.eventList) return [];
           return this.eventList.filter(event =>
             event.toLowerCase().includes(value.toLowerCase())
           );
@@ -98,14 +108,55 @@ export class DfDynamicFieldComponent implements OnInit, DoCheck {
     }
   }
 
+  ngAfterViewInit(): void {
+    if (this.schema?.type === 'file_certificate_api' && this.fileSelector) {
+      if (this.pendingFilePath) {
+        console.log('Applying pending file path after view init:', this.pendingFilePath);
+        this.fileSelector.setPath(this.pendingFilePath);
+        this.pendingFilePath = null;
+      } else if (this.control.value && typeof this.control.value === 'string') {
+        console.log('Setting file selector path after view init:', this.control.value);
+        this.fileSelector.setPath(this.control.value);
+      }
+    }
+  }
+
   handleFileInput(event: Event) {
     const input = event.target as HTMLInputElement;
     if (input.files) {
       this.control.setValue(input.files[0]);
     }
   }
 
+  onFileSelected(file: SelectedFile | undefined) {
+    if (file) {
+      this.control.setValue(file.path);
+
+      console.log('File selected in dynamic field:', file);
+    } else {
+      this.control.setValue(null);
+    }
+  }
+
   writeValue(value: any): void {
+    console.log('Dynamic field writeValue:', value, 'Schema type:', this.schema?.type);
+
+    if (this.schema?.type === 'file_certificate_api' && typeof value === 'string' && value) {
+      console.log('Setting file path value:', value);
+
+      this.control.setValue(value, { emitEvent: false });
+
+      if (this.fileSelector) {
+        console.log('Setting path on file selector:', value);
+        this.fileSelector.setPath(value);
+      } else {
+        console.log('File selector not yet available, storing pending path:', value);
+        this.pendingFilePath = value;
+      }
+
+      return;
+    }
+
     this.control.setValue(value, { emitEvent: false });
   }
 

src/app/shared/components/df-file-selector/df-file-selector-dialog.component.html

@@ -0,0 +1,160 @@
+<h2 mat-dialog-title>
+  <ng-container *ngIf="data.uploadMode">
+    <span>Upload Private Key File</span>
+  </ng-container>
+  <ng-container *ngIf="!data.uploadMode">
+    <span>Select Private Key File</span>
+  </ng-container>
+  <small *ngIf="data.allowedExtensions.length > 0">
+    Allowed file types: {{ data.allowedExtensions.join(', ') }}
+  </small>
+</h2>
+
+<mat-dialog-content>
+  <!-- File API Selection -->
+  <div *ngIf="!selectedFileApi" class="file-api-selection">
+    <h3>Select a File Service</h3>
+    <div class="file-api-grid">
+      <div 
+        *ngFor="let fileApi of data.fileApis" 
+        class="file-api-card"
+        (click)="selectFileApi(fileApi)">
+        <div class="file-api-icon">
+          <fa-icon [icon]="faFolderOpen" size="2x"></fa-icon>
+        </div>
+        <div class="file-api-details">
+          <div class="file-api-name">{{ fileApi.label || fileApi.name }}</div>
+          <div class="file-api-type">{{ fileApi.type }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- File Browser -->
+  <div *ngIf="selectedFileApi" class="file-browser">
+    <!-- Navigation bar -->
+    <div class="navigation-bar">
+      <button mat-icon-button (click)="navigateBack()" matTooltip="Go back">
+        <fa-icon [icon]="faArrowLeft"></fa-icon>
+      </button>
+      <div class="current-location">
+        <span class="service-name">{{ selectedFileApi.name }}</span>
+        <span *ngIf="currentPath">{{ currentPath }}</span>
+      </div>
+    </div>
+
+    <!-- Action buttons -->
+    <div class="action-row">
+      <button 
+        class="action-button create-folder-btn" 
+        (click)="showCreateFolderDialog()">
+        <span class="button-content">cr</span> Create Folder
+      </button>
+
+      <button 
+        class="action-button upload-file-btn" 
+        (click)="triggerFileUpload()">
+        <span class="button-content">up</span> Upload File
+      </button>
+      <input 
+        type="file" 
+        style="display: none" 
+        #fileUploadInput
+        [accept]="data.allowedExtensions.join(',')"
+        (change)="handleFileUpload($event)">
+    </div>
+
+    <div *ngIf="isLoading" class="loading-container">
+      <mat-spinner diameter="40"></mat-spinner>
+      <div>Loading files...</div>
+    </div>
+
+    <div *ngIf="!isLoading" class="file-list">
+      <table mat-table [dataSource]="files" class="file-table">
+        <!-- Name Column -->
+        <ng-container matColumnDef="name">
+          <th mat-header-cell *matHeaderCellDef>Name</th>
+          <td mat-cell *matCellDef="let file" (click)="file.type === 'folder' ? openFolder(file) : selectFile(file)">
+            <div class="file-name-cell">
+              <fa-icon [icon]="file.type === 'folder' ? faFolderOpen : faFile"></fa-icon>
+              <span>{{ file.name }}</span>
+            </div>
+          </td>
+        </ng-container>
+
+        <!-- Type Column -->
+        <ng-container matColumnDef="type">
+          <th mat-header-cell *matHeaderCellDef>Type</th>
+          <td mat-cell *matCellDef="let file">
+            {{ file.type === 'folder' ? 'Folder' : (file.contentType || 'File') }}
+          </td>
+        </ng-container>
+
+        <!-- Actions Column -->
+        <ng-container matColumnDef="actions">
+          <th mat-header-cell *matHeaderCellDef>Actions</th>
+          <td mat-cell *matCellDef="let file">
+            <button 
+              *ngIf="file.type === 'folder'"
+              mat-icon-button 
+              color="primary"
+              (click)="openFolder(file)"
+              matTooltip="Open folder">
+              <mat-icon>folder_open</mat-icon>
+            </button>
+            <button 
+              *ngIf="file.type === 'file'"
+              mat-icon-button 
+              color="primary"
+              (click)="selectFile(file)"
+              [disabled]="data.uploadMode"
+              matTooltip="Select file">
+              <mat-icon>check_circle</mat-icon>
+            </button>
+          </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr 
+          mat-row 
+          *matRowDef="let file; columns: displayedColumns;"
+          [class.selected-row]="selectedFile?.name === file.name"
+          (click)="file.type === 'folder' ? openFolder(file) : null"></tr>
+      </table>
+
+      <div *ngIf="files.length === 0" class="empty-directory">
+        <p>This directory is empty.</p>
+        <button 
+          mat-stroked-button 
+          color="primary" 
+          (click)="triggerFileUpload()">
+          <mat-icon>upload_file</mat-icon>
+          Upload Private Key File Here
+        </button>
+      </div>
+    </div>
+
+    <div *ngIf="data.uploadMode" class="upload-section">
+      <h3>Upload "{{ data.fileToUpload?.name }}" to this location?</h3>
+      <button 
+        mat-raised-button 
+        color="primary" 
+        (click)="uploadFile()" 
+        [disabled]="uploadInProgress">
+        <fa-icon [icon]="faUpload"></fa-icon>
+        Upload Here
+      </button>
+    </div>
+  </div>
+</mat-dialog-content>
+
+<div mat-dialog-actions align="end">
+  <button mat-button (click)="cancel()">Cancel</button>
+  <button 
+    mat-raised-button 
+    color="primary" 
+    [disabled]="!selectedFile || selectedFile.type === 'folder'" 
+    (click)="confirmSelection()">
+    Choose
+  </button>
+</div>