fix(alert/report): bulk select mode should be deactivated (#12977)

* close bulk delete when switch between alert and report

* update test for alert/report list

superset-frontend/spec/javascripts/views/CRUD/alert/AlertList_spec.jsx

@@ -83,15 +83,23 @@ fetchMock.put(alertsEndpoint, { ...mockalerts[0], active: false });
 fetchMock.delete(alertEndpoint, {});
 fetchMock.delete(alertsEndpoint, {});
 
-describe('AlertList', () => {
-  const wrapper = mount(
+async function mountAndWait(props = {}) {
+  const mounted = mount(
     <Provider store={store}>
-      <AlertList store={store} user={mockUser} />
+      <AlertList store={store} user={mockUser} {...props} />
     </Provider>,
   );
 
+  await waitForComponentToPaint(mounted);
+
+  return mounted;
+}
+
+describe('AlertList', () => {
+  let wrapper;
+
   beforeAll(async () => {
-    await waitForComponentToPaint(wrapper);
+    wrapper = await mountAndWait();
   });
 
   it('renders', async () => {
@@ -147,4 +155,30 @@ describe('AlertList', () => {
       mockalerts.length + 1, // 1 for each row and 1 for select all
     );
   });
+
+  it('hides bulk actions when switch between alert and report list', async () => {
+    expect(wrapper.find(IndeterminateCheckbox)).toHaveLength(
+      mockalerts.length + 1,
+    );
+    expect(wrapper.find('[data-test="alert-list"]').hasClass('active')).toBe(
+      true,
+    );
+    expect(wrapper.find('[data-test="report-list"]').hasClass('active')).toBe(
+      false,
+    );
+
+    const reportWrapper = await mountAndWait({ isReportEnabled: true });
+
+    expect(fetchMock.calls(/report\/\?q/)[2][0]).toMatchInlineSnapshot(
+      `"http://localhost/api/v1/report/?q=(filters:!((col:type,opr:eq,value:Report)),order_column:name,order_direction:desc,page:0,page_size:25)"`,
+    );
+
+    expect(
+      reportWrapper.find('[data-test="report-list"]').hasClass('active'),
+    ).toBe(true);
+    expect(
+      reportWrapper.find('[data-test="alert-list"]').hasClass('active'),
+    ).toBe(false);
+    expect(reportWrapper.find(IndeterminateCheckbox)).toHaveLength(0);
+  });
 });

superset-frontend/src/components/Menu/SubMenu.tsx

@@ -91,6 +91,7 @@ type MenuChild = {
   url?: string;
   usesRouter?: boolean;
   onClick?: () => void;
+  'data-test'?: string;
 };
 
 export interface ButtonProps {
@@ -140,6 +141,7 @@ const SubMenu: React.FunctionComponent<SubMenuProps> = props => {
                 return (
                   <React.Fragment key={tab.label}>
                     <li
+                      data-test={tab['data-test']}
                       className={tab.name === props.activeChild ? 'active' : ''}
                     >
                       <div>

superset-frontend/src/views/CRUD/alert/AlertList.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 import { t, SupersetClient, makeApi, styled } from '@superset-ui/core';
 import moment from 'moment';
@@ -137,6 +137,12 @@ function AlertList({
   const canDelete = hasPerm('can_write');
   const canCreate = hasPerm('can_write');
 
+  useEffect(() => {
+    if (bulkSelectEnabled && canDelete) {
+      toggleBulkSelect();
+    }
+  }, [isReportEnabled]);
+
   const handleAlertDelete = ({ id, name }: AlertObject) => {
     SupersetClient.delete({
       endpoint: `/api/v1/report/${id}`,
@@ -415,12 +421,14 @@ function AlertList({
             label: t('Alerts'),
             url: '/alert/list/',
             usesRouter: true,
+            'data-test': 'alert-list',
           },
           {
             name: 'Reports',
             label: t('Reports'),
             url: '/report/list/',
             usesRouter: true,
+            'data-test': 'report-list',
           },
         ]}
         buttons={subMenuButtons}