From bb48417ba05dad6931de6d7264a0c0ba913a927f Mon Sep 17 00:00:00 2001
From: Laura Benz <48948963+L-M-K-B@users.noreply.github.com>
Date: Thu, 13 Jul 2023 17:00:28 +0200
Subject: [PATCH] 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
---
 .../components/BrowseView.test.tsx            | 15 ++++++++++-
 .../components/BrowseView.tsx                 | 25 +++++++++++--------
 2 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/public/app/features/browse-dashboards/components/BrowseView.test.tsx b/public/app/features/browse-dashboards/components/BrowseView.test.tsx
index 608bdd6490c..b0a1ade87f1 100644
--- a/public/app/features/browse-dashboards/components/BrowseView.test.tsx
+++ b/public/app/features/browse-dashboards/components/BrowseView.test.tsx
@@ -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) {
diff --git a/public/app/features/browse-dashboards/components/BrowseView.tsx b/public/app/features/browse-dashboards/components/BrowseView.tsx
index 21baa345355..4c657da02db 100644
--- a/public/app/features/browse-dashboards/components/BrowseView.tsx
+++ b/public/app/features/browse-dashboards/components/BrowseView.tsx
@@ -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>
     );
   }