Migrate Bootstrap Alert to AntD (#12101) (#12122)

superset-frontend/.eslintrc.js

@@ -188,6 +188,7 @@ module.exports = {
         ],
         'jest/consistent-test-it': 'error',
         'no-only-tests/no-only-tests': 'error',
+        '@typescript-eslint/no-non-null-assertion': 0,
       },
     },
   ],

superset-frontend/cypress-base/cypress/integration/explore/visualizations/line.test.ts

@@ -29,7 +29,7 @@ describe('Visualization > Line', () => {
   it('should show validator error when no metric', () => {
     const formData = { ...LINE_CHART_DEFAULTS, metrics: [] };
     cy.visitChartByParams(JSON.stringify(formData));
-    cy.get('.alert-warning').contains(`"Metrics" cannot be empty`);
+    cy.get('.ant-alert-warning').contains(`"Metrics" cannot be empty`);
   });
 
   it('should preload mathjs', () => {
@@ -43,7 +43,7 @@ describe('Visualization > Line', () => {
   it('should not show validator error when metric added', () => {
     const formData = { ...LINE_CHART_DEFAULTS, metrics: [] };
     cy.visitChartByParams(JSON.stringify(formData));
-    cy.get('.alert-warning').contains(`"Metrics" cannot be empty`);
+    cy.get('.ant-alert-warning').contains(`"Metrics" cannot be empty`);
     cy.get('.text-danger').contains('Metrics');
 
     cy.get('[data-test=metrics]')
@@ -58,14 +58,14 @@ describe('Visualization > Line', () => {
     cy.get('[data-test="AdhocMetricEdit#save"]').contains('Save').click();
 
     cy.get('.text-danger').should('not.exist');
-    cy.get('.alert-warning').should('not.exist');
+    cy.get('.ant-alert-warning').should('not.exist');
   });
 
   it('should allow negative values in Y bounds', () => {
     cy.get('#controlSections-tab-display').click();
     cy.get('span').contains('Y Axis Bounds').scrollIntoView();
     cy.get('input[placeholder="Min"]').type('-0.1', { delay: 100 });
-    cy.get('.alert-warning').should('not.exist');
+    cy.get('.ant-alert-warning').should('not.exist');
   });
 
   it('should allow type to search color schemes', () => {

superset-frontend/spec/helpers/theming.ts

@@ -52,5 +52,5 @@ export function styledShallow(
       theme: supersetTheme,
       ...options?.wrappingComponentProps,
     },
-  }).dive();
+  });
 }

superset-frontend/spec/javascripts/components/ListView/ListView_spec.jsx

@@ -296,11 +296,7 @@ describe('ListView', () => {
   });
 
   it('allows disabling bulkSelect', () => {
-    wrapper
-      .find('[data-test="bulk-select-controls"]')
-      .at(0)
-      .props()
-      .onDismiss();
+    wrapper.find('[data-test="bulk-select-controls"]').at(0).props().onClose();
     expect(mockedProps.disableBulkSelect).toHaveBeenCalled();
   });
 

superset-frontend/spec/javascripts/dashboard/components/RefreshIntervalModal_spec.jsx

@@ -21,7 +21,7 @@ import { mount } from 'enzyme';
 
 import ModalTrigger from 'src/components/ModalTrigger';
 import RefreshIntervalModal from 'src/dashboard/components/RefreshIntervalModal';
-import { Alert } from 'react-bootstrap';
+import Alert from 'src/components/Alert';
 import { supersetTheme, ThemeProvider } from '@superset-ui/core';
 
 const getMountWrapper = props =>

superset-frontend/spec/javascripts/dashboard/components/nativeFilters/NativeFiltersModal_spec.tsx

@@ -21,8 +21,8 @@ import { styledMount as mount } from 'spec/helpers/theming';
 import { act } from 'react-dom/test-utils';
 import { ReactWrapper } from 'enzyme';
 import { Provider } from 'react-redux';
-import Alert from 'react-bootstrap/lib/Alert';
 import { FilterConfigModal } from 'src/dashboard/components/nativeFilters/FilterConfigModal/FilterConfigModal';
+import Alert from 'src/components/Alert';
 import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
 import { mockStore } from 'spec/fixtures/mockStore';
 

superset-frontend/spec/javascripts/messageToasts/components/Toast_spec.jsx

@@ -16,7 +16,6 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Alert } from 'react-bootstrap';
 import React from 'react';
 import { mount } from 'enzyme';
 import Toast from 'src/messageToasts/components/Toast';
@@ -31,20 +30,19 @@ const props = {
 const setup = overrideProps => mount(<Toast {...props} {...overrideProps} />);
 
 describe('Toast', () => {
-  it('should render an Alert', () => {
+  it('should render', () => {
     const wrapper = setup();
-    expect(wrapper.find(Alert)).toExist();
+    expect(wrapper.find('[data-test="toast-container"]')).toExist();
   });
 
-  it('should render toastText within the alert', () => {
+  it('should render toastText within the div', () => {
     const wrapper = setup();
-    const alert = wrapper.find(Alert);
-
-    expect(alert.childAt(0).childAt(1).text()).toBe(props.toast.text);
+    const container = wrapper.find('[data-test="toast-container"]');
+    expect(container.hostNodes().childAt(1).text()).toBe(props.toast.text);
   });
 
-  it('should call onCloseToast upon alert dismissal', async () => {
-    await act(
+  it('should call onCloseToast upon toast dismissal', async () =>
+    act(
       () =>
         new Promise(done => {
           const onCloseToast = id => {
@@ -53,13 +51,7 @@ describe('Toast', () => {
           };
 
           const wrapper = setup({ onCloseToast });
-          const handleClosePress = wrapper.find('[label="Close alert"]').props()
-            .onClick;
-
-          const alertProps = wrapper.find(Alert).props();
-          expect(alertProps.onDismiss).toBe(handleClosePress);
-          handleClosePress(); // there is a timeout for onCloseToast to be called
+          wrapper.find('[data-test="close-button"]').props().onClick();
         }),
-    );
-  });
+    ));
 });

superset-frontend/spec/javascripts/sqllab/ResultSet_spec.jsx

@@ -18,10 +18,13 @@
  */
 import React from 'react';
 import { shallow } from 'enzyme';
+import { styledMount } from 'spec/helpers/theming';
+import { Provider } from 'react-redux';
 import sinon from 'sinon';
-import { Alert } from 'react-bootstrap';
+import Alert from 'src/components/Alert';
 import ProgressBar from 'src/common/components/ProgressBar';
-
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
 import FilterableTable from 'src/components/FilterableTable/FilterableTable';
 import ExploreResultsButton from 'src/SqlLab/components/ExploreResultsButton';
 import ResultSet from 'src/SqlLab/components/ResultSet';
@@ -33,8 +36,12 @@ import {
   queries,
   runningQuery,
   stoppedQuery,
+  initialState,
 } from './fixtures';
 
+const mockStore = configureStore([thunk]);
+const store = mockStore(initialState);
+
 describe('ResultSet', () => {
   const clearQuerySpy = sinon.spy();
   const fetchQuerySpy = sinon.spy();
@@ -105,17 +112,18 @@ describe('ResultSet', () => {
       expect(wrapper.find(ExploreResultsButton)).toExist();
     });
     it('should render empty results', () => {
-      const wrapper = shallow(<ResultSet {...mockedProps} />);
-      const emptyResults = {
-        ...queries[0],
-        results: {
-          data: [],
-        },
+      const props = {
+        ...mockedProps,
+        query: { ...mockedProps.query, results: { data: [] } },
       };
-      wrapper.setProps({ query: emptyResults });
+      const wrapper = styledMount(
+        <Provider store={store}>
+          <ResultSet {...props} />
+        </Provider>,
+      );
       expect(wrapper.find(FilterableTable)).not.toExist();
       expect(wrapper.find(Alert)).toExist();
-      expect(wrapper.find(Alert).shallow().text()).toBe(
+      expect(wrapper.find(Alert).render().text()).toBe(
         'The query returned no data',
       );
     });

superset-frontend/spec/javascripts/sqllab/SouthPane_spec.jsx

@@ -81,12 +81,12 @@ describe('SouthPane', () => {
   let wrapper;
 
   it('should render offline when the state is offline', () => {
-    wrapper = getWrapper();
+    wrapper = getWrapper().dive();
     wrapper.setProps({ offline: true });
     expect(wrapper.childAt(0).text()).toBe(STATUS_OPTIONS.offline);
   });
   it('should pass latest query down to ResultSet component', () => {
-    wrapper = getWrapper();
+    wrapper = getWrapper().dive();
     expect(wrapper.find(ResultSet)).toExist();
     expect(wrapper.find(ResultSet).props().query.id).toEqual(
       mockedProps.latestQueryId,

superset-frontend/src/SqlLab/components/EstimateQueryCostButton.jsx

@@ -18,7 +18,7 @@
  */
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { Alert } from 'react-bootstrap';
+import Alert from 'src/components/Alert';
 import { t } from '@superset-ui/core';
 
 import TableView from 'src/components/TableView';
@@ -61,9 +61,11 @@ const EstimateQueryCostButton = props => {
   const renderModalBody = () => {
     if (props.queryCostEstimate.error !== null) {
       return (
-        <Alert key="query-estimate-error" bsStyle="danger">
-          {props.queryCostEstimate.error}
-        </Alert>
+        <Alert
+          key="query-estimate-error"
+          type="error"
+          message={props.queryCostEstimate.error}
+        />
       );
     }
     if (props.queryCostEstimate.completed) {

superset-frontend/src/SqlLab/components/ExploreResultsButton.jsx

@@ -21,7 +21,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import { Alert } from 'react-bootstrap';
+import Alert from 'src/components/Alert';
 import { t } from '@superset-ui/core';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 import shortid from 'shortid';
@@ -102,25 +102,32 @@ class ExploreResultsButton extends React.PureComponent {
 
   renderTimeoutWarning() {
     return (
-      <Alert bsStyle="warning">
-        {t(
-          'This query took %s seconds to run, ',
-          Math.round(this.getQueryDuration()),
-        ) +
-          t(
-            'and the explore view times out at %s seconds ',
-            this.props.timeout,
-          ) +
-          t(
-            'following this flow will most likely lead to your query timing out. ',
-          ) +
-          t(
-            'We recommend your summarize your data further before following that flow. ',
-          ) +
-          t('If activated you can use the ')}
-        <strong>CREATE TABLE AS </strong>
-        {t('feature to store a summarized data set that you can then explore.')}
-      </Alert>
+      <Alert
+        type="warning"
+        message={
+          <>
+            {t(
+              'This query took %s seconds to run, ',
+              Math.round(this.getQueryDuration()),
+            ) +
+              t(
+                'and the explore view times out at %s seconds ',
+                this.props.timeout,
+              ) +
+              t(
+                'following this flow will most likely lead to your query timing out. ',
+              ) +
+              t(
+                'We recommend your summarize your data further before following that flow. ',
+              ) +
+              t('If activated you can use the ')}
+            <strong>CREATE TABLE AS </strong>
+            {t(
+              'feature to store a summarized data set that you can then explore.',
+            )}
+          </>
+        }
+      />
     );
   }
 

superset-frontend/src/SqlLab/components/QueryHistory.jsx

@@ -18,7 +18,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Alert } from 'react-bootstrap';
+import Alert from 'src/components/Alert';
 import { t } from '@superset-ui/core';
 
 import QueryTable from './QueryTable';
@@ -49,7 +49,7 @@ const QueryHistory = props => {
       />
     );
   }
-  return <Alert bsStyle="info">{t('No query history yet...')}</Alert>;
+  return <Alert type="info" message={t('No query history yet...')} />;
 };
 QueryHistory.propTypes = propTypes;