From 41f4f2dd886f08111a9960bd021cfb12822647bf Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Fri, 21 Jan 2022 14:45:33 +0100 Subject: [PATCH 1/3] Fix component type comparison in Sidebar Signed-off-by: Philipp Hugenroth --- packages/core-components/src/layout/Sidebar/Items.tsx | 8 +++++++- .../core-components/src/layout/Sidebar/MobileSidebar.tsx | 9 ++++++++- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/core-components/src/layout/Sidebar/Items.tsx b/packages/core-components/src/layout/Sidebar/Items.tsx index b16c9ad302..aeac9aebf9 100644 --- a/packages/core-components/src/layout/Sidebar/Items.tsx +++ b/packages/core-components/src/layout/Sidebar/Items.tsx @@ -486,7 +486,13 @@ const SidebarItemWithSubmenu = ({ export const SidebarItem = forwardRef((props, ref) => { // Filter children for SidebarSubmenu components const [submenu] = useElementFilter(props.children, elements => - elements.getElements().filter(child => child.type === SidebarSubmenu), + // Directly comparing child.type with SidebarSubmenu will not work with in + // combination with react-hot-loader + // + // https://github.com/gaearon/react-hot-loader/issues/304#issuecomment-456569720 + elements + .getElements() + .filter(child => child.type === React.createElement(SidebarSubmenu).type), ); if (submenu) { diff --git a/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx b/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx index 3819f21a02..cd6d5defb1 100644 --- a/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx +++ b/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx @@ -162,8 +162,15 @@ export const MobileSidebar = (props: MobileSidebarProps) => { }, [location.pathname]); // Filter children for SidebarGroups + // + // Directly comparing child.type with SidebarSubmenu will not work with in + // combination with react-hot-loader + // + // https://github.com/gaearon/react-hot-loader/issues/304#issuecomment-456569720 let sidebarGroups = useElementFilter(children, elements => - elements.getElements().filter(child => child.type === SidebarGroup), + elements + .getElements() + .filter(child => child.type === React.createElement(SidebarGroup).type), ); if (!children) { From cf772fc02ecfa63b6bfe9d823d6f5d35f89bfe1a Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Mon, 24 Jan 2022 10:18:41 +0100 Subject: [PATCH 2/3] Fix unnecessary recreation of react element Signed-off-by: Philipp Hugenroth --- packages/core-components/src/layout/Sidebar/Items.tsx | 6 +++--- .../core-components/src/layout/Sidebar/MobileSidebar.tsx | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/core-components/src/layout/Sidebar/Items.tsx b/packages/core-components/src/layout/Sidebar/Items.tsx index aeac9aebf9..fc97fdc0ce 100644 --- a/packages/core-components/src/layout/Sidebar/Items.tsx +++ b/packages/core-components/src/layout/Sidebar/Items.tsx @@ -284,6 +284,8 @@ function isButtonItem( return (props as SidebarItemLinkProps).to === undefined; } +const sidebarSubmenuType = React.createElement(SidebarSubmenu).type; + // TODO(Rugvip): Remove this once NavLink is updated in react-router-dom. // This is needed because react-router doesn't handle the path comparison // properly yet, matching for example /foobar with /foo. @@ -490,9 +492,7 @@ export const SidebarItem = forwardRef((props, ref) => { // combination with react-hot-loader // // https://github.com/gaearon/react-hot-loader/issues/304#issuecomment-456569720 - elements - .getElements() - .filter(child => child.type === React.createElement(SidebarSubmenu).type), + elements.getElements().filter(child => child.type === sidebarSubmenuType), ); if (submenu) { diff --git a/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx b/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx index cd6d5defb1..95947f9274 100644 --- a/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx +++ b/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx @@ -102,6 +102,8 @@ const sortSidebarGroupsForPriority = (children: React.ReactElement[]) => 'desc', ); +const sidebarGroupType = React.createElement(SidebarGroup).type; + const OverlayMenu = ({ children, label = 'Menu', @@ -168,9 +170,7 @@ export const MobileSidebar = (props: MobileSidebarProps) => { // // https://github.com/gaearon/react-hot-loader/issues/304#issuecomment-456569720 let sidebarGroups = useElementFilter(children, elements => - elements - .getElements() - .filter(child => child.type === React.createElement(SidebarGroup).type), + elements.getElements().filter(child => child.type === sidebarGroupType), ); if (!children) { From 9abb28bb228f0710d7e2b8334ba774dc01b2a72c Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Mon, 24 Jan 2022 10:29:05 +0100 Subject: [PATCH 3/3] Add changeset Signed-off-by: Philipp Hugenroth --- .changeset/famous-walls-yell.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/famous-walls-yell.md diff --git a/.changeset/famous-walls-yell.md b/.changeset/famous-walls-yell.md new file mode 100644 index 0000000000..8a4e988f5b --- /dev/null +++ b/.changeset/famous-walls-yell.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Fix issue where component types are not recognized causing the `MobileSidebar` to not render as intended.