From e1392d7fa000cf3e0f952dfaa71d6288bbe1a702 Mon Sep 17 00:00:00 2001
From: Shoaibdev7 <shoaibdev7@gmail.com>
Date: Sun, 17 Nov 2024 21:54:08 +0500
Subject: [PATCH] fix(sidebar): render schema index in sidebar with node_key
 fallback

---
 src/components/App/SideBar/Dropdown/index.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/App/SideBar/Dropdown/index.tsx b/src/components/App/SideBar/Dropdown/index.tsx
index 37ec78b77..e7e086e2b 100644
--- a/src/components/App/SideBar/Dropdown/index.tsx
+++ b/src/components/App/SideBar/Dropdown/index.tsx
@@ -8,11 +8,14 @@ import ChevronDownIcon from '~/components/Icons/ChevronDownIcon'
 import ChevronUpIcon from '~/components/Icons/ChevronUpIcon'
 import { Flex } from '~/components/common/Flex'
 import { useDataStore } from '~/stores/useDataStore'
+import { useSchemaStore } from '~/stores/useSchemaStore'
 import { colors } from '~/utils/colors'
 
 export const SelectWithPopover = () => {
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
   const { sidebarFilter, setSidebarFilter, sidebarFilterCounts = [] } = useDataStore((s) => s)
+  const { getSchemaByType } = useSchemaStore()
+
   const currentFilter = (sidebarFilter ?? '').toLowerCase()
   const currentFilterCount = sidebarFilterCounts.find((f) => f.name === currentFilter)?.count || 0
 
@@ -39,12 +42,18 @@ export const SelectWithPopover = () => {
     handleClosePopover()
   }
 
+  const getDisplayName = (type: string) => {
+    const schema = getSchemaByType(type)
+
+    return schema?.index || schema?.node_key || capitalizeFirstLetter(type)
+  }
+
   return (
     <div>
       <Action onClick={handleOpenPopover}>
         <div className="text">Show</div>
         <div className="value" data-testid="value">
-          {`${capitalizeFirstLetter(currentFilter)} (${currentFilterCount})`}
+          {`${getDisplayName(currentFilter)} (${currentFilterCount})`}
         </div>
         {currentFilterCount >= 1 && <div className="icon">{!anchorEl ? <ChevronDownIcon /> : <ChevronUpIcon />}</div>}
       </Action>
@@ -78,7 +87,7 @@ export const SelectWithPopover = () => {
                 }}
               >
                 <span className="icon">{name === sidebarFilter ? <CheckIcon /> : null}</span>
-                <span>{`${capitalizeFirstLetter(name)} (${count})`}</span>
+                <span>{`${getDisplayName(name)} (${count})`}</span>
               </MenuItem>
             ))}
         </FormControl>