fix: Center each import icon and add a tooltip II (#14192)

superset-frontend/spec/javascripts/views/CRUD/chart/ChartList_spec.jsx

@@ -24,6 +24,10 @@ import fetchMock from 'fetch-mock';
 import * as featureFlags from 'src/featureFlags';
 import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
 import { styledMount as mount } from 'spec/helpers/theming';
+import { render, screen, cleanup } from 'spec/helpers/testing-library';
+import userEvent from '@testing-library/user-event';
+import { QueryParamProvider } from 'use-query-params';
+import { act } from 'react-dom/test-utils';
 
 import ChartList from 'src/views/CRUD/chart/ChartList';
 import ConfirmStatusChange from 'src/components/ConfirmStatusChange';
@@ -156,3 +160,44 @@ describe('ChartList', () => {
     expect(wrapper.find(ConfirmStatusChange)).toExist();
   });
 });
+
+describe('RTL', () => {
+  async function renderAndWait() {
+    const mounted = act(async () => {
+      const mockedProps = {};
+      render(
+        <QueryParamProvider>
+          <ChartList {...mockedProps} user={mockUser} />
+        </QueryParamProvider>,
+        { useRedux: true },
+      );
+    });
+
+    return mounted;
+  }
+
+  let isFeatureEnabledMock;
+  beforeEach(async () => {
+    isFeatureEnabledMock = jest
+      .spyOn(featureFlags, 'isFeatureEnabled')
+      .mockImplementation(() => true);
+    await renderAndWait();
+  });
+
+  afterEach(() => {
+    cleanup();
+    isFeatureEnabledMock.mockRestore();
+  });
+
+  it('renders an "Import Chart" tooltip under import button', async () => {
+    const importButton = screen.getByTestId('import-button');
+    userEvent.hover(importButton);
+
+    await screen.findByRole('tooltip');
+    const importTooltip = screen.getByRole('tooltip', {
+      name: 'Import charts',
+    });
+
+    expect(importTooltip).toBeInTheDocument();
+  });
+});

superset-frontend/spec/javascripts/views/CRUD/dashboard/DashboardList_spec.jsx

@@ -25,6 +25,10 @@ import * as featureFlags from 'src/featureFlags';
 
 import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
 import { styledMount as mount } from 'spec/helpers/theming';
+import { render, screen, cleanup } from 'spec/helpers/testing-library';
+import userEvent from '@testing-library/user-event';
+import { QueryParamProvider } from 'use-query-params';
+import { act } from 'react-dom/test-utils';
 
 import ConfirmStatusChange from 'src/components/ConfirmStatusChange';
 import DashboardList from 'src/views/CRUD/dashboard/DashboardList';
@@ -172,3 +176,44 @@ describe('DashboardList', () => {
     expect(wrapper.find(ConfirmStatusChange)).toExist();
   });
 });
+
+describe('RTL', () => {
+  async function renderAndWait() {
+    const mounted = act(async () => {
+      const mockedProps = {};
+      render(
+        <QueryParamProvider>
+          <DashboardList {...mockedProps} user={mockUser} />
+        </QueryParamProvider>,
+        { useRedux: true },
+      );
+    });
+
+    return mounted;
+  }
+
+  let isFeatureEnabledMock;
+  beforeEach(async () => {
+    isFeatureEnabledMock = jest
+      .spyOn(featureFlags, 'isFeatureEnabled')
+      .mockImplementation(() => true);
+    await renderAndWait();
+  });
+
+  afterEach(() => {
+    cleanup();
+    isFeatureEnabledMock.mockRestore();
+  });
+
+  it('renders an "Import Dashboard" tooltip under import button', async () => {
+    const importButton = screen.getByTestId('import-button');
+    userEvent.hover(importButton);
+
+    await screen.findByRole('tooltip');
+    const importTooltip = screen.getByRole('tooltip', {
+      name: 'Import dashboards',
+    });
+
+    expect(importTooltip).toBeInTheDocument();
+  });
+});

superset-frontend/spec/javascripts/views/CRUD/data/database/DatabaseList_spec.jsx

@@ -22,6 +22,10 @@ import configureStore from 'redux-mock-store';
 import fetchMock from 'fetch-mock';
 import { Provider } from 'react-redux';
 import { styledMount as mount } from 'spec/helpers/theming';
+import { render, screen, cleanup } from 'spec/helpers/testing-library';
+import userEvent from '@testing-library/user-event';
+import { QueryParamProvider } from 'use-query-params';
+import * as featureFlags from 'src/featureFlags';
 
 import DatabaseList from 'src/views/CRUD/data/database/DatabaseList';
 import DatabaseModal from 'src/views/CRUD/data/database/DatabaseModal';
@@ -178,3 +182,43 @@ describe('DatabaseList', () => {
     );
   });
 });
+
+describe('RTL', () => {
+  async function renderAndWait() {
+    const mounted = act(async () => {
+      render(
+        <QueryParamProvider>
+          <DatabaseList user={mockUser} />
+        </QueryParamProvider>,
+        { useRedux: true },
+      );
+    });
+
+    return mounted;
+  }
+
+  let isFeatureEnabledMock;
+  beforeEach(async () => {
+    isFeatureEnabledMock = jest
+      .spyOn(featureFlags, 'isFeatureEnabled')
+      .mockImplementation(() => true);
+    await renderAndWait();
+  });
+
+  afterEach(() => {
+    cleanup();
+    isFeatureEnabledMock.mockRestore();
+  });
+
+  it('renders an "Import Database" tooltip under import button', async () => {
+    const importButton = screen.getByTestId('import-button');
+    userEvent.hover(importButton);
+
+    await screen.findByRole('tooltip');
+    const importTooltip = screen.getByRole('tooltip', {
+      name: 'Import databases',
+    });
+
+    expect(importTooltip).toBeInTheDocument();
+  });
+});

