From 6640bb85bb5adbb50c80bed328b46b75de2d24e4 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Mon, 27 Mar 2023 20:22:22 +0800
Subject: [PATCH] Format tooltip text

---
 .../layouts/TableEditorLayout/TableEditorMenu.tsx     | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx b/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx
index a579fe17af2..865782e3da6 100644
--- a/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx
+++ b/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx
@@ -382,6 +382,13 @@ const EntityListItem = ({
   isLoadingTableMetadata = false,
 }: EntityListItemProps) => {
   const isActive = Number(id) === entity.id
+  const formatTooltipText = (entityType: string) => {
+    return Object.entries(ENTITY_TYPE)
+      .find(([, value]) => value === entityType)?.[0]
+      ?.toLowerCase()
+      ?.split('_')
+      ?.join(' ')
+  }
 
   return (
     <ProductMenuItem
@@ -434,9 +441,7 @@ const EntityListItem = ({
               ].join(' ')}
             >
               <span className="text-xs text-scale-1200 capitalize">
-                {Object.entries(ENTITY_TYPE)
-                  .find(([, value]) => value === entity.type)?.[0]
-                  ?.toLowerCase()}
+                {formatTooltipText(entity.type)}
               </span>
             </div>
           </Tooltip.Content>