From 2485a3cb4d6b3e1050e5ab69c13b4f3972f66d03 Mon Sep 17 00:00:00 2001
From: Anton Kulyk <kuliks.anton@gmail.com>
Date: Thu, 22 Sep 2022 11:41:34 +0100
Subject: [PATCH] Fix user-created pages don't show up in app nav (#25557)
---
frontend/src/metabase-types/api/data-app.ts | 1 +
.../DataAppNavbar/DataAppNavbarView.tsx | 41 +++++++++++++------
2 files changed, 30 insertions(+), 12 deletions(-)
diff --git a/frontend/src/metabase-types/api/data-app.ts b/frontend/src/metabase-types/api/data-app.ts
index 02b2356a654..f0428feb265 100644
--- a/frontend/src/metabase-types/api/data-app.ts
+++ b/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 {
diff --git a/frontend/src/metabase/nav/containers/MainNavbar/DataAppNavbar/DataAppNavbarView.tsx b/frontend/src/metabase/nav/containers/MainNavbar/DataAppNavbar/DataAppNavbarView.tsx
index b49354f7832..c45f954405a 100644
--- a/frontend/src/metabase/nav/containers/MainNavbar/DataAppNavbar/DataAppNavbarView.tsx
+++ b/frontend/src/metabase/nav/containers/MainNavbar/DataAppNavbar/DataAppNavbarView.tsx
@@ -1,7 +1,7 @@
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}
--
GitLab