mirror of
https://github.com/zitadel/zitadel.git
synced 2025-12-06 14:52:35 +00:00
3348acdbab
# Which Problems Are Solved
This PR allows one to edit the order of Actions V2 Targets in an
Execution. Editing of Targets was also added back again.
# How the Problems Are Solved
One of the changes is the addition of the CorrectlyTypedExecution which
restricts the Grpc types a bit more to make working with them easier.
Some fields may be optional in the Grpc Protobuf but in reality are
always set.
Typings were generally improved to make them more accurate and safer to
work with.
# Additional Changes
Removal of the Actions V2 Feature flag as it will be enabled by default
anyways.
# Additional Context
This pr used some advanced Angular Signals logic which is very
interesting for future PR's.
- Part of the tasks from #7248
---------
Co-authored-by: Max Peintner <peintnerm@gmail.com>
(cherry picked from commit 56e0df67d5)
73 lines
2.8 KiB
HTML
73 lines
2.8 KiB
HTML
<form class="form-grid" [formGroup]="form()" (ngSubmit)="submit()">
|
|
<p class="target-description">{{ 'ACTIONSTWO.EXECUTION.DIALOG.TARGET.DESCRIPTION' | translate }}</p>
|
|
|
|
<cnsl-form-field class="full-width">
|
|
<cnsl-label>{{ 'ACTIONSTWO.EXECUTION.DIALOG.TARGET.TARGET.DESCRIPTION' | translate }}</cnsl-label>
|
|
<input
|
|
cnslInput
|
|
#trigger="matAutocompleteTrigger"
|
|
#input
|
|
type="text"
|
|
[formControl]="form().controls.autocomplete"
|
|
[matAutocomplete]="autoservice"
|
|
(keydown.enter)="handleEnter($event); input.blur(); trigger.closePanel()"
|
|
/>
|
|
<mat-autocomplete #autoservice="matAutocomplete">
|
|
<mat-option *ngIf="targets().state === 'loading'" class="is-loading">
|
|
<mat-spinner diameter="30"></mat-spinner>
|
|
</mat-option>
|
|
<mat-option
|
|
*ngFor="let target of selectableTargets(); trackBy: trackTarget"
|
|
#option
|
|
(click)="addTarget(target); option.deselect()"
|
|
[value]="target.name"
|
|
>
|
|
{{ target.name }}
|
|
</mat-option>
|
|
</mat-autocomplete>
|
|
</cnsl-form-field>
|
|
|
|
<table mat-table cdkDropList (cdkDropListDropped)="drop($event)" [dataSource]="dataSource" [trackBy]="trackTarget">
|
|
<ng-container matColumnDef="order">
|
|
<th mat-header-cell *matHeaderCellDef>Reorder</th>
|
|
<td mat-cell *cnslCellDef="let row; let i = index; dataSource: dataSource">
|
|
<i class="las la-bars"></i>
|
|
</td>
|
|
</ng-container>
|
|
<ng-container matColumnDef="name">
|
|
<th mat-header-cell *matHeaderCellDef>Name</th>
|
|
<td mat-cell *cnslCellDef="let row; dataSource: dataSource">
|
|
<cnsl-project-role-chip [roleName]="row.name">{{ row.name }}</cnsl-project-role-chip>
|
|
</td>
|
|
</ng-container>
|
|
<ng-container matColumnDef="deleteAction" stickyEnd>
|
|
<th mat-header-cell *matHeaderCellDef></th>
|
|
<td mat-cell *cnslCellDef="let i = index; dataSource: dataSource">
|
|
<cnsl-table-actions>
|
|
<button
|
|
actions
|
|
matTooltip="{{ 'ACTIONS.REMOVE' | translate }}"
|
|
color="warn"
|
|
(click)="removeTarget(i)"
|
|
mat-icon-button
|
|
>
|
|
<i class="las la-trash"></i>
|
|
</button>
|
|
</cnsl-table-actions>
|
|
</td>
|
|
</ng-container>
|
|
<tr mat-header-row *matHeaderRowDef="['order', 'name', 'deleteAction']"></tr>
|
|
<tr class="drag-row" cdkDrag mat-row *matRowDef="let row; columns: ['order', 'name', 'deleteAction']"></tr>
|
|
</table>
|
|
|
|
<div class="actions">
|
|
<button *ngIf="!hideBackButton" mat-stroked-button (click)="back.emit()">
|
|
{{ 'ACTIONS.BACK' | translate }}
|
|
</button>
|
|
<span class="fill-space"></span>
|
|
<button color="primary" [disabled]="form().invalid" mat-raised-button type="submit">
|
|
{{ 'ACTIONS.CONTINUE' | translate }}
|
|
</button>
|
|
</div>
|
|
</form>
|