IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
NestedFolders: Create wrapper to switch between old and new folder picker components
This commit is contained in:
Josh Hunt 2023-07-24 10:25:32 +00:00 committed by GitHub
parent 56ae5abf08
commit 1fde7f7f46
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
public/app/core/components/Select/FolderPicker.tsx Normal file
View File

@ -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} />;
}

14
public/app/features/browse-dashboards/components/BrowseActions/MoveModal.tsx
View File

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