feat: add dynamic outputs to Component (#4308)

* Refine condition to check for undefined value in use-handle-new-value hook

* update mutateTemplate to use APIClassType

* Refactor Component class to update inputs and validate outputs

This commit refactors the Component class in the `component.py` file. It introduces two new methods: `update_inputs` and `run_and_validate_update_outputs`. The `update_inputs` method allows for updating the build configuration with new field values, while the `run_and_validate_update_outputs` method updates the frontend node and validates the outputs. Additionally, the `_validate_frontend_node` method is added to check if all outputs are valid. The `_set_output_types` method is modified to accept a list of outputs and set their return types. Overall, these changes improve the functionality and maintainability of the Component class.

* Add dynamic output validation in API endpoint for component updates

* Update build_config to store field_value under "value" key

* Refactor: Convert dict values to list in _set_output_types call

* Add type check for `cc_instance` before calling `run_and_validate_update_outputs`

* Add DynamicOutputComponent with configurable outputs based on input

* Add test for updating component outputs with dynamic code input

* Refactor: Make get_dynamic_output_component_code asynchronous for improved performance

---------

Co-authored-by: Edwin Jose <edwin.jose@datastax.com>

src/frontend/src/CustomNodes/helpers/mutate-template.ts

@@ -3,11 +3,7 @@ import {
   SAVE_DEBOUNCE_TIME,
   TITLE_ERROR_UPDATING_COMPONENT,
 } from "@/constants/constants";
-import {
-  APIClassType,
-  APITemplateType,
-  ResponseErrorDetailAPI,
-} from "@/types/api";
+import { APIClassType, ResponseErrorDetailAPI } from "@/types/api";
 import { UseMutationResult } from "@tanstack/react-query";
 import { cloneDeep, debounce } from "lodash";
 
@@ -17,7 +13,7 @@ export const mutateTemplate = debounce(
     node: APIClassType,
     setNodeClass,
     postTemplateValue: UseMutationResult<
-      APITemplateType | undefined,
+      APIClassType | undefined,
       ResponseErrorDetailAPI,
       any
     >,
@@ -29,7 +25,8 @@ export const mutateTemplate = debounce(
         value: newValue,
       });
       if (newTemplate) {
-        newNode.template = newTemplate;
+        newNode.template = newTemplate.template;
+        newNode.outputs = newTemplate.outputs;
       }
       setNodeClass(newNode);
     } catch (e) {

src/frontend/src/CustomNodes/hooks/use-fetch-data-on-mount.tsx

@@ -1,8 +1,4 @@
-import {
-  APIClassType,
-  APITemplateType,
-  ResponseErrorDetailAPI,
-} from "@/types/api";
+import { APIClassType, ResponseErrorDetailAPI } from "@/types/api";
 import { UseMutationResult } from "@tanstack/react-query";
 import { useEffect } from "react";
 import useAlertStore from "../../stores/alertStore";
@@ -13,7 +9,7 @@ const useFetchDataOnMount = (
   setNodeClass: (node: APIClassType) => void,
   name: string,
   postTemplateValue: UseMutationResult<
-    APITemplateType | undefined,
+    APIClassType | undefined,
     ResponseErrorDetailAPI,
     any
   >,

src/frontend/src/CustomNodes/hooks/use-handle-new-value.tsx

@@ -80,7 +80,7 @@ const useHandleOnNewValue = ({
       });
     };
 
-    if (shouldUpdate && changes.value) {
+    if (shouldUpdate && changes.value !== undefined) {
       mutateTemplate(
         changes.value,
         newNode,

src/frontend/src/controllers/API/queries/nodes/use-post-template-value.ts

@@ -1,6 +1,5 @@
 import {
   APIClassType,
-  APITemplateType,
   ResponseErrorDetailAPI,
   useMutationFunctionType,
 } from "@/types/api";
@@ -22,14 +21,14 @@ interface IPostTemplateValueParams {
 export const usePostTemplateValue: useMutationFunctionType<
   IPostTemplateValueParams,
   IPostTemplateValue,
-  APITemplateType | undefined,
+  APIClassType,
   ResponseErrorDetailAPI
 > = ({ parameterId, nodeId, node }, options?) => {
   const { mutate } = UseRequestProcessor();
 
   const postTemplateValueFn = async (
     payload: IPostTemplateValue,
-  ): Promise<APITemplateType | undefined> => {
+  ): Promise<APIClassType | undefined> => {
     const template = node.template;
 
     if (!template) return;
@@ -44,11 +43,11 @@ export const usePostTemplateValue: useMutationFunctionType<
       },
     );
 
-    return response.data.template;
+    return response.data;
   };
 
   const mutation: UseMutationResult<
-    APITemplateType | undefined,
+    APIClassType,
     ResponseErrorDetailAPI,
     IPostTemplateValue
   > = mutate(