Skip to content

Commit 0d7311d

Browse files
thekevinmthekevinm
authored
Merge pull request #430 from dreamfactorysoftware/DP-735
[DP-735] Refining "Step 4 Security Configuration" components for the DB Creation process
2 parents c646d99 + 9867bd0 commit 0d7311d

14 files changed

Lines changed: 1554 additions & 556 deletions

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
export const healthCheckEndpointsInfo: {
2+
[key: string]: { endpoint: string; title: string; description: string }[];
3+
} = {
4+
Database: [
5+
{
6+
endpoint: '/_schema',
7+
title: 'View Available Schemas',
8+
description:
9+
'This command fetches a list of schemas from your connected database',
10+
},
11+
{
12+
endpoint: '/_table',
13+
title: 'View Tables in Your Database',
14+
description: 'This command lists all tables in your database',
15+
},
16+
],
17+
File: [
18+
{
19+
endpoint: '/',
20+
title: 'View Available Folders',
21+
description:
22+
'This command fetches a list of folders from your connected file storage',
23+
},
24+
],
25+
};

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,18 @@
1616
<mat-form-field appearance="outline" class="api-keys-select">
1717
<mat-label>{{ 'apiDocs.apiKeys.label' | transloco }}</mat-label>
1818
<mat-select>
19+
<mat-option [value]="null">
20+
<div class="api-key-option">
21+
<div class="key-info">
22+
<span class="key-name"
23+
>None (Session token based authentication)</span
24+
>
25+
<span class="key-preview"
26+
>Uses session token to build the request</span
27+
>
28+
</div>
29+
</div>
30+
</mat-option>
1931
<mat-option *ngFor="let key of apiKeys" [value]="key.apiKey">
2032
<div class="api-key-option">
2133
<div class="key-info">
@@ -81,7 +93,6 @@
8193
*ngIf="serviceName"
8294
[apiDocJson]="apiDocJson"
8395
[serviceName]="serviceName"></df-api-quickstart>
84-
8596
<div
8697
*ngIf="apiDocJson?.info?.group === 'Database'"
8798
style="margin: 16px 0 8px 0">

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

Lines changed: 49 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ import { BASE_URL } from 'src/app/shared/constants/urls';
5555
import { Subscription, of, forkJoin } from 'rxjs';
5656
import { DfApiQuickstartComponent } from '../df-api-quickstart/df-api-quickstart.component';
5757
import { ApiDocJson } from 'src/app/shared/types/files';
58+
import { healthCheckEndpointsInfo } from '../constants/health-check-endpoints';
5859
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
5960
import { FormsModule } from '@angular/forms';
6061

