Release 7.2 preparation

src/app/adf-api-docs/constants/health-check-endpoints.ts

@@ -0,0 +1,25 @@
+export const healthCheckEndpointsInfo: {
+  [key: string]: { endpoint: string; title: string; description: string }[];
+} = {
+  Database: [
+    {
+      endpoint: '/_schema',
+      title: 'View Available Schemas',
+      description:
+        'This command fetches a list of schemas from your connected database',
+    },
+    {
+      endpoint: '/_table',
+      title: 'View Tables in Your Database',
+      description: 'This command lists all tables in your database',
+    },
+  ],
+  File: [
+    {
+      endpoint: '/',
+      title: 'View Available Folders',
+      description:
+        'This command fetches a list of folders from your connected file storage',
+    },
+  ],
+};

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>
@@ -15,6 +16,18 @@
   <mat-form-field appearance="outline" class="api-keys-select">
     <mat-label>{{ 'apiDocs.apiKeys.label' | transloco }}</mat-label>
     <mat-select>
+      <mat-option [value]="null">
+        <div class="api-key-option">
+          <div class="key-info">
+            <span class="key-name"
+              >None (Session token based authentication)</span
+            >
+            <span class="key-preview"
+              >Uses session token to build the request</span
+            >
+          </div>
+        </div>
+      </mat-option>
       <mat-option *ngFor="let key of apiKeys" [value]="key.apiKey">
         <div class="api-key-option">
           <div class="key-info">
