From 5fa596a87118e8393245bdc4c8e0948156f1b230 Mon Sep 17 00:00:00 2001
From: Max Peintner <max@caos.ch>
Date: Wed, 22 Nov 2023 10:14:37 +0100
Subject: [PATCH] fix(console): onboarding actions with external links (#6822)

* fix: attr for external links

* template outlet
---
 .../onboarding/onboarding.component.html      | 100 +++++++++++-------
 console/src/app/services/admin.service.ts     |   3 +
 console/src/app/utils/onboarding.ts           |   1 +
 3 files changed, 63 insertions(+), 41 deletions(-)

diff --git a/console/src/app/modules/onboarding/onboarding.component.html b/console/src/app/modules/onboarding/onboarding.component.html
index 1fe806f356..60398abb74 100644
--- a/console/src/app/modules/onboarding/onboarding.component.html
+++ b/console/src/app/modules/onboarding/onboarding.component.html
@@ -24,53 +24,71 @@
   >
     <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 }"
       >
-        <div class="state-circle">
-          <mat-icon
-            *ngIf="action[1]?.reached !== undefined"
-            matTooltip="{{ action[1].reached | milestone }}"
-            class="success-icon"
-            >check_circle</mat-icon
-          >
-        </div>
-
-        <div class="action-content">
-          <div class="action-content-row">
-            <div
-              class="icon-wrapper"
-              [ngStyle]="{
-                background: (themeService.isDarkTheme | async) ? action[1].darkcolor + 50 : action[1].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
-                }"
-              >
-                <i class="{{ action[1].iconClasses }}"></i>
-              </div>
-            </div>
-            <div class="text-block">
-              <span class="name">{{ 'ONBOARDING.MILESTONES.' + action[0] + '.title' | translate }}</span>
-              <span class="cnsl-secondary-text description">{{
-                'ONBOARDING.MILESTONES.' + action[0] + '.description' | translate
-              }}</span>
-            </div>
-          </div>
-
-          <span class="fill-space"></span>
-          <div class="action-row">
-            <span>{{ 'ONBOARDING.MILESTONES.' + action[0] + '.action' | translate }}</span>
-            <mat-icon class="icon">keyboard_arrow_right</mat-icon>
-          </div>
-        </div>
+        <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?.reached !== undefined" matTooltip="{{ action.reached | milestone }}" class="success-icon"
+      >check_circle</mat-icon
+    >
+  </div>
+
+  <div class="action-content">
+    <div class="action-content-row">
+      <div
+        class="icon-wrapper"
+        [ngStyle]="{
+          background: (themeService.isDarkTheme | async) ? action.darkcolor + 50 : action.lightcolor + 50
+        }"
+      >
+        <div
+          class="inner"
+          [ngStyle]="{
+            background: (themeService.isDarkTheme | async) ? action.darkcolor : action.lightcolor,
+            color: (themeService.isDarkTheme | async) ? action.lightcolor : action.darkcolor
+          }"
+        >
+          <i class="{{ action.iconClasses }}"></i>
+        </div>
+      </div>
+      <div class="text-block">
+        <span class="name">{{ 'ONBOARDING.MILESTONES.' + title + '.title' | translate }}</span>
+        <span class="cnsl-secondary-text description">{{
+          'ONBOARDING.MILESTONES.' + title + '.description' | translate
+        }}</span>
+      </div>
+    </div>
+
+    <span class="fill-space"></span>
+    <div class="action-row">
+      <span>{{ 'ONBOARDING.MILESTONES.' + title + '.action' | translate }}</span>
+      <mat-icon class="icon">keyboard_arrow_right</mat-icon>
+    </div>
+  </div>
+</ng-template>
diff --git a/console/src/app/services/admin.service.ts b/console/src/app/services/admin.service.ts
index 7ee37d555c..1a67b50ffd 100644
--- a/console/src/app/services/admin.service.ts
+++ b/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,
diff --git a/console/src/app/utils/onboarding.ts b/console/src/app/utils/onboarding.ts
index 70b77f4b66..3577a04079 100644
--- a/console/src/app/utils/onboarding.ts
+++ b/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,