fix(console): improve actions creation dropdowns #10596 (#10677)

# Which Problems Are Solved
Actions V2 Method names got cut off in the creation dropdown
<img width="668" height="717" alt="old modal"
src="https://github.com/user-attachments/assets/e3dda16d-5326-464e-abc7-67a8b146037c"
/>

# How the Problems Are Solved
The modal now first requires a Service to be set and only afterwards are
users allowed set Methods. This way we can cut out the Service-Names
from the Method-Name leading to cleaner and shorter names.
<img width="796" height="988" alt="new modal"
src="https://github.com/user-attachments/assets/5002afdf-b639-44ef-954a-5482cca12f96"
/>


# Additional Changes
Changed the Modal dataloading to use Tanstack Query

# Additional Context
- Closes #10596

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

@@ -23,12 +23,17 @@ import {
   UpdateTargetRequestSchema,
   UpdateTargetResponse,
 } from '@zitadel/proto/zitadel/action/v2beta/action_service_pb';
+import { UserService } from './user.service';
+import { injectQuery } from '@tanstack/angular-query-experimental';
 
 @Injectable({
   providedIn: 'root',
 })
 export class ActionService {
-  constructor(private readonly grpcService: GrpcService) {}
+  constructor(
+    private readonly grpcService: GrpcService,
+    private userService: UserService,
+  ) {}
 
   public listTargets(req: MessageInitShape<typeof ListTargetsRequestSchema>): Promise<ListTargetsResponse> {
     return this.grpcService.actionNew.listTargets(req);
@@ -50,24 +55,6 @@ export class ActionService {
     return this.grpcService.actionNew.updateTarget(req);
   }
 
-  public listExecutionFunctions(
-    req: MessageInitShape<typeof ListExecutionFunctionsRequestSchema>,
-  ): Promise<ListExecutionFunctionsResponse> {
-    return this.grpcService.actionNew.listExecutionFunctions(req);
-  }
-
-  public listExecutionMethods(
-    req: MessageInitShape<typeof ListExecutionMethodsRequestSchema>,
-  ): Promise<ListExecutionMethodsResponse> {
-    return this.grpcService.actionNew.listExecutionMethods(req);
-  }
-
-  public listExecutionServices(
-    req: MessageInitShape<typeof ListExecutionServicesRequestSchema>,
-  ): Promise<ListExecutionServicesResponse> {
-    return this.grpcService.actionNew.listExecutionServices(req);
-  }
-
   public listExecutions(req: MessageInitShape<typeof ListExecutionsRequestSchema>): Promise<ListExecutionsResponse> {
     return this.grpcService.actionNew.listExecutions(req);
   }
@@ -75,4 +62,43 @@ export class ActionService {
   public setExecution(req: MessageInitShape<typeof SetExecutionRequestSchema>): Promise<SetExecutionResponse> {
     return this.grpcService.actionNew.setExecution(req);
   }
+
+  private listExecutionServices(
+    req: MessageInitShape<typeof ListExecutionServicesRequestSchema>,
+  ): Promise<ListExecutionServicesResponse> {
+    return this.grpcService.actionNew.listExecutionServices(req);
+  }
+
+  public listExecutionServicesQuery() {
+    return injectQuery(() => ({
+      queryKey: [this.userService.userId(), 'action', 'listExecutionServices'],
+      queryFn: () => this.listExecutionServices({}).then(({ services }) => services),
+    }));
+  }
+
+  private listExecutionMethods(
+    req: MessageInitShape<typeof ListExecutionMethodsRequestSchema>,
+  ): Promise<ListExecutionMethodsResponse> {
+    return this.grpcService.actionNew.listExecutionMethods(req);
+  }
+
+  public listExecutionMethodsQuery() {
+    return injectQuery(() => ({
+      queryKey: [this.userService.userId(), 'action', 'listExecutionMethods'],
+      queryFn: () => this.listExecutionMethods({}).then(({ methods }) => methods),
+    }));
+  }
+
+  private listExecutionFunctions(
+    req: MessageInitShape<typeof ListExecutionFunctionsRequestSchema>,
+  ): Promise<ListExecutionFunctionsResponse> {
+    return this.grpcService.actionNew.listExecutionFunctions(req);
+  }
+
+  public listExecutionFunctionsQuery() {
+    return injectQuery(() => ({
+      queryKey: [this.userService.userId(), 'action', 'listExecutionFunctions'],
+      queryFn: () => this.listExecutionFunctions({}).then(({ functions }) => functions),
+    }));
+  }
 }