Fix capital errors (#1061)

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

@@ -18,7 +18,7 @@ import {
   scapedJSONStringfy,
 } 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({
@@ -239,15 +239,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={
@@ -448,15 +443,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

@@ -47,6 +47,8 @@ export type TemplateVariableType = {
   dynamic?: boolean;
   proxy?: { id: string; field: string };
   input_types?: Array<string>;
+  display_name?: string;
+  name?: string;
   [key: string]: any;
 };
 export type sendAllProps = {

src/frontend/src/utils/reactflowUtils.ts

@@ -25,8 +25,7 @@ import {
   unselectAllNodesType,
   updateEdgesHandleIdsType,
 } from "../types/utils/reactflowUtils";
-import { toNormalCase, toTitleCase } from "./utils";
+import { getFieldTitle } from "./utils";
-const uid = new ShortUniqueId({ length: 5 });
 
 export function cleanEdges({
   flow: { edges, nodes },
@@ -240,11 +239,7 @@ export function validateNode(node: NodeType, edges: Edge[]): Array<string> {
             node.id
       )
     ) {
-      errors.push(
+      errors.push(`${type} is missing ${getFieldTitle(template, t)}.`);
-        `${type} is missing ${
-          template.display_name || toNormalCase(template[t].name)
-        }.`
-      );
     } else if (
       template[t].type === "dict" &&
       template[t].required &&
@@ -255,15 +250,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,
@@ -550,3 +554,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);
+}