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

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;
 

superset-frontend/src/SqlLab/components/ResultSet.tsx

@@ -17,8 +17,8 @@
  * under the License.
  */
 import React, { CSSProperties } from 'react';
-import { Alert } from 'react-bootstrap';
 import ButtonGroup from 'src/components/ButtonGroup';
+import Alert from 'src/components/Alert';
 import ProgressBar from 'src/common/components/ProgressBar';
 import moment from 'moment';
 import { RadioChangeEvent } from 'antd/lib/radio';
@@ -498,7 +498,7 @@ export default class ResultSet extends React.PureComponent<
     }
 
     if (query.state === 'stopped') {
-      return <Alert bsStyle="warning">Query was stopped</Alert>;
+      return <Alert type="warning" message={t('Query was stopped')} />;
     }
     if (query.state === 'failed') {
       return (
@@ -522,31 +522,36 @@ export default class ResultSet extends React.PureComponent<
       }
       return (
         <div>
-          <Alert bsStyle="info">
-            {t(object)} [
-            <strong>
-              {tempSchema ? `${tempSchema}.` : ''}
-              {tempTable}
-            </strong>
-            ] {t('was created')} &nbsp;
-            <ButtonGroup>
-              <Button
-                buttonSize="small"
-                className="m-r-5"
-                onClick={() => this.popSelectStar(tempSchema, tempTable)}
-              >
-                {t('Query in a new tab')}
-              </Button>
-              <ExploreCtasResultsButton
-                // @ts-ignore Redux types are difficult to work with, ignoring for now
-                table={tempTable}
-                schema={tempSchema}
-                dbId={exploreDBId}
-                database={this.props.database}
-                actions={this.props.actions}
-              />
-            </ButtonGroup>
-          </Alert>
+          <Alert
+            type="info"
+            message={
+              <>
+                {t(object)} [
+                <strong>
+                  {tempSchema ? `${tempSchema}.` : ''}
+                  {tempTable}
+                </strong>
+                ] {t('was created')} &nbsp;
+                <ButtonGroup>
+                  <Button
+                    buttonSize="small"
+                    className="m-r-5"
+                    onClick={() => this.popSelectStar(tempSchema, tempTable)}
+                  >
+                    {t('Query in a new tab')}
+                  </Button>
+                  <ExploreCtasResultsButton
+                    // @ts-ignore Redux types are difficult to work with, ignoring for now
+                    table={tempTable}
+                    schema={tempSchema}
+                    dbId={exploreDBId}
+                    database={this.props.database}
+                    actions={this.props.actions}
+                  />
+                </ButtonGroup>
+              </>
+            }
+          />
         </div>
       );
     }
@@ -578,7 +583,7 @@ export default class ResultSet extends React.PureComponent<
       }
       if (data && data.length === 0) {
         return (
-          <Alert bsStyle="warning">{t('The query returned no data')}</Alert>
+          <Alert type="warning" message={t('The query returned no data')} />
         );
       }
     }
@@ -642,7 +647,7 @@ export default class ResultSet extends React.PureComponent<
         <div>{!progressBar && <Loading position="normal" />}</div>
         <QueryStateLabel query={query} />
         <div>
-          {progressMsg && <Alert bsStyle="success">{progressMsg}</Alert>}
+          {progressMsg && <Alert type="success" message={progressMsg} />}
         </div>
         <div>{progressBar}</div>
         <div>{trackingUrl}</div>

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

@@ -19,7 +19,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import shortid from 'shortid';
-import { Alert } from 'react-bootstrap';
+import Alert from 'src/components/Alert';
 import Tabs from 'src/common/components/Tabs';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
@@ -120,9 +120,12 @@ export class SouthPane extends React.PureComponent {
         !latestQuery.results
       ) {
         results = (
-          <Alert bsStyle="warning">
-            {t('No stored results found, you need to re-run your query')}
-          </Alert>
+          <Alert
+            type="warning"
+            message={t(
+              'No stored results found, you need to re-run your query',
+            )}
+          />
         );
       } else if (
         Date.now() - latestQuery.startDttm <=
@@ -142,7 +145,7 @@ export class SouthPane extends React.PureComponent {
       }
     } else {
       results = (
-        <Alert bsStyle="info">{t('Run a query to display results here')}</Alert>
+        <Alert type="info" message={t('Run a query to display results here')} />
       );
     }
     const dataPreviewTabs = props.dataPreviewQueries.map(query => (