fix: use lodash/startCase to format key parts

Signed-off-by: Rich Barton-Cooper <rich@syntasso.io>

plugins/scaffolder-react/src/next/components/ReviewState/util.test.ts

@@ -45,7 +45,7 @@ describe('formatKey', () => {
   });
 
   it('should leave a top-level key untouched', () => {
-    expect(formatKey('topLevel')).toBe('TopLevel');
+    expect(formatKey('topLevel')).toBe('Top Level');
   });
 
   it('should handle keys with a leading slash', () => {
@@ -70,13 +70,11 @@ describe('formatKey', () => {
 
   it('should handle keys with spaces', () => {
     expect(formatKey('parent/child with spaces')).toBe(
-      'Parent > Child with spaces',
+      'Parent > Child With Spaces',
     );
   });
 
-  it('should handle keys with special characters', () => {
-    expect(formatKey('parent/child@!#$%^&*()')).toBe(
-      'Parent > Child@!#$%^&*()',
-    );
+  it('should remove special characters', () => {
+    expect(formatKey('parent/child@!#$%^&*()')).toBe('Parent > Child');
   });
 });

plugins/scaffolder-react/src/next/components/ReviewState/util.ts

@@ -15,6 +15,7 @@
  */
 
 import { JsonObject, JsonValue } from '@backstage/types';
+import { startCase } from 'lodash';
 
 export function isJsonObject(value?: JsonValue): value is JsonObject {
   return typeof value === 'object' && value !== null && !Array.isArray(value);
@@ -25,6 +26,6 @@ export function formatKey(key: string): string {
   const parts = key.split('/');
   return parts
     .filter(Boolean)
-    .map(part => part.charAt(0).toLocaleUpperCase('en-US') + part.slice(1))
+    .map(part => startCase(part))
     .join(' > ');
 }