fix(GenericNode): import getFieldTitle function from utils/utils to fix compilation error

fix(GenericNode): replace calls to toTitleCase with getFieldTitle function to improve code readability and maintainability
fix(GenericNode): replace calls to getFieldTitle with getFieldTitle function to improve code readability and maintainability
fix(reactflowUtils): import getFieldTitle function from utils/utils to fix compilation error
fix(reactflowUtils): replace calls to toTitleCase with getFieldTitle function to improve code readability and maintainability
fix(reactflowUtils): replace calls to getFieldTitle with getFieldTitle function to improve code readability and maintainability
fix(utils): add getFieldTitle function to handle getting the display name or name of a template field

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -12,7 +12,7 @@ import { validationStatusType } from "../../types/components";
 import { NodeDataType } from "../../types/flow";
 import { cleanEdges } from "../../utils/reactflowUtils";
 import { nodeColors, nodeIconsLucide } from "../../utils/styleUtils";
-import { classNames, toTitleCase } from "../../utils/utils";
+import { classNames, getFieldTitle } from "../../utils/utils";
 import ParameterComponent from "./components/parameterComponent";
 
 export default function GenericNode({
@@ -199,15 +199,10 @@ export default function GenericNode({
                               ] ??
                               nodeColors.unknown
                             }
-                            title={
+                            title={getFieldTitle(
-                              data.node?.template[templateField].display_name
+                              data.node?.template!,
-                                ? data.node.template[templateField].display_name
+                              templateField
-                                : data.node?.template[templateField].name
+                            )}
-                                ? toTitleCase(
-                                    data.node.template[templateField].name
-                                  )
-                                : toTitleCase(templateField)
-                            }
                             info={data.node?.template[templateField].info}
                             name={templateField}
                             tooltipTitle={
@@ -368,15 +363,10 @@ export default function GenericNode({
                           ] ??
                           nodeColors.unknown
                         }
-                        title={
+                        title={getFieldTitle(
-                          data.node?.template[templateField].display_name
+                          data.node?.template!,
-                            ? data.node.template[templateField].display_name
+                          templateField
-                            : data.node?.template[templateField].name
+                        )}
-                            ? toTitleCase(
-                                data.node.template[templateField].name
-                              )
-                            : toTitleCase(templateField)
-                        }
                         info={data.node?.template[templateField].info}
                         name={templateField}
                         tooltipTitle={

src/frontend/src/types/api/index.ts

@@ -41,6 +41,8 @@ export type TemplateVariableType = {
   multiline?: boolean;
   value?: any;
   input_types?: Array<string>;
+  display_name?: string;
+  name?: string;
   [key: string]: any;
 };
 export type sendAllProps = {

src/frontend/src/utils/reactflowUtils.ts

@@ -13,7 +13,7 @@ import {
   cleanEdgesType,
   unselectAllNodesType,
 } from "../types/utils/reactflowUtils";
-import { toTitleCase } from "./utils";
+import { getFieldTitle } from "./utils";
 
 export function cleanEdges({
   flow: { edges, nodes },
@@ -214,13 +214,7 @@ export function validateNode(node: NodeType, edges: Edge[]): Array<string> {
           edge.targetHandle.split("|")[2] === node.id
       )
     ) {
-      errors.push(
+      errors.push(`${type} is missing ${getFieldTitle(template, t)}.`);
-        `${type} is missing ${
-          template[t].display_name ||
-          toTitleCase(template[t].name) ||
-          toTitleCase(t)
-        }.`
-      );
     } else if (
       template[t].type === "dict" &&
       template[t].required &&
@@ -231,15 +225,14 @@ export function validateNode(node: NodeType, edges: Edge[]): Array<string> {
     ) {
       if (hasDuplicateKeys(template[t].value))
         errors.push(
-          `${type} (${
+          `${type} (${getFieldTitle(
-            template.display_name || template[t].name
+            template,
-          }) contains duplicate keys with the same values.`
+            t
+          )}) contains duplicate keys with the same values.`
         );
       if (hasEmptyKey(template[t].value))
         errors.push(
-          `${type} (${
+          `${type} (${getFieldTitle(template, t)}) field must not be empty.`
-            template.display_name || template[t].name
-          }) field must not be empty.`
         );
     }
     return errors;

src/frontend/src/utils/utils.ts

@@ -1,7 +1,11 @@
 import clsx, { ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 import { ADJECTIVES, DESCRIPTIONS, NOUNS } from "../flow_constants";
-import { APIDataType, TemplateVariableType } from "../types/api";
+import {
+  APIDataType,
+  APITemplateType,
+  TemplateVariableType,
+} from "../types/api";
 import {
   IVarHighlightType,
   groupedObjType,
@@ -527,3 +531,14 @@ export function tabsArray(codes: string[], method: number) {
     },
   ];
 }
+
+export function getFieldTitle(
+  template: APITemplateType,
+  templateField: string
+): string {
+  return template[templateField].display_name
+    ? template[templateField].display_name!
+    : template[templateField].name
+    ? toTitleCase(template[templateField].name!)
+    : toTitleCase(templateField);
+}