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)} { 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(' ') +}