From 36ea42f09245b101b04bfaf55a17e19fae6d15fc Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Wed, 24 Jun 2020 14:21:45 -0700 Subject: [PATCH] fix: Loading overlay bugfix and cleanup (#10105) * fix: reordering DOM output, simplifying styles, Emotionalizing * simplification * converting RefreshChartOverlay to TS * Loading -> TS, stripping unused size prop * simplification... * just letting "position" prop act as a class name. Simpler! * consolidating styles, changing a className prop to a position prop. * nixing (unused) classname prop * replacing inline loading img with the proper Loading component * BY THERE. * position prop is optional! --- .../src/SqlLab/components/TableElement.jsx | 2 +- superset-frontend/src/SqlLab/main.less | 5 -- superset-frontend/src/chart/Chart.jsx | 9 +-- superset-frontend/src/components/Button.jsx | 1 + superset-frontend/src/components/Loading.jsx | 61 ------------------- .../components/{Loading.less => Loading.tsx} | 35 ++++++++++- ...artOverlay.jsx => RefreshChartOverlay.tsx} | 45 +++++++++----- .../src/dashboard/stylesheets/dashboard.less | 6 -- .../explore/components/DisplayQueryButton.jsx | 8 +-- superset-frontend/stylesheets/superset.less | 27 -------- 10 files changed, 70 insertions(+), 129 deletions(-) delete mode 100644 superset-frontend/src/components/Loading.jsx rename superset-frontend/src/components/{Loading.less => Loading.tsx} (56%) rename superset-frontend/src/components/{RefreshChartOverlay.jsx => RefreshChartOverlay.tsx} (63%) diff --git a/superset-frontend/src/SqlLab/components/TableElement.jsx b/superset-frontend/src/SqlLab/components/TableElement.jsx index 2d11f0d14ebe..588461167d3d 100644 --- a/superset-frontend/src/SqlLab/components/TableElement.jsx +++ b/superset-frontend/src/SqlLab/components/TableElement.jsx @@ -207,7 +207,7 @@ class TableElement extends React.PureComponent {
{table.isMetadataLoading || table.isExtraMetadataLoading ? ( - + ) : ( {this.renderControls()} )} diff --git a/superset-frontend/src/SqlLab/main.less b/superset-frontend/src/SqlLab/main.less index e8047b3cae72..de24ecea1410 100644 --- a/superset-frontend/src/SqlLab/main.less +++ b/superset-frontend/src/SqlLab/main.less @@ -39,11 +39,6 @@ body { padding: 0px; } -.loading { - width: 50px; - margin-top: 15px; -} - .pane-cell { padding: 10px; overflow: auto; diff --git a/superset-frontend/src/chart/Chart.jsx b/superset-frontend/src/chart/Chart.jsx index 42053600c046..8a728b018920 100644 --- a/superset-frontend/src/chart/Chart.jsx +++ b/superset-frontend/src/chart/Chart.jsx @@ -182,7 +182,9 @@ class Chart extends React.PureComponent { className={`chart-container ${isLoading ? 'is-loading' : ''}`} style={containerStyles} > - {isLoading && } +
+ +
{!isLoading && !chartAlert && isFaded && ( )} -
- -
+ + {isLoading && }
); diff --git a/superset-frontend/src/components/Button.jsx b/superset-frontend/src/components/Button.jsx index 8cd7105d5519..0be1c6bd8858 100644 --- a/superset-frontend/src/components/Button.jsx +++ b/superset-frontend/src/components/Button.jsx @@ -27,6 +27,7 @@ import { const propTypes = { children: PropTypes.node, + className: PropTypes.string, tooltip: PropTypes.node, placement: PropTypes.string, onClick: PropTypes.func, diff --git a/superset-frontend/src/components/Loading.jsx b/superset-frontend/src/components/Loading.jsx deleted file mode 100644 index 3fb5bdea7602..000000000000 --- a/superset-frontend/src/components/Loading.jsx +++ /dev/null @@ -1,61 +0,0 @@ -/** - * 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 PropTypes from 'prop-types'; - -import './Loading.less'; - -const propTypes = { - size: PropTypes.number, - position: PropTypes.oneOf(['floating', 'normal']), - className: PropTypes.string, -}; -const defaultProps = { - size: 50, - position: 'floating', - className: '', -}; - -const FLOATING_STYLE = { - padding: 0, - margin: 0, - position: 'absolute', - left: '50%', - top: '50%', - transform: 'translate(-50%, -50%)', -}; - -export default function Loading({ size, position, className }) { - const style = position === 'floating' ? FLOATING_STYLE : {}; - const styleWithWidth = { - ...style, - size, - }; - return ( - Loading... - ); -} - -Loading.propTypes = propTypes; -Loading.defaultProps = defaultProps; diff --git a/superset-frontend/src/components/Loading.less b/superset-frontend/src/components/Loading.tsx similarity index 56% rename from superset-frontend/src/components/Loading.less rename to superset-frontend/src/components/Loading.tsx index 411896272701..74b4e3e8da62 100644 --- a/superset-frontend/src/components/Loading.less +++ b/superset-frontend/src/components/Loading.tsx @@ -16,6 +16,37 @@ * specific language governing permissions and limitations * under the License. */ -img.loading.margin-zero { - margin: 0px; +import React from 'react'; +import styled from '@superset-ui/style'; + +interface Props { + position?: string; +} + +const LoaderImg = styled.img` + z-index: 1000; + width: 50px; + position: relative; + margin: 10px; + &.inline { + margin: 0px; + width: 30px; + } + &.floating { + padding: 0; + margin: 0; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + } +`; +export default function Loading({ position = 'floating' }: Props) { + return ( + + ); } diff --git a/superset-frontend/src/components/RefreshChartOverlay.jsx b/superset-frontend/src/components/RefreshChartOverlay.tsx similarity index 63% rename from superset-frontend/src/components/RefreshChartOverlay.jsx rename to superset-frontend/src/components/RefreshChartOverlay.tsx index cfba12429a43..75cce635c8ae 100644 --- a/superset-frontend/src/components/RefreshChartOverlay.jsx +++ b/superset-frontend/src/components/RefreshChartOverlay.tsx @@ -17,37 +17,50 @@ * under the License. */ import React from 'react'; -import PropTypes from 'prop-types'; import { t } from '@superset-ui/translation'; -import Button from '../components/Button'; +import styled from '@superset-ui/style'; +import Button from 'src/components/Button'; -const propTypes = { - height: PropTypes.number.isRequired, - width: PropTypes.number.isRequired, - onQuery: PropTypes.func, -}; +type Callback = (...args: any[]) => void; -class RefreshChartOverlay extends React.PureComponent { +interface Props { + height: number; + width: number; + onQuery: Callback; +} + +const RefreshOverlayWrapper = styled.div` + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + + .refresh-btn { + font-weight: ${({ theme }) => theme.typography.weights.bold}; + } +`; + +class RefreshChartOverlay extends React.PureComponent { render() { return ( -
+
-
+ ); } } -RefreshChartOverlay.propTypes = propTypes; - export default RefreshChartOverlay; diff --git a/superset-frontend/src/dashboard/stylesheets/dashboard.less b/superset-frontend/src/dashboard/stylesheets/dashboard.less index 2d99763ae931..b28b8ef2bd79 100644 --- a/superset-frontend/src/dashboard/stylesheets/dashboard.less +++ b/superset-frontend/src/dashboard/stylesheets/dashboard.less @@ -151,12 +151,6 @@ body { } .modal { - img.loading { - width: 50px; - margin: 0; - position: relative; - } - .modal-body { padding: 24px 24px 29px 24px; } diff --git a/superset-frontend/src/explore/components/DisplayQueryButton.jsx b/superset-frontend/src/explore/components/DisplayQueryButton.jsx index f1b8b5138d7c..112cb431bb5f 100644 --- a/superset-frontend/src/explore/components/DisplayQueryButton.jsx +++ b/superset-frontend/src/explore/components/DisplayQueryButton.jsx @@ -208,13 +208,7 @@ export class DisplayQueryButton extends React.PureComponent { } renderSamplesModalBody() { if (this.state.isLoading) { - return ( - Loading... - ); + return ; } else if (this.state.error) { return 
{this.state.error}
; } else if (this.state.data) { diff --git a/superset-frontend/stylesheets/superset.less b/superset-frontend/stylesheets/superset.less index b76d2d26242f..2eca35e63383 100644 --- a/superset-frontend/stylesheets/superset.less +++ b/superset-frontend/stylesheets/superset.less @@ -153,12 +153,6 @@ div.navbar { } } -img.loading { - width: 40px; - position: relative; - margin: 10px; -} - img.viz-thumb-option { width: 100px; border: 1px solid @gray; @@ -527,27 +521,6 @@ tr.reactable-column-header th.reactable-header-sortable { padding-right: 17px; } -.explore-chart-overlay { - position: absolute; - z-index: @z-index-above-dashboard-charts; - display: flex; - align-items: center; - justify-content: center; - text-align: center; -} - -.refresh-overlay-btn { - font-weight: @font-weight-bold; - margin-right: 10px; -} - -.dismiss-overlay-btn { - font-weight: @font-weight-bold; - background: @lightest; - color: @brand-primary; - border-color: @brand-primary; -} - .fave-unfave-icon { .fa-star-o, .fa-star {