Browse: Hide dashboard actions if user does not have enough permission (#55218)

* hide dashboard actions if user does not have enough permission

* improve test description

public/app/features/search/components/ManageDashboards.test.tsx

@@ -0,0 +1,63 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { Provider } from 'react-redux';
+
+import { contextSrv } from 'app/core/services/context_srv';
+import { configureStore } from 'app/store/configureStore';
+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: {},
+      hasAccess: jest.fn(() => false),
+    },
+  };
+});
+
+const setup = async (options?: { folder?: FolderDTO }) => {
+  const { folder = {} as FolderDTO } = options || {};
+  const store = configureStore();
+
+  const { rerender } = await waitFor(() =>
+    render(
+      <Provider store={store}>
+        <ManageDashboardsNew folder={folder} />
+      </Provider>
+    )
+  );
+
+  return { rerender, store };
+};
+
+jest.spyOn(console, 'error').mockImplementation();
+
+describe('ManageDashboards', () => {
+  beforeEach(() => {
+    (contextSrv.hasAccess as jest.Mock).mockClear();
+  });
+  it("should hide and show dashboard actions based on user's permissions", async () => {
+    (contextSrv.hasAccess as jest.Mock).mockReturnValue(false);
+
+    const { rerender, store } = await setup();
+
+    expect(screen.queryByRole('button', { name: /new/i })).not.toBeInTheDocument();
+
+    (contextSrv.hasAccess as jest.Mock).mockReturnValue(true);
+    await waitFor(() =>
+      rerender(
+        <Provider store={store}>
+          <ManageDashboardsNew folder={{ canEdit: true } as FolderDTO} />
+        </Provider>
+      )
+    );
+
+    expect(screen.getByRole('button', { name: /new/i })).toBeInTheDocument();
+  });
+});

public/app/features/search/components/ManageDashboardsNew.tsx

@@ -29,15 +29,18 @@ export const ManageDashboardsNew = React.memo(({ folder }: Props) => {
   const folderId = folder?.id;
   // const folderUid = folder?.uid;
   const canSave = folder?.canSave;
+  const { isEditor } = contextSrv;
   const hasEditPermissionInFolders = folder ? canSave : contextSrv.hasEditPermissionInFolders;
-
+  const canCreateFolders = contextSrv.hasAccess(AccessControlAction.FoldersCreate, isEditor);
+  const canCreateDashboards = contextSrv.hasAccess(
+    AccessControlAction.DashboardsCreate,
+    hasEditPermissionInFolders || !!canSave
+  );
   let [includePanels, setIncludePanels] = useLocalStorage<boolean>(SEARCH_PANELS_LOCAL_STORAGE_KEY, true);
   if (!config.featureToggles.panelTitleSearch) {
     includePanels = false;
   }
 
-  const { isEditor } = contextSrv;
-
   const onSearchQueryChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     onQueryChange(e.currentTarget.value);
   };
@@ -57,14 +60,13 @@ export const ManageDashboardsNew = React.memo(({ folder }: Props) => {
             suffix={false ? <Spinner /> : null}
           />
         </div>
-        <DashboardActions
-          folderId={folderId}
-          canCreateFolders={contextSrv.hasAccess(AccessControlAction.FoldersCreate, isEditor)}
-          canCreateDashboards={contextSrv.hasAccess(
-            AccessControlAction.DashboardsCreate,
-            hasEditPermissionInFolders || !!canSave
-          )}
-        />
+        {canCreateFolders && canCreateDashboards && (
+          <DashboardActions
+            folderId={folderId}
+            canCreateFolders={canCreateFolders}
+            canCreateDashboards={canCreateDashboards}
+          />
+        )}
       </div>
 
       <SearchView