diff --git a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderButtons/DashboardThreeDotMenu.tsx b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderButtons/DashboardThreeDotMenu.tsx index bebbb3690..e0d444f35 100644 --- a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderButtons/DashboardThreeDotMenu.tsx +++ b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderButtons/DashboardThreeDotMenu.tsx @@ -13,7 +13,8 @@ import { Star, ShareRight, Plus, - Filter + Filter, + ArrowUpRight } from '@/components/ui/icons'; import { Star as StarFilled } from '@/components/ui/icons/NucleoIconFilled'; import { useBusterNotifications } from '@/context/BusterNotifications'; @@ -36,10 +37,13 @@ import { getShareAssetConfig } from '@/components/features/ShareMenu/helpers'; import { useDashboardContentStore } from '@/context/Dashboards'; import { useAppLayoutContextSelector } from '@/context/BusterAppLayout'; import { BusterRoutes, createBusterRoute } from '@/routes/busterRoutes'; +import { useChatIndividualContextSelector } from '@/layouts/ChatLayout/ChatContext'; export const DashboardThreeDotMenu = React.memo(({ dashboardId }: { dashboardId: string }) => { const versionHistoryItems = useVersionHistorySelectMenu({ dashboardId }); + const chatId = useChatIndividualContextSelector((x) => x.chatId); const collectionSelectMenu = useCollectionSelectMenu({ dashboardId }); + const openFullScreenDashboard = useOpenFullScreenDashboard({ dashboardId }); const favoriteDashboard = useFavoriteDashboardSelectMenu({ dashboardId }); const deleteDashboardMenu = useDeleteDashboardSelectMenu({ dashboardId }); const renameDashboardMenu = useRenameDashboardSelectMenu({ dashboardId }); @@ -57,6 +61,7 @@ export const DashboardThreeDotMenu = React.memo(({ dashboardId }: { dashboardId: const items: DropdownItems = useMemo( () => [ + chatId && openFullScreenDashboard, isFilter && filterDashboardMenu, isEditor && addContentToDashboardMenu, { type: 'divider' }, @@ -69,6 +74,8 @@ export const DashboardThreeDotMenu = React.memo(({ dashboardId }: { dashboardId: isEffectiveOwner && deleteDashboardMenu ].filter(Boolean) as DropdownItems, [ + chatId, + openFullScreenDashboard, filterDashboardMenu, addContentToDashboardMenu, shareMenu, @@ -309,3 +316,18 @@ const useFilterDashboardSelectMenu = () => { [] ); }; + +const useOpenFullScreenDashboard = ({ dashboardId }: { dashboardId: string }) => { + return useMemo( + () => ({ + label: 'Open in dashboard page', + value: 'open-in-full-screen', + icon: , + link: createBusterRoute({ + route: BusterRoutes.APP_DASHBOARD_ID, + dashboardId + }) + }), + [dashboardId] + ); +}; diff --git a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderButtons/MetricThreeDotMenu.tsx b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderButtons/MetricThreeDotMenu.tsx index 9d41e681d..df1138b6c 100644 --- a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderButtons/MetricThreeDotMenu.tsx +++ b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderButtons/MetricThreeDotMenu.tsx @@ -21,7 +21,9 @@ import { SquareCode, SquareChartPen, Star, - ShareRight + ShareRight, + FullScreen, + ArrowUpRight } from '@/components/ui/icons'; import { Star as StarFilled } from '@/components/ui/icons/NucleoIconFilled'; import { useBusterNotifications } from '@/context/BusterNotifications'; @@ -51,10 +53,13 @@ import { getShareAssetConfig } from '@/components/features/ShareMenu/helpers'; import { useAppLayoutContextSelector } from '@/context/BusterAppLayout'; import { BusterRoutes, createBusterRoute } from '@/routes'; import { useListVersionDropdownItems } from '@/components/features/versionHistory/useListVersionDropdownItems'; +import { useChatIndividualContextSelector } from '@/layouts/ChatLayout/ChatContext'; export const ThreeDotMenuButton = React.memo(({ metricId }: { metricId: string }) => { + const chatId = useChatIndividualContextSelector((x) => x.chatId); const { openSuccessMessage } = useBusterNotifications(); const { data: permission } = useGetMetric({ id: metricId }, { select: (x) => x.permission }); + const openFullScreenMetric = useOpenFullScreenMetric({ metricId }); const onSetSelectedFile = useChatLayoutContextSelector((x) => x.onSetSelectedFile); const dashboardSelectMenu = useDashboardSelectMenu({ metricId }); const versionHistoryItems = useVersionHistorySelectMenu({ metricId }); @@ -77,6 +82,7 @@ export const ThreeDotMenuButton = React.memo(({ metricId }: { metricId: string } const items: DropdownItems = useMemo( () => [ + chatId && openFullScreenMetric, isOwnerEffective && shareMenu, isEditor && statusSelectMenu, { type: 'divider' }, @@ -96,6 +102,8 @@ export const ThreeDotMenuButton = React.memo(({ metricId }: { metricId: string } isOwner && deleteMetricMenu ].filter(Boolean) as DropdownItems, [ + chatId, + openFullScreenMetric, isEditor, isOwner, isOwnerEffective, @@ -509,3 +517,18 @@ export const useShareMenuSelectMenu = ({ metricId }: { metricId: string }) => { [metricId] ); }; + +const useOpenFullScreenMetric = ({ metricId }: { metricId: string }) => { + return useMemo( + () => ({ + label: 'Open in metric page', + value: 'open-in-full-screen', + icon: , + link: createBusterRoute({ + route: BusterRoutes.APP_METRIC_ID_CHART, + metricId + }) + }), + [metricId] + ); +};