From edb0ae5ceeebb0fb275aaf8bdd751ec23fa4dd7e Mon Sep 17 00:00:00 2001
From: saithsab877 <saithsab877@gmail.com>
Date: Thu, 3 Oct 2024 23:50:31 +0500
Subject: [PATCH] fix(edit-node): labels First Letter Should Be Capitalized

---
 .../ModalsContainer/EditNodeNameModal/Title/index.tsx |  3 ++-
 .../EditNodeNameModal/utils/__tests__/index.ts        | 11 ++++++++++-
 .../ModalsContainer/EditNodeNameModal/utils/index.ts  |  7 +++++++
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/ModalsContainer/EditNodeNameModal/Title/index.tsx b/src/components/ModalsContainer/EditNodeNameModal/Title/index.tsx
index 75c704a69..e0aa63cb8 100644
--- a/src/components/ModalsContainer/EditNodeNameModal/Title/index.tsx
+++ b/src/components/ModalsContainer/EditNodeNameModal/Title/index.tsx
@@ -10,6 +10,7 @@ import { useFeatureFlagStore } from '~/stores/useFeatureFlagStore'
 import { useSelectedNode } from '~/stores/useGraphStore'
 import { useModal } from '~/stores/useModalStore'
 import { colors } from '~/utils'
+import { formatLabel } from '../utils'
 
 export const TitleEditor = () => {
   const { open: openAddItemNodeModal } = useModal('changeNodeType')
@@ -66,7 +67,7 @@ export const TitleEditor = () => {
                 marginBottom: 8,
               }}
             >
-              {key}
+              {formatLabel(key)}
             </LabelText>
             <TextInput
               id={`cy-${key}`}
diff --git a/src/components/ModalsContainer/EditNodeNameModal/utils/__tests__/index.ts b/src/components/ModalsContainer/EditNodeNameModal/utils/__tests__/index.ts
index 06d675cac..3e4f5c055 100644
--- a/src/components/ModalsContainer/EditNodeNameModal/utils/__tests__/index.ts
+++ b/src/components/ModalsContainer/EditNodeNameModal/utils/__tests__/index.ts
@@ -1,4 +1,4 @@
-import { validateImageInputType } from '../index'
+import { formatLabel, validateImageInputType } from '../index'
 
 describe('validateImageInputType function', () => {
   it('should return true for valid image URLs', () => {
@@ -31,3 +31,12 @@ describe('validateImageInputType function', () => {
     expect(validateImageInputType('pbs.twimg.com/profile_images/1729542498006294529/AjwhArl6_normal.svg')).toBe(false)
   })
 })
+
+describe('formatLabel function', () => {
+  it('should format labels correctly', () => {
+    expect(formatLabel('name')).toBe('Name')
+    expect(formatLabel('image_url')).toBe('Image Url')
+    expect(formatLabel('twitter_handle')).toBe('Twitter Handle')
+    expect(formatLabel('date')).toBe('Date')
+  })
+})
diff --git a/src/components/ModalsContainer/EditNodeNameModal/utils/index.ts b/src/components/ModalsContainer/EditNodeNameModal/utils/index.ts
index c971a2a83..4a96a31f9 100644
--- a/src/components/ModalsContainer/EditNodeNameModal/utils/index.ts
+++ b/src/components/ModalsContainer/EditNodeNameModal/utils/index.ts
@@ -7,3 +7,10 @@ export function validateImageInputType(url: string): boolean {
 
   return false
 }
+
+export function formatLabel(label: string): string {
+  return label
+    .split('_')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ')
+}