edit with ai for the chart

apps/web/src/components/features/dashboard/DashboardThreeDotMenu.tsx

@@ -11,6 +11,7 @@ import {
   useCollectionSelectMenu,
   useDashboardVersionHistorySelectMenu,
   useDeleteDashboardSelectMenu,
+  useEditDashboardWithAI,
   useFavoriteDashboardSelectMenu,
   useFilterDashboardSelectMenu,
   useOpenFullScreenDashboard,
@@ -45,6 +46,7 @@ export const DashboardThreeDotMenu = React.memo(
       { id: dashboardId },
       { select: useCallback((x: GetDashboardResponse) => x.permission, []) }
     );
+    const editDashboardWithAI = useEditDashboardWithAI({ dashboardId });
     const isEffectiveOwner = getIsEffectiveOwner(permission);
     const isFilter = canFilter(permission);
     const isEditor = canEdit(permission);
@@ -52,13 +54,14 @@ export const DashboardThreeDotMenu = React.memo(
     const items: IDropdownItems = useMemo(
       () =>
         [
-          chatId && openFullScreenDashboard,
-          // isFilter && !isViewingOldVersion && filterDashboardMenu,
-          isEditor && !isViewingOldVersion && addContentToDashboardMenu,
+          ...(chatId ? [openFullScreenDashboard, { type: 'divider' }] : []),
+          editDashboardWithAI,
           { type: 'divider' },
           isEffectiveOwner && !isViewingOldVersion && shareMenu,
           collectionSelectMenu,
           favoriteDashboard,
+          { type: 'divider' },
+          isEditor && !isViewingOldVersion && addContentToDashboardMenu,
           versionHistoryItems,
           { type: 'divider' },
           isEditor && !isViewingOldVersion && renameDashboardMenu,

apps/web/src/components/features/dashboard/threeDotMenuHooks.tsx

@@ -8,6 +8,7 @@ import {
   useRemoveDashboardFromCollection,
 } from '@/api/buster_rest/dashboards';
 import { Star as StarFilled } from '@/components/ui/icons/NucleoIconFilled';
+import { useStartChatFromAsset } from '@/context/BusterAssets/useStartChatFromAsset';
 import { useBusterNotifications } from '@/context/BusterNotifications';
 import { DASHBOARD_TITLE_INPUT_ID } from '@/controllers/DashboardController/DashboardViewDashboardController/DashboardEditTitle';
 import { useMemoizedFn } from '@/hooks/useMemoizedFn';
@@ -16,7 +17,16 @@ import { ensureElementExists } from '../../../lib/element';
 import { getIsEffectiveOwner } from '../../../lib/share';
 import type { IDropdownItem, IDropdownItems } from '../../ui/dropdown';
 import { createDropdownItem, DropdownContent } from '../../ui/dropdown';
-import { ArrowUpRight, Filter, History, Plus, ShareRight, Star, Trash } from '../../ui/icons';
+import {
+  ArrowUpRight,
+  Filter,
+  History,
+  PenSparkle,
+  Plus,
+  ShareRight,
+  Star,
+  Trash,
+} from '../../ui/icons';
 import Pencil from '../../ui/icons/NucleoIconOutlined/pencil';
 import { useSaveToCollectionsDropdownContent } from '../dropdowns/SaveToCollectionsDropdown';
 import { useFavoriteStar } from '../favorites/useFavoriteStar';
@@ -177,7 +187,7 @@ export const useRenameDashboardSelectMenu = ({
         onClick: async () => {
           await navigate({
             unsafeRelative: 'path',
-            to: '../content' as '/app/dashboards/$dashboardId',
+            to: '.' as '/app/dashboards/$dashboardId',
             params: (prev) => ({ ...prev, dashboardId }),
             search: dashboardVersionNumber
               ? { dashboard_version_number: dashboardVersionNumber }
@@ -187,8 +197,10 @@ export const useRenameDashboardSelectMenu = ({
             () => document.getElementById(DASHBOARD_TITLE_INPUT_ID(dashboardId)) as HTMLInputElement
           );
           if (input) {
-            input.focus();
-            input.select();
+            setTimeout(() => {
+              input.focus();
+              input.select();
+            }, 50);
           }
         },
       }),
@@ -200,9 +212,9 @@ export const useAddContentToDashboardSelectMenu = () => {
   return useMemo(
     () =>
       createDropdownItem({
-        label: 'Add content',
+        label: 'Add existing charts',
         value: 'add-content',
-        icon: <Plus />,
+        icon: <ASSET_ICONS.metircsAdd />,
         onClick: onOpenDashboardContentModal,
       }),
     []
@@ -269,3 +281,22 @@ export const useShareMenuSelectMenu = ({ dashboardId }: { dashboardId: string })
     [dashboardId, dashboard, isOwner]
   );
 };
+
+export const useEditDashboardWithAI = ({ dashboardId }: { dashboardId: string }) => {
+  const { onCreateFileClick, loading } = useStartChatFromAsset({
+    assetId: dashboardId,
+    assetType: 'dashboard',
+  });
+
+  return useMemo(
+    () =>
+      createDropdownItem({
+        label: 'Edit with AI',
+        value: 'edit-with-ai',
+        icon: <PenSparkle />,
+        onClick: onCreateFileClick,
+        loading,
+      }),
+    [dashboardId, onCreateFileClick, loading]
+  );
+};

apps/web/src/components/features/metrics/DashboardMetricItem/useDashboardMetricCardThreeDotMenuItems.tsx

@@ -1,13 +1,14 @@
-import { Link, useNavigate } from '@tanstack/react-router';
 import React, { useMemo } from 'react';
 import { useRemoveMetricsFromDashboard } from '@/api/buster_rest/dashboards';
 import { useGetMetric } from '@/api/buster_rest/metrics';
-import { ASSET_ICONS } from '@/components/features/icons/assetIcons';
 import {
   useFavoriteMetricSelectMenu,
   useMetricDrilldownItem,
   useMetricVersionHistorySelectMenu,
+  useNavigateToDashboardMetricItem,
+  useNavigatetoMetricItem,
   useOpenChartItem,
+  useRenameMetricOnPage,
 } from '@/components/features/metrics/threeDotMenuHooks';
 import { getShareAssetConfig } from '@/components/features/ShareMenu/helpers';
 import { ShareMenuContent } from '@/components/features/ShareMenu/ShareMenuContent';
@@ -19,17 +20,18 @@ import {
 import { Code, PenSparkle, ShareRight, SquareChartPen, Trash } from '@/components/ui/icons';
 import { useStartChatFromAsset } from '@/context/BusterAssets/useStartChatFromAsset';
 import { useGetChatId } from '@/context/Chats/useGetChatId';
-import { useMetricEditToggle } from '@/layouts/AssetContainer/MetricAssetContainer';
 import { getIsEffectiveOwner } from '@/lib/share';
 
 export const useDashboardMetricCardThreeDotMenuItems = ({
   dashboardId,
   metricId,
   metricVersionNumber,
+  dashboardVersionNumber,
 }: {
   dashboardId: string;
   metricId: string;
   metricVersionNumber: number | undefined;
+  dashboardVersionNumber?: number | undefined;
 }) => {
   const chatId = useGetChatId();
   const removeFromDashboardItem = useRemoveFromDashboardItem({ dashboardId, metricId });
@@ -37,21 +39,15 @@ export const useDashboardMetricCardThreeDotMenuItems = ({
   const drilldownItem = useMetricDrilldownItem({ metricId });
   const shareMenu = useShareMenuSelectMenu({ metricId });
   const editWithAI = useEditWithAI({ metricId });
-  const editChartButton = useEditChartButton({
-    metricVersionNumber,
+  const navigateToDashboardMetricItem = useNavigateToDashboardMetricItem({
     metricId,
-    dashboardId,
-    chatId,
-  });
-  const viewResultsButton = useViewResultsButton({
-    metricId,
-    dashboardId,
-    chatId,
     metricVersionNumber,
+    dashboardId,
+    dashboardVersionNumber,
   });
-  const viewSQLButton = useViewSQLButton({ metricId, dashboardId, chatId, metricVersionNumber });
   const versionHistoryButton = useMetricVersionHistorySelectMenu({ metricId });
   const favoriteMetricButton = useFavoriteMetricSelectMenu({ metricId });
+  const renameMetric = useRenameMetricOnPage({ metricId, metricVersionNumber });
 
   const dropdownItems: IDropdownItems = useMemo(
     () =>
@@ -59,18 +55,16 @@ export const useDashboardMetricCardThreeDotMenuItems = ({
         openChartItem,
         removeFromDashboardItem,
         { type: 'divider' },
-        // drilldownItem,
-        shareMenu,
-        { type: 'divider' },
         editWithAI,
-        editChartButton,
-        viewResultsButton,
-        viewSQLButton,
-        versionHistoryButton,
+        { type: 'divider' },
+        // shareMenu,
+        ...navigateToDashboardMetricItem,
+        // versionHistoryButton,
         //TODO add DOWNLOAD CSV
         //TODO add DOWNLOAD PNG
         { type: 'divider' },
-        favoriteMetricButton,
+        renameMetric,
+        //  favoriteMetricButton,
         //TODO add rename ability
       ].filter(Boolean) as IDropdownItems,
     [
@@ -79,9 +73,7 @@ export const useDashboardMetricCardThreeDotMenuItems = ({
       drilldownItem,
       shareMenu,
       editWithAI,
-      editChartButton,
-      viewResultsButton,
-      viewSQLButton,
+      navigateToDashboardMetricItem,
       versionHistoryButton,
       favoriteMetricButton,
     ]
@@ -168,91 +160,65 @@ const useEditWithAI = ({ metricId }: { metricId: string }): IDropdownItem => {
   );
 };
 
-const useEditChartButton = ({
-  metricId,
-  dashboardId,
-  chatId,
-  metricVersionNumber,
-}: {
-  metricId: string;
-  dashboardId: string;
-  chatId: string | undefined;
-  metricVersionNumber: number | undefined;
-}): IDropdownItem => {
-  const toggleChartEdit = useMetricEditToggle();
-  return useMemo(
-    () =>
-      createDropdownItem({
-        label: 'Edit chart',
-        value: 'edit-chart',
-        icon: <SquareChartPen />,
-        onClick: () => {
-          toggleChartEdit(true, { metricId, metricVersionNumber });
-        },
-      }),
-    [metricId, dashboardId, chatId, metricVersionNumber]
-  );
-};
+// const useViewResultsButton = ({
+//   metricId,
+//   dashboardId,
+//   metricVersionNumber,
+// }: {
+//   metricId: string;
+//   dashboardId: string;
+//   chatId: string | undefined;
+//   metricVersionNumber: number | undefined;
+// }): IDropdownItem => {
+//   return useMemo(
+//     () =>
+//       createDropdownItem({
+//         label: 'View results',
+//         value: 'view-results',
+//         icon: <ASSET_ICONS.table />,
+//         link: {
+//           to: '/app/dashboards/$dashboardId/metrics/$metricId/results',
+//           params: {
+//             dashboardId,
+//             metricId,
+//           },
+//           search: {
+//             metric_version_number: metricVersionNumber,
+//           },
+//         },
+//       }),
+//     [metricId, dashboardId, metricVersionNumber]
+//   );
+// };
 
-const useViewResultsButton = ({
-  metricId,
-  dashboardId,
-  metricVersionNumber,
-}: {
-  metricId: string;
-  dashboardId: string;
-  chatId: string | undefined;
-  metricVersionNumber: number | undefined;
-}): IDropdownItem => {
-  return useMemo(
-    () =>
-      createDropdownItem({
-        label: 'View results',
-        value: 'view-results',
-        icon: <ASSET_ICONS.table />,
-        link: {
-          to: '/app/dashboards/$dashboardId/metrics/$metricId/results',
-          params: {
-            dashboardId,
-            metricId,
-          },
-          search: {
-            metric_version_number: metricVersionNumber,
-          },
-        },
-      }),
-    [metricId, dashboardId, metricVersionNumber]
-  );
-};
-
-const useViewSQLButton = ({
-  metricId,
-  dashboardId,
-  chatId,
-  metricVersionNumber,
-}: {
-  metricId: string;
-  dashboardId: string;
-  chatId: string | undefined;
-  metricVersionNumber: number | undefined;
-}): IDropdownItem => {
-  return useMemo(
-    () =>
-      createDropdownItem({
-        label: 'View SQL',
-        value: 'view-sql',
-        icon: <Code />,
-        link: {
-          to: '/app/dashboards/$dashboardId/metrics/$metricId/sql',
-          params: {
-            dashboardId,
-            metricId,
-          },
-          search: {
-            metric_version_number: metricVersionNumber,
-          },
-        },
-      }),
-    [metricId, dashboardId, chatId]
-  );
-};
+// const useViewSQLButton = ({
+//   metricId,
+//   dashboardId,
+//   chatId,
+//   metricVersionNumber,
+// }: {
+//   metricId: string;
+//   dashboardId: string;
+//   chatId: string | undefined;
+//   metricVersionNumber: number | undefined;
+// }): IDropdownItem => {
+//   return useMemo(
+//     () =>
+//       createDropdownItem({
+//         label: 'View SQL',
+//         value: 'view-sql',
+//         icon: <Code />,
+//         link: {
+//           to: '/app/dashboards/$dashboardId/metrics/$metricId/sql',
+//           params: {
+//             dashboardId,
+//             metricId,
+//           },
+//           search: {
+//             metric_version_number: metricVersionNumber,
+//           },
+//         },
+//       }),
+//     [metricId, dashboardId, chatId]
+//   );
+// };

apps/web/src/components/features/metrics/threeDotMenuHooks.tsx

@@ -10,6 +10,7 @@ import {
   type IDropdownItems,
 } from '@/components/ui/dropdown';
 import {
+  ArrowUpRight,
   Code,
   Download4,
   Edit,
@@ -238,7 +239,7 @@ export const useOpenChartItem = ({
   return createDropdownItem({
     value: 'open-chart',
     label: 'Open chart',
-    icon: <ASSET_ICONS.metrics />,
+    icon: <ArrowUpRight />,
     link: {
       to: '/app/metrics/$metricId/chart',
       params: {
@@ -248,8 +249,7 @@ export const useOpenChartItem = ({
         metric_version_number: metricVersionNumber,
       },
     },
-
-    linkIcon: 'arrow-external',
+    linkIcon: 'none',
   });
 };
 
@@ -308,6 +308,72 @@ export const useNavigatetoMetricItem = ({
   }, [metricId, metricVersionNumber]);
 };
 
+export const useNavigateToDashboardMetricItem = ({
+  metricId,
+  metricVersionNumber,
+  dashboardId,
+  dashboardVersionNumber,
+}: {
+  metricId: string;
+  metricVersionNumber: number | undefined;
+  dashboardId: string;
+  dashboardVersionNumber: number | undefined;
+}): IDropdownItem[] => {
+  const navigate = useNavigate();
+  return useMemo(() => {
+    return createDropdownItems([
+      {
+        value: 'edit-chart',
+        label: 'Edit chart',
+        icon: <SquareChartPen />,
+        link: {
+          to: '/app/dashboards/$dashboardId/metrics/$metricId/chart',
+          params: {
+            dashboardId,
+            metricId,
+          },
+          search: {
+            dashboard_version_number: dashboardVersionNumber,
+            metric_version_number: metricVersionNumber,
+          },
+        },
+      },
+      {
+        value: 'results-chart',
+        label: 'Results chart',
+        icon: <Table />,
+        link: {
+          to: '/app/dashboards/$dashboardId/metrics/$metricId/results',
+          params: {
+            dashboardId,
+            metricId,
+          },
+          search: {
+            dashboard_version_number: dashboardVersionNumber,
+            metric_version_number: metricVersionNumber,
+          },
+        },
+      },
+      {
+        value: 'sql-chart',
+        label: 'SQL chart',
+        icon: <Code />,
+        link: {
+          to: '/app/dashboards/$dashboardId/metrics/$metricId/sql',
+          params: {
+            metricId,
+            dashboardId,
+          },
+          search: {
+            dashboard_version_number: dashboardVersionNumber,
+            metric_version_number: metricVersionNumber,
+          },
+        },
+      },
+    ]);
+  }, [metricId, metricVersionNumber, dashboardId, dashboardVersionNumber]);
+};
+
 export const useEditMetricWithAI = ({ metricId }: { metricId: string }): IDropdownItem => {
   const { onCreateFileClick, loading } = useStartChatFromAsset({
     assetId: metricId,