feat: show the public endpoint if the api is public
If the API is public we can directly show the public endpoint in the detailed view of an API.
MODIFY
src/app/app.module.ts
src/app/app.module.ts
@@ -65,6 +65,7 @@ import { MatBadgeModule } from '@angular/material/badge';
import { NotificationsComponent } from './components/notifications/notifications.component';
import { ApiMarkdownDescriptionComponent } from './components/api-markdown-description/api-markdown-description.component';
import { ApiStatusTagComponent } from './components/api-status-tag/api-status-tag.component';
+import { ApiPublicEndpointComponent } from './components/api-public-endpoint/api-public-endpoint.component';
export function initializeApp(
configService: ConfigService,
@@ -98,38 +99,39 @@ export function createTranslateLoader(http: HttpClient): TranslateHttpLoader {
@NgModule({
declarations: [
+ AccountComponent,
+ ApiCardComponent,
+ ApiCardListComponent,
+ ApiDocumentationButtonsComponent,
+ ApiMarkdownDescriptionComponent,
+ ApiPublicEndpointComponent,
+ ApiStatusTagComponent,
AppComponent,
- HeaderComponent,
FooterComponent,
- ApiCardComponent,
- MarketplaceApiDetailsComponent,
- MarketplaceApiTermsComponent,
- MarketplaceSignupStepperComponent,
+ GaugeChartComponent,
+ HeaderComponent,
HomeComponent,
+ ImgOrIconSelectorComponent,
MarketplaceApiDescriptionComponent,
+ MarketplaceApiDetailsComponent,
+ MarketplaceApiTermsComponent,
+ MarketplaceClientAppComponent,
MarketplaceComponent,
- NavigationComponent,
- ApiCardListComponent,
- PlanCardListComponent,
- AccountComponent,
+ MarketplaceSignupStepperComponent,
MyAppsComponent,
- MarketplaceClientAppComponent,
+ MyAppsManageApiComponent,
+ MyAppsPoliciesComponent,
MyAppsSummaryComponent,
MyAppsUseApiComponent,
- MyAppsPoliciesComponent,
- MyAppsManageApiComponent,
+ NavigationComponent,
+ NoDataComponent,
+ NotificationsComponent,
+ PlanCardListComponent,
PolicyCardComponent,
PolicyCardLightComponent,
- GaugeChartComponent,
- TocComponent,
- NoDataComponent,
- UnregisterClientComponent,
- ImgOrIconSelectorComponent,
- ApiDocumentationButtonsComponent,
RateQuotaPolicyShortLimitComponent,
- NotificationsComponent,
- ApiMarkdownDescriptionComponent,
- ApiStatusTagComponent
+ TocComponent,
+ UnregisterClientComponent
],
imports: [
KeycloakAngularModule,

ADD
src/app/components/api-public-endpoint/api-public-endpoint.component.html
+<!--
+ ~ Copyright 2022 Scheer PAS Schweiz AG
+ ~
+ ~ Licensed under the Apache License, Version 2.0 (the "License");
+ ~ you may not use this file except in compliance with the License.
+ ~ You may obtain a copy of the License at
+ ~
+ ~ http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing, software
+ ~ distributed under the License is distributed on an "AS IS" BASIS,
+ ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ ~ See the License for the specific language governing permissions and
+ ~ imitations under the License.
+ -->
+
+<!-- API Public Endpoint -->
+<div>
+ <div>
+ <h2 class="primary mt-rem-3">
+ {{ 'API_DETAILS.PUBLIC_ENDPOINT' | translate }}
+ </h2>
+ <p [innerHTML]="'DESCRIPTIONS.API_ENDPOINT' | translate"></p>
+ </div>
+ <div>
+ <mat-form-field
+ *ngIf="publicEndpoint$ | async as publicEndpoint"
+ id="public-endpoint">
+ <input
+ id="api-endpoint-input"
+ matInput
+ readonly
+ value="{{ publicEndpoint.managedEndpoint }}"
+ [placeholder]="'API_DETAILS.PUBLIC_ENDPOINT' | translate" />
+ <button
+ id="api-endpoint-copy-btn"
+ [disabled]="false"
+ [cdkCopyToClipboard]="publicEndpoint.managedEndpoint"
+ mat-icon-button
+ matSuffix
+ class="input-icon-btn">
+ <mat-icon id="api-endpoint-copy-icon" color="primary"
+ >content_copy</mat-icon
+ >
+ </button>
+ </mat-form-field>
+ </div>
+</div>

ADD
src/app/components/api-public-endpoint/api-public-endpoint.component.scss
+/*!
+ * Copyright 2022 Scheer PAS Schweiz AG
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * imitations under the License.
+ */
+
+#public-endpoint {
+ width: 50%;
+}

ADD
src/app/components/api-public-endpoint/api-public-endpoint.component.spec.ts
+/*
+ * Copyright 2022 Scheer PAS Schweiz AG
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * imitations under the License.
+ */
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ApiPublicEndpointComponent } from './api-public-endpoint.component';
+
+describe('ApiPublicEndpointComponent', () => {
+ let component: ApiPublicEndpointComponent;
+ let fixture: ComponentFixture<ApiPublicEndpointComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ApiPublicEndpointComponent]
+ }).compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ApiPublicEndpointComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});

