feat(console): limited actions (#3164)

* max count features

* deactivate, activate

* actions, limited

* disable without permission, show action state in flow

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

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

@@ -1,10 +1,19 @@
 <cnsl-refresh-table [loading]="loading$ | async" (refreshed)="refreshPage()" [dataSize]="dataSource?.data?.length ?? 0"
   [timestamp]="actionsResult?.details?.viewTimestamp" [selection]="selection">
-  <div actions>
+  <div actions *ngIf="selection.isEmpty()">
     <a color="primary" mat-raised-button (click)="openAddAction()">
       <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
     </a>
   </div>
+  <div actions *ngIf="!selection.isEmpty()">
+    <button class="action-state-btn" mat-stroked-button (click)="deactivateSelection()">
+      {{ 'ACTIONS.DEACTIVATE' | translate }}
+    </button>
+    <button class="action-state-btn" mat-stroked-button (click)="activateSelection()">
+      {{ 'ACTIONS.REACTIVATE' | translate }}
+    </button>
+  </div>
+
 
   <div class="table-wrapper">
     <table class="table" mat-table [dataSource]="dataSource">

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

@@ -1,3 +1,6 @@
+.action-state-btn {
+  margin-left: 0.5rem;
+}
 
 .table-wrapper {
   overflow: auto;

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

@@ -137,4 +137,40 @@ export class ActionTableComponent implements OnInit {
   public refreshPage(): void {
     this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize);
   }
+
+  public deactivateSelection(): Promise<void> {
+    const prom = this.selection.selected.map((action) => {
+      return this.mgmtService.deactivateAction(action.id);
+    });
+
+    return Promise.all(prom)
+      .then(() => {
+        this.selection.clear();
+        this.toast.showInfo('FLOWS.TOAST.ACTIONDEACTIVATED', true);
+        this.getData(10, 0);
+      })
+      .catch((error) => {
+        this.selection.clear();
+        this.toast.showError(error);
+        this.getData(10, 0);
+      });
+  }
+
+  public activateSelection(): Promise<void> {
+    const prom = this.selection.selected.map((action) => {
+      return this.mgmtService.reactivateAction(action.id);
+    });
+
+    return Promise.all(prom)
+      .then(() => {
+        this.selection.clear();
+        this.toast.showInfo('FLOWS.TOAST.ACTIONREACTIVATED', true);
+        this.getData(10, 0);
+      })
+      .catch((error) => {
+        this.selection.clear();
+        this.toast.showError(error);
+        this.getData(10, 0);
+      });
+  }
 }

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

@@ -2,6 +2,9 @@
   <h1>{{ 'FLOWS.TITLE' | translate }}</h1>
   <p class="desc">{{'FLOWS.DESCRIPTION' | translate }}</p>
 
+  <cnsl-info-section class="max-actions" *ngIf="maxActions">{{'FLOWS.ACTIONSMAX' | translate: ({value: maxActions}) }}
+  </cnsl-info-section>
+
   <cnsl-info-section *ngIf="(['actions'] | hasFeature | async) === false" [featureLink]="['/org/features']" class="info"
     [type]="InfoSectionType.WARN">
     <span [innerHTML]="'FEATURES.NOTAVAILABLE' | translate: ({value: 'actions'})"></span>
@@ -44,11 +47,15 @@
           <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"
+          <div class="flow-action-wrapper" cdkDropList (cdkDropListDropped)="drop(i, trigger.actionsList, $event)">
+            <div cdkDrag cdkDragLockAxis="y" cdkDragBoundary=".action-wrapper" class="flow-action"
               *ngFor="let action of trigger.actionsList">
               <i class="las la-code"></i>
-              <span>{{action.name}}</span>
+              <span class="flow-action-name">{{action.name}}</span>
+              <span class="fill-space"></span>
+              <span class="state"
+                [ngClass]="{'active': action.state === ActionState.ACTION_STATE_ACTIVE,'inactive': action.state === ActionState.ACTION_STATE_INACTIVE }">
+                {{'FLOWS.STATES.'+action.state | translate}}</span>
             </div>
           </div>
         </div>

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

@@ -18,7 +18,7 @@ h1 {
   }
 
   i {
-    margin-left: .5rem;
+    margin-left: 0.5rem;
   }
 }
 
