mirror of
https://github.com/zitadel/zitadel.git
synced 2025-12-13 18:32:10 +00:00
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 <livio.a@gmail.com>
This commit is contained in:
Max Peintner
@@ -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>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
17
console/src/app/pages/actions/actions-routing.module.ts
Normal file
17
console/src/app/pages/actions/actions-routing.module.ts
Normal file
@@ -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 { }
|
||||
66
console/src/app/pages/actions/actions.component.html
Normal file
66
console/src/app/pages/actions/actions.component.html
Normal file
@@ -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"> ({{selection.length}})</span>
|
||||
<mat-icon>add</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
124
console/src/app/pages/actions/actions.component.scss
Normal file
124
console/src/app/pages/actions/actions.component.scss
Normal file
@@ -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);
|
||||
}
|
||||
25
console/src/app/pages/actions/actions.component.spec.ts
Normal file
25
console/src/app/pages/actions/actions.component.spec.ts
Normal file
@@ -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();
|
||||
});
|
||||
});
|
||||
109
console/src/app/pages/actions/actions.component.ts
Normal file
109
console/src/app/pages/actions/actions.component.ts
Normal file
@@ -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);
|
||||
});
|
||||
}
|
||||
}
|
||||
60
console/src/app/pages/actions/actions.module.ts
Normal file
60
console/src/app/pages/actions/actions.module.ts
Normal file
@@ -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 {}
|
||||
@@ -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>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
@@ -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);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
@@ -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);
|
||||
// }
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user