SearchV2: Add unit test for ManageActions (#51131)

public/app/features/search/page/components/ManageActions.test.tsx

@@ -0,0 +1,121 @@
+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/FolderPicker', () => {
+  return {
+    FolderPicker: () => 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<any, any>();
+    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 the 2 selected dashboards to the following folder:/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<any, any>();
+      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<any, any>();
+    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();
+    });
+  });
+});

public/app/features/search/page/components/ManageActions.tsx

@@ -26,10 +26,7 @@ export function ManageActions({ items, folder, onChange, clearSelection }: Props
 
   const canMove = hasEditPermissionInFolders;
 
-  // TODO: check user permissions for delete, should not be able to delete if includes general folder and user don't have permissions
-  // There is not GENERAL_FOLDER_UID configured yet, we need to make sure to add it to the data.
   const selectedFolders = Array.from(items.get('folder') ?? []);
-  console.log({ selectedFolders });
   const includesGeneralFolder = selectedFolders.find((result) => result === GENERAL_FOLDER_UID);
 
   const canDelete = hasEditPermissionInFolders && !includesGeneralFolder;
@@ -45,7 +42,7 @@ export function ManageActions({ items, folder, onChange, clearSelection }: Props
   };
 
   return (
-    <div className={styles.actionRow}>
+    <div className={styles.actionRow} data-testid="manage-actions">
       <div className={styles.rowContainer}>
         <HorizontalGroup spacing="md" width="auto">
           <IconButton name={'check-square' as IconName} onClick={clearSelection} title="Uncheck everything" />