perf: query projected milestones for onboarding view (#6760)

* feat: support list milestones api

* show milestones in onboarding view

* add authenticated milestone

* add icon to login milestone

* update main

* lint

* fix import

* fix import

* lint

* reuse proto milestone type mapping

console/src/app/modules/onboarding-card/onboarding-card.component.html

@@ -20,15 +20,18 @@
         [routerLink]="action[1].link"
         [queryParams]="{ id: action[1].fragment }"
         class="action-element"
-        [ngClass]="{ done: action[1].event !== undefined }"
+        [ngClass]="{ done: action[1].reached !== undefined }"
       >
         <div class="state-circle">
-          <mat-icon *ngIf="action[1]?.event !== undefined" class="success-icon" matTooltip="{{ action[1].event | event }}"
+          <mat-icon
+            *ngIf="action[1]?.reached !== undefined"
+            class="success-icon"
+            matTooltip="{{ action[1].reached | milestone }}"
             >check_circle</mat-icon
           >
         </div>
 
-        <span class="name">{{ 'ONBOARDING.EVENTS.' + action[0] + '.title' | translate }}</span>
+        <span class="name">{{ 'ONBOARDING.MILESTONES.' + action[0] + '.title' | translate }}</span>
         <mat-icon class="arrow-right">keyboard_arrow_right</mat-icon>
       </a>
     </ng-container>

console/src/app/modules/onboarding-card/onboarding-card.component.ts

@@ -1,7 +1,7 @@
 import { Component, EventEmitter, OnInit, Output } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import { AdminService } from 'src/app/services/admin.service';
-import { ONBOARDING_EVENTS } from 'src/app/utils/onboarding';
+import { ONBOARDING_MILESTONES } from 'src/app/utils/onboarding';
 
 @Component({
   selector: 'cnsl-onboarding-card',
@@ -11,7 +11,7 @@ import { ONBOARDING_EVENTS } from 'src/app/utils/onboarding';
 export class OnboardingCardComponent implements OnInit {
   public percentageChanged: EventEmitter<number> = new EventEmitter<number>();
   public loading$: BehaviorSubject<any> = new BehaviorSubject(false);
-  public actions = this.adminService.progressEvents;
+  public actions = this.adminService.progressMilestones;
   @Output() public dismissedCard: EventEmitter<void> = new EventEmitter();
 
   constructor(public adminService: AdminService) {}
@@ -21,6 +21,6 @@ export class OnboardingCardComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.adminService.loadEvents.next(ONBOARDING_EVENTS);
+    this.adminService.loadMilestones.next(ONBOARDING_MILESTONES);
   }
 }

console/src/app/modules/onboarding-card/onboarding-card.module.ts

@@ -6,7 +6,7 @@ import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/le
 import { TranslateModule } from '@ngx-translate/core';
 
 import { RouterModule } from '@angular/router';
-import { EventPipeModule } from 'src/app/pipes/event-pipe/event-pipe.module';
+import { MilestonePipeModule } from 'src/app/pipes/milestone-pipe/milestone-pipe.module';
 import { OnboardingCardComponent } from './onboarding-card.component';
 
 @NgModule({
@@ -17,7 +17,7 @@ import { OnboardingCardComponent } from './onboarding-card.component';
     TranslateModule,
     RouterModule,
     MatProgressSpinnerModule,
-    EventPipeModule,
+    MilestonePipeModule,
     MatTooltipModule,
   ],
   exports: [OnboardingCardComponent],

console/src/app/modules/onboarding/onboarding.component.html

@@ -27,10 +27,13 @@
         [routerLink]="action[1].link"
         [queryParams]="{ id: action[1].fragment }"
         class="action-card card"
-        [ngClass]="{ done: action[1].event !== undefined }"
+        [ngClass]="{ done: action[1].reached !== undefined }"
       >
         <div class="state-circle">
-          <mat-icon *ngIf="action[1]?.event !== undefined" matTooltip="{{ action[1].event | event }}" class="success-icon"
+          <mat-icon
+            *ngIf="action[1]?.reached !== undefined"
+            matTooltip="{{ action[1].reached | milestone }}"
+            class="success-icon"
             >check_circle</mat-icon
           >
         </div>
@@ -54,16 +57,16 @@
               </div>
             </div>
             <div class="text-block">
-              <span class="name">{{ 'ONBOARDING.EVENTS.' + action[0] + '.title' | translate }}</span>
+              <span class="name">{{ 'ONBOARDING.MILESTONES.' + action[0] + '.title' | translate }}</span>
               <span class="cnsl-secondary-text description">{{
-                'ONBOARDING.EVENTS.' + action[0] + '.description' | translate
+                'ONBOARDING.MILESTONES.' + action[0] + '.description' | translate
               }}</span>
             </div>
           </div>
 
           <span class="fill-space"></span>
           <div class="action-row">
-            <span>{{ 'ONBOARDING.EVENTS.' + action[0] + '.action' | translate }}</span>
+            <span>{{ 'ONBOARDING.MILESTONES.' + action[0] + '.action' | translate }}</span>
             <mat-icon class="icon">keyboard_arrow_right</mat-icon>
           </div>
         </div>

console/src/app/modules/onboarding/onboarding.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { AdminService } from 'src/app/services/admin.service';
 import { ThemeService } from 'src/app/services/theme.service';
-import { ONBOARDING_EVENTS } from 'src/app/utils/onboarding';
+import { ONBOARDING_MILESTONES } from 'src/app/utils/onboarding';
 
 @Component({
   selector: 'cnsl-onboarding',
@@ -9,12 +9,12 @@ import { ONBOARDING_EVENTS } from 'src/app/utils/onboarding';
   styleUrls: ['./onboarding.component.scss'],
 })
 export class OnboardingComponent {
-  public actions = this.adminService.progressEvents;
+  public actions = this.adminService.progressMilestones;
 
   constructor(
     public adminService: AdminService,
     public themeService: ThemeService,
   ) {
-    this.adminService.loadEvents.next(ONBOARDING_EVENTS);
+    this.adminService.loadMilestones.next(ONBOARDING_MILESTONES);
   }
 }

console/src/app/modules/onboarding/onboarding.module.ts

@@ -9,7 +9,7 @@ import { ShortcutsModule } from 'src/app/modules/shortcuts/shortcuts.module';
 
 import { MatLegacyProgressBarModule } from '@angular/material/legacy-progress-bar';
 import { RouterModule } from '@angular/router';
-import { EventPipeModule } from 'src/app/pipes/event-pipe/event-pipe.module';
+import { MilestonePipeModule } from 'src/app/pipes/milestone-pipe/milestone-pipe.module';
 import { OnboardingComponent } from './onboarding.component';
 
 @NgModule({
@@ -24,7 +24,7 @@ import { OnboardingComponent } from './onboarding.component';
     RouterModule,
     MatProgressSpinnerModule,
     MatLegacyProgressBarModule,
-    EventPipeModule,
+    MilestonePipeModule,
   ],
   exports: [OnboardingComponent],
 })