feat(console): actions and flows (#2559)

* features, page, table, create dialog, i18n

* trigger actions service, add action dialog

* display flows, add flow dialog, duration pipe, i18n

* optim flow layout, action presets

* delete actions, flows, layout

* drag drop list, fix update

* lint

* stylelint

* fix template rest

* actions, drag, fix hasrole

* stylelint

* toast, i18n

* missing italian translations

* it

* fix ActionSearchQueries

Co-authored-by: Livio Amstutz <[email protected]>

console/src/app/app-routing.module.ts

@@ -74,6 +74,14 @@ const routes: Routes = [
             roles: ['org.read'],
         },
     },
+    {
+      path: 'actions',
+      loadChildren: () => import('./pages/actions/actions.module').then(m => m.ActionsModule),
+      canActivate: [AuthGuard, RoleGuard],
+      data: {
+          roles: ['org.read'],
+      },
+  },
     {
         path: 'grants',
         loadChildren: () => import('./pages/grants/grants.module').then(m => m.GrantsModule),

console/src/app/app.component.html

@@ -1,211 +1,217 @@
 <ng-container *ngIf="$any(authService.user | async) || {} as user">
-    <ng-container *ngIf="((['iam.read$','iam.write$'] | hasRole)) as iamuser$">
-        <mat-toolbar class="root-header">
-            <button *ngIf="authenticationService.authenticated" aria-label="Toggle sidenav" mat-icon-button
-                (click)="drawer.toggle()">
-                <i class="icon las la-bars"></i>
-            </button>
-            <ng-container *ngIf="labelpolicy && !labelpolicy?.disableWatermark">
-              <a  class="title" [routerLink]="['/']">
-                  <img class="logo" alt="zitadel logo" *ngIf="componentCssClass === 'dark-theme'; else lighttheme"
-                      src="../assets/images/zitadel-logo-solo-light.svg" />
-                  <ng-template #lighttheme>
-                      <img alt="zitadel logo" class="logo" src="../assets/images/zitadel-logo-solo-dark.svg" />
-                  </ng-template>
-              </a>
+  <ng-container *ngIf="((['iam.read$','iam.write$'] | hasRole)) as iamuser$">
+    <mat-toolbar class="root-header">
+      <button *ngIf="authenticationService.authenticated" aria-label="Toggle sidenav" mat-icon-button
+        (click)="drawer.toggle()">
+        <i class="icon las la-bars"></i>
+      </button>
+      <ng-container *ngIf="labelpolicy && !labelpolicy?.disableWatermark">
+        <a class="title" [routerLink]="['/']">
+          <img class="logo" alt="zitadel logo" *ngIf="componentCssClass === 'dark-theme'; else lighttheme"
+            src="../assets/images/zitadel-logo-solo-light.svg" />
+          <ng-template #lighttheme>
+            <img alt="zitadel logo" class="logo" src="../assets/images/zitadel-logo-solo-dark.svg" />
+          </ng-template>
+        </a>
 
-              <svg class="slash" viewBox="0 0 24 24" width="32" height="32" stroke="currentColor" stroke-width="1"
-                  stroke-linecap="round" stroke-linejoin="round" fill="none" shape-rendering="geometricPrecision">
-                  <path d="M16.88 3.549L7.12 20.451"></path>
-              </svg>
+        <svg class="slash" viewBox="0 0 24 24" width="32" height="32" stroke="currentColor" stroke-width="1"
+          stroke-linecap="round" stroke-linejoin="round" fill="none" shape-rendering="geometricPrecision">
+          <path d="M16.88 3.549L7.12 20.451"></path>
+        </svg>
+      </ng-container>
+
+      <button class="org-button" (click)="loadOrgs()" *ngIf="user && org" mat-button [matMenuTriggerFor]="menu"
+        (menuOpened)="focusFilter()">{{org?.name ? org.name : 'NO NAME'}}
+        <mat-icon>
+          arrow_drop_down</mat-icon>
+      </button>
+
+      <mat-menu class="menu" #menu="matMenu">
+        <div class="spinner-w">
+          <mat-spinner diameter="20" *ngIf="orgLoading$ | async" color="accent">
+          </mat-spinner>
+        </div>
+
+        <div class="filter-wrapper">
+          <input cnslInput class="filter-input" [formControl]="filterControl" autocomplete="off"
+            (click)="$event.stopPropagation()" placeholder="{{'ORG.PAGES.FILTERPLACEHOLDER' | translate}}" #input>
+        </div>
+
+        <div class="org-wrapper">
+          <button [ngClass]="{'active': temporg.id === org?.id}" [disabled]="!temporg.id"
+            *ngFor="let temporg of orgs$ | async" mat-menu-item (click)="setActiveOrg(temporg)">
+            {{temporg?.name ? temporg.name : 'NO NAME'}}
+          </button>
+        </div>
+
+        <button class="show-all" mat-menu-item [routerLink]="[ '/org/overview' ]">{{'MENU.SHOWORGS' |
+          translate}}</button>
+
+        <ng-template cnslHasRole [hasRole]="['org.create','iam.write']">
+          <button mat-menu-item [routerLink]="[ '/org/create' ]">
+            <mat-icon class="avatar">add</mat-icon>
+            {{'MENU.NEWORG' | translate}}
+          </button>
+        </ng-template>
+      </mat-menu>
+      <span class="fill-space"></span>
+
+      <a class="doc-link" href="https://docs.zitadel.ch" mat-stroked-button target="_blank">{{'MENU.DOCUMENTATION'
+        | translate}}</a>
+      <div (clickOutside)="closeAccountCard()" class="icon-container">
+        <cnsl-avatar
+          *ngIf="user && (user.human?.profile?.displayName || (user.human?.profile?.firstName && user.human?.profile?.lastName))"
+          class="avatar dontcloseonclick" (click)="showAccount = !showAccount" [active]="showAccount"
+          [avatarUrl]="user.human?.profile?.avatarUrl || ''" [forColor]="user?.preferredLoginName"
+          [name]="user.human.profile.displayName ? user.human.profile.displayName : (user.human.profile.firstName + ' '+ user.human.profile.lastName)"
+          [size]="38">
+        </cnsl-avatar>
+        <cnsl-accounts-card @accounts class="a_card  mat-elevation-z1" *ngIf="showAccount"
+          (closedCard)="showAccount = false" [user]="user" [iamuser]="iamuser$ | async">
+        </cnsl-accounts-card>
+      </div>
+    </mat-toolbar>
+    <mat-drawer-container class="main-container">
+      <mat-drawer #drawer class="sidenav" [mode]="(isHandset$ | async) ? 'over' : 'side'"
+        [opened]="(isHandset$ | async) === false && authenticationService.authenticated">
+        <div class="side-column">
+          <div class="list">
+            <a @navitem class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: true }"
+              [routerLink]="['/']">
+              <i class="icon las la-home"></i>
+              <span class="label">{{ 'MENU.DASHBOARD' | translate }}</span>
+            </a>
+
+            <ng-container *ngIf="authenticationService.authenticationChanged | async">
+              <a @navitem matTooltip="{{'MENU.TOOLTIP.PERSONAL' | translate}}" class="nav-item"
+                [routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: true }"
+                [routerLink]="['/users/me']">
+                <i class="icon las la-user-circle"></i>
+                <span class="label">{{ 'MENU.PERSONAL_INFO' | translate }}</span>
+              </a>
             </ng-container>
 
-            <button class="org-button" (click)="loadOrgs()" *ngIf="user && org" mat-button [matMenuTriggerFor]="menu"
-                (menuOpened)="focusFilter()">{{org?.name ? org.name : 'NO NAME'}}
-                <mat-icon>
-                    arrow_drop_down</mat-icon>
-            </button>
-
-            <mat-menu class="menu" #menu="matMenu">
-                <div class="spinner-w">
-                    <mat-spinner diameter="20" *ngIf="orgLoading$ | async" color="accent">
-                    </mat-spinner>
+            <div *ngIf="org" [@navAnimation]="org">
+              <ng-template cnslHasRole [hasRole]="['org.read']">
+                <div @navitem class="divider">
+                  <div class="line"></div>
+                  <span>{{org?.name ? org.name : ('MENU.ORGSECTION' | translate)}}</span>
+                  <div class="hiddenline"></div>
                 </div>
+              </ng-template>
 
-                <div class="filter-wrapper">
-                    <input cnslInput class="filter-input" [formControl]="filterControl" autocomplete="off"
-                        (click)="$event.stopPropagation()" placeholder="{{'ORG.PAGES.FILTERPLACEHOLDER' | translate}}"
-                        #input>
-                </div>
+              <ng-template cnslHasRole [hasRole]="['org.read']">
+                <a @navitem matTooltip="{{'MENU.TOOLTIP.ORG' | translate}}" class="nav-item"
+                  [routerLinkActive]="['active']" [routerLink]="[ '/org']">
+                  <i class="icon las la-cog"></i>
+                  <span class="label">{{'MENU.ORGANIZATION' | translate}}</span>
+                </a>
+              </ng-template>
 
-                <div class="org-wrapper">
-                    <button [ngClass]="{'active': temporg.id === org?.id}" [disabled]="!temporg.id"
-                        *ngFor="let temporg of orgs$ | async" mat-menu-item (click)="setActiveOrg(temporg)">
-                        {{temporg?.name ? temporg.name : 'NO NAME'}}
-                    </button>
-                </div>
+              <ng-template cnslHasRole [hasRole]="['project.read(:[0-9]*)?']">
+                <a @navitem matTooltip="{{'MENU.TOOLTIP.SELFPROJECTS' | translate}}" class="nav-item"
+                  [routerLinkActive]="['active']" [routerLink]="[ '/projects']">
+                  <i class="icon las la-layer-group"></i>
 
-                <button class="show-all" mat-menu-item [routerLink]="[ '/org/overview' ]">{{'MENU.SHOWORGS' |
-                    translate}}</button>
+                  <div class="c_label">
+                    <span> {{'MENU.PROJECT' | translate}} </span>
+                    <span *ngIf="(mgmtService?.ownedProjectsCount | async)"
+                      class="count">{{mgmtService?.ownedProjectsCount | async}}</span>
+                  </div>
+                </a>
+
+                <a @navitem matTooltip="{{'MENU.TOOLTIP.GRANTEDPROJECTS' | translate}}"
+                  *ngIf="mgmtService?.grantedProjectsCount && (mgmtService?.grantedProjectsCount | async)"
+                  class="nav-item" [routerLinkActive]="['active']" [routerLink]="[ '/granted-projects']">
+                  <i class="icon las la-layer-group"></i>
+                  <div class="c_label">
+                    <span>{{ 'MENU.GRANTEDPROJECT' | translate }}</span>
+                    <span class="count">{{mgmtService?.grantedProjectsCount | async}}</span>
+                  </div>
+                </a>
+              </ng-template>
+
+              <ng-template cnslHasRole [hasRole]="['user.read(:[0-9]*)?']">
+                <a @navitem matTooltip="{{'MENU.TOOLTIP.HUMANUSERS' | translate}}" class="nav-item"
+                  [routerLinkActive]="['active']" [routerLink]="[ '/users/list/humans']"
+                  [routerLinkActiveOptions]="{ exact: true }">
+                  <i class="icon las la-user-friends"></i>
+                  <span class="label">{{ 'MENU.HUMANUSERS' | translate }}</span>
+                </a>
+
+                <a @navitem matTooltip="{{'MENU.TOOLTIP.MACHINEUSERS' | translate}}" class="nav-item"
+                  [routerLinkActive]="['active']" [routerLink]="[ '/users/list/machines']"
+                  [routerLinkActiveOptions]="{ exact: true }">
+                  <i class="icon las la-users-cog"></i>
+                  <span class="label">{{ 'MENU.MACHINEUSERS' | translate }}</span>
+                </a>
+              </ng-template>
+
+              <ng-template cnslHasRole [hasRole]="['user.grant.read(:[0-9]*)?']">
+                <a @navitem matTooltip="{{'MENU.TOOLTIP.AUTHZ' | translate}}" class="nav-item"
+                  [routerLinkActive]="['active']" [routerLink]="[ '/grants']"
+                  [routerLinkActiveOptions]="{ exact: true }">
+                  <i class="icon las la-shield-alt"></i>
+                  <span class="label">{{ 'MENU.GRANTS' | translate }}</span>
+                </a>
+              </ng-template>
+
+              <ng-template cnslHasFeature [hasFeature]="['actions']">
+                <a @navitem matTooltip="{{'MENU.TOOLTIP.ACTIONS' | translate}}" class="nav-item"
+                  [routerLinkActive]="['active']" [routerLink]="[ '/actions']"
+                  [routerLinkActiveOptions]="{ exact: true }">
+                  <i class="icon las la-exchange-alt"></i>
+                  <span class="label">{{ 'MENU.ACTIONS' | translate }}</span>
+                </a>
+              </ng-template>
+            </div>
+
+            <ng-container *ngIf="iamuser$ | async">
+              <div @navitem class="divider">
+                <div class="line"></div>
+                <span>{{'MENU.ADMINSECTION' | translate}}</span>
+                <div class="hiddenline"></div>
+              </div>
+              <a @navitem matTooltip="{{'MENU.TOOLTIP.IAMPOLICIES' | translate}}" class="nav-item"
+                [routerLinkActive]="['active']" [routerLink]="[ '/iam','policies']">
+                <i class="icon las la-cog"></i>
+                <span class="label">{{'MENU.IAMPOLICIES' | translate}}</span>
+              </a>
+
+              <a @navitem matTooltip="{{'MENU.TOOLTIP.IAMEVENTSTORE' | translate}}" class="nav-item"
+                [routerLinkActive]="['active']" [routerLink]="[ '/iam', 'eventstore']">
+                <i class="icon las la-database"></i>
+                <span class="label">{{'MENU.IAMEVENTSTORE' | translate}}</span>
+              </a>
+            </ng-container>
 
