refactor: change policy cards
MODIFY
src/app/app.module.ts
src/app/app.module.ts
@@ -12,7 +12,6 @@ import { MarketplaceApiDetailsComponent } from './components/marketplace-api-det
import { HomeComponent } from './components/home/home.component';
import { MarketplaceApiTermsComponent } from './components/marketplace-api-terms/marketplace-api-terms.component';
import { MarketplaceSignupStepperComponent } from './components/marketplace-signup-stepper/marketplace-signup-stepper.component';
-import { MarketplaceApiPoliciesComponent } from './components/marketplace-api-policies/marketplace-api-policies.component';
import { ClipboardModule } from '@angular/cdk/clipboard';
import { MarketplaceApiDescriptionComponent } from './components/marketplace-api-description/marketplace-api-description.component';
import { MarketplaceComponent } from './components/marketplace/marketplace.component';
@@ -36,6 +35,7 @@ import { MyAppsSummaryComponent } from './components/my-apps-summary/my-apps-sum
import { MyAppsUseApiComponent } from './components/my-apps-use-api/my-apps-use-api.component';
import { MyAppsPoliciesComponent } from './components/my-apps-policies/my-apps-policies.component';
import { MyAppsManageApiComponent } from './components/my-apps-manage-api/my-apps-manage-api.component';
+import { PolicyCardComponent } from './components/policy-card/policy-card.component';
export function initializeApp(
configService: ConfigService,
@@ -87,7 +87,6 @@ function initializeKeycloak(keycloakHelper: KeycloakHelperService) {
MarketplaceApiTermsComponent,
MarketplaceSignupStepperComponent,
HomeComponent,
- MarketplaceApiPoliciesComponent,
MarketplaceApiDescriptionComponent,
MarketplaceComponent,
NavigationComponent,
@@ -101,6 +100,7 @@ function initializeKeycloak(keycloakHelper: KeycloakHelperService) {
MyAppsUseApiComponent,
MyAppsPoliciesComponent,
MyAppsManageApiComponent,
+ PolicyCardComponent,
],
imports: [
KeycloakAngularModule,
@@ -109,7 +109,7 @@ function initializeKeycloak(keycloakHelper: KeycloakHelperService) {
AppRoutingModule,
BrowserAnimationsModule,
MarkdownModule.forRoot({
- sanitize: SecurityContext.NONE
+ sanitize: SecurityContext.NONE,
}),
FormsModule,
HttpClientModule,

DELETE
src/app/components/marketplace-api-policies/marketplace-api-policies.component.html
-<h2>Policies</h2>
-
-<mat-grid-list cols="2" rowHeight="4:1">
- <mat-grid-tile colspan="1">
- <mat-card>
- <mat-card-header>
- <img
- mat-card-avatar
- alt="Logo"
- src="https://github.com/apiman/apiman/raw/master/manager/ui/war/plugins/api-manager/img/about-logo.png"
- />
- <mat-card-title>Rate Limiting Policy</mat-card-title>
- </mat-card-header>
- <mat-card-content>
- <p>
- You will be rate limited to
- <b>{{ rateLimitPolicy.limit }}</b> requests
- <b>per {{ rateLimitPolicy.unit }}.</b>
- </p>
- <p>
- The following headers in the response contain useful information
- relating to rate limit
- </p>
- <ul>
- <li>
- <b>X-RateLimit-Limit:</b> Rate limit allowance (per time period)
- </li>
- <li><b>X-RateLimit-Remaining:</b> Rate limit allowance remaining</li>
- <li><b>X-RateLimit-Reset:</b> Time until next rate limit reset</li>
- </ul>
- </mat-card-content>
- </mat-card>
- </mat-grid-tile>
-
- <mat-grid-tile colspan="1">
- <mat-card>
- <mat-card-header>
- <img
- mat-card-avatar
- alt="Logo"
- src="https://github.com/apiman/apiman/raw/master/manager/ui/war/plugins/api-manager/img/about-logo.png"
- />
- <mat-card-title>Transfer Quota Policy</mat-card-title>
- </mat-card-header>
- <mat-card-content>
- <p>
- You will be rate limited to
- <b>{{ quotaLimitPolicy.limit }}</b> requests
- <b>per {{ quotaLimitPolicy.unit }}.</b>
- </p>
- <p>
- The following headers in the response contain useful information
- relating to quota limit
- </p>
- <ul>
- <li>
- <b>X-TransferQuota-Limit:</b> Quota allowance (per time period)
- </li>
- <li><b>X-TransferQuota-Remaining:</b> Quota remaining</li>
- <li><b>X-TransferQuota-Reset:</b> Time until quota reset</li>
- </ul>
- </mat-card-content>
- </mat-card>
- </mat-grid-tile>
-</mat-grid-list>

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

DELETE
src/app/components/marketplace-api-policies/marketplace-api-policies.component.ts
-import { Component, OnInit } from '@angular/core';
-
-@Component({
- selector: 'app-marketplace-api-policies',
- templateUrl: './marketplace-api-policies.component.html',
- styleUrls: ['./marketplace-api-policies.component.scss'],
-})
-export class MarketplaceApiPoliciesComponent implements OnInit {
- rateLimitPolicy = {
- limit: '300',
- unit: 'day',
- };
-
- quotaLimitPolicy = {
- limit: '300',
- unit: 'day',
- };
-
- constructor() {}
-
- ngOnInit(): void {}
-}

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-header>
<mat-card-content class="mat-card-header-text">
<app-my-apps-use-api></app-my-apps-use-api>
+ <h4>Policies</h4>
+ <!--In this version we will not have more than 2 policies-->
+ <div class="policies">
+ <app-policy-card></app-policy-card>
+ <app-policy-card></app-policy-card>
+ </div>
</mat-card-content>
<mat-divider></mat-divider>
<mat-card-actions class="right">
</mat-card-header>
<mat-card-content class="mat-card-header-text">
<app-my-apps-use-api [contract]="contract"></app-my-apps-use-api>
+ <h3>Policies</h3>
+ <!--In this version we will not have more than 2 policies-->
+ <div class="policies">
+ <app-policy-card></app-policy-card>
+ <app-policy-card></app-policy-card>
+ </div>
</mat-card-content>
<mat-divider></mat-divider>
<mat-card-actions class="right">

MODIFY
src/app/components/marketplace-signup-stepper/marketplace-signup-stepper.component.scss
src/app/components/marketplace-signup-stepper/marketplace-signup-stepper.component.scss
@@ -13,3 +13,16 @@ mat-stepper {
justify-content: center;
align-items: center;
}
+
+.policies {
+ display: grid;
+ justify-content: space-between;
+ align-items: center;
+ grid-template-columns: 1fr 1fr;
+ grid-column-gap: 8px;
+ grid-row-gap: 32px;
+}
+
+.mat-card-content>:last-child:not(.mat-card-footer) {
+ margin-bottom: 2.2rem;
+}

ADD
src/app/components/policy-card/policy-card.component.html
+<mat-card>
+ <mat-card-header>
+ <mat-icon mat-card-avatar color="primary">{{ icon }}</mat-icon>
+ <mat-card-title>{{
+ "POLICIES." + policyIdentifier + ".TITLE" | translate
+ }}</mat-card-title>
+ </mat-card-header>
+ <mat-card-content>
+ <p
+ [innerHTML]="
+ 'POLICIES.' + policyIdentifier + '.DESCRIPTION'
+ | translate: policyConfig
+ "
+ ></p>
+ <p>{{ "POLICIES." + policyIdentifier + ".MORE_INFO" | translate }}</p>
+ <ul>
+ <li>
+ <strong>{{ headers.headerLimit }}:</strong>
+ {{ "POLICIES." + policyIdentifier + ".LIMIT" | translate }}
+ </li>
+ <li>
+ <strong>{{ headers.headerRemaining }}:</strong>
+ {{ "POLICIES." + policyIdentifier + ".REMAINING" | translate }}
+ </li>
+ <li>
+ <strong>{{ headers.headerReset }}:</strong>
+ {{ "POLICIES." + policyIdentifier + ".RESET" | translate }}
+ </li>
+ </ul>
+ </mat-card-content>
+</mat-card>

ADD
src/app/components/policy-card/policy-card.component.scss
+mat-icon.mat-card-avatar {
+ width: 40px;
+ height: 40px;
+ font-size: 40px;
+}
+
+mat-grid-list {
+ min-height: 50vh;
+}

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

ADD
src/app/components/policy-card/policy-card.component.ts
+import { Component, Input, OnInit } from '@angular/core';
+import { IPolicy } from '../../interfaces/ICommunication';
+
+export interface PolicyHeaders {
+ headerLimit: string;
+ headerRemaining: string;
+ headerReset: string;
+}
+
+@Component({
+ selector: 'app-policy-card',
+ templateUrl: './policy-card.component.html',
+ styleUrls: ['./policy-card.component.scss'],
+})
+export class PolicyCardComponent implements OnInit {
+ @Input() policy?: IPolicy;
+ headers: PolicyHeaders;
+ icon: string;
+ policyIdentifier: string;
+
+ // Default Headers
+ private rateLimitPolicyHeaders: PolicyHeaders = {
+ headerLimit: 'X-RateLimit-Limit',
+ headerRemaining: 'X-RateLimit-Remaining',
+ headerReset: 'X-RateLimit-Reset',
+ };
+ private transferQuotaPolicyHeaders: PolicyHeaders = {
+ headerLimit: 'X-TransferQuota-Limit',
+ headerRemaining: 'X-TransferQuota-Remaining',
+ headerReset: 'X-TransferQuota-Reset',
+ };
+
+ constructor() {
+ if (this.policy?.definition.id === 'RateLimitingPolicy') {
+ this.headers = this.rateLimitPolicyHeaders;
+ this.icon = 'tune';
+ this.policyIdentifier = 'RATE_LIMIT';
+ } else {
+ this.headers = this.transferQuotaPolicyHeaders;
+ this.icon = 'import_export';
+ this.policyIdentifier = 'QUOTA';
+ }
+ }
+
+ policyConfig = {
+ limit: '300',
+ unit: 'MB',
+ timeUnit: 'day',
+ };
+
+ ngOnInit(): void {}
+}

MODIFY
src/assets/i18n/en.json
src/assets/i18n/en.json
"TERMS_ERROR": "You have to accept the service terms",
"REDIRECT": "You will be redirected because of an invalid URL",
"SUCCESS": "A contract has been successfully created"
+ },
+ "POLICIES": {
+ "RATE_LIMIT": {
+ "TITLE": "Rate Limiting Policy",
+ "DESCRIPTION": "You will be rate limited to <strong>{{limit}}</strong> requests per <strong>{{timeUnit}}</strong>",
+ "MORE_INFO": "The following headers in the response contain useful information relating to rate limit,",
+ "LIMIT": "Rate limit allowance (per time period)",
+ "REMAINING": "Rate limit allowance remaining",
+ "RESET": "Rate limit allowance remaining"
+ },
+ "QUOTA": {
+ "TITLE": "Quota Policy",
+ "DESCRIPTION": "You can transfer a maximum of {{limit}} {{unit}} of data {{timeUnit}}",
+ "MORE_INFO": "The following headers in the response contain useful information relating to quota limit,",
+ "LIMIT": "Quota limit allowance (per time period)",
+ "REMAINING": "Quota limit allowance remaining",
+ "RESET": "Quota limit allowance remaining"
+ }
}
}

refactor: change policy cards