Use formatEntityRefTitle to format node titles

Signed-off-by: Kévin Gomez <kevin.gomez@voiapp.io>

plugins/explore/src/components/OrganizationExplorerContent/OrganizationDiagram.tsx

@@ -15,16 +15,15 @@
  */
 
 import {
-  Entity,
   RELATION_CHILD_OF,
   stringifyEntityRef,
-  ENTITY_DEFAULT_NAMESPACE,
   parseEntityRef,
 } from '@backstage/catalog-model';
 import {
   catalogApiRef,
   entityRouteRef,
   getEntityRelations,
+  formatEntityRefTitle,
 } from '@backstage/plugin-catalog-react';
 import {
   DependencyGraph,
@@ -53,22 +52,6 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({
   },
 }));
 
-// Simplifies the diagram output by hiding the default namespace and kind
-function readableEntityName(
-  ref:
-    | Entity
-    | {
-        kind: string;
-        namespace?: string;
-        name: string;
-      },
-): string {
-  return stringifyEntityRef(ref)
-    .toLocaleLowerCase('en-US')
-    .replace(`:${ENTITY_DEFAULT_NAMESPACE}/`, ':')
-    .split(':')[1];
-}
-
 function RenderNode(props: DependencyGraphTypes.RenderNodeProps<any>) {
   const classes = useStyles();
   const catalogEntityRoute = useRouteRef(entityRouteRef);
@@ -159,7 +142,7 @@ export function OrganizationDiagram() {
     nodes.push({
       id: stringifyEntityRef(catalogItem),
       kind: catalogItem.kind,
-      name: readableEntityName(catalogItem),
+      name: formatEntityRefTitle(catalogItem, { defaultKind: 'Group' }),
     });
 
     // Edge to parent