three dot link menus

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: <ArrowUpRight />,
+      link: createBusterRoute({
+        route: BusterRoutes.APP_DASHBOARD_ID,
+        dashboardId
+      })
+    }),
+    [dashboardId]
+  );
+};

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: <ArrowUpRight />,
+      link: createBusterRoute({
+        route: BusterRoutes.APP_METRIC_ID_CHART,
+        metricId
+      })
+    }),
+    [metricId]
+  );
+};