NestedFolders: Folder view move folder (#65661)

public/app/features/search/components/DashboardActions.tsx

@@ -1,16 +1,27 @@
-import React from 'react';
+import React, { useMemo, useState } from 'react';
 
 import { config, reportInteraction } from '@grafana/runtime';
-import { Menu, Dropdown, Button, Icon } from '@grafana/ui';
+import { Menu, Dropdown, Button, Icon, HorizontalGroup } from '@grafana/ui';
 import { t } from 'app/core/internationalization';
+import { FolderDTO } from 'app/types';
+
+import { MoveToFolderModal } from '../page/components/MoveToFolderModal';
 
 export interface Props {
-  folderUid?: string;
+  folder: FolderDTO | undefined;
   canCreateFolders?: boolean;
   canCreateDashboards?: boolean;
 }
 
-export const DashboardActions = ({ folderUid, canCreateFolders = false, canCreateDashboards = false }: Props) => {
+export const DashboardActions = ({ folder, canCreateFolders = false, canCreateDashboards = false }: Props) => {
+  const [isMoveModalOpen, setIsMoveModalOpen] = useState(false);
+  const canMove = config.featureToggles.nestedFolders && (folder?.canSave ?? false);
+
+  const moveSelection = useMemo(
+    () => new Map<string, Set<string>>([['folder', new Set(folder?.uid ? [folder.uid] : [])]]),
+    [folder]
+  );
+
   const actionUrl = (type: string) => {
     let url = `dashboard/${type}`;
     const isTypeNewFolder = type === 'new_folder';
@@ -19,8 +30,8 @@ export const DashboardActions = ({ folderUid, canCreateFolders = false, canCreat
       url = `dashboards/folder/new/`;
     }
 
-    if (folderUid) {
+    if (folder?.uid) {
-      url += `?folderUid=${folderUid}`;
+      url += `?folderUid=${folder.uid}`;
     }
 
     return url;
@@ -38,7 +49,7 @@ export const DashboardActions = ({ folderUid, canCreateFolders = false, canCreat
             }
           />
         )}
-        {canCreateFolders && (config.featureToggles.nestedFolders || !folderUid) && (
+        {canCreateFolders && (config.featureToggles.nestedFolders || !folder?.uid) && (
           <Menu.Item
             url={actionUrl('new_folder')}
             label={t('search.dashboard-actions.new-folder', 'New Folder')}
@@ -61,13 +72,31 @@ export const DashboardActions = ({ folderUid, canCreateFolders = false, canCreat
   };
 
   return (
-    <div>
+    <>
-      <Dropdown overlay={MenuActions} placement="bottom-start">
+      <div>
-        <Button variant="primary">
+        <HorizontalGroup>
-          {t('search.dashboard-actions.new', 'New')}
+          {canMove && (
-          <Icon name="angle-down" />
+            <Button onClick={() => setIsMoveModalOpen(true)} icon="exchange-alt" variant="secondary">
-        </Button>
+              Move
-      </Dropdown>
+            </Button>
-    </div>
+          )}
+          <Dropdown overlay={MenuActions} placement="bottom-start">
+            <Button variant="primary">
+              {t('search.dashboard-actions.new', 'New')}
+              <Icon name="angle-down" />
+            </Button>
+          </Dropdown>
+        </HorizontalGroup>
+      </div>
+
+      {canMove && isMoveModalOpen && (
+        <MoveToFolderModal
+          onMoveItems={() => {}}
+          results={moveSelection}
+          isOpen={isMoveModalOpen}
+          onDismiss={() => setIsMoveModalOpen(false)}
+        />
+      )}
+    </>
   );
 };

public/app/features/search/components/ManageDashboardsNew.tsx

@@ -61,7 +61,7 @@ export const ManageDashboardsNew = React.memo(({ folder }: Props) => {
         </div>
         {viewActions && (
           <DashboardActions
-            folderUid={folderUid}
+            folder={folder}
             canCreateFolders={canCreateFolders}
             canCreateDashboards={canCreateDashboards}
           />