diff --git a/src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx b/src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx index a62a111e4d5f..595207fc5dc8 100644 --- a/src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx +++ b/src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx @@ -1,4 +1,5 @@ import { memo, useMemo, useRef, useState } from "react"; +import { useLocation } from "react-router-dom"; import { useHotkeys } from "react-hotkeys-hook"; import { useShallow } from "zustand/react/shallow"; import IconComponent from "@/components/common/genericIconComponent"; @@ -57,6 +58,7 @@ export const MenuBar = memo((): JSX.Element => { const onFlowPage = useFlowStore((state) => state.onFlowPage); const measureRef = useRef(null); const changesNotSaved = useUnsavedChanges(); + const location = useLocation(); const { data: folders, isFetched: isFoldersFetched } = useGetFoldersQuery(); @@ -88,6 +90,21 @@ export const MenuBar = memo((): JSX.Element => { : getNumberFromString(currentFlowGradient ?? currentFlowId ?? "")) % swatchColors.length; + // Determine if we should hide the flow name when viewing Marketplace Detail > Flow Visualization + const pathname = location.pathname || ""; + const isMarketplaceDetail = pathname.includes("/marketplace/detail"); + const routerState = location.state as { hideDetailName?: boolean } | undefined; + let marketplaceDetailActiveTab: string | null = null; + try { + marketplaceDetailActiveTab = typeof window !== "undefined" + ? window.sessionStorage.getItem("marketplaceDetailActiveTab") + : null; + } catch { + marketplaceDetailActiveTab = null; + } + const shouldHideFlowName = + isMarketplaceDetail && (routerState?.hideDetailName || marketplaceDetailActiveTab === "flow"); + return onFlowPage ? ( @@ -123,33 +140,37 @@ export const MenuBar = memo((): JSX.Element => { > -
+ {!shouldHideFlowName &&
-
+
}
- - + {!shouldHideFlowName && ( + <> + + + + )}