-                <ng-template cnslHasRole [hasRole]="['org.create','iam.write']">
-                    <button mat-menu-item [routerLink]="[ '/org/create' ]">
-                        <mat-icon class="avatar">add</mat-icon>
-                        {{'MENU.NEWORG' | translate}}
-                    </button>
-                </ng-template>
-            </mat-menu>
             <span class="fill-space"></span>
 
-            <a class="doc-link" href="https://docs.zitadel.ch" mat-stroked-button target="_blank">{{'MENU.DOCUMENTATION'
+            <div class="toc-line" *ngIf="privacyPolicy">
+              <a class="toc" [href]="privacyPolicy.tosLink" alt="Terms and Conditions" target="_blank">{{'MENU.TOS'
                 | translate}}</a>
-            <div (clickOutside)="closeAccountCard()" class="icon-container">
-                <cnsl-avatar
-                    *ngIf="user && (user.human?.profile?.displayName || (user.human?.profile?.firstName && user.human?.profile?.lastName))"
-                    class="avatar dontcloseonclick" (click)="showAccount = !showAccount" [active]="showAccount"  [avatarUrl]="user.human?.profile?.avatarUrl || ''" [forColor]="user?.preferredLoginName"
-                    [name]="user.human.profile.displayName ? user.human.profile.displayName : (user.human.profile.firstName + ' '+ user.human.profile.lastName)"
-                    [size]="38">
-                </cnsl-avatar>
-                <cnsl-accounts-card @accounts class="a_card  mat-elevation-z1" *ngIf="showAccount"
-                    (closedCard)="showAccount = false" [user]="user" [iamuser]="iamuser$ | async">
-                </cnsl-accounts-card>
+              <span class="slash">|</span>
+              <a class="toc" [href]="privacyPolicy.privacyLink" alt="Privacy Policy " target="_blank">{{'MENU.PRIVACY'
+                | translate}}</a>
+              <span>&nbsp;&nbsp;&nbsp;</span>
             </div>
-        </mat-toolbar>
-        <mat-drawer-container class="main-container">
-            <mat-drawer #drawer class="sidenav" [mode]="(isHandset$ | async) ? 'over' : 'side'"
-                [opened]="(isHandset$ | async) === false && authenticationService.authenticated">
-                <div class="side-column">
-                    <div class="list">
-                        <a @navitem class="nav-item" [routerLinkActive]="['active']"
-                            [routerLinkActiveOptions]="{ exact: true }" [routerLink]="['/']">
-                            <i class="icon las la-home"></i>
-                            <span class="label">{{ 'MENU.DASHBOARD' | translate }}</span>
-                        </a>
-
-                        <ng-container *ngIf="authenticationService.authenticationChanged | async">
-                            <a @navitem matTooltip="{{'MENU.TOOLTIP.PERSONAL' | translate}}" class="nav-item"
-                                [routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: true }"
-                                [routerLink]="['/users/me']">
-                                <i class="icon las la-user-circle"></i>
-                                <span class="label">{{ 'MENU.PERSONAL_INFO' | translate }}</span>
-                            </a>
-                        </ng-container>
-
-                        <div *ngIf="org" [@navAnimation]="org">
-                            <ng-template cnslHasRole [hasRole]="['org.read']">
-                                <div @navitem class="divider">
-                                    <div class="line"></div>
-                                    <span>{{org?.name ? org.name : ('MENU.ORGSECTION' | translate)}}</span>
-                                    <div class="hiddenline"></div>
-                                </div>
-                            </ng-template>
-
-                            <ng-template cnslHasRole [hasRole]="['org.read']">
-                                <a @navitem matTooltip="{{'MENU.TOOLTIP.ORG' | translate}}" class="nav-item"
-                                    [routerLinkActive]="['active']" [routerLink]="[ '/org']">
-                                    <i class="icon las la-cog"></i>
-                                    <span class="label">{{'MENU.ORGANIZATION' | translate}}</span>
-                                </a>
-                            </ng-template>
-
-                            <ng-template cnslHasRole [hasRole]="['project.read(:[0-9]*)?']">
-                                <a @navitem matTooltip="{{'MENU.TOOLTIP.SELFPROJECTS' | translate}}" class="nav-item"
-                                    [routerLinkActive]="['active']" [routerLink]="[ '/projects']">
-                                    <i class="icon las la-layer-group"></i>
-
-                                    <div class="c_label">
-                                        <span> {{'MENU.PROJECT' | translate}} </span>
-                                        <span *ngIf="(mgmtService?.ownedProjectsCount | async)"
-                                            class="count">{{mgmtService?.ownedProjectsCount | async}}</span>
-                                    </div>
-                                </a>
-
-                                <a @navitem matTooltip="{{'MENU.TOOLTIP.GRANTEDPROJECTS' | translate}}"
-                                    *ngIf="mgmtService?.grantedProjectsCount && (mgmtService?.grantedProjectsCount | async)"
-                                    class="nav-item" [routerLinkActive]="['active']"
-                                    [routerLink]="[ '/granted-projects']">
-                                    <i class="icon las la-layer-group"></i>
-                                    <div class="c_label">
-                                        <span>{{ 'MENU.GRANTEDPROJECT' | translate }}</span>
-                                        <span class="count">{{mgmtService?.grantedProjectsCount | async}}</span>
-                                    </div>
-                                </a>
-                            </ng-template>
-
-                            <ng-template cnslHasRole [hasRole]="['user.read(:[0-9]*)?']">
-                                <a @navitem matTooltip="{{'MENU.TOOLTIP.HUMANUSERS' | translate}}" class="nav-item"
-                                    [routerLinkActive]="['active']" [routerLink]="[ '/users/list/humans']"
-                                    [routerLinkActiveOptions]="{ exact: true }">
-                                    <i class="icon las la-user-friends"></i>
-                                    <span class="label">{{ 'MENU.HUMANUSERS' | translate }}</span>
-                                </a>
-
-                                <a @navitem matTooltip="{{'MENU.TOOLTIP.MACHINEUSERS' | translate}}" class="nav-item"
-                                    [routerLinkActive]="['active']" [routerLink]="[ '/users/list/machines']"
-                                    [routerLinkActiveOptions]="{ exact: true }">
-                                    <i class="icon las la-users-cog"></i>
-                                    <span class="label">{{ 'MENU.MACHINEUSERS' | translate }}</span>
-                                </a>
-                            </ng-template>
-
-                            <ng-template cnslHasRole [hasRole]="['user.grant.read(:[0-9]*)?']">
-                                <a @navitem matTooltip="{{'MENU.TOOLTIP.AUTHZ' | translate}}" class="nav-item"
-                                    [routerLinkActive]="['active']" [routerLink]="[ '/grants']"
-                                    [routerLinkActiveOptions]="{ exact: true }">
-                                    <i class="icon las la-shield-alt"></i>
-                                    <span class="label">{{ 'MENU.GRANTS' | translate }}</span>
-                                </a>
-                            </ng-template>
-                        </div>
-
-                        <ng-container *ngIf="iamuser$ | async">
-                            <div @navitem class="divider">
-                                <div class="line"></div>
-                                <span>{{'MENU.ADMINSECTION' | translate}}</span>
-                                <div class="hiddenline"></div>
-                            </div>
-                            <a @navitem matTooltip="{{'MENU.TOOLTIP.IAMPOLICIES' | translate}}" class="nav-item"
-                                [routerLinkActive]="['active']" [routerLink]="[ '/iam','policies']">
-                                <i class="icon las la-cog"></i>
-                                <span class="label">{{'MENU.IAMPOLICIES' | translate}}</span>
-                            </a>
-
-                            <a @navitem matTooltip="{{'MENU.TOOLTIP.IAMEVENTSTORE' | translate}}" class="nav-item"
-                                [routerLinkActive]="['active']" [routerLink]="[ '/iam', 'eventstore']">
-                                <i class="icon las la-database"></i>
-                                <span class="label">{{'MENU.IAMEVENTSTORE' | translate}}</span>
-                            </a>
-                        </ng-container>
-
-                        <span class="fill-space"></span>
-
-                        <div class="toc-line" *ngIf="privacyPolicy">
-                            <a class="toc" [href]="privacyPolicy.tosLink" alt="Terms and Conditions"
-                                target="_blank">{{'MENU.TOS'
-                                | translate}}</a>
-                                <span class="slash">|</span>
-                            <a class="toc" [href]="privacyPolicy.privacyLink" alt="Privacy Policy "
-                                target="_blank">{{'MENU.PRIVACY'
-                                | translate}}</a>
-                            <span>&nbsp;&nbsp;&nbsp;</span>
-                        </div>
-                    </div>
-                    <span class="fill-space"></span>
-                </div>
-            </mat-drawer>
-            <mat-drawer-content class="content">
-                <div class="router" [@routeAnimations]="prepareRoute(outlet)">
-                    <router-outlet #outlet="outlet"></router-outlet>
-                </div>
-            </mat-drawer-content>
-        </mat-drawer-container>
-        <div @adminline *ngIf="iamuser$ | async" class="admin-line" [ngClass]="{'expanded': !hideAdminWarn}"
-            matTooltip="IAM Administrator">
-            <button [matTooltip]="!hideAdminWarn ? 'Unpin': 'Pin'" (click)="toggleAdminHide()" mat-icon-button>
-                <mat-icon *ngIf="!hideAdminWarn" svgIcon="mdi_pin"></mat-icon>
-                <mat-icon *ngIf="hideAdminWarn" svgIcon="mdi_pin_outline"></mat-icon>
-            </button>
-            <span>{{'MENU.IAMADMIN' | translate}}</span>
+          </div>
+          <span class="fill-space"></span>
         </div>
-    </ng-container>
-</ng-container>
+      </mat-drawer>
+      <mat-drawer-content class="content">
+        <div class="router" [@routeAnimations]="prepareRoute(outlet)">
+          <router-outlet #outlet="outlet"></router-outlet>
+        </div>
+      </mat-drawer-content>
+    </mat-drawer-container>
+    <div @adminline *ngIf="iamuser$ | async" class="admin-line" [ngClass]="{'expanded': !hideAdminWarn}"
+      matTooltip="IAM Administrator">
+      <button [matTooltip]="!hideAdminWarn ? 'Unpin': 'Pin'" (click)="toggleAdminHide()" mat-icon-button>
+        <mat-icon *ngIf="!hideAdminWarn" svgIcon="mdi_pin"></mat-icon>
+        <mat-icon *ngIf="hideAdminWarn" svgIcon="mdi_pin_outline"></mat-icon>
+      </button>
+      <span>{{'MENU.IAMADMIN' | translate}}</span>
+    </div>
+  </ng-container>
+</ng-container>

console/src/app/app.component.ts

@@ -165,6 +165,16 @@ export class AppComponent implements OnDestroy {
 
     this.matIconRegistry.addSvgIcon('mdi_api', this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/api.svg'));
 
+    this.matIconRegistry.addSvgIcon(
+      'mdi_arrow_right_bottom',
+      this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/arrow-right-bottom.svg'),
+    );
+
+    this.matIconRegistry.addSvgIcon(
+      'mdi_arrow_decision',
+      this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/arrow-decision-outline.svg'),
+    );
+
     this.activatedRoute.queryParams.pipe(takeUntil(this.destroy$)).subscribe((route) => {
       const { org } = route;
       if (org) {

console/src/app/app.module.ts

@@ -30,6 +30,7 @@ import { SubscriptionService } from 'src/app/services/subscription.service';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { HasFeatureModule } from './directives/has-feature/has-feature.module';
 import { HasRoleModule } from './directives/has-role/has-role.module';
 import { OutsideClickModule } from './directives/outside-click/outside-click.module';
 import { AccountsCardModule } from './modules/accounts-card/accounts-card.module';
@@ -118,6 +119,7 @@ const authConfig: AuthConfig = {
     InputModule,
     HasRolePipeModule,
     HasFeaturePipeModule,
+    HasFeatureModule,
     MatProgressBarModule,
     MatProgressSpinnerModule,
     MatToolbarModule,

console/src/app/directives/has-feature/has-feature.directive.ts

@@ -14,11 +14,11 @@ export class HasFeatureDirective {
         if (isAllowed && !this.hasView) {
           this.viewContainerRef.clear();
           this.viewContainerRef.createEmbeddedView(this.templateRef);
-        } else if (this.hasView) {
+        } else {
           this.viewContainerRef.clear();
           this.hasView = false;
         }
-      });
+      })
     }
   }
 

console/src/app/directives/has-role/has-role.directive.ts

@@ -1,20 +1,18 @@
 import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
 import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
 
-
 @Directive({
   selector: '[cnslHasRole]',
 })
-
 export class HasRoleDirective {
   private hasView: boolean = false;
   @Input() public set hasRole(roles: string[] | RegExp[]) {
     if (roles && roles.length > 0) {
-      this.authService.isAllowed(roles).subscribe(isAllowed => {
+      this.authService.isAllowed(roles).subscribe((isAllowed) => {
         if (isAllowed && !this.hasView) {
           this.viewContainerRef.clear();
           this.viewContainerRef.createEmbeddedView(this.templateRef);
-        } else if (this.hasView) {
+        } else {
           this.viewContainerRef.clear();
           this.hasView = false;
         }
@@ -26,5 +24,5 @@ export class HasRoleDirective {
     private authService: GrpcAuthService,
     protected templateRef: TemplateRef<any>,
     protected viewContainerRef: ViewContainerRef,
-  ) { }
+  ) {}
 }

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

@@ -1,282 +1,291 @@
 <cnsl-detail-layout [backRouterLink]="[ serviceType === FeatureServiceType.ADMIN ? '/iam/policies' : '/org']"
-    [title]="('FEATURES.TITLE' | translate)" [description]="'FEATURES.DESCRIPTION' | translate">
+  [title]="('FEATURES.TITLE' | translate)" [description]="'FEATURES.DESCRIPTION' | translate">
 
-    <h2>{{'FEATURES.TIER.TITLE' | translate}}</h2>
-    <p *ngIf="serviceType === FeatureServiceType.MGMT" class="tier-desc">{{'FEATURES.TIER.DESCRIPTION' | translate}}
-        {{'FEATURES.TIER.QUESTIONS' | translate}} <a href="mailto:[email protected]">[email protected]</a>.</p>
+  <h2>{{'FEATURES.TIER.TITLE' | translate}}</h2>
+  <p *ngIf="serviceType === FeatureServiceType.MGMT" class="tier-desc">{{'FEATURES.TIER.DESCRIPTION' | translate}}
+    {{'FEATURES.TIER.QUESTIONS' | translate}} <a href="mailto:[email protected]">[email protected]</a>.</p>
 
-    <div class="detail">
-        <p class="title">{{'FEATURES.TIER.NAME' | translate}}</p>
-        <p class="center">{{features?.tier?.name}}
-          <a class="ext" href="https://zitadel.ch/pricing"
-          target="_blank">
-            <i class="las la-external-link-alt"></i>
-          </a>
-        </p>
+  <div class="detail">
+    <p class="title">{{'FEATURES.TIER.NAME' | translate}}</p>
+    <p class="center">{{features?.tier?.name}}
+      <a class="ext" href="https://zitadel.ch/pricing" target="_blank">
+        <i class="las la-external-link-alt"></i>
+      </a>
+    </p>
+  </div>
+
+  <ng-container *ngIf="serviceType === FeatureServiceType.MGMT">
+    <mat-spinner class="spinner" diameter="20" *ngIf="customerLoading || stripeLoading"></mat-spinner>
+    <div class="detail" *ngIf="stripeCustomer || stripeCustomer === null">
+      <p class="title">{{'FEATURES.TIER.DETAILS' | translate}}
+        <a (click)="setCustomer()">{{'ACTIONS.EDIT' | translate}}</a>
+      </p>
+      <p>{{stripeCustomer?.contact}}</p>
+      <p *ngIf="stripeCustomer?.company">{{stripeCustomer?.company}}</p>
+      <p>{{stripeCustomer?.address}}</p>
+      <p *ngIf="stripeCustomer?.postal_code || stripeCustomer?.city || stripeCustomer?.country">
+        {{stripeCustomer?.postal_code}} {{stripeCustomer?.city}} {{stripeCustomer?.country}}
+        <img *ngIf="customerCountry" height="20px" width="30px"
+          style="margin-right: 1rem; border-radius: 2px; vertical-align: middle;"
+          src="../../../assets/flags/{{customerCountry.isoCode.toLowerCase()}}.png" />
+      </p>
     </div>
 
-    <ng-container *ngIf="serviceType === FeatureServiceType.MGMT">
-        <mat-spinner class="spinner" diameter="20" *ngIf="customerLoading || stripeLoading"></mat-spinner>
-        <div class="detail" *ngIf="stripeCustomer || stripeCustomer === null">
-            <p class="title">{{'FEATURES.TIER.DETAILS' | translate}}
-                <a (click)="setCustomer()">{{'ACTIONS.EDIT' | translate}}</a>
-            </p>
-            <p>{{stripeCustomer?.contact}}</p>
-            <p *ngIf="stripeCustomer?.company">{{stripeCustomer?.company}}</p>
-            <p>{{stripeCustomer?.address}}</p>
-            <p *ngIf="stripeCustomer?.postal_code || stripeCustomer?.city || stripeCustomer?.country">
-                {{stripeCustomer?.postal_code}} {{stripeCustomer?.city}} {{stripeCustomer?.country}}
-                <img *ngIf="customerCountry" height="20px" width="30px"
-                    style="margin-right: 1rem; border-radius: 2px; vertical-align: middle;"
-                    src="../../../assets/flags/{{customerCountry.isoCode.toLowerCase()}}.png" />
-            </p>
-        </div>
+    <p class="error" *ngIf="(stripeCustomer || stripeCustomer === null) && !customerValid">
+      {{'FEATURES.TIER.CUSTOMERINVALID' | translate}}</p>
 
-        <p class="error" *ngIf="(stripeCustomer || stripeCustomer === null) && !customerValid">{{'FEATURES.TIER.CUSTOMERINVALID' | translate}}</p>
+    <div class="current-tier">
+      <a color="primary" [disabled]="!org.id || !customerValid || !stripeURL" mat-raised-button [href]="stripeURL"
+        target="_blank" alt="change tier">{{'FEATURES.TIER.BTN' | translate}}</a>
+    </div>
+  </ng-container>
 
-        <div class="current-tier">
-            <a color="primary" [disabled]="!org.id || !customerValid || !stripeURL" mat-raised-button [href]="stripeURL" target="_blank"
-                alt="change tier">{{'FEATURES.TIER.BTN' | translate}}</a>
-        </div>
-    </ng-container>
+  <ng-template cnslHasRole [hasRole]="['iam.features.delete']">
+    <button *ngIf="serviceType === FeatureServiceType.MGMT && !isDefault" matTooltip="{{'POLICY.RESET' | translate}}"
+      color="warn" (click)="resetFeatures()" mat-stroked-button>
+      {{'POLICY.RESET' | translate}}
+    </button>
+  </ng-template>
 
-    <ng-template cnslHasRole [hasRole]="['iam.features.delete']">
-        <button *ngIf="serviceType === FeatureServiceType.MGMT && !isDefault"
-            matTooltip="{{'POLICY.RESET' | translate}}" color="warn" (click)="resetFeatures()" mat-stroked-button>
-            {{'POLICY.RESET' | translate}}
-        </button>
-    </ng-template>
+  <div class="divider"></div>
 
-    <div class="divider"></div>
+  <cnsl-info-section *ngIf="isDefault"> {{'POLICY.DEFAULTLABEL' | translate}}</cnsl-info-section>
+  <div class="content" *ngIf="features">
+    <div class="row">
+      <span class="left-desc">{{'FEATURES.DATA.AUDITLOGRETENTION' | translate}}</span>
+      <span class="fill-space"></span>
+      <span>{{features.auditLogRetention | timestampToRetention }} {{'FEATURES.RETENTIONDAYS' |
+        translate}}</span>
+    </div>
 
-    <cnsl-info-section *ngIf="isDefault"> {{'POLICY.DEFAULTLABEL' | translate}}</cnsl-info-section>
-    <div class="content" *ngIf="features">
-        <div class="row">
-          <span class="left-desc">{{'FEATURES.DATA.AUDITLOGRETENTION' | translate}}</span>
-          <span class="fill-space"></span>
-          <span>{{features.auditLogRetention | timestampToRetention }} {{'FEATURES.RETENTIONDAYS' |
-              translate}}</span>
-        </div>
+    <p class="feature-section">{{'FEATURES.HEADERS.LOGINPOLICY' | translate}}</p>
 
-        <p class="feature-section">{{'FEATURES.HEADERS.LOGINPOLICY' | translate}}</p>
-
-        <div class="row">
-          <div class="featureavatar green">
-            <i class="icon las la-sign-in-alt"></i>
-          </div>
-          <span class="left-desc">{{'FEATURES.DATA.LOGINPOLICYUSERNAMELOGIN' | translate}}</span>
-          <span class="fill-space"></span>
-          <template [ngTemplateOutlet]="templateRef"
-          [ngTemplateOutletContext]="{active: features.loginPolicyUsernameLogin}"></template>
-          <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.loginPolicyUsernameLogin"
-              *ngIf="(['iam.features.write'] | hasRole | async)">
-          </mat-slide-toggle>
-        </div>
-
-        <div class="row">
-          <div class="featureavatar green">
-            <i class="icon las la-sign-in-alt"></i>
-          </div>
-          <span class="left-desc">{{'FEATURES.DATA.LOGINPOLICYPASSWORDRESET' | translate}}</span>
-          <span class="fill-space"></span>
-          <template [ngTemplateOutlet]="templateRef"
-          [ngTemplateOutletContext]="{active: features.loginPolicyPasswordReset}"></template>
-          <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.loginPolicyPasswordReset"
-          *ngIf="(['iam.features.write'] | hasRole | async)">
+    <div class="row">
+      <div class="featureavatar green">
+        <i class="icon las la-sign-in-alt"></i>
+      </div>
+      <span class="left-desc">{{'FEATURES.DATA.LOGINPOLICYUSERNAMELOGIN' | translate}}</span>
+      <span class="fill-space"></span>
+      <template [ngTemplateOutlet]="templateRef"
+        [ngTemplateOutletContext]="{active: features.loginPolicyUsernameLogin}"></template>
+      <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl
+        [(ngModel)]="features.loginPolicyUsernameLogin" *ngIf="(['iam.features.write'] | hasRole | async)">
       </mat-slide-toggle>
-        </div>
-
-        <div class="row">
-          <div class="featureavatar green">
-            <i class="icon las la-sign-in-alt"></i>
-          </div>
-          <span class="left-desc">{{'FEATURES.DATA.LOGINPOLICYREGISTRATION' | translate}}</span>
-          <span class="fill-space"></span>
-          <template [ngTemplateOutlet]="templateRef"
-          [ngTemplateOutletContext]="{active: features.loginPolicyRegistration}"></template>
-          <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.loginPolicyRegistration"
-              *ngIf="(['iam.features.write'] | hasRole | async)">
-          </mat-slide-toggle>
-        </div>
-
-        <div class="row">
-          <div class="featureavatar green">
-            <i class="icon las la-sign-in-alt"></i>
-          </div>
-          <span class="left-desc">{{'FEATURES.DATA.LOGINPOLICYIDP' | translate}}</span>
-          <span class="fill-space"></span>
-          <template [ngTemplateOutlet]="templateRef"
-          [ngTemplateOutletContext]="{active: features.loginPolicyIdp}"></template>
-          <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.loginPolicyIdp"
-              *ngIf="(['iam.features.write'] | hasRole | async)">
-          </mat-slide-toggle>
-        </div>
-
-        <div class="row">
-          <div class="featureavatar green">
-            <i class="icon las la-sign-in-alt"></i>
-          </div>
-          <span class="left-desc">{{'FEATURES.DATA.LOGINPOLICYFACTORS' | translate}}</span>
-          <span class="fill-space"></span>
-          <template [ngTemplateOutlet]="templateRef"
-          [ngTemplateOutletContext]="{active: features.loginPolicyFactors}"></template>
-          <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.loginPolicyFactors"
-              *ngIf="(['iam.features.write'] | hasRole | async)">
-          </mat-slide-toggle>
-        </div>
-
-        <div class="row">
-          <div class="featureavatar green">
-            <i class="icon las la-sign-in-alt"></i>
-          </div>
-          <span class="left-desc">{{'FEATURES.DATA.LOGINPOLICYPASSWORDLESS' | translate}}</span>
-          <span class="fill-space"></span>
-          <template [ngTemplateOutlet]="templateRef"
-          [ngTemplateOutletContext]="{active: features.loginPolicyPasswordless}"></template>
-          <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.loginPolicyPasswordless"
-              *ngIf="(['iam.features.write'] | hasRole | async)">
-          </mat-slide-toggle>
-        </div>
-
-        <p class="feature-section">{{'FEATURES.HEADERS.PASSWORD' | translate}}</p>
-
-        <div class="row">
-          <div class="featureavatar yellow">
-            <mat-icon class="icon smaller" svgIcon="mdi_textbox_password"></mat-icon>
-          </div>
-
-          <span class="left-desc">{{'FEATURES.DATA.LOGINPOLICYCOMPLEXITYPOLICY' | translate}}</span>
-          <span class="fill-space"></span>
-          <template [ngTemplateOutlet]="templateRef"
-          [ngTemplateOutletContext]="{active: features.passwordComplexityPolicy}"></template>
-          <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.passwordComplexityPolicy"
-              *ngIf="(['iam.features.write'] | hasRole | async)">
-          </mat-slide-toggle>
-        </div>
-
-        <div class="row">
-          <div class="featureavatar yellow">
-            <mat-icon class="icon smaller" svgIcon="mdi_textbox_password"></mat-icon>
-          </div>
-
-          <span class="left-desc">{{'FEATURES.DATA.LOCKOUTPOLICY' | translate}}</span>
-          <span class="fill-space"></span>
-          <template [ngTemplateOutlet]="templateRef"
-          [ngTemplateOutletContext]="{active: features.lockoutPolicy}"></template>
-          <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.lockoutPolicy"
-              *ngIf="(['iam.features.write'] | hasRole | async)">
-          </mat-slide-toggle>
-        </div>
-
-        <p class="feature-section">{{'FEATURES.HEADERS.LABELPOLICY' | translate}}</p>
-
-        <div class="row">
-          <div class="featureavatar blue">
-            <i class="icon las la-swatchbook"></i>
-          </div>
-          <span class="left-desc">{{'FEATURES.DATA.LABELPOLICYPRIVATELABEL' | translate}}</span>
-          <span class="fill-space"></span>
-          <template [ngTemplateOutlet]="templateRef"
-          [ngTemplateOutletContext]="{active: features.labelPolicyPrivateLabel}"></template>
-          <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.labelPolicyPrivateLabel"
-              *ngIf="(['iam.features.write'] | hasRole | async)">
-          </mat-slide-toggle>
-        </div>
-
-        <div class="row">
-          <div class="featureavatar blue">
-            <i class="icon las la-swatchbook"></i>
-          </div>
-          <span class="left-desc">{{'FEATURES.DATA.LABELPOLICYWATERMARK' | translate}}</span>
-          <span class="fill-space"></span>
-          <template [ngTemplateOutlet]="templateRef"
-          [ngTemplateOutletContext]="{active: features.labelPolicyWatermark}"></template>
-          <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.labelPolicyWatermark"
-              *ngIf="(['iam.features.write'] | hasRole | async)">
-          </mat-slide-toggle>
-        </div>
-
-        <p class="feature-section">{{'FEATURES.HEADERS.DOMAIN' | translate}}</p>
-
-        <div class="row">
-          <div class="featureavatar purple">
-            <i class="icon las la-gem"></i>
-          </div>
-          <span class="left-desc">{{'FEATURES.DATA.CUSTOMDOMAIN' | translate}}</span>
-          <span class="fill-space"></span>
-          <template [ngTemplateOutlet]="templateRef"
-          [ngTemplateOutletContext]="{active: features.customDomain}"></template>
-          <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.customDomain"
-              *ngIf="(['iam.features.write'] | hasRole | async)">
-          </mat-slide-toggle>
-        </div>
-
-        <p class="feature-section">{{'FEATURES.HEADERS.TEXTSANDLINKS' | translate}}</p>
-
-        <div class="row">
-          <div class="featureavatar red">
-          <i class="icon las la-paragraph"></i>
-          </div>
-          <span class="left-desc">{{'FEATURES.DATA.CUSTOMTEXTMESSAGE' | translate}}</span>
-          <span class="fill-space"></span>
-          <template [ngTemplateOutlet]="templateRef"
-          [ngTemplateOutletContext]="{active: features.customTextMessage}"></template>
-          <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.customTextMessage"
-              *ngIf="(['iam.features.write'] | hasRole | async)">
-          </mat-slide-toggle>
-        </div>
-
-        <div class="row">
-          <div class="featureavatar red">
-            <i class="icon las la-paragraph"></i>
-          </div>
-          <span class="left-desc">{{'FEATURES.DATA.CUSTOMTEXTLOGIN' | translate}}</span>
-          <span class="fill-space"></span>
-          <template [ngTemplateOutlet]="templateRef"
-          [ngTemplateOutletContext]="{active: features.customTextLogin}"></template>
-          <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.customTextLogin"
-              *ngIf="(['iam.features.write'] | hasRole | async)">
-          </mat-slide-toggle>
-        </div>
-
-        <div class="row">
-          <div class="featureavatar black">
-            <i class="icon las la-file-contract"></i>
-          </div>
-          <span class="left-desc">{{'FEATURES.DATA.PRIVACYPOLICY' | translate}}</span>
-          <span class="fill-space"></span>
-          <template [ngTemplateOutlet]="templateRef"
-          [ngTemplateOutletContext]="{active: features.privacyPolicy}"></template>
-          <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.privacyPolicy"
-              *ngIf="(['iam.features.write'] | hasRole | async)">
-          </mat-slide-toggle>
-        </div>
-
-        <p class="feature-section">{{'FEATURES.HEADERS.METADATA' | translate}}</p>
-
-        <div class="row">
-          <div class="featureavatar blue">
-            <i class="icon las la-tags"></i>
-          </div>
-          <span class="left-desc">{{'FEATURES.DATA.METADATAUSER' | translate}}</span>
-          <span class="fill-space"></span>
-          <template [ngTemplateOutlet]="templateRef"
-                        [ngTemplateOutletContext]="{active: features.metadataUser}"></template>
-          <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.metadataUser"
-              *ngIf="(['iam.features.write'] | hasRole | async)">
-          </mat-slide-toggle>
-        </div>
     </div>
 
-    <div class="btn-container" *ngIf="(['iam.features.write'] | hasRole | async) === true">
-        <button (click)="savePolicy()" color="primary"
-            type="submit" mat-raised-button>{{ 'ACTIONS.SAVE' | translate
-            }}</button>
+    <div class="row">
+      <div class="featureavatar green">
+        <i class="icon las la-sign-in-alt"></i>
+      </div>
+      <span class="left-desc">{{'FEATURES.DATA.LOGINPOLICYPASSWORDRESET' | translate}}</span>
+      <span class="fill-space"></span>
+      <template [ngTemplateOutlet]="templateRef"
+        [ngTemplateOutletContext]="{active: features.loginPolicyPasswordReset}"></template>
+      <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl
+        [(ngModel)]="features.loginPolicyPasswordReset" *ngIf="(['iam.features.write'] | hasRole | async)">
+      </mat-slide-toggle>
     </div>
+
+    <div class="row">
+      <div class="featureavatar green">
+        <i class="icon las la-sign-in-alt"></i>
+      </div>
+      <span class="left-desc">{{'FEATURES.DATA.LOGINPOLICYREGISTRATION' | translate}}</span>
+      <span class="fill-space"></span>
+      <template [ngTemplateOutlet]="templateRef"
+        [ngTemplateOutletContext]="{active: features.loginPolicyRegistration}"></template>
+      <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl
+        [(ngModel)]="features.loginPolicyRegistration" *ngIf="(['iam.features.write'] | hasRole | async)">
+      </mat-slide-toggle>
+    </div>
+
+    <div class="row">
+      <div class="featureavatar green">
+        <i class="icon las la-sign-in-alt"></i>
+      </div>
+      <span class="left-desc">{{'FEATURES.DATA.LOGINPOLICYIDP' | translate}}</span>
+      <span class="fill-space"></span>
+      <template [ngTemplateOutlet]="templateRef"
+        [ngTemplateOutletContext]="{active: features.loginPolicyIdp}"></template>
+      <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl
+        [(ngModel)]="features.loginPolicyIdp" *ngIf="(['iam.features.write'] | hasRole | async)">
+      </mat-slide-toggle>
+    </div>
+
+    <div class="row">
+      <div class="featureavatar green">
+        <i class="icon las la-sign-in-alt"></i>
+      </div>
+      <span class="left-desc">{{'FEATURES.DATA.LOGINPOLICYFACTORS' | translate}}</span>
+      <span class="fill-space"></span>
+      <template [ngTemplateOutlet]="templateRef"
+        [ngTemplateOutletContext]="{active: features.loginPolicyFactors}"></template>
+      <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl
+        [(ngModel)]="features.loginPolicyFactors" *ngIf="(['iam.features.write'] | hasRole | async)">
+      </mat-slide-toggle>
+    </div>
+
+    <div class="row">
+      <div class="featureavatar green">
+        <i class="icon las la-sign-in-alt"></i>
+      </div>
+      <span class="left-desc">{{'FEATURES.DATA.LOGINPOLICYPASSWORDLESS' | translate}}</span>
+      <span class="fill-space"></span>
+      <template [ngTemplateOutlet]="templateRef"
+        [ngTemplateOutletContext]="{active: features.loginPolicyPasswordless}"></template>
+      <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl
+        [(ngModel)]="features.loginPolicyPasswordless" *ngIf="(['iam.features.write'] | hasRole | async)">
+      </mat-slide-toggle>
+    </div>
+
+    <p class="feature-section">{{'FEATURES.HEADERS.PASSWORD' | translate}}</p>
+
+    <div class="row">
+      <div class="featureavatar yellow">
+        <mat-icon class="icon smaller" svgIcon="mdi_textbox_password"></mat-icon>
+      </div>
+
+      <span class="left-desc">{{'FEATURES.DATA.LOGINPOLICYCOMPLEXITYPOLICY' | translate}}</span>
+      <span class="fill-space"></span>
+      <template [ngTemplateOutlet]="templateRef"
+        [ngTemplateOutletContext]="{active: features.passwordComplexityPolicy}"></template>
+      <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl
+        [(ngModel)]="features.passwordComplexityPolicy" *ngIf="(['iam.features.write'] | hasRole | async)">
+      </mat-slide-toggle>
+    </div>
+
+    <div class="row">
+      <div class="featureavatar yellow">
+        <mat-icon class="icon smaller" svgIcon="mdi_textbox_password"></mat-icon>
+      </div>
+
+      <span class="left-desc">{{'FEATURES.DATA.LOCKOUTPOLICY' | translate}}</span>
+      <span class="fill-space"></span>
+      <template [ngTemplateOutlet]="templateRef"
+        [ngTemplateOutletContext]="{active: features.lockoutPolicy}"></template>
+      <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl
+        [(ngModel)]="features.lockoutPolicy" *ngIf="(['iam.features.write'] | hasRole | async)">
+      </mat-slide-toggle>
+    </div>
+
+    <p class="feature-section">{{'FEATURES.HEADERS.LABELPOLICY' | translate}}</p>
+
+    <div class="row">
+      <div class="featureavatar blue">
+        <i class="icon las la-swatchbook"></i>
+      </div>
+      <span class="left-desc">{{'FEATURES.DATA.LABELPOLICYPRIVATELABEL' | translate}}</span>
+      <span class="fill-space"></span>
+      <template [ngTemplateOutlet]="templateRef"
+        [ngTemplateOutletContext]="{active: features.labelPolicyPrivateLabel}"></template>
+      <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl
+        [(ngModel)]="features.labelPolicyPrivateLabel" *ngIf="(['iam.features.write'] | hasRole | async)">
+      </mat-slide-toggle>
+    </div>
+
+    <div class="row">
+      <div class="featureavatar blue">
+        <i class="icon las la-swatchbook"></i>
+      </div>
+      <span class="left-desc">{{'FEATURES.DATA.LABELPOLICYWATERMARK' | translate}}</span>
+      <span class="fill-space"></span>
+      <template [ngTemplateOutlet]="templateRef"
+        [ngTemplateOutletContext]="{active: features.labelPolicyWatermark}"></template>
+      <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl
+        [(ngModel)]="features.labelPolicyWatermark" *ngIf="(['iam.features.write'] | hasRole | async)">
+      </mat-slide-toggle>
+    </div>
+
+    <p class="feature-section">{{'FEATURES.HEADERS.DOMAIN' | translate}}</p>
+
+    <div class="row">
+      <div class="featureavatar purple">
+        <i class="icon las la-gem"></i>
+      </div>
+      <span class="left-desc">{{'FEATURES.DATA.CUSTOMDOMAIN' | translate}}</span>
+      <span class="fill-space"></span>
+      <template [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="{active: features.customDomain}"></template>
+      <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl
+        [(ngModel)]="features.customDomain" *ngIf="(['iam.features.write'] | hasRole | async)">
+      </mat-slide-toggle>
+    </div>
+
+    <p class="feature-section">{{'FEATURES.HEADERS.TEXTSANDLINKS' | translate}}</p>
+
+    <div class="row">
+      <div class="featureavatar red">
+        <i class="icon las la-paragraph"></i>
+      </div>
+      <span class="left-desc">{{'FEATURES.DATA.CUSTOMTEXTMESSAGE' | translate}}</span>
+      <span class="fill-space"></span>
+      <template [ngTemplateOutlet]="templateRef"
+        [ngTemplateOutletContext]="{active: features.customTextMessage}"></template>
+      <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl
+        [(ngModel)]="features.customTextMessage" *ngIf="(['iam.features.write'] | hasRole | async)">
+      </mat-slide-toggle>
+    </div>
+
+    <div class="row">
+      <div class="featureavatar red">
+        <i class="icon las la-paragraph"></i>
+      </div>
+      <span class="left-desc">{{'FEATURES.DATA.CUSTOMTEXTLOGIN' | translate}}</span>
+      <span class="fill-space"></span>
+      <template [ngTemplateOutlet]="templateRef"
+        [ngTemplateOutletContext]="{active: features.customTextLogin}"></template>
+      <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl
+        [(ngModel)]="features.customTextLogin" *ngIf="(['iam.features.write'] | hasRole | async)">
+      </mat-slide-toggle>
+    </div>
+
+    <div class="row">
+      <div class="featureavatar black">
+        <i class="icon las la-file-contract"></i>
+      </div>
+      <span class="left-desc">{{'FEATURES.DATA.PRIVACYPOLICY' | translate}}</span>
+      <span class="fill-space"></span>
+      <template [ngTemplateOutlet]="templateRef"
+        [ngTemplateOutletContext]="{active: features.privacyPolicy}"></template>
+      <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl
+        [(ngModel)]="features.privacyPolicy" *ngIf="(['iam.features.write'] | hasRole | async)">
+      </mat-slide-toggle>
+    </div>
+
+    <p class="feature-section">{{'FEATURES.HEADERS.METADATA' | translate}}</p>
+
+    <div class="row">
+      <div class="featureavatar blue">
+        <i class="icon las la-tags"></i>
+      </div>
+      <span class="left-desc">{{'FEATURES.DATA.METADATAUSER' | translate}}</span>
+      <span class="fill-space"></span>
+      <template [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="{active: features.metadataUser}"></template>
+      <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl
+        [(ngModel)]="features.metadataUser" *ngIf="(['iam.features.write'] | hasRole | async)">
+      </mat-slide-toggle>
+    </div>
+
+    <div class="row">
+      <div class="featureavatar pink">
+        <i class="icon las la-exchange-alt"></i>
+      </div>
+      <span class="left-desc">{{'FEATURES.DATA.FLOWS' | translate}}</span>
+      <span class="fill-space"></span>
+      <template [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="{active: features.actions}"></template>
+      <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.actions"
+        *ngIf="(['iam.features.write'] | hasRole | async)">
+      </mat-slide-toggle>
+    </div>
+  </div>
+
+  <div class="btn-container" *ngIf="(['iam.features.write'] | hasRole | async) === true">
+    <button (click)="savePolicy()" color="primary" type="submit" mat-raised-button>{{ 'ACTIONS.SAVE' | translate
+      }}</button>
+  </div>
 </cnsl-detail-layout>
 
 <ng-template #templateRef let-active="active">
   <span class="state" [ngClass]="{'active': active, 'inactive': !active}">
     {{active ? ('FEATURES.AVAILABLE' | translate) : ('FEATURES.UNAVAILABLE' | translate)}}
-  </span>      
+  </span>
 </ng-template>

console/src/app/modules/features/features.component.scss

@@ -109,6 +109,10 @@
         background: linear-gradient(40deg, #3b82f6 30%, #4f46e5);
       }
 
+      &.pink {
+        background: linear-gradient(40deg, #db2777 30%, #be185d);
+      }
+
       &.yellow {
         background: linear-gradient(40deg, #f59e0b 30%, #b45309);
       }

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

@@ -167,6 +167,7 @@ export class FeaturesComponent implements OnDestroy {
         req.setPrivacyPolicy(this.features.privacyPolicy);
         req.setMetadataUser(this.features.metadataUser);
         req.setLockoutPolicy(this.features.lockoutPolicy);
+        req.setActions(this.features.actions);
 
         this.adminService.setOrgFeatures(req).then(() => {
           this.toast.showInfo('POLICY.TOAST.SET', true);
@@ -191,6 +192,7 @@ export class FeaturesComponent implements OnDestroy {
         dreq.setCustomTextMessage(this.features.customTextMessage);
         dreq.setMetadataUser(this.features.metadataUser);
         dreq.setLockoutPolicy(this.features.lockoutPolicy);
+        dreq.setActions(this.features.actions);
 
         this.adminService.setDefaultFeatures(dreq).then(() => {
           this.toast.showInfo('POLICY.TOAST.SET', true);

console/src/app/pages/actions/action-table/action-table.component.html

@@ -0,0 +1,66 @@
+<cnsl-refresh-table [loading]="loading$ | async" (refreshed)="refreshPage()" [dataSize]="dataSource?.data?.length ?? 0"
+  [timestamp]="actionsResult?.details?.viewTimestamp" [selection]="selection">
+  <div actions>
+    <a color="primary" mat-raised-button (click)="openAddAction()">
+      <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
+    </a>
+  </div>
+
+  <div class="table-wrapper">
+    <table class="table" mat-table [dataSource]="dataSource">
+      <ng-container matColumnDef="select">
+        <th mat-header-cell *matHeaderCellDef>
+          <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
+            [checked]="selection.hasValue() && isAllSelected()"
+            [indeterminate]="selection.hasValue() && !isAllSelected()">
+          </mat-checkbox>
+        </th>
+        <td mat-cell *matCellDef="let key">
+          <mat-checkbox color="primary" (click)="$event.stopPropagation()"
+            (change)="$event ? selection.toggle(key) : null" [checked]="selection.isSelected(key)">
+          </mat-checkbox>
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="id">
+        <th mat-header-cell *matHeaderCellDef> {{ 'FLOWS.ID' | translate }} </th>
+        <td mat-cell *matCellDef="let action"> {{ action?.id }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef> {{ 'FLOWS.NAME' | translate }} </th>
+        <td mat-cell *matCellDef="let action"> {{ action?.name }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="state">
+        <th mat-header-cell *matHeaderCellDef> {{ 'FLOWS.STATE' | translate }} </th>
+        <td mat-cell *matCellDef="let action">
+          <span class="state"
+            [ngClass]="{'active': action.state === ActionState.ACTION_STATE_ACTIVE,'inactive': action.state === ActionState.ACTION_STATE_INACTIVE }">
+            {{'FLOWS.STATES.'+action.state | translate}}</span>
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="timeout">
+        <th mat-header-cell *matHeaderCellDef> {{ 'FLOWS.TIMEOUT' | translate }} </th>
+        <td mat-cell *matCellDef="let key">
+          {{key.timeout | durationToSeconds}}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="allowedToFail">
+        <th mat-header-cell *matHeaderCellDef> {{ 'FLOWS.ALLOWEDTOFAIL' | translate }} </th>
+        <td mat-cell *matCellDef="let key">
+          {{key.allowedToFail}}
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr class="highlight" mat-row *matRowDef="let action; columns: displayedColumns;" (click)="openDialog(action)">
+      </tr>
+    </table>
+    <cnsl-paginator #paginator class="paginator" [timestamp]="actionsResult?.details?.viewTimestamp"
+      [length]="actionsResult?.details?.totalResult || 0" [pageSize]="10" [pageSizeOptions]="[5, 10, 20]"
+      (page)="changePage($event)"></cnsl-paginator>
+  </div>
+</cnsl-refresh-table>

console/src/app/pages/actions/action-table/action-table.component.scss

@@ -0,0 +1,37 @@
+
+.table-wrapper {
+  overflow: auto;
+
+  .table,
+  .paginator {
+    width: 100%;
+
+    td,
+    th {
+      padding: 0 1rem;
+
+      &:first-child {
+        padding-left: 0;
+        padding-right: 1rem;
+      }
+
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+  }
+}
+
+tr {
+  outline: none;
+
+  button {
+    visibility: hidden;
+  }
+
+  &:hover {
+    button {
+      visibility: visible;
+    }
+  }
+}

console/src/app/pages/actions/action-table/action-table.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ActionTableComponent } from './action-table.component';
+
+describe('ActionTableComponent', () => {
+  let component: ActionTableComponent;
+  let fixture: ComponentFixture<ActionTableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ActionTableComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ActionTableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

console/src/app/pages/actions/action-table/action-table.component.ts

@@ -0,0 +1,128 @@
+import { SelectionModel } from '@angular/cdk/collections';
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { PageEvent } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
+import { TranslateService } from '@ngx-translate/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { PaginatorComponent } from 'src/app/modules/paginator/paginator.component';
+import { Action, ActionState } from 'src/app/proto/generated/zitadel/action_pb';
+import {
+  CreateActionRequest,
+  ListActionsResponse,
+  UpdateActionRequest,
+} from 'src/app/proto/generated/zitadel/management_pb';
+import { ManagementService } from 'src/app/services/mgmt.service';
+import { ToastService } from 'src/app/services/toast.service';
+
+import { AddActionDialogComponent } from '../add-action-dialog/add-action-dialog.component';
+
+@Component({
+  selector: 'cnsl-action-table',
+  templateUrl: './action-table.component.html',
+  styleUrls: ['./action-table.component.scss']
+})
+export class ActionTableComponent implements OnInit {
+  @ViewChild(PaginatorComponent) public paginator!: PaginatorComponent;
+  public dataSource: MatTableDataSource<Action.AsObject> = new MatTableDataSource<Action.AsObject>();
+  public selection: SelectionModel<Action.AsObject> = new SelectionModel<Action.AsObject>(true, []);
+  public actionsResult!: ListActionsResponse.AsObject;
+  private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+  public loading$: Observable<boolean> = this.loadingSubject.asObservable();
+  @Input() public displayedColumns: string[] = ['select', 'id', 'name', 'state', 'timeout', 'allowedToFail'];
+
+  @Output() public changedSelection: EventEmitter<Array<Action.AsObject>> = new EventEmitter();
+
+  public ActionState: any = ActionState;
+  constructor(public translate: TranslateService, private mgmtService: ManagementService, private dialog: MatDialog,
+    private toast: ToastService) {
+    this.selection.changed.subscribe(() => {
+      this.changedSelection.emit(this.selection.selected);
+    });
+  }
+
+  public ngOnInit(): void {
+    this.getData(10, 0);
+  }
+
+
+  public isAllSelected(): boolean {
+    const numSelected = this.selection.selected.length;
+    const numRows = this.dataSource.data.length;
+    return numSelected === numRows;
+  }
+
+  public masterToggle(): void {
+    this.isAllSelected() ?
+      this.selection.clear() :
+      this.dataSource.data.forEach(row => this.selection.select(row));
+  }
+
+
+  public changePage(event: PageEvent): void {
+    this.getData(event.pageSize, event.pageIndex * event.pageSize);
+  }
+
+  public deleteKey(action: Action.AsObject): void {
+    this.mgmtService.deleteAction(action.id).then(() => {
+      this.selection.clear();
+      this.toast.showInfo('FLOWS.TOAST.SELECTEDKEYSDELETED', true);
+      this.getData(10, 0);
+    }).catch(error => {
+      this.toast.showError(error);
+    });
+  }
+
+  public openAddAction(): void {
+    const dialogRef = this.dialog.open(AddActionDialogComponent, {
+      data: {},
+      width: '400px',
+    });
+
+    dialogRef.afterClosed().subscribe((req: CreateActionRequest) => {
+      if (req) {
+        this.mgmtService.createAction(req).then(resp => {
+          this.refreshPage();
+        }).catch((error: any) => {
+          this.toast.showError(error);
+        });
+      }
+    });
+  }
+
+  public openDialog(action: Action.AsObject): void {
+    const dialogRef = this.dialog.open(AddActionDialogComponent, {
+      data: {
+        action: action,
+      },
+      width: '400px',
+    });
+
+    dialogRef.afterClosed().subscribe((req: UpdateActionRequest) => {
+      if (req) {
+        this.mgmtService.updateAction(req).then(resp => {
+          this.refreshPage();
+        }).catch((error: any) => {
+          this.toast.showError(error);
+        });
+      }
+    });
+  }
+
+  private async getData(limit: number, offset: number): Promise<void> {
+    this.loadingSubject.next(true);
+    
+    this.mgmtService.listActions(limit, offset).then(resp => {
+      this.actionsResult = resp;
+      this.dataSource.data = this.actionsResult.resultList;
+      this.loadingSubject.next(false);
+    }).catch((error: any) => {
+      this.toast.showError(error);
+      this.loadingSubject.next(false);
+    });
+  }
+
+  public refreshPage(): void {
+    this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize);
+  }
+}

console/src/app/pages/actions/actions-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { ActionsComponent } from './actions.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ActionsComponent,
+},
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ActionsRoutingModule { }

console/src/app/pages/actions/actions.component.html

@@ -0,0 +1,66 @@
+<div class="enlarged-container">
+  <h1>{{ 'FLOWS.TITLE' | translate }}</h1>
+  <p class="desc">{{'FLOWS.DESCRIPTION' | translate }}</p>
+
+  <cnsl-info-section *ngIf="(['actions'] | hasFeature | async) === false" [featureLink]="['/org/features']" class="info"
+    [type]="InfoSectionType.WARN">
+    <span [innerHTML]="'FEATURES.NOTAVAILABLE' | translate: ({value: 'actions'})"></span>
+  </cnsl-info-section>
+
+  <div class="title-section">
+    <h2>{{'FLOWS.ACTIONSTITLE' | translate}}</h2>
+    <i class="las la-code"></i>
+  </div>
+
+  <ng-template cnslHasRole [hasRole]="[ 'org.action.read']">
+    <cnsl-action-table (changedSelection)="selection = $event"></cnsl-action-table>
+  </ng-template>
+
+  <div class="title-section">
+    <h2>{{'FLOWS.FLOWSTITLE' | translate}}</h2>
+    <i class="las la-exchange-alt"></i>
+  </div>
+
+  <ng-template cnslHasRole [hasRole]="[ 'org.flow.read']">
+    <div *ngIf="flow" class="flow">
+      <cnsl-form-field class="formfield" appearance="outline">
+        <cnsl-label>{{ 'FLOWS.FLOWTYPE' | translate }}</cnsl-label>
+        <mat-select [formControl]="typeControl">
+          <mat-option *ngFor="let type of typesForSelection" [value]="type">
+            {{ 'FLOWS.TYPES.'+type | translate }}
+          </mat-option>
+        </mat-select>
+      </cnsl-form-field>
+
+      <div class="topelements">
+        <div class="flow-type mat-elevation-z1">
+          <span>{{'FLOWS.TYPES.'+flow.type | translate}}</span>
+          <button (click)="clearFlow()" color="warn" mat-raised-button>{{'ACTIONS.CLEAR' | translate}}</button>
+        </div>
+      </div>
+
+      <div class="trigger-wrapper">
+        <div *ngFor="let trigger of flow.triggerActionsList; index as i" class="trigger mat-elevation-z1">
+          <mat-icon svgIcon="mdi_arrow_right_bottom" class="icon"></mat-icon>
+          <span>{{'FLOWS.TRIGGERTYPES.'+trigger.triggerType | translate}}</span>
+          <span class="fill-space"></span>
+          <div class="action-wrapper" cdkDropList (cdkDropListDropped)="drop(i, trigger.actionsList, $event)">
+            <div cdkDrag cdkDragLockAxis="y" cdkDragBoundary=".action-wrapper" class="action"
+              *ngFor="let action of trigger.actionsList">
+              <i class="las la-code"></i>
+              <span>{{action.name}}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="topbottomline"></div>
+
+        <button class="add-btn" mat-raised-button color="primary" (click)="openAddTrigger()">
+          <span>{{'ACTIONS.NEW' | translate}}</span>
+          <span *ngIf="selection && selection.length">&nbsp;({{selection.length}})</span>
+          <mat-icon>add</mat-icon>
+        </button>
+      </div>
+    </div>
+  </ng-template>
+</div>

console/src/app/pages/actions/actions.component.scss

@@ -0,0 +1,124 @@
+h1 {
+  margin: 0;
+}
+
+.desc {
+  color: var(--grey);
+  margin-bottom: 2rem;
+  font-size: 14px;
+}
+
+.title-section {
+  display: flex;
+  align-items: center;
+  margin-top: 1rem;
+
+  h2 {
+    margin: 0;
+  }
+
+  i {
+    margin-left: .5rem;
+  }
+}
+
+.flow {
+  display: flex;
+  flex-direction: column;
+  max-width: 1000px;
+
+  .flow-type {
+    padding: 1rem 1rem;
+    margin: .5rem 0;
+    border-radius: .5rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .topelements {
+    border: 3px solid var(--color-main);
+    border-radius: 1rem;
+    padding: 0 .5rem;
+  }
+
+  .trigger-wrapper {
+    padding-left: 100px;
+    position: relative;
+
+    .topbottomline {
+      position: absolute;
+      top: 0;
+      bottom: 100px;
+      left: 120px;
+      width: 3px;
+      z-index: -1;
+      background-color: var(--color-main);
+    }
+
+    .trigger {
+      padding: .5rem 1rem;
+      border-radius: .5rem;
+      display: flex;
+      align-items: center;
+      background: var(--color-main);
+      color: white;
+      margin: .5rem 0;
+      min-height: 40px;
+
+      .icon {
+        margin-right: 1rem;
+      }
+
+      .fill-space {
+        flex: 1;
+      }
+
+      .action-wrapper {
+        padding: 0 .5rem;
+
+        .action {
+          display: flex;
+          align-items: center;
+          font-size: 14px;
+          padding: .5rem 0;
+          cursor: move;
+
+          i {
+            margin-right: .5rem;
+          }
+        }
+      }
+    }
+  }
+
+  .add-btn {
+    display: flex;
+    align-items: center;
+    align-self: flex-start;
+    margin: 1rem 0;
+  }
+}
+
+.cdk-drag-preview {
+  color: white;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  border-radius: .5rem;
+  padding: 0 .5rem;
+  background-color: var(--color-main);
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
+
+  i {
+    margin-right: .5rem;
+  }
+}
+
+.cdk-drag-placeholder {
+  opacity: 0;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, .2, 1);
+}

console/src/app/pages/actions/actions.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ActionsComponent } from './actions.component';
+
+describe('ActionsComponent', () => {
+  let component: ActionsComponent;
+  let fixture: ComponentFixture<ActionsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ActionsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ActionsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

console/src/app/pages/actions/actions.component.ts

@@ -0,0 +1,109 @@
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { Component } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
+import { InfoSectionType } from 'src/app/modules/info-section/info-section.component';
+import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
+import { Action, Flow, FlowType, TriggerType } from 'src/app/proto/generated/zitadel/action_pb';
+import { SetTriggerActionsRequest } from 'src/app/proto/generated/zitadel/management_pb';
+import { ManagementService } from 'src/app/services/mgmt.service';
+import { ToastService } from 'src/app/services/toast.service';
+
+import { AddFlowDialogComponent } from './add-flow-dialog/add-flow-dialog.component';
+
+@Component({
+  selector: 'cnsl-actions',
+  templateUrl: './actions.component.html',
+  styleUrls: ['./actions.component.scss'],
+})
+export class ActionsComponent {
+  public flow!: Flow.AsObject;
+  public flowType: FlowType = FlowType.FLOW_TYPE_EXTERNAL_AUTHENTICATION;
+
+  public typeControl: FormControl = new FormControl(FlowType.FLOW_TYPE_EXTERNAL_AUTHENTICATION);
+
+  public typesForSelection: FlowType[] = [FlowType.FLOW_TYPE_EXTERNAL_AUTHENTICATION];
+
+  public selection: Action.AsObject[] = [];
+  public InfoSectionType: any = InfoSectionType;
+
+  constructor(private mgmtService: ManagementService, private dialog: MatDialog, private toast: ToastService) {
+    this.loadFlow();
+  }
+
+  private loadFlow() {
+    this.mgmtService.getFlow(this.flowType).then((flowResponse) => {
+      if (flowResponse.flow) this.flow = flowResponse.flow;
+    });
+  }
+
+  public clearFlow(): void {
+    const dialogRef = this.dialog.open(WarnDialogComponent, {
+      data: {
+        confirmKey: 'ACTIONS.CLEAR',
+        cancelKey: 'ACTIONS.CANCEL',
+        titleKey: 'FLOWS.DIALOG.CLEAR.TITLE',
+        descriptionKey: 'FLOWS.DIALOG.CLEAR.DESCRIPTION',
+      },
+      width: '400px',
+    });
+
+    dialogRef.afterClosed().subscribe((resp) => {
+      if (resp) {
+        this.mgmtService
+          .clearFlow(this.flowType)
+          .then((resp) => {
+            this.loadFlow();
+          })
+          .catch((error: any) => {
+            this.toast.showError(error);
+          });
+      }
+    });
+  }
+
+  public openAddTrigger(): void {
+    const dialogRef = this.dialog.open(AddFlowDialogComponent, {
+      data: {
+        flowType: this.flowType,
+        triggerType: TriggerType.TRIGGER_TYPE_POST_AUTHENTICATION,
+        actions: this.selection && this.selection.length ? this.selection : [],
+      },
+      width: '400px',
+    });
+
+    dialogRef.afterClosed().subscribe((req: SetTriggerActionsRequest) => {
+      if (req) {
+        this.mgmtService
+          .setTriggerActions(req.getActionIdsList(), req.getFlowType(), req.getTriggerType())
+          .then((resp) => {
+            this.loadFlow();
+          })
+          .catch((error: any) => {
+            this.toast.showError(error);
+          });
+      }
+    });
+  }
+
+  drop(triggerActionsListIndex: number, array: any[], event: CdkDragDrop<Action.AsObject[]>) {
+    moveItemInArray(array, event.previousIndex, event.currentIndex);
+    this.saveFlow(triggerActionsListIndex);
+  }
+
+  saveFlow(index: number) {
+    console.log(this.flow.triggerActionsList[index].actionsList.map((action) => action.id));
+    this.mgmtService
+      .setTriggerActions(
+        this.flow.triggerActionsList[index].actionsList.map((action) => action.id),
+        this.flowType,
+        this.flow.triggerActionsList[index].triggerType,
+      )
+      .then((updateResponse) => {
+        this.toast.showInfo('FLOWS.TOAST.ACTIONSSET', true);
+      })
+      .catch((error) => {
+        this.toast.showError(error);
+      });
+  }
+}

console/src/app/pages/actions/actions.module.ts

@@ -0,0 +1,60 @@
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
+import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
+import { FormFieldModule } from 'src/app/modules/form-field/form-field.module';
+import { InfoSectionModule } from 'src/app/modules/info-section/info-section.module';
+import { InputModule } from 'src/app/modules/input/input.module';
+import { PaginatorModule } from 'src/app/modules/paginator/paginator.module';
+import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
+import { WarnDialogModule } from 'src/app/modules/warn-dialog/warn-dialog.module';
+import { DurationToSecondsPipeModule } from 'src/app/pipes/duration-to-seconds-pipe/duration-to-seconds-pipe.module';
+import { HasFeaturePipeModule } from 'src/app/pipes/has-feature-pipe/has-feature-pipe.module';
+import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
+import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';
+
+import { ActionTableComponent } from './action-table/action-table.component';
+import { ActionsRoutingModule } from './actions-routing.module';
+import { ActionsComponent } from './actions.component';
+import { AddActionDialogComponent } from './add-action-dialog/add-action-dialog.component';
+import { AddFlowDialogComponent } from './add-flow-dialog/add-flow-dialog.component';
+
+@NgModule({
+  declarations: [ActionsComponent, ActionTableComponent, AddActionDialogComponent, AddFlowDialogComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ActionsRoutingModule,
+    TranslateModule,
+    MatDialogModule,
+    RefreshTableModule,
+    MatTableModule,
+    PaginatorModule,
+    MatButtonModule,
+    ReactiveFormsModule,
+    MatIconModule,
+    DurationToSecondsPipeModule,
+    TimestampToDatePipeModule,
+    LocalizedDatePipeModule,
+    HasRoleModule,
+    MatTooltipModule,
+    MatCheckboxModule,
+    InputModule,
+    FormFieldModule,
+    MatSelectModule,
+    WarnDialogModule,
+    DragDropModule,
+    InfoSectionModule,
+    HasFeaturePipeModule,
+  ],
+})
+export class ActionsModule {}

console/src/app/pages/actions/add-action-dialog/add-action-dialog.component.html

@@ -0,0 +1,39 @@
+<span *ngIf="!id" class="title" mat-dialog-title>{{'FLOWS.DIALOG.ADD.TITLE' | translate}}</span>
+<span *ngIf="id" class="title" mat-dialog-title>{{'FLOWS.DIALOG.UPDATE.TITLE' | translate}}</span>
+
+<div mat-dialog-content>
+  <!-- <p class="desc"> {{'FLOWS.DIALOG.ADD.DESCRIPTION' | translate}}</p> -->
+
+  <cnsl-form-field class="form-field" appearance="outline">
+    <cnsl-label>{{'FLOWS.NAME' | translate}}</cnsl-label>
+    <input cnslInput [(ngModel)]="name">
+  </cnsl-form-field>
+
+  <cnsl-form-field class="form-field" appearance="outline">
+    <cnsl-label>{{'FLOWS.SCRIPT' | translate}}</cnsl-label>
+    <textarea class="script" cnslInput [(ngModel)]="script"></textarea>
+  </cnsl-form-field>
+
+  <cnsl-form-field class="form-field" appearance="outline">
+    <cnsl-label>{{'FLOWS.TIMEOUTINSEC' | translate}}</cnsl-label>
+    <input type="number" cnslInput [(ngModel)]="durationInSec">
+  </cnsl-form-field>
+
+  <mat-checkbox [(ngModel)]="allowedToFail">{{'FLOWS.ALLOWEDTOFAIL' | translate}}</mat-checkbox>
+</div>
+<div mat-dialog-actions class=" action">
+  <button *ngIf="id" mat-stroked-button color="warn" (click)="deleteAndCloseDialog()">
+    {{'ACTIONS.DELETE' | translate}}
+  </button>
+
+  <span class="fill-space"></span>
+
+  <button mat-button (click)="closeDialog()">
+    {{'ACTIONS.CANCEL' | translate}}
+  </button>
+
+  <button color="primary" mat-raised-button class="ok-button" [disabled]="false" (click)="closeDialogWithSuccess()">
+    <span *ngIf="!id">{{'ACTIONS.ADD' | translate}}</span>
+    <span *ngIf="id">{{'ACTIONS.SAVE' | translate}}</span>
+  </button>
+</div>

console/src/app/pages/actions/add-action-dialog/add-action-dialog.component.scss

@@ -0,0 +1,27 @@
+.title {
+  font-size: 1.2rem;
+  margin-top: 0;
+}
+
+.desc {
+  color: var(--grey);
+  font-size: .9rem;
+}
+
+.script {
+  min-height: 200px;
+}
+
+.action {
+  display: flex;
+  align-items: center;
+  margin-top: 1rem;
+
+  .fill-space {
+    flex: 1;
+  }
+
+  .ok-button {
+    margin-left: .5rem;
+  }
+}

console/src/app/pages/actions/add-action-dialog/add-action-dialog.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { AddKeyDialogComponent } from './add-key-dialog.component';
+
+describe('AddKeyDialogComponent', () => {
+    let component: AddKeyDialogComponent;
+    let fixture: ComponentFixture<AddKeyDialogComponent>;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            declarations: [AddKeyDialogComponent],
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(AddKeyDialogComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

console/src/app/pages/actions/add-action-dialog/add-action-dialog.component.ts

@@ -0,0 +1,99 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { Duration } from 'google-protobuf/google/protobuf/duration_pb';
+import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
+import { Action } from 'src/app/proto/generated/zitadel/action_pb';
+import { CreateActionRequest, UpdateActionRequest } from 'src/app/proto/generated/zitadel/management_pb';
+import { ManagementService } from 'src/app/services/mgmt.service';
+import { ToastService } from 'src/app/services/toast.service';
+
+
+@Component({
+    selector: 'cnsl-add-action-dialog',
+    templateUrl: './add-action-dialog.component.html',
+    styleUrls: ['./add-action-dialog.component.scss'],
+})
+export class AddActionDialogComponent {
+    public name: string = '';
+    public script: string = '';
+    public durationInSec: number = 10;
+    public allowedToFail: boolean = false;
+
+    public id: string = '';
+    
+    constructor(
+      private toast: ToastService,
+      private mgmtService: ManagementService,
+      private dialog: MatDialog,
+        public dialogRef: MatDialogRef<AddActionDialogComponent>,
+        @Inject(MAT_DIALOG_DATA) public data: any,
+    ) {
+       if (data && data.action) {
+        const action: Action.AsObject = data.action;
+        this.name = action.name;
+        this.script = action.script;
+        if (action.timeout?.seconds) {
+          this.durationInSec = action.timeout?.seconds;
+        }
+        this.allowedToFail = action.allowedToFail;
+        this.id = action.id;
+       }
+    }
+
+    public closeDialog(): void {
+        this.dialogRef.close(false);
+    }
+
+    public closeDialogWithSuccess(): void {
+      if (this.id) {
+        const req = new UpdateActionRequest();
+        req.setId(this.id);
+        req.setName(this.name);
+        req.setScript(this.script);
+
+        const duration = new Duration();
+        duration.setNanos(0);
+        duration.setSeconds(this.durationInSec);
+
+        req.setAllowedToFail(this.allowedToFail);
+
+        req.setTimeout(duration)
+        this.dialogRef.close(req);
+      } else {
+        const req = new CreateActionRequest();
+        req.setName(this.name);
+        req.setScript(this.script);
+
+        const duration = new Duration();
+        duration.setNanos(0);
+        duration.setSeconds(this.durationInSec);
+
+        req.setAllowedToFail(this.allowedToFail);
+
+        req.setTimeout(duration)
+        this.dialogRef.close(req);
+      }
+    }
+
+    public deleteAndCloseDialog(): void {
+      const dialogRef = this.dialog.open(WarnDialogComponent, {
+        data: {
+          confirmKey: 'ACTIONS.CLEAR',
+          cancelKey: 'ACTIONS.CANCEL',
+          titleKey: 'FLOWS.DIALOG.DELETEACTION.TITLE',
+          descriptionKey: 'FLOWS.DIALOG.DELETEACTION.DESCRIPTION',
+        },
+        width: '400px',
+      });
+
+      dialogRef.afterClosed().subscribe(resp => {
+        if (resp) {
+          this.mgmtService.deleteAction(this.id).then(resp => {
+            this.dialogRef.close();
+          }).catch((error: any) => {
+            this.toast.showError(error);
+          });
+        }
+      });
+    }
+}

console/src/app/pages/actions/add-flow-dialog/add-flow-dialog.component.html

@@ -0,0 +1,42 @@
+<span class="title" mat-dialog-title>{{'FLOWS.DIALOG.ADD.TITLE' | translate}}</span>
+
+<div mat-dialog-content>
+  <!-- <p class="desc"> {{'FLOWS.DIALOG.ADD.DESCRIPTION' | translate}}</p> -->
+  <form *ngIf="form" [formGroup]="form">
+    <cnsl-form-field class="form-field" appearance="outline">
+      <cnsl-label>{{'FLOWS.FLOWTYPE' | translate}}</cnsl-label>
+      <mat-select formControlName="flowType">
+        <mat-option *ngFor="let type of typesForSelection" [value]="type">
+          {{ 'FLOWS.TYPES.'+type | translate }}
+        </mat-option>
+      </mat-select>
+    </cnsl-form-field>
+
+    <cnsl-form-field class="form-field" appearance="outline">
+      <cnsl-label>{{'FLOWS.TRIGGERTYPE' | translate}}</cnsl-label>
+      <mat-select formControlName="triggerType" name="triggerType">
+        <mat-option *ngFor="let type of triggerTypesForSelection" [value]="type">
+          {{ 'FLOWS.TRIGGERTYPES.'+type | translate }}
+        </mat-option>
+      </mat-select>
+    </cnsl-form-field>
+
+    <cnsl-form-field class="form-field" appearance="outline">
+      <cnsl-label>{{'FLOWS.ACTIONS' | translate}}</cnsl-label>
+      <mat-select formControlName="actionIdsList" name="actionIdsList" multiple>
+        <mat-option *ngFor="let action of actions" [value]="action.id">
+          {{ action.name }}
+        </mat-option>
+      </mat-select>
+    </cnsl-form-field>
+  </form>
+</div>
+<div mat-dialog-actions class=" action">
+  <button mat-button (click)="closeDialog()">
+    {{'ACTIONS.CANCEL' | translate}}
+  </button>
+
+  <button color="primary" mat-raised-button class="ok-button" [disabled]="false" (click)="closeDialogWithSuccess()">
+    <span>{{'ACTIONS.SAVE' | translate}}</span>
+  </button>
+</div>

console/src/app/pages/actions/add-flow-dialog/add-flow-dialog.component.scss

@@ -0,0 +1,23 @@
+.title {
+  font-size: 1.2rem;
+  margin-top: 0;
+}
+
+.desc {
+  color: var(--grey);
+  font-size: .9rem;
+}
+
+.script {
+  min-height: 200px;
+}
+
+.action {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 1rem;
+
+  .ok-button {
+    margin-left: .5rem;
+  }
+}

console/src/app/pages/actions/add-flow-dialog/add-flow-dialog.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { AddKeyDialogComponent } from './add-key-dialog.component';
+
+describe('AddKeyDialogComponent', () => {
+    let component: AddKeyDialogComponent;
+    let fixture: ComponentFixture<AddKeyDialogComponent>;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            declarations: [AddKeyDialogComponent],
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(AddKeyDialogComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

console/src/app/pages/actions/add-flow-dialog/add-flow-dialog.component.ts

@@ -0,0 +1,78 @@
+import { Component, Inject } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { Action, FlowType, TriggerType } from 'src/app/proto/generated/zitadel/action_pb';
+import { SetTriggerActionsRequest } from 'src/app/proto/generated/zitadel/management_pb';
+import { ManagementService } from 'src/app/services/mgmt.service';
+import { ToastService } from 'src/app/services/toast.service';
+
+
+@Component({
+    selector: 'cnsl-add-flow-dialog',
+    templateUrl: './add-flow-dialog.component.html',
+    styleUrls: ['./add-flow-dialog.component.scss'],
+})
+export class AddFlowDialogComponent {
+    public actions: Action.AsObject[] = [];
+    public typesForSelection: FlowType[] = [
+      FlowType.FLOW_TYPE_EXTERNAL_AUTHENTICATION,
+    ];
+    public triggerTypesForSelection: TriggerType[] = [
+      TriggerType.TRIGGER_TYPE_POST_AUTHENTICATION,
+      TriggerType.TRIGGER_TYPE_POST_CREATION,
+      TriggerType.TRIGGER_TYPE_PRE_CREATION,      
+    ];
+    
+    public form!: FormGroup;
+    constructor(
+      private toast: ToastService,
+      private mgmtService: ManagementService,
+      private fb: FormBuilder,
+      public dialogRef: MatDialogRef<AddFlowDialogComponent>,
+      @Inject(MAT_DIALOG_DATA) public data: any,
+    ) {
+      this.form = this.fb.group({
+        flowType: [data.flowType ? data.flowType : '', [Validators.required]],
+        triggerType: [data.triggerType ? data.triggerType : '', [Validators.required]],
+        actionIdsList: [data.actions ? (data.actions as Action.AsObject[]).map(a => a.id) : [], [Validators.required]],
+      });
+      this.getActionIds();
+    }
+
+    private getActionIds(): Promise<void> {
+      return this.mgmtService.listActions().then(resp => {
+        this.actions = resp.resultList;
+      }).catch((error: any) => {
+        this.toast.showError(error);
+      });
+    }
+
+    public closeDialog(): void {
+        this.dialogRef.close(false);
+    }
+
+    public closeDialogWithSuccess(): void {
+      // if (this.id) {
+        // const req = new UpdateActionRequest();
+        // req.setId(this.id);
+        // req.setName(this.name);
+        // req.setScript(this.script);
+
+        // const duration = new Duration();
+        // duration.setNanos(0);
+        // duration.setSeconds(this.durationInSec);
+
+        // req.setAllowedToFail(this.allowedToFail);
+
+        // req.setTimeout(duration)
+        // this.dialogRef.close(req);
+      // } else {
+        const req = new SetTriggerActionsRequest();
+        req.setActionIdsList(this.form.get('actionIdsList')?.value);
+        req.setFlowType(this.form.get('flowType')?.value);
+        req.setTriggerType(this.form.get('triggerType')?.value);
+
+        this.dialogRef.close(req);
+      // }
+    }
+}

console/src/app/pipes/duration-to-seconds-pipe/duration-to-seconds-pipe.module.ts

@@ -0,0 +1,18 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { DurationToSecondsPipe } from './duration-to-seconds.pipe';
+
+
+@NgModule({
+    declarations: [
+      DurationToSecondsPipe,
+    ],
+    imports: [
+        CommonModule,
+    ],
+    exports: [
+      DurationToSecondsPipe,
+    ],
+})
+export class DurationToSecondsPipeModule { }

console/src/app/pipes/duration-to-seconds-pipe/duration-to-seconds.pipe.ts

@@ -0,0 +1,25 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { Duration } from 'google-protobuf/google/protobuf/duration_pb';
+
+@Pipe({
+  name: 'durationToSeconds',
+})
+export class DurationToSecondsPipe implements PipeTransform {
+
+  transform(value?: Duration.AsObject, ...args: unknown[]): unknown {
+    if (value) {
+      return this.durationToSeconds(value);
+    } else {
+      return '';
+    }
+  }
+
+  private durationToSeconds(date: Duration.AsObject): any {
+    if (date?.seconds !== undefined && date?.nanos !== undefined) {
+      const ms = (date.seconds * 1000 + date.nanos / 1000 / 1000);
+      const secs = ms / 1000;
+      return `${secs.toFixed(2)} sec`
+    }
+  }
+}
+

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

@@ -3,11 +3,13 @@ import { Empty } from 'google-protobuf/google/protobuf/empty_pb';
 import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
 import { BehaviorSubject } from 'rxjs';
 
+import { FlowType, TriggerType } from '../proto/generated/zitadel/action_pb';
 import { AppQuery } from '../proto/generated/zitadel/app_pb';
 import { KeyType } from '../proto/generated/zitadel/auth_n_key_pb';
 import { ChangeQuery } from '../proto/generated/zitadel/change_pb';
 import { IDPOwnerType } from '../proto/generated/zitadel/idp_pb';
 import {
+  ActionQuery,
   ActivateCustomLabelPolicyRequest,
   ActivateCustomLabelPolicyResponse,
   AddAPIAppRequest,
@@ -68,6 +70,10 @@ import {
   BulkRemoveUserGrantResponse,
   BulkSetUserMetadataRequest,
   BulkSetUserMetadataResponse,
+  ClearFlowRequest,
+  ClearFlowResponse,
+  CreateActionRequest,
+  CreateActionResponse,
   DeactivateAppRequest,
   DeactivateAppResponse,
   DeactivateOrgIDPRequest,
@@ -80,8 +86,12 @@ import {
   DeactivateProjectResponse,
   DeactivateUserRequest,
   DeactivateUserResponse,
+  DeleteActionRequest,
+  DeleteActionResponse,
   GenerateOrgDomainValidationRequest,
   GenerateOrgDomainValidationResponse,
+  GetActionRequest,
+  GetActionResponse,
   GetAppByIDRequest,
   GetAppByIDResponse,
   GetCustomDomainClaimedMessageTextRequest,
@@ -118,6 +128,8 @@ import {
   GetDefaultVerifyPhoneMessageTextResponse,
   GetFeaturesRequest,
   GetFeaturesResponse,
+  GetFlowRequest,
+  GetFlowResponse,
   GetGrantedProjectByIDRequest,
   GetGrantedProjectByIDResponse,
   GetHumanEmailRequest,
@@ -167,6 +179,8 @@ import {
   GetUserMetadataRequest,
   GetUserMetadataResponse,
   IDPQuery,
+  ListActionsRequest,
+  ListActionsResponse,
   ListAppChangesRequest,
   ListAppChangesResponse,
   ListAppKeysRequest,
@@ -344,10 +358,14 @@ import {
   SetHumanInitialPasswordRequest,
   SetPrimaryOrgDomainRequest,
   SetPrimaryOrgDomainResponse,
+  SetTriggerActionsRequest,
+  SetTriggerActionsResponse,
   SetUserMetadataRequest,
   SetUserMetadataResponse,
   UnlockUserRequest,
   UnlockUserResponse,
+  UpdateActionRequest,
+  UpdateActionResponse,
   UpdateAPIAppConfigRequest,
   UpdateAPIAppConfigResponse,
   UpdateAppRequest,
@@ -881,6 +899,87 @@ export class ManagementService {
     return this.grpcService.mgmt.listHumanLinkedIDPs(req, null).then((resp) => resp.toObject());
   }
 
+  public getAction(
+    id: string,
+  ): Promise<GetActionResponse.AsObject> {
+    const req = new GetActionRequest();
+    req.setId(id);
+    return this.grpcService.mgmt.getAction(req, null).then(resp => resp.toObject());
+  }
+
+  public createAction(
+    req: CreateActionRequest,
+  ): Promise<CreateActionResponse.AsObject> {
+    return this.grpcService.mgmt.createAction(req, null).then(resp => resp.toObject());
+  }
+
+  public updateAction(
+    req: UpdateActionRequest,
+  ): Promise<UpdateActionResponse.AsObject> {
+    return this.grpcService.mgmt.updateAction(req, null).then(resp => resp.toObject());
+  }
+
+  public deleteAction(
+    id: string,
+  ): Promise<DeleteActionResponse.AsObject> {
+    const req = new DeleteActionRequest();
+    req.setId(id);
+    return this.grpcService.mgmt.deleteAction(req, null).then(resp => resp.toObject());
+  }
+
+  public listActions(
+    limit?: number,
+    offset?: number,
+    asc?: boolean,
+    queryList?: ActionQuery[],
+  ): Promise<ListActionsResponse.AsObject> {
+    const req = new ListActionsRequest();
+    const metadata = new ListQuery();
+    if (queryList) {
+      req.setQueriesList(queryList);
+    }
+
+    if (limit) {
+      metadata.setLimit(limit);
+    }
+    if (offset) {
+      metadata.setOffset(offset);
+    }
+    if (asc) {
+      metadata.setAsc(asc);
+    }
+    req.setQuery(metadata);
+    return this.grpcService.mgmt.listActions(req, null).then(resp => resp.toObject());
+  }
+
+  public getFlow(
+    type: FlowType
+  ): Promise<GetFlowResponse.AsObject> {
+    const req = new GetFlowRequest();
+    req.setType(type);
+    return this.grpcService.mgmt.getFlow(req, null).then(resp => resp.toObject());
+  }
+
+  public clearFlow(
+    type: FlowType
+  ): Promise<ClearFlowResponse.AsObject> {
+    const req = new ClearFlowRequest();
+    req.setType(type);
+    return this.grpcService.mgmt.clearFlow(req, null).then(resp => resp.toObject());
+  }
+
+  public setTriggerActions(
+    actionIdsList: string[],
+    type: FlowType,
+    triggerType: TriggerType,
+  ): Promise<SetTriggerActionsResponse.AsObject> {
+    const req = new SetTriggerActionsRequest();
+    req.setActionIdsList(actionIdsList);
+    req.setFlowType(type);
+    req.setTriggerType(triggerType);
+    return this.grpcService.mgmt.setTriggerActions(req, null).then(resp => resp.toObject());
+  }
+
   public getIAM(): Promise<GetIAMResponse.AsObject> {
     const req = new GetIAMRequest();
     return this.grpcService.mgmt.getIAM(req, null).then((resp) => resp.toObject());