superset-frontend/spec/javascripts/views/CRUD/data/dataset/DatasetList_spec.jsx

@@ -22,6 +22,10 @@ import configureStore from 'redux-mock-store';
 import fetchMock from 'fetch-mock';
 import { Provider } from 'react-redux';
 import { styledMount as mount } from 'spec/helpers/theming';
+import { render, screen, cleanup } from 'spec/helpers/testing-library';
+import userEvent from '@testing-library/user-event';
+import { QueryParamProvider } from 'use-query-params';
+import * as featureFlags from 'src/featureFlags';
 
 import DatasetList from 'src/views/CRUD/data/dataset/DatasetList';
 import ListView from 'src/components/ListView';
@@ -175,3 +179,44 @@ describe('DatasetList', () => {
     ).toMatchInlineSnapshot(`"3 Selected (2 Physical, 1 Virtual)"`);
   });
 });
+
+describe('RTL', () => {
+  async function renderAndWait() {
+    const mounted = act(async () => {
+      const mockedProps = {};
+      render(
+        <QueryParamProvider>
+          <DatasetList {...mockedProps} user={mockUser} />
+        </QueryParamProvider>,
+        { useRedux: true },
+      );
+    });
+
+    return mounted;
+  }
+
+  let isFeatureEnabledMock;
+  beforeEach(async () => {
+    isFeatureEnabledMock = jest
+      .spyOn(featureFlags, 'isFeatureEnabled')
+      .mockImplementation(() => true);
+    await renderAndWait();
+  });
+
+  afterEach(() => {
+    cleanup();
+    isFeatureEnabledMock.mockRestore();
+  });
+
+  it('renders an "Import Dataset" tooltip under import button', async () => {
+    const importButton = screen.getByTestId('import-button');
+    userEvent.hover(importButton);
+
+    await screen.findByRole('tooltip');
+    const importTooltip = screen.getByRole('tooltip', {
+      name: 'Import datasets',
+    });
+
+    expect(importTooltip).toBeInTheDocument();
+  });
+});

superset-frontend/spec/javascripts/views/CRUD/data/savedquery/SavedQueryList_spec.jsx

@@ -22,7 +22,7 @@ import configureStore from 'redux-mock-store';
 import { Provider } from 'react-redux';
 import fetchMock from 'fetch-mock';
 import { styledMount as mount } from 'spec/helpers/theming';
-import { render, screen, cleanup } from 'spec/helpers/testing-library';
+import { render, screen, cleanup, waitFor } from 'spec/helpers/testing-library';
 import userEvent from '@testing-library/user-event';
 import { QueryParamProvider } from 'use-query-params';
 import { act } from 'react-dom/test-utils';
@@ -229,10 +229,9 @@ describe('RTL', () => {
     const mounted = act(async () => {
       render(
         <QueryParamProvider>
-          <Provider store={store}>
-            <SavedQueryList />
-          </Provider>
+          <SavedQueryList />
         </QueryParamProvider>,
+        { useRedux: true },
       );
     });
 
@@ -296,26 +295,39 @@ describe('RTL', () => {
 
   it('renders an import button in the submenu', () => {
     // Grab and assert that import saved query button is visible
-    const importSavedQueryButton = screen.getAllByRole('button')[2];
-    expect(importSavedQueryButton).toBeVisible();
+    const importButton = screen.getByTestId('import-button');
+    expect(importButton).toBeVisible();
+  });
+
+  it('renders an "Import Saved Query" tooltip under import button', async () => {
+    const importButton = screen.getByTestId('import-button');
+    userEvent.hover(importButton);
+    waitFor(() => {
+      expect(importButton).toHaveClass('ant-tooltip-open');
+      screen.findByTestId('import-tooltip-test');
+      const importTooltip = screen.getByRole('tooltip', {
+        name: 'Import queries',
+      });
+      expect(importTooltip).toBeInTheDocument();
+    });
   });
 
   it('renders an import model when import button is clicked', async () => {
     // Grab and click import saved query button to reveal modal
-    const importSavedQueryButton = screen.getAllByRole('button')[2];
-    userEvent.click(importSavedQueryButton);
+    const importButton = screen.getByTestId('import-button');
+    userEvent.click(importButton);
 
     // Grab and assert that saved query import modal's heading is visible
     const importSavedQueryModalHeading = screen.getByRole('heading', {
-      name: /import saved query/i,
+      name: 'Import queries',
     });
     expect(importSavedQueryModalHeading).toBeVisible();
   });
 
   it('imports a saved query', () => {
     // Grab and click import saved query button to reveal modal
-    const importSavedQueryButton = screen.getAllByRole('button')[2];
-    userEvent.click(importSavedQueryButton);
+    const importButton = screen.getByTestId('import-button');
+    userEvent.click(importButton);
 
     // Grab "Choose File" input from import modal
     const chooseFileInput = screen.getByLabelText(/file\*/i);