UI: Fix mobile navigation when renderLabel returns a React node

code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx

@@ -200,3 +200,49 @@ export const PanelDisabled: Story = {
     showPanel: false,
   },
 };
+
+export const ReactNodeRenderLabel: Story = {
+  decorators: [
+    (storyFn) => {
+      const renderReactNodeLabel = ({ name }: { name: string }) => <em>{startCase(name)}</em>;
+
+      const mockManagerStoreWithReactNodeLabels: any = {
+        state: {
+          index: {
+            someRootId: {
+              type: 'root',
+              id: 'someRootId',
+              name: 'root',
+              renderLabel: renderReactNodeLabel,
+            },
+            someComponentId: {
+              type: 'component',
+              id: 'someComponentId',
+              name: 'component',
+              parent: 'someRootId',
+              renderLabel: renderReactNodeLabel,
+            },
+            someStoryId: {
+              type: 'story',
+              subtype: 'story',
+              id: 'someStoryId',
+              name: 'story',
+              parent: 'someComponentId',
+              renderLabel: renderReactNodeLabel,
+            },
+          },
+        },
+        api: {
+          getCurrentStoryData() {
+            return mockManagerStoreWithReactNodeLabels.state.index.someStoryId;
+          },
+        },
+      };
+      return (
+        <ManagerContext.Provider value={mockManagerStoreWithReactNodeLabels}>
+          {storyFn()}
+        </ManagerContext.Provider>
+      );
+    },
+  ],
+};

code/core/src/manager/components/mobile/navigation/MobileNavigation.tsx

@@ -49,7 +49,8 @@ const useFullStoryName = () => {
     return '';
   }
   const combinedIndex = combineIndexes(index, refs || {});
-  let fullStoryName = currentStory.renderLabel?.(currentStory, api) || currentStory.name;
+  const storyLabel = currentStory.renderLabel?.(currentStory, api);
+  let fullStoryName = typeof storyLabel === 'string' ? storyLabel : currentStory.name;
 
   let node = combinedIndex[currentStory.id];
 
@@ -61,7 +62,8 @@ const useFullStoryName = () => {
     fullStoryName.length < 24
   ) {
     node = combinedIndex[node.parent];
-    const parentName = node.renderLabel?.(node, api) || node.name;
+    const parentLabel = node.renderLabel?.(node, api);
+    const parentName = typeof parentLabel === 'string' ? parentLabel : node.name;
     fullStoryName = `${parentName}/${fullStoryName}`;
   }
   return fullStoryName;