refactor: Move ProgressBar to Antd (#11875)

* Move ProgressBar to Antd

* Remove trailing space

* Fix linting issues

* Export enhanced Progress only

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

@@ -19,7 +19,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import sinon from 'sinon';
-import { Alert, ProgressBar } from 'react-bootstrap';
+import { Alert } from 'react-bootstrap';
+import ProgressBar from 'src/common/components/ProgressBar';
 
 import FilterableTable from 'src/components/FilterableTable/FilterableTable';
 import ExploreResultsButton from 'src/SqlLab/components/ExploreResultsButton';

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

@@ -19,7 +19,8 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
-import { ProgressBar, Well } from 'react-bootstrap';
+import { Well } from 'react-bootstrap';
+import ProgressBar from 'src/common/components/ProgressBar';
 import Label from 'src/components/Label';
 import { t } from '@superset-ui/core';
 
@@ -169,11 +170,7 @@ const QueryTable = props => {
           q.output = [schemaUsed, q.tempTable].filter(v => v).join('.');
         }
         q.progress = (
-          <ProgressBar
-            striped
-            now={q.progress}
-            label={`${q.progress.toFixed(0)}%`}
-          />
+          <ProgressBar percent={parseInt(q.progress.toFixed(0), 10)} striped />
         );
         let errorTooltip;
         if (q.errorMessage) {

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

@@ -17,7 +17,8 @@
  * under the License.
  */
 import React, { CSSProperties } from 'react';
-import { Alert, ButtonGroup, ProgressBar } from 'react-bootstrap';
+import { Alert, ButtonGroup } from 'react-bootstrap';
+import ProgressBar from 'src/common/components/ProgressBar';
 import Button from 'src/components/Button';
 import shortid from 'shortid';
 import { styled, t } from '@superset-ui/core';
@@ -356,9 +357,8 @@ export default class ResultSet extends React.PureComponent<
     if (query.progress > 0) {
       progressBar = (
         <ProgressBar
+          percent={parseInt(query.progress.toFixed(0), 10)}
           striped
-          now={query.progress}
-          label={`${query.progress.toFixed(0)}%`}
         />
       );
     }

superset-frontend/src/common/components/ProgressBar.tsx

@@ -0,0 +1,54 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { styled } from '@superset-ui/core';
+// eslint-disable-next-line no-restricted-imports
+import { Progress as AntdProgress } from 'antd';
+import { ProgressProps } from 'antd/lib/progress/progress';
+
+interface ProgressBarProps extends ProgressProps {
+  striped?: boolean;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const ProgressBar = styled(({ striped, ...props }: ProgressBarProps) => (
+  <AntdProgress {...props} />
+))`
+  line-height: 0;
+  .ant-progress-outer {
+    ${({ percent }) => !percent && `display: none;`}
+  }
+  .ant-progress-text {
+    font-size: ${({ theme }) => theme.typography.sizes.s}px;
+  }
+  .ant-progress-bg {
+    ${({ striped }) =>
+      striped &&
+      `
+        background-image: linear-gradient(45deg,
+            rgba(255, 255, 255, 0.15) 25%,
+            transparent 25%, transparent 50%,
+            rgba(255, 255, 255, 0.15) 50%,
+            rgba(255, 255, 255, 0.15) 75%,
+            transparent 75%, transparent);
+        background-size: 1rem 1rem; `};
+  }
+`;
+
+export default ProgressBar;

superset-frontend/src/common/components/common.stories.tsx

@@ -32,6 +32,7 @@ import {
   DatePicker as AntdDatePicker,
   RangePicker as AntdRangePicker,
 } from './DatePicker';
+import ProgressBar from './ProgressBar';
 
 export default {
   title: 'Common Components',
@@ -239,6 +240,10 @@ export const DateRangePicker = () => (
   />
 );
 
+export const Progress = () => <ProgressBar percent={90} />;
+export const ProgressStriped = () => <ProgressBar percent={90} striped />;
+export const ProgressSuccess = () => <ProgressBar percent={100} />;
+
 export const Switch = () => (
   <>
     <AntdSwitch defaultChecked />

superset-frontend/src/common/components/index.tsx

@@ -48,6 +48,8 @@ export {
   Tooltip,
 } from 'antd';
 
+export { default as Progress } from 'src/common/components/ProgressBar';
+
 export const MenuItem = styled(AntdMenu.Item)`
   > a {
     text-decoration: none;