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 ? ( - - ) : ( - - )} +