feat(ui): add markdown descriptions to 'My Clients'
MODIFY
src/app/app.module.ts
src/app/app.module.ts
@@ -63,6 +63,7 @@ import { ApiDocumentationButtonsComponent } from './components/api-documentation
import { RateQuotaPolicyShortLimitComponent } from './components/policies/rate-quota-policy-short-limit/rate-quota-policy-short-limit.component';
import { MatBadgeModule } from '@angular/material/badge';
import { NotificationsComponent } from './components/notifications/notifications.component';
+import { ApiMarkdownDescriptionComponent } from './components/api-markdown-description/api-markdown-description.component';
export function initializeApp(
configService: ConfigService,
@@ -125,7 +126,8 @@ export function createTranslateLoader(http: HttpClient): TranslateHttpLoader {
ImgOrIconSelectorComponent,
ApiDocumentationButtonsComponent,
RateQuotaPolicyShortLimitComponent,
- NotificationsComponent
+ NotificationsComponent,
+ ApiMarkdownDescriptionComponent
],
imports: [
KeycloakAngularModule,

ADD
src/app/components/api-markdown-description/api-markdown-description.component.html
+<div id="markdown-container" data-simplebar>
+ <markdown [data]="markdownText"></markdown>
+</div>

ADD
src/app/components/api-markdown-description/api-markdown-description.component.scss
+#markdown-container {
+ max-height: 50vh;
+ padding-left: 1%;
+ padding-right: 1%;
+ border: 1px solid rgb(0 0 0 / 20%);
+ background: rgb(0 0 0 / 2%);
+}

ADD
src/app/components/api-markdown-description/api-markdown-description.component.spec.ts
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ApiMarkdownDescriptionComponent } from './api-markdown-description.component';
+
+describe('ApiMarkdownDescriptionComponent', () => {
+ let component: ApiMarkdownDescriptionComponent;
+ let fixture: ComponentFixture<ApiMarkdownDescriptionComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ApiMarkdownDescriptionComponent]
+ }).compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ApiMarkdownDescriptionComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});

ADD
src/app/components/api-markdown-description/api-markdown-description.component.ts
+import { Component, Input, OnInit } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+
+@Component({
+ selector: 'app-api-markdown-description',
+ templateUrl: './api-markdown-description.component.html',
+ styleUrls: ['./api-markdown-description.component.scss']
+})
+export class ApiMarkdownDescriptionComponent implements OnInit {
+ @Input() markdownText = '';
+
+ constructor(private translator: TranslateService) {}
+
+ ngOnInit(): void {
+ if (!this.markdownText) {
+ this.markdownText = this.translator.instant(
+ 'API_DETAILS.NO_EXT_DESCRIPTION'
+ ) as string;
+ }
+ }
+}

MODIFY
src/app/components/marketplace-api-description/marketplace-api-description.component.html
src/app/components/marketplace-api-description/marketplace-api-description.component.html
<!-- Template for MD-Reader -->
<ng-template #mdTemplate>
- <div class="box" id="long-description-tile" data-simplebar>
- <markdown [data]="markDownText"></markdown>
- </div>
+ <app-api-markdown-description
+ [markdownText]="api.extendedDescription"></app-api-markdown-description>
</ng-template>
<!-- Template for Key Features -->

MODIFY
src/app/components/marketplace-api-description/marketplace-api-description.component.ts
src/app/components/marketplace-api-description/marketplace-api-description.component.ts
* imitations under the License.
*/
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input } from '@angular/core';
import { IApiVersionExt } from '../../interfaces/IApiVersionExt';
-import { TranslateService } from '@ngx-translate/core';
import { ConfigService } from '../../services/config/config.service';
@Component({
@@ -24,25 +23,14 @@ import { ConfigService } from '../../services/config/config.service';
templateUrl: './marketplace-api-description.component.html',
styleUrls: ['./marketplace-api-description.component.scss']
})
-export class MarketplaceApiDescriptionComponent implements OnInit {
+export class MarketplaceApiDescriptionComponent {
@Input() api!: IApiVersionExt;
@Input() isLatest!: boolean;
// TODO get features from backend as soon as the endpoint is created
features = [];
- public markDownText = this.translator.instant(
- 'API_DETAILS.NO_EXT_DESCRIPTION'
- ) as string;
- constructor(
- private translator: TranslateService,
- public configService: ConfigService
- ) {}
-
- ngOnInit(): void {
- if (this.api.extendedDescription)
- this.markDownText = this.api.extendedDescription;
- }
+ constructor(public configService: ConfigService) {}
hasFeatures(): boolean {
return this.features.length > 0;

MODIFY
src/app/components/my-apps/my-apps.component.html
src/app/components/my-apps/my-apps.component.html
{{ 'CLIENTS.SUMMARY' | translate }}
</span>
</div>
+ <div>
+ <span
+ (click)="setSection(contract, 'description')"
+ [ngClass]="{ primary: contract.section === 'description' }">
+ {{ 'CLIENTS.DESCRIPTION' | translate }}
+ </span>
+ </div>
<ng-container *ngIf="contract!.api.status !== 'Retired'">
<div>
<span
(sectionChangedEmitter)="
onSetSection($event)
"></app-my-apps-summary>
+ <app-api-markdown-description
+ *ngIf="contract.section === 'description'"
+ [markdownText]="
+ contract.api.extendedDescription
+ "></app-api-markdown-description>
<app-my-apps-use-api
*ngIf="contract.section === 'use-api'"
[contract]="contract"></app-my-apps-use-api>

MODIFY
src/app/components/my-apps/my-apps.component.scss
src/app/components/my-apps/my-apps.component.scss
.app-api-content {
margin-right: 1rem;
padding-bottom: 1rem;
+ min-height: 85%;
}
.app-api-header {

MODIFY
src/app/interfaces/IContractExt.ts
src/app/interfaces/IContractExt.ts
@@ -24,7 +24,7 @@ import { IPolicyExt } from './IPolicy';
*/
export interface IContractExt extends IContract {
managedEndpoint: string;
- section: 'summary' | 'use-api' | 'policies' | 'manage-api';
+ section: 'summary' | 'description' | 'use-api' | 'policies' | 'manage-api';
policies: IPolicyExt[];
docsAvailable: boolean;
deletable: boolean;

MODIFY
src/app/interfaces/ISection.ts
src/app/interfaces/ISection.ts
* imitations under the License.
*/
-export type ISection = 'summary' | 'use-api' | 'policies' | 'manage-api';
+export type ISection =
+ | 'summary'
+ | 'description'
+ | 'use-api'
+ | 'policies'
+ | 'manage-api';

MODIFY
src/assets/i18n/en.json
src/assets/i18n/en.json
"TITLE": "My Clients",
"SUBTITLE": "Groups of APIs",
"SUMMARY": "Summary",
+ "DESCRIPTION": "Description",
"USE_API": "Use API",
"POLICIES": "Policies",
"MANAGE_API": "Manage API",

feat(ui): add markdown descriptions to 'My Clients'