Merge pull request #429 from dreamfactorysoftware/DP-713

Adding a way to auto-populate table_name and field_name wildcards using values from DBs

Author: thekevinm

src/app/adf-api-docs/df-api-docs/df-api-docs.component.html

@@ -1,6 +1,7 @@
 <div
   class="api-doc-button-container"
-  [class]="(isDarkMode | async) ? 'dark-theme' : ''">
+  [class]="(isDarkMode | async) ? 'dark-theme' : ''"
+  style="display: flex; align-items: center; gap: 16px">
   <button class="cancel-btn" mat-raised-button (click)="goBackToList()">
     {{ 'goBack' | transloco }}
   </button>
@@ -80,6 +81,20 @@
     *ngIf="serviceName"
     [apiDocJson]="apiDocJson"
     [serviceName]="serviceName"></df-api-quickstart>
+
+  <div
+    *ngIf="apiDocJson?.info?.group === 'Database'"
+    style="margin: 16px 0 8px 0">
+    <mat-slide-toggle
+      [(ngModel)]="expandSchema"
+      (ngModelChange)="reloadApiDocs()">
+      Populate table/field names in API docs
+    </mat-slide-toggle>
+    <div style="font-size: 12px; color: #888; margin-left: 40px">
+      When enabled, the API documentation will include live table and field
+      names from your database. (May be slow for large databases)
+    </div>
+  </div>
 </div>
 
 <div #apiDocumentation class="swagger-ui"></div>

src/app/adf-api-docs/df-api-docs/df-api-docs.component.ts

@@ -45,11 +45,18 @@ import {
   distinctUntilChanged,
   catchError,
 } from 'rxjs/operators';
-import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import {
+  HttpClient,
+  HttpErrorResponse,
+  HttpBackend,
+  HttpHeaders,
+} from '@angular/common/http';
 import { BASE_URL } from 'src/app/shared/constants/urls';
 import { Subscription, of, forkJoin } from 'rxjs';
 import { DfApiQuickstartComponent } from '../df-api-quickstart/df-api-quickstart.component';
 import { ApiDocJson } from 'src/app/shared/types/files';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { FormsModule } from '@angular/forms';
 
 interface ServiceResponse {
   resource: Array<{
@@ -88,6 +95,8 @@ interface HealthCheckResult {
     MatExpansionModule,
     MatCardModule,
     DfApiQuickstartComponent,
+    MatSlideToggleModule,
+    FormsModule,
   ],
 })
 export class DfApiDocsComponent implements OnInit, AfterContentInit, OnDestroy {
@@ -103,6 +112,7 @@ export class DfApiDocsComponent implements OnInit, AfterContentInit, OnDestroy {
   apiDocJson: ApiDocJson;
   apiKeys: ApiKeyInfo[] = [];
   faCopy = faCopy;
+  expandSchema = false;
 
   private subscriptions: Subscription[] = [];
   healthStatus: 'loading' | 'healthy' | 'unhealthy' | 'warning' = 'loading';
@@ -136,6 +146,8 @@ export class DfApiDocsComponent implements OnInit, AfterContentInit, OnDestroy {
     ],
   };
 
+  private rawHttp: HttpClient;
+
   constructor(
     private activatedRoute: ActivatedRoute,
     private router: Router,
@@ -145,14 +157,17 @@ export class DfApiDocsComponent implements OnInit, AfterContentInit, OnDestroy {
     private clipboard: Clipboard,
     private snackBar: MatSnackBar,
     private currentServiceService: DfCurrentServiceService,
-    private http: HttpClient
-  ) {}
+    private http: HttpClient,
+    private httpBackend: HttpBackend
+  ) {
+    this.rawHttp = new HttpClient(httpBackend);
+  }
   isDarkMode = this.themeService.darkMode$;
   ngOnInit(): void {
     // Get the service name from the route
     this.serviceName = this.activatedRoute.snapshot.params['name'];
 
-    // First fetch the service ID by name
+    // First fetch the service ID by name (use normal http)
     if (this.serviceName) {
       this.subscriptions.push(
         this.http
@@ -322,6 +337,25 @@ export class DfApiDocsComponent implements OnInit, AfterContentInit, OnDestroy {
     this.showUnhealthyErrorDetails = !this.showUnhealthyErrorDetails;
   }
 
+  reloadApiDocs() {
+    if (!this.serviceName) return;
+    const params = this.expandSchema ? '?expand_schema=true' : '';
+    const headers = new HttpHeaders({
+      'X-DreamFactory-API-Key': environment.dfApiDocsApiKey,
+      'X-DreamFactory-Session-Token': this.userDataService.token || '',
+    });
+    this.rawHttp
+      .get<any>(`${BASE_URL}/api_docs/${this.serviceName}${params}`, {
+        headers,
+      })
+      .subscribe(data => {
+        if (data) {
+          this.apiDocJson = data;
+        }
+        this.ngAfterContentInit();
+      });
+  }
+
   private injectCustomContent(
     swaggerContainer: HTMLElement,
     infoContainer: HTMLElement | null,