refactor: get managed enpoint, improve wizard change snackbar service
MODIFY
src/app/components/marketplace-client-app/marketplace-client-app.component.html
src/app/components/marketplace-client-app/marketplace-client-app.component.html
<div class="container">
<form>
<mat-form-field *ngIf="organizations.length > 1" class="mr-20">
- <mat-label>{{'COMMON.ORGANIZATION' | translate}}</mat-label>
+ <mat-label>{{ "COMMON.ORGANIZATION" | translate }}</mat-label>
<mat-select [(ngModel)]="organizationId" name="orgSelect">
<mat-option *ngFor="let org of organizations" [value]="org.id">
{{ org.name }}
<table mat-table [dataSource]="dataSource" class="mat-elevation-z2 mt-20 mb-20">
<!-- Org Name Column - only displayed if user has more than 1 -->
<ng-container matColumnDef="org-name">
- <th mat-header-cell *matHeaderCellDef>{{'COMMON.ORGANIZATION' | translate}}</th>
- <td mat-cell *matCellDef="let element"><span [class.primary]="clickedRows.has(element)">{{ element.organizationName }}</span></td>
+ <th mat-header-cell *matHeaderCellDef>
+ {{ "COMMON.ORGANIZATION" | translate }}
+ </th>
+ <td mat-cell *matCellDef="let element">
+ <span [class.primary]="clickedRows.has(element)">{{
+ element.organizationName
+ }}</span>
+ </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
- <th mat-header-cell *matHeaderCellDef>{{'COMMON.APPLICATION' | translate}}</th>
- <td mat-cell *matCellDef="let element"><span [class.primary]="clickedRows.has(element)">{{ element.name }}</span></td>
+ <th mat-header-cell *matHeaderCellDef>
+ {{ "COMMON.APPLICATION" | translate }}
+ </th>
+ <td mat-cell *matCellDef="let element">
+ <span [class.primary]="clickedRows.has(element)">{{ element.name }}</span>
+ </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
(click)="selectClient(row)"
></tr>
<tr class="mat-row" *matNoDataRow>
- <td class="mat-cell" colspan="2">{{'COMMON.NO_DATA_FOUND' | translate}}</td>
+ <td class="mat-cell" colspan="2">
+ {{ "COMMON.NO_DATA_FOUND" | translate }}
+ </td>
</tr>
</table>

MODIFY
src/app/components/marketplace-client-app/marketplace-client-app.component.ts
src/app/components/marketplace-client-app/marketplace-client-app.component.ts
@@ -5,6 +5,7 @@ import {
IClientSummary,
IOrganizationSummary,
} from '../../interfaces/ICommunication';
+import { SnackbarService } from '../../services/snackbar/snackbar.service';
@Component({
selector: 'app-marketplace-client-app',
@@ -21,7 +22,10 @@ export class MarketplaceClientAppComponent implements OnInit {
@Output() selectedClients = new EventEmitter<Set<IClientSummary>>();
- constructor(private backend: BackendService) {}
+ constructor(
+ private backend: BackendService,
+ private snackbar: SnackbarService
+ ) {}
ngOnInit(): void {
this.loadClients();
@@ -46,7 +50,7 @@ export class MarketplaceClientAppComponent implements OnInit {
: this.organizations[0].id;
this.backend.createClient(orgId, this.clientName).subscribe(
() => this.loadClients(),
- (error) => console.error(error)
+ (error) => this.snackbar.showErrorSnackBar(error.message, error)
);
}
@@ -62,7 +66,7 @@ export class MarketplaceClientAppComponent implements OnInit {
this.displayedColumns = ['org-name', 'name'];
}
},
- (error) => console.error(error)
+ (error) => this.snackbar.showErrorSnackBar(error.message, error)
);
this.backend.getEditableClients().subscribe(
@@ -73,7 +77,7 @@ export class MarketplaceClientAppComponent implements OnInit {
this.selectClient(clients[0]);
}
},
- (error) => console.error(error)
+ (error) => this.snackbar.showErrorSnackBar(error.message)
);
}

