[DP-735] Refining "Step 4 Security Configuration" components for the DB Creation process

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

@@ -16,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">
@@ -81,7 +93,6 @@
     *ngIf="serviceName"
     [apiDocJson]="apiDocJson"
     [serviceName]="serviceName"></df-api-quickstart>
-
   <div
     *ngIf="apiDocJson?.info?.group === 'Database'"
     style="margin: 16px 0 8px 0">

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

@@ -55,6 +55,7 @@ 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';
 
@@ -84,6 +85,7 @@ interface HealthCheckResult {
     MatSelectModule,
     MatIconModule,
     TranslocoModule,
+    FormsModule,
     AsyncPipe,
     NgIf,
     NgFor,
@@ -119,32 +121,6 @@ export class DfApiDocsComponent implements OnInit, AfterContentInit, OnDestroy {
   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;
 
@@ -216,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 {
@@ -270,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);
@@ -337,6 +270,51 @@ 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' : '';

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 ||
+            '',
         });
       });
     }