Nested folders: Only show edit title button if user has permissions (#71426)

only show edit title button if user has permissions

public/app/features/browse-dashboards/BrowseDashboardsPage.test.tsx

@@ -185,6 +185,12 @@ describe('browse-dashboards BrowseDashboardsPage', () => {
       expect(screen.queryByRole('button', { name: 'Folder actions' })).not.toBeInTheDocument();
     });
 
+    it('does not show an "Edit title" button', async () => {
+      render(<BrowseDashboardsPage {...props} />);
+      expect(await screen.findByRole('heading', { name: 'Dashboards' })).toBeInTheDocument();
+      expect(screen.queryByRole('button', { name: 'Edit title' })).not.toBeInTheDocument();
+    });
+
     it('does not show any tabs', async () => {
       render(<BrowseDashboardsPage {...props} />);
       expect(await screen.findByRole('heading', { name: 'Dashboards' })).toBeInTheDocument();
@@ -289,6 +295,24 @@ describe('browse-dashboards BrowseDashboardsPage', () => {
       expect(screen.queryByRole('button', { name: 'Folder actions' })).not.toBeInTheDocument();
     });
 
+    it('shows an "Edit title" button', async () => {
+      render(<BrowseDashboardsPage {...props} />);
+      expect(await screen.findByRole('button', { name: 'Edit title' })).toBeInTheDocument();
+    });
+
+    it('does not show the "Edit title" button if the user does not have permissions', async () => {
+      jest.spyOn(permissions, 'getFolderPermissions').mockImplementation(() => {
+        return {
+          canEditInFolder: false,
+          canCreateDashboards: false,
+          canCreateFolder: false,
+        };
+      });
+      render(<BrowseDashboardsPage {...props} />);
+      expect(await screen.findByRole('heading', { name: folderA.item.title })).toBeInTheDocument();
+      expect(screen.queryByRole('button', { name: 'Edit title' })).not.toBeInTheDocument();
+    });
+
     it('displays all the folder tabs and shows the "Dashboards" tab as selected', async () => {
       render(<BrowseDashboardsPage {...props} />);
       expect(await screen.findByRole('tab', { name: 'Tab Dashboards' })).toBeInTheDocument();

public/app/features/browse-dashboards/BrowseDashboardsPage.tsx

@@ -80,25 +80,24 @@ const BrowseDashboardsPage = memo(({ match }: Props) => {
 
   const { canEditInFolder, canCreateDashboards, canCreateFolder } = getFolderPermissions(folderDTO);
 
-  const onEditTitle = folderUID
+  const showEditTitle = canEditInFolder && folderUID;
-    ? async (newValue: string) => {
+  const onEditTitle = async (newValue: string) => {
-        if (folderDTO) {
+    if (folderDTO) {
-          const result = await saveFolder({
+      const result = await saveFolder({
-            ...folderDTO,
+        ...folderDTO,
-            title: newValue,
+        title: newValue,
-          });
+      });
-          if ('error' in result) {
+      if ('error' in result) {
-            throw result.error;
+        throw result.error;
-          }
-        }
       }
-    : undefined;
+    }
+  };
 
   return (
     <Page
       navId="dashboards/browse"
       pageNav={navModel}
-      onEditTitle={onEditTitle}
+      onEditTitle={showEditTitle ? onEditTitle : undefined}
       actions={
         <>
           {folderDTO && <FolderActionsButton folder={folderDTO} />}