refactor: remove cta for users with reading rights (#71380)

* refactor: remove cta for users with reading rights

* feat: add tests

* refactor: replace folder uid

* refactor: replace folder uid
This commit is contained in:
Laura Benz 2023-07-13 17:00:28 +02:00 committed by GitHub
parent 3a21061dbb
commit bb48417ba0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 11 deletions

View File

@ -9,7 +9,8 @@ import { wellFormedTree } from '../fixtures/dashboardsTreeItem.fixture';
import { BrowseView } from './BrowseView';
const [mockTree, { folderA, folderA_folderA, folderA_folderB, folderA_folderB_dashbdB, dashbdD }] = wellFormedTree();
const [mockTree, { folderA, folderA_folderA, folderA_folderB, folderA_folderB_dashbdB, dashbdD, folderB_empty }] =
wellFormedTree();
function render(...[ui, options]: Parameters<typeof rtlRender>) {
rtlRender(<TestProvider>{ui}</TestProvider>, options);
@ -143,6 +144,18 @@ describe('browse-dashboards BrowseView', () => {
expect(grandparentCheckbox).not.toBeChecked();
expect(grandparentCheckbox).toBePartiallyChecked();
});
describe('when there is no item in the folder', () => {
it('shows a CTA for creating a dashboard if the user has editor rights', async () => {
render(<BrowseView canSelect={true} folderUID={folderB_empty.item.uid} width={WIDTH} height={HEIGHT} />);
expect(await screen.findByText('Create Dashboard')).toBeInTheDocument();
});
it('shows a simple message if the user has viewer rights', async () => {
render(<BrowseView canSelect={false} folderUID={folderB_empty.item.uid} width={WIDTH} height={HEIGHT} />);
expect(await screen.findByText('This folder is empty')).toBeInTheDocument();
});
});
});
async function expandFolder(uid: string) {

View File

@ -1,5 +1,6 @@
import React, { useCallback } from 'react';
import { CallToActionCard } from '@grafana/ui';
import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
import { DashboardViewItem } from 'app/features/search/types';
import { useDispatch } from 'app/types';
@ -115,16 +116,20 @@ export function BrowseView({ folderUID, width, height, canSelect }: BrowseViewPr
if (status === 'fulfilled' && flatTree.length === 0) {
return (
<div style={{ width }}>
<EmptyListCTA
title={folderUID ? "This folder doesn't have any dashboards yet" : 'No dashboards yet. Create your first!'}
buttonIcon="plus"
buttonTitle="Create Dashboard"
buttonLink={folderUID ? `dashboard/new?folderUid=${folderUID}` : 'dashboard/new'}
proTip={folderUID && 'Add/move dashboards to your folder at ->'}
proTipLink={folderUID && 'dashboards'}
proTipLinkTitle={folderUID && 'Browse dashboards'}
proTipTarget=""
/>
{canSelect ? (
<EmptyListCTA
title={folderUID ? "This folder doesn't have any dashboards yet" : 'No dashboards yet. Create your first!'}
buttonIcon="plus"
buttonTitle="Create Dashboard"
buttonLink={folderUID ? `dashboard/new?folderUid=${folderUID}` : 'dashboard/new'}
proTip={folderUID && 'Add/move dashboards to your folder at ->'}
proTipLink={folderUID && 'dashboards'}
proTipLinkTitle={folderUID && 'Browse dashboards'}
proTipTarget=""
/>
) : (
<CallToActionCard callToActionElement={<span>This folder is empty</span>} />
)}
</div>
);
}