From 017ec722e4d163dd20a133eac33ab6d310de78f9 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Thu, 29 May 2025 15:59:11 -0600
Subject: [PATCH] save to dropdown bug fixes

---
 .../dropdowns/SaveToCollectionsDropdown.tsx   | 15 +++--------
 .../dropdowns/SaveToDashboardDropdown.tsx     | 27 +++++++++++--------
 .../features/modal/NewDashboardModal.tsx      |  1 +
 web/src/components/ui/dropdown/Dropdown.tsx   |  7 +----
 .../DashboardListController.tsx               |  1 +
 5 files changed, 23 insertions(+), 28 deletions(-)

diff --git a/web/src/components/features/dropdowns/SaveToCollectionsDropdown.tsx b/web/src/components/features/dropdowns/SaveToCollectionsDropdown.tsx
index b680de966..34ee7004c 100644
--- a/web/src/components/features/dropdowns/SaveToCollectionsDropdown.tsx
+++ b/web/src/components/features/dropdowns/SaveToCollectionsDropdown.tsx
@@ -15,13 +15,7 @@ export const SaveToCollectionsDropdown: React.FC<{
   onSaveToCollection: (collectionId: string[]) => Promise<void>;
   onRemoveFromCollection: (collectionId: string) => Promise<void>;
 }> = React.memo(({ children, onRemoveFromCollection, onSaveToCollection, selectedCollections }) => {
-  const [showDropdown, setShowDropdown] = React.useState(false);
-
-  const onOpenChange = useMemoizedFn((open: boolean) => {
-    setShowDropdown(open);
-  });
-
-  const { modal, selectType, footerContent, menuHeader, items } =
+  const { ModalComponent, selectType, footerContent, menuHeader, items } =
     useSaveToCollectionsDropdownContent({
       selectedCollections,
       onSaveToCollection,
@@ -35,14 +29,13 @@ export const SaveToCollectionsDropdown: React.FC<{
         align="end"
         selectType={selectType}
         menuHeader={menuHeader}
-        onOpenChange={onOpenChange}
         footerContent={footerContent}
         emptyStateText="No collections found"
         items={items}>
         {children}
       </Dropdown>
 
-      {modal}
+      {ModalComponent}
     </>
   );
 });
@@ -61,7 +54,7 @@ export const useSaveToCollectionsDropdownContent = ({
   DropdownProps,
   'items' | 'footerContent' | 'menuHeader' | 'selectType' | 'emptyStateText'
 > & {
-  modal: React.ReactNode;
+  ModalComponent: React.ReactNode;
 } => {
   const { data: collectionsList, isPending: isCreatingCollection } = useGetCollectionsList({});
   const onChangePage = useAppLayoutContextSelector((s) => s.onChangePage);
@@ -135,7 +128,7 @@ export const useSaveToCollectionsDropdownContent = ({
       footerContent,
       selectType: 'multiple',
       emptyStateText: 'No collections found',
-      modal: (
+      ModalComponent: (
         <NewCollectionModal
           open={openCollectionModal}
           onClose={onCloseCollectionModal}
diff --git a/web/src/components/features/dropdowns/SaveToDashboardDropdown.tsx b/web/src/components/features/dropdowns/SaveToDashboardDropdown.tsx
index 7f0785d6b..fde7c0dc9 100644
--- a/web/src/components/features/dropdowns/SaveToDashboardDropdown.tsx
+++ b/web/src/components/features/dropdowns/SaveToDashboardDropdown.tsx
@@ -34,21 +34,24 @@ export const SaveToDashboardDropdown: React.FC<{
     onOpenChangeProp?.(open);
   });
 
-  const dropdownProps = useSaveToDashboardDropdownContent({
+  const { ModalComponent, ...dropdownProps } = useSaveToDashboardDropdownContent({
     selectedDashboards,
     onSaveToDashboard,
     onRemoveFromDashboard
   });
 
   return (
-    <Dropdown
-      side={side}
-      align={align}
-      open={showDropdown}
-      onOpenChange={onOpenChange}
-      {...dropdownProps}>
-      {children}
-    </Dropdown>
+    <>
+      <Dropdown
+        side={side}
+        align={align}
+        open={showDropdown}
+        onOpenChange={onOpenChange}
+        {...dropdownProps}>
+        {children}
+      </Dropdown>
+      {ModalComponent}
+    </>
   );
 };
 
@@ -63,7 +66,9 @@ export const useSaveToDashboardDropdownContent = ({
 }): Pick<
   DropdownProps,
   'items' | 'footerContent' | 'menuHeader' | 'selectType' | 'emptyStateText'
-> => {
+> & {
+  ModalComponent: React.ReactNode;
+} => {
   const { data: dashboardsList } = useGetDashboardsList({});
   const onChangePage = useAppLayoutContextSelector((x) => x.onChangePage);
   const [openNewDashboardModal, setOpenNewDashboardModal] = useState(false);
@@ -130,7 +135,7 @@ export const useSaveToDashboardDropdownContent = ({
       menuHeader,
       selectType: 'multiple',
       emptyStateText: 'No dashboards found',
-      modal: (
+      ModalComponent: (
         <NewDashboardModal
           open={openNewDashboardModal}
           onClose={onCloseNewDashboardModal}
diff --git a/web/src/components/features/modal/NewDashboardModal.tsx b/web/src/components/features/modal/NewDashboardModal.tsx
index c3fa0ed00..e5fe85622 100644
--- a/web/src/components/features/modal/NewDashboardModal.tsx
+++ b/web/src/components/features/modal/NewDashboardModal.tsx
@@ -15,6 +15,7 @@ export const NewDashboardModal: React.FC<{
   useChangePage?: boolean;
   onDashboardCreated?: (dashboardId: string) => void;
 }> = React.memo(({ onClose, open, useChangePage = true, onDashboardCreated }) => {
+  console.log('NewDashboardModal', open);
   const [title, setTitle] = React.useState('');
   const inputRef = React.useRef<HTMLInputElement>(null);
   const { mutateAsync: createNewDashboard, isPending: isCreatingDashboard } = useCreateDashboard();
diff --git a/web/src/components/ui/dropdown/Dropdown.tsx b/web/src/components/ui/dropdown/Dropdown.tsx
index 3d438a3e0..279cb6281 100644
--- a/web/src/components/ui/dropdown/Dropdown.tsx
+++ b/web/src/components/ui/dropdown/Dropdown.tsx
@@ -103,12 +103,7 @@ export const DropdownBase = <T,>({
   showEmptyState = true
 }: DropdownProps<T>) => {
   return (
-    <DropdownMenu
-      open={open}
-      defaultOpen={open}
-      onOpenChange={onOpenChange}
-      dir={dir}
-      modal={modal}>
+    <DropdownMenu open={open} defaultOpen={open} onOpenChange={onOpenChange} dir={dir}>
       <DropdownMenuTrigger asChild disabled={disabled}>
         <span className="dropdown-trigger">{children}</span>
       </DropdownMenuTrigger>
diff --git a/web/src/controllers/DashboardListController/DashboardListController.tsx b/web/src/controllers/DashboardListController/DashboardListController.tsx
index bf6089b09..6d59c4d91 100644
--- a/web/src/controllers/DashboardListController/DashboardListController.tsx
+++ b/web/src/controllers/DashboardListController/DashboardListController.tsx
@@ -9,6 +9,7 @@ import { DashboardListContent } from './DashboardListContent';
 
 export const DashboardListController: React.FC = () => {
   const [openNewDashboardModal, setOpenNewDashboardModal] = useState(false);
+  console.log('DashboardListController', openNewDashboardModal);
   const [dashboardListFilters, setDashboardListFilters] = useState<{
     shared_with_me?: boolean;
     only_my_dashboards?: boolean;