feat(ui): add mat-card around swagger
We want to have the same look and feel through the whole application.
Therefore we have added a mat-card around the swagger ui and displayed all necessary information in the header instead of the hero image.
MODIFY
src/app/components/api-documentation-buttons/api-documentation-buttons.component.html
src/app/components/api-documentation-buttons/api-documentation-buttons.component.html
[queryParams]="{
try: tryItOut,
publicAPI: publicApi,
- clientId: clientId
+ contractId: contractId
}"
target="{{ target }}">
<button id="api-docs-btn" mat-raised-button color="primary">

MODIFY
src/app/components/api-documentation-buttons/api-documentation-buttons.component.ts
src/app/components/api-documentation-buttons/api-documentation-buttons.component.ts
@@ -29,12 +29,12 @@ export class ApiDocumentationButtonsComponent implements OnInit {
@Input() apiVersion?: IApiVersion;
@Input() contract?: IContract;
- clientId: null | number = null;
tryItOut: null | boolean = null;
publicApi = false;
orgId = '';
apiId = '';
apiVersionNumber = '';
+ contractId: null | number = null;
constructor(private apiService: ApiService) {}
@@ -44,11 +44,11 @@ export class ApiDocumentationButtonsComponent implements OnInit {
this.orgId = this.contract.api.api.organization.id;
this.apiId = this.contract.api.api.id;
this.apiVersionNumber = this.contract.api.version;
- this.clientId = this.contract.id;
+ this.contractId = this.contract.id;
- localStorage.setItem(
- `APIMAN_DEVPORTAL-${this.orgId}-${this.apiId}-${this.apiVersionNumber}-${this.contract.id}`,
- this.contract.client.apikey
+ sessionStorage.setItem(
+ `APIMAN_DEVPORTAL-${this.contract.id}`,
+ JSON.stringify(this.contract)
);
}
if (this.apiVersion) {

MODIFY
src/app/components/my-apps/my-apps.component.html
src/app/components/my-apps/my-apps.component.html
</mat-form-field>
</div>
<ng-container *ngIf="contractsLoaded && ((clients$ | async) || []).length > 0">
- <div class="wrapper">
+ <div class="clients-wrapper">
<div id="contracts" class="first">
<ng-container *ngFor="let org of organizations$ | async">
<h1

MODIFY
src/app/components/my-apps/my-apps.component.scss
src/app/components/my-apps/my-apps.component.scss
margin-right: 2rem;
}
-.wrapper {
+.clients-wrapper {
display: flex;
align-items: flex-start;
column-gap: 1.4rem;

MODIFY
src/app/components/swagger/swagger.component.html
src/app/components/swagger/swagger.component.html
~ imitations under the License.
-->
+<mat-card id="swagger-ui-container">
+ <mat-card-title id="swagger-ui-title"
+ >{{ apiId }} ({{ apiVersion }})</mat-card-title
+ >
+ <ng-container *ngIf="contract">
+ <mat-card-subtitle id="swagger-ui-subtitle"
+ >{{ contract.client.client.name }} ({{ contract.client.version }}) -
+ {{ contract.plan.plan.name }} ({{
+ contract.plan.version
+ }})</mat-card-subtitle
+ >
+ </ng-container>
+ <hr />
<div id="swagger-editor"></div>
+</mat-card>

MODIFY
src/app/components/swagger/swagger.component.scss
src/app/components/swagger/swagger.component.scss
* See the License for the specific language governing permissions and
* imitations under the License.
*/
+
+#swagger-ui-container {
+ padding: 16px 0;
+}
+
+#swagger-ui-title {
+ padding: 0 20px;
+ font-size: 1.7rem;
+}
+
+#swagger-ui-subtitle {
+ padding: 0 20px;
+ font-size: 1.3rem;
+}

MODIFY
src/app/components/swagger/swagger.component.ts
src/app/components/swagger/swagger.component.ts
@@ -23,6 +23,7 @@ import SwaggerUI from 'swagger-ui';
import { KeycloakHelperService } from '../../services/keycloak-helper/keycloak-helper.service';
import { KeycloakService } from 'keycloak-angular';
import { IUrlPath } from '../../interfaces/IUrlPath';
+import { IContract } from '../../interfaces/ICommunication';
@Component({
selector: 'app-swagger',
@@ -34,6 +35,10 @@ export class SwaggerComponent implements OnInit {
endpoint = '';
isPublicApi = false;
isTryEnabled = false;
+ contract: IContract = {} as IContract;
+ apiId = '';
+ apiVersion = '';
+ apiKey = '';
constructor(
private route: ActivatedRoute,
@@ -50,15 +55,18 @@ export class SwaggerComponent implements OnInit {
* Load the swagger definition and display it with the swagger ui bundle library on component initialization
*/
async ngOnInit(): Promise<void> {
- const { organizationId, apiId, apiVersion, apiKey } = this.getRouteParams();
+ const { organizationId, apiId, apiVersion } = this.getRouteParams();
const urls: IUrlPath = {
urlPath: `${this.endpoint}/devportal/organizations/${organizationId}/apis/${apiId}/versions/${apiVersion}/definition`,
loggedInUrlPath: `${this.endpoint}/devportal/protected/organizations/${organizationId}/apis/${apiId}/versions/${apiVersion}/definition`
};
+ this.apiId = apiId;
+ this.apiVersion = apiVersion;
+
this.heroService.setUpHero({
title: this.translator.instant('COMMON.API_DOCS') as string,
- subtitle: `${apiId} - ${apiVersion}`
+ subtitle: ``
});
let definitionUrl = urls.urlPath;
@@ -76,14 +84,14 @@ export class SwaggerComponent implements OnInit {
supportedSubmitMethods: this.getSupportedMethods(),
requestInterceptor: (request: SwaggerUI.Request) => {
this.setAuthorizationHeader(request);
- this.setApiKeyHeader(apiKey, request);
+ this.setApiKeyHeader(this.apiKey, request);
return request;
},
responseInterceptor: (response: SwaggerUI.Response) => {
return response;
},
onComplete: () => {
- swaggerUI.preauthorizeApiKey(this.apiKeyHeader, apiKey);
+ swaggerUI.preauthorizeApiKey(this.apiKeyHeader, this.apiKey);
}
};
@@ -123,10 +131,16 @@ export class SwaggerComponent implements OnInit {
const organizationId = this.route.snapshot.paramMap.get('orgId') ?? '';
const apiId: string = this.route.snapshot.paramMap.get('apiId') ?? '';
const apiVersion = this.route.snapshot.paramMap.get('apiVersion') ?? '';
- const clientId = this.route.snapshot.queryParamMap.get('clientId') ?? '';
- const apiKey = localStorage.getItem(
- `APIMAN_DEVPORTAL-${organizationId}-${apiId}-${apiVersion}-${clientId}`
- );
+ const contractId =
+ this.route.snapshot.queryParamMap.get('contractId') ?? '';
+
+ this.contract = JSON.parse(
+ sessionStorage.getItem(`APIMAN_DEVPORTAL-${contractId}`) as string
+ ) as IContract;
+
+ if (contractId && this.contract.id) {
+ this.apiKey = this.contract.client.apikey;
+ }
this.isPublicApi = JSON.parse(
this.route.snapshot.queryParamMap.get('publicApi') ?? 'false'
@@ -136,7 +150,7 @@ export class SwaggerComponent implements OnInit {
this.route.snapshot.queryParamMap.get('try') ?? 'false'
) as boolean;
- return { organizationId, apiId, apiVersion, apiKey };
+ return { organizationId, apiId, apiVersion };
}
private getSupportedMethods(): SwaggerUI.SupportedHTTPMethods[] {

MODIFY
src/app/components/swagger/swagger.module.ts
src/app/components/swagger/swagger.module.ts
@@ -19,9 +19,10 @@ import { CommonModule } from '@angular/common';
import { SwaggerRoutingModule } from './swagger-routing.module';
import { SwaggerComponent } from './swagger.component';
+import { MaterialModule } from '../../material.module';
@NgModule({
declarations: [SwaggerComponent],
- imports: [CommonModule, SwaggerRoutingModule]
+ imports: [CommonModule, SwaggerRoutingModule, MaterialModule]
})
export class SwaggerModule {}

MODIFY
src/styles.scss
src/styles.scss
@@ -317,3 +317,13 @@ a {
width: initial;
overflow: hidden;
}
+
+// Overwrite some swagger css properties
+// We have to use the global css file and the !important property, otherwise it won't work
+.wrapper {
+ max-width: none !important;
+}
+
+.info {
+ margin: 0 !important;
+}

feat(ui): add mat-card around swagger

We want to have the same look and feel through the whole application.
Therefore we have added a mat-card around the swagger ui and displayed all necessary information in the header instead of the hero image.