@@ -84,6 +85,7 @@ interface HealthCheckResult {
8485
MatSelectModule,
8586
MatIconModule,
8687
TranslocoModule,
88+
FormsModule,
8789
AsyncPipe,
8890
NgIf,
8991
NgFor,
@@ -119,32 +121,6 @@ export class DfApiDocsComponent implements OnInit, AfterContentInit, OnDestroy {
119121
healthError: string | null = null;
120122
serviceName: string | null = null;
121123
showUnhealthyErrorDetails = false;
122-
// Mapping of service types to their corresponding endpoints, probably would be better to move to the back-end
123-
healthCheckEndpointsInfo: {
124-
[key: string]: { endpoint: string; title: string; description: string }[];
125-
} = {
126-
Database: [
127-
{
128-
endpoint: '/_schema',
129-
title: 'View Available Schemas',
130-
description:
131-
'This command fetches a list of schemas from your connected database',
132-
},
133-
{
134-
endpoint: '/_table',
135-
title: 'View Tables in Your Database',
136-
description: 'This command lists all tables in your database',
137-
},
138-
],
139-
File: [
140-
{
141-
endpoint: '/',
142-
title: 'View Available Folders',
143-
description:
144-
'This command fetches a list of folders from your connected file storage',
145-
},
146-
],
147-
};
148124

149125
private rawHttp: HttpClient;
150126

@@ -216,51 +192,8 @@ export class DfApiDocsComponent implements OnInit, AfterContentInit, OnDestroy {
216192
}
217193

218194
ngAfterContentInit(): void {
219-
const apiDocumentation = this.apiDocJson;
220195
this.checkApiHealth();
221-
222-
SwaggerUI({
223-
spec: apiDocumentation,
224-
domNode: this.apiDocElement?.nativeElement,
225-
requestInterceptor: (req: SwaggerUI.Request) => {
226-
req['headers'][SESSION_TOKEN_HEADER] = this.userDataService.token;
227-
req['headers'][API_KEY_HEADER] = environment.dfApiDocsApiKey;
228-
// Parse the request URL
229-
const url = new URL(req['url']);
230-
const params = new URLSearchParams(url.search);
231-
// Decode all parameters
232-
params.forEach((value, key) => {
233-
params.set(key, decodeURIComponent(value));
234-
});
235-
// Update the URL with decoded parameters
236-
url.search = params.toString();
237-
req['url'] = url.toString();
238-
return req;
239-
},
240-
showMutatedRequest: true,
241-
onComplete: () => {
242-
if (
243-
this.apiDocElement &&
244-
this.apiDocElement.nativeElement &&
245-
this.swaggerInjectedContentContainerRef &&
246-
this.swaggerInjectedContentContainerRef.nativeElement
247-
) {
248-
const swaggerContainer = this.apiDocElement.nativeElement;
249-
const customContentNode =
250-
this.swaggerInjectedContentContainerRef.nativeElement;
251-
252-
const infoContainer = swaggerContainer.querySelector(
253-
'.information-container .main'
254-
);
255-
256-
this.injectCustomContent(
257-
swaggerContainer,
258-
infoContainer,
259-
customContentNode
260-
);
261-
}
262-
},
263-
});
196+
this.generateSwaggerWithApiKey(this.apiDocJson);
264197
}
265198

266199
ngOnDestroy(): void {
@@ -270,7 +203,7 @@ export class DfApiDocsComponent implements OnInit, AfterContentInit, OnDestroy {
270203

271204
private checkApiHealth(): void {
272205
let endpointsInfoToValidate =
273-
this.healthCheckEndpointsInfo[this.apiDocJson.info.group];
206+
healthCheckEndpointsInfo[this.apiDocJson.info.group];
274207
if (this.serviceName && endpointsInfoToValidate) {
275208
// Perform health check
276209
this.performHealthCheck(endpointsInfoToValidate[0].endpoint);
@@ -337,6 +270,51 @@ export class DfApiDocsComponent implements OnInit, AfterContentInit, OnDestroy {
337270
this.showUnhealthyErrorDetails = !this.showUnhealthyErrorDetails;
338271
}
339272

273+
private generateSwaggerWithApiKey(apiDocumentation: ApiDocJson): void {
274+
SwaggerUI({
275+
spec: apiDocumentation,
276+
domNode: this.apiDocElement?.nativeElement,
277+
requestInterceptor: (req: SwaggerUI.Request) => {
278+
req['headers'][SESSION_TOKEN_HEADER] = this.userDataService.token;
279+
req['headers'][API_KEY_HEADER] = environment.dfApiDocsApiKey;
280+
// Parse the request URL
281+
const url = new URL(req['url']);
282+
const params = new URLSearchParams(url.search);
283+
// Decode all parameters
284+
params.forEach((value, key) => {
285+
params.set(key, decodeURIComponent(value));
286+
});
287+
// Update the URL with decoded parameters
288+
url.search = params.toString();
289+
req['url'] = url.toString();
290+
return req;
291+
},
292+
showMutatedRequest: true,
293+
onComplete: () => {
294+
if (
295+
this.apiDocElement &&
296+
this.apiDocElement.nativeElement &&
297+
this.swaggerInjectedContentContainerRef &&
298+
this.swaggerInjectedContentContainerRef.nativeElement
299+
) {
300+
const swaggerContainer = this.apiDocElement.nativeElement;
301+
const customContentNode =
302+
this.swaggerInjectedContentContainerRef.nativeElement;
303+
304+
const infoContainer = swaggerContainer.querySelector(
305+
'.information-container .main'
306+
);
307+
308+
this.injectCustomContent(
309+
swaggerContainer,
310+
infoContainer,
311+
customContentNode
312+
);
313+
}
314+
},
315+
});
316+
}
317+
340318
reloadApiDocs() {
341319
if (!this.serviceName) return;
342320
const params = this.expandSchema ? '?expand_schema=true' : '';

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,4 +52,8 @@ <h3 class="curl-command-title themed-text">
5252
</p>
5353
</ng-template>
5454
</mat-expansion-panel>
55+
56+
<!-- API Testing Section -->
57+
<df-api-tester [apiDocJson]="apiDocJson" [serviceName]="serviceName">
58+
</df-api-tester>
5559
</mat-accordion>

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,3 +60,7 @@ mat-expansion-panel-header {
6060
background-color: #f93e3e; // red
6161
}
6262
}
63+
64+
.themed-text {
65+
color: var(--df-primary-text-color);
66+
}

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

Lines changed: 6 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ import { SESSION_TOKEN_HEADER } from 'src/app/shared/constants/http-headers';
1515
import { ApiDocJson } from 'src/app/shared/types/files';
1616
import { MatDividerModule } from '@angular/material/divider';
1717
import { MatSnackBar } from '@angular/material/snack-bar';
18+
import { DfApiTesterComponent } from 'src/app/shared/components/df-api-tester/df-api-tester.component';
19+
import { healthCheckEndpointsInfo } from '../constants/health-check-endpoints';
1820

1921
interface CurlCommand {
2022
title: string;
@@ -24,32 +26,6 @@ interface CurlCommand {
2426
note: string;
2527
}
2628

27-
const healthCheckEndpointsInfo: {
28-
[key: string]: { endpoint: string; title: string; description: string }[];
29-
} = {
30-
Database: [
31-
{
32-
endpoint: '/_schema',
33-
title: 'View Available Schemas',
34-
description:
35-
'This command fetches a list of schemas from your connected database',
36-
},
37-
{
38-
endpoint: '/_table',
39-
title: 'View Tables in Your Database',
40-
description: 'This command lists all tables in your database',
41-
},
42-
],
43-
File: [
44-
{
45-
endpoint: '/',
46-
title: 'View Available Folders',
47-
description:
48-
'This command fetches a list of folders from your connected file storage',
49-
},
50-
],
51-
};
52-
5329
@Component({
5430
selector: 'df-api-quickstart',
5531
templateUrl: './df-api-quickstart.component.html',
@@ -65,6 +41,7 @@ const healthCheckEndpointsInfo: {
6541
FontAwesomeModule,
6642
MatDividerModule,
6743
MatButtonModule,
44+
DfApiTesterComponent,
6845
],
6946
})
7047
export class DfApiQuickstartComponent implements OnChanges {
@@ -115,7 +92,9 @@ export class DfApiQuickstartComponent implements OnChanges {
11592
description: endpointInfo.description,
11693
textForDisplay: commandForDisplay,
11794
textForCopy: commandForCopy,
118-
note: this.apiDocJson.paths[endpointInfo.endpoint]?.['get']?.summary,
95+
note:
96+
this.apiDocJson.paths[endpointInfo.endpoint]?.['get']?.summary ||
97+
'',
11998
});
12099
});
121100
}

0 commit comments

Comments
 (0)