ADD
src/app/components/api-public-endpoint/api-public-endpoint.component.ts
+/*
+ * Copyright 2022 Scheer PAS Schweiz AG
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * imitations under the License.
+ */
+
+import { Component, Input, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { IApiVersionEndpointSummary } from '../../interfaces/ICommunication';
+import { IApiVersionExt } from '../../interfaces/IApiVersionExt';
+import { ApiService } from '../../services/api/api.service';
+
+@Component({
+ selector: 'app-api-public-endpoint',
+ templateUrl: './api-public-endpoint.component.html',
+ styleUrls: ['./api-public-endpoint.component.scss']
+})
+export class ApiPublicEndpointComponent implements OnInit {
+ @Input() publicApiVersion: IApiVersionExt | undefined;
+
+ publicEndpoint$: Observable<IApiVersionEndpointSummary> | undefined;
+
+ constructor(private apiService: ApiService) {}
+
+ ngOnInit(): void {
+ if (this.publicApiVersion) {
+ this.publicEndpoint$ = this.apiService.getManagedApiEndpoint(
+ this.publicApiVersion.api.organization.id,
+ this.publicApiVersion.api.id,
+ this.publicApiVersion.version
+ );
+ }
+ }
+}

MODIFY
src/app/components/marketplace-api-description/marketplace-api-description.component.html
src/app/components/marketplace-api-description/marketplace-api-description.component.html
<!--
- ~ Copyright 2021 Scheer PAS Schweiz AG
+ ~ Copyright 2022 Scheer PAS Schweiz AG
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
<mat-expansion-panel [expanded]="isLatest" xmlns="http://www.w3.org/1999/html">
<mat-expansion-panel-header>
- <mat-panel-title
- style="
- display: grid;
- grid-template-columns: auto 1fr auto;
- align-items: center;
- ">
+ <mat-panel-title>
<app-api-status-tag
- style="padding-top: 0.4rem"
[apiStatus]="api.status"
[primary]="true"></app-api-status-tag>
- <div id="version-info" style="margin-left: 0.5rem">
+ <div id="version-info">
{{ 'COMMON.VERSION' | translate }} {{ api.version }}
{{ 'COMMON.OF' | translate }} {{ api.api.name }}
<span *ngIf="isLatest" id="latest-tag" class="primary">[latest]</span>
<!-- Plans -->
<app-plan-card-list [apiVersion]="api"></app-plan-card-list>
+
+ <!-- Public Endpoint -->
+ <app-api-public-endpoint
+ *ngIf="api.publicAPI"
+ [publicApiVersion]="api"></app-api-public-endpoint>
</mat-expansion-panel>

MODIFY
src/app/components/marketplace-api-description/marketplace-api-description.component.scss
src/app/components/marketplace-api-description/marketplace-api-description.component.scss
* imitations under the License.
*/
-.box {
- max-height: 50vh;
- padding-left: 1%;
- padding-right: 1%;
-}
-
mat-panel-title {
font-size: 1.3em;
justify-content: space-between;
+ display: grid;
+ grid-template-columns: auto 1fr auto;
+ align-items: center;
#latest-tag {
margin-left: 0.3rem;
@@ -37,26 +34,12 @@ mat-panel-title {
grid-column-gap: 16px;
}
-mat-grid-list {
- margin-bottom: 2em;
-}
-
-#long-description-tile {
- border: 1px solid rgb(0 0 0 / 20%);
- background: rgb(0 0 0 / 2%);
-}
-
#key-features {
margin-left: 2em;
}
-#docs-button {
- border: 1px solid rgb(0 0 0 / 20%);
- float: right;
-}
-
-#plans-header {
- margin: unset;
+#version-info {
+ margin-left: 0.5rem;
}
.mat-expansion-panel-header.mat-expanded {
@@ -80,3 +63,7 @@ mat-grid-list {
.md-only {
width: unset;
}
+
+app-api-status-tag {
+ padding-top: 0.4rem;
+}

MODIFY
src/assets/i18n/en.json
src/assets/i18n/en.json
},
"DESCRIPTIONS": {
"TRY_IT_OUT": "Displays the Open API definition (Swagger) and allows for making test calls if the API is available.",
- "API_KEY": "When an API contract is created, the system generates a unique API Key. <br>This API Key is unique per client and the same for all contracts of this client.<br> All requests made to the API must include this API Key.",
- "API_ENDPOINT": "One important aspect of all APIs that are managed by the API Gateway is the security that the API Gateway provides. <br>The API can be accessed with this URL."
+ "API_KEY": "When an API contract is created, the system generates a unique API Key. <br>This API Key is unique per client and the same for all contracts of this client.<br> All requests made to the API must include this API Key:",
+ "API_ENDPOINT": "Use this URL to access the API:"
},
"APPROVAL": {
"API": {
"KEY_FEATURES": "Key Features",
"EXTENDED_DESCRIPTION": "Extended Description",
"NO_EXT_DESCRIPTION": "No further description has been stored for this API",
- "SIGN_UP": "Sign Up"
+ "SIGN_UP": "Sign Up",
+ "PUBLIC_ENDPOINT": "Public Endpoint"
},
"TERMS": {
"PREFIX": "I accept the ",

feat: show the public endpoint if the api is public

If the API is public we can directly show the public endpoint in the detailed view of an API.