feat(ui): add api status tags to api card and api details
MODIFY
src/app/app.module.ts
src/app/app.module.ts
@@ -64,6 +64,7 @@ import { RateQuotaPolicyShortLimitComponent } from './components/policies/rate-q
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';
export function initializeApp(
configService: ConfigService,
@@ -127,7 +128,8 @@ export function createTranslateLoader(http: HttpClient): TranslateHttpLoader {
ApiDocumentationButtonsComponent,
RateQuotaPolicyShortLimitComponent,
NotificationsComponent,
- ApiMarkdownDescriptionComponent
+ ApiMarkdownDescriptionComponent,
+ ApiStatusTagComponent
],
imports: [
KeycloakAngularModule,

MODIFY
src/app/components/api-card/api-card.component.html
src/app/components/api-card/api-card.component.html
<mat-card id="api-card_{{ api.id }}" class="api-card">
<div class="api-card-header">
+ <div class="api-card-header-title">
<app-img-or-icon-selector
[imgUrl]="api.image"
[dimension]="'32'"></app-img-or-icon-selector>
<div class="api-card-title primary">{{ api.name }}</div>
</div>
+ <div class="api-card-header-status">
+ <app-api-status-tag
+ [apiStatus]="api.latestApiVersion.status"
+ [primary]="false"></app-api-status-tag>
+ </div>
+ </div>
<mat-card-content class="api-card-content">
<p *ngIf="api.description; else noDescription" class="content-text">
{{ api.description }}

MODIFY
src/app/components/api-card/api-card.component.scss
src/app/components/api-card/api-card.component.scss
* imitations under the License.
*/
+mat-card {
+ padding-top: 8px;
+}
+
.api-card {
border-radius: 2px;
min-width: 24%;
.api-card-header {
display: grid;
- grid-template-columns: 32px 1fr;
+ grid-template-columns: 1fr auto;
grid-column-gap: 0.8rem;
height: 32px;
+ align-items: center;
}
.api-card-title {
font-weight: 500;
}
+.api-card-header-title {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ grid-column-gap: 0.8rem;
+}
+
.api-card-content {
padding: 16px;
height: 4rem;

ADD
src/app/components/api-status-tag/api-status-tag.component.html
+<div class="api-status-tag-container">
+ <mat-icon
+ [class]="class"
+ matTooltip="{{ apiStatus }}"
+ matTooltipPosition="below"
+ matTooltipShowDelay="300"
+ >{{ icon }}</mat-icon
+ >
+</div>

ADD
src/app/components/api-status-tag/api-status-tag.component.scss
+mat-icon {
+ font-size: 1.3rem;
+ cursor: help;
+}
+
+.green-icon {
+ color: green;
+}
+
+.dark-accent-icon {
+ color: var(--dark-accent);
+}
+
+.dark-warn-icon {
+ color: var(--dark-warn);
+}

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

ADD
src/app/components/api-status-tag/api-status-tag.component.ts
+import { Component, Input, OnInit } from '@angular/core';
+import { apiStatus } from '../../models/api-status-enum';
+
+@Component({
+ selector: 'app-api-status-tag',
+ templateUrl: './api-status-tag.component.html',
+ styleUrls: ['./api-status-tag.component.scss']
+})
+export class ApiStatusTagComponent implements OnInit {
+ @Input() apiStatus = '';
+ @Input() primary = false;
+ icon = '';
+ class = '';
+ constructor() {}
+
+ ngOnInit() {
+ switch (this.apiStatus) {
+ case apiStatus.published:
+ this.icon = 'check_circle';
+ this.class = 'green-icon';
+ break;
+ case apiStatus.retired:
+ this.icon = 'remove_circle';
+ this.class = 'dark-warn-icon';
+ break;
+ case apiStatus.ready:
+ this.icon = 'schedule';
+ this.class = 'dark-accent-icon';
+ break;
+ }
+ }
+}

MODIFY
src/app/components/marketplace-api-description/marketplace-api-description.component.html
src/app/components/marketplace-api-description/marketplace-api-description.component.html
<mat-expansion-panel [expanded]="isLatest" xmlns="http://www.w3.org/1999/html">
<mat-expansion-panel-header>
- <mat-panel-title>
- <div id="version-info">
+ <mat-panel-title
+ style="
+ display: grid;
+ grid-template-columns: auto 1fr auto;
+ align-items: center;
+ ">
+ <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">
{{ 'COMMON.VERSION' | translate }} {{ api.version }}
{{ 'COMMON.OF' | translate }} {{ api.api.name }}
<span *ngIf="isLatest" id="latest-tag" class="primary">[latest]</span>

ADD
src/app/models/api-status-enum.ts
+export enum apiStatus {
+ created = 'Created',
+ ready = 'Ready',
+ published = 'Published',
+ retired = 'Retired'
+}

feat(ui): add api status tags to api card and api details