From 5b1939802d88e42eb2894b6c5a86ec764520e6f0 Mon Sep 17 00:00:00 2001
From: Geido <60598000+geido@users.noreply.github.com>
Date: Thu, 3 Dec 2020 23:28:06 +0200
Subject: [PATCH] refactor: Move ProgressBar to Antd (#11875)
* Move ProgressBar to Antd
* Remove trailing space
* Fix linting issues
* Export enhanced Progress only
---
.../javascripts/sqllab/ResultSet_spec.jsx | 3 +-
.../src/SqlLab/components/QueryTable.jsx | 9 ++--
.../src/SqlLab/components/ResultSet.tsx | 6 +--
.../src/common/components/ProgressBar.tsx | 54 +++++++++++++++++++
.../src/common/components/common.stories.tsx | 5 ++
.../src/common/components/index.tsx | 2 +
6 files changed, 69 insertions(+), 10 deletions(-)
create mode 100644 superset-frontend/src/common/components/ProgressBar.tsx
diff --git a/superset-frontend/spec/javascripts/sqllab/ResultSet_spec.jsx b/superset-frontend/spec/javascripts/sqllab/ResultSet_spec.jsx
index a5d86393eb..a55559a291 100644
--- a/superset-frontend/spec/javascripts/sqllab/ResultSet_spec.jsx
+++ b/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';
diff --git a/superset-frontend/src/SqlLab/components/QueryTable.jsx b/superset-frontend/src/SqlLab/components/QueryTable.jsx
index e545508fa9..428b0fb020 100644
--- a/superset-frontend/src/SqlLab/components/QueryTable.jsx
+++ b/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 = (
-
+
);
let errorTooltip;
if (q.errorMessage) {
diff --git a/superset-frontend/src/SqlLab/components/ResultSet.tsx b/superset-frontend/src/SqlLab/components/ResultSet.tsx
index f83aebb8dc..b325c490c8 100644
--- a/superset-frontend/src/SqlLab/components/ResultSet.tsx
+++ b/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 = (
);
}
diff --git a/superset-frontend/src/common/components/ProgressBar.tsx b/superset-frontend/src/common/components/ProgressBar.tsx
new file mode 100644
index 0000000000..8fe8fa5424
--- /dev/null
+++ b/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) => (
+
+))`
+ 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;
diff --git a/superset-frontend/src/common/components/common.stories.tsx b/superset-frontend/src/common/components/common.stories.tsx
index e1653bf31f..8bde74eeab 100644
--- a/superset-frontend/src/common/components/common.stories.tsx
+++ b/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 = () => ;
+export const ProgressStriped = () => ;
+export const ProgressSuccess = () => ;
+
export const Switch = () => (
<>
diff --git a/superset-frontend/src/common/components/index.tsx b/superset-frontend/src/common/components/index.tsx
index 97ddef73f2..02328ecb60 100644
--- a/superset-frontend/src/common/components/index.tsx
+++ b/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;