@@ -80,6 +93,19 @@
     *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,19 @@ 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 { healthCheckEndpointsInfo } from '../constants/health-check-endpoints';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { FormsModule } from '@angular/forms';
 
 interface ServiceResponse {
   resource: Array<{
@@ -77,6 +85,7 @@ interface HealthCheckResult {
     MatSelectModule,
     MatIconModule,
     TranslocoModule,
+    FormsModule,
     AsyncPipe,
     NgIf,
     NgFor,
@@ -88,6 +97,8 @@ interface HealthCheckResult {
     MatExpansionModule,
     MatCardModule,
     DfApiQuickstartComponent,
+    MatSlideToggleModule,
+    FormsModule,
   ],
 })
 export class DfApiDocsComponent implements OnInit, AfterContentInit, OnDestroy {
@@ -103,38 +114,15 @@ export class DfApiDocsComponent implements OnInit, AfterContentInit, OnDestroy {
   apiDocJson: ApiDocJson;
   apiKeys: ApiKeyInfo[] = [];
   faCopy = faCopy;
+  expandSchema = false;
 
   private subscriptions: Subscription[] = [];
   healthStatus: 'loading' | 'healthy' | 'unhealthy' | 'warning' = 'loading';
   healthError: string | null = null;
   serviceName: string | null = null;
   showUnhealthyErrorDetails = false;
-  // Mapping of service types to their corresponding endpoints, probably would be better to move to the back-end
-  healthCheckEndpointsInfo: {
-    [key: string]: { endpoint: string; title: string; description: string }[];
-  } = {
-    Database: [
-      {
-        endpoint: '/_schema',
-        title: 'View Available Schemas',
-        description:
-          'This command fetches a list of schemas from your connected database',
-      },
-      {
-        endpoint: '/_table',
-        title: 'View Tables in Your Database',
-        description: 'This command lists all tables in your database',
-      },
-    ],
-    File: [
-      {
-        endpoint: '/',
-        title: 'View Available Folders',
-        description:
-          'This command fetches a list of folders from your connected file storage',
-      },
-    ],
-  };
+
+  private rawHttp: HttpClient;
 
   constructor(
     private activatedRoute: ActivatedRoute,
@@ -145,14 +133,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
@@ -201,51 +192,8 @@ export class DfApiDocsComponent implements OnInit, AfterContentInit, OnDestroy {
   }
 
   ngAfterContentInit(): void {
-    const apiDocumentation = this.apiDocJson;
     this.checkApiHealth();
-
-    SwaggerUI({
-      spec: apiDocumentation,
-      domNode: this.apiDocElement?.nativeElement,
-      requestInterceptor: (req: SwaggerUI.Request) => {
-        req['headers'][SESSION_TOKEN_HEADER] = this.userDataService.token;
-        req['headers'][API_KEY_HEADER] = environment.dfApiDocsApiKey;
-        // Parse the request URL
-        const url = new URL(req['url']);
-        const params = new URLSearchParams(url.search);
-        // Decode all parameters
-        params.forEach((value, key) => {
-          params.set(key, decodeURIComponent(value));
-        });
-        // Update the URL with decoded parameters
-        url.search = params.toString();
-        req['url'] = url.toString();
-        return req;
-      },
-      showMutatedRequest: true,
-      onComplete: () => {
-        if (
-          this.apiDocElement &&
-          this.apiDocElement.nativeElement &&
-          this.swaggerInjectedContentContainerRef &&
-          this.swaggerInjectedContentContainerRef.nativeElement
-        ) {
-          const swaggerContainer = this.apiDocElement.nativeElement;
-          const customContentNode =
-            this.swaggerInjectedContentContainerRef.nativeElement;
-
-          const infoContainer = swaggerContainer.querySelector(
-            '.information-container .main'
-          );
-
-          this.injectCustomContent(
-            swaggerContainer,
-            infoContainer,
-            customContentNode
-          );
-        }
-      },
-    });
+    this.generateSwaggerWithApiKey(this.apiDocJson);
   }
 
   ngOnDestroy(): void {
@@ -255,7 +203,7 @@ export class DfApiDocsComponent implements OnInit, AfterContentInit, OnDestroy {
 
   private checkApiHealth(): void {
     let endpointsInfoToValidate =
-      this.healthCheckEndpointsInfo[this.apiDocJson.info.group];
+      healthCheckEndpointsInfo[this.apiDocJson.info.group];
     if (this.serviceName && endpointsInfoToValidate) {
       // Perform health check
       this.performHealthCheck(endpointsInfoToValidate[0].endpoint);
@@ -322,6 +270,70 @@ export class DfApiDocsComponent implements OnInit, AfterContentInit, OnDestroy {
     this.showUnhealthyErrorDetails = !this.showUnhealthyErrorDetails;
   }
 
+  private generateSwaggerWithApiKey(apiDocumentation: ApiDocJson): void {
+    SwaggerUI({
+      spec: apiDocumentation,
+      domNode: this.apiDocElement?.nativeElement,
+      requestInterceptor: (req: SwaggerUI.Request) => {
+        req['headers'][SESSION_TOKEN_HEADER] = this.userDataService.token;
+        req['headers'][API_KEY_HEADER] = environment.dfApiDocsApiKey;
+        // Parse the request URL
+        const url = new URL(req['url']);
+        const params = new URLSearchParams(url.search);
+        // Decode all parameters
+        params.forEach((value, key) => {
+          params.set(key, decodeURIComponent(value));
+        });
+        // Update the URL with decoded parameters
+        url.search = params.toString();
+        req['url'] = url.toString();
+        return req;
+      },
+      showMutatedRequest: true,
+      onComplete: () => {
+        if (
+          this.apiDocElement &&
+          this.apiDocElement.nativeElement &&
+          this.swaggerInjectedContentContainerRef &&
+          this.swaggerInjectedContentContainerRef.nativeElement
+        ) {
+          const swaggerContainer = this.apiDocElement.nativeElement;
+          const customContentNode =
+            this.swaggerInjectedContentContainerRef.nativeElement;
+
+          const infoContainer = swaggerContainer.querySelector(
+            '.information-container .main'
+          );
+
+          this.injectCustomContent(
+            swaggerContainer,
+            infoContainer,
+            customContentNode
+          );
+        }
+      },
+    });
+  }
+
+  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,

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

@@ -52,4 +52,8 @@ <h3 class="curl-command-title themed-text">
       </p>
     </ng-template>
   </mat-expansion-panel>
+
+  <!-- API Testing Section -->
+  <df-api-tester [apiDocJson]="apiDocJson" [serviceName]="serviceName">
+  </df-api-tester>
 </mat-accordion>

src/app/adf-api-docs/df-api-quickstart/df-api-quickstart.component.scss

@@ -60,3 +60,7 @@ mat-expansion-panel-header {
     background-color: #f93e3e; // red
   }
 }
+
+.themed-text {
+  color: var(--df-primary-text-color);
+}

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

@@ -15,6 +15,8 @@ import { SESSION_TOKEN_HEADER } from 'src/app/shared/constants/http-headers';
 import { ApiDocJson } from 'src/app/shared/types/files';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatSnackBar } from '@angular/material/snack-bar';
+import { DfApiTesterComponent } from 'src/app/shared/components/df-api-tester/df-api-tester.component';
+import { healthCheckEndpointsInfo } from '../constants/health-check-endpoints';
 
 interface CurlCommand {
   title: string;
@@ -24,32 +26,6 @@ interface CurlCommand {
   note: string;
 }
 
-const healthCheckEndpointsInfo: {
-  [key: string]: { endpoint: string; title: string; description: string }[];
-} = {
-  Database: [
-    {
-      endpoint: '/_schema',
-      title: 'View Available Schemas',
-      description:
-        'This command fetches a list of schemas from your connected database',
-    },
-    {
-      endpoint: '/_table',
-      title: 'View Tables in Your Database',
-      description: 'This command lists all tables in your database',
-    },
-  ],
-  File: [
-    {
-      endpoint: '/',
-      title: 'View Available Folders',
-      description:
-        'This command fetches a list of folders from your connected file storage',
-    },
-  ],
-};
-
 @Component({
   selector: 'df-api-quickstart',
   templateUrl: './df-api-quickstart.component.html',
@@ -65,6 +41,7 @@ const healthCheckEndpointsInfo: {
     FontAwesomeModule,
     MatDividerModule,
     MatButtonModule,
+    DfApiTesterComponent,
   ],
 })
 export class DfApiQuickstartComponent implements OnChanges {
@@ -115,7 +92,9 @@ export class DfApiQuickstartComponent implements OnChanges {
           description: endpointInfo.description,
           textForDisplay: commandForDisplay,
           textForCopy: commandForCopy,
-          note: this.apiDocJson.paths[endpointInfo.endpoint]?.['get']?.summary,
+          note:
+            this.apiDocJson.paths[endpointInfo.endpoint]?.['get']?.summary ||
+            '',
         });
       });
     }