Use common formatName function

Signed-off-by: Trung Nguyen <[email protected]>

Author: trungutt

src/extension/ui/src/components/tile/Modal.tsx

@@ -25,7 +25,6 @@ import {
   Typography,
   useTheme,
 } from '@mui/material';
-import { capitalize } from 'lodash-es';
 import { useEffect, useState } from 'react';
 
 import { ASSIGNED_SECRET_PLACEHOLDER, MCP_POLICY_NAME } from '../../Constants';
@@ -34,6 +33,7 @@ import { useConfig } from '../../queries/useConfig';
 import { useSecrets } from '../../queries/useSecrets';
 import { CatalogItemRichened } from '../../types/catalog';
 import ConfigEditor from './ConfigEditor';
+import { formatName } from '../../formatName';
 
 interface TabPanelProps {
   children?: React.ReactNode;
@@ -154,15 +154,7 @@ const ConfigurationModal = ({
               borderRadius: 1,
             }}
           />
-          {
-            // Lodash doesn't have a capitalize function that works with strings
-            catalogItem.name
-              .replace(/-/g, ' ')
-              .replace(/_/g, ' ')
-              .split(' ')
-              .map(capitalize)
-              .join(' ')
-          }
+          {formatName(catalogItem.name)}
 
           <Tooltip
             placement="right"

src/extension/ui/src/components/tile/Top.tsx

@@ -1,7 +1,7 @@
 import { Avatar, CardHeader, Switch, Tooltip, Typography } from '@mui/material';
-import { capitalize } from 'lodash-es';
 
 import { CatalogItemRichened } from '../../types/catalog';
+import { formatName } from '../../formatName';
 
 type TopProps = {
   onToggleRegister: (checked: boolean) => void;
@@ -26,15 +26,7 @@ export default function Top({ item, onToggleRegister }: TopProps) {
       }
       title={
         <Typography sx={{ justifySelf: 'flex-start', fontWeight: 'bold' }}>
-          {
-            // Lodash doesn't have a capitalize function that works with strings
-            item.name
-              .replace(/-/g, ' ')
-              .replace(/_/g, ' ')
-              .split(' ')
-              .map(capitalize)
-              .join(' ')
-          }
+          {formatName(item.name)}
         </Typography>
       }
       action={

src/extension/ui/src/formatName.ts

@@ -0,0 +1,12 @@
+import { capitalize } from 'lodash-es';
+
+// This function is used to format the name of a catalog item, as this name isn't always presentable
+export function formatName(name: string): string {
+  // Lodash doesn't have a capitalize function that works with strings
+  return name
+    .replace(/-/g, ' ')
+    .replace(/_/g, ' ')
+    .split(' ')
+    .map(capitalize)
+    .join(' ');
+}