fix(console): onboarding actions with external links (#6822)

* fix: attr for external links

* template outlet

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

@@ -24,16 +24,37 @@
   >
     <ng-container *ngFor="let action of actions | async">
       <a
+        *ngIf="!action[1].externalLink"
         [routerLink]="action[1].link"
         [queryParams]="{ id: action[1].fragment }"
         class="action-card card"
         [ngClass]="{ done: action[1].reached !== undefined }"
       >
+        <ng-template
+          [ngTemplateOutlet]="onboardingContent"
+          [ngTemplateOutletContext]="{ title: action[0], action: action[1] }"
+        >
+        </ng-template>
+      </a>
+      <a
+        *ngIf="action[1].externalLink"
+        [href]="action[1].link"
+        class="action-card card"
+        [ngClass]="{ done: action[1].reached !== undefined }"
+      >
+        <ng-template
+          [ngTemplateOutlet]="onboardingContent"
+          [ngTemplateOutletContext]="{ title: action[0], action: action[1] }"
+        >
+        </ng-template>
+      </a>
+    </ng-container>
+  </div>
+</div>
+
+<ng-template #onboardingContent let-action="action" let-title="title">
   <div class="state-circle">
-          <mat-icon
-            *ngIf="action[1]?.reached !== undefined"
-            matTooltip="{{ action[1].reached | milestone }}"
-            class="success-icon"
+    <mat-icon *ngIf="action?.reached !== undefined" matTooltip="{{ action.reached | milestone }}" class="success-icon"
       >check_circle</mat-icon
     >
   </div>
@@ -43,34 +64,31 @@
       <div
         class="icon-wrapper"
         [ngStyle]="{
-                background: (themeService.isDarkTheme | async) ? action[1].darkcolor + 50 : action[1].lightcolor + 50
+          background: (themeService.isDarkTheme | async) ? action.darkcolor + 50 : action.lightcolor + 50
         }"
       >
         <div
           class="inner"
           [ngStyle]="{
-                  background: (themeService.isDarkTheme | async) ? action[1].darkcolor : action[1].lightcolor,
-                  color: (themeService.isDarkTheme | async) ? action[1].lightcolor : action[1].darkcolor
+            background: (themeService.isDarkTheme | async) ? action.darkcolor : action.lightcolor,
+            color: (themeService.isDarkTheme | async) ? action.lightcolor : action.darkcolor
           }"
         >
-                <i class="{{ action[1].iconClasses }}"></i>
+          <i class="{{ action.iconClasses }}"></i>
         </div>
       </div>
       <div class="text-block">
-              <span class="name">{{ 'ONBOARDING.MILESTONES.' + action[0] + '.title' | translate }}</span>
+        <span class="name">{{ 'ONBOARDING.MILESTONES.' + title + '.title' | translate }}</span>
         <span class="cnsl-secondary-text description">{{
-                'ONBOARDING.MILESTONES.' + action[0] + '.description' | translate
+          'ONBOARDING.MILESTONES.' + title + '.description' | translate
         }}</span>
       </div>
     </div>
 
     <span class="fill-space"></span>
     <div class="action-row">
-            <span>{{ 'ONBOARDING.MILESTONES.' + action[0] + '.action' | translate }}</span>
+      <span>{{ 'ONBOARDING.MILESTONES.' + title + '.action' | translate }}</span>
       <mat-icon class="icon">keyboard_arrow_right</mat-icon>
     </div>
   </div>
-      </a>
-    </ng-container>
-  </div>
-</div>
+</ng-template>

console/src/app/services/admin.service.ts

@@ -313,6 +313,7 @@ export interface OnboardingActions {
   order: number;
   milestoneType: MilestoneType;
   link: string;
+  externalLink?: boolean;
   fragment?: string | undefined;
   iconClasses?: string;
   darkcolor: string;
@@ -322,6 +323,7 @@ export interface OnboardingActions {
 type OnboardingMilestone = {
   order: number;
   link: string;
+  externalLink?: boolean;
   fragment: string | undefined;
   reached: Milestone.AsObject | undefined;
   iconClasses?: string;
@@ -354,6 +356,7 @@ export class AdminService {
             obj[Object.keys(MilestoneType)[action.milestoneType].substring(this.milestoneTypePrefixLength)] = {
               order: action.order,
               link: action.link,
+              externalLink: action.externalLink,
               fragment: action.fragment,
               iconClasses: action.iconClasses,
               darkcolor: action.darkcolor,

console/src/app/utils/onboarding.ts

@@ -44,6 +44,7 @@ export const ONBOARDING_MILESTONES: OnboardingActions[] = [
     order: 3,
     milestoneType: MilestoneType.MILESTONE_TYPE_AUTHENTICATION_SUCCEEDED_ON_APPLICATION,
     link: 'https://zitadel.com/docs/guides/integrate/login-users',
+    externalLink: true,
     iconClasses: 'las la-sign-in-alt',
     darkcolor: sthdark,
     lightcolor: sthlight,