diff --git a/public/app/core/components/Select/FolderPicker.tsx b/public/app/core/components/Select/FolderPicker.tsx
new file mode 100644
index 00000000000..f6c8474a787
--- /dev/null
+++ b/public/app/core/components/Select/FolderPicker.tsx
@@ -0,0 +1,30 @@
+import React, { useCallback, useState } from 'react';
+
+import { config } from '@grafana/runtime';
+
+import { NestedFolderPicker, NestedFolderPickerProps } from '../NestedFolderPicker/NestedFolderPicker';
+
+import { OldFolderPicker } from './OldFolderPicker';
+
+// Temporary wrapper component to switch between the NestedFolderPicker and the old flat
+// FolderPicker depending on feature flags
+export function FolderPicker(props: NestedFolderPickerProps) {
+ const nestedEnabled = config.featureToggles.nestedFolders && config.featureToggles.nestedFolderPicker;
+ return nestedEnabled ? : ;
+}
+
+// Converts new NestedFolderPicker props to old non-nested folder picker props
+// Seperate component so the hooks aren't created if not used
+function OldFolderPickerWrapper({ value, showRootFolder, onChange }: NestedFolderPickerProps) {
+ const [initialFolderUID] = useState(value);
+ const handleOnChange = useCallback(
+ (newFolder: { title: string; uid: string }) => {
+ if (onChange) {
+ onChange(newFolder.uid, newFolder.title);
+ }
+ },
+ [onChange]
+ );
+
+ return ;
+}
diff --git a/public/app/features/browse-dashboards/components/BrowseActions/MoveModal.tsx b/public/app/features/browse-dashboards/components/BrowseActions/MoveModal.tsx
index f4c8d87c8d5..33670622cad 100644
--- a/public/app/features/browse-dashboards/components/BrowseActions/MoveModal.tsx
+++ b/public/app/features/browse-dashboards/components/BrowseActions/MoveModal.tsx
@@ -1,11 +1,9 @@
import React, { useState } from 'react';
import { Space } from '@grafana/experimental';
-import { config } from '@grafana/runtime';
import { Alert, Button, Field, Modal } from '@grafana/ui';
import { Text } from '@grafana/ui/src/unstable';
-import { NestedFolderPicker } from 'app/core/components/NestedFolderPicker/NestedFolderPicker';
-import { OldFolderPicker } from 'app/core/components/Select/OldFolderPicker';
+import { FolderPicker } from 'app/core/components/Select/FolderPicker';
import { t, Trans } from 'app/core/internationalization';
import { DashboardTreeSelection } from '../../types';
@@ -24,10 +22,6 @@ export const MoveModal = ({ onConfirm, onDismiss, selectedItems, ...props }: Pro
const [isMoving, setIsMoving] = useState(false);
const selectedFolders = Object.keys(selectedItems.folder).filter((uid) => selectedItems.folder[uid]);
- const handleFolderChange = (newFolder: { uid: string; title: string }) => {
- setMoveTarget(newFolder.uid);
- };
-
const onMove = async () => {
if (moveTarget !== undefined) {
setIsMoving(true);
@@ -59,11 +53,7 @@ export const MoveModal = ({ onConfirm, onDismiss, selectedItems, ...props }: Pro
- {config.featureToggles.nestedFolderPicker ? (
-
- ) : (
-
- )}
+