BrowseDashboards: Fix move to General folder not working (#65653)

* BrowseDashboards: Fix move to General folder not working

* simplify isOpen

public/app/features/search/page/components/ConfirmDeleteModal.test.tsx

@@ -10,16 +10,8 @@ describe('ConfirmModal', () => {
     dashboardsUIDs.add('uid1');
     dashboardsUIDs.add('uid2');
     items.set('dashboard', dashboardsUIDs);
-    const isDeleteModalOpen = true;
     const onDeleteItems = jest.fn();
-    render(
-      <ConfirmDeleteModal
-        onDeleteItems={onDeleteItems}
-        results={items}
-        isOpen={isDeleteModalOpen}
-        onDismiss={() => {}}
-      />
-    );
+    render(<ConfirmDeleteModal onDeleteItems={onDeleteItems} results={items} onDismiss={() => {}} />);
 
     expect(screen.getByRole('heading', { name: 'Delete' })).toBeInTheDocument();
     expect(screen.getByText('Do you want to delete the 2 selected dashboards?')).toBeInTheDocument();

public/app/features/search/page/components/ConfirmDeleteModal.tsx

@@ -10,11 +10,10 @@ import { OnMoveOrDeleleSelectedItems } from '../../types';
 interface Props {
   onDeleteItems: OnMoveOrDeleleSelectedItems;
   results: Map<string, Set<string>>;
-  isOpen: boolean;
   onDismiss: () => void;
 }
 
-export const ConfirmDeleteModal = ({ results, onDeleteItems, isOpen, onDismiss }: Props) => {
+export const ConfirmDeleteModal = ({ results, onDeleteItems, onDismiss }: Props) => {
   const styles = useStyles2(getStyles);
 
   const dashboards = Array.from(results.get('dashboard') ?? []);
@@ -44,9 +43,9 @@ export const ConfirmDeleteModal = ({ results, onDeleteItems, isOpen, onDismiss }
     });
   };
 
-  return isOpen ? (
+  return (
     <ConfirmModal
-      isOpen={isOpen}
+      isOpen
       title="Delete"
       body={
         <>
@@ -57,7 +56,7 @@ export const ConfirmDeleteModal = ({ results, onDeleteItems, isOpen, onDismiss }
       onConfirm={deleteItems}
       onDismiss={onDismiss}
     />
-  ) : null;
+  );
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({

public/app/features/search/page/components/ManageActions.tsx

@@ -55,18 +55,13 @@ export function ManageActions({ items, folder, onChange, clearSelection }: Props
         </HorizontalGroup>
       </div>
 
-      <ConfirmDeleteModal
-        onDeleteItems={onChange}
-        results={items}
-        isOpen={isDeleteModalOpen}
-        onDismiss={() => setIsDeleteModalOpen(false)}
-      />
-      <MoveToFolderModal
-        onMoveItems={onChange}
-        results={items}
-        isOpen={isMoveModalOpen}
-        onDismiss={() => setIsMoveModalOpen(false)}
-      />
+      {isDeleteModalOpen && (
+        <ConfirmDeleteModal onDeleteItems={onChange} results={items} onDismiss={() => setIsDeleteModalOpen(false)} />
+      )}
+
+      {isMoveModalOpen && (
+        <MoveToFolderModal onMoveItems={onChange} results={items} onDismiss={() => setIsMoveModalOpen(false)} />
+      )}
     </div>
   );
 }

public/app/features/search/page/components/MoveToFolderModal.test.tsx

@@ -18,14 +18,13 @@ describe('MoveToFolderModal', () => {
     dashboardsUIDs.add('uid1');
     dashboardsUIDs.add('uid2');
     items.set('dashboard', dashboardsUIDs);
-    const isMoveModalOpen = true;
     const mockStore = configureMockStore();
     const store = mockStore({ dashboard: { panels: [] } });
     const onMoveItems = jest.fn();
 
     render(
       <Provider store={store}>
-        <MoveToFolderModal onMoveItems={onMoveItems} results={items} isOpen={isMoveModalOpen} onDismiss={() => {}} />
+        <MoveToFolderModal onMoveItems={onMoveItems} results={items} onDismiss={() => {}} />
       </Provider>
     );
 

public/app/features/search/page/components/MoveToFolderModal.tsx

@@ -13,11 +13,10 @@ import { OnMoveOrDeleleSelectedItems } from '../../types';
 interface Props {
   onMoveItems: OnMoveOrDeleleSelectedItems;
   results: Map<string, Set<string>>;
-  isOpen: boolean;
   onDismiss: () => void;
 }
 
-export const MoveToFolderModal = ({ results, onMoveItems, isOpen, onDismiss }: Props) => {
+export const MoveToFolderModal = ({ results, onMoveItems, onDismiss }: Props) => {
   const [folder, setFolder] = useState<FolderInfo | null>(null);
   const styles = useStyles2(getStyles);
   const notifyApp = useAppNotification();
@@ -49,25 +48,19 @@ export const MoveToFolderModal = ({ results, onMoveItems, isOpen, onDismiss }: P
     }
   };
 
-  return isOpen ? (
-    <Modal
-      className={styles.modal}
-      title="Choose Dashboard Folder"
-      icon="folder-plus"
-      isOpen={isOpen}
-      onDismiss={onDismiss}
-    >
+  return (
+    <Modal className={styles.modal} title="Choose Dashboard Folder" icon="folder-plus" isOpen onDismiss={onDismiss}>
       <>
         <div className={styles.content}>
           <p>
             Move the {selectedDashboards.length} selected dashboard{selectedDashboards.length === 1 ? '' : 's'} to the
             following folder:
           </p>
-          <FolderPicker onChange={(f) => setFolder(f)} />
+          <FolderPicker allowEmpty={true} enableCreateNew={false} onChange={(f) => setFolder(f)} />
         </div>
 
         <HorizontalGroup justify="center">
-          <Button icon={moving ? 'fa fa-spinner' : undefined} variant="primary" onClick={moveTo}>
+          <Button icon={moving ? 'fa fa-spinner' : undefined} disabled={!folder} variant="primary" onClick={moveTo}>
             Move
           </Button>
           <Button variant="secondary" onClick={onDismiss}>
@@ -76,7 +69,7 @@ export const MoveToFolderModal = ({ results, onMoveItems, isOpen, onDismiss }: P
         </HorizontalGroup>
       </>
     </Modal>
-  ) : null;
+  );
 };
 
 const getStyles = (theme: GrafanaTheme2) => {