From 16459ad401d916d0ce7ca6ffa6775fdcb8a37ae8 Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Wed, 29 Jul 2020 18:49:32 -0700 Subject: [PATCH] style: DOCTYPE tag, and related CSS cleanup/refactoring (#10302) --- .../integration/explore/AdhocMetrics.test.ts | 55 +++++----- .../integration/explore/advanced.test.ts | 18 ++-- .../integration/explore/control.test.ts | 12 +-- .../integration/explore/filter_box.test.js | 4 +- .../explore/visualizations/line.test.ts | 4 +- .../src/components/ListView/ListView.tsx | 8 ++ .../components/AdhocMetricEditPopover.jsx | 8 +- .../AdhocMetricEditPopoverTitle.jsx | 6 +- .../components/ControlPanelsContainer.jsx | 69 +++++++----- .../explore/components/ExploreChartPanel.jsx | 26 +++-- .../components/ExploreViewContainer.jsx | 100 ++++++++---------- .../explore/components/QueryAndSaveBtns.css | 21 ---- .../explore/components/QueryAndSaveBtns.jsx | 88 ++++++++++----- superset-frontend/stylesheets/superset.less | 3 + superset/templates/superset/basic.html | 2 +- superset/templates/superset/paper-theme.html | 2 +- .../superset/reports/slice_data.html | 1 + superset/templates/superset/theme.html | 8 +- superset/templates/superset/traceback.html | 7 +- 19 files changed, 247 insertions(+), 195 deletions(-) delete mode 100644 superset-frontend/src/explore/components/QueryAndSaveBtns.css diff --git a/superset-frontend/cypress-base/cypress/integration/explore/AdhocMetrics.test.ts b/superset-frontend/cypress-base/cypress/integration/explore/AdhocMetrics.test.ts index ef7dc9b1a..59722a0e6 100644 --- a/superset-frontend/cypress-base/cypress/integration/explore/AdhocMetrics.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/explore/AdhocMetrics.test.ts @@ -26,25 +26,27 @@ describe('AdhocMetrics', () => { it('Clear metric and set simple adhoc metric', () => { const metric = 'sum(sum_girls)'; - const metricName = 'Girl Births'; + const metricName = 'Sum Girls'; cy.visitChartByName('Num Births Trend'); cy.verifySliceSuccess({ waitAlias: '@postJson' }); - cy.get('[data-test=metrics]').within(() => { - cy.get('.Select__clear-indicator').click(); - cy.get('.Select__control input').type('sum_girls'); - cy.get('.Select__option--is-focused').trigger('mousedown').click(); - }); + cy.get('[data-test=metrics]').find('.Select__clear-indicator').click(); - cy.get('#metrics-edit-popover').within(() => { - cy.get('.popover-title').within(() => { - cy.get('span').click(); - cy.get('input').type(metricName); - }); - cy.get('button').contains('Save').click(); - }); - cy.get('.Select__multi-value__label').contains(metricName); + cy.get('[data-test=metrics]') + .find('.Select__control input') + .type('sum_girls', { force: true }); + + cy.get('[data-test=metrics]') + .find('.Select__option--is-focused') + .trigger('mousedown') + .click(); + + cy.get('[data-test="AdhocMetricEditTitle#trigger"]').click(); + cy.get('[data-test="AdhocMetricEditTitle#input"]').type(metricName); + cy.get('[data-test="AdhocMetricEdit#save"]').contains('Save').click(); + + cy.get('.metrics-select .metric-option').contains(metricName); cy.get('button.query').click(); cy.verifySliceSuccess({ @@ -59,20 +61,21 @@ describe('AdhocMetrics', () => { cy.verifySliceSuccess({ waitAlias: '@postJson' }); // select column "num" - cy.get('[data-test=metrics]').within(() => { - cy.get('.Select__clear-indicator').click(); - cy.get('.Select__control').click(); - cy.get('.Select__control input').type('num'); - cy.get('.option-label').contains(/^num$/).click(); - }); + cy.get('[data-test=metrics]').find('.Select__clear-indicator').click(); + + cy.get('[data-test=metrics]').find('.Select__control').click(); + + cy.get('[data-test=metrics]').find('.Select__control input').type('num'); + + cy.get('[data-test=metrics]').find('.option-label').last().click(); // add custom SQL - cy.get('#metrics-edit-popover').within(() => { - cy.get('#adhoc-metric-edit-tabs-tab-SQL').click(); - cy.get('.ace_content').click(); - cy.get('.ace_text-input').type('/COUNT(DISTINCT name)', { force: true }); - cy.get('button').contains('Save').click(); - }); + cy.get('#adhoc-metric-edit-tabs-tab-SQL').click(); + cy.get('#metrics-edit-popover').find('.ace_content').click(); + cy.get('#metrics-edit-popover') + .find('.ace_text-input') + .type('/COUNT(DISTINCT name)', { force: true }); + cy.get('#metrics-edit-popover').find('button').contains('Save').click(); cy.get('button.query').click(); diff --git a/superset-frontend/cypress-base/cypress/integration/explore/advanced.test.ts b/superset-frontend/cypress-base/cypress/integration/explore/advanced.test.ts index 4a21f007d..624bac63a 100644 --- a/superset-frontend/cypress-base/cypress/integration/explore/advanced.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/explore/advanced.test.ts @@ -30,14 +30,18 @@ describe('Advanced analytics', () => { cy.get('.panel-title').contains('Advanced Analytics').click(); - cy.get('[data-test=time_compare]').within(() => { - cy.get('.Select__control').click(); - cy.get('input[type=text]').type('28 days{enter}'); + cy.get('[data-test=time_compare]').find('.Select__control').click(); + cy.get('[data-test=time_compare]') + .find('input[type=text]') + .type('28 days{enter}'); - cy.get('.Select__control').click(); - cy.get('input[type=text]').type('364 days{enter}'); - cy.get('.Select__multi-value__label').contains('364 days'); - }); + cy.get('[data-test=time_compare]').find('.Select__control').click(); + cy.get('[data-test=time_compare]') + .find('input[type=text]') + .type('364 days{enter}'); + cy.get('[data-test=time_compare]') + .find('.Select__multi-value__label') + .contains('364 days'); cy.get('button.query').click(); cy.wait('@postJson'); diff --git a/superset-frontend/cypress-base/cypress/integration/explore/control.test.ts b/superset-frontend/cypress-base/cypress/integration/explore/control.test.ts index d7a450952..ef4fef5aa 100644 --- a/superset-frontend/cypress-base/cypress/integration/explore/control.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/explore/control.test.ts @@ -46,16 +46,10 @@ describe('Datasource control', () => { cy.get('.modal-footer button').contains('Save').click(); cy.get('.modal-footer button').contains('OK').click(); // select new metric - cy.get('.metrics-select:eq(0)').click(); - cy.get('.metrics-select:eq(0) input[type="text"]') + cy.get('[data-test=metrics]') + .find('.Select__control input') .focus() - .type(newMetricName); - cy.get('.metrics-select:eq(0) .Select__menu .Select__option') - .contains(newMetricName) - .click(); - cy.get('.metrics-select:eq(0) .Select__multi-value__label') - .contains(newMetricName) - .click(); + .type(newMetricName, { force: true }); // delete metric cy.get('#datasource_menu').click(); cy.get('a').contains('Edit Datasource').click(); diff --git a/superset-frontend/cypress-base/cypress/integration/explore/filter_box.test.js b/superset-frontend/cypress-base/cypress/integration/explore/filter_box.test.js index b9793b3ea..4be0a4534 100644 --- a/superset-frontend/cypress-base/cypress/integration/explore/filter_box.test.js +++ b/superset-frontend/cypress-base/cypress/integration/explore/filter_box.test.js @@ -35,8 +35,6 @@ describe('Edit FilterBox Chart', () => { it('should work with default date filter', () => { verify(VIZ_DEFAULTS); // Filter box should default to having a date filter with no filter selected - cy.get('div.filter_box').within(() => { - cy.get('span').contains('No filter'); - }); + cy.get('div.filter_box').contains('No filter'); }); }); diff --git a/superset-frontend/cypress-base/cypress/integration/explore/visualizations/line.test.ts b/superset-frontend/cypress-base/cypress/integration/explore/visualizations/line.test.ts index 76a9086e1..5c6400794 100644 --- a/superset-frontend/cypress-base/cypress/integration/explore/visualizations/line.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/explore/visualizations/line.test.ts @@ -46,9 +46,9 @@ describe('Visualization > Line', () => { }); it('should allow negative values in Y bounds', () => { - cy.get('#controlSections-tab-display').click(); + cy.get('#controlSections-tab-display').click().wait(1000); cy.get('span').contains('Y Axis Bounds').scrollIntoView(); - cy.get('input[placeholder="Min"]').type('-0.1', { delay: 100 }); + cy.get('input[placeholder="Min"]').type('-0.1', { delay: 100 }).wait(1000); cy.get('.alert-warning').should('not.exist'); }); diff --git a/superset-frontend/src/components/ListView/ListView.tsx b/superset-frontend/src/components/ListView/ListView.tsx index 0afc44b5d..2f797e975 100644 --- a/superset-frontend/src/components/ListView/ListView.tsx +++ b/superset-frontend/src/components/ListView/ListView.tsx @@ -50,6 +50,9 @@ const ListViewStyles = styled.div` background: white; position: sticky; top: 0; + &:first-of-type { + padding-left: ${({ theme }) => theme.gridUnit * 4}px; + } } } } @@ -152,6 +155,11 @@ const ListViewStyles = styled.div` overflow: hidden; white-space: nowrap; max-width: 300px; + line-height: 1; + vertical-align: middle; + &:first-of-type { + padding-left: ${({ theme }) => theme.gridUnit * 4}px; + } } .sort-icon { diff --git a/superset-frontend/src/explore/components/AdhocMetricEditPopover.jsx b/superset-frontend/src/explore/components/AdhocMetricEditPopover.jsx index 8f7be4e70..e94a7bb74 100644 --- a/superset-frontend/src/explore/components/AdhocMetricEditPopover.jsx +++ b/superset-frontend/src/explore/components/AdhocMetricEditPopover.jsx @@ -271,6 +271,7 @@ export default class AdhocMetricEditPopover extends React.Component { className="adhoc-metric-edit-tab" eventKey={EXPRESSION_TYPES.SQL} title="Custom SQL" + data-test="adhoc-metric-edit-tab#custom" > {this.props.datasourceType !== 'druid' ? ( @@ -304,11 +305,16 @@ export default class AdhocMetricEditPopover extends React.Component { bsStyle={hasUnsavedChanges && stateIsValid ? 'primary' : 'default'} bsSize="small" className="m-r-5" + data-test="AdhocMetricEdit#save" onClick={this.onSave} > Save - ) : ( - + {adhocMetric.hasCustomLabel ? adhocMetric.label : 'My Metric'}   ); } + render() { const querySectionsToRender = []; const displaySectionsToRender = []; @@ -170,32 +191,30 @@ class ControlPanelsContainer extends React.Component { }); return ( -
-
- {this.props.alert && ( - - {this.props.alert} - - - )} - - - {querySectionsToRender.map(this.renderControlPanelSection)} + + {this.props.alert && ( + + {this.props.alert} + + + )} + + + {querySectionsToRender.map(this.renderControlPanelSection)} + + {displaySectionsToRender.length > 0 && ( + + {displaySectionsToRender.map(this.renderControlPanelSection)} - {displaySectionsToRender.length > 0 && ( - - {displaySectionsToRender.map(this.renderControlPanelSection)} - - )} - -
-
+ )} + + ); } } diff --git a/superset-frontend/src/explore/components/ExploreChartPanel.jsx b/superset-frontend/src/explore/components/ExploreChartPanel.jsx index 36975a03b..74eaed9d7 100644 --- a/superset-frontend/src/explore/components/ExploreChartPanel.jsx +++ b/superset-frontend/src/explore/components/ExploreChartPanel.jsx @@ -18,8 +18,8 @@ */ import React from 'react'; import PropTypes from 'prop-types'; -import { Panel } from 'react-bootstrap'; import { ParentSize } from '@vx/responsive'; +import styled from '@superset-ui/style'; import { chartPropShape } from '../../dashboard/util/propShapes'; import ChartContainer from '../../chart/ChartContainer'; import ExploreChartHeader from './ExploreChartHeader'; @@ -49,6 +49,19 @@ const propTypes = { triggerRender: PropTypes.bool, }; +const Styles = styled.div` + background-color: ${({ theme }) => theme.colors.grayscale.light5}; + padding: ${({ theme }) => theme.gridUnit * 4}px; + height: 100%; + display: flex; + flex-direction: column; + align-items: stretch; + align-content: stretch; + div:last-of-type { + flex-basis: 100%; + } +`; + class ExploreChartPanel extends React.PureComponent { renderChart() { const { chart } = this.props; @@ -113,13 +126,12 @@ class ExploreChartPanel extends React.PureComponent { chart={this.props.chart} /> ); + return ( -
- - {header} - {this.renderChart()} - -
+ +
{header}
+
{this.renderChart()}
+ ); } } diff --git a/superset-frontend/src/explore/components/ExploreViewContainer.jsx b/superset-frontend/src/explore/components/ExploreViewContainer.jsx index 40fb3fdda..610421688 100644 --- a/superset-frontend/src/explore/components/ExploreViewContainer.jsx +++ b/superset-frontend/src/explore/components/ExploreViewContainer.jsx @@ -21,6 +21,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; +import styled from '@superset-ui/style'; import { t } from '@superset-ui/translation'; import ExploreChartPanel from './ExploreChartPanel'; @@ -40,20 +41,6 @@ import { LOG_ACTIONS_MOUNT_EXPLORER, LOG_ACTIONS_CHANGE_EXPLORE_CONTROLS, } from '../../logger/LogUtils'; -import Hotkeys from '../../components/Hotkeys'; - -// Prolly need to move this to a global context -const keymap = { - RUN: 'ctrl + r, ctrl + enter', - SAVE: 'ctrl + s', -}; - -const getHotKeys = () => - Object.keys(keymap).map(k => ({ - name: k, - descr: keymap[k], - key: k, - })); const propTypes = { actions: PropTypes.object.isRequired, @@ -70,6 +57,25 @@ const propTypes = { impressionId: PropTypes.string, }; +const Styles = styled.div` + height: ${({ height }) => height}; + min-height: ${({ height }) => height}; + overflow: hidden; + text-align: left; + position: relative; + width: 100%; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: stretch; + .control-pane { + display: flex; + flex-direction: column; + padding: 0 ${({ theme }) => 2 * theme.gridUnit}px; + max-height: 100%; + } +`; + class ExploreViewContainer extends React.Component { constructor(props) { super(props); @@ -325,12 +331,9 @@ class ExploreViewContainer extends React.Component { if (this.props.standalone) { return this.renderChartContainer(); } + return ( -
+ {this.state.showModal && ( )} -
-
-
- -
- -
-
-
- -
-
{this.renderChartContainer()}
+
+ +
-
+
{this.renderChartContainer()}
+ ); } } @@ -433,6 +418,7 @@ function mapDispatchToProps(dispatch) { } export { ExploreViewContainer }; + export default connect( mapStateToProps, mapDispatchToProps, diff --git a/superset-frontend/src/explore/components/QueryAndSaveBtns.css b/superset-frontend/src/explore/components/QueryAndSaveBtns.css deleted file mode 100644 index 4ea4dcea1..000000000 --- a/superset-frontend/src/explore/components/QueryAndSaveBtns.css +++ /dev/null @@ -1,21 +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. - */ -.save-btn { - width: 100px; -} diff --git a/superset-frontend/src/explore/components/QueryAndSaveBtns.jsx b/superset-frontend/src/explore/components/QueryAndSaveBtns.jsx index e2ec4ef7b..a8bba7968 100644 --- a/superset-frontend/src/explore/components/QueryAndSaveBtns.jsx +++ b/superset-frontend/src/explore/components/QueryAndSaveBtns.jsx @@ -21,9 +21,10 @@ import PropTypes from 'prop-types'; import { ButtonGroup, OverlayTrigger, Tooltip } from 'react-bootstrap'; import classnames from 'classnames'; import { t } from '@superset-ui/translation'; +import styled from '@superset-ui/style'; import Button from '../../components/Button'; -import './QueryAndSaveBtns.css'; +import Hotkeys from '../../components/Hotkeys'; const propTypes = { canAdd: PropTypes.bool.isRequired, @@ -41,6 +42,30 @@ const defaultProps = { disabled: false, }; +// Prolly need to move this to a global context +const keymap = { + RUN: 'ctrl + r, ctrl + enter', + SAVE: 'ctrl + s', +}; + +const getHotKeys = () => + Object.keys(keymap).map(k => ({ + name: k, + descr: keymap[k], + key: k, + })); + +const Styles = styled.div` + display: flex; + flex-direction: row; + align-items: center; + padding-bottom: ${({ theme }) => 2 * theme.gridUnit}px; + + .save-btn { + width: 100px; + } +`; + export default function QueryAndSaveBtns({ canAdd, onQuery, @@ -79,33 +104,42 @@ export default function QueryAndSaveBtns({ ); return ( -
- - {qryOrStopButton} - - - {errorMessage && ( - - {' '} - {errorMessage} - } + +
+ + {qryOrStopButton} +
+ Save + + + {errorMessage && ( + + {' '} + {errorMessage} + } + > + + + + )} +
+
+ +
+ ); } diff --git a/superset-frontend/stylesheets/superset.less b/superset-frontend/stylesheets/superset.less index 3b7b452be..4eab5d947 100644 --- a/superset-frontend/stylesheets/superset.less +++ b/superset-frontend/stylesheets/superset.less @@ -444,6 +444,9 @@ table.table-no-hover tr:hover { line-height: 2px; border-radius: 50%; box-shadow: 2px 2px 4px -1px fade(@darkest, @opacity-light); + i { + width: 10px; + } } iframe { diff --git a/superset/templates/superset/basic.html b/superset/templates/superset/basic.html index 3fa2591df..a31574696 100644 --- a/superset/templates/superset/basic.html +++ b/superset/templates/superset/basic.html @@ -21,7 +21,7 @@ {% from 'superset/partials/asset_bundle.html' import css_bundle, js_bundle with context %} {% set favicons = appbuilder.app.config['FAVICONS'] %} - + diff --git a/superset/templates/superset/paper-theme.html b/superset/templates/superset/paper-theme.html index 02e15a274..edf50137c 100644 --- a/superset/templates/superset/paper-theme.html +++ b/superset/templates/superset/paper-theme.html @@ -520,7 +520,7 @@ </div> <div class="row"> <div class="col-sm-4"> - <div class="panel panel-default"> + <div class="panel panel-default f1"> <div class="panel-heading"> <h3 class="panel-title">Panel title</h3> </div> diff --git a/superset/templates/superset/reports/slice_data.html b/superset/templates/superset/reports/slice_data.html index 08c8a5579..c478cd00e 100644 --- a/superset/templates/superset/reports/slice_data.html +++ b/superset/templates/superset/reports/slice_data.html @@ -16,6 +16,7 @@ specific language governing permissions and limitations under the License. #} +<!DOCTYPE html> <html> <head> </head> diff --git a/superset/templates/superset/theme.html b/superset/templates/superset/theme.html index e159e1982..f8ebf8f04 100644 --- a/superset/templates/superset/theme.html +++ b/superset/templates/superset/theme.html @@ -803,7 +803,7 @@ <div class="row"> <div class="col-lg-6"> <h2 id="nav-tabs">Tabs</h2> - <div class="panel panel-default"> + <div class="panel panel-default f2"> <div class="panel-body"> <div class="bs-component"> <ul class="nav nav-tabs"> @@ -1184,13 +1184,13 @@ <div class="row"> <div class="col-lg-4"> <div class="bs-component"> - <div class="panel panel-default"> + <div class="panel panel-default f3"> <div class="panel-body"> Basic panel </div> </div> - <div class="panel panel-default"> + <div class="panel panel-default f4"> <div class="panel-body"> Panel content </div> @@ -1200,7 +1200,7 @@ </div> <div class="col-lg-4"> <div class="bs-component"> - <div class="panel panel-default"> + <div class="panel panel-default f5"> <div class="panel-heading"> <h3 class="panel-title">Panel default</h3> </div> diff --git a/superset/templates/superset/traceback.html b/superset/templates/superset/traceback.html index 9e690ef9b..548c431df 100644 --- a/superset/templates/superset/traceback.html +++ b/superset/templates/superset/traceback.html @@ -15,14 +15,15 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. -#} +#}} +<!DOCTYPE html> <html> <body> <h1>Sorry, something went wrong</h1> <h3>500 - Internal Server Error</h3> - <hr> + <hr /> <h2>Stacktrace</h2> - <hr> + <hr /> <code> <pre> {{ error_msg }}