Fix user-created pages don't show up in app nav (#25557)

frontend/src/metabase-types/api/data-app.ts

@@ -9,6 +9,7 @@ import { WritebackAction } from "./writeback";
 import { FormType } from "./writeback-form-settings";
 
 export type DataAppId = number;
+export type DataAppPage = Dashboard;
 export type DataAppPageId = Dashboard["id"];
 
 export interface DataAppNavItem {

frontend/src/metabase/nav/containers/MainNavbar/DataAppNavbar/DataAppNavbarView.tsx

 import React, { useCallback, useMemo } from "react";
 import _ from "underscore";
 
-import type { DataApp, DataAppNavItem } from "metabase-types/api";
+import type { DataApp, DataAppPage, DataAppNavItem } from "metabase-types/api";
 
 import { MainNavbarProps, SelectedItem } from "../types";
 import {
@@ -38,6 +38,28 @@ function DataAppNavbarView({
 
   const pageMap = useMemo(() => _.indexBy(pages, "id"), [pages]);
 
+  const pagesWithoutNavItems = useMemo(() => {
+    const pageIds = pages.map(page => page.id);
+    const navItemPageIds = dataApp.nav_items
+      .filter(navItem => navItem.page_id)
+      .map(navItem => navItem.page_id);
+    const pagesWithoutNavItems = _.difference(pageIds, navItemPageIds);
+    return pagesWithoutNavItems.map(pageId => pageMap[pageId]);
+  }, [dataApp.nav_items, pages, pageMap]);
+
+  const renderPage = useCallback(
+    (page: DataAppPage, indent = 0) => (
+      <DataAppPageSidebarLink
+        key={page.id}
+        dataApp={dataApp}
+        page={page}
+        isSelected={dataAppPage?.id === page.id}
+        indent={indent}
+      />
+    ),
+    [dataApp, dataAppPage],
+  );
+
   const renderNavItem = useCallback(
     (navItem: DataAppNavItem) => {
       const page = pageMap[navItem.page_id];
@@ -46,17 +68,9 @@ function DataAppNavbarView({
         return null;
       }
 
-      return (
-        <DataAppPageSidebarLink
-          key={page.id}
-          dataApp={dataApp}
-          page={page}
-          isSelected={dataAppPage?.id === page.id}
-          indent={navItem.indent}
-        />
-      );
+      return renderPage(page, navItem.indent);
     },
-    [dataApp, pageMap, dataAppPage],
+    [pageMap, renderPage],
   );
 
   return (
@@ -65,7 +79,10 @@ function DataAppNavbarView({
         <SidebarHeadingWrapper>
           <SidebarHeading>{dataApp.collection.name}</SidebarHeading>
         </SidebarHeadingWrapper>
-        <ul>{dataApp.nav_items.map(renderNavItem)}</ul>
+        <ul>
+          {dataApp.nav_items.map(renderNavItem)}
+          {pagesWithoutNavItems.map(page => renderPage(page))}
+        </ul>
       </SidebarSection>
       <DataAppActionPanel
         dataApp={dataApp}