MODIFY
src/app/components/marketplace-signup-stepper/marketplace-signup-stepper.component.html
src/app/components/marketplace-signup-stepper/marketplace-signup-stepper.component.html
}}</mat-card-title>
</mat-card-header>
<mat-card-content class="mat-card-header-text">
- <app-my-apps-use-api></app-my-apps-use-api>
+ <app-my-apps-use-api [contract]="contract"></app-my-apps-use-api>
</mat-card-content>
<mat-divider></mat-divider>
<mat-card-actions class="right">
- <button mat-raised-button matStepperNext color="primary">
+ <button mat-raised-button color="primary" (click)="finish()">
{{ "COMMON.FINISH" | translate }}
</button>
</mat-card-actions>

MODIFY
src/app/components/marketplace-signup-stepper/marketplace-signup-stepper.component.ts
src/app/components/marketplace-signup-stepper/marketplace-signup-stepper.component.ts
@@ -24,6 +24,7 @@ export class MarketplaceSignupStepperComponent implements OnInit {
agreedTermsAndPrivacy: boolean | undefined;
termsEnabled: boolean;
infos: ISignUpInfo;
+ contract: IContract | undefined;
constructor(
private heroService: HeroService,
@@ -73,7 +74,7 @@ export class MarketplaceSignupStepperComponent implements OnInit {
);
}
- private checkNavigationAllowed() {
+ private checkNavigationAllowed(): void {
if (!this.infos) {
this.snackbar.showErrorSnackBar(
this.translator.instant('WIZARD.REDIRECT')
@@ -89,8 +90,7 @@ export class MarketplaceSignupStepperComponent implements OnInit {
apiOrgId: this.infos.organizationId,
apiId: this.infos.apiVersion.api.id,
apiVersion: this.infos.apiVersion.version,
- // planId: this.infos.plan.id,
- planId: 'Petstore',
+ planId: this.infos.plan.id,
};
this.backend
@@ -100,12 +100,14 @@ export class MarketplaceSignupStepperComponent implements OnInit {
this.snackbar.showPrimarySnackBar(
this.translator.instant('WIZARD.SUCCESS')
);
+ this.contract = contract;
stepper.next();
},
- (error) => {
- this.snackbar.showErrorSnackBar(error.message);
- console.error(error);
- }
+ (error) => this.snackbar.showErrorSnackBar(error.message, error)
);
}
+
+ finish(): void {
+ void this.router.navigate(['applications']);
+ }
}

MODIFY
src/app/components/my-apps-use-api/my-apps-use-api.component.html
src/app/components/my-apps-use-api/my-apps-use-api.component.html
<p>{{ mockText }}</p>
</div>
<div id="try-it-now-btn">
- <button mat-raised-button color="primary">
+ <button mat-raised-button color="primary" [disabled]="disableButtons">
{{ "APPS.VIEW_AND_TRY_NOW" | translate }}
</button>
</div>
<mat-form-field>
<input matInput readonly value="{{ apiKey }}" />
<button
- [cdkCopyToClipboard]="''"
+ [disabled]="disableButtons"
+ [cdkCopyToClipboard]="apiKey"
mat-icon-button
matSuffix
class="input-icon-btn"
<mat-form-field>
<input matInput readonly value="{{ endpoint }}" />
<button
- [cdkCopyToClipboard]="'test'"
+ [disabled]="disableButtons"
+ [cdkCopyToClipboard]="endpoint"
mat-icon-button
matSuffix
class="input-icon-btn"
</div>
<!-- Authentication -->
-<div class="grid">
+<div class="grid" *ngIf="hasOAuth">
<div>
<h4>{{ "APPS.AUTHENTICATION" | translate }}</h4>
<p>{{ mockText }}</p>
<mat-label>OAuth 2 Server URL</mat-label>
<input matInput readonly value="https://localhost:4200/authentication" />
<button
+ [disabled]="disableButtons"
[cdkCopyToClipboard]="''"
mat-icon-button
matSuffix
class="input-icon-btn"
>
- <mat-icon class="input-icon-btn" color="primary">content_copy</mat-icon>
+ <mat-icon class="input-icon-btn" color="primary" [class.disabled]=""
+ >content_copy</mat-icon
+ >
</button>
</mat-form-field>
<mat-form-field>
<mat-label>OAuth 2 Client Secret</mat-label>
<input matInput readonly value="fer87)/9&9gdea" />
<button
+ [disabled]="disableButtons"
[cdkCopyToClipboard]="''"
mat-icon-button
matSuffix

MODIFY
src/app/components/my-apps-use-api/my-apps-use-api.component.ts
src/app/components/my-apps-use-api/my-apps-use-api.component.ts
-import { Component, Input, OnInit } from '@angular/core';
-import { IContract } from '../../interfaces/ICommunication';
+import { Component, Input, OnChanges, OnInit } from '@angular/core';
+import {
+ IApiVersionEndpointSummary,
+ IContract,
+} from '../../interfaces/ICommunication';
+import { BackendService } from '../../services/backend/backend.service';
+import { SnackbarService } from '../../services/snackbar/snackbar.service';
@Component({
selector: 'app-my-apps-use-api',
templateUrl: './my-apps-use-api.component.html',
styleUrls: ['./my-apps-use-api.component.scss'],
})
-export class MyAppsUseApiComponent implements OnInit {
+export class MyAppsUseApiComponent implements OnInit, OnChanges {
@Input() contract?: IContract;
mockText =
'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et';
@@ -17,14 +22,22 @@ export class MyAppsUseApiComponent implements OnInit {
oAuthClientSecret = '';
previewText = {
- apiKey: 'c9ec8c4b-c735-4b5a-9fe3-795f559c588b',
- endpoint: 'http://example.com/ex/testOrg/test123/clientThing/1.0',
+ apiKey: 'You will be provided with an API-Key after sign-up',
+ endpoint: 'You will be provided with an endpoint after sign-up',
oAuthServerUrl: 'http://example.org/auth/realms/example/foo',
- oAuthClientSecret: '73b985d1-98b8-4d80-a89d-9dbee3b21a17'
- }
+ oAuthClientSecret: '73b985d1-98b8-4d80-a89d-9dbee3b21a17',
+ };
+ disableButtons = false;
+ hasOAuth = false;
+ constructor(
+ private backend: BackendService,
+ private snackbar: SnackbarService
+ ) {}
- constructor() {}
+ ngOnChanges(): void {
+ this.initProperties();
+ }
ngOnInit(): void {
this.initProperties();
@@ -32,9 +45,22 @@ export class MyAppsUseApiComponent implements OnInit {
private initProperties() {
if (this.contract) {
+ this.disableButtons = false;
this.apiKey = this.contract.client.apikey;
- this.endpoint = this.contract.api.endpoint;
+ this.backend
+ .getManagedApiEndpoint(
+ this.contract.api.api.organization.id,
+ this.contract.api.api.id,
+ this.contract.api.version
+ )
+ .subscribe(
+ (endpoint: IApiVersionEndpointSummary) => {
+ this.endpoint = endpoint.managedEndpoint;
+ },
+ (error) => this.snackbar.showErrorSnackBar(error.message, error)
+ );
} else {
+ this.disableButtons = true;
this.apiKey = this.previewText.apiKey;
this.endpoint = this.previewText.endpoint;
this.oAuthServerUrl = this.previewText.oAuthServerUrl;

MODIFY
src/app/services/backend/backend.service.ts
src/app/services/backend/backend.service.ts
@@ -6,6 +6,7 @@ import { KeycloakService } from 'keycloak-angular';
import {
IApi,
IApiVersion,
+ IApiVersionEndpointSummary,
IApiVersionSummary,
IClient,
IClientSummary,
@@ -249,6 +250,17 @@ export class BackendService {
>;
}
+ public getManagedApiEndpoint(
+ organizationId: string,
+ apiId: string,
+ versionName: string
+ ): Observable<IApiVersionEndpointSummary> {
+ const path = `/organizations/${organizationId}/apis/${apiId}/versions/${versionName}/endpoint`;
+ return this.http.get(
+ this.generateUrl(path)
+ ) as Observable<IApiVersionEndpointSummary>;
+ }
+
/********* Helper **********/
private generateUrl(path: string) {
return `${this.endpoint}/${path}`;

MODIFY
src/app/services/snackbar/snackbar.service.ts
src/app/services/snackbar/snackbar.service.ts
@@ -13,7 +13,8 @@ export class SnackbarService {
this.showCustomSnackBar(msg, action);
}
- public showErrorSnackBar(msg: string, action?: string) {
+ public showErrorSnackBar(msg: string, error?: any, action?: string) {
+ console.error(error);
this.showCustomSnackBar(msg, action, {
duration: this.snackbarDuration,
panelClass: ['warn-bg'],

refactor: get managed enpoint, improve wizard change snackbar service