NestedFolders: Switch between old and new folder picker components (#72124)

NestedFolders: Create wrapper to switch between old and new folder picker components

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 ? <NestedFolderPicker {...props} /> : <OldFolderPickerWrapper {...props} />;
+}
+
+// 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 <OldFolderPicker onChange={handleOnChange} initialFolderUid={initialFolderUID} showRoot={showRootFolder} />;
+}

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 { FolderPicker } from 'app/core/components/Select/FolderPicker';
-import { OldFolderPicker } from 'app/core/components/Select/OldFolderPicker';
 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
       <Space v={3} />
 
       <Field label={t('browse-dashboards.action.move-modal-field-label', 'Folder name')}>
-        {config.featureToggles.nestedFolderPicker ? (
+        <FolderPicker value={moveTarget} excludeUIDs={selectedFolders} onChange={setMoveTarget} />
-          <NestedFolderPicker value={moveTarget} excludeUIDs={selectedFolders} onChange={setMoveTarget} />
-        ) : (
-          <OldFolderPicker allowEmpty onChange={handleFolderChange} />
-        )}
       </Field>
 
       <Modal.ButtonRow>