feat(ui): add unlimited label to plan cards
If no policies are added to a plan we should show a unlimited label.
This label is configurable via the i18n files and can be styled a little bit with existing css classes
Fixes:
MODIFY
src/app/components/plan-card-list/plan-card-list.component.html
src/app/components/plan-card-list/plan-card-list.component.html
</div>
<div class="card-content" [ngSwitch]="plan.planId + ':' + plan.version">
<mat-list>
+ <ng-container
+ *ngIf="plan.planPolicies.length > 0; else unlimitedPolicies">
<mat-list-item *ngFor="let policy of plan.planPolicies">
<p>
{{ policy.shortName }}
[policy]="policy"
[bold]="false"></app-rate-quota-policy-short-limit>
</mat-list-item>
+ </ng-container>
+ <ng-template #unlimitedPolicies>
+ <mat-list-item *ngFor="let defaultPolicy of defaultPolicies">
+ <p>{{ defaultPolicy }}</p>
+ <app-rate-quota-policy-short-limit
+ [bold]="false"></app-rate-quota-policy-short-limit>
+ </mat-list-item>
+ </ng-template>
</mat-list>
</div>
<div class="plan-card-actions">

MODIFY
src/app/components/plan-card-list/plan-card-list.component.ts
src/app/components/plan-card-list/plan-card-list.component.ts
@@ -32,6 +32,7 @@ import { map } from 'rxjs/operators';
export class PlanCardListComponent implements OnInit {
@Input() apiVersion!: IApiVersionExt;
plans: IApiPlanSummary[] = [];
+ readonly defaultPolicies: string[] = ['Rate Limit', 'Transfer Quota'];
constructor(
private route: ActivatedRoute,

MODIFY
src/app/components/policies/rate-quota-policy-short-limit/rate-quota-policy-short-limit.component.html
src/app/components/policies/rate-quota-policy-short-limit/rate-quota-policy-short-limit.component.html
-->
<p
+ *ngIf="policy; else unlimitedLabel"
[innerHTML]="
'POLICIES.' + policy.definition.id + '.CONDITION_LIGHT'
| translate: policy.restrictions
"></p>
+<ng-template #unlimitedLabel>
+ <p [innerHTML]="'POLICIES.UNLIMITED' | translate"></p>
+</ng-template>

MODIFY
src/app/services/policy/policy.service.ts
src/app/services/policy/policy.service.ts
@@ -166,12 +166,14 @@ export class PolicyService {
}
public filterPolicies(extendedPolicies: IPolicyExt[]): IPolicyExt[] {
- return extendedPolicies.filter((extendedPolicy: IPolicyExt) => {
+ return extendedPolicies
+ .filter((extendedPolicy: IPolicyExt) => {
return [
this.policyIds.RATE_LIMIT,
this.policyIds.TRANSFER_QUOTA
].includes(extendedPolicy.definition.id);
- });
+ })
+ .sort((a, b) => (a.definition.id > b.definition.id ? 1 : -1));
}
private getPolicyConfiguration(policy: IPolicyExt): IPolicyConfiguration {

MODIFY
src/assets/i18n/en.json
src/assets/i18n/en.json
"MONTH": "Month",
"YEAR": "Year"
},
- "USAGE": "Usage"
+ "USAGE": "Usage",
+ "UNLIMITED": "Unlimited"
},
"DESCRIPTIONS": {
"TRY_IT_OUT": "Displays the Open API definition (Swagger) and allows for making test calls if the API is available.",

feat(ui): add unlimited label to plan cards

If no policies are added to a plan we should show a unlimited label.
This label is configurable via the i18n files and can be styled a little bit with existing css classes

Fixes: PAS-3410