From 9ae3768709baf0bd540db101e65510a89b36b208 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Fri, 21 Mar 2025 14:08:06 -0600
Subject: [PATCH] add add type button

---
 .../DashboardController.tsx                   | 23 +++++++++++--------
 .../DashboardContainerHeaderButtons.tsx       |  4 +++-
 .../MetricThreeDotMenu.tsx                    |  2 +-
 3 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/web/src/controllers/DashboardController/DashboardController.tsx b/web/src/controllers/DashboardController/DashboardController.tsx
index 92922ced2..334c35955 100644
--- a/web/src/controllers/DashboardController/DashboardController.tsx
+++ b/web/src/controllers/DashboardController/DashboardController.tsx
@@ -8,7 +8,6 @@ import { useGetDashboard } from '@/api/buster_rest/dashboards';
 import { useDashboardContentStore } from '@/context/Dashboards';
 import { AddToDashboardModal } from '@/components/features/modal/AddToDashboardModal';
 import { canEdit } from '@/lib/share';
-import { useWhyDidYouUpdate } from '@/hooks';
 
 export const DashboardController: React.FC<{ dashboardId: string }> = ({ dashboardId }) => {
   const { isFetched: isFetchedDashboard, data: permission } = useGetDashboard(
@@ -16,7 +15,6 @@ export const DashboardController: React.FC<{ dashboardId: string }> = ({ dashboa
     (x) => x.permission
   );
   const selectedFileView = useChatLayoutContextSelector((x) => x.selectedFileView) || 'dashboard';
-  const { openAddContentModal, onCloseAddContentModal } = useDashboardContentStore();
   const isEditor = canEdit(permission);
 
   const Component =
@@ -29,13 +27,20 @@ export const DashboardController: React.FC<{ dashboardId: string }> = ({ dashboa
       {!isFetchedDashboard && <FileIndeterminateLoader />}
       <Component dashboardId={dashboardId} readOnly={!isEditor} />
 
-      {isEditor && (
-        <AddToDashboardModal
-          open={openAddContentModal}
-          onClose={onCloseAddContentModal}
-          dashboardId={dashboardId}
-        />
-      )}
+      {isEditor && <MemoizedAddToDashboardModal dashboardId={dashboardId} />}
     </>
   );
 };
+
+const MemoizedAddToDashboardModal = React.memo(({ dashboardId }: { dashboardId: string }) => {
+  const { openAddContentModal, onCloseAddContentModal } = useDashboardContentStore();
+  return (
+    <AddToDashboardModal
+      open={openAddContentModal}
+      onClose={onCloseAddContentModal}
+      dashboardId={dashboardId}
+    />
+  );
+});
+
+MemoizedAddToDashboardModal.displayName = 'MemoizedAddToDashboardModal';
diff --git a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderButtons/DashboardContainerHeaderButtons.tsx b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderButtons/DashboardContainerHeaderButtons.tsx
index af7681b54..dff119fcf 100644
--- a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderButtons/DashboardContainerHeaderButtons.tsx
+++ b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderButtons/DashboardContainerHeaderButtons.tsx
@@ -13,6 +13,7 @@ import { DashboardThreeDotMenu } from './DashboardThreeDotMenu';
 import { AppTooltip } from '@/components/ui/tooltip';
 import { useGetDashboard } from '@/api/buster_rest/dashboards';
 import { canEdit } from '@/lib/share';
+import { useDashboardContentStore } from '@/context/Dashboards';
 
 export const DashboardContainerHeaderButtons: React.FC<FileContainerButtonsProps> = React.memo(
   () => {
@@ -44,6 +45,7 @@ SaveToCollectionButton.displayName = 'SaveToCollectionButton';
 const AddContentToDashboardButton = React.memo(({ dashboardId }: { dashboardId: string }) => {
   const { data: permission } = useGetDashboard(dashboardId, (x) => x.permission);
   const isEditor = canEdit(permission);
+  const onOpenAddContentModal = useDashboardContentStore((x) => x.onOpenAddContentModal);
 
   if (!isEditor) {
     return null;
@@ -51,7 +53,7 @@ const AddContentToDashboardButton = React.memo(({ dashboardId }: { dashboardId:
 
   return (
     <AppTooltip title="Add content">
-      <Button variant="ghost" prefix={<Plus />} />
+      <Button variant="ghost" prefix={<Plus />} onClick={onOpenAddContentModal} />
     </AppTooltip>
   );
 });
diff --git a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderButtons/MetricThreeDotMenu.tsx b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderButtons/MetricThreeDotMenu.tsx
index 8ad6bfbf0..0dc49ea27 100644
--- a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderButtons/MetricThreeDotMenu.tsx
+++ b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderButtons/MetricThreeDotMenu.tsx
@@ -164,7 +164,7 @@ const useDashboardSelectMenu = ({ metricId }: { metricId: string }) => {
 
   const dashboardDropdownItem: DropdownItem = useMemo(
     () => ({
-      label: 'Add content',
+      label: 'Add to dashboard',
       value: 'add-to-dashboard',
       icon: <ASSET_ICONS.dashboardAdd />,
       items: [<React.Fragment key="dashboard-sub-menu">{dashboardSubMenu}</React.Fragment>]