+ {{ 'SETTING.FEATURES.' + (toggleStateKey | uppercase) | translate }}
+ {{ i18nDescription }}
+
diff --git a/console/src/app/components/feature-toggle/feature-toggle.component.scss b/console/src/app/components/feature-toggle/feature-toggle.component.scss
new file mode 100644
index 0000000000..b1e7c1a3f1
--- /dev/null
+++ b/console/src/app/components/feature-toggle/feature-toggle.component.scss
@@ -0,0 +1,39 @@
+.feature-row {
+ display: flex;
+ flex-direction: column;
+ padding-bottom: 1rem;
+
+ .row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ .buttongroup {
+ margin-right: 0.5rem;
+ margin-top: 0.5rem;
+
+ .toggle-row {
+ display: flex;
+ align-items: center;
+
+ i {
+ margin-right: 0.5rem;
+ }
+
+ .info-i {
+ font-size: 1.2rem;
+ margin-left: 0.5rem;
+ margin-right: 0;
+ }
+
+ .current-dot {
+ height: 8px;
+ width: 8px;
+ border-radius: 50%;
+ margin-left: 0.5rem;
+ background-color: rgb(59, 128, 247);
+ }
+ }
+ }
+ }
+}
diff --git a/console/src/app/components/feature-toggle/feature-toggle.component.ts b/console/src/app/components/feature-toggle/feature-toggle.component.ts
new file mode 100644
index 0000000000..fab0b31d48
--- /dev/null
+++ b/console/src/app/components/feature-toggle/feature-toggle.component.ts
@@ -0,0 +1,45 @@
+import { AsyncPipe, NgIf, UpperCasePipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { InfoSectionModule } from 'src/app/modules/info-section/info-section.module';
+import { ToggleStateKeys, ToggleStates } from '../features/features.component';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { FormsModule } from '@angular/forms';
+import { Source } from '@zitadel/proto/zitadel/feature/v2/feature_pb';
+import { ReplaySubject } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Component({
+ standalone: true,
+ selector: 'cnsl-feature-toggle',
+ templateUrl: './feature-toggle.component.html',
+ styleUrls: ['./feature-toggle.component.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ imports: [
+ MatButtonToggleModule,
+ UpperCasePipe,
+ TranslateModule,
+ FormsModule,
+ MatTooltipModule,
+ InfoSectionModule,
+ AsyncPipe,
+ NgIf,
+ ],
+})
+export class FeatureToggleComponent
+
+
+
+
+
+
+
+
+ {{ 'SETTING.FEATURES.STATES.DISABLED' | translate }}
+
+
+
+
+ {{ 'SETTING.FEATURES.STATES.ENABLED' | translate }}
+
+
+ {{ 'DESCRIPTIONS.SETTINGS.FEATURES.DESCRIPTION' | translate }}
-
- {{ 'SETTING.FEATURES.LOGINDEFAULTORG' | translate }}
- {{
- 'SETTING.FEATURES.LOGINDEFAULTORG_DESCRIPTION' | translate
- }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ 'SETTING.FEATURES.STATES.INHERITED' | translate }}
-
-
-
-
-
- {{ 'SETTING.FEATURES.STATES.DISABLED' | translate }}
-
-
- {{ 'SETTING.FEATURES.STATES.ENABLED' | translate }}
-
-
- {{ 'SETTING.FEATURES.OIDCLEGACYINTROSPECTION' | translate }}
- {{
- 'SETTING.FEATURES.OIDCLEGACYINTROSPECTION_DESCRIPTION' | translate
- }}
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ 'SETTING.FEATURES.STATES.INHERITED' | translate }}
-
-
-
-
-
- {{ 'SETTING.FEATURES.STATES.DISABLED' | translate }}
-
-
- {{ 'SETTING.FEATURES.STATES.ENABLED' | translate }}
-
-
- {{ 'SETTING.FEATURES.OIDCTOKENEXCHANGE' | translate }}
- {{
- 'SETTING.FEATURES.OIDCTOKENEXCHANGE_DESCRIPTION' | translate
- }}
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ 'SETTING.FEATURES.STATES.INHERITED' | translate }}
-
-
-
-
-
- {{ 'SETTING.FEATURES.STATES.DISABLED' | translate }}
-
-
- {{ 'SETTING.FEATURES.STATES.ENABLED' | translate }}
-
-
- {{ 'SETTING.FEATURES.OIDCTRIGGERINTROSPECTIONPROJECTIONS' | translate }}
- {{
- 'SETTING.FEATURES.OIDCTRIGGERINTROSPECTIONPROJECTIONS_DESCRIPTION' | translate
- }}
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ 'SETTING.FEATURES.STATES.INHERITED' | translate }}
-
-
-
-
-
- {{ 'SETTING.FEATURES.STATES.DISABLED' | translate }}
-
-
- {{ 'SETTING.FEATURES.STATES.ENABLED' | translate }}
-
-
- {{ 'SETTING.FEATURES.USERSCHEMA' | translate }}
- {{
- 'SETTING.FEATURES.USERSCHEMA_DESCRIPTION' | translate
- }}
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ 'SETTING.FEATURES.STATES.INHERITED' | translate }}
-
-
-
-
-
- {{ 'SETTING.FEATURES.STATES.DISABLED' | translate }}
-
-
- {{ 'SETTING.FEATURES.STATES.ENABLED' | translate }}
-
-
- {{ 'SETTING.FEATURES.ACTIONS' | translate }}
- {{ 'SETTING.FEATURES.ACTIONS_DESCRIPTION' | translate }}
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ 'SETTING.FEATURES.STATES.INHERITED' | translate }}
-
-
-
-
-
- {{ 'SETTING.FEATURES.STATES.DISABLED' | translate }}
-
-
- {{ 'SETTING.FEATURES.STATES.ENABLED' | translate }}
-
-
- {{ 'SETTING.FEATURES.OIDCSINGLEV1SESSIONTERMINATION' | translate }}
- {{
- 'SETTING.FEATURES.OIDCSINGLEV1SESSIONTERMINATION_DESCRIPTION' | translate
- }}
-
+
-
-
-
-
-
-
-
-
-
-
- {{ 'SETTING.FEATURES.STATES.INHERITED' | translate }}
-
-
-
-
-
- {{ 'SETTING.FEATURES.STATES.DISABLED' | translate }}
-
-
- {{ 'SETTING.FEATURES.STATES.ENABLED' | translate }}
-
-
+
{{ 'USER.EDITACCOUNT' | translate }}
= new EventEmitter();
- public sessions: Session.AsObject[] = [];
- public loadingUsers: boolean = false;
- public UserState: any = UserState;
- private labelpolicy = toSignal(this.userService.labelpolicy$, { initialValue: undefined });
-
- constructor(
- public authService: AuthenticationService,
- private router: Router,
- private userService: GrpcAuthService,
- ) {
- this.userService
- .listMyUserSessions()
- .then((sessions) => {
- this.sessions = sessions.resultList.filter((user) => user.loginName !== this.user?.preferredLoginName);
- this.loadingUsers = false;
- })
- .catch(() => {
- this.loadingUsers = false;
- });
+export class AccountsCardComponent {
+ @Input({ required: true })
+ public set user(user: User.AsObject) {
+ this.user$.next(user);
}
- ngOnInit(): void {
- this.loadingUsers = true;
+ @Input() public iamuser: boolean | null = false;
+
+ @Output() public closedCard = new EventEmitter();
+
+ protected readonly user$ = new ReplaySubject(1);
+ protected readonly UserState = UserState;
+ private readonly labelpolicy = toSignal(this.userService.labelpolicy$, { initialValue: undefined });
+ protected readonly sessions$: Observable;
+
+ constructor(
+ protected readonly authService: AuthenticationService,
+ private readonly router: Router,
+ private readonly userService: GrpcAuthService,
+ private readonly sessionService: SessionService,
+ private readonly featureService: NewFeatureService,
+ private readonly toast: ToastService,
+ ) {
+ this.sessions$ = this.getSessions().pipe(shareReplay({ refCount: true, bufferSize: 1 }));
+ }
+
+ private getUseLoginV2() {
+ return defer(() => this.featureService.getInstanceFeatures()).pipe(
+ map(({ loginV2 }) => loginV2?.required ?? false),
+ timeout(1000),
+ catchError((err) => {
+ if (!(err instanceof TimeoutError)) {
+ this.toast.showError(err);
+ }
+ return of(false);
+ }),
+ );
+ }
+
+ private getSessions(): Observable {
+ const useLoginV2$ = this.getUseLoginV2();
+
+ return useLoginV2$.pipe(
+ switchMap((useLoginV2) => {
+ if (useLoginV2) {
+ return this.getV2Sessions();
+ } else {
+ return this.getV1Sessions();
+ }
+ }),
+ catchError((err) => {
+ this.toast.showError(err);
+ return of([]);
+ }),
+ );
+ }
+
+ private getV1Sessions(): Observable {
+ return defer(() => this.userService.listMyUserSessions()).pipe(
+ mergeMap(({ resultList }) => from(resultList)),
+ withLatestFrom(this.user$),
+ filter(([{ loginName }, user]) => loginName !== user.preferredLoginName),
+ map(([s]) => ({
+ displayName: s.displayName,
+ avatarUrl: s.avatarUrl,
+ loginName: s.loginName,
+ authState: s.authState,
+ userName: s.userName,
+ })),
+ toArray(),
+ );
+ }
+
+ private getV2Sessions(): Observable {
+ return defer(() =>
+ this.sessionService.listSessions({
+ queries: [
+ {
+ query: {
+ case: 'userAgentQuery',
+ value: {},
+ },
+ },
+ ],
+ }),
+ ).pipe(
+ mergeMap(({ sessions }) => from(sessions)),
+ withLatestFrom(this.user$),
+ filter(([s, user]) => s.factors?.user?.loginName !== user.preferredLoginName),
+ map(([s]) => ({
+ displayName: s.factors?.user?.displayName ?? '',
+ avatarUrl: '',
+ loginName: s.factors?.user?.loginName ?? '',
+ authState: V2SessionState.ACTIVE,
+ userName: s.factors?.user?.loginName ?? '',
+ })),
+ map((s) => [s.loginName, s] as const),
+ toArray(),
+ map((sessions) => Array.from(new Map(sessions).values())), // Ensure unique loginNames
+ );
}
public editUserProfile(): void {
- this.router.navigate(['users/me']);
+ this.router.navigate(['users/me']).then();
this.closedCard.emit();
}
- public closeCard(element: HTMLElement): void {
- if (!element.classList.contains('dontcloseonclick')) {
- this.closedCard.emit();
- }
- }
-
public selectAccount(loginHint: string): void {
const configWithPrompt: Partial = {
customQueryParams: {
login_hint: loginHint,
},
};
- this.authService.authenticate(configWithPrompt);
+ this.authService.authenticate(configWithPrompt).then();
}
public selectNewAccount(): void {
@@ -67,7 +161,7 @@ export class AccountsCardComponent implements OnInit {
prompt: 'login',
} as any,
};
- this.authService.authenticate(configWithPrompt);
+ this.authService.authenticate(configWithPrompt).then();
}
public logout(): void {
diff --git a/console/src/app/modules/actions-two/actions-two-actions/actions-two-actions-table/actions-two-actions-table.component.html b/console/src/app/modules/actions-two/actions-two-actions/actions-two-actions-table/actions-two-actions-table.component.html
new file mode 100644
index 0000000000..7948ba7554
--- /dev/null
+++ b/console/src/app/modules/actions-two/actions-two-actions/actions-two-actions-table/actions-two-actions-table.component.html
@@ -0,0 +1,69 @@
+
+
diff --git a/console/src/app/modules/actions-two/actions-two-actions/actions-two-actions-table/actions-two-actions-table.component.scss b/console/src/app/modules/actions-two/actions-two-actions/actions-two-actions-table/actions-two-actions-table.component.scss
new file mode 100644
index 0000000000..041332a88b
--- /dev/null
+++ b/console/src/app/modules/actions-two/actions-two-actions/actions-two-actions-table/actions-two-actions-table.component.scss
@@ -0,0 +1,12 @@
+.target-key {
+ display: flex;
+ white-space: nowrap;
+}
+
+.icon {
+ font-size: 14px;
+ height: 14px;
+ width: 14px;
+ margin-right: 0.5rem;
+ margin-left: -0.5rem;
+}
diff --git a/console/src/app/modules/actions-two/actions-two-actions/actions-two-actions-table/actions-two-actions-table.component.ts b/console/src/app/modules/actions-two/actions-two-actions/actions-two-actions-table/actions-two-actions-table.component.ts
new file mode 100644
index 0000000000..af9673dbf5
--- /dev/null
+++ b/console/src/app/modules/actions-two/actions-two-actions/actions-two-actions-table/actions-two-actions-table.component.ts
@@ -0,0 +1,103 @@
+import { ChangeDetectionStrategy, Component, computed, effect, EventEmitter, Input, Output } from '@angular/core';
+import { combineLatestWith, Observable, ReplaySubject } from 'rxjs';
+import { filter, map, startWith } from 'rxjs/operators';
+import { MatTableDataSource } from '@angular/material/table';
+import { Target } from '@zitadel/proto/zitadel/action/v2beta/target_pb';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { CorrectlyTypedExecution } from '../../actions-two-add-action/actions-two-add-action-dialog.component';
+
+@Component({
+ selector: 'cnsl-actions-two-actions-table',
+ templateUrl: './actions-two-actions-table.component.html',
+ styleUrls: ['./actions-two-actions-table.component.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ActionsTwoActionsTableComponent {
+ @Output()
+ public readonly refresh = new EventEmitter();
+
+ @Output()
+ public readonly selected = new EventEmitter();
+
+ @Output()
+ public readonly delete = new EventEmitter();
+
+ @Input({ required: true })
+ public set executions(executions: CorrectlyTypedExecution[] | null) {
+ this.executions$.next(executions);
+ }
+
+ @Input({ required: true })
+ public set targets(targets: Target[] | null) {
+ this.targets$.next(targets);
+ }
+
+ private readonly executions$ = new ReplaySubject(1);
+
+ private readonly targets$ = new ReplaySubject(1);
+
+ protected readonly dataSource = this.getDataSource();
+
+ protected readonly loading = this.getLoading();
+
+ private getDataSource() {
+ const executions$: Observable = this.executions$.pipe(filter(Boolean), startWith([]));
+ const executionsSignal = toSignal(executions$, { requireSync: true });
+
+ const targetsMapSignal = this.getTargetsMap();
+
+ const dataSignal = computed(() => {
+ const executions = executionsSignal();
+ const targetsMap = targetsMapSignal();
+
+ if (targetsMap.size === 0) {
+ return [];
+ }
+
+ return executions.map((execution) => {
+ const mappedTargets = execution.targets
+ .map((target) => targetsMap.get(target))
+ .filter((target): target is NonNullable => !!target);
+ return { execution, mappedTargets };
+ });
+ });
+
+ const dataSource = new MatTableDataSource(dataSignal());
+
+ effect(() => {
+ const data = dataSignal();
+ if (dataSource.data !== data) {
+ dataSource.data = data;
+ }
+ });
+
+ return dataSource;
+ }
+
+ private getTargetsMap() {
+ const targets$ = this.targets$.pipe(filter(Boolean), startWith([] as Target[]));
+ const targetsSignal = toSignal(targets$, { requireSync: true });
+
+ return computed(() => {
+ const map = new Map();
+ for (const target of targetsSignal()) {
+ map.set(target.id, target);
+ }
+ return map;
+ });
+ }
+
+ private getLoading() {
+ const loading$ = this.executions$.pipe(
+ combineLatestWith(this.targets$),
+ map(([executions, targets]) => executions === null || targets === null),
+ startWith(true),
+ );
+
+ return toSignal(loading$, { requireSync: true });
+ }
+
+ protected trackTarget(_: number, target: Target) {
+ return target.id;
+ }
+}
diff --git a/console/src/app/modules/actions-two/actions-two-actions/actions-two-actions.component.html b/console/src/app/modules/actions-two/actions-two-actions/actions-two-actions.component.html
new file mode 100644
index 0000000000..3e6c31fc0e
--- /dev/null
+++ b/console/src/app/modules/actions-two/actions-two-actions/actions-two-actions.component.html
@@ -0,0 +1,17 @@
+
+ {{ 'ACTIONSTWO.BETA_NOTE' | translate }}
+
+
+
+
diff --git a/cmd/initialise/sql/postgres/11_settings.sql b/console/src/app/modules/actions-two/actions-two-actions/actions-two-actions.component.scss
similarity index 100%
rename from cmd/initialise/sql/postgres/11_settings.sql
rename to console/src/app/modules/actions-two/actions-two-actions/actions-two-actions.component.scss
diff --git a/console/src/app/modules/actions-two/actions-two-actions/actions-two-actions.component.ts b/console/src/app/modules/actions-two/actions-two-actions/actions-two-actions.component.ts
new file mode 100644
index 0000000000..7e0d457dd5
--- /dev/null
+++ b/console/src/app/modules/actions-two/actions-two-actions/actions-two-actions.component.ts
@@ -0,0 +1,117 @@
+import { ChangeDetectionStrategy, Component, DestroyRef } from '@angular/core';
+import { ActionService } from 'src/app/services/action.service';
+import { lastValueFrom, Observable, of, Subject } from 'rxjs';
+import { catchError, map, startWith, switchMap } from 'rxjs/operators';
+import { ToastService } from 'src/app/services/toast.service';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import {
+ ActionTwoAddActionDialogComponent,
+ ActionTwoAddActionDialogData,
+ ActionTwoAddActionDialogResult,
+ CorrectlyTypedExecution,
+ correctlyTypeExecution,
+} from '../actions-two-add-action/actions-two-add-action-dialog.component';
+import { MatDialog } from '@angular/material/dialog';
+import { MessageInitShape } from '@bufbuild/protobuf';
+import { SetExecutionRequestSchema } from '@zitadel/proto/zitadel/action/v2beta/action_service_pb';
+import { Target } from '@zitadel/proto/zitadel/action/v2beta/target_pb';
+import { InfoSectionType } from '../../info-section/info-section.component';
+import { ExecutionFieldName } from '@zitadel/proto/zitadel/action/v2beta/query_pb';
+
+@Component({
+ selector: 'cnsl-actions-two-actions',
+ templateUrl: './actions-two-actions.component.html',
+ styleUrls: ['./actions-two-actions.component.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ActionsTwoActionsComponent {
+ protected readonly refresh$ = new Subject();
+ protected readonly executions$: Observable;
+ protected readonly targets$: Observable;
+
+ constructor(
+ private readonly actionService: ActionService,
+ private readonly toast: ToastService,
+ private readonly destroyRef: DestroyRef,
+ private readonly dialog: MatDialog,
+ ) {
+ this.executions$ = this.getExecutions$();
+ this.targets$ = this.getTargets$();
+ }
+
+ private getExecutions$() {
+ return this.refresh$.pipe(
+ startWith(true),
+ switchMap(() => {
+ return this.actionService.listExecutions({ sortingColumn: ExecutionFieldName.ID, pagination: { asc: true } });
+ }),
+ map(({ result }) => result.map(correctlyTypeExecution)),
+ catchError((err) => {
+ this.toast.showError(err);
+ return of([]);
+ }),
+ );
+ }
+
+ private getTargets$() {
+ return this.refresh$.pipe(
+ startWith(true),
+ switchMap(() => {
+ return this.actionService.listTargets({});
+ }),
+ map(({ result }) => result),
+ catchError((err) => {
+ this.toast.showError(err);
+ return of([]);
+ }),
+ );
+ }
+
+ public async openDialog(execution?: CorrectlyTypedExecution): Promise {
+ const request$ = this.dialog
+ .open(
+ ActionTwoAddActionDialogComponent,
+ {
+ width: '400px',
+ data: execution
+ ? {
+ execution,
+ }
+ : {},
+ },
+ )
+ .afterClosed()
+ .pipe(takeUntilDestroyed(this.destroyRef));
+
+ const request = await lastValueFrom(request$);
+ if (!request) {
+ return;
+ }
+
+ try {
+ await this.actionService.setExecution(request);
+ await new Promise((res) => setTimeout(res, 1000));
+ this.refresh$.next(true);
+ } catch (error) {
+ console.error(error);
+ this.toast.showError(error);
+ }
+ }
+
+ public async deleteExecution(execution: CorrectlyTypedExecution) {
+ const deleteReq: MessageInitShape = {
+ condition: execution.condition,
+ targets: [],
+ };
+ try {
+ await this.actionService.setExecution(deleteReq);
+ await new Promise((res) => setTimeout(res, 1000));
+ this.refresh$.next(true);
+ } catch (error) {
+ console.error(error);
+ this.toast.showError(error);
+ }
+ }
+
+ protected readonly InfoSectionType = InfoSectionType;
+}
diff --git a/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-condition/actions-two-add-action-condition.component.html b/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-condition/actions-two-add-action-condition.component.html
new file mode 100644
index 0000000000..f0248f45a2
--- /dev/null
+++ b/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-condition/actions-two-add-action-condition.component.html
@@ -0,0 +1,116 @@
+
diff --git a/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-condition/actions-two-add-action-condition.component.scss b/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-condition/actions-two-add-action-condition.component.scss
new file mode 100644
index 0000000000..0cff2adc73
--- /dev/null
+++ b/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-condition/actions-two-add-action-condition.component.scss
@@ -0,0 +1,21 @@
+.execution-condition-text {
+ display: flex;
+ flex-direction: column;
+
+ .description {
+ font-size: 0.9rem;
+ }
+}
+
+.condition-description {
+ margin-bottom: 0;
+}
+
+.name-hint {
+ font-size: 12px;
+}
+
+.actions {
+ display: flex;
+ justify-content: space-between;
+}
diff --git a/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-condition/actions-two-add-action-condition.component.spec.ts b/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-condition/actions-two-add-action-condition.component.spec.ts
new file mode 100644
index 0000000000..982df301fd
--- /dev/null
+++ b/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-condition/actions-two-add-action-condition.component.spec.ts
@@ -0,0 +1,20 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActionsTwoAddActionConditionComponent } from './actions-two-add-action-condition.component';
+
+describe('ActionsTwoAddActionConditionComponent', () => {
+ let component: ActionsTwoAddActionConditionComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ declarations: [ActionsTwoAddActionConditionComponent],
+ });
+ fixture = TestBed.createComponent(ActionsTwoAddActionConditionComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-condition/actions-two-add-action-condition.component.ts b/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-condition/actions-two-add-action-condition.component.ts
new file mode 100644
index 0000000000..4508f31230
--- /dev/null
+++ b/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-condition/actions-two-add-action-condition.component.ts
@@ -0,0 +1,343 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, DestroyRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { InputModule } from 'src/app/modules/input/input.module';
+import {
+ AbstractControl,
+ FormBuilder,
+ FormControl,
+ FormGroup,
+ FormsModule,
+ ReactiveFormsModule,
+ ValidationErrors,
+ ValidatorFn,
+} from '@angular/forms';
+import {
+ Observable,
+ catchError,
+ defer,
+ map,
+ of,
+ shareReplay,
+ ReplaySubject,
+ ObservedValueOf,
+ switchMap,
+ combineLatestWith,
+ OperatorFunction,
+} from 'rxjs';
+import { MatRadioModule } from '@angular/material/radio';
+import { ActionService } from 'src/app/services/action.service';
+import { ToastService } from 'src/app/services/toast.service';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { atLeastOneFieldValidator, requiredValidator } from 'src/app/modules/form-field/validators/validators';
+import { Message } from '@bufbuild/protobuf';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Condition } from '@zitadel/proto/zitadel/action/v2beta/execution_pb';
+import { startWith } from 'rxjs/operators';
+
+export type ConditionType = NonNullable;
+export type ConditionTypeValue = Omit<
+ NonNullable['value']>,
+ // we remove the message keys so $typeName is not required
+ keyof Message
+>;
+
+@Component({
+ standalone: true,
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ selector: 'cnsl-actions-two-add-action-condition',
+ templateUrl: './actions-two-add-action-condition.component.html',
+ styleUrls: ['./actions-two-add-action-condition.component.scss'],
+ imports: [
+ TranslateModule,
+ MatRadioModule,
+ RouterModule,
+ ReactiveFormsModule,
+ InputModule,
+ MatAutocompleteModule,
+ MatCheckboxModule,
+ FormsModule,
+ CommonModule,
+ MatButtonModule,
+ MatProgressSpinnerModule,
+ ],
+})
+export class ActionsTwoAddActionConditionComponent {
+ @Input({ required: true }) public set conditionType(conditionType: T) {
+ this.conditionType$.next(conditionType);
+ }
+ @Output() public readonly back = new EventEmitter();
+ @Output() public readonly continue = new EventEmitter>();
+
+ private readonly conditionType$ = new ReplaySubject(1);
+ protected readonly form$: ReturnType;
+
+ protected readonly executionServices$: Observable;
+ protected readonly executionMethods$: Observable;
+ protected readonly executionFunctions$: Observable;
+
+ constructor(
+ private readonly fb: FormBuilder,
+ private readonly actionService: ActionService,
+ private readonly toast: ToastService,
+ private readonly destroyRef: DestroyRef,
+ ) {
+ this.form$ = this.buildForm().pipe(shareReplay({ refCount: true, bufferSize: 1 }));
+ this.executionServices$ = this.listExecutionServices(this.form$).pipe(shareReplay({ refCount: true, bufferSize: 1 }));
+ this.executionMethods$ = this.listExecutionMethods(this.form$).pipe(shareReplay({ refCount: true, bufferSize: 1 }));
+ this.executionFunctions$ = this.listExecutionFunctions(this.form$).pipe(shareReplay({ refCount: true, bufferSize: 1 }));
+ }
+
+ public buildForm() {
+ return this.conditionType$.pipe(
+ switchMap((conditionType) => {
+ if (conditionType === 'event') {
+ return this.buildEventForm();
+ }
+ if (conditionType === 'function') {
+ return this.buildFunctionForm();
+ }
+ return this.buildRequestOrResponseForm(conditionType);
+ }),
+ );
+ }
+
+ private buildRequestOrResponseForm(requestOrResponse: T) {
+ const formFactory = () => ({
+ case: requestOrResponse,
+ form: this.fb.group(
+ {
+ all: new FormControl(false, { nonNullable: true }),
+ service: new FormControl('', { nonNullable: true }),
+ method: new FormControl('', { nonNullable: true }),
+ },
+ {
+ validators: atLeastOneFieldValidator(['all', 'service', 'method']),
+ },
+ ),
+ });
+
+ return new Observable>((obs) => {
+ const form = formFactory();
+ obs.next(form);
+
+ const { all, service, method } = form.form.controls;
+ return all.valueChanges
+ .pipe(
+ map(() => all.value),
+ takeUntilDestroyed(this.destroyRef),
+ )
+ .subscribe((all) => {
+ this.toggleFormControl(service, !all);
+ this.toggleFormControl(method, !all);
+ });
+ });
+ }
+
+ public buildFunctionForm() {
+ return of({
+ case: 'function' as const,
+ form: this.fb.group({
+ name: new FormControl('', { nonNullable: true, validators: [requiredValidator] }),
+ }),
+ });
+ }
+
+ public buildEventForm() {
+ const formFactory = () => ({
+ case: 'event' as const,
+ form: this.fb.group({
+ all: new FormControl(false, { nonNullable: true }),
+ group: new FormControl('', { nonNullable: true }),
+ event: new FormControl('', { nonNullable: true }),
+ }),
+ });
+
+ return new Observable>((obs) => {
+ const form = formFactory();
+ obs.next(form);
+
+ const { all, group, event } = form.form.controls;
+ return all.valueChanges
+ .pipe(
+ map(() => all.value),
+ takeUntilDestroyed(this.destroyRef),
+ )
+ .subscribe((all) => {
+ this.toggleFormControl(group, !all);
+ this.toggleFormControl(event, !all);
+ });
+ });
+ }
+
+ private toggleFormControl(control: FormControl, enabled: boolean) {
+ if (enabled) {
+ control.enable();
+ } else {
+ control.disable();
+ }
+ }
+
+ private listExecutionServices(form$: typeof this.form$) {
+ return defer(() => this.actionService.listExecutionServices({})).pipe(
+ map(({ services }) => services),
+ this.formFilter(form$, (form) => {
+ if ('service' in form.form.controls) {
+ return form.form.controls.service;
+ }
+ return undefined;
+ }),
+ catchError((error) => {
+ this.toast.showError(error);
+ return of([]);
+ }),
+ );
+ }
+
+ private listExecutionFunctions(form$: typeof this.form$) {
+ return defer(() => this.actionService.listExecutionFunctions({})).pipe(
+ map(({ functions }) => functions),
+ this.formFilter(form$, (form) => {
+ if (form.case !== 'function') {
+ return undefined;
+ }
+ return form.form.controls.name;
+ }),
+ catchError((error) => {
+ this.toast.showError(error);
+ return of([]);
+ }),
+ );
+ }
+
+ private listExecutionMethods(form$: typeof this.form$) {
+ return defer(() => this.actionService.listExecutionMethods({})).pipe(
+ map(({ methods }) => methods),
+ this.formFilter(form$, (form) => {
+ if ('method' in form.form.controls) {
+ return form.form.controls.method;
+ }
+ return undefined;
+ }),
+ // we also filter by service name
+ this.formFilter(form$, (form) => {
+ if ('service' in form.form.controls) {
+ return form.form.controls.service;
+ }
+ return undefined;
+ }),
+ catchError((error) => {
+ this.toast.showError(error);
+ return of([]);
+ }),
+ );
+ }
+
+ private formFilter(
+ form$: typeof this.form$,
+ getter: (form: ObservedValueOf) => FormControl | undefined,
+ ): OperatorFunction {
+ const filterValue$ = form$.pipe(
+ map(getter),
+ switchMap((control) => {
+ if (!control) {
+ return of('');
+ }
+
+ return control.valueChanges.pipe(
+ startWith(control.value),
+ map((value) => value.toLowerCase()),
+ );
+ }),
+ );
+
+ return (obs) =>
+ obs.pipe(
+ combineLatestWith(filterValue$),
+ map(([values, filterValue]) => values.filter((v) => v.toLowerCase().includes(filterValue))),
+ );
+ }
+
+ protected submit(form: ObservedValueOf) {
+ if (form.case === 'request' || form.case === 'response') {
+ (this as unknown as ActionsTwoAddActionConditionComponent<'request' | 'response'>).submitRequestOrResponse(form);
+ } else if (form.case === 'event') {
+ (this as unknown as ActionsTwoAddActionConditionComponent<'event'>).submitEvent(form);
+ } else if (form.case === 'function') {
+ (this as unknown as ActionsTwoAddActionConditionComponent<'function'>).submitFunction(form);
+ }
+ }
+
+ private submitRequestOrResponse(
+ this: ActionsTwoAddActionConditionComponent<'request' | 'response'>,
+ { form }: ObservedValueOf>,
+ ) {
+ const { all, service, method } = form.getRawValue();
+
+ if (all) {
+ this.continue.emit({
+ condition: {
+ case: 'all',
+ value: true,
+ },
+ });
+ } else if (method) {
+ this.continue.emit({
+ condition: {
+ case: 'method',
+ value: method,
+ },
+ });
+ } else if (service) {
+ this.continue.emit({
+ condition: {
+ case: 'service',
+ value: service,
+ },
+ });
+ }
+ }
+
+ private submitEvent(
+ this: ActionsTwoAddActionConditionComponent<'event'>,
+ { form }: ObservedValueOf>,
+ ) {
+ const { all, event, group } = form.getRawValue();
+ if (all) {
+ this.continue.emit({
+ condition: {
+ case: 'all',
+ value: true,
+ },
+ });
+ } else if (event) {
+ this.continue.emit({
+ condition: {
+ case: 'event',
+ value: event,
+ },
+ });
+ } else if (group) {
+ this.continue.emit({
+ condition: {
+ case: 'group',
+ value: group,
+ },
+ });
+ }
+ }
+
+ private submitFunction(
+ this: ActionsTwoAddActionConditionComponent<'function'>,
+ { form }: ObservedValueOf>,
+ ) {
+ const { name } = form.getRawValue();
+ this.continue.emit({
+ name,
+ });
+ }
+}
diff --git a/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-dialog.component.html b/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-dialog.component.html
new file mode 100644
index 0000000000..cc6e989cf2
--- /dev/null
+++ b/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-dialog.component.html
@@ -0,0 +1,28 @@
+
+
diff --git a/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-dialog.component.scss b/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-dialog.component.scss
new file mode 100644
index 0000000000..8223e63565
--- /dev/null
+++ b/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-dialog.component.scss
@@ -0,0 +1,19 @@
+.framework-change-block {
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+}
+
+.actions {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 1rem;
+}
+
+.hide {
+ visibility: hidden;
+}
+
+.show {
+ visibility: visible;
+}
diff --git a/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-dialog.component.ts b/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-dialog.component.ts
new file mode 100644
index 0000000000..a93d03e914
--- /dev/null
+++ b/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-dialog.component.ts
@@ -0,0 +1,130 @@
+import { Component, computed, effect, Inject, signal } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { TranslateModule } from '@ngx-translate/core';
+import { ActionsTwoAddActionTypeComponent } from './actions-two-add-action-type/actions-two-add-action-type.component';
+import { MessageInitShape } from '@bufbuild/protobuf';
+import {
+ ActionsTwoAddActionConditionComponent,
+ ConditionType,
+} from './actions-two-add-action-condition/actions-two-add-action-condition.component';
+import { ActionsTwoAddActionTargetComponent } from './actions-two-add-action-target/actions-two-add-action-target.component';
+import { CommonModule } from '@angular/common';
+import { Condition, Execution } from '@zitadel/proto/zitadel/action/v2beta/execution_pb';
+import { Subject } from 'rxjs';
+import { SetExecutionRequestSchema } from '@zitadel/proto/zitadel/action/v2beta/action_service_pb';
+
+enum Page {
+ Type,
+ Condition,
+ Target,
+}
+
+export type CorrectlyTypedCondition = Condition & { conditionType: Extract };
+
+export type CorrectlyTypedExecution = Omit & {
+ condition: CorrectlyTypedCondition;
+};
+
+export const correctlyTypeExecution = (execution: Execution): CorrectlyTypedExecution => {
+ if (!execution.condition?.conditionType?.case) {
+ throw new Error('Condition is required');
+ }
+ const conditionType = execution.condition.conditionType;
+
+ const condition = {
+ ...execution.condition,
+ conditionType,
+ };
+
+ return {
+ ...execution,
+ condition,
+ };
+};
+
+export type ActionTwoAddActionDialogData = {
+ execution?: CorrectlyTypedExecution;
+};
+
+export type ActionTwoAddActionDialogResult = MessageInitShape;
+
+@Component({
+ selector: 'cnsl-actions-two-add-action-dialog',
+ templateUrl: './actions-two-add-action-dialog.component.html',
+ styleUrls: ['./actions-two-add-action-dialog.component.scss'],
+ standalone: true,
+ imports: [
+ CommonModule,
+ MatButtonModule,
+ MatDialogModule,
+ TranslateModule,
+ ActionsTwoAddActionTypeComponent,
+ ActionsTwoAddActionConditionComponent,
+ ActionsTwoAddActionTargetComponent,
+ ],
+})
+export class ActionTwoAddActionDialogComponent {
+ protected readonly Page = Page;
+ protected readonly page = signal(Page.Type);
+
+ protected readonly typeSignal = signal('request');
+ protected readonly conditionSignal = signal['condition']>(undefined);
+ protected readonly targetsSignal = signal([]);
+
+ protected readonly continueSubject = new Subject();
+
+ protected readonly request = computed>(() => {
+ return {
+ condition: this.conditionSignal(),
+ targets: this.targetsSignal(),
+ };
+ });
+
+ protected readonly preselectedTargetIds: string[] = [];
+
+ constructor(
+ protected readonly dialogRef: MatDialogRef,
+ @Inject(MAT_DIALOG_DATA) protected readonly data: ActionTwoAddActionDialogData,
+ ) {
+ effect(() => {
+ const currentPage = this.page();
+ if (currentPage === Page.Target) {
+ this.continueSubject.next(); // Trigger the Subject to request condition form when the page changes to "Target"
+ }
+ });
+
+ if (!data?.execution) {
+ return;
+ }
+
+ this.targetsSignal.set(data.execution.targets);
+ this.typeSignal.set(data.execution.condition.conditionType.case);
+ this.conditionSignal.set(data.execution.condition);
+ this.preselectedTargetIds = data.execution.targets;
+
+ this.page.set(Page.Target); // Set the initial page based on the provided execution data
+ }
+
+ public continue() {
+ const currentPage = this.page();
+ if (currentPage === Page.Type) {
+ this.page.set(Page.Condition);
+ } else if (currentPage === Page.Condition) {
+ this.page.set(Page.Target);
+ } else {
+ this.dialogRef.close(this.request());
+ }
+ }
+
+ public back() {
+ const currentPage = this.page();
+ if (currentPage === Page.Target) {
+ this.page.set(Page.Condition);
+ } else if (currentPage === Page.Condition) {
+ this.page.set(Page.Type);
+ } else {
+ this.dialogRef.close();
+ }
+ }
+}
diff --git a/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-target/actions-two-add-action-target.component.html b/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-target/actions-two-add-action-target.component.html
new file mode 100644
index 0000000000..26d9e3be2c
--- /dev/null
+++ b/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-target/actions-two-add-action-target.component.html
@@ -0,0 +1,72 @@
+
diff --git a/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-target/actions-two-add-action-target.component.scss b/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-target/actions-two-add-action-target.component.scss
new file mode 100644
index 0000000000..deff15c680
--- /dev/null
+++ b/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-target/actions-two-add-action-target.component.scss
@@ -0,0 +1,36 @@
+.target-description {
+ margin-bottom: 0;
+}
+
+.actions {
+ display: flex;
+ justify-content: space-between;
+
+ .fill-space {
+ font: 1;
+ }
+}
+
+.cdk-drag-preview {
+ box-sizing: border-box;
+ border-radius: 4px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.cdk-drag-placeholder {
+ opacity: 0;
+}
+
+.cdk-drag-animating {
+ transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.cdk-drop-list-dragging .mat-row:not(.cdk-drag-placeholder) {
+ transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.drag-row {
+ backdrop-filter: blur(10px);
+}
diff --git a/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-target/actions-two-add-action-target.component.spec.ts b/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-target/actions-two-add-action-target.component.spec.ts
new file mode 100644
index 0000000000..b4c86a8481
--- /dev/null
+++ b/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-target/actions-two-add-action-target.component.spec.ts
@@ -0,0 +1,20 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActionsTwoAddActionTargetComponent } from './actions-two-add-action-target.component';
+
+describe('ActionsTwoAddActionTargetComponent', () => {
+ let component: ActionsTwoAddActionTargetComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ declarations: [ActionsTwoAddActionTargetComponent],
+ });
+ fixture = TestBed.createComponent(ActionsTwoAddActionTargetComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-target/actions-two-add-action-target.component.ts b/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-target/actions-two-add-action-target.component.ts
new file mode 100644
index 0000000000..60b4025650
--- /dev/null
+++ b/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-target/actions-two-add-action-target.component.ts
@@ -0,0 +1,230 @@
+import { CommonModule } from '@angular/common';
+import {
+ ChangeDetectionStrategy,
+ Component,
+ computed,
+ effect,
+ EventEmitter,
+ Input,
+ Output,
+ signal,
+ Signal,
+} from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatButtonModule } from '@angular/material/button';
+import { FormBuilder, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ObservedValueOf, ReplaySubject, shareReplay, switchMap } from 'rxjs';
+import { MatRadioModule } from '@angular/material/radio';
+import { ActionService } from 'src/app/services/action.service';
+import { ToastService } from 'src/app/services/toast.service';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { InputModule } from 'src/app/modules/input/input.module';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MessageInitShape } from '@bufbuild/protobuf';
+import { Target } from '@zitadel/proto/zitadel/action/v2beta/target_pb';
+import { MatSelectModule } from '@angular/material/select';
+import { ActionConditionPipeModule } from 'src/app/pipes/action-condition-pipe/action-condition-pipe.module';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { map, startWith } from 'rxjs/operators';
+import { TypeSafeCellDefModule } from 'src/app/directives/type-safe-cell-def/type-safe-cell-def.module';
+import { CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { minArrayLengthValidator } from '../../../form-field/validators/validators';
+import { ProjectRoleChipModule } from '../../../project-role-chip/project-role-chip.module';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TableActionsModule } from '../../../table-actions/table-actions.module';
+
+@Component({
+ standalone: true,
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ selector: 'cnsl-actions-two-add-action-target',
+ templateUrl: './actions-two-add-action-target.component.html',
+ styleUrls: ['./actions-two-add-action-target.component.scss'],
+ imports: [
+ TranslateModule,
+ MatRadioModule,
+ RouterModule,
+ ReactiveFormsModule,
+ InputModule,
+ MatAutocompleteModule,
+ FormsModule,
+ ActionConditionPipeModule,
+ CommonModule,
+ MatButtonModule,
+ MatProgressSpinnerModule,
+ MatSelectModule,
+ MatTableModule,
+ TypeSafeCellDefModule,
+ CdkDrag,
+ CdkDropList,
+ ProjectRoleChipModule,
+ MatTooltipModule,
+ TableActionsModule,
+ ],
+})
+export class ActionsTwoAddActionTargetComponent {
+ @Input() public hideBackButton = false;
+ @Input()
+ public set preselectedTargetIds(preselectedTargetIds: string[]) {
+ this.preselectedTargetIds$.next(preselectedTargetIds);
+ }
+
+ @Output() public readonly back = new EventEmitter();
+ @Output() public readonly continue = new EventEmitter();
+
+ private readonly preselectedTargetIds$ = new ReplaySubject(1);
+
+ protected readonly form$: ReturnType;
+
+ protected readonly targets: ReturnType;
+ private readonly selectedTargetIds: Signal;
+ protected readonly selectableTargets: Signal;
+ protected readonly dataSource: MatTableDataSource;
+
+ constructor(
+ private readonly fb: FormBuilder,
+ private readonly actionService: ActionService,
+ private readonly toast: ToastService,
+ ) {
+ this.form$ = this.buildForm().pipe(shareReplay({ refCount: true, bufferSize: 1 }));
+ this.targets = this.listTargets();
+
+ this.selectedTargetIds = this.getSelectedTargetIds(this.form$);
+ this.selectableTargets = this.getSelectableTargets(this.targets, this.selectedTargetIds, this.form$);
+ this.dataSource = this.getDataSource(this.targets, this.selectedTargetIds);
+ }
+
+ private buildForm() {
+ return this.preselectedTargetIds$.pipe(
+ startWith([] as string[]),
+ map((preselectedTargetIds) => {
+ return this.fb.group({
+ autocomplete: new FormControl('', { nonNullable: true }),
+ selectedTargetIds: new FormControl(preselectedTargetIds, {
+ nonNullable: true,
+ validators: [minArrayLengthValidator(1)],
+ }),
+ });
+ }),
+ );
+ }
+
+ private listTargets() {
+ const targetsSignal = signal({ state: 'loading' as 'loading' | 'loaded', targets: new Map() });
+
+ this.actionService
+ .listTargets({})
+ .then(({ result }) => {
+ const targets = result.reduce((acc, target) => {
+ acc.set(target.id, target);
+ return acc;
+ }, new Map());
+
+ targetsSignal.set({ state: 'loaded', targets });
+ })
+ .catch((error) => {
+ this.toast.showError(error);
+ });
+
+ return computed(targetsSignal);
+ }
+
+ private getSelectedTargetIds(form$: typeof this.form$) {
+ const selectedTargetIds$ = form$.pipe(
+ switchMap(({ controls: { selectedTargetIds } }) => {
+ return selectedTargetIds.valueChanges.pipe(startWith(selectedTargetIds.value));
+ }),
+ );
+ return toSignal(selectedTargetIds$, { requireSync: true });
+ }
+
+ private getSelectableTargets(targets: typeof this.targets, selectedTargetIds: Signal, form$: typeof this.form$) {
+ const autocomplete$ = form$.pipe(
+ switchMap(({ controls: { autocomplete } }) => {
+ return autocomplete.valueChanges.pipe(startWith(autocomplete.value));
+ }),
+ );
+ const autocompleteSignal = toSignal(autocomplete$, { requireSync: true });
+
+ const unselectedTargets = computed(() => {
+ const targetsCopy = new Map(targets().targets);
+ for (const selectedTargetId of selectedTargetIds()) {
+ targetsCopy.delete(selectedTargetId);
+ }
+ return Array.from(targetsCopy.values());
+ });
+
+ return computed(() => {
+ const autocomplete = autocompleteSignal().toLowerCase();
+ return unselectedTargets().filter(({ name }) => name.toLowerCase().includes(autocomplete));
+ });
+ }
+
+ private getDataSource(targetsSignal: typeof this.targets, selectedTargetIdsSignal: Signal) {
+ const selectedTargets = computed(() => {
+ // get this out of the loop so angular can track this dependency
+ // even if targets is empty
+ const { targets, state } = targetsSignal();
+ const selectedTargetIds = selectedTargetIdsSignal();
+
+ if (state === 'loading') {
+ return [];
+ }
+
+ return selectedTargetIds.map((id) => {
+ const target = targets.get(id);
+ if (!target) {
+ throw new Error(`Target with id ${id} not found`);
+ }
+ return target;
+ });
+ });
+
+ const dataSource = new MatTableDataSource(selectedTargets());
+ effect(() => {
+ dataSource.data = selectedTargets();
+ });
+
+ return dataSource;
+ }
+
+ protected addTarget(target: Target, form: ObservedValueOf) {
+ const { selectedTargetIds } = form.controls;
+ selectedTargetIds.setValue([target.id, ...selectedTargetIds.value]);
+ form.controls.autocomplete.setValue('');
+ }
+
+ protected removeTarget(index: number, form: ObservedValueOf) {
+ const { selectedTargetIds } = form.controls;
+ const data = [...selectedTargetIds.value];
+ data.splice(index, 1);
+ selectedTargetIds.setValue(data);
+ }
+
+ protected drop(event: CdkDragDrop, form: ObservedValueOf) {
+ const { selectedTargetIds } = form.controls;
+
+ const data = [...selectedTargetIds.value];
+ moveItemInArray(data, event.previousIndex, event.currentIndex);
+ selectedTargetIds.setValue(data);
+ }
+
+ protected handleEnter(event: Event, form: ObservedValueOf) {
+ const selectableTargets = this.selectableTargets();
+ if (selectableTargets.length !== 1) {
+ return;
+ }
+
+ event.preventDefault();
+ this.addTarget(selectableTargets[0], form);
+ }
+
+ protected submit() {
+ this.continue.emit(this.selectedTargetIds());
+ }
+
+ protected trackTarget(_: number, target: Target) {
+ return target.id;
+ }
+}
diff --git a/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-type/actions-two-add-action-type.component.html b/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-type/actions-two-add-action-type.component.html
new file mode 100644
index 0000000000..d1d1e8a0dd
--- /dev/null
+++ b/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-type/actions-two-add-action-type.component.html
@@ -0,0 +1,49 @@
+;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ declarations: [ActionsTwoAddActionTypeComponent],
+ });
+ fixture = TestBed.createComponent(ActionsTwoAddActionTypeComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-type/actions-two-add-action-type.component.ts b/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-type/actions-two-add-action-type.component.ts
new file mode 100644
index 0000000000..143016ef5f
--- /dev/null
+++ b/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-type/actions-two-add-action-type.component.ts
@@ -0,0 +1,53 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output, signal } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatButtonModule } from '@angular/material/button';
+import { FormBuilder, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Observable, Subject, map, of, startWith, switchMap, tap } from 'rxjs';
+import { MatRadioModule } from '@angular/material/radio';
+import { ConditionType } from '../actions-two-add-action-condition/actions-two-add-action-condition.component';
+
+// export enum ExecutionType {
+// REQUEST = 'request',
+// RESPONSE = 'response',
+// EVENTS = 'event',
+// FUNCTIONS = 'function',
+// }
+
+@Component({
+ standalone: true,
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ selector: 'cnsl-actions-two-add-action-type',
+ templateUrl: './actions-two-add-action-type.component.html',
+ styleUrls: ['./actions-two-add-action-type.component.scss'],
+ imports: [TranslateModule, MatRadioModule, RouterModule, ReactiveFormsModule, FormsModule, CommonModule, MatButtonModule],
+})
+export class ActionsTwoAddActionTypeComponent {
+ protected readonly typeForm: ReturnType = this.buildActionTypeForm();
+ @Output() public readonly typeChanges$: Observable;
+
+ @Output() public readonly back = new EventEmitter();
+ @Output() public readonly continue = new EventEmitter();
+ @Input() public set initialValue(type: ConditionType) {
+ this.typeForm.get('executionType')!.setValue(type);
+ }
+
+ constructor(private readonly fb: FormBuilder) {
+ this.typeChanges$ = this.typeForm.get('executionType')!.valueChanges.pipe(
+ startWith(this.typeForm.get('executionType')!.value), // Emit the initial value
+ );
+ }
+
+ public buildActionTypeForm() {
+ return this.fb.group({
+ executionType: new FormControl('request', {
+ nonNullable: true,
+ }),
+ });
+ }
+
+ public submit() {
+ this.continue.emit(this.typeForm.get('executionType')!.value);
+ }
+}
diff --git a/console/src/app/modules/actions-two/actions-two-add-target/actions-two-add-target-dialog.component.html b/console/src/app/modules/actions-two/actions-two-add-target/actions-two-add-target-dialog.component.html
new file mode 100644
index 0000000000..717ee8f850
--- /dev/null
+++ b/console/src/app/modules/actions-two/actions-two-add-target/actions-two-add-target-dialog.component.html
@@ -0,0 +1,68 @@
+
+
+;
+
+ constructor(
+ private fb: FormBuilder,
+ public dialogRef: MatDialogRef<
+ ActionTwoAddTargetDialogComponent,
+ MessageInitShape
+ >,
+ @Inject(MAT_DIALOG_DATA) public readonly data: { target?: Target },
+ ) {
+ this.targetForm = this.buildTargetForm();
+
+ if (!data?.target) {
+ return;
+ }
+
+ this.targetForm.patchValue({
+ name: data.target.name,
+ endpoint: data.target.endpoint,
+ timeout: Number(data.target.timeout?.seconds),
+ type: this.data.target?.targetType?.case ?? 'restWebhook',
+ interruptOnError:
+ data.target.targetType.case === 'restWebhook' || data.target.targetType.case === 'restCall'
+ ? data.target.targetType.value.interruptOnError
+ : false,
+ });
+ }
+
+ public buildTargetForm() {
+ return this.fb.group({
+ name: new FormControl('', { nonNullable: true, validators: [requiredValidator] }),
+ type: new FormControl('restWebhook', {
+ nonNullable: true,
+ validators: [requiredValidator],
+ }),
+ endpoint: new FormControl('', { nonNullable: true, validators: [requiredValidator] }),
+ timeout: new FormControl(10, { nonNullable: true, validators: [requiredValidator] }),
+ interruptOnError: new FormControl(false, { nonNullable: true }),
+ });
+ }
+
+ public closeWithResult() {
+ if (this.targetForm.invalid) {
+ return;
+ }
+
+ const { type, name, endpoint, timeout, interruptOnError } = this.targetForm.getRawValue();
+
+ const timeoutDuration: MessageInitShape = {
+ seconds: BigInt(timeout),
+ nanos: 0,
+ };
+
+ const targetType: Extract['targetType'], { case: TargetTypes }> =
+ type === 'restWebhook'
+ ? { case: type, value: { interruptOnError } }
+ : type === 'restCall'
+ ? { case: type, value: { interruptOnError } }
+ : { case: 'restAsync', value: {} };
+
+ const baseReq = {
+ name,
+ endpoint,
+ timeout: timeoutDuration,
+ targetType,
+ };
+
+ this.dialogRef.close(
+ this.data.target
+ ? {
+ ...baseReq,
+ id: this.data.target.id,
+ }
+ : baseReq,
+ );
+ }
+}
diff --git a/console/src/app/modules/actions-two/actions-two-routing.module.ts b/console/src/app/modules/actions-two/actions-two-routing.module.ts
new file mode 100644
index 0000000000..7ce79d01ea
--- /dev/null
+++ b/console/src/app/modules/actions-two/actions-two-routing.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { ActionsTwoActionsComponent } from './actions-two-actions/actions-two-actions.component';
+
+const routes: Routes = [
+ {
+ path: '',
+ component: ActionsTwoActionsComponent,
+ },
+];
+
+@NgModule({
+ imports: [RouterModule.forChild(routes)],
+ exports: [RouterModule],
+})
+export class ActionsTwoRoutingModule {}
diff --git a/console/src/app/modules/actions-two/actions-two-targets/actions-two-targets-table/actions-two-targets-table.component.html b/console/src/app/modules/actions-two/actions-two-targets/actions-two-targets-table/actions-two-targets-table.component.html
new file mode 100644
index 0000000000..1cac09f1e4
--- /dev/null
+++ b/console/src/app/modules/actions-two/actions-two-targets/actions-two-targets-table/actions-two-targets-table.component.html
@@ -0,0 +1,82 @@
+
+
diff --git a/console/src/app/modules/actions-two/actions-two-targets/actions-two-targets-table/actions-two-targets-table.component.scss b/console/src/app/modules/actions-two/actions-two-targets/actions-two-targets-table/actions-two-targets-table.component.scss
new file mode 100644
index 0000000000..ff20def7da
--- /dev/null
+++ b/console/src/app/modules/actions-two/actions-two-targets/actions-two-targets-table/actions-two-targets-table.component.scss
@@ -0,0 +1,4 @@
+.target-key {
+ display: flex;
+ white-space: nowrap;
+}
diff --git a/console/src/app/modules/actions-two/actions-two-targets/actions-two-targets-table/actions-two-targets-table.component.ts b/console/src/app/modules/actions-two/actions-two-targets/actions-two-targets-table/actions-two-targets-table.component.ts
new file mode 100644
index 0000000000..2b2e4db579
--- /dev/null
+++ b/console/src/app/modules/actions-two/actions-two-targets/actions-two-targets-table/actions-two-targets-table.component.ts
@@ -0,0 +1,49 @@
+import { ChangeDetectionStrategy, Component, effect, EventEmitter, Input, Output } from '@angular/core';
+import { ReplaySubject } from 'rxjs';
+import { filter, startWith } from 'rxjs/operators';
+import { MatTableDataSource } from '@angular/material/table';
+import { Target } from '@zitadel/proto/zitadel/action/v2beta/target_pb';
+import { toSignal } from '@angular/core/rxjs-interop';
+
+@Component({
+ selector: 'cnsl-actions-two-targets-table',
+ templateUrl: './actions-two-targets-table.component.html',
+ styleUrls: ['./actions-two-targets-table.component.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ActionsTwoTargetsTableComponent {
+ @Output()
+ public readonly refresh = new EventEmitter();
+
+ @Output()
+ public readonly selected = new EventEmitter();
+
+ @Output()
+ public readonly delete = new EventEmitter();
+
+ @Input({ required: true })
+ public set targets(targets: Target[] | null) {
+ this.targets$.next(targets);
+ }
+
+ protected readonly targets$ = new ReplaySubject(1);
+ protected readonly dataSource: MatTableDataSource;
+
+ constructor() {
+ this.dataSource = this.getDataSource();
+ }
+
+ private getDataSource() {
+ const targets$ = this.targets$.pipe(filter(Boolean), startWith([]));
+ const targetsSignal = toSignal(targets$, { requireSync: true });
+
+ const dataSource = new MatTableDataSource(targetsSignal());
+ effect(() => {
+ const targets = targetsSignal();
+ if (dataSource.data !== targets) {
+ dataSource.data = targets;
+ }
+ });
+ return dataSource;
+ }
+}
diff --git a/console/src/app/modules/actions-two/actions-two-targets/actions-two-targets.component.html b/console/src/app/modules/actions-two/actions-two-targets/actions-two-targets.component.html
new file mode 100644
index 0000000000..23b3b4bb89
--- /dev/null
+++ b/console/src/app/modules/actions-two/actions-two-targets/actions-two-targets.component.html
@@ -0,0 +1,16 @@
+
+ {{ 'ACTIONSTWO.BETA_NOTE' | translate }}
+
+
+
+
diff --git a/console/src/app/modules/actions-two/actions-two-targets/actions-two-targets.component.scss b/console/src/app/modules/actions-two/actions-two-targets/actions-two-targets.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/console/src/app/modules/actions-two/actions-two-targets/actions-two-targets.component.ts b/console/src/app/modules/actions-two/actions-two-targets/actions-two-targets.component.ts
new file mode 100644
index 0000000000..f678b86482
--- /dev/null
+++ b/console/src/app/modules/actions-two/actions-two-targets/actions-two-targets.component.ts
@@ -0,0 +1,93 @@
+import { ChangeDetectionStrategy, Component, DestroyRef } from '@angular/core';
+import { lastValueFrom, Observable, of, ReplaySubject } from 'rxjs';
+import { ActionService } from 'src/app/services/action.service';
+import { ToastService } from 'src/app/services/toast.service';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { catchError, map, startWith, switchMap } from 'rxjs/operators';
+import { MatDialog } from '@angular/material/dialog';
+import { ActionTwoAddTargetDialogComponent } from '../actions-two-add-target/actions-two-add-target-dialog.component';
+import { MessageInitShape } from '@bufbuild/protobuf';
+import { Target } from '@zitadel/proto/zitadel/action/v2beta/target_pb';
+import {
+ CreateTargetRequestSchema,
+ UpdateTargetRequestSchema,
+} from '@zitadel/proto/zitadel/action/v2beta/action_service_pb';
+import { InfoSectionType } from '../../info-section/info-section.component';
+
+@Component({
+ selector: 'cnsl-actions-two-targets',
+ templateUrl: './actions-two-targets.component.html',
+ styleUrls: ['./actions-two-targets.component.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ActionsTwoTargetsComponent {
+ protected readonly targets$: Observable;
+ protected readonly refresh$ = new ReplaySubject(1);
+
+ constructor(
+ private readonly actionService: ActionService,
+ private readonly toast: ToastService,
+ private readonly destroyRef: DestroyRef,
+ private readonly dialog: MatDialog,
+ ) {
+ this.targets$ = this.getTargets$();
+ }
+
+ private getTargets$() {
+ return this.refresh$.pipe(
+ startWith(true),
+ switchMap(() => {
+ return this.actionService.listTargets({});
+ }),
+ map(({ result }) => result),
+ catchError((err) => {
+ this.toast.showError(err);
+ return of([]);
+ }),
+ );
+ }
+
+ public async deleteTarget(target: Target) {
+ await this.actionService.deleteTarget({ id: target.id });
+ await new Promise((res) => setTimeout(res, 1000));
+ this.refresh$.next(true);
+ }
+
+ public async openDialog(target?: Target) {
+ const request$ = this.dialog
+ .open<
+ ActionTwoAddTargetDialogComponent,
+ { target?: Target },
+ MessageInitShape
+ >(ActionTwoAddTargetDialogComponent, {
+ width: '550px',
+ data: {
+ target: target,
+ },
+ })
+ .afterClosed()
+ .pipe(takeUntilDestroyed(this.destroyRef));
+
+ const request = await lastValueFrom(request$);
+ if (!request) {
+ return;
+ }
+
+ try {
+ if ('id' in request) {
+ await this.actionService.updateTarget(request);
+ } else {
+ const resp = await this.actionService.createTarget(request);
+ console.log(`Your singing key: ${resp.signingKey}`);
+ }
+
+ await new Promise((res) => setTimeout(res, 1000));
+ this.refresh$.next(true);
+ } catch (error) {
+ console.error(error);
+ this.toast.showError(error);
+ }
+ }
+
+ protected readonly InfoSectionType = InfoSectionType;
+}
diff --git a/console/src/app/modules/actions-two/actions-two.module.ts b/console/src/app/modules/actions-two/actions-two.module.ts
new file mode 100644
index 0000000000..a940264eb2
--- /dev/null
+++ b/console/src/app/modules/actions-two/actions-two.module.ts
@@ -0,0 +1,55 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ActionsTwoActionsComponent } from './actions-two-actions/actions-two-actions.component';
+import { ActionsTwoTargetsComponent } from './actions-two-targets/actions-two-targets.component';
+import { ActionsTwoRoutingModule } from './actions-two-routing.module';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatButtonModule } from '@angular/material/button';
+import { ActionsTwoTargetsTableComponent } from './actions-two-targets/actions-two-targets-table/actions-two-targets-table.component';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TableActionsModule } from '../table-actions/table-actions.module';
+import { RefreshTableModule } from '../refresh-table/refresh-table.module';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ActionKeysModule } from '../action-keys/action-keys.module';
+import { ActionsTwoActionsTableComponent } from './actions-two-actions/actions-two-actions-table/actions-two-actions-table.component';
+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 { TypeSafeCellDefModule } from 'src/app/directives/type-safe-cell-def/type-safe-cell-def.module';
+import { ProjectRoleChipModule } from '../project-role-chip/project-role-chip.module';
+import { ActionConditionPipeModule } from 'src/app/pipes/action-condition-pipe/action-condition-pipe.module';
+import { MatSelectModule } from '@angular/material/select';
+import { MatIconModule } from '@angular/material/icon';
+import { InfoSectionModule } from '../info-section/info-section.module';
+
+@NgModule({
+ declarations: [
+ ActionsTwoActionsComponent,
+ ActionsTwoTargetsComponent,
+ ActionsTwoTargetsTableComponent,
+ ActionsTwoActionsTableComponent,
+ ],
+ imports: [
+ CommonModule,
+ FormsModule,
+ MatButtonModule,
+ TableActionsModule,
+ TimestampToDatePipeModule,
+ ActionsTwoRoutingModule,
+ LocalizedDatePipeModule,
+ ReactiveFormsModule,
+ TranslateModule,
+ MatTableModule,
+ MatTooltipModule,
+ MatSelectModule,
+ RefreshTableModule,
+ ActionKeysModule,
+ MatIconModule,
+ TypeSafeCellDefModule,
+ ProjectRoleChipModule,
+ ActionConditionPipeModule,
+ InfoSectionModule,
+ ],
+ exports: [ActionsTwoActionsComponent, ActionsTwoTargetsComponent, ActionsTwoTargetsTableComponent],
+})
+export default class ActionsTwoModule {}
diff --git a/console/src/app/modules/client-keys/client-keys.component.html b/console/src/app/modules/client-keys/client-keys.component.html
index 8ac5869c8d..dfb99a5e17 100644
--- a/console/src/app/modules/client-keys/client-keys.component.html
+++ b/console/src/app/modules/client-keys/client-keys.component.html
@@ -1,7 +1,6 @@
diff --git a/console/src/app/modules/events/events.component.html b/console/src/app/modules/events/events.component.html
index 556a602441..7dad189da2 100644
--- a/console/src/app/modules/events/events.component.html
+++ b/console/src/app/modules/events/events.component.html
@@ -6,12 +6,7 @@
+
-
{{ session.displayName ? session.displayName : session.userName }}
{{ session.loginName }}
- {{
+ {{
'USER.STATE.' + session.authState | translate
}}
diff --git a/console/src/app/modules/accounts-card/accounts-card.component.ts b/console/src/app/modules/accounts-card/accounts-card.component.ts
index 2676a5bcf5..273af86467 100644
--- a/console/src/app/modules/accounts-card/accounts-card.component.ts
+++ b/console/src/app/modules/accounts-card/accounts-card.component.ts
@@ -1,64 +1,158 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, NgIterable, Output } from '@angular/core';
import { Router } from '@angular/router';
import { AuthConfig } from 'angular-oauth2-oidc';
-import { Session, User, UserState } from 'src/app/proto/generated/zitadel/user_pb';
+import { SessionState as V1SessionState, User, UserState } from 'src/app/proto/generated/zitadel/user_pb';
import { AuthenticationService } from 'src/app/services/authentication.service';
import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
import { toSignal } from '@angular/core/rxjs-interop';
+import { SessionService } from 'src/app/services/session.service';
+import {
+ catchError,
+ defer,
+ from,
+ map,
+ mergeMap,
+ Observable,
+ of,
+ ReplaySubject,
+ shareReplay,
+ switchMap,
+ timeout,
+ TimeoutError,
+ toArray,
+} from 'rxjs';
+import { NewFeatureService } from 'src/app/services/new-feature.service';
+import { ToastService } from 'src/app/services/toast.service';
+import { SessionState as V2SessionState } from '@zitadel/proto/zitadel/user_pb';
+import { filter, withLatestFrom } from 'rxjs/operators';
+
+interface V1AndV2Session {
+ displayName: string;
+ avatarUrl: string;
+ loginName: string;
+ userName: string;
+ authState: V1SessionState | V2SessionState;
+}
@Component({
selector: 'cnsl-accounts-card',
templateUrl: './accounts-card.component.html',
styleUrls: ['./accounts-card.component.scss'],
})
-export class AccountsCardComponent implements OnInit {
- @Input() public user?: User.AsObject;
- @Input() public iamuser: boolean | null = false;
-
- @Output() public closedCard: EventEmitter
+
+
+
+
+
+| {{ 'ACTIONSTWO.EXECUTION.TABLE.CONDITION' | translate }} | ++ + {{ row.execution.condition | condition }} + + | +{{ 'ACTIONSTWO.EXECUTION.TABLE.TYPE' | translate }} | ++ {{ 'ACTIONSTWO.EXECUTION.TYPES.' + row.execution.condition.conditionType.case | translate }} + | +{{ 'ACTIONSTWO.EXECUTION.TABLE.TARGET' | translate }} | +
+
+
+ |
+ + {{ 'ACTIONSTWO.EXECUTION.TABLE.CREATIONDATE' | translate }} + | ++ {{ row.execution.creationDate | timestampToDate | localizedDate: 'regular' }} + | ++ |
+ |
+
|---|
{{ 'ACTIONSTWO.EXECUTION.TITLE' | translate }}
+{{ 'ACTIONSTWO.EXECUTION.DESCRIPTION' | translate }}
+ +{{ 'ACTIONSTWO.EXECUTION.DIALOG.CREATE_TITLE' | translate }}
+{{ 'ACTIONSTWO.EXECUTION.DIALOG.UPDATE_TITLE' | translate }}
+ +
+
+{{ 'ACTIONSTWO.EXECUTION.DIALOG.TYPE.DESCRIPTION' | translate }}
+ + diff --git a/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-type/actions-two-add-action-type.component.scss b/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-type/actions-two-add-action-type.component.scss new file mode 100644 index 0000000000..91a96b2cd2 --- /dev/null +++ b/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-type/actions-two-add-action-type.component.scss @@ -0,0 +1,20 @@ +.execution-radio-group { + .execution-radio-button { + display: block; + margin-bottom: 1rem; + + .execution-type-text { + display: flex; + flex-direction: column; + + .description { + font-size: 0.9rem; + } + } + } +} + +.actions { + display: flex; + justify-content: space-between; +} diff --git a/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-type/actions-two-add-action-type.component.spec.ts b/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-type/actions-two-add-action-type.component.spec.ts new file mode 100644 index 0000000000..cd4b02dc47 --- /dev/null +++ b/console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-type/actions-two-add-action-type.component.spec.ts @@ -0,0 +1,20 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { ActionsTwoAddActionTypeComponent } from './actions-two-add-action-type.component'; + +describe('ActionsTwoAddActionTypeComponent', () => { + let component: ActionsTwoAddActionTypeComponent; + let fixture: ComponentFixture{{ 'ACTIONSTWO.TARGET.CREATE.TITLE' | translate }}
+{{ 'ACTIONSTWO.TARGET.CREATE.DESCRIPTION' | translate }}
+ + +
+
+
+
+
+
diff --git a/console/src/app/modules/actions-two/actions-two-add-target/actions-two-add-target-dialog.component.scss b/console/src/app/modules/actions-two/actions-two-add-target/actions-two-add-target-dialog.component.scss
new file mode 100644
index 0000000000..a68e1e87cb
--- /dev/null
+++ b/console/src/app/modules/actions-two/actions-two-add-target/actions-two-add-target-dialog.component.scss
@@ -0,0 +1,29 @@
+.target-checkbox {
+ margin-bottom: 1rem;
+
+ .target-condition-text {
+ display: flex;
+ flex-direction: column;
+
+ .description {
+ font-size: 13px;
+ }
+ }
+}
+
+.target-description {
+ margin-bottom: 0;
+}
+
+.actions {
+ display: flex;
+ justify-content: space-between;
+}
+
+.name-hint {
+ font-size: 12px;
+}
+
+.types-description {
+ white-space: pre-line;
+}
diff --git a/console/src/app/modules/actions-two/actions-two-add-target/actions-two-add-target-dialog.component.ts b/console/src/app/modules/actions-two/actions-two-add-target/actions-two-add-target-dialog.component.ts
new file mode 100644
index 0000000000..7d3ad0e86c
--- /dev/null
+++ b/console/src/app/modules/actions-two/actions-two-add-target/actions-two-add-target-dialog.component.ts
@@ -0,0 +1,115 @@
+import { Component, Inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { TranslateModule } from '@ngx-translate/core';
+import { CommonModule } from '@angular/common';
+import { FormBuilder, FormControl, ReactiveFormsModule } from '@angular/forms';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { InputModule } from '../../input/input.module';
+import { requiredValidator } from '../../form-field/validators/validators';
+import { MessageInitShape } from '@bufbuild/protobuf';
+import { DurationSchema } from '@bufbuild/protobuf/wkt';
+import { MatSelectModule } from '@angular/material/select';
+import { Target } from '@zitadel/proto/zitadel/action/v2beta/target_pb';
+import {
+ CreateTargetRequestSchema,
+ UpdateTargetRequestSchema,
+} from '@zitadel/proto/zitadel/action/v2beta/action_service_pb';
+
+type TargetTypes = ActionTwoAddTargetDialogComponent['targetTypes'][number];
+
+@Component({
+ selector: 'cnsl-actions-two-add-target-dialog',
+ templateUrl: './actions-two-add-target-dialog.component.html',
+ styleUrls: ['./actions-two-add-target-dialog.component.scss'],
+ standalone: true,
+ imports: [
+ CommonModule,
+ MatButtonModule,
+ MatDialogModule,
+ ReactiveFormsModule,
+ TranslateModule,
+ InputModule,
+ MatCheckboxModule,
+ MatSelectModule,
+ ],
+})
+export class ActionTwoAddTargetDialogComponent {
+ protected readonly targetTypes = ['restCall', 'restWebhook', 'restAsync'] as const;
+ protected readonly targetForm: ReturnType
+
+
+
+
+
+
+| {{ 'ACTIONSTWO.TARGET.TABLE.ID' | translate }} | ++ {{ row.id }} + | +{{ 'ACTIONSTWO.TARGET.TABLE.NAME' | translate }} | +
+
+
+ |
+ {{ 'ACTIONSTWO.TARGET.TABLE.ENDPOINT' | translate }} | ++ {{ row.endpoint }} + | +{{ 'ACTIONSTWO.TARGET.TABLE.CREATIONDATE' | translate }} | ++ {{ row.creationDate | timestampToDate | localizedDate: 'regular' }} + | ++ |
+ |
+
|---|
{{ 'ACTIONSTWO.TARGET.TITLE' | translate }}
+{{ 'ACTIONSTWO.TARGET.DESCRIPTION' | translate }}
+ +{{ 'DESCRIPTIONS.SETTINGS.IAM_EVENTS.DESCRIPTION' | translate }}
-{{ 'DESCRIPTIONS.SETTINGS.IAM_FAILED_EVENTS.DESCRIPTION' | translate }}
-
+
| {{ 'IAM.FAILEDEVENTS.VIEWNAME' | translate }} | diff --git a/console/src/app/modules/form-field/validators/validators.ts b/console/src/app/modules/form-field/validators/validators.ts index f5f078433a..1ff592b11e 100644 --- a/console/src/app/modules/form-field/validators/validators.ts +++ b/console/src/app/modules/form-field/validators/validators.ts @@ -24,6 +24,17 @@ export function requiredValidator(c: AbstractControl): ValidationErrors | null { return i18nErr(Validators.required(c), 'ERRORS.REQUIRED'); } +export function atLeastOneFieldValidator(fields: string[]): ValidatorFn { + return (formGroup: AbstractControl): ValidationErrors | null => { + const isValid = fields.some((field) => { + const control = formGroup.get(field); + return control && control.value; + }); + + return isValid ? null : { atLeastOneRequired: true }; // Return an error if none are set + }; +} + export function minArrayLengthValidator(minArrLength: number): ValidatorFn { return (c: AbstractControl): ValidationErrors | null => { return arrayLengthValidator(c, minArrLength, 'ERRORS.ATLEASTONE'); diff --git a/console/src/app/modules/header/header.component.ts b/console/src/app/modules/header/header.component.ts index e560237343..c12c38e43a 100644 --- a/console/src/app/modules/header/header.component.ts +++ b/console/src/app/modules/header/header.component.ts @@ -15,7 +15,7 @@ import { ActionKeysType } from '../action-keys/action-keys.component'; }) export class HeaderComponent { @Input() public isDarkTheme: boolean = true; - @Input() public user?: User.AsObject; + @Input({ required: true }) public user!: User.AsObject; public showOrgContext: boolean = false; @Input() public org!: Org.AsObject; diff --git a/console/src/app/modules/iam-views/iam-views.component.html b/console/src/app/modules/iam-views/iam-views.component.html index 8669602665..f04053a521 100644 --- a/console/src/app/modules/iam-views/iam-views.component.html +++ b/console/src/app/modules/iam-views/iam-views.component.html @@ -1,7 +1,7 @@
|---|
| {{ 'IAM.VIEWS.VIEWNAME' | translate }} | diff --git a/console/src/app/modules/idp-table/idp-table.component.html b/console/src/app/modules/idp-table/idp-table.component.html index 7188040897..d67659eafc 100644 --- a/console/src/app/modules/idp-table/idp-table.component.html +++ b/console/src/app/modules/idp-table/idp-table.component.html @@ -1,7 +1,6 @@
|---|
| + {{ 'DESCRIPTIONS.SETTINGS.WEB_KEYS.PREVIOUS_TABLE.DEACTIVATED_ON' | translate }} + | ++ {{ row.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm' }} + | +{{ 'APP.PAGES.ID' | translate }} | ++ {{ row.id }} + | +{{ 'PROJECT.TYPE.TITLE' | translate }} | ++ {{ row.key.case | uppercase }} + | +
|---|
+
+
+
+
+
+| {{ 'APP.PAGES.STATE' | translate }} | +
+
+ |
+ {{ 'APP.PAGES.ID' | translate }} | ++ {{ row.id }} + | +{{ 'PROJECT.TYPE.TITLE' | translate }} | ++ {{ row.key.case | uppercase }} + | ++ |
+ |
+
|---|
{{ 'SETTINGS.LIST.WEB_KEYS' | translate }}
+{{ 'DESCRIPTIONS.SETTINGS.WEB_KEYS.DESCRIPTION' | translate }}
+{{ 'DESCRIPTIONS.SETTINGS.WEB_KEYS.TABLE.TITLE' | translate }}
+{{ 'DESCRIPTIONS.SETTINGS.WEB_KEYS.TABLE.DESCRIPTION' | translate }}
+{{ 'DESCRIPTIONS.SETTINGS.WEB_KEYS.TABLE.NOTE' | translate }}
+{{ 'ORG.PAGES.LIST' | translate }}
{{ 'ORG.PAGES.LISTDESCRIPTION' | translate }}
-
-
-
+
+
-
-
-
-
-
+
{{ title }}
-{{ description }}
- -{{ 'DESCRIPTIONS.ACTIONS.DESCRIPTION' | translate }}
-
-
+
+
+
-