mirror of https://github.com/grafana/grafana
Chore: Remove `newBrowseDashboards` feature toggle (#78190)
* remove all the things * fix OldFolderPicker tests * i18n * remove more unused code * remove mutation of error object since it's now frozen in the redux state * fix error handlingpull/78545/head
Ashley Harrison
2 years ago
committed by
GitHub
parent
40c8e2fc75
commit
4290ed3d86
|
@ -1,5 +0,0 @@ |
||||
import { config } from '@grafana/runtime'; |
||||
|
||||
export function newBrowseDashboardsEnabled() { |
||||
return config.featureToggles.nestedFolders || config.featureToggles.newBrowseDashboards; |
||||
} |
||||
@ -1,47 +0,0 @@ |
||||
import React, { useEffect } from 'react'; |
||||
import { connect, ConnectedProps } from 'react-redux'; |
||||
|
||||
import { Permissions } from 'app/core/components/AccessControl'; |
||||
import { Page } from 'app/core/components/Page/Page'; |
||||
import { contextSrv } from 'app/core/core'; |
||||
import { GrafanaRouteComponentProps } from 'app/core/navigation/types'; |
||||
import { getNavModel } from 'app/core/selectors/navModel'; |
||||
import { AccessControlAction, StoreState } from 'app/types'; |
||||
|
||||
import { getFolderByUid } from './state/actions'; |
||||
import { getLoadingNav } from './state/navModel'; |
||||
|
||||
interface RouteProps extends GrafanaRouteComponentProps<{ uid: string }> {} |
||||
|
||||
function mapStateToProps(state: StoreState, props: RouteProps) { |
||||
const uid = props.match.params.uid; |
||||
return { |
||||
uid: uid, |
||||
pageNav: getNavModel(state.navIndex, `folder-permissions-${uid}`, getLoadingNav(1)), |
||||
}; |
||||
} |
||||
|
||||
const mapDispatchToProps = { |
||||
getFolderByUid, |
||||
}; |
||||
|
||||
const connector = connect(mapStateToProps, mapDispatchToProps); |
||||
export type Props = ConnectedProps<typeof connector>; |
||||
|
||||
export const AccessControlFolderPermissions = ({ uid, getFolderByUid, pageNav }: Props) => { |
||||
useEffect(() => { |
||||
getFolderByUid(uid); |
||||
}, [getFolderByUid, uid]); |
||||
|
||||
const canSetPermissions = contextSrv.hasPermission(AccessControlAction.FoldersPermissionsWrite); |
||||
|
||||
return ( |
||||
<Page navId="dashboards/browse" pageNav={pageNav.main}> |
||||
<Page.Contents> |
||||
<Permissions resource="folders" resourceId={uid} canSetPermissions={canSetPermissions} /> |
||||
</Page.Contents> |
||||
</Page> |
||||
); |
||||
}; |
||||
|
||||
export default connector(AccessControlFolderPermissions); |
||||
@ -1,35 +0,0 @@ |
||||
import React from 'react'; |
||||
import { useAsync } from 'react-use'; |
||||
|
||||
import { Page } from 'app/core/components/Page/Page'; |
||||
import { GrafanaRouteComponentProps } from 'app/core/navigation/types'; |
||||
import { getNavModel } from 'app/core/selectors/navModel'; |
||||
import { useDispatch, useSelector } from 'app/types'; |
||||
|
||||
import { AlertsFolderView } from '../alerting/unified/AlertsFolderView'; |
||||
|
||||
import { getFolderByUid } from './state/actions'; |
||||
import { getLoadingNav } from './state/navModel'; |
||||
|
||||
export interface OwnProps extends GrafanaRouteComponentProps<{ uid: string }> {} |
||||
|
||||
const FolderAlerting = ({ match }: OwnProps) => { |
||||
const dispatch = useDispatch(); |
||||
const navIndex = useSelector((state) => state.navIndex); |
||||
const folder = useSelector((state) => state.folder); |
||||
|
||||
const uid = match.params.uid; |
||||
const pageNav = getNavModel(navIndex, `folder-alerting-${uid}`, getLoadingNav(1)); |
||||
|
||||
const { loading } = useAsync(async () => dispatch(getFolderByUid(uid)), [getFolderByUid, uid]); |
||||
|
||||
return ( |
||||
<Page navId="dashboards/browse" pageNav={pageNav.main}> |
||||
<Page.Contents isLoading={loading}> |
||||
<AlertsFolderView folder={folder} /> |
||||
</Page.Contents> |
||||
</Page> |
||||
); |
||||
}; |
||||
|
||||
export default FolderAlerting; |
||||
@ -1,55 +0,0 @@ |
||||
import React, { useState } from 'react'; |
||||
import { connect, ConnectedProps } from 'react-redux'; |
||||
import { useAsync } from 'react-use'; |
||||
|
||||
import { Page } from 'app/core/components/Page/Page'; |
||||
|
||||
import { GrafanaRouteComponentProps } from '../../core/navigation/types'; |
||||
import { getNavModel } from '../../core/selectors/navModel'; |
||||
import { StoreState } from '../../types'; |
||||
import { LibraryPanelsSearch } from '../library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch'; |
||||
import { OpenLibraryPanelModal } from '../library-panels/components/OpenLibraryPanelModal/OpenLibraryPanelModal'; |
||||
import { LibraryElementDTO } from '../library-panels/types'; |
||||
|
||||
import { getFolderByUid } from './state/actions'; |
||||
import { getLoadingNav } from './state/navModel'; |
||||
|
||||
export interface OwnProps extends GrafanaRouteComponentProps<{ uid: string }> {} |
||||
|
||||
const mapStateToProps = (state: StoreState, props: OwnProps) => { |
||||
const uid = props.match.params.uid; |
||||
return { |
||||
pageNav: getNavModel(state.navIndex, `folder-library-panels-${uid}`, getLoadingNav(1)), |
||||
folderUid: uid, |
||||
}; |
||||
}; |
||||
|
||||
const mapDispatchToProps = { |
||||
getFolderByUid, |
||||
}; |
||||
|
||||
const connector = connect(mapStateToProps, mapDispatchToProps); |
||||
|
||||
export type Props = OwnProps & ConnectedProps<typeof connector>; |
||||
|
||||
export function FolderLibraryPanelsPage({ pageNav, getFolderByUid, folderUid }: Props): JSX.Element { |
||||
const { loading } = useAsync(async () => await getFolderByUid(folderUid), [getFolderByUid, folderUid]); |
||||
const [selected, setSelected] = useState<LibraryElementDTO | undefined>(undefined); |
||||
|
||||
return ( |
||||
<Page navId="dashboards/browse" pageNav={pageNav.main}> |
||||
<Page.Contents isLoading={loading}> |
||||
<LibraryPanelsSearch |
||||
onClick={setSelected} |
||||
currentFolderUID={folderUid} |
||||
showSecondaryActions |
||||
showSort |
||||
showPanelFilter |
||||
/> |
||||
{selected ? <OpenLibraryPanelModal onDismiss={() => setSelected(undefined)} libraryPanel={selected} /> : null} |
||||
</Page.Contents> |
||||
</Page> |
||||
); |
||||
} |
||||
|
||||
export default connector(FolderLibraryPanelsPage); |
||||
@ -1,189 +0,0 @@ |
||||
import { render, screen, within } from '@testing-library/react'; |
||||
import userEvent from '@testing-library/user-event'; |
||||
import React from 'react'; |
||||
import { mockToolkitActionCreator } from 'test/core/redux/mocks'; |
||||
import { TestProvider } from 'test/helpers/TestProvider'; |
||||
|
||||
import { NavModel } from '@grafana/data'; |
||||
import { getRouteComponentProps } from 'app/core/navigation/__mocks__/routeProps'; |
||||
import { ModalManager } from 'app/core/services/ModalManager'; |
||||
|
||||
import { FolderSettingsPage, Props } from './FolderSettingsPage'; |
||||
import { setFolderTitle } from './state/reducers'; |
||||
|
||||
const setup = (propOverrides?: object) => { |
||||
const props: Props = { |
||||
...getRouteComponentProps(), |
||||
pageNav: {} as NavModel, |
||||
folderUid: '1234', |
||||
folder: { |
||||
id: 0, |
||||
uid: '1234', |
||||
title: 'loading', |
||||
canSave: true, |
||||
canDelete: true, |
||||
url: 'url', |
||||
hasChanged: false, |
||||
version: 1, |
||||
}, |
||||
getFolderByUid: jest.fn(), |
||||
setFolderTitle: mockToolkitActionCreator(setFolderTitle), |
||||
saveFolder: jest.fn(), |
||||
deleteFolder: jest.fn(), |
||||
}; |
||||
|
||||
Object.assign(props, propOverrides); |
||||
|
||||
render( |
||||
<TestProvider> |
||||
<FolderSettingsPage {...props} /> |
||||
</TestProvider> |
||||
); |
||||
}; |
||||
|
||||
describe('FolderSettingsPage', () => { |
||||
it('should render without error', () => { |
||||
expect(() => setup()).not.toThrow(); |
||||
}); |
||||
|
||||
it('should enable save button when canSave is true and hasChanged is true', () => { |
||||
setup({ |
||||
folder: { |
||||
id: 1, |
||||
uid: '1234', |
||||
title: 'loading', |
||||
canSave: true, |
||||
canDelete: true, |
||||
hasChanged: true, |
||||
version: 1, |
||||
}, |
||||
}); |
||||
const saveButton = screen.getByRole('button', { name: 'Save' }); |
||||
expect(saveButton).not.toBeDisabled(); |
||||
}); |
||||
|
||||
it('should disable save button when canSave is false and hasChanged is false', () => { |
||||
setup({ |
||||
folder: { |
||||
id: 1, |
||||
uid: '1234', |
||||
title: 'loading', |
||||
canSave: false, |
||||
canDelete: true, |
||||
hasChanged: false, |
||||
version: 1, |
||||
}, |
||||
}); |
||||
const saveButton = screen.getByRole('button', { name: 'Save' }); |
||||
expect(saveButton).toBeDisabled(); |
||||
}); |
||||
|
||||
it('should disable save button when canSave is true and hasChanged is false', () => { |
||||
setup({ |
||||
folder: { |
||||
id: 1, |
||||
uid: '1234', |
||||
title: 'loading', |
||||
canSave: true, |
||||
canDelete: true, |
||||
hasChanged: false, |
||||
version: 1, |
||||
}, |
||||
}); |
||||
const saveButton = screen.getByRole('button', { name: 'Save' }); |
||||
expect(saveButton).toBeDisabled(); |
||||
}); |
||||
|
||||
it('should disable save button when canSave is false and hasChanged is true', () => { |
||||
setup({ |
||||
folder: { |
||||
id: 1, |
||||
uid: '1234', |
||||
title: 'loading', |
||||
canSave: false, |
||||
canDelete: true, |
||||
hasChanged: true, |
||||
version: 1, |
||||
}, |
||||
}); |
||||
const saveButton = screen.getByRole('button', { name: 'Save' }); |
||||
expect(saveButton).toBeDisabled(); |
||||
}); |
||||
|
||||
it('should call onSave when the saveButton is clicked', async () => { |
||||
const mockSaveFolder = jest.fn(); |
||||
const mockFolder = { |
||||
id: 1, |
||||
uid: '1234', |
||||
title: 'loading', |
||||
canSave: true, |
||||
canDelete: true, |
||||
hasChanged: true, |
||||
version: 1, |
||||
}; |
||||
setup({ |
||||
folder: mockFolder, |
||||
saveFolder: mockSaveFolder, |
||||
}); |
||||
const saveButton = screen.getByRole('button', { name: 'Save' }); |
||||
await userEvent.click(saveButton); |
||||
expect(mockSaveFolder).toHaveBeenCalledWith(mockFolder); |
||||
}); |
||||
|
||||
it('should disable delete button when canDelete is false', () => { |
||||
setup({ |
||||
folder: { |
||||
id: 1, |
||||
uid: '1234', |
||||
title: 'loading', |
||||
canSave: true, |
||||
canDelete: false, |
||||
hasChanged: true, |
||||
version: 1, |
||||
}, |
||||
}); |
||||
const deleteButton = screen.getByRole('button', { name: 'Delete' }); |
||||
expect(deleteButton).toBeDisabled(); |
||||
}); |
||||
|
||||
it('should enable delete button when canDelete is true', () => { |
||||
setup({ |
||||
folder: { |
||||
id: 1, |
||||
uid: '1234', |
||||
title: 'loading', |
||||
canSave: true, |
||||
canDelete: true, |
||||
hasChanged: true, |
||||
version: 1, |
||||
}, |
||||
}); |
||||
const deleteButton = screen.getByRole('button', { name: 'Delete' }); |
||||
expect(deleteButton).not.toBeDisabled(); |
||||
}); |
||||
|
||||
it('should call the publish event when the deleteButton is clicked', async () => { |
||||
new ModalManager().init(); |
||||
const mockDeleteFolder = jest.fn(); |
||||
const mockFolder = { |
||||
id: 1, |
||||
uid: '1234', |
||||
title: 'loading', |
||||
canSave: true, |
||||
canDelete: true, |
||||
hasChanged: true, |
||||
version: 1, |
||||
}; |
||||
setup({ |
||||
folder: mockFolder, |
||||
deleteFolder: mockDeleteFolder, |
||||
}); |
||||
const deleteButton = screen.getByRole('button', { name: 'Delete' }); |
||||
await userEvent.click(deleteButton); |
||||
const deleteModal = screen.getByRole('dialog', { name: 'Delete' }); |
||||
expect(deleteModal).toBeInTheDocument(); |
||||
const deleteButtonModal = within(deleteModal).getByRole('button', { name: 'Delete' }); |
||||
await userEvent.click(deleteButtonModal); |
||||
expect(mockDeleteFolder).toHaveBeenCalledWith(mockFolder.uid); |
||||
}); |
||||
}); |
||||
@ -1,119 +0,0 @@ |
||||
import React, { PureComponent } from 'react'; |
||||
import { connect, ConnectedProps } from 'react-redux'; |
||||
|
||||
import { Field, Form, Button, Input, InputControl } from '@grafana/ui'; |
||||
import appEvents from 'app/core/app_events'; |
||||
import { Page } from 'app/core/components/Page/Page'; |
||||
import { GrafanaRouteComponentProps } from 'app/core/navigation/types'; |
||||
import { getNavModel } from 'app/core/selectors/navModel'; |
||||
import { StoreState } from 'app/types'; |
||||
|
||||
import { ShowConfirmModalEvent } from '../../types/events'; |
||||
|
||||
import { deleteFolder, getFolderByUid, saveFolder } from './state/actions'; |
||||
import { getLoadingNav } from './state/navModel'; |
||||
import { setFolderTitle } from './state/reducers'; |
||||
|
||||
export interface OwnProps extends GrafanaRouteComponentProps<{ uid: string }> {} |
||||
|
||||
const mapStateToProps = (state: StoreState, props: OwnProps) => { |
||||
const uid = props.match.params.uid; |
||||
return { |
||||
pageNav: getNavModel(state.navIndex, `folder-settings-${uid}`, getLoadingNav(2)), |
||||
folderUid: uid, |
||||
folder: state.folder, |
||||
}; |
||||
}; |
||||
|
||||
const mapDispatchToProps = { |
||||
getFolderByUid, |
||||
saveFolder, |
||||
setFolderTitle, |
||||
deleteFolder, |
||||
}; |
||||
|
||||
const connector = connect(mapStateToProps, mapDispatchToProps); |
||||
|
||||
export type Props = OwnProps & ConnectedProps<typeof connector>; |
||||
|
||||
export interface State { |
||||
isLoading: boolean; |
||||
} |
||||
|
||||
export class FolderSettingsPage extends PureComponent<Props, State> { |
||||
constructor(props: Props) { |
||||
super(props); |
||||
this.state = { |
||||
isLoading: false, |
||||
}; |
||||
} |
||||
|
||||
componentDidMount() { |
||||
this.props.getFolderByUid(this.props.folderUid); |
||||
} |
||||
|
||||
onTitleChange = (evt: React.ChangeEvent<HTMLInputElement>) => { |
||||
this.props.setFolderTitle(evt.target.value); |
||||
}; |
||||
|
||||
onSave = () => { |
||||
this.setState({ isLoading: true }); |
||||
this.props.saveFolder(this.props.folder); |
||||
this.setState({ isLoading: false }); |
||||
}; |
||||
|
||||
onDelete = (evt: React.MouseEvent<HTMLButtonElement>) => { |
||||
evt.stopPropagation(); |
||||
evt.preventDefault(); |
||||
|
||||
const confirmationText = `Do you want to delete this folder and all its dashboards and alerts?`; |
||||
appEvents.publish( |
||||
new ShowConfirmModalEvent({ |
||||
title: 'Delete', |
||||
text: confirmationText, |
||||
icon: 'trash-alt', |
||||
yesText: 'Delete', |
||||
onConfirm: () => { |
||||
this.props.deleteFolder(this.props.folder.uid); |
||||
}, |
||||
}) |
||||
); |
||||
}; |
||||
|
||||
render() { |
||||
const { pageNav, folder } = this.props; |
||||
|
||||
return ( |
||||
<Page navId="dashboards/browse" pageNav={pageNav.main}> |
||||
<Page.Contents isLoading={this.state.isLoading}> |
||||
<h3 className="page-sub-heading">Folder settings</h3> |
||||
<Form name="folderSettingsForm" onSubmit={this.onSave}> |
||||
{({ control, errors }) => ( |
||||
<> |
||||
<InputControl |
||||
render={({ field: { ref, ...field } }) => ( |
||||
<Field label="Title" invalid={!!errors.title} error={errors.title?.message}> |
||||
<Input {...field} autoFocus onChange={this.onTitleChange} value={folder.title} /> |
||||
</Field> |
||||
)} |
||||
control={control} |
||||
name="title" |
||||
/> |
||||
<div className="gf-form-button-row"> |
||||
<Button type="submit" disabled={!folder.canSave || !folder.hasChanged}> |
||||
Save |
||||
</Button> |
||||
<Button variant="destructive" onClick={this.onDelete} disabled={!folder.canDelete}> |
||||
Delete |
||||
</Button> |
||||
</div> |
||||
</> |
||||
)} |
||||
</Form> |
||||
</Page.Contents> |
||||
</Page> |
||||
); |
||||
} |
||||
} |
||||
|
||||
export default connector(FolderSettingsPage); |
||||
@ -1,86 +0,0 @@ |
||||
import React from 'react'; |
||||
import { connect, ConnectedProps } from 'react-redux'; |
||||
|
||||
import { NavModelItem } from '@grafana/data'; |
||||
import { config } from '@grafana/runtime'; |
||||
import { Button, Input, Form, Field, HorizontalGroup, LinkButton } from '@grafana/ui'; |
||||
import { Page } from 'app/core/components/Page/Page'; |
||||
import { useQueryParams } from 'app/core/hooks/useQueryParams'; |
||||
|
||||
import { validationSrv } from '../../manage-dashboards/services/ValidationSrv'; |
||||
import { createNewFolder } from '../state/actions'; |
||||
|
||||
const mapDispatchToProps = { |
||||
createNewFolder, |
||||
}; |
||||
|
||||
const connector = connect(null, mapDispatchToProps); |
||||
|
||||
interface OwnProps {} |
||||
|
||||
interface FormModel { |
||||
folderName: string; |
||||
} |
||||
|
||||
type Props = OwnProps & ConnectedProps<typeof connector>; |
||||
|
||||
const initialFormModel: FormModel = { folderName: '' }; |
||||
|
||||
const pageNav: NavModelItem = { |
||||
text: 'Create a new folder', |
||||
subTitle: 'Folders provide a way to group dashboards and alert rules.', |
||||
}; |
||||
|
||||
function NewDashboardsFolder({ createNewFolder }: Props) { |
||||
const [queryParams] = useQueryParams(); |
||||
const onSubmit = (formData: FormModel) => { |
||||
const folderUid = typeof queryParams['folderUid'] === 'string' ? queryParams['folderUid'] : undefined; |
||||
|
||||
createNewFolder(formData.folderName, folderUid); |
||||
}; |
||||
|
||||
const validateFolderName = (folderName: string) => { |
||||
return validationSrv |
||||
.validateNewFolderName(folderName) |
||||
.then(() => { |
||||
return true; |
||||
}) |
||||
.catch((e) => { |
||||
return e.message; |
||||
}); |
||||
}; |
||||
|
||||
return ( |
||||
<Page navId="dashboards/browse" pageNav={pageNav}> |
||||
<Page.Contents> |
||||
<Form defaultValues={initialFormModel} onSubmit={onSubmit}> |
||||
{({ register, errors }) => ( |
||||
<> |
||||
<Field |
||||
label="Folder name" |
||||
invalid={!!errors.folderName} |
||||
error={errors.folderName && errors.folderName.message} |
||||
> |
||||
<Input |
||||
id="folder-name-input" |
||||
{...register('folderName', { |
||||
required: 'Folder name is required.', |
||||
validate: async (v) => await validateFolderName(v), |
||||
})} |
||||
/> |
||||
</Field> |
||||
<HorizontalGroup> |
||||
<Button type="submit">Create</Button> |
||||
<LinkButton variant="secondary" href={`${config.appSubUrl}/dashboards`}> |
||||
Cancel |
||||
</LinkButton> |
||||
</HorizontalGroup> |
||||
</> |
||||
)} |
||||
</Form> |
||||
</Page.Contents> |
||||
</Page> |
||||
); |
||||
} |
||||
|
||||
export default connector(NewDashboardsFolder); |
||||
@ -1,97 +0,0 @@ |
||||
import React, { useMemo, useState } from 'react'; |
||||
|
||||
import { config, reportInteraction } from '@grafana/runtime'; |
||||
import { Menu, Dropdown, Button, Icon, HorizontalGroup } from '@grafana/ui'; |
||||
import { FolderDTO } from 'app/types'; |
||||
|
||||
import { MoveToFolderModal } from '../page/components/MoveToFolderModal'; |
||||
import { getImportPhrase, getNewDashboardPhrase, getNewFolderPhrase, getNewPhrase } from '../tempI18nPhrases'; |
||||
|
||||
export interface Props { |
||||
folder: FolderDTO | undefined; |
||||
canCreateFolders?: boolean; |
||||
canCreateDashboards?: boolean; |
||||
} |
||||
|
||||
export const DashboardActions = ({ folder, canCreateFolders = false, canCreateDashboards = false }: Props) => { |
||||
const [isMoveModalOpen, setIsMoveModalOpen] = useState(false); |
||||
const canMove = config.featureToggles.nestedFolders && (folder?.canSave ?? false); |
||||
|
||||
const moveSelection = useMemo( |
||||
() => new Map<string, Set<string>>([['folder', new Set(folder?.uid ? [folder.uid] : [])]]), |
||||
[folder] |
||||
); |
||||
|
||||
const actionUrl = (type: string) => { |
||||
let url = `dashboard/${type}`; |
||||
const isTypeNewFolder = type === 'new_folder'; |
||||
|
||||
if (isTypeNewFolder) { |
||||
url = `dashboards/folder/new/`; |
||||
} |
||||
|
||||
if (folder?.uid) { |
||||
url += `?folderUid=${folder.uid}`; |
||||
} |
||||
|
||||
return url; |
||||
}; |
||||
|
||||
const MenuActions = () => { |
||||
return ( |
||||
<Menu> |
||||
{canCreateDashboards && ( |
||||
<Menu.Item |
||||
url={actionUrl('new')} |
||||
label={getNewDashboardPhrase()} |
||||
onClick={() => |
||||
reportInteraction('grafana_menu_item_clicked', { url: actionUrl('new'), from: '/dashboards' }) |
||||
} |
||||
/> |
||||
)} |
||||
{canCreateFolders && (config.featureToggles.nestedFolders || !folder?.uid) && ( |
||||
<Menu.Item |
||||
url={actionUrl('new_folder')} |
||||
label={getNewFolderPhrase()} |
||||
onClick={() => |
||||
reportInteraction('grafana_menu_item_clicked', { url: actionUrl('new_folder'), from: '/dashboards' }) |
||||
} |
||||
/> |
||||
)} |
||||
{canCreateDashboards && ( |
||||
<Menu.Item |
||||
url={actionUrl('import')} |
||||
label={getImportPhrase()} |
||||
onClick={() => |
||||
reportInteraction('grafana_menu_item_clicked', { url: actionUrl('import'), from: '/dashboards' }) |
||||
} |
||||
/> |
||||
)} |
||||
</Menu> |
||||
); |
||||
}; |
||||
|
||||
return ( |
||||
<> |
||||
<div> |
||||
<HorizontalGroup> |
||||
{canMove && ( |
||||
<Button onClick={() => setIsMoveModalOpen(true)} icon="exchange-alt" variant="secondary"> |
||||
Move |
||||
</Button> |
||||
)} |
||||
<Dropdown overlay={MenuActions} placement="bottom-start"> |
||||
<Button variant="primary"> |
||||
{getNewPhrase()} |
||||
<Icon name="angle-down" /> |
||||
</Button> |
||||
</Dropdown> |
||||
</HorizontalGroup> |
||||
</div> |
||||
|
||||
{canMove && isMoveModalOpen && ( |
||||
<MoveToFolderModal onMoveItems={() => {}} results={moveSelection} onDismiss={() => setIsMoveModalOpen(false)} /> |
||||
)} |
||||
</> |
||||
); |
||||
}; |
||||
@ -1,71 +0,0 @@ |
||||
import { css } from '@emotion/css'; |
||||
import React, { memo } from 'react'; |
||||
import { useAsync } from 'react-use'; |
||||
|
||||
import { locationUtil, NavModelItem } from '@grafana/data'; |
||||
import { locationService } from '@grafana/runtime'; |
||||
import { Page } from 'app/core/components/Page/Page'; |
||||
import { GrafanaRouteComponentProps } from 'app/core/navigation/types'; |
||||
import NewBrowseDashboardsPage from 'app/features/browse-dashboards/BrowseDashboardsPage'; |
||||
import { newBrowseDashboardsEnabled } from 'app/features/browse-dashboards/featureFlag'; |
||||
import { FolderDTO } from 'app/types'; |
||||
|
||||
import { loadFolderPage } from '../loaders'; |
||||
|
||||
import ManageDashboardsNew from './ManageDashboardsNew'; |
||||
|
||||
export interface DashboardListPageRouteParams { |
||||
uid?: string; |
||||
slug?: string; |
||||
} |
||||
|
||||
interface Props extends GrafanaRouteComponentProps<DashboardListPageRouteParams> {} |
||||
|
||||
export const DashboardListPageFeatureToggle = memo((props: Props) => { |
||||
if (newBrowseDashboardsEnabled()) { |
||||
return <NewBrowseDashboardsPage {...props} />; |
||||
} |
||||
|
||||
return <DashboardListPage {...props} />; |
||||
}); |
||||
DashboardListPageFeatureToggle.displayName = 'DashboardListPageFeatureToggle'; |
||||
|
||||
const DashboardListPage = memo(({ match, location }: Props) => { |
||||
const { loading, value } = useAsync<() => Promise<{ folder?: FolderDTO; pageNav?: NavModelItem }>>(() => { |
||||
const uid = match.params.uid; |
||||
const url = location.pathname; |
||||
|
||||
if (!uid || !url.startsWith('/dashboards')) { |
||||
return Promise.resolve({}); |
||||
} |
||||
|
||||
return loadFolderPage(uid!).then(({ folder, folderNav }) => { |
||||
const path = locationUtil.stripBaseFromUrl(folder.url); |
||||
|
||||
if (path !== location.pathname) { |
||||
locationService.replace(path); |
||||
} |
||||
|
||||
return { folder, pageNav: folderNav }; |
||||
}); |
||||
}, [match.params.uid]); |
||||
|
||||
return ( |
||||
<Page navId="dashboards/browse" pageNav={value?.pageNav}> |
||||
<Page.Contents |
||||
isLoading={loading} |
||||
className={css` |
||||
display: flex; |
||||
flex-direction: column; |
||||
height: 100%; |
||||
`}
|
||||
> |
||||
<ManageDashboardsNew folder={value?.folder} /> |
||||
</Page.Contents> |
||||
</Page> |
||||
); |
||||
}); |
||||
|
||||
DashboardListPage.displayName = 'DashboardListPage'; |
||||
|
||||
export default DashboardListPageFeatureToggle; |
||||
@ -1,49 +0,0 @@ |
||||
import { render, screen, waitFor } from '@testing-library/react'; |
||||
import React from 'react'; |
||||
|
||||
import { contextSrv } from 'app/core/services/context_srv'; |
||||
import { FolderDTO } from 'app/types'; |
||||
|
||||
import ManageDashboardsNew from './ManageDashboardsNew'; |
||||
|
||||
jest.mock('app/core/services/context_srv', () => { |
||||
const originMock = jest.requireActual('app/core/services/context_srv'); |
||||
|
||||
return { |
||||
...originMock, |
||||
contextSrv: { |
||||
...originMock.context_srv, |
||||
user: {}, |
||||
hasPermission: jest.fn(() => false), |
||||
}, |
||||
}; |
||||
}); |
||||
|
||||
const setup = async (options?: { folder?: FolderDTO }) => { |
||||
const { folder = {} as FolderDTO } = options || {}; |
||||
|
||||
const { rerender } = await waitFor(() => render(<ManageDashboardsNew folder={folder} />)); |
||||
|
||||
return { rerender }; |
||||
}; |
||||
|
||||
jest.spyOn(console, 'error').mockImplementation(); |
||||
|
||||
describe('ManageDashboards', () => { |
||||
beforeEach(() => { |
||||
(contextSrv.hasPermission as jest.Mock).mockClear(); |
||||
}); |
||||
|
||||
it("should hide and show dashboard actions based on user's permissions", async () => { |
||||
(contextSrv.hasPermission as jest.Mock).mockReturnValue(false); |
||||
|
||||
const { rerender } = await setup(); |
||||
|
||||
expect(screen.queryByRole('button', { name: /new/i })).not.toBeInTheDocument(); |
||||
|
||||
(contextSrv.hasPermission as jest.Mock).mockReturnValue(true); |
||||
await waitFor(() => rerender(<ManageDashboardsNew folder={{ canEdit: true } as FolderDTO} />)); |
||||
|
||||
expect(screen.getByRole('button', { name: /new/i })).toBeInTheDocument(); |
||||
}); |
||||
}); |
||||
@ -1,109 +0,0 @@ |
||||
import { css, cx } from '@emotion/css'; |
||||
import React, { useEffect } from 'react'; |
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data'; |
||||
import { useStyles2, FilterInput } from '@grafana/ui'; |
||||
import { contextSrv } from 'app/core/services/context_srv'; |
||||
import { FolderDTO, AccessControlAction } from 'app/types'; |
||||
|
||||
import { useKeyNavigationListener } from '../hooks/useSearchKeyboardSelection'; |
||||
import { SearchView } from '../page/components/SearchView'; |
||||
import { getSearchStateManager } from '../state/SearchStateManager'; |
||||
import { getSearchPlaceholder } from '../tempI18nPhrases'; |
||||
|
||||
import { DashboardActions } from './DashboardActions'; |
||||
|
||||
export interface Props { |
||||
folder?: FolderDTO; |
||||
} |
||||
|
||||
export const ManageDashboardsNew = React.memo(({ folder }: Props) => { |
||||
const styles = useStyles2(getStyles); |
||||
// since we don't use "query" from use search... it is not actually loaded from the URL!
|
||||
const stateManager = getSearchStateManager(); |
||||
const state = stateManager.useState(); |
||||
const { onKeyDown, keyboardEvents } = useKeyNavigationListener(); |
||||
|
||||
// TODO: we need to refactor DashboardActions to use folder.uid instead
|
||||
|
||||
const folderUid = folder?.uid; |
||||
const canSave = folder?.canSave; |
||||
const { isEditor } = contextSrv; |
||||
const hasEditPermissionInFolders = folder ? canSave : contextSrv.hasEditPermissionInFolders; |
||||
const canCreateFolders = contextSrv.hasPermission(AccessControlAction.FoldersCreate); |
||||
const canCreateDashboards = folderUid |
||||
? contextSrv.hasPermissionInMetadata(AccessControlAction.DashboardsCreate, folder) |
||||
: contextSrv.hasPermission(AccessControlAction.DashboardsCreate); |
||||
const viewActions = (folder === undefined && canCreateFolders) || canCreateDashboards; |
||||
|
||||
useEffect(() => stateManager.initStateFromUrl(folder?.uid), [folder?.uid, stateManager]); |
||||
|
||||
return ( |
||||
<> |
||||
<div className={cx(styles.actionBar, 'page-action-bar')}> |
||||
<div className={cx(styles.inputWrapper, 'gf-form gf-form--grow m-r-2')}> |
||||
<FilterInput |
||||
value={state.query ?? ''} |
||||
onChange={(e) => stateManager.onQueryChange(e)} |
||||
onKeyDown={onKeyDown} |
||||
// eslint-disable-next-line jsx-a11y/no-autofocus
|
||||
autoFocus |
||||
spellCheck={false} |
||||
placeholder={getSearchPlaceholder(state.includePanels)} |
||||
escapeRegex={false} |
||||
className={styles.searchInput} |
||||
/> |
||||
</div> |
||||
{viewActions && ( |
||||
<DashboardActions |
||||
folder={folder} |
||||
canCreateFolders={canCreateFolders} |
||||
canCreateDashboards={canCreateDashboards} |
||||
/> |
||||
)} |
||||
</div> |
||||
|
||||
<SearchView |
||||
showManage={Boolean(isEditor || hasEditPermissionInFolders || canSave)} |
||||
folderDTO={folder} |
||||
hidePseudoFolders={true} |
||||
keyboardEvents={keyboardEvents} |
||||
/> |
||||
</> |
||||
); |
||||
}); |
||||
|
||||
ManageDashboardsNew.displayName = 'ManageDashboardsNew'; |
||||
|
||||
export default ManageDashboardsNew; |
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({ |
||||
actionBar: css` |
||||
${theme.breakpoints.down('sm')} { |
||||
flex-wrap: wrap; |
||||
} |
||||
`,
|
||||
inputWrapper: css` |
||||
${theme.breakpoints.down('sm')} { |
||||
margin-right: 0 !important; |
||||
} |
||||
`,
|
||||
searchInput: css` |
||||
margin-bottom: 6px; |
||||
min-height: ${theme.spacing(4)}; |
||||
`,
|
||||
unsupported: css` |
||||
padding: 10px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
height: 100%; |
||||
font-size: 18px; |
||||
`,
|
||||
noResults: css` |
||||
padding: ${theme.v1.spacing.md}; |
||||
background: ${theme.v1.colors.bg2}; |
||||
font-style: italic; |
||||
margin-top: ${theme.v1.spacing.md}; |
||||
`,
|
||||
}); |
||||
@ -1,262 +0,0 @@ |
||||
import { css } from '@emotion/css'; |
||||
import { Placement, Rect } from '@popperjs/core'; |
||||
import React, { useCallback, useRef, useState } from 'react'; |
||||
import SVG from 'react-inlinesvg'; |
||||
import { usePopper } from 'react-popper'; |
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data'; |
||||
import { selectors } from '@grafana/e2e-selectors'; |
||||
import { Icon, Portal, TagList, useTheme2 } from '@grafana/ui'; |
||||
import { backendSrv } from 'app/core/services/backend_srv'; |
||||
|
||||
import { DashboardViewItem, OnToggleChecked } from '../types'; |
||||
|
||||
import { SearchCardExpanded } from './SearchCardExpanded'; |
||||
import { SearchCheckbox } from './SearchCheckbox'; |
||||
|
||||
const DELAY_BEFORE_EXPANDING = 500; |
||||
|
||||
export interface Props { |
||||
editable?: boolean; |
||||
item: DashboardViewItem; |
||||
isSelected?: boolean; |
||||
onTagSelected?: (name: string) => any; |
||||
onToggleChecked?: OnToggleChecked; |
||||
onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void; |
||||
} |
||||
|
||||
export function getThumbnailURL(uid: string, isLight?: boolean) { |
||||
return `/api/dashboards/uid/${uid}/img/thumb/${isLight ? 'light' : 'dark'}`; |
||||
} |
||||
|
||||
export function SearchCard({ editable, item, isSelected, onTagSelected, onToggleChecked, onClick }: Props) { |
||||
const [hasImage, setHasImage] = useState(true); |
||||
const [lastUpdated, setLastUpdated] = useState<string | null>(null); |
||||
const [showExpandedView, setShowExpandedView] = useState(false); |
||||
const timeout = useRef<number | null>(null); |
||||
|
||||
// Popper specific logic
|
||||
const offsetCallback = useCallback( |
||||
({ placement, reference, popper }: { placement: Placement; reference: Rect; popper: Rect }) => { |
||||
let result: [number, number] = [0, 0]; |
||||
if (placement === 'bottom' || placement === 'top') { |
||||
result = [0, -(reference.height + popper.height) / 2]; |
||||
} else if (placement === 'left' || placement === 'right') { |
||||
result = [-(reference.width + popper.width) / 2, 0]; |
||||
} |
||||
return result; |
||||
}, |
||||
[] |
||||
); |
||||
const [markerElement, setMarkerElement] = React.useState<HTMLDivElement | null>(null); |
||||
const [popperElement, setPopperElement] = React.useState<HTMLDivElement | null>(null); |
||||
const { styles: popperStyles, attributes } = usePopper(markerElement, popperElement, { |
||||
modifiers: [ |
||||
{ |
||||
name: 'offset', |
||||
options: { |
||||
offset: offsetCallback, |
||||
}, |
||||
}, |
||||
], |
||||
}); |
||||
|
||||
const theme = useTheme2(); |
||||
const imageSrc = getThumbnailURL(item.uid!, theme.isLight); |
||||
const styles = getStyles( |
||||
theme, |
||||
markerElement?.getBoundingClientRect().width, |
||||
popperElement?.getBoundingClientRect().width |
||||
); |
||||
|
||||
const onShowExpandedView = async () => { |
||||
setShowExpandedView(true); |
||||
if (item.uid && !lastUpdated) { |
||||
const dashboard = await backendSrv.getDashboardByUid(item.uid); |
||||
const { updated } = dashboard.meta; |
||||
if (updated) { |
||||
setLastUpdated(new Date(updated).toLocaleString()); |
||||
} else { |
||||
setLastUpdated(null); |
||||
} |
||||
} |
||||
}; |
||||
|
||||
const onMouseEnter = () => { |
||||
timeout.current = window.setTimeout(onShowExpandedView, DELAY_BEFORE_EXPANDING); |
||||
}; |
||||
|
||||
const onMouseMove = () => { |
||||
if (timeout.current) { |
||||
window.clearTimeout(timeout.current); |
||||
} |
||||
timeout.current = window.setTimeout(onShowExpandedView, DELAY_BEFORE_EXPANDING); |
||||
}; |
||||
|
||||
const onMouseLeave = () => { |
||||
if (timeout.current) { |
||||
window.clearTimeout(timeout.current); |
||||
} |
||||
setShowExpandedView(false); |
||||
}; |
||||
|
||||
const onCheckboxClick = (ev: React.MouseEvent) => { |
||||
ev.stopPropagation(); |
||||
ev.preventDefault(); |
||||
|
||||
onToggleChecked?.(item); |
||||
}; |
||||
|
||||
const onTagClick = (tag: string, ev: React.MouseEvent) => { |
||||
ev.stopPropagation(); |
||||
ev.preventDefault(); |
||||
|
||||
onTagSelected?.(tag); |
||||
}; |
||||
|
||||
return ( |
||||
<a |
||||
data-testid={selectors.components.Search.dashboardCard(item.title)} |
||||
className={styles.card} |
||||
key={item.uid} |
||||
href={item.url} |
||||
ref={(ref) => setMarkerElement(ref as unknown as HTMLDivElement)} |
||||
onMouseEnter={onMouseEnter} |
||||
onMouseLeave={onMouseLeave} |
||||
onMouseMove={onMouseMove} |
||||
onClick={onClick} |
||||
> |
||||
<div className={styles.imageContainer}> |
||||
<SearchCheckbox |
||||
className={styles.checkbox} |
||||
aria-label={`Select dashboard ${item.title}`} |
||||
editable={editable} |
||||
checked={isSelected} |
||||
onClick={onCheckboxClick} |
||||
/> |
||||
{hasImage ? ( |
||||
<img |
||||
loading="lazy" |
||||
className={styles.image} |
||||
src={imageSrc} |
||||
alt="Dashboard preview" |
||||
onError={() => setHasImage(false)} |
||||
/> |
||||
) : ( |
||||
<div className={styles.imagePlaceholder}> |
||||
{item.icon ? ( |
||||
<SVG src={item.icon} width={36} height={36} title={item.title} /> |
||||
) : ( |
||||
<Icon name="apps" size="xl" /> |
||||
)} |
||||
</div> |
||||
)} |
||||
</div> |
||||
<div className={styles.info}> |
||||
<div className={styles.title}>{item.title}</div> |
||||
<TagList displayMax={1} tags={item.tags ?? []} onClick={onTagClick} /> |
||||
</div> |
||||
{showExpandedView && ( |
||||
<Portal className={styles.portal}> |
||||
<div ref={setPopperElement} style={popperStyles.popper} {...attributes.popper}> |
||||
<SearchCardExpanded |
||||
className={styles.expandedView} |
||||
imageHeight={240} |
||||
imageWidth={320} |
||||
item={item} |
||||
lastUpdated={lastUpdated} |
||||
onClick={onClick} |
||||
/> |
||||
</div> |
||||
</Portal> |
||||
)} |
||||
</a> |
||||
); |
||||
} |
||||
|
||||
const getStyles = (theme: GrafanaTheme2, markerWidth = 0, popperWidth = 0) => { |
||||
const IMAGE_HORIZONTAL_MARGIN = theme.spacing(4); |
||||
|
||||
return { |
||||
card: css` |
||||
background-color: ${theme.colors.background.secondary}; |
||||
border: 1px solid ${theme.colors.border.medium}; |
||||
border-radius: ${theme.shape.radius.default}; |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
&:hover { |
||||
background-color: ${theme.colors.emphasize(theme.colors.background.secondary, 0.03)}; |
||||
} |
||||
`,
|
||||
checkbox: css` |
||||
left: 0; |
||||
margin: ${theme.spacing(1)}; |
||||
position: absolute; |
||||
top: 0; |
||||
`,
|
||||
expandedView: css` |
||||
@keyframes expand { |
||||
0% { |
||||
transform: scale(${markerWidth / popperWidth}); |
||||
} |
||||
100% { |
||||
transform: scale(1); |
||||
} |
||||
} |
||||
|
||||
animation: expand ${theme.transitions.duration.shortest}ms ease-in-out 0s 1 normal; |
||||
background-color: ${theme.colors.emphasize(theme.colors.background.secondary, 0.03)}; |
||||
`,
|
||||
image: css` |
||||
aspect-ratio: 4 / 3; |
||||
box-shadow: ${theme.shadows.z1}; |
||||
margin: ${theme.spacing(1)} ${IMAGE_HORIZONTAL_MARGIN} 0; |
||||
width: calc(100% - (2 * ${IMAGE_HORIZONTAL_MARGIN})); |
||||
`,
|
||||
imageContainer: css` |
||||
flex: 1; |
||||
position: relative; |
||||
|
||||
&:after { |
||||
background: linear-gradient(180deg, rgba(196, 196, 196, 0) 0%, rgba(127, 127, 127, 0.25) 100%); |
||||
bottom: 0; |
||||
content: ''; |
||||
left: 0; |
||||
margin: ${theme.spacing(1)} ${IMAGE_HORIZONTAL_MARGIN} 0; |
||||
position: absolute; |
||||
right: 0; |
||||
top: 0; |
||||
} |
||||
`,
|
||||
imagePlaceholder: css` |
||||
align-items: center; |
||||
aspect-ratio: 4 / 3; |
||||
color: ${theme.colors.text.secondary}; |
||||
display: flex; |
||||
justify-content: center; |
||||
margin: ${theme.spacing(1)} ${IMAGE_HORIZONTAL_MARGIN} 0; |
||||
width: calc(100% - (2 * ${IMAGE_HORIZONTAL_MARGIN})); |
||||
`,
|
||||
info: css` |
||||
align-items: center; |
||||
background-color: ${theme.colors.background.canvas}; |
||||
border-bottom-left-radius: ${theme.shape.radius.default}; |
||||
border-bottom-right-radius: ${theme.shape.radius.default}; |
||||
display: flex; |
||||
height: ${theme.spacing(7)}; |
||||
gap: ${theme.spacing(1)}; |
||||
padding: 0 ${theme.spacing(2)}; |
||||
z-index: 1; |
||||
`,
|
||||
portal: css` |
||||
pointer-events: none; |
||||
`,
|
||||
title: css` |
||||
display: block; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
`,
|
||||
}; |
||||
}; |
||||
@ -1,165 +0,0 @@ |
||||
import { css } from '@emotion/css'; |
||||
import classNames from 'classnames'; |
||||
import React, { useState } from 'react'; |
||||
import SVG from 'react-inlinesvg'; |
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data'; |
||||
import { Icon, Spinner, TagList, useTheme2 } from '@grafana/ui'; |
||||
|
||||
import { DashboardViewItem } from '../types'; |
||||
|
||||
import { getThumbnailURL } from './SearchCard'; |
||||
|
||||
export interface Props { |
||||
className?: string; |
||||
imageHeight: number; |
||||
imageWidth: number; |
||||
item: DashboardViewItem; |
||||
lastUpdated?: string | null; |
||||
onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void; |
||||
} |
||||
|
||||
export function SearchCardExpanded({ className, imageHeight, imageWidth, item, lastUpdated, onClick }: Props) { |
||||
const theme = useTheme2(); |
||||
const [hasImage, setHasImage] = useState(true); |
||||
const imageSrc = getThumbnailURL(item.uid!, theme.isLight); |
||||
const styles = getStyles(theme, imageHeight, imageWidth); |
||||
|
||||
const folderTitle = item.parentTitle || 'General'; |
||||
|
||||
return ( |
||||
<a className={classNames(className, styles.card)} key={item.uid} href={item.url} onClick={onClick}> |
||||
<div className={styles.imageContainer}> |
||||
{hasImage ? ( |
||||
<img |
||||
loading="lazy" |
||||
alt="Dashboard preview" |
||||
className={styles.image} |
||||
src={imageSrc} |
||||
onLoad={() => setHasImage(true)} |
||||
onError={() => setHasImage(false)} |
||||
/> |
||||
) : ( |
||||
<div className={styles.imagePlaceholder}> |
||||
{item.icon ? ( |
||||
<SVG src={item.icon} width={36} height={36} title={item.title} /> |
||||
) : ( |
||||
<Icon name="apps" size="xl" /> |
||||
)} |
||||
</div> |
||||
)} |
||||
</div> |
||||
<div className={styles.info}> |
||||
<div className={styles.infoHeader}> |
||||
<div className={styles.titleContainer}> |
||||
<div>{item.title}</div> |
||||
<div className={styles.folder}> |
||||
<Icon name={'folder'} /> |
||||
{folderTitle} |
||||
</div> |
||||
</div> |
||||
{lastUpdated !== null && ( |
||||
<div className={styles.updateContainer}> |
||||
<div>Last updated</div> |
||||
{lastUpdated ? <div className={styles.update}>{lastUpdated}</div> : <Spinner />} |
||||
</div> |
||||
)} |
||||
</div> |
||||
<div> |
||||
<TagList className={styles.tagList} tags={item.tags ?? []} /> |
||||
</div> |
||||
</div> |
||||
</a> |
||||
); |
||||
} |
||||
|
||||
const getStyles = (theme: GrafanaTheme2, imageHeight: Props['imageHeight'], imageWidth: Props['imageWidth']) => { |
||||
const IMAGE_HORIZONTAL_MARGIN = theme.spacing(4); |
||||
|
||||
return { |
||||
card: css` |
||||
background-color: ${theme.colors.background.secondary}; |
||||
border: 1px solid ${theme.colors.border.medium}; |
||||
border-radius: 4px; |
||||
box-shadow: ${theme.shadows.z3}; |
||||
display: flex; |
||||
flex-direction: column; |
||||
height: 100%; |
||||
max-width: calc(${imageWidth}px + (${IMAGE_HORIZONTAL_MARGIN} * 2))}; |
||||
width: 100%; |
||||
`,
|
||||
folder: css` |
||||
align-items: center; |
||||
color: ${theme.colors.text.secondary}; |
||||
display: flex; |
||||
font-size: ${theme.typography.size.sm}; |
||||
gap: ${theme.spacing(0.5)}; |
||||
`,
|
||||
image: css` |
||||
box-shadow: ${theme.shadows.z2}; |
||||
height: ${imageHeight}px; |
||||
margin: ${theme.spacing(1)} calc(${IMAGE_HORIZONTAL_MARGIN} - 1px) 0; |
||||
width: ${imageWidth}px; |
||||
`,
|
||||
imageContainer: css` |
||||
flex: 1; |
||||
position: relative; |
||||
|
||||
&:after { |
||||
background: linear-gradient(180deg, rgba(196, 196, 196, 0) 0%, rgba(127, 127, 127, 0.25) 100%); |
||||
bottom: 0; |
||||
content: ''; |
||||
left: 0; |
||||
margin: ${theme.spacing(1)} calc(${IMAGE_HORIZONTAL_MARGIN} - 1px) 0; |
||||
position: absolute; |
||||
right: 0; |
||||
top: 0; |
||||
} |
||||
`,
|
||||
imagePlaceholder: css` |
||||
align-items: center; |
||||
color: ${theme.colors.text.secondary}; |
||||
display: flex; |
||||
height: ${imageHeight}px; |
||||
justify-content: center; |
||||
margin: ${theme.spacing(1)} ${IMAGE_HORIZONTAL_MARGIN} 0; |
||||
width: ${imageWidth}px; |
||||
`,
|
||||
info: css` |
||||
background-color: ${theme.colors.background.canvas}; |
||||
border-bottom-left-radius: 4px; |
||||
border-bottom-right-radius: 4px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
min-height: ${theme.spacing(7)}; |
||||
gap: ${theme.spacing(1)}; |
||||
padding: ${theme.spacing(1)} ${theme.spacing(2)}; |
||||
z-index: 1; |
||||
`,
|
||||
infoHeader: css` |
||||
display: flex; |
||||
gap: ${theme.spacing(1)}; |
||||
justify-content: space-between; |
||||
`,
|
||||
tagList: css` |
||||
justify-content: flex-start; |
||||
`,
|
||||
titleContainer: css` |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: ${theme.spacing(0.5)}; |
||||
`,
|
||||
updateContainer: css` |
||||
align-items: flex-end; |
||||
display: flex; |
||||
flex-direction: column; |
||||
flex-shrink: 0; |
||||
font-size: ${theme.typography.bodySmall.fontSize}; |
||||
gap: ${theme.spacing(0.5)}; |
||||
`,
|
||||
update: css` |
||||
color: ${theme.colors.text.secondary}; |
||||
text-align: right; |
||||
`,
|
||||
}; |
||||
}; |
||||
@ -1,21 +0,0 @@ |
||||
import React, { memo } from 'react'; |
||||
|
||||
import { Checkbox } from '@grafana/ui'; |
||||
|
||||
interface Props { |
||||
checked?: boolean; |
||||
onClick?: React.MouseEventHandler<HTMLInputElement>; |
||||
className?: string; |
||||
editable?: boolean; |
||||
'aria-label'?: string; |
||||
} |
||||
|
||||
export const SearchCheckbox = memo( |
||||
({ onClick, className, checked = false, editable = false, 'aria-label': ariaLabel }: Props) => { |
||||
return editable ? ( |
||||
<Checkbox onClick={onClick} className={className} value={checked} aria-label={ariaLabel} /> |
||||
) : null; |
||||
} |
||||
); |
||||
|
||||
SearchCheckbox.displayName = 'SearchCheckbox'; |
||||
@ -1,68 +0,0 @@ |
||||
import { fireEvent, render, screen } from '@testing-library/react'; |
||||
import React from 'react'; |
||||
|
||||
import { selectors } from '@grafana/e2e-selectors'; |
||||
|
||||
import { DashboardViewItem } from '../types'; |
||||
|
||||
import { Props, SearchItem } from './SearchItem'; |
||||
|
||||
beforeEach(() => { |
||||
jest.clearAllMocks(); |
||||
}); |
||||
|
||||
const data: DashboardViewItem = { |
||||
kind: 'dashboard' as const, |
||||
uid: 'lBdLINUWk', |
||||
title: 'Test 1', |
||||
url: '/d/lBdLINUWk/test1', |
||||
tags: ['Tag1', 'Tag2'], |
||||
}; |
||||
|
||||
const setup = (propOverrides?: Partial<Props>) => { |
||||
const props: Props = { |
||||
item: data, |
||||
onTagSelected: jest.fn(), |
||||
editable: false, |
||||
}; |
||||
|
||||
Object.assign(props, propOverrides); |
||||
|
||||
render(<SearchItem {...props} />); |
||||
}; |
||||
|
||||
describe('SearchItem', () => { |
||||
it('should render the item', () => { |
||||
setup(); |
||||
expect(screen.getAllByTestId(selectors.components.Search.dashboardItem('Test 1'))).toHaveLength(1); |
||||
expect(screen.getAllByText('Test 1')).toHaveLength(1); |
||||
}); |
||||
|
||||
it('should toggle items when checked', () => { |
||||
const mockedOnToggleChecked = jest.fn(); |
||||
setup({ editable: true, onToggleChecked: mockedOnToggleChecked }); |
||||
const checkbox = screen.getByRole('checkbox'); |
||||
expect(checkbox).not.toBeChecked(); |
||||
fireEvent.click(checkbox); |
||||
expect(mockedOnToggleChecked).toHaveBeenCalledTimes(1); |
||||
expect(mockedOnToggleChecked).toHaveBeenCalledWith(data); |
||||
}); |
||||
|
||||
it('should mark items as checked', () => { |
||||
setup({ editable: true, isSelected: true }); |
||||
expect(screen.getByRole('checkbox')).toBeChecked(); |
||||
}); |
||||
|
||||
it("should render item's tags", () => { |
||||
setup(); |
||||
expect(screen.getAllByText(/tag/i)).toHaveLength(2); |
||||
}); |
||||
|
||||
it('should select the tag on tag click', () => { |
||||
const mockOnTagSelected = jest.fn(); |
||||
setup({ onTagSelected: mockOnTagSelected }); |
||||
fireEvent.click(screen.getByText('Tag1')); |
||||
expect(mockOnTagSelected).toHaveBeenCalledTimes(1); |
||||
expect(mockOnTagSelected).toHaveBeenCalledWith('Tag1'); |
||||
}); |
||||
}); |
||||
@ -1,141 +0,0 @@ |
||||
import { css } from '@emotion/css'; |
||||
import React, { useCallback } from 'react'; |
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data'; |
||||
import { selectors as e2eSelectors } from '@grafana/e2e-selectors'; |
||||
import { config } from '@grafana/runtime'; |
||||
import { Card, Icon, IconName, TagList, useStyles2 } from '@grafana/ui'; |
||||
import { t } from 'app/core/internationalization'; |
||||
|
||||
import { SEARCH_ITEM_HEIGHT } from '../constants'; |
||||
import { getIconForKind } from '../service/utils'; |
||||
import { DashboardViewItem, OnToggleChecked } from '../types'; |
||||
|
||||
import { SearchCheckbox } from './SearchCheckbox'; |
||||
|
||||
export interface Props { |
||||
item: DashboardViewItem; |
||||
isSelected?: boolean; |
||||
editable?: boolean; |
||||
onTagSelected: (name: string) => any; |
||||
onToggleChecked?: OnToggleChecked; |
||||
onClickItem?: (event: React.MouseEvent<HTMLElement>) => void; |
||||
} |
||||
|
||||
const selectors = e2eSelectors.components.Search; |
||||
|
||||
const getIconFromMeta = (meta = ''): IconName => { |
||||
const metaIconMap = new Map<string, IconName>([ |
||||
['errors', 'info-circle'], |
||||
['views', 'eye'], |
||||
]); |
||||
|
||||
return metaIconMap.has(meta) ? metaIconMap.get(meta)! : 'sort-amount-down'; |
||||
}; |
||||
|
||||
/** @deprecated */ |
||||
export const SearchItem = ({ item, isSelected, editable, onToggleChecked, onTagSelected, onClickItem }: Props) => { |
||||
const styles = useStyles2(getStyles); |
||||
const tagSelected = useCallback( |
||||
(tag: string, event: React.MouseEvent<HTMLElement>) => { |
||||
event.stopPropagation(); |
||||
event.preventDefault(); |
||||
onTagSelected(tag); |
||||
}, |
||||
[onTagSelected] |
||||
); |
||||
|
||||
const handleCheckboxClick = useCallback( |
||||
(ev: React.MouseEvent) => { |
||||
ev.stopPropagation(); |
||||
|
||||
if (onToggleChecked) { |
||||
onToggleChecked(item); |
||||
} |
||||
}, |
||||
[item, onToggleChecked] |
||||
); |
||||
|
||||
const description = config.featureToggles.nestedFolders ? ( |
||||
<> |
||||
<Icon name={getIconForKind(item.kind)} aria-hidden /> {kindName(item.kind)} |
||||
</> |
||||
) : ( |
||||
<> |
||||
<Icon name={getIconForKind(item.parentKind ?? 'folder')} aria-hidden /> {item.parentTitle || 'General'} |
||||
</> |
||||
); |
||||
|
||||
return ( |
||||
<div className={styles.cardContainer}> |
||||
<SearchCheckbox |
||||
className={styles.checkbox} |
||||
aria-label="Select dashboard" |
||||
editable={editable} |
||||
checked={isSelected} |
||||
onClick={handleCheckboxClick} |
||||
/> |
||||
|
||||
<Card |
||||
className={styles.card} |
||||
data-testid={selectors.dashboardItem(item.title)} |
||||
href={item.url} |
||||
style={{ minHeight: SEARCH_ITEM_HEIGHT }} |
||||
onClick={onClickItem} |
||||
> |
||||
<Card.Heading>{item.title}</Card.Heading> |
||||
|
||||
<Card.Meta separator={''}> |
||||
<span className={styles.metaContainer}>{description}</span> |
||||
|
||||
{item.sortMetaName && ( |
||||
<span className={styles.metaContainer}> |
||||
<Icon name={getIconFromMeta(item.sortMetaName)} /> |
||||
{item.sortMeta} {item.sortMetaName} |
||||
</span> |
||||
)} |
||||
</Card.Meta> |
||||
<Card.Tags> |
||||
<TagList tags={item.tags ?? []} onClick={tagSelected} getAriaLabel={(tag) => `Filter by tag "${tag}"`} /> |
||||
</Card.Tags> |
||||
</Card> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
function kindName(kind: DashboardViewItem['kind']) { |
||||
switch (kind) { |
||||
case 'folder': |
||||
return t('search.result-kind.folder', 'Folder'); |
||||
case 'dashboard': |
||||
return t('search.result-kind.dashboard', 'Dashboard'); |
||||
case 'panel': |
||||
return t('search.result-kind.panel', 'Panel'); |
||||
} |
||||
} |
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => { |
||||
return { |
||||
cardContainer: css` |
||||
display: flex; |
||||
align-items: center; |
||||
margin-bottom: ${theme.spacing(0.75)}; |
||||
`,
|
||||
card: css` |
||||
padding: ${theme.spacing(1)} ${theme.spacing(2)}; |
||||
margin-bottom: 0; |
||||
`,
|
||||
checkbox: css({ |
||||
marginRight: theme.spacing(1), |
||||
}), |
||||
metaContainer: css` |
||||
display: flex; |
||||
align-items: center; |
||||
margin-right: ${theme.spacing(1)}; |
||||
|
||||
svg { |
||||
margin-right: ${theme.spacing(0.5)}; |
||||
} |
||||
`,
|
||||
}; |
||||
}; |
||||
@ -1 +0,0 @@ |
||||
export { SearchItem } from './components/SearchItem'; |
||||
@ -1,45 +0,0 @@ |
||||
import { render, screen } from '@testing-library/react'; |
||||
import React from 'react'; |
||||
|
||||
import { config } from 'app/core/config'; |
||||
|
||||
import { ConfirmDeleteModal } from './ConfirmDeleteModal'; |
||||
|
||||
describe('ConfirmModal', () => { |
||||
it('should render correct title, body, dismiss-, cancel- and delete-text', () => { |
||||
const selectedItems = new Map([['dashboard', new Set(['uid1', 'uid2'])]]); |
||||
|
||||
render(<ConfirmDeleteModal onDeleteItems={() => {}} results={selectedItems} onDismiss={() => {}} />); |
||||
|
||||
expect(screen.getByRole('heading', { name: 'Delete' })).toBeInTheDocument(); |
||||
expect(screen.getByText('Do you want to delete the 2 selected dashboards?')).toBeInTheDocument(); |
||||
expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument(); |
||||
expect(screen.getByRole('button', { name: 'Delete' })).toBeInTheDocument(); |
||||
|
||||
expect(screen.queryByPlaceholderText('Type "delete" to confirm')).not.toBeInTheDocument(); |
||||
}); |
||||
|
||||
describe('with nestedFolders feature flag', () => { |
||||
let originalNestedFoldersValue = config.featureToggles.nestedFolders; |
||||
|
||||
beforeAll(() => { |
||||
originalNestedFoldersValue = config.featureToggles.nestedFolders; |
||||
config.featureToggles.nestedFolders = true; |
||||
}); |
||||
|
||||
afterAll(() => { |
||||
config.featureToggles.nestedFolders = originalNestedFoldersValue; |
||||
}); |
||||
|
||||
it("should ask to type 'delete' to confirm when a folder is selected", async () => { |
||||
const selectedItems = new Map([ |
||||
['dashboard', new Set(['uid1', 'uid2'])], |
||||
['folder', new Set(['uid3'])], |
||||
]); |
||||
|
||||
render(<ConfirmDeleteModal onDeleteItems={() => {}} results={selectedItems} onDismiss={() => {}} />); |
||||
|
||||
expect(screen.getByPlaceholderText('Type "delete" to confirm')).toBeInTheDocument(); |
||||
}); |
||||
}); |
||||
}); |
||||
@ -1,71 +0,0 @@ |
||||
import { css } from '@emotion/css'; |
||||
import React from 'react'; |
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data'; |
||||
import { ConfirmModal, useStyles2 } from '@grafana/ui'; |
||||
import { config } from 'app/core/config'; |
||||
import { deleteFoldersAndDashboards } from 'app/features/manage-dashboards/state/actions'; |
||||
|
||||
import { OnMoveOrDeleleSelectedItems } from '../../types'; |
||||
|
||||
interface Props { |
||||
onDeleteItems: OnMoveOrDeleleSelectedItems; |
||||
results: Map<string, Set<string>>; |
||||
onDismiss: () => void; |
||||
} |
||||
|
||||
export const ConfirmDeleteModal = ({ results, onDeleteItems, onDismiss }: Props) => { |
||||
const styles = useStyles2(getStyles); |
||||
|
||||
const dashboards = Array.from(results.get('dashboard') ?? []); |
||||
const folders = Array.from(results.get('folder') ?? []); |
||||
|
||||
const folderCount = folders.length; |
||||
const dashCount = dashboards.length; |
||||
|
||||
let text = 'Do you want to delete the '; |
||||
let subtitle; |
||||
const dashEnding = dashCount === 1 ? '' : 's'; |
||||
const folderEnding = folderCount === 1 ? '' : 's'; |
||||
|
||||
if (folderCount > 0 && dashCount > 0) { |
||||
text += `selected folder${folderEnding} and dashboard${dashEnding}?\n`; |
||||
subtitle = `All dashboards and alerts of the selected folder${folderEnding} will also be deleted`; |
||||
} else if (folderCount > 0) { |
||||
text += `selected folder${folderEnding} and all ${folderCount === 1 ? 'its' : 'their'} dashboards and alerts?`; |
||||
} else { |
||||
text += `${dashCount} selected dashboard${dashEnding}?`; |
||||
} |
||||
|
||||
const deleteItems = () => { |
||||
deleteFoldersAndDashboards(folders, dashboards).then(() => { |
||||
onDeleteItems(); |
||||
onDismiss(); |
||||
}); |
||||
}; |
||||
|
||||
const requireDoubleConfirm = config.featureToggles.nestedFolders && folderCount > 0; |
||||
|
||||
return ( |
||||
<ConfirmModal |
||||
isOpen |
||||
title="Delete" |
||||
body={ |
||||
<> |
||||
{text} {subtitle && <div className={styles.subtitle}>{subtitle}</div>} |
||||
</> |
||||
} |
||||
confirmText="Delete" |
||||
confirmationText={requireDoubleConfirm ? 'delete' : undefined} |
||||
onConfirm={deleteItems} |
||||
onDismiss={onDismiss} |
||||
/> |
||||
); |
||||
}; |
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({ |
||||
subtitle: css` |
||||
font-size: ${theme.typography.fontSize}px; |
||||
padding-top: ${theme.spacing(2)}; |
||||
`,
|
||||
}); |
||||
@ -1,238 +0,0 @@ |
||||
import { render, screen, act } from '@testing-library/react'; |
||||
import userEvent from '@testing-library/user-event'; |
||||
import React from 'react'; |
||||
|
||||
import { DataFrame, DataFrameView, FieldType } from '@grafana/data'; |
||||
|
||||
import { DashboardQueryResult, getGrafanaSearcher, QueryResponse } from '../../service'; |
||||
import { DashboardSearchItemType, DashboardViewItem } from '../../types'; |
||||
|
||||
import { FolderSection } from './FolderSection'; |
||||
|
||||
describe('FolderSection', () => { |
||||
let grafanaSearcherSpy: jest.SpyInstance; |
||||
const mockOnTagSelected = jest.fn(); |
||||
const mockSelectionToggle = jest.fn(); |
||||
const mockSelection = jest.fn(); |
||||
const mockSection: DashboardViewItem = { |
||||
kind: 'folder', |
||||
uid: 'my-folder', |
||||
title: 'My folder', |
||||
}; |
||||
|
||||
// need to make sure we clear localStorage
|
||||
// otherwise tests can interfere with each other and the starting expanded state of the component
|
||||
afterEach(() => { |
||||
window.localStorage.clear(); |
||||
}); |
||||
|
||||
describe('when there are no results', () => { |
||||
const emptySearchData: DataFrame = { |
||||
fields: [ |
||||
{ name: 'kind', type: FieldType.string, config: {}, values: [] }, |
||||
{ name: 'name', type: FieldType.string, config: {}, values: [] }, |
||||
{ name: 'uid', type: FieldType.string, config: {}, values: [] }, |
||||
{ name: 'url', type: FieldType.string, config: {}, values: [] }, |
||||
{ name: 'tags', type: FieldType.other, config: {}, values: [] }, |
||||
{ name: 'location', type: FieldType.string, config: {}, values: [] }, |
||||
], |
||||
length: 0, |
||||
}; |
||||
|
||||
const mockSearchResult: QueryResponse = { |
||||
isItemLoaded: jest.fn(), |
||||
loadMoreItems: jest.fn(), |
||||
totalRows: emptySearchData.length, |
||||
view: new DataFrameView<DashboardQueryResult>(emptySearchData), |
||||
}; |
||||
|
||||
beforeAll(() => { |
||||
grafanaSearcherSpy = jest.spyOn(getGrafanaSearcher(), 'search').mockResolvedValue(mockSearchResult); |
||||
}); |
||||
|
||||
it('shows the folder title as the header', async () => { |
||||
render(<FolderSection section={mockSection} onTagSelected={mockOnTagSelected} />); |
||||
expect(await screen.findByRole('button', { name: mockSection.title })).toBeInTheDocument(); |
||||
}); |
||||
|
||||
describe('when renderStandaloneBody is set', () => { |
||||
it('shows a "No results found" message and does not show the folder title header', async () => { |
||||
render(<FolderSection renderStandaloneBody section={mockSection} onTagSelected={mockOnTagSelected} />); |
||||
expect(await screen.findByText('No results found')).toBeInTheDocument(); |
||||
expect(screen.queryByRole('button', { name: mockSection.title })).not.toBeInTheDocument(); |
||||
}); |
||||
|
||||
it('renders a loading spinner whilst waiting for the results', async () => { |
||||
// mock the query promise so we can resolve manually
|
||||
let promiseResolver: (arg0: QueryResponse) => void; |
||||
const promise = new Promise((resolve) => { |
||||
promiseResolver = resolve; |
||||
}); |
||||
grafanaSearcherSpy.mockImplementationOnce(() => promise); |
||||
|
||||
render(<FolderSection renderStandaloneBody section={mockSection} onTagSelected={mockOnTagSelected} />); |
||||
expect(await screen.findByTestId('Spinner')).toBeInTheDocument(); |
||||
|
||||
// resolve the promise
|
||||
await act(async () => { |
||||
promiseResolver(mockSearchResult); |
||||
}); |
||||
|
||||
expect(screen.queryByTestId('Spinner')).not.toBeInTheDocument(); |
||||
expect(await screen.findByText('No results found')).toBeInTheDocument(); |
||||
}); |
||||
}); |
||||
|
||||
it('shows a "No results found" message when expanding the folder', async () => { |
||||
render(<FolderSection section={mockSection} onTagSelected={mockOnTagSelected} />); |
||||
|
||||
await userEvent.click(await screen.findByRole('button', { name: mockSection.title })); |
||||
expect(getGrafanaSearcher().search).toHaveBeenCalled(); |
||||
expect(await screen.findByText('No results found')).toBeInTheDocument(); |
||||
}); |
||||
}); |
||||
|
||||
describe('when there are results', () => { |
||||
const searchData: DataFrame = { |
||||
fields: [ |
||||
{ name: 'kind', type: FieldType.string, config: {}, values: [DashboardSearchItemType.DashDB] }, |
||||
{ name: 'name', type: FieldType.string, config: {}, values: ['My dashboard 1'] }, |
||||
{ name: 'uid', type: FieldType.string, config: {}, values: ['my-dashboard-1'] }, |
||||
{ name: 'url', type: FieldType.string, config: {}, values: ['/my-dashboard-1'] }, |
||||
{ name: 'tags', type: FieldType.other, config: {}, values: [['foo', 'bar']] }, |
||||
{ name: 'location', type: FieldType.string, config: {}, values: ['my-folder-1'] }, |
||||
], |
||||
meta: { |
||||
custom: { |
||||
locationInfo: { |
||||
'my-folder-1': { |
||||
name: 'My folder 1', |
||||
kind: 'folder', |
||||
url: '/my-folder-1', |
||||
}, |
||||
}, |
||||
}, |
||||
}, |
||||
length: 1, |
||||
}; |
||||
|
||||
const mockSearchResult: QueryResponse = { |
||||
isItemLoaded: jest.fn(), |
||||
loadMoreItems: jest.fn(), |
||||
totalRows: searchData.length, |
||||
view: new DataFrameView<DashboardQueryResult>(searchData), |
||||
}; |
||||
|
||||
beforeAll(() => { |
||||
grafanaSearcherSpy = jest.spyOn(getGrafanaSearcher(), 'search').mockResolvedValue(mockSearchResult); |
||||
}); |
||||
|
||||
it('shows the folder title as the header', async () => { |
||||
render(<FolderSection section={mockSection} onTagSelected={mockOnTagSelected} />); |
||||
expect(await screen.findByRole('button', { name: mockSection.title })).toBeInTheDocument(); |
||||
}); |
||||
|
||||
describe('when renderStandaloneBody is set', () => { |
||||
it('shows the folder children and does not render the folder title', async () => { |
||||
render(<FolderSection renderStandaloneBody section={mockSection} onTagSelected={mockOnTagSelected} />); |
||||
expect(await screen.findByText('My dashboard 1')).toBeInTheDocument(); |
||||
expect(screen.queryByRole('button', { name: mockSection.title })).not.toBeInTheDocument(); |
||||
}); |
||||
|
||||
it('renders a loading spinner whilst waiting for the results', async () => { |
||||
// mock the query promise so we can resolve manually
|
||||
let promiseResolver: (arg0: QueryResponse) => void; |
||||
const promise = new Promise((resolve) => { |
||||
promiseResolver = resolve; |
||||
}); |
||||
grafanaSearcherSpy.mockImplementationOnce(() => promise); |
||||
|
||||
render(<FolderSection renderStandaloneBody section={mockSection} onTagSelected={mockOnTagSelected} />); |
||||
expect(await screen.findByTestId('Spinner')).toBeInTheDocument(); |
||||
|
||||
// resolve the promise
|
||||
await act(async () => { |
||||
promiseResolver(mockSearchResult); |
||||
}); |
||||
|
||||
expect(screen.queryByTestId('Spinner')).not.toBeInTheDocument(); |
||||
expect(await screen.findByText('My dashboard 1')).toBeInTheDocument(); |
||||
}); |
||||
}); |
||||
|
||||
it('shows the folder contents when expanding the folder', async () => { |
||||
render(<FolderSection section={mockSection} onTagSelected={mockOnTagSelected} />); |
||||
|
||||
await userEvent.click(await screen.findByRole('button', { name: mockSection.title })); |
||||
expect(getGrafanaSearcher().search).toHaveBeenCalled(); |
||||
expect(await screen.findByText('My dashboard 1')).toBeInTheDocument(); |
||||
}); |
||||
|
||||
describe('when clicking the checkbox', () => { |
||||
it('does not expand the section', async () => { |
||||
render( |
||||
<FolderSection |
||||
section={mockSection} |
||||
selection={mockSelection} |
||||
selectionToggle={mockSelectionToggle} |
||||
onTagSelected={mockOnTagSelected} |
||||
/> |
||||
); |
||||
|
||||
await userEvent.click(await screen.findByRole('checkbox', { name: 'Select folder' })); |
||||
expect(screen.queryByText('My dashboard 1')).not.toBeInTheDocument(); |
||||
}); |
||||
|
||||
it('selects only the folder if the folder is not expanded', async () => { |
||||
render( |
||||
<FolderSection |
||||
section={mockSection} |
||||
selection={mockSelection} |
||||
selectionToggle={mockSelectionToggle} |
||||
onTagSelected={mockOnTagSelected} |
||||
/> |
||||
); |
||||
|
||||
await userEvent.click(await screen.findByRole('checkbox', { name: 'Select folder' })); |
||||
expect(mockSelectionToggle).toHaveBeenCalledWith('folder', 'my-folder'); |
||||
expect(mockSelectionToggle).not.toHaveBeenCalledWith('dashboard', 'my-dashboard-1'); |
||||
}); |
||||
|
||||
it('selects the folder and all children when the folder is expanded', async () => { |
||||
render( |
||||
<FolderSection |
||||
section={mockSection} |
||||
selection={mockSelection} |
||||
selectionToggle={mockSelectionToggle} |
||||
onTagSelected={mockOnTagSelected} |
||||
/> |
||||
); |
||||
|
||||
await userEvent.click(await screen.findByRole('button', { name: mockSection.title })); |
||||
expect(getGrafanaSearcher().search).toHaveBeenCalled(); |
||||
|
||||
await userEvent.click(await screen.findByRole('checkbox', { name: 'Select folder' })); |
||||
expect(mockSelectionToggle).toHaveBeenCalledWith('folder', 'my-folder'); |
||||
expect(mockSelectionToggle).toHaveBeenCalledWith('dashboard', 'my-dashboard-1'); |
||||
}); |
||||
}); |
||||
|
||||
describe('when in a pseudo-folder (i.e. Starred/Recent)', () => { |
||||
const mockRecentSection: DashboardViewItem = { |
||||
kind: 'folder', |
||||
uid: '__recent', |
||||
title: 'Recent', |
||||
itemsUIDs: ['my-dashboard-1'], |
||||
}; |
||||
|
||||
it('shows the correct folder name next to the dashboard', async () => { |
||||
render(<FolderSection section={mockRecentSection} onTagSelected={mockOnTagSelected} />); |
||||
|
||||
await userEvent.click(await screen.findByRole('button', { name: mockRecentSection.title })); |
||||
expect(getGrafanaSearcher().search).toHaveBeenCalled(); |
||||
expect(await screen.findByText('My dashboard 1')).toBeInTheDocument(); |
||||
expect(await screen.findByText('My folder 1')).toBeInTheDocument(); |
||||
}); |
||||
}); |
||||
}); |
||||
}); |
||||
@ -1,258 +0,0 @@ |
||||
import { css } from '@emotion/css'; |
||||
import React, { useId, useState } from 'react'; |
||||
import { useAsync } from 'react-use'; |
||||
|
||||
import { GrafanaTheme2, toIconName } from '@grafana/data'; |
||||
import { selectors } from '@grafana/e2e-selectors'; |
||||
import { Card, Checkbox, CollapsableSection, Icon, Spinner, useStyles2 } from '@grafana/ui'; |
||||
import { config } from 'app/core/config'; |
||||
import { t } from 'app/core/internationalization'; |
||||
|
||||
import { SearchItem } from '../..'; |
||||
import { GENERAL_FOLDER_UID, SEARCH_EXPANDED_FOLDER_STORAGE_KEY } from '../../constants'; |
||||
import { getGrafanaSearcher } from '../../service'; |
||||
import { getFolderChildren } from '../../service/folders'; |
||||
import { queryResultToViewItem } from '../../service/utils'; |
||||
import { DashboardViewItem } from '../../types'; |
||||
import { SelectionChecker, SelectionToggle } from '../selection'; |
||||
|
||||
interface SectionHeaderProps { |
||||
selection?: SelectionChecker; |
||||
selectionToggle?: SelectionToggle; |
||||
onClickItem?: (e: React.MouseEvent<HTMLElement>) => void; |
||||
onTagSelected: (tag: string) => void; |
||||
section: DashboardViewItem; |
||||
renderStandaloneBody?: boolean; // render the body on its own
|
||||
tags?: string[]; |
||||
} |
||||
|
||||
async function getChildren(section: DashboardViewItem, tags: string[] | undefined): Promise<DashboardViewItem[]> { |
||||
if (config.featureToggles.nestedFolders) { |
||||
return getFolderChildren(section.uid, section.title); |
||||
} |
||||
|
||||
const query = section.itemsUIDs |
||||
? { |
||||
uid: section.itemsUIDs, |
||||
} |
||||
: { |
||||
query: '*', |
||||
kind: ['dashboard'], |
||||
location: section.uid, |
||||
sort: 'name_sort', |
||||
limit: 1000, // this component does not have infinite scroll, so we need to load everything upfront
|
||||
}; |
||||
|
||||
const raw = await getGrafanaSearcher().search({ ...query, tags }); |
||||
return raw.view.map((v) => queryResultToViewItem(v, raw.view)); |
||||
} |
||||
|
||||
export const FolderSection = ({ |
||||
section, |
||||
selectionToggle, |
||||
onClickItem, |
||||
onTagSelected, |
||||
selection, |
||||
renderStandaloneBody, |
||||
tags, |
||||
}: SectionHeaderProps) => { |
||||
const uid = section.uid; |
||||
const editable = selectionToggle != null; |
||||
|
||||
const styles = useStyles2(getSectionHeaderStyles, editable); |
||||
const [sectionExpanded, setSectionExpanded] = useState(() => { |
||||
const lastExpandedFolder = window.localStorage.getItem(SEARCH_EXPANDED_FOLDER_STORAGE_KEY); |
||||
return lastExpandedFolder === uid; |
||||
}); |
||||
|
||||
const results = useAsync(async () => { |
||||
if (!sectionExpanded && !renderStandaloneBody) { |
||||
return Promise.resolve([]); |
||||
} |
||||
|
||||
const childItems = getChildren(section, tags); |
||||
|
||||
return childItems; |
||||
}, [sectionExpanded, tags]); |
||||
|
||||
const onSectionExpand = () => { |
||||
const newExpandedValue = !sectionExpanded; |
||||
|
||||
if (newExpandedValue) { |
||||
// If we've just expanded the section, remember it to local storage
|
||||
window.localStorage.setItem(SEARCH_EXPANDED_FOLDER_STORAGE_KEY, uid); |
||||
} else { |
||||
// Else, when closing a section, remove it from local storage only if this folder was the most recently opened
|
||||
const lastExpandedFolder = window.localStorage.getItem(SEARCH_EXPANDED_FOLDER_STORAGE_KEY); |
||||
if (lastExpandedFolder === uid) { |
||||
window.localStorage.removeItem(SEARCH_EXPANDED_FOLDER_STORAGE_KEY); |
||||
} |
||||
} |
||||
|
||||
setSectionExpanded(newExpandedValue); |
||||
}; |
||||
|
||||
const onToggleFolder = (evt: React.FormEvent) => { |
||||
evt.preventDefault(); |
||||
evt.stopPropagation(); |
||||
if (selectionToggle && selection) { |
||||
const checked = !selection(section.kind, section.uid); |
||||
selectionToggle(section.kind, section.uid); |
||||
const sub = results.value ?? []; |
||||
for (const item of sub) { |
||||
if (selection(item.kind, item.uid!) !== checked) { |
||||
selectionToggle(item.kind, item.uid!); |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
|
||||
const id = useId(); |
||||
const labelId = `section-header-label-${id}`; |
||||
|
||||
let icon = toIconName(section.icon ?? ''); |
||||
if (!icon) { |
||||
icon = sectionExpanded ? 'folder-open' : 'folder'; |
||||
} |
||||
|
||||
const renderResults = () => { |
||||
if (!results.value) { |
||||
return null; |
||||
} else if (results.value.length === 0 && !results.loading) { |
||||
return ( |
||||
<Card> |
||||
<Card.Heading>No results found</Card.Heading> |
||||
</Card> |
||||
); |
||||
} |
||||
|
||||
return results.value.map((item) => { |
||||
return ( |
||||
<SearchItem |
||||
key={item.uid} |
||||
item={item} |
||||
onTagSelected={onTagSelected} |
||||
onToggleChecked={(item) => selectionToggle?.(item.kind, item.uid)} |
||||
editable={Boolean(selection != null)} |
||||
onClickItem={onClickItem} |
||||
isSelected={selection?.(item.kind, item.uid)} |
||||
/> |
||||
); |
||||
}); |
||||
}; |
||||
|
||||
// Skip the folder wrapper
|
||||
if (renderStandaloneBody) { |
||||
return ( |
||||
<div className={styles.folderViewResults}> |
||||
{!results.value?.length && results.loading ? <Spinner className={styles.spinner} /> : renderResults()} |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
return ( |
||||
<CollapsableSection |
||||
headerDataTestId={selectors.components.Search.folderHeader(section.title)} |
||||
contentDataTestId={selectors.components.Search.folderContent(section.title)} |
||||
isOpen={sectionExpanded ?? false} |
||||
onToggle={onSectionExpand} |
||||
className={styles.wrapper} |
||||
contentClassName={styles.content} |
||||
loading={results.loading} |
||||
labelId={labelId} |
||||
label={ |
||||
<> |
||||
{selectionToggle && selection && ( |
||||
// TODO: fix keyboard a11y
|
||||
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
|
||||
<div onClick={onToggleFolder}> |
||||
<Checkbox |
||||
className={styles.checkbox} |
||||
value={selection(section.kind, section.uid)} |
||||
aria-label={t('search.folder-view.select-folder', 'Select folder')} |
||||
/> |
||||
</div> |
||||
)} |
||||
|
||||
<div className={styles.icon}> |
||||
<Icon name={icon} /> |
||||
</div> |
||||
|
||||
<div className={styles.text}> |
||||
<span id={labelId}>{section.title}</span> |
||||
{section.url && section.uid !== GENERAL_FOLDER_UID && ( |
||||
<a href={section.url} className={styles.link}> |
||||
<span className={styles.separator}>|</span> <Icon name="folder-upload" />{' '} |
||||
{t('search.folder-view.go-to-folder', 'Go to folder')} |
||||
</a> |
||||
)} |
||||
</div> |
||||
</> |
||||
} |
||||
> |
||||
{results.value && <ul className={styles.sectionItems}>{renderResults()}</ul>} |
||||
</CollapsableSection> |
||||
); |
||||
}; |
||||
|
||||
const getSectionHeaderStyles = (theme: GrafanaTheme2, editable: boolean) => { |
||||
const sm = theme.spacing(1); |
||||
|
||||
return { |
||||
wrapper: css` |
||||
align-items: center; |
||||
font-size: ${theme.typography.size.base}; |
||||
padding: 12px; |
||||
border-bottom: none; |
||||
color: ${theme.colors.text.secondary}; |
||||
z-index: 1; |
||||
|
||||
&:hover, |
||||
&.selected { |
||||
color: ${theme.colors.text}; |
||||
} |
||||
|
||||
&:hover, |
||||
&:focus-visible, |
||||
&:focus-within { |
||||
a { |
||||
opacity: 1; |
||||
} |
||||
} |
||||
`,
|
||||
sectionItems: css` |
||||
margin: 0 24px 0 32px; |
||||
`,
|
||||
icon: css` |
||||
padding: 0 ${sm} 0 ${editable ? 0 : sm}; |
||||
`,
|
||||
folderViewResults: css` |
||||
overflow: auto; |
||||
`,
|
||||
text: css` |
||||
flex-grow: 1; |
||||
line-height: 24px; |
||||
`,
|
||||
link: css` |
||||
padding: 2px 10px 0; |
||||
color: ${theme.colors.text.secondary}; |
||||
opacity: 0; |
||||
transition: opacity 150ms ease-in-out; |
||||
`,
|
||||
separator: css` |
||||
margin-right: 6px; |
||||
`,
|
||||
content: css` |
||||
padding-top: 0px; |
||||
padding-bottom: 0px; |
||||
`,
|
||||
spinner: css` |
||||
display: grid; |
||||
place-content: center; |
||||
padding-bottom: 1rem; |
||||
`,
|
||||
checkbox: css({ |
||||
marginRight: theme.spacing(1), |
||||
}), |
||||
}; |
||||
}; |
||||
@ -1,121 +0,0 @@ |
||||
import { render, screen } from '@testing-library/react'; |
||||
import userEvent from '@testing-library/user-event'; |
||||
import React from 'react'; |
||||
import { Provider } from 'react-redux'; |
||||
import configureMockStore from 'redux-mock-store'; |
||||
|
||||
import { contextSrv } from 'app/core/services/context_srv'; |
||||
|
||||
import { ManageActions } from './ManageActions'; |
||||
|
||||
jest.mock('app/core/services/context_srv', () => ({ |
||||
contextSrv: { |
||||
hasEditPermissionInFolders: false, |
||||
}, |
||||
})); |
||||
|
||||
jest.mock('app/core/components/Select/OldFolderPicker', () => { |
||||
return { |
||||
OldFolderPicker: () => null, |
||||
}; |
||||
}); |
||||
|
||||
describe('ManageActions', () => { |
||||
describe('when user has edit permission in folders', () => { |
||||
// Permissions
|
||||
contextSrv.hasEditPermissionInFolders = true; |
||||
|
||||
// Mock selected dashboards
|
||||
const mockItemsSelected = new Map(); |
||||
const mockDashboardsUIDsSelected = new Set(); |
||||
mockDashboardsUIDsSelected.add('uid1'); |
||||
mockDashboardsUIDsSelected.add('uid2'); |
||||
mockItemsSelected.set('dashboard', mockDashboardsUIDsSelected); |
||||
|
||||
//Mock store redux for old MoveDashboards state action
|
||||
const mockStore = configureMockStore(); |
||||
const store = mockStore({ dashboard: { panels: [] } }); |
||||
|
||||
const onChange = jest.fn(); |
||||
const clearSelection = jest.fn(); |
||||
|
||||
it('should show move when user click the move button', async () => { |
||||
render( |
||||
<Provider store={store}> |
||||
<ManageActions items={mockItemsSelected} onChange={onChange} clearSelection={clearSelection} /> |
||||
</Provider> |
||||
); |
||||
expect(screen.getByTestId('manage-actions')).toBeInTheDocument(); |
||||
expect(await screen.findByRole('button', { name: 'Move', hidden: true })).not.toBeDisabled(); |
||||
expect(await screen.findByRole('button', { name: 'Delete', hidden: true })).not.toBeDisabled(); |
||||
|
||||
// open Move modal
|
||||
await userEvent.click(screen.getByRole('button', { name: 'Move', hidden: true })); |
||||
expect(screen.getByText(/Move 2 dashboards to:/i)).toBeInTheDocument(); |
||||
}); |
||||
|
||||
it('should show delete modal when user click the delete button', async () => { |
||||
render( |
||||
<Provider store={store}> |
||||
<ManageActions items={mockItemsSelected} onChange={onChange} clearSelection={clearSelection} /> |
||||
</Provider> |
||||
); |
||||
expect(screen.getByTestId('manage-actions')).toBeInTheDocument(); |
||||
// open Delete modal
|
||||
await userEvent.click(screen.getByRole('button', { name: 'Delete', hidden: true })); |
||||
expect(screen.getByText(/Do you want to delete the 2 selected dashboards\?/i)).toBeInTheDocument(); |
||||
}); |
||||
}); |
||||
|
||||
describe('when user has not edit permission in folders', () => { |
||||
it('should have disabled the Move button', async () => { |
||||
contextSrv.hasEditPermissionInFolders = false; |
||||
const mockItemsSelected = new Map(); |
||||
const mockDashboardsUIDsSelected = new Set(); |
||||
mockDashboardsUIDsSelected.add('uid1'); |
||||
mockDashboardsUIDsSelected.add('uid2'); |
||||
mockItemsSelected.set('dashboard', mockDashboardsUIDsSelected); |
||||
|
||||
//Mock store
|
||||
const mockStore = configureMockStore(); |
||||
const store = mockStore({ dashboard: { panels: [] } }); |
||||
|
||||
const onChange = jest.fn(); |
||||
const clearSelection = jest.fn(); |
||||
|
||||
render( |
||||
<Provider store={store}> |
||||
<ManageActions items={mockItemsSelected} onChange={onChange} clearSelection={clearSelection} /> |
||||
</Provider> |
||||
); |
||||
expect(screen.getByTestId('manage-actions')).toBeInTheDocument(); |
||||
expect(await screen.findByRole('button', { name: 'Move', hidden: true })).toBeDisabled(); |
||||
await userEvent.click(screen.getByRole('button', { name: 'Move', hidden: true })); |
||||
expect(screen.queryByText(/Choose Dashboard Folder/i)).toBeNull(); |
||||
}); |
||||
}); |
||||
describe('When user has selected General folder', () => { |
||||
contextSrv.hasEditPermissionInFolders = true; |
||||
const mockItemsSelected = new Map(); |
||||
const mockFolderUIDSelected = new Set(); |
||||
mockFolderUIDSelected.add('general'); |
||||
mockItemsSelected.set('folder', mockFolderUIDSelected); |
||||
|
||||
//Mock store
|
||||
const mockStore = configureMockStore(); |
||||
const store = mockStore({ dashboard: { panels: [] } }); |
||||
|
||||
const onChange = jest.fn(); |
||||
const clearSelection = jest.fn(); |
||||
|
||||
it('should disable the Delete button', async () => { |
||||
render( |
||||
<Provider store={store}> |
||||
<ManageActions items={mockItemsSelected} onChange={onChange} clearSelection={clearSelection} /> |
||||
</Provider> |
||||
); |
||||
expect(screen.getByTestId('manage-actions')).toBeInTheDocument(); |
||||
expect(await screen.findByRole('button', { name: 'Delete', hidden: true })).toBeDisabled(); |
||||
}); |
||||
}); |
||||
}); |
||||
@ -1,65 +0,0 @@ |
||||
import React, { useState } from 'react'; |
||||
|
||||
import { Button, HorizontalGroup, IconButton, useStyles2 } from '@grafana/ui'; |
||||
import { contextSrv } from 'app/core/services/context_srv'; |
||||
import { FolderDTO } from 'app/types'; |
||||
|
||||
import { GENERAL_FOLDER_UID } from '../../constants'; |
||||
import { OnMoveOrDeleleSelectedItems } from '../../types'; |
||||
|
||||
import { getStyles } from './ActionRow'; |
||||
import { ConfirmDeleteModal } from './ConfirmDeleteModal'; |
||||
import { MoveToFolderModal } from './MoveToFolderModal'; |
||||
|
||||
type Props = { |
||||
items: Map<string, Set<string>>; |
||||
folder?: FolderDTO; // when we are loading in folder page
|
||||
onChange: OnMoveOrDeleleSelectedItems; |
||||
clearSelection: () => void; |
||||
}; |
||||
|
||||
export function ManageActions({ items, folder, onChange, clearSelection }: Props) { |
||||
const styles = useStyles2(getStyles); |
||||
|
||||
const canSave = folder?.canSave; |
||||
const hasEditPermissionInFolders = folder ? canSave : contextSrv.hasEditPermissionInFolders; |
||||
|
||||
const canMove = hasEditPermissionInFolders; |
||||
|
||||
const selectedFolders = Array.from(items.get('folder') ?? []); |
||||
const includesGeneralFolder = selectedFolders.find((result) => result === GENERAL_FOLDER_UID); |
||||
|
||||
const canDelete = hasEditPermissionInFolders && !includesGeneralFolder; |
||||
const [isMoveModalOpen, setIsMoveModalOpen] = useState(false); |
||||
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); |
||||
|
||||
const onMove = () => { |
||||
setIsMoveModalOpen(true); |
||||
}; |
||||
|
||||
const onDelete = () => { |
||||
setIsDeleteModalOpen(true); |
||||
}; |
||||
|
||||
return ( |
||||
<div className={styles.actionRow} data-testid="manage-actions"> |
||||
<HorizontalGroup spacing="md" width="auto"> |
||||
<IconButton name="check-square" onClick={clearSelection} tooltip="Uncheck everything" /> |
||||
<Button disabled={!canMove} onClick={onMove} icon="exchange-alt" variant="secondary"> |
||||
Move |
||||
</Button> |
||||
<Button disabled={!canDelete} onClick={onDelete} icon="trash-alt" variant="destructive"> |
||||
Delete |
||||
</Button> |
||||
</HorizontalGroup> |
||||
|
||||
{isDeleteModalOpen && ( |
||||
<ConfirmDeleteModal onDeleteItems={onChange} results={items} onDismiss={() => setIsDeleteModalOpen(false)} /> |
||||
)} |
||||
|
||||
{isMoveModalOpen && ( |
||||
<MoveToFolderModal onMoveItems={onChange} results={items} onDismiss={() => setIsMoveModalOpen(false)} /> |
||||
)} |
||||
</div> |
||||
); |
||||
} |
||||
@ -1,159 +0,0 @@ |
||||
import { render, screen } from '@testing-library/react'; |
||||
import userEvent from '@testing-library/user-event'; |
||||
import React from 'react'; |
||||
import { Provider } from 'react-redux'; |
||||
import configureMockStore from 'redux-mock-store'; |
||||
import { selectOptionInTest } from 'test/helpers/selectOptionInTest'; |
||||
|
||||
import { selectors } from '@grafana/e2e-selectors'; |
||||
import config from 'app/core/config'; |
||||
import * as api from 'app/features/manage-dashboards/state/actions'; |
||||
|
||||
import { DashboardSearchHit, DashboardSearchItemType } from '../../types'; |
||||
|
||||
import { MoveToFolderModal } from './MoveToFolderModal'; |
||||
|
||||
function makeSelections(dashboardUIDs: string[] = [], folderUIDs: string[] = []) { |
||||
const dashboards = new Set(dashboardUIDs); |
||||
const folders = new Set(folderUIDs); |
||||
|
||||
return new Map([ |
||||
['dashboard', dashboards], |
||||
['folder', folders], |
||||
]); |
||||
} |
||||
|
||||
function makeDashboardSearchHit(title: string, uid: string, type = DashboardSearchItemType.DashDB): DashboardSearchHit { |
||||
return { title, uid, tags: [], type, url: `/d/${uid}` }; |
||||
} |
||||
|
||||
describe('MoveToFolderModal', () => { |
||||
jest |
||||
.spyOn(api, 'searchFolders') |
||||
.mockResolvedValue([ |
||||
makeDashboardSearchHit('General', '', DashboardSearchItemType.DashFolder), |
||||
makeDashboardSearchHit('Folder 1', 'folder-uid-1', DashboardSearchItemType.DashFolder), |
||||
makeDashboardSearchHit('Folder 2', 'folder-uid-1', DashboardSearchItemType.DashFolder), |
||||
makeDashboardSearchHit('Folder 3', 'folder-uid-3', DashboardSearchItemType.DashFolder), |
||||
]); |
||||
|
||||
it('should render correct title, body, dismiss-, cancel- and move-text', async () => { |
||||
const items = makeSelections(['dash-uid-1', 'dash-uid-2']); |
||||
|
||||
const mockStore = configureMockStore(); |
||||
const store = mockStore({ dashboard: { panels: [] } }); |
||||
const onMoveItems = jest.fn(); |
||||
|
||||
render( |
||||
<Provider store={store}> |
||||
<MoveToFolderModal onMoveItems={onMoveItems} results={items} onDismiss={() => {}} /> |
||||
</Provider> |
||||
); |
||||
|
||||
// Wait for folder picker to finish rendering
|
||||
await screen.findByText('Choose'); |
||||
|
||||
expect(screen.getByRole('heading', { name: 'Choose Dashboard Folder' })).toBeInTheDocument(); |
||||
expect(screen.getByText('Move 2 dashboards to:')).toBeInTheDocument(); |
||||
expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument(); |
||||
expect(screen.getByRole('button', { name: 'Move' })).toBeInTheDocument(); |
||||
}); |
||||
|
||||
it('should move dashboards, but not folders', async () => { |
||||
const moveDashboardsMock = jest.spyOn(api, 'moveDashboards').mockResolvedValue({ |
||||
successCount: 2, |
||||
totalCount: 2, |
||||
alreadyInFolderCount: 0, |
||||
}); |
||||
|
||||
const moveFoldersMock = jest.spyOn(api, 'moveFolders').mockResolvedValue({ |
||||
successCount: 1, |
||||
totalCount: 1, |
||||
}); |
||||
|
||||
const items = makeSelections(['dash-uid-1', 'dash-uid-2'], ['folder-uid-1']); |
||||
|
||||
const mockStore = configureMockStore(); |
||||
const store = mockStore({ dashboard: { panels: [] } }); |
||||
const onMoveItems = jest.fn(); |
||||
|
||||
render( |
||||
<Provider store={store}> |
||||
<MoveToFolderModal onMoveItems={onMoveItems} results={items} onDismiss={() => {}} /> |
||||
</Provider> |
||||
); |
||||
|
||||
// Wait for folder picker to finish rendering
|
||||
await screen.findByText('Choose'); |
||||
|
||||
const folderPicker = screen.getByLabelText(selectors.components.FolderPicker.input); |
||||
await selectOptionInTest(folderPicker, 'Folder 3'); |
||||
|
||||
const moveButton = screen.getByText('Move'); |
||||
await userEvent.click(moveButton); |
||||
|
||||
expect(moveDashboardsMock).toHaveBeenCalledWith(['dash-uid-1', 'dash-uid-2'], { |
||||
title: 'Folder 3', |
||||
uid: 'folder-uid-3', |
||||
}); |
||||
|
||||
expect(moveFoldersMock).not.toHaveBeenCalled(); |
||||
}); |
||||
|
||||
describe('with nestedFolders feature flag', () => { |
||||
let originalNestedFoldersValue = config.featureToggles.nestedFolders; |
||||
|
||||
beforeAll(() => { |
||||
originalNestedFoldersValue = config.featureToggles.nestedFolders; |
||||
config.featureToggles.nestedFolders = true; |
||||
}); |
||||
|
||||
afterAll(() => { |
||||
config.featureToggles.nestedFolders = originalNestedFoldersValue; |
||||
}); |
||||
|
||||
it('should move folders and dashboards', async () => { |
||||
const moveDashboardsMock = jest.spyOn(api, 'moveDashboards').mockResolvedValue({ |
||||
successCount: 2, |
||||
totalCount: 2, |
||||
alreadyInFolderCount: 0, |
||||
}); |
||||
|
||||
const moveFoldersMock = jest.spyOn(api, 'moveFolders').mockResolvedValue({ |
||||
successCount: 1, |
||||
totalCount: 1, |
||||
}); |
||||
|
||||
const items = makeSelections(['dash-uid-1', 'dash-uid-2'], ['folder-uid-1']); |
||||
|
||||
const mockStore = configureMockStore(); |
||||
const store = mockStore({ dashboard: { panels: [] } }); |
||||
const onMoveItems = jest.fn(); |
||||
|
||||
render( |
||||
<Provider store={store}> |
||||
<MoveToFolderModal onMoveItems={onMoveItems} results={items} onDismiss={() => {}} /> |
||||
</Provider> |
||||
); |
||||
|
||||
// Wait for folder picker to finish rendering
|
||||
await screen.findByText('Choose'); |
||||
|
||||
const folderPicker = screen.getByLabelText(selectors.components.FolderPicker.input); |
||||
await selectOptionInTest(folderPicker, 'Folder 3'); |
||||
|
||||
const moveButton = screen.getByRole('button', { name: 'Move' }); |
||||
await userEvent.click(moveButton); |
||||
|
||||
expect(moveDashboardsMock).toHaveBeenCalledWith(['dash-uid-1', 'dash-uid-2'], { |
||||
title: 'Folder 3', |
||||
uid: 'folder-uid-3', |
||||
}); |
||||
|
||||
expect(moveFoldersMock).toHaveBeenCalledWith(['folder-uid-1'], { |
||||
title: 'Folder 3', |
||||
uid: 'folder-uid-3', |
||||
}); |
||||
}); |
||||
}); |
||||
}); |
||||
@ -1,193 +0,0 @@ |
||||
import { css } from '@emotion/css'; |
||||
import React, { useCallback, useState } from 'react'; |
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data'; |
||||
import { Alert, Button, HorizontalGroup, Modal, useStyles2 } from '@grafana/ui'; |
||||
import { OldFolderPicker } from 'app/core/components/Select/OldFolderPicker'; |
||||
import config from 'app/core/config'; |
||||
import { useAppNotification } from 'app/core/copy/appNotification'; |
||||
import { moveDashboards, moveFolders } from 'app/features/manage-dashboards/state/actions'; |
||||
import { FolderInfo } from 'app/types'; |
||||
|
||||
import { GENERAL_FOLDER_UID } from '../../constants'; |
||||
import { OnMoveOrDeleleSelectedItems } from '../../types'; |
||||
|
||||
interface Props { |
||||
onMoveItems: OnMoveOrDeleleSelectedItems; |
||||
results: Map<string, Set<string>>; |
||||
onDismiss: () => void; |
||||
} |
||||
|
||||
export const MoveToFolderModal = ({ results, onMoveItems, onDismiss }: Props) => { |
||||
const [folder, setFolder] = useState<FolderInfo | null>(null); |
||||
const styles = useStyles2(getStyles); |
||||
const notifyApp = useAppNotification(); |
||||
const [moving, setMoving] = useState(false); |
||||
|
||||
const nestedFoldersEnabled = config.featureToggles.nestedFolders; |
||||
|
||||
const selectedDashboards = Array.from(results.get('dashboard') ?? []); |
||||
const selectedFolders = nestedFoldersEnabled |
||||
? Array.from(results.get('folder') ?? []).filter((v) => v !== GENERAL_FOLDER_UID) |
||||
: []; |
||||
|
||||
const handleFolderChange = useCallback( |
||||
(newFolder: FolderInfo) => { |
||||
setFolder(newFolder); |
||||
}, |
||||
[setFolder] |
||||
); |
||||
|
||||
const moveTo = async () => { |
||||
if (!folder) { |
||||
return; |
||||
} |
||||
|
||||
if (nestedFoldersEnabled) { |
||||
setMoving(true); |
||||
let totalCount = 0; |
||||
let successCount = 0; |
||||
|
||||
if (selectedDashboards.length) { |
||||
const moveDashboardsResult = await moveDashboards(selectedDashboards, folder); |
||||
|
||||
totalCount += moveDashboardsResult.totalCount; |
||||
successCount += moveDashboardsResult.successCount; |
||||
} |
||||
|
||||
if (selectedFolders.length) { |
||||
const moveFoldersResult = await moveFolders(selectedFolders, folder); |
||||
|
||||
totalCount += moveFoldersResult.totalCount; |
||||
successCount += moveFoldersResult.successCount; |
||||
} |
||||
|
||||
const destTitle = folder.title ?? 'General'; |
||||
notifyNestedMoveResult(notifyApp, destTitle, { |
||||
selectedDashboardsCount: selectedDashboards.length, |
||||
selectedFoldersCount: selectedFolders.length, |
||||
totalCount, |
||||
successCount, |
||||
}); |
||||
|
||||
onMoveItems(); |
||||
setMoving(false); |
||||
onDismiss(); |
||||
|
||||
return; |
||||
} |
||||
|
||||
if (selectedDashboards.length) { |
||||
const folderTitle = folder.title ?? 'General'; |
||||
setMoving(true); |
||||
moveDashboards(selectedDashboards, folder).then((result) => { |
||||
if (result.successCount > 0) { |
||||
const ending = result.successCount === 1 ? '' : 's'; |
||||
const header = `Dashboard${ending} Moved`; |
||||
const msg = `${result.successCount} dashboard${ending} moved to ${folderTitle}`; |
||||
notifyApp.success(header, msg); |
||||
} |
||||
|
||||
if (result.totalCount === result.alreadyInFolderCount) { |
||||
notifyApp.error('Error', `Dashboard already belongs to folder ${folderTitle}`); |
||||
} else { |
||||
//update the list
|
||||
onMoveItems(); |
||||
} |
||||
|
||||
setMoving(false); |
||||
onDismiss(); |
||||
}); |
||||
} |
||||
}; |
||||
|
||||
const thingsMoving = [ |
||||
['folder', 'folders', selectedFolders.length] as const, |
||||
['dashboard', 'dashboards', selectedDashboards.length] as const, |
||||
] |
||||
.filter(([single, plural, count]) => count > 0) |
||||
.map(([single, plural, count]) => `${count.toLocaleString()} ${count === 1 ? single : plural}`) |
||||
.join(' and '); |
||||
|
||||
return ( |
||||
<Modal |
||||
isOpen |
||||
className={styles.modal} |
||||
title={nestedFoldersEnabled ? 'Move' : 'Choose Dashboard Folder'} |
||||
icon="folder-plus" |
||||
onDismiss={onDismiss} |
||||
> |
||||
<> |
||||
<div className={styles.content}> |
||||
{nestedFoldersEnabled && selectedFolders.length > 0 && ( |
||||
<Alert severity="warning" title=" Moving this item may change its permissions" /> |
||||
)} |
||||
|
||||
<p>Move {thingsMoving} to:</p> |
||||
|
||||
<OldFolderPicker allowEmpty={true} enableCreateNew={false} onChange={handleFolderChange} /> |
||||
</div> |
||||
|
||||
<HorizontalGroup justify="flex-end"> |
||||
<Button variant="secondary" onClick={onDismiss} fill="outline"> |
||||
Cancel |
||||
</Button> |
||||
<Button icon={moving ? 'spinner' : undefined} variant="primary" onClick={moveTo}> |
||||
Move |
||||
</Button> |
||||
</HorizontalGroup> |
||||
</> |
||||
</Modal> |
||||
); |
||||
}; |
||||
|
||||
interface NotifyCounts { |
||||
selectedDashboardsCount: number; |
||||
selectedFoldersCount: number; |
||||
totalCount: number; |
||||
successCount: number; |
||||
} |
||||
|
||||
function notifyNestedMoveResult( |
||||
notifyApp: ReturnType<typeof useAppNotification>, |
||||
destinationName: string, |
||||
{ selectedDashboardsCount, selectedFoldersCount, totalCount, successCount }: NotifyCounts |
||||
) { |
||||
let objectMoving: string | undefined; |
||||
const plural = successCount === 1 ? '' : 's'; |
||||
const failedCount = totalCount - successCount; |
||||
|
||||
if (selectedDashboardsCount && selectedFoldersCount) { |
||||
objectMoving = `Item${plural}`; |
||||
} else if (selectedDashboardsCount) { |
||||
objectMoving = `Dashboard${plural}`; |
||||
} else if (selectedFoldersCount) { |
||||
objectMoving = `Folder${plural}`; |
||||
} |
||||
|
||||
if (objectMoving) { |
||||
const objectLower = objectMoving?.toLocaleLowerCase(); |
||||
|
||||
if (totalCount === successCount) { |
||||
notifyApp.success(`${objectMoving} moved`, `Moved ${successCount} ${objectLower} to ${destinationName}`); |
||||
} else if (successCount === 0) { |
||||
notifyApp.error(`Failed to move ${objectLower}`, `Could not move ${totalCount} ${objectLower} due to an error`); |
||||
} else { |
||||
notifyApp.warning( |
||||
`Partially moved ${objectLower}`, |
||||
`Failed to move ${failedCount} ${objectLower} to ${destinationName}` |
||||
); |
||||
} |
||||
} |
||||
} |
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => { |
||||
return { |
||||
modal: css` |
||||
width: 500px; |
||||
`,
|
||||
content: css` |
||||
margin-bottom: ${theme.spacing(3)}; |
||||
`,
|
||||
}; |
||||
}; |
||||
@ -1,204 +0,0 @@ |
||||
import { render, screen, act } from '@testing-library/react'; |
||||
import React from 'react'; |
||||
|
||||
import { DataFrame, DataFrameView, FieldType } from '@grafana/data'; |
||||
import { selectors } from '@grafana/e2e-selectors'; |
||||
|
||||
import { ContextSrv, setContextSrv } from '../../../../core/services/context_srv'; |
||||
import impressionSrv from '../../../../core/services/impression_srv'; |
||||
import { DashboardQueryResult, getGrafanaSearcher, QueryResponse } from '../../service'; |
||||
import { DashboardSearchItemType } from '../../types'; |
||||
|
||||
import { RootFolderView } from './RootFolderView'; |
||||
|
||||
jest.mock('@grafana/runtime', () => ({ |
||||
...jest.requireActual('@grafana/runtime'), |
||||
getBackendSrv: () => ({ |
||||
get: jest.fn().mockResolvedValue(['foo']), |
||||
}), |
||||
})); |
||||
|
||||
describe('RootFolderView', () => { |
||||
let grafanaSearcherSpy: jest.SpyInstance; |
||||
const mockOnTagSelected = jest.fn(); |
||||
const mockSelectionToggle = jest.fn(); |
||||
const mockSelection = jest.fn(); |
||||
|
||||
const folderData: DataFrame = { |
||||
fields: [ |
||||
{ |
||||
name: 'kind', |
||||
type: FieldType.string, |
||||
config: {}, |
||||
values: [DashboardSearchItemType.DashFolder], |
||||
}, |
||||
{ name: 'name', type: FieldType.string, config: {}, values: ['My folder 1'] }, |
||||
{ name: 'uid', type: FieldType.string, config: {}, values: ['my-folder-1'] }, |
||||
{ name: 'url', type: FieldType.string, config: {}, values: ['/my-folder-1'] }, |
||||
], |
||||
length: 1, |
||||
}; |
||||
|
||||
const mockSearchResult: QueryResponse = { |
||||
isItemLoaded: jest.fn(), |
||||
loadMoreItems: jest.fn(), |
||||
totalRows: folderData.length, |
||||
view: new DataFrameView<DashboardQueryResult>(folderData), |
||||
}; |
||||
|
||||
let contextSrv: ContextSrv; |
||||
|
||||
beforeAll(() => { |
||||
contextSrv = new ContextSrv(); |
||||
setContextSrv(contextSrv); |
||||
grafanaSearcherSpy = jest.spyOn(getGrafanaSearcher(), 'search').mockResolvedValue(mockSearchResult); |
||||
}); |
||||
|
||||
// need to make sure we clear localStorage
|
||||
// otherwise tests can interfere with each other and the starting expanded state of the component
|
||||
afterEach(() => { |
||||
window.localStorage.clear(); |
||||
}); |
||||
|
||||
it('shows a spinner whilst the results are loading', async () => { |
||||
// mock the query promise so we can resolve manually
|
||||
let promiseResolver: (arg0: QueryResponse) => void; |
||||
const promise = new Promise((resolve) => { |
||||
promiseResolver = resolve; |
||||
}); |
||||
grafanaSearcherSpy.mockImplementationOnce(() => promise); |
||||
|
||||
render( |
||||
<RootFolderView |
||||
onTagSelected={mockOnTagSelected} |
||||
selection={mockSelection} |
||||
selectionToggle={mockSelectionToggle} |
||||
/> |
||||
); |
||||
expect(await screen.findByTestId('Spinner')).toBeInTheDocument(); |
||||
|
||||
// resolve the promise
|
||||
await act(async () => { |
||||
promiseResolver(mockSearchResult); |
||||
}); |
||||
|
||||
expect(screen.queryByTestId('Spinner')).not.toBeInTheDocument(); |
||||
}); |
||||
|
||||
it('does not show the starred items if not signed in', async () => { |
||||
contextSrv.isSignedIn = false; |
||||
render( |
||||
<RootFolderView |
||||
onTagSelected={mockOnTagSelected} |
||||
selection={mockSelection} |
||||
selectionToggle={mockSelectionToggle} |
||||
/> |
||||
); |
||||
expect((await screen.findAllByTestId(selectors.components.Search.sectionV2))[0]).toBeInTheDocument(); |
||||
expect(screen.queryByRole('button', { name: 'Starred' })).not.toBeInTheDocument(); |
||||
}); |
||||
|
||||
it('shows the starred items if signed in', async () => { |
||||
contextSrv.isSignedIn = true; |
||||
render( |
||||
<RootFolderView |
||||
onTagSelected={mockOnTagSelected} |
||||
selection={mockSelection} |
||||
selectionToggle={mockSelectionToggle} |
||||
/> |
||||
); |
||||
expect(await screen.findByRole('button', { name: 'Starred' })).toBeInTheDocument(); |
||||
}); |
||||
|
||||
it('does not show the recent items if no dashboards have been opened recently', async () => { |
||||
jest.spyOn(impressionSrv, 'getDashboardOpened').mockResolvedValue([]); |
||||
render( |
||||
<RootFolderView |
||||
onTagSelected={mockOnTagSelected} |
||||
selection={mockSelection} |
||||
selectionToggle={mockSelectionToggle} |
||||
/> |
||||
); |
||||
expect((await screen.findAllByTestId(selectors.components.Search.sectionV2))[0]).toBeInTheDocument(); |
||||
expect(screen.queryByRole('button', { name: 'Recent' })).not.toBeInTheDocument(); |
||||
}); |
||||
|
||||
it('shows the recent items if any dashboards have recently been opened', async () => { |
||||
jest.spyOn(impressionSrv, 'getDashboardOpened').mockResolvedValue(['7MeksYbmk']); |
||||
render( |
||||
<RootFolderView |
||||
onTagSelected={mockOnTagSelected} |
||||
selection={mockSelection} |
||||
selectionToggle={mockSelectionToggle} |
||||
/> |
||||
); |
||||
expect(await screen.findByRole('button', { name: 'Recent' })).toBeInTheDocument(); |
||||
}); |
||||
|
||||
it('shows the general folder by default', async () => { |
||||
render( |
||||
<RootFolderView |
||||
onTagSelected={mockOnTagSelected} |
||||
selection={mockSelection} |
||||
selectionToggle={mockSelectionToggle} |
||||
/> |
||||
); |
||||
expect(await screen.findByRole('button', { name: 'General' })).toBeInTheDocument(); |
||||
}); |
||||
|
||||
describe('when hidePseudoFolders is set', () => { |
||||
it('does not show the starred items even if signed in', async () => { |
||||
contextSrv.isSignedIn = true; |
||||
render( |
||||
<RootFolderView |
||||
hidePseudoFolders |
||||
onTagSelected={mockOnTagSelected} |
||||
selection={mockSelection} |
||||
selectionToggle={mockSelectionToggle} |
||||
/> |
||||
); |
||||
expect(await screen.findByRole('button', { name: 'General' })).toBeInTheDocument(); |
||||
expect(screen.queryByRole('button', { name: 'Starred' })).not.toBeInTheDocument(); |
||||
}); |
||||
|
||||
it('does not show the recent items even if recent dashboards have been opened', async () => { |
||||
jest.spyOn(impressionSrv, 'getDashboardOpened').mockResolvedValue(['7MeksYbmk']); |
||||
render( |
||||
<RootFolderView |
||||
hidePseudoFolders |
||||
onTagSelected={mockOnTagSelected} |
||||
selection={mockSelection} |
||||
selectionToggle={mockSelectionToggle} |
||||
/> |
||||
); |
||||
expect(await screen.findByRole('button', { name: 'General' })).toBeInTheDocument(); |
||||
expect(screen.queryByRole('button', { name: 'Recent' })).not.toBeInTheDocument(); |
||||
}); |
||||
}); |
||||
|
||||
it('shows an error state if any of the calls reject for a specific reason', async () => { |
||||
// reject with a specific Error object
|
||||
grafanaSearcherSpy.mockRejectedValueOnce(new Error('Uh oh spagghettios!')); |
||||
render( |
||||
<RootFolderView |
||||
onTagSelected={mockOnTagSelected} |
||||
selection={mockSelection} |
||||
selectionToggle={mockSelectionToggle} |
||||
/> |
||||
); |
||||
expect(await screen.findByRole('alert', { name: 'Uh oh spagghettios!' })).toBeInTheDocument(); |
||||
}); |
||||
|
||||
it('shows a general error state if any of the calls reject', async () => { |
||||
// reject with nothing
|
||||
grafanaSearcherSpy.mockRejectedValueOnce(null); |
||||
render( |
||||
<RootFolderView |
||||
onTagSelected={mockOnTagSelected} |
||||
selection={mockSelection} |
||||
selectionToggle={mockSelectionToggle} |
||||
/> |
||||
); |
||||
expect(await screen.findByRole('alert', { name: 'Something went wrong' })).toBeInTheDocument(); |
||||
}); |
||||
}); |
||||
@ -1,131 +0,0 @@ |
||||
import { css } from '@emotion/css'; |
||||
import React from 'react'; |
||||
import { useAsync } from 'react-use'; |
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data'; |
||||
import { selectors } from '@grafana/e2e-selectors'; |
||||
import { getBackendSrv } from '@grafana/runtime'; |
||||
import { Alert, Spinner, useStyles2 } from '@grafana/ui'; |
||||
import config from 'app/core/config'; |
||||
|
||||
import { contextSrv } from '../../../../core/services/context_srv'; |
||||
import impressionSrv from '../../../../core/services/impression_srv'; |
||||
import { GENERAL_FOLDER_UID } from '../../constants'; |
||||
import { getGrafanaSearcher } from '../../service'; |
||||
import { getFolderChildren } from '../../service/folders'; |
||||
import { queryResultToViewItem } from '../../service/utils'; |
||||
|
||||
import { FolderSection } from './FolderSection'; |
||||
import { SearchResultsProps } from './SearchResultsTable'; |
||||
|
||||
async function getChildren() { |
||||
if (config.featureToggles.nestedFolders) { |
||||
return getFolderChildren(); |
||||
} |
||||
|
||||
const searcher = getGrafanaSearcher(); |
||||
const results = await searcher.search({ |
||||
query: '*', |
||||
kind: ['folder'], |
||||
sort: searcher.getFolderViewSort(), |
||||
limit: 1000, |
||||
}); |
||||
|
||||
return results.view.map((v) => queryResultToViewItem(v, results.view)); |
||||
} |
||||
|
||||
type Props = Pick<SearchResultsProps, 'selection' | 'selectionToggle' | 'onTagSelected' | 'onClickItem'> & { |
||||
tags?: string[]; |
||||
hidePseudoFolders?: boolean; |
||||
}; |
||||
export const RootFolderView = ({ |
||||
selection, |
||||
selectionToggle, |
||||
onTagSelected, |
||||
tags, |
||||
hidePseudoFolders, |
||||
onClickItem, |
||||
}: Props) => { |
||||
const styles = useStyles2(getStyles); |
||||
|
||||
const results = useAsync(async () => { |
||||
const folders = await getChildren(); |
||||
|
||||
folders.unshift({ title: 'General', url: '/dashboards', kind: 'folder', uid: GENERAL_FOLDER_UID }); |
||||
|
||||
if (!hidePseudoFolders) { |
||||
const itemsUIDs = await impressionSrv.getDashboardOpened(); |
||||
if (itemsUIDs.length) { |
||||
folders.unshift({ title: 'Recent', icon: 'clock-nine', kind: 'folder', uid: '__recent', itemsUIDs }); |
||||
} |
||||
|
||||
if (contextSrv.isSignedIn) { |
||||
const stars = await getBackendSrv().get('api/user/stars'); |
||||
if (stars.length > 0) { |
||||
folders.unshift({ title: 'Starred', icon: 'star', kind: 'folder', uid: '__starred', itemsUIDs: stars }); |
||||
} |
||||
} |
||||
} |
||||
|
||||
return folders; |
||||
}, []); |
||||
|
||||
const renderResults = () => { |
||||
if (results.loading) { |
||||
return <Spinner className={styles.spinner} />; |
||||
} else if (!results.value) { |
||||
return <Alert className={styles.error} title={results.error ? results.error.message : 'Something went wrong'} />; |
||||
} else { |
||||
return results.value.map((section) => ( |
||||
<div data-testid={selectors.components.Search.sectionV2} className={styles.section} key={section.title}> |
||||
{section.title && ( |
||||
<FolderSection |
||||
selection={selection} |
||||
selectionToggle={selectionToggle} |
||||
onTagSelected={onTagSelected} |
||||
section={section} |
||||
tags={tags} |
||||
onClickItem={onClickItem} |
||||
/> |
||||
)} |
||||
</div> |
||||
)); |
||||
} |
||||
}; |
||||
|
||||
return <div className={styles.wrapper}>{renderResults()}</div>; |
||||
}; |
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => { |
||||
return { |
||||
wrapper: css` |
||||
display: flex; |
||||
flex-direction: column; |
||||
overflow: auto; |
||||
|
||||
> ul { |
||||
list-style: none; |
||||
} |
||||
|
||||
border: solid 1px ${theme.v1.colors.border2}; |
||||
`,
|
||||
section: css` |
||||
display: flex; |
||||
flex-direction: column; |
||||
background: ${theme.v1.colors.panelBg}; |
||||
|
||||
&:not(:last-child) { |
||||
border-bottom: solid 1px ${theme.v1.colors.border2}; |
||||
} |
||||
`,
|
||||
spinner: css` |
||||
align-items: center; |
||||
display: flex; |
||||
justify-content: center; |
||||
min-height: 100px; |
||||
`,
|
||||
error: css` |
||||
margin: ${theme.spacing(4)} auto; |
||||
`,
|
||||
}; |
||||
}; |
||||
@ -1,131 +0,0 @@ |
||||
import { render, screen } from '@testing-library/react'; |
||||
import React from 'react'; |
||||
import { Subject } from 'rxjs'; |
||||
|
||||
import { DataFrame, DataFrameView, FieldType } from '@grafana/data'; |
||||
|
||||
import { DashboardQueryResult, getGrafanaSearcher, QueryResponse } from '../../service'; |
||||
import { DashboardSearchItemType } from '../../types'; |
||||
|
||||
import { SearchResultsCards } from './SearchResultsCards'; |
||||
|
||||
describe('SearchResultsCards', () => { |
||||
const mockOnTagSelected = jest.fn(); |
||||
const mockClearSelection = jest.fn(); |
||||
const mockSelectionToggle = jest.fn(); |
||||
const mockSelection = jest.fn(); |
||||
const mockKeyboardEvents = new Subject<React.KeyboardEvent>(); |
||||
|
||||
describe('when there is data', () => { |
||||
const searchData: DataFrame = { |
||||
fields: [ |
||||
{ name: 'kind', type: FieldType.string, config: {}, values: [DashboardSearchItemType.DashDB] }, |
||||
{ name: 'uid', type: FieldType.string, config: {}, values: ['my-dashboard-1'] }, |
||||
{ name: 'name', type: FieldType.string, config: {}, values: ['My dashboard 1'] }, |
||||
{ name: 'panel_type', type: FieldType.string, config: {}, values: [''] }, |
||||
{ name: 'url', type: FieldType.string, config: {}, values: ['/my-dashboard-1'] }, |
||||
{ name: 'tags', type: FieldType.other, config: {}, values: [['foo', 'bar']] }, |
||||
{ name: 'ds_uid', type: FieldType.other, config: {}, values: [''] }, |
||||
{ name: 'location', type: FieldType.string, config: {}, values: ['folder0/my-dashboard-1'] }, |
||||
], |
||||
meta: { |
||||
custom: { |
||||
locationInfo: { |
||||
folder0: { name: 'Folder 0', uid: 'f0' }, |
||||
}, |
||||
}, |
||||
}, |
||||
length: 1, |
||||
}; |
||||
|
||||
const mockSearchResult: QueryResponse = { |
||||
isItemLoaded: () => true, |
||||
loadMoreItems: () => Promise.resolve(), |
||||
totalRows: searchData.length, |
||||
view: new DataFrameView<DashboardQueryResult>(searchData), |
||||
}; |
||||
|
||||
beforeAll(() => { |
||||
jest.spyOn(getGrafanaSearcher(), 'search').mockResolvedValue(mockSearchResult); |
||||
}); |
||||
|
||||
it('shows the list with the correct accessible label', () => { |
||||
render( |
||||
<SearchResultsCards |
||||
keyboardEvents={mockKeyboardEvents} |
||||
response={mockSearchResult} |
||||
onTagSelected={mockOnTagSelected} |
||||
selection={mockSelection} |
||||
selectionToggle={mockSelectionToggle} |
||||
clearSelection={mockClearSelection} |
||||
height={1000} |
||||
width={1000} |
||||
/> |
||||
); |
||||
expect(screen.getByRole('list', { name: 'Search results list' })).toBeInTheDocument(); |
||||
}); |
||||
|
||||
it('displays the data correctly in the table', () => { |
||||
render( |
||||
<SearchResultsCards |
||||
keyboardEvents={mockKeyboardEvents} |
||||
response={mockSearchResult} |
||||
onTagSelected={mockOnTagSelected} |
||||
selection={mockSelection} |
||||
selectionToggle={mockSelectionToggle} |
||||
clearSelection={mockClearSelection} |
||||
height={1000} |
||||
width={1000} |
||||
/> |
||||
); |
||||
|
||||
const rows = screen.getAllByRole('row'); |
||||
expect(rows).toHaveLength(searchData.length); |
||||
expect(screen.getByText('My dashboard 1')).toBeInTheDocument(); |
||||
expect(screen.getByText('foo')).toBeInTheDocument(); |
||||
expect(screen.getByText('bar')).toBeInTheDocument(); |
||||
}); |
||||
}); |
||||
|
||||
describe('when there is no data', () => { |
||||
const emptySearchData: DataFrame = { |
||||
fields: [ |
||||
{ name: 'kind', type: FieldType.string, config: {}, values: [] }, |
||||
{ name: 'name', type: FieldType.string, config: {}, values: [] }, |
||||
{ name: 'uid', type: FieldType.string, config: {}, values: [] }, |
||||
{ name: 'url', type: FieldType.string, config: {}, values: [] }, |
||||
{ name: 'tags', type: FieldType.other, config: {}, values: [] }, |
||||
{ name: 'location', type: FieldType.string, config: {}, values: [] }, |
||||
], |
||||
length: 0, |
||||
}; |
||||
|
||||
const mockEmptySearchResult: QueryResponse = { |
||||
isItemLoaded: jest.fn(), |
||||
loadMoreItems: jest.fn(), |
||||
totalRows: emptySearchData.length, |
||||
view: new DataFrameView<DashboardQueryResult>(emptySearchData), |
||||
}; |
||||
|
||||
beforeAll(() => { |
||||
jest.spyOn(getGrafanaSearcher(), 'search').mockResolvedValue(mockEmptySearchResult); |
||||
}); |
||||
|
||||
it('shows a "No data" message', () => { |
||||
render( |
||||
<SearchResultsCards |
||||
keyboardEvents={mockKeyboardEvents} |
||||
response={mockEmptySearchResult} |
||||
onTagSelected={mockOnTagSelected} |
||||
selection={mockSelection} |
||||
selectionToggle={mockSelectionToggle} |
||||
clearSelection={mockClearSelection} |
||||
height={1000} |
||||
width={1000} |
||||
/> |
||||
); |
||||
expect(screen.queryByRole('list', { name: 'Search results list' })).not.toBeInTheDocument(); |
||||
expect(screen.getByText('No data')).toBeInTheDocument(); |
||||
}); |
||||
}); |
||||
}); |
||||
@ -1,125 +0,0 @@ |
||||
/* eslint-disable react/jsx-no-undef */ |
||||
import { css } from '@emotion/css'; |
||||
import React, { useEffect, useRef, useCallback, useState, CSSProperties } from 'react'; |
||||
import { FixedSizeList } from 'react-window'; |
||||
import InfiniteLoader from 'react-window-infinite-loader'; |
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data'; |
||||
import { useStyles2 } from '@grafana/ui'; |
||||
|
||||
import { SearchItem } from '../../components/SearchItem'; |
||||
import { useSearchKeyboardNavigation } from '../../hooks/useSearchKeyboardSelection'; |
||||
import { queryResultToViewItem } from '../../service/utils'; |
||||
|
||||
import { SearchResultsProps } from './SearchResultsTable'; |
||||
|
||||
export const SearchResultsCards = React.memo( |
||||
({ |
||||
response, |
||||
width, |
||||
height, |
||||
selection, |
||||
selectionToggle, |
||||
onTagSelected, |
||||
keyboardEvents, |
||||
onClickItem, |
||||
}: SearchResultsProps) => { |
||||
const styles = useStyles2(getStyles); |
||||
const infiniteLoaderRef = useRef<InfiniteLoader>(null); |
||||
const [listEl, setListEl] = useState<FixedSizeList | null>(null); |
||||
const highlightIndex = useSearchKeyboardNavigation(keyboardEvents, 0, response); |
||||
|
||||
// Scroll to the top and clear loader cache when the query results change
|
||||
useEffect(() => { |
||||
if (infiniteLoaderRef.current) { |
||||
infiniteLoaderRef.current.resetloadMoreItemsCache(); |
||||
} |
||||
if (listEl) { |
||||
listEl.scrollTo(0); |
||||
} |
||||
}, [response, listEl]); |
||||
|
||||
const RenderRow = useCallback( |
||||
({ index: rowIndex, style }: { index: number; style: CSSProperties }) => { |
||||
let className = ''; |
||||
if (rowIndex === highlightIndex.y) { |
||||
className += ' ' + styles.selectedRow; |
||||
} |
||||
|
||||
const item = response.view.get(rowIndex); |
||||
const searchItem = queryResultToViewItem(item, response.view); |
||||
const isSelected = selectionToggle && selection?.(searchItem.kind, searchItem.uid); |
||||
|
||||
return ( |
||||
<div style={style} key={item.uid} className={className} role="row"> |
||||
<SearchItem |
||||
item={searchItem} |
||||
onTagSelected={onTagSelected} |
||||
onToggleChecked={(item) => { |
||||
if (selectionToggle) { |
||||
selectionToggle('dashboard', item.uid!); |
||||
} |
||||
}} |
||||
editable={Boolean(selection != null)} |
||||
onClickItem={onClickItem} |
||||
isSelected={isSelected} |
||||
/> |
||||
</div> |
||||
); |
||||
}, |
||||
[response.view, highlightIndex, styles, onTagSelected, selection, selectionToggle, onClickItem] |
||||
); |
||||
|
||||
if (!response.totalRows) { |
||||
return ( |
||||
<div className={styles.noData} style={{ width }}> |
||||
No data |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
return ( |
||||
<div aria-label="Search results list" style={{ width }} role="list"> |
||||
<InfiniteLoader |
||||
ref={infiniteLoaderRef} |
||||
isItemLoaded={response.isItemLoaded} |
||||
itemCount={response.totalRows} |
||||
loadMoreItems={response.loadMoreItems} |
||||
> |
||||
{({ onItemsRendered, ref }) => ( |
||||
<FixedSizeList |
||||
ref={(innerRef) => { |
||||
ref(innerRef); |
||||
setListEl(innerRef); |
||||
}} |
||||
onItemsRendered={onItemsRendered} |
||||
height={height} |
||||
itemCount={response.totalRows} |
||||
itemSize={72} |
||||
width="100%" |
||||
style={{ overflow: 'hidden auto' }} |
||||
> |
||||
{RenderRow} |
||||
</FixedSizeList> |
||||
)} |
||||
</InfiniteLoader> |
||||
</div> |
||||
); |
||||
} |
||||
); |
||||
SearchResultsCards.displayName = 'SearchResultsCards'; |
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => { |
||||
return { |
||||
noData: css` |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
height: 100%; |
||||
`,
|
||||
selectedRow: css` |
||||
border-left: 3px solid ${theme.colors.primary.border}; |
||||
`,
|
||||
}; |
||||
}; |
||||
@ -1,170 +0,0 @@ |
||||
import { render, screen, waitFor } from '@testing-library/react'; |
||||
import userEvent from '@testing-library/user-event'; |
||||
import React from 'react'; |
||||
import { Provider } from 'react-redux'; |
||||
import configureMockStore from 'redux-mock-store'; |
||||
import { Observable } from 'rxjs'; |
||||
|
||||
import { DataFrame, DataFrameView, FieldType } from '@grafana/data'; |
||||
import { config } from '@grafana/runtime'; |
||||
|
||||
import { DashboardQueryResult, getGrafanaSearcher, QueryResponse } from '../../service'; |
||||
import { getSearchStateManager, initialState } from '../../state/SearchStateManager'; |
||||
import { DashboardSearchItemType, SearchLayout, SearchState } from '../../types'; |
||||
|
||||
import { SearchView, SearchViewProps } from './SearchView'; |
||||
|
||||
jest.mock('@grafana/runtime', () => { |
||||
const originalModule = jest.requireActual('@grafana/runtime'); |
||||
return { |
||||
...originalModule, |
||||
reportInteraction: jest.fn(), |
||||
}; |
||||
}); |
||||
|
||||
const stateManager = getSearchStateManager(); |
||||
|
||||
const setup = (propOverrides?: Partial<SearchViewProps>, stateOverrides?: Partial<SearchState>) => { |
||||
const props: SearchViewProps = { |
||||
showManage: false, |
||||
keyboardEvents: {} as Observable<React.KeyboardEvent>, |
||||
...propOverrides, |
||||
}; |
||||
|
||||
stateManager.setState({ ...initialState, ...stateOverrides }); |
||||
|
||||
const mockStore = configureMockStore(); |
||||
const store = mockStore({ searchQuery: { ...initialState } }); |
||||
|
||||
render( |
||||
<Provider store={store}> |
||||
<SearchView {...props} /> |
||||
</Provider> |
||||
); |
||||
}; |
||||
|
||||
describe('SearchView', () => { |
||||
const folderData: DataFrame = { |
||||
fields: [ |
||||
{ |
||||
name: 'kind', |
||||
type: FieldType.string, |
||||
config: {}, |
||||
values: [DashboardSearchItemType.DashFolder], |
||||
}, |
||||
{ name: 'name', type: FieldType.string, config: {}, values: ['My folder 1'] }, |
||||
{ name: 'uid', type: FieldType.string, config: {}, values: ['my-folder-1'] }, |
||||
{ name: 'url', type: FieldType.string, config: {}, values: ['/my-folder-1'] }, |
||||
], |
||||
length: 1, |
||||
}; |
||||
|
||||
const mockSearchResult: QueryResponse = { |
||||
isItemLoaded: jest.fn(), |
||||
loadMoreItems: jest.fn(), |
||||
totalRows: folderData.length, |
||||
view: new DataFrameView<DashboardQueryResult>(folderData), |
||||
}; |
||||
|
||||
beforeAll(() => { |
||||
jest.spyOn(getGrafanaSearcher(), 'search').mockResolvedValue(mockSearchResult); |
||||
}); |
||||
|
||||
beforeEach(() => { |
||||
config.featureToggles.panelTitleSearch = false; |
||||
}); |
||||
|
||||
it('does not show checkboxes or manage actions if showManage is false', async () => { |
||||
setup(); |
||||
await waitFor(() => expect(screen.queryAllByRole('checkbox')).toHaveLength(0)); |
||||
expect(screen.queryByTestId('manage-actions')).not.toBeInTheDocument(); |
||||
}); |
||||
|
||||
it('shows checkboxes if showManage is true', async () => { |
||||
setup({ showManage: true }); |
||||
await waitFor(() => expect(screen.queryAllByRole('checkbox')).toHaveLength(2)); |
||||
}); |
||||
|
||||
it('shows the manage actions if show manage is true and the user clicked a checkbox', async () => { |
||||
setup({ showManage: true }); |
||||
await waitFor(() => userEvent.click(screen.getAllByRole('checkbox')[0])); |
||||
|
||||
expect(screen.queryByTestId('manage-actions')).toBeInTheDocument(); |
||||
}); |
||||
|
||||
it('shows an empty state if no data returned', async () => { |
||||
jest.spyOn(getGrafanaSearcher(), 'search').mockResolvedValue({ |
||||
...mockSearchResult, |
||||
totalRows: 0, |
||||
view: new DataFrameView<DashboardQueryResult>({ fields: [], length: 0 }), |
||||
}); |
||||
|
||||
setup(undefined, { query: 'asdfasdfasdf' }); |
||||
|
||||
await waitFor(() => expect(screen.queryByText('No results found for your query.')).toBeInTheDocument()); |
||||
expect(screen.getByRole('button', { name: 'Clear search and filters' })).toBeInTheDocument(); |
||||
}); |
||||
|
||||
it('shows an empty state if no starred dashboard returned', async () => { |
||||
jest.spyOn(getGrafanaSearcher(), 'search').mockResolvedValue({ |
||||
...mockSearchResult, |
||||
totalRows: 0, |
||||
view: new DataFrameView<DashboardQueryResult>({ fields: [], length: 0 }), |
||||
}); |
||||
|
||||
setup(undefined, { starred: true }); |
||||
|
||||
await waitFor(() => expect(screen.queryByText('No results found for your query.')).toBeInTheDocument()); |
||||
expect(screen.getByRole('button', { name: 'Clear search and filters' })).toBeInTheDocument(); |
||||
}); |
||||
|
||||
it('shows empty folder cta for empty folder', async () => { |
||||
jest.spyOn(getGrafanaSearcher(), 'search').mockResolvedValue({ |
||||
...mockSearchResult, |
||||
totalRows: 0, |
||||
view: new DataFrameView<DashboardQueryResult>({ fields: [], length: 0 }), |
||||
}); |
||||
|
||||
setup( |
||||
{ |
||||
folderDTO: { |
||||
id: 1, |
||||
uid: 'abc', |
||||
title: 'morning coffee', |
||||
url: '/morningcoffee', |
||||
version: 1, |
||||
canSave: true, |
||||
canEdit: true, |
||||
canAdmin: true, |
||||
canDelete: true, |
||||
created: '', |
||||
createdBy: '', |
||||
hasAcl: false, |
||||
updated: '', |
||||
updatedBy: '', |
||||
}, |
||||
}, |
||||
undefined |
||||
); |
||||
|
||||
await waitFor(() => expect(screen.queryByText("This folder doesn't have any dashboards yet")).toBeInTheDocument()); |
||||
}); |
||||
|
||||
describe('include panels', () => { |
||||
it('should be enabled when layout is list', async () => { |
||||
config.featureToggles.panelTitleSearch = true; |
||||
setup({}, { layout: SearchLayout.List }); |
||||
|
||||
await waitFor(() => expect(screen.getByLabelText(/include panels/i)).toBeInTheDocument()); |
||||
expect(screen.getByTestId('include-panels')).toBeEnabled(); |
||||
}); |
||||
|
||||
it('should be disabled when layout is folder', async () => { |
||||
config.featureToggles.panelTitleSearch = true; |
||||
setup({}, { layout: SearchLayout.Folders }); |
||||
|
||||
await waitFor(() => expect(screen.getByLabelText(/include panels/i)).toBeInTheDocument()); |
||||
expect(screen.getByTestId('include-panels')).toBeDisabled(); |
||||
}); |
||||
}); |
||||
}); |
||||
@ -1,221 +0,0 @@ |
||||
import { css } from '@emotion/css'; |
||||
import React, { useCallback, useState } from 'react'; |
||||
import { useDebounce } from 'react-use'; |
||||
import AutoSizer from 'react-virtualized-auto-sizer'; |
||||
import { Observable } from 'rxjs'; |
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data'; |
||||
import { useStyles2, Spinner, Button } from '@grafana/ui'; |
||||
import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA'; |
||||
import { Trans } from 'app/core/internationalization'; |
||||
import { newBrowseDashboardsEnabled } from 'app/features/browse-dashboards/featureFlag'; |
||||
import { FolderDTO } from 'app/types'; |
||||
|
||||
import { getGrafanaSearcher } from '../../service'; |
||||
import { getSearchStateManager } from '../../state/SearchStateManager'; |
||||
import { SearchLayout, DashboardViewItem } from '../../types'; |
||||
import { newSearchSelection, updateSearchSelection } from '../selection'; |
||||
|
||||
import { ActionRow, getValidQueryLayout } from './ActionRow'; |
||||
import { FolderSection } from './FolderSection'; |
||||
import { ManageActions } from './ManageActions'; |
||||
import { RootFolderView } from './RootFolderView'; |
||||
import { SearchResultsCards } from './SearchResultsCards'; |
||||
import { SearchResultsTable, SearchResultsProps } from './SearchResultsTable'; |
||||
|
||||
export type SearchViewProps = { |
||||
showManage: boolean; |
||||
folderDTO?: FolderDTO; |
||||
hidePseudoFolders?: boolean; // Recent + starred
|
||||
keyboardEvents: Observable<React.KeyboardEvent>; |
||||
}; |
||||
|
||||
export const SearchView = ({ showManage, folderDTO, hidePseudoFolders, keyboardEvents }: SearchViewProps) => { |
||||
const styles = useStyles2(getStyles); |
||||
const stateManager = getSearchStateManager(); // State is initialized from URL by parent component
|
||||
const state = stateManager.useState(); |
||||
|
||||
const [searchSelection, setSearchSelection] = useState(newSearchSelection()); |
||||
const layout = getValidQueryLayout(state); |
||||
const isFolders = layout === SearchLayout.Folders; |
||||
|
||||
const [listKey, setListKey] = useState(Date.now()); |
||||
|
||||
// Search usage reporting
|
||||
useDebounce(stateManager.onReportSearchUsage, 1000, []); |
||||
|
||||
const clearSelection = useCallback(() => { |
||||
searchSelection.items.clear(); |
||||
setSearchSelection({ ...searchSelection }); |
||||
}, [searchSelection]); |
||||
|
||||
const toggleSelection = useCallback( |
||||
(kind: string, uid: string) => { |
||||
const current = searchSelection.isSelected(kind, uid); |
||||
setSearchSelection(updateSearchSelection(searchSelection, !current, kind, [uid])); |
||||
}, |
||||
[searchSelection] |
||||
); |
||||
|
||||
// function to update items when dashboards or folders are moved or deleted
|
||||
const onChangeItemsList = async () => { |
||||
// clean up search selection
|
||||
clearSelection(); |
||||
setListKey(Date.now()); |
||||
// trigger again the search to the backend
|
||||
stateManager.onQueryChange(state.query); |
||||
}; |
||||
|
||||
const renderResults = () => { |
||||
const value = state.result; |
||||
|
||||
if ((!value || !value.totalRows) && !isFolders) { |
||||
if (state.loading && !value) { |
||||
return <Spinner />; |
||||
} |
||||
|
||||
return ( |
||||
<div className={styles.noResults}> |
||||
<div> |
||||
<Trans i18nKey="search-view.no-results.text">No results found for your query.</Trans> |
||||
</div> |
||||
<br /> |
||||
<Button variant="secondary" onClick={stateManager.onClearSearchAndFilters}> |
||||
<Trans i18nKey="search-view.no-results.clear">Clear search and filters</Trans> |
||||
</Button> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
const selection = showManage ? searchSelection.isSelected : undefined; |
||||
|
||||
if (layout === SearchLayout.Folders) { |
||||
if (folderDTO) { |
||||
return ( |
||||
<FolderSection |
||||
section={sectionForFolderView(folderDTO)} |
||||
selection={selection} |
||||
selectionToggle={toggleSelection} |
||||
onTagSelected={stateManager.onAddTag} |
||||
renderStandaloneBody={true} |
||||
tags={state.tag} |
||||
key={listKey} |
||||
onClickItem={stateManager.onSearchItemClicked} |
||||
/> |
||||
); |
||||
} |
||||
return ( |
||||
<RootFolderView |
||||
key={listKey} |
||||
selection={selection} |
||||
selectionToggle={toggleSelection} |
||||
tags={state.tag} |
||||
onTagSelected={stateManager.onAddTag} |
||||
hidePseudoFolders={hidePseudoFolders} |
||||
onClickItem={stateManager.onSearchItemClicked} |
||||
/> |
||||
); |
||||
} |
||||
|
||||
return ( |
||||
<div style={{ height: '100%', width: '100%' }}> |
||||
<AutoSizer> |
||||
{({ width, height }) => { |
||||
const props: SearchResultsProps = { |
||||
response: value!, |
||||
selection, |
||||
selectionToggle: toggleSelection, |
||||
clearSelection, |
||||
width: width, |
||||
height: height, |
||||
onTagSelected: stateManager.onAddTag, |
||||
keyboardEvents, |
||||
onDatasourceChange: state.datasource ? stateManager.onDatasourceChange : undefined, |
||||
onClickItem: stateManager.onSearchItemClicked, |
||||
}; |
||||
|
||||
if (width < 800) { |
||||
return <SearchResultsCards {...props} />; |
||||
} |
||||
|
||||
return <SearchResultsTable {...props} />; |
||||
}} |
||||
</AutoSizer> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
if ( |
||||
folderDTO && |
||||
// With nested folders, SearchView doesn't know if it's fetched all children
|
||||
// of a folder so don't show empty state here.
|
||||
!newBrowseDashboardsEnabled() && |
||||
!state.loading && |
||||
!state.result?.totalRows && |
||||
!stateManager.hasSearchFilters() |
||||
) { |
||||
return ( |
||||
<EmptyListCTA |
||||
title="This folder doesn't have any dashboards yet" |
||||
buttonIcon="plus" |
||||
buttonTitle="Create Dashboard" |
||||
buttonLink={`dashboard/new?folderUid=${folderDTO.uid}`} |
||||
proTip="Add/move dashboards to your folder at ->" |
||||
proTipLink="dashboards" |
||||
proTipLinkTitle="Manage dashboards" |
||||
proTipTarget="" |
||||
/> |
||||
); |
||||
} |
||||
|
||||
return ( |
||||
<> |
||||
{Boolean(searchSelection.items.size > 0) ? ( |
||||
<ManageActions items={searchSelection.items} onChange={onChangeItemsList} clearSelection={clearSelection} /> |
||||
) : ( |
||||
<ActionRow |
||||
onLayoutChange={stateManager.onLayoutChange} |
||||
showStarredFilter={hidePseudoFolders} |
||||
onStarredFilterChange={!hidePseudoFolders ? undefined : stateManager.onStarredFilterChange} |
||||
onSortChange={stateManager.onSortChange} |
||||
onTagFilterChange={stateManager.onTagFilterChange} |
||||
getTagOptions={stateManager.getTagOptions} |
||||
getSortOptions={getGrafanaSearcher().getSortOptions} |
||||
sortPlaceholder={getGrafanaSearcher().sortPlaceholder} |
||||
onDatasourceChange={stateManager.onDatasourceChange} |
||||
onPanelTypeChange={stateManager.onPanelTypeChange} |
||||
state={state} |
||||
includePanels={state.includePanels!} |
||||
onSetIncludePanels={stateManager.onSetIncludePanels} |
||||
/> |
||||
)} |
||||
|
||||
{renderResults()} |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({ |
||||
searchInput: css` |
||||
margin-bottom: 6px; |
||||
min-height: ${theme.spacing(4)}; |
||||
`,
|
||||
unsupported: css` |
||||
padding: 10px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
height: 100%; |
||||
font-size: 18px; |
||||
`,
|
||||
noResults: css` |
||||
padding: ${theme.v1.spacing.md}; |
||||
background: ${theme.v1.colors.bg2}; |
||||
font-style: italic; |
||||
margin-top: ${theme.v1.spacing.md}; |
||||
`,
|
||||
}); |
||||
|
||||
function sectionForFolderView(folderDTO: FolderDTO): DashboardViewItem { |
||||
return { uid: folderDTO.uid, kind: 'folder', title: folderDTO.title }; |
||||
} |
||||
Loading…
Reference in new issue