mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Folder: Replace folderId with folderUid (#58393)
* support folderuid in FolderPicker * support folderuid in unified alerting * support folderuid when returning to view mode after editing a panel * support folderuid when preselecting the folderpicker in dashboard general settings * support folderuid when saving dashboard * support folderuid when pre-selecting folderpicker in dashboard form * support folderuid in routes when loading a dashboard * support folderuid when saving dashboard json * support folderuid when validating new dashboard name * support folderuid when moving dashboard to another folder * support folderuid on dashboard action buttons * support folderuid when creating a new dashboard on an empty folder * support folderuid when showing library panel modal * support folderuid when saving library panel * support folderuid when importing dashboard * fixed broken tests * use folderuid when importing dashboards * remove commented line * fix typo when comparing uid values
This commit is contained in:
Leo
GitHub
@@ -16,8 +16,8 @@ describe('FolderPicker', () => {
|
||||
jest
|
||||
.spyOn(api, 'searchFolders')
|
||||
.mockResolvedValue([
|
||||
{ title: 'Dash 1', id: 1 } as DashboardSearchHit,
|
||||
{ title: 'Dash 2', id: 2 } as DashboardSearchHit,
|
||||
{ title: 'Dash 1', uid: 'xMsQdBfWz' } as DashboardSearchHit,
|
||||
{ title: 'Dash 2', uid: 'wfTJJL5Wz' } as DashboardSearchHit,
|
||||
]);
|
||||
|
||||
render(<FolderPicker onChange={jest.fn()} />);
|
||||
@@ -28,12 +28,12 @@ describe('FolderPicker', () => {
|
||||
jest
|
||||
.spyOn(api, 'searchFolders')
|
||||
.mockResolvedValue([
|
||||
{ title: 'Dash 1', id: 1 } as DashboardSearchHit,
|
||||
{ title: 'Dash 2', id: 2 } as DashboardSearchHit,
|
||||
{ title: 'Dash 3', id: 3 } as DashboardSearchHit,
|
||||
{ title: 'Dash 1', uid: 'xMsQdBfWz' } as DashboardSearchHit,
|
||||
{ title: 'Dash 2', uid: 'wfTJJL5Wz' } as DashboardSearchHit,
|
||||
{ title: 'Dash 3', uid: '7MeksYbmk' } as DashboardSearchHit,
|
||||
]);
|
||||
|
||||
render(<FolderPicker onChange={jest.fn()} filter={(hits) => hits.filter((h) => h.id !== 2)} />);
|
||||
render(<FolderPicker onChange={jest.fn()} filter={(hits) => hits.filter((h) => h.uid !== 'wfTJJL5Wz')} />);
|
||||
|
||||
const pickerContainer = screen.getByLabelText(selectors.components.FolderPicker.input);
|
||||
selectEvent.openMenu(pickerContainer);
|
||||
@@ -46,13 +46,13 @@ describe('FolderPicker', () => {
|
||||
});
|
||||
|
||||
it('should allow creating a new option', async () => {
|
||||
const newFolder = { title: 'New Folder', id: 3 } as DashboardSearchHit;
|
||||
const newFolder = { title: 'New Folder', uid: '7MeksYbmk' } as DashboardSearchHit;
|
||||
|
||||
jest
|
||||
.spyOn(api, 'searchFolders')
|
||||
.mockResolvedValue([
|
||||
{ title: 'Dash 1', id: 1 } as DashboardSearchHit,
|
||||
{ title: 'Dash 2', id: 2 } as DashboardSearchHit,
|
||||
{ title: 'Dash 1', uid: 'xMsQdBfWz' } as DashboardSearchHit,
|
||||
{ title: 'Dash 2', uid: 'wfTJJL5Wz' } as DashboardSearchHit,
|
||||
]);
|
||||
|
||||
const onChangeFn = jest.fn();
|
||||
@@ -70,7 +70,7 @@ describe('FolderPicker', () => {
|
||||
expect(create).toHaveBeenCalledWith({ title: newFolder.title });
|
||||
});
|
||||
|
||||
expect(onChangeFn).toHaveBeenCalledWith({ title: newFolder.title, id: newFolder.id });
|
||||
expect(onChangeFn).toHaveBeenCalledWith({ title: newFolder.title, uid: newFolder.uid });
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(newFolder.title)).toBeInTheDocument();
|
||||
});
|
||||
@@ -80,8 +80,8 @@ describe('FolderPicker', () => {
|
||||
jest
|
||||
.spyOn(api, 'searchFolders')
|
||||
.mockResolvedValue([
|
||||
{ title: 'Dash 1', id: 1 } as DashboardSearchHit,
|
||||
{ title: 'Dash 2', id: 2 } as DashboardSearchHit,
|
||||
{ title: 'Dash 1', uid: 'xMsQdBfWz' } as DashboardSearchHit,
|
||||
{ title: 'Dash 2', uid: 'wfTJJL5Wz' } as DashboardSearchHit,
|
||||
]);
|
||||
|
||||
jest.spyOn(contextSrv, 'hasAccess').mockReturnValue(true);
|
||||
@@ -101,8 +101,8 @@ describe('FolderPicker', () => {
|
||||
jest
|
||||
.spyOn(api, 'searchFolders')
|
||||
.mockResolvedValue([
|
||||
{ title: 'Dash 1', id: 1 } as DashboardSearchHit,
|
||||
{ title: 'Dash 2', id: 2 } as DashboardSearchHit,
|
||||
{ title: 'Dash 1', uid: 'xMsQdBfWz' } as DashboardSearchHit,
|
||||
{ title: 'Dash 2', uid: 'wfTJJL5Wz' } as DashboardSearchHit,
|
||||
]);
|
||||
|
||||
jest.spyOn(contextSrv, 'hasAccess').mockReturnValue(true);
|
||||
@@ -122,8 +122,8 @@ describe('FolderPicker', () => {
|
||||
jest
|
||||
.spyOn(api, 'searchFolders')
|
||||
.mockResolvedValue([
|
||||
{ title: 'Dash 1', id: 1 } as DashboardSearchHit,
|
||||
{ title: 'Dash 2', id: 2 } as DashboardSearchHit,
|
||||
{ title: 'Dash 1', uid: 'xMsQdBfWz' } as DashboardSearchHit,
|
||||
{ title: 'Dash 2', uid: 'wfTJJL5Wz' } as DashboardSearchHit,
|
||||
]);
|
||||
|
||||
jest.spyOn(contextSrv, 'hasAccess').mockReturnValue(false);
|
||||
@@ -141,28 +141,28 @@ describe('FolderPicker', () => {
|
||||
});
|
||||
|
||||
describe('getInitialValues', () => {
|
||||
describe('when called with folderId and title', () => {
|
||||
it('then it should return folderId and title', async () => {
|
||||
describe('when called with folderUid and title', () => {
|
||||
it('then it should return folderUid and title', async () => {
|
||||
const getFolder = jest.fn().mockResolvedValue({});
|
||||
const folder = await getInitialValues({ folderId: 0, folderName: 'Some title', getFolder });
|
||||
const folder = await getInitialValues({ folderUid: '', folderName: 'Some title', getFolder });
|
||||
|
||||
expect(folder).toEqual({ label: 'Some title', value: 0 });
|
||||
expect(folder).toEqual({ label: 'Some title', value: '' });
|
||||
expect(getFolder).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('when called with just a folderId', () => {
|
||||
describe('when called with just a folderUid', () => {
|
||||
it('then it should call api to retrieve title', async () => {
|
||||
const getFolder = jest.fn().mockResolvedValue({ id: 0, title: 'Title from api' });
|
||||
const folder = await getInitialValues({ folderId: 0, getFolder });
|
||||
const getFolder = jest.fn().mockResolvedValue({ uid: '', title: 'Title from api' });
|
||||
const folder = await getInitialValues({ folderUid: '', getFolder });
|
||||
|
||||
expect(folder).toEqual({ label: 'Title from api', value: 0 });
|
||||
expect(folder).toEqual({ label: 'Title from api', value: '' });
|
||||
expect(getFolder).toHaveBeenCalledTimes(1);
|
||||
expect(getFolder).toHaveBeenCalledWith(0);
|
||||
expect(getFolder).toHaveBeenCalledWith('');
|
||||
});
|
||||
});
|
||||
|
||||
describe('when called without folderId', () => {
|
||||
describe('when called without folderUid', () => {
|
||||
it('then it should throw an error', async () => {
|
||||
const getFolder = jest.fn().mockResolvedValue({});
|
||||
await expect(getInitialValues({ getFolder })).rejects.toThrow();
|
||||
|
||||
@@ -9,7 +9,7 @@ import { useStyles2, ActionMeta, AsyncSelect, Input, InputActionMeta } from '@gr
|
||||
import appEvents from 'app/core/app_events';
|
||||
import { t } from 'app/core/internationalization';
|
||||
import { contextSrv } from 'app/core/services/context_srv';
|
||||
import { createFolder, getFolderById, searchFolders } from 'app/features/manage-dashboards/state/actions';
|
||||
import { createFolder, getFolderByUid, searchFolders } from 'app/features/manage-dashboards/state/actions';
|
||||
import { DashboardSearchHit } from 'app/features/search/types';
|
||||
import { AccessControlAction, PermissionLevelString } from 'app/types';
|
||||
|
||||
@@ -28,13 +28,13 @@ export interface CustomAdd {
|
||||
}
|
||||
|
||||
export interface Props {
|
||||
onChange: ($folder: { title: string; id: number }) => void;
|
||||
onChange: ($folder: { title: string; uid: string }) => void;
|
||||
enableCreateNew?: boolean;
|
||||
rootName?: string;
|
||||
enableReset?: boolean;
|
||||
dashboardId?: number | string;
|
||||
initialTitle?: string;
|
||||
initialFolderId?: number;
|
||||
initialFolderUid?: string;
|
||||
permissionLevel?: Exclude<PermissionLevelString, PermissionLevelString.Admin>;
|
||||
filter?: FolderPickerFilter;
|
||||
allowEmpty?: boolean;
|
||||
@@ -47,15 +47,15 @@ export interface Props {
|
||||
/**
|
||||
* Skips loading all folders in order to find the folder matching
|
||||
* the folder where the dashboard is stored.
|
||||
* Instead initialFolderId and initialTitle will be used to display the correct folder.
|
||||
* initialFolderId needs to have an value > -1 or an error will be thrown.
|
||||
* Instead initialFolderUid and initialTitle will be used to display the correct folder.
|
||||
* initialFolderUid needs to be a string or an error will be thrown.
|
||||
*/
|
||||
skipInitialLoad?: boolean;
|
||||
/** The id of the search input. Use this to set a matching label with htmlFor */
|
||||
inputId?: string;
|
||||
}
|
||||
export type SelectedFolder = SelectableValue<number>;
|
||||
const VALUE_FOR_ADD = -10;
|
||||
export type SelectedFolder = SelectableValue<string>;
|
||||
const VALUE_FOR_ADD = '-10';
|
||||
|
||||
export function FolderPicker(props: Props) {
|
||||
const {
|
||||
@@ -67,7 +67,7 @@ export function FolderPicker(props: Props) {
|
||||
inputId,
|
||||
onClear,
|
||||
enableReset,
|
||||
initialFolderId,
|
||||
initialFolderUid,
|
||||
initialTitle = '',
|
||||
permissionLevel = PermissionLevelString.Edit,
|
||||
rootName = 'General',
|
||||
@@ -90,14 +90,14 @@ export function FolderPicker(props: Props) {
|
||||
const getOptions = useCallback(
|
||||
async (query: string) => {
|
||||
const searchHits = await searchFolders(query, permissionLevel, accessControlMetadata);
|
||||
const options: Array<SelectableValue<number>> = mapSearchHitsToOptions(searchHits, filter);
|
||||
const options: Array<SelectableValue<string>> = mapSearchHitsToOptions(searchHits, filter);
|
||||
|
||||
const hasAccess =
|
||||
contextSrv.hasAccess(AccessControlAction.DashboardsWrite, contextSrv.isEditor) ||
|
||||
contextSrv.hasAccess(AccessControlAction.DashboardsCreate, contextSrv.isEditor);
|
||||
|
||||
if (hasAccess && rootName?.toLowerCase().startsWith(query.toLowerCase()) && showRoot) {
|
||||
options.unshift({ label: rootName, value: 0 });
|
||||
options.unshift({ label: rootName, value: '' });
|
||||
}
|
||||
|
||||
if (
|
||||
@@ -106,7 +106,7 @@ export function FolderPicker(props: Props) {
|
||||
initialTitle !== '' &&
|
||||
!options.find((option) => option.label === initialTitle)
|
||||
) {
|
||||
options.unshift({ label: initialTitle, value: initialFolderId });
|
||||
options.unshift({ label: initialTitle, value: initialFolderUid });
|
||||
}
|
||||
if (enableCreateNew && Boolean(customAdd)) {
|
||||
return [...options, { value: VALUE_FOR_ADD, label: ADD_NEW_FOLER_OPTION, title: query }];
|
||||
@@ -116,7 +116,7 @@ export function FolderPicker(props: Props) {
|
||||
},
|
||||
[
|
||||
enableReset,
|
||||
initialFolderId,
|
||||
initialFolderUid,
|
||||
initialTitle,
|
||||
permissionLevel,
|
||||
rootName,
|
||||
@@ -133,19 +133,19 @@ export function FolderPicker(props: Props) {
|
||||
}, [getOptions]);
|
||||
|
||||
const loadInitialValue = async () => {
|
||||
const resetFolder: SelectableValue<number> = { label: initialTitle, value: undefined };
|
||||
const rootFolder: SelectableValue<number> = { label: rootName, value: 0 };
|
||||
const resetFolder: SelectableValue<string> = { label: initialTitle, value: undefined };
|
||||
const rootFolder: SelectableValue<string> = { label: rootName, value: '' };
|
||||
|
||||
const options = await getOptions('');
|
||||
|
||||
let folder: SelectableValue<number> | null = null;
|
||||
let folder: SelectableValue<string> | null = null;
|
||||
|
||||
if (initialFolderId !== undefined && initialFolderId !== null && initialFolderId > -1) {
|
||||
folder = options.find((option) => option.value === initialFolderId) || null;
|
||||
if (initialFolderUid !== undefined && initialFolderUid !== null) {
|
||||
folder = options.find((option) => option.value === initialFolderUid) || null;
|
||||
} else if (enableReset && initialTitle) {
|
||||
folder = resetFolder;
|
||||
} else if (initialFolderId) {
|
||||
folder = options.find((option) => option.id === initialFolderId) || null;
|
||||
} else if (initialFolderUid) {
|
||||
folder = options.find((option) => option.id === initialFolderUid) || null;
|
||||
}
|
||||
|
||||
if (!folder && !allowEmpty) {
|
||||
@@ -166,25 +166,25 @@ export function FolderPicker(props: Props) {
|
||||
|
||||
useEffect(() => {
|
||||
// if this is not the same as our initial value notify parent
|
||||
if (folder && folder.value !== initialFolderId) {
|
||||
!isCreatingNew && folder.value && folder.label && onChange({ id: folder.value, title: folder.label });
|
||||
if (folder && folder.value !== initialFolderUid) {
|
||||
!isCreatingNew && folder.value && folder.label && onChange({ uid: folder.value, title: folder.label });
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [folder, initialFolderId]);
|
||||
}, [folder, initialFolderUid]);
|
||||
|
||||
// initial values for dropdown
|
||||
useAsync(async () => {
|
||||
if (skipInitialLoad) {
|
||||
const folder = await getInitialValues({
|
||||
getFolder: getFolderById,
|
||||
folderId: initialFolderId,
|
||||
getFolder: getFolderByUid,
|
||||
folderUid: initialFolderUid,
|
||||
folderName: initialTitle,
|
||||
});
|
||||
setFolder(folder);
|
||||
}
|
||||
|
||||
await loadInitialValue();
|
||||
}, [skipInitialLoad, initialFolderId, initialTitle]);
|
||||
}, [skipInitialLoad, initialFolderUid, initialTitle]);
|
||||
|
||||
useEffect(() => {
|
||||
if (folder && folder.id === VALUE_FOR_ADD) {
|
||||
@@ -193,7 +193,7 @@ export function FolderPicker(props: Props) {
|
||||
}, [folder]);
|
||||
|
||||
const onFolderChange = useCallback(
|
||||
(newFolder: SelectableValue<number> | null | undefined, actionMeta: ActionMeta) => {
|
||||
(newFolder: SelectableValue<string> | null | undefined, actionMeta: ActionMeta) => {
|
||||
if (newFolder?.value === VALUE_FOR_ADD) {
|
||||
setFolder({
|
||||
id: VALUE_FOR_ADD,
|
||||
@@ -202,7 +202,7 @@ export function FolderPicker(props: Props) {
|
||||
setNewFolderValue(inputValue);
|
||||
} else {
|
||||
if (!newFolder) {
|
||||
newFolder = { value: 0, label: rootName };
|
||||
newFolder = { value: '', label: rootName };
|
||||
}
|
||||
|
||||
if (actionMeta.action === 'clear' && onClear) {
|
||||
@@ -211,7 +211,7 @@ export function FolderPicker(props: Props) {
|
||||
}
|
||||
|
||||
setFolder(newFolder);
|
||||
onChange({ id: newFolder.value!, title: newFolder.label! });
|
||||
onChange({ uid: newFolder.value!, title: newFolder.label! });
|
||||
}
|
||||
},
|
||||
[onChange, onClear, rootName, inputValue]
|
||||
@@ -223,11 +223,11 @@ export function FolderPicker(props: Props) {
|
||||
return false;
|
||||
}
|
||||
const newFolder = await createFolder({ title: folderName });
|
||||
let folder: SelectableValue<number> = { value: -1, label: 'Not created' };
|
||||
let folder: SelectableValue<string> = { value: '', label: 'Not created' };
|
||||
|
||||
if (newFolder.id > -1) {
|
||||
if (newFolder.uid) {
|
||||
appEvents.emit(AppEvents.alertSuccess, ['Folder Created', 'OK']);
|
||||
folder = { value: newFolder.id, label: newFolder.title };
|
||||
folder = { value: newFolder.uid, label: newFolder.title };
|
||||
|
||||
setFolder(newFolder);
|
||||
onFolderChange(folder, { action: 'create-option', option: folder });
|
||||
@@ -255,7 +255,7 @@ export function FolderPicker(props: Props) {
|
||||
break;
|
||||
}
|
||||
case 'Escape': {
|
||||
setFolder({ value: 0, label: rootName });
|
||||
setFolder({ value: '', label: rootName });
|
||||
setIsCreatingNew(false);
|
||||
}
|
||||
}
|
||||
@@ -266,11 +266,11 @@ export function FolderPicker(props: Props) {
|
||||
const onNewFolderChange = (e: FormEvent<HTMLInputElement>) => {
|
||||
const value = e.currentTarget.value;
|
||||
setNewFolderValue(value);
|
||||
setFolder({ id: -1, title: value });
|
||||
setFolder({ id: undefined, title: value });
|
||||
};
|
||||
|
||||
const onBlur = () => {
|
||||
setFolder({ value: 0, label: rootName });
|
||||
setFolder({ value: '', label: rootName });
|
||||
setIsCreatingNew(false);
|
||||
};
|
||||
|
||||
@@ -344,25 +344,25 @@ export function FolderPicker(props: Props) {
|
||||
|
||||
function mapSearchHitsToOptions(hits: DashboardSearchHit[], filter?: FolderPickerFilter) {
|
||||
const filteredHits = filter ? filter(hits) : hits;
|
||||
return filteredHits.map((hit) => ({ label: hit.title, value: hit.id }));
|
||||
return filteredHits.map((hit) => ({ label: hit.title, value: hit.uid }));
|
||||
}
|
||||
interface Args {
|
||||
getFolder: typeof getFolderById;
|
||||
folderId?: number;
|
||||
getFolder: typeof getFolderByUid;
|
||||
folderUid?: string;
|
||||
folderName?: string;
|
||||
}
|
||||
|
||||
export async function getInitialValues({ folderName, folderId, getFolder }: Args): Promise<SelectableValue<number>> {
|
||||
if (folderId === null || folderId === undefined || folderId < 0) {
|
||||
throw new Error('folderId should to be greater or equal to zero.');
|
||||
export async function getInitialValues({ folderName, folderUid, getFolder }: Args): Promise<SelectableValue<string>> {
|
||||
if (folderUid === null || folderUid === undefined) {
|
||||
throw new Error('folderUid is not found.');
|
||||
}
|
||||
|
||||
if (folderName) {
|
||||
return { label: folderName, value: folderId };
|
||||
return { label: folderName, value: folderUid };
|
||||
}
|
||||
|
||||
const folderDto = await getFolder(folderId);
|
||||
return { label: folderDto.title, value: folderId };
|
||||
const folderDto = await getFolder(folderUid);
|
||||
return { label: folderDto.title, value: folderUid };
|
||||
}
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
|
||||
Reference in New Issue
Block a user