@@ -29,8 +29,8 @@ h1 {
 
   .flow-type {
     padding: 1rem 1rem;
-    margin: .5rem 0;
-    border-radius: .5rem;
+    margin: 0.5rem 0;
+    border-radius: 0.5rem;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -39,7 +39,7 @@ h1 {
   .topelements {
     border: 3px solid var(--color-main);
     border-radius: 1rem;
-    padding: 0 .5rem;
+    padding: 0 0.5rem;
   }
 
   .trigger-wrapper {
@@ -57,13 +57,13 @@ h1 {
     }
 
     .trigger {
-      padding: .5rem 1rem;
-      border-radius: .5rem;
+      padding: 0.5rem 1rem;
+      border-radius: 0.5rem;
       display: flex;
       align-items: center;
       background: var(--color-main);
       color: white;
-      margin: .5rem 0;
+      margin: 0.5rem 0;
       min-height: 40px;
 
       .icon {
@@ -74,18 +74,27 @@ h1 {
         flex: 1;
       }
 
-      .action-wrapper {
-        padding: 0 .5rem;
+      .flow-action-wrapper {
+        padding: 0 0.5rem;
+        margin: 0;
 
-        .action {
+        .flow-action {
           display: flex;
           align-items: center;
           font-size: 14px;
-          padding: .5rem 0;
+          padding: 0.5rem 0;
           cursor: move;
 
+          .flow-action-name {
+            margin-right: 1rem;
+          }
+
+          .fill-space {
+            flex: 1;
+          }
+
           i {
-            margin-right: .5rem;
+            margin-right: 0.5rem;
           }
         }
       }
@@ -105,13 +114,13 @@ h1 {
   display: flex;
   align-items: center;
   font-size: 14px;
-  border-radius: .5rem;
-  padding: 0 .5rem;
+  border-radius: 0.5rem;
+  padding: 0 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);
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
 
   i {
-    margin-right: .5rem;
+    margin-right: 0.5rem;
   }
 }
 
@@ -120,5 +129,5 @@ h1 {
 }
 
 .cdk-drag-animating {
-  transition: transform 250ms cubic-bezier(0, 0, .2, 1);
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }

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

@@ -4,7 +4,8 @@ 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 { Action, ActionState, Flow, FlowType, TriggerType } from 'src/app/proto/generated/zitadel/action_pb';
+import { ActionsAllowed } from 'src/app/proto/generated/zitadel/features_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';
@@ -26,14 +27,28 @@ export class ActionsComponent {
 
   public selection: Action.AsObject[] = [];
   public InfoSectionType: any = InfoSectionType;
+  public maxActions: number | null = null;
+  public ActionState: any = ActionState;
 
   constructor(private mgmtService: ManagementService, private dialog: MatDialog, private toast: ToastService) {
+    this.mgmtService.getFeatures().then((featuresResp) => {
+      if (featuresResp && featuresResp.features) {
+        const features = featuresResp.features;
+        this.maxActions =
+          features && features.actionsAllowed === ActionsAllowed.ACTIONS_ALLOWED_MAX
+            ? features.maxActions
+            : features.actionsAllowed === ActionsAllowed.ACTIONS_ALLOWED_MAX
+            ? null
+            : 0;
+      }
+    });
     this.loadFlow();
   }
 
   private loadFlow() {
     this.mgmtService.getFlow(this.flowType).then((flowResponse) => {
       if (flowResponse.flow) this.flow = flowResponse.flow;
+      console.log(this.flow);
     });
   }
 
@@ -92,7 +107,6 @@ export class ActionsComponent {
   }
 
   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),