Task 11: Remove direct API calls from components

frontend/src/components/config/CreateActionDialog.tsx

@@ -23,7 +23,6 @@ import {
   Textarea,
   tokens,
 } from "@fluentui/react-components";
-import { createAction } from "../../api/config";
 import type { ActionConfig, ActionCreateRequest } from "../../types/config";
 import { ApiError } from "../../api/client";
 
@@ -36,6 +35,12 @@ export interface CreateActionDialogProps {
   open: boolean;
   /** Called when the dialog should close without taking action. */
   onClose: () => void;
+  /**
+   * Called when the form is submitted with valid dialog data.
+   *
+   * @param payload - Create request payload.
+   */
+  onCreateAction: (payload: ActionCreateRequest) => Promise<ActionConfig>;
   /**
    * Called after the action has been successfully created.
    *
@@ -60,6 +65,7 @@ export interface CreateActionDialogProps {
 export function CreateActionDialog({
   open,
   onClose,
+  onCreateAction,
   onCreate,
 }: CreateActionDialogProps): React.JSX.Element {
   const [name, setName] = useState("");
@@ -96,7 +102,7 @@ export function CreateActionDialog({
     setSubmitting(true);
     setError(null);
 
-    createAction(req)
+    onCreateAction(req)
       .then((action) => {
         onCreate(action);
       })