style: DOCTYPE tag, and related CSS cleanup/refactoring (#10302)

apache · Jul 30, 2020 · 16459ad · 16459ad
1 parent e6e6b49
commit 16459ad
Show file tree

Hide file tree

Showing 19 changed files with 247 additions and 195 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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' ? (
               <FormGroup>
@@ -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
           </Button>
-          <Button bsSize="small" onClick={this.props.onClose}>
+          <Button
+            bsSize="small"
+            onClick={this.props.onClose}
+            data-test="AdhocMetricEdit#cancel"
+          >
             Close
           </Button>
           <i

diff --git a/superset-frontend/src/explore/components/AdhocMetricEditPopoverTitle.jsx b/superset-frontend/src/explore/components/AdhocMetricEditPopoverTitle.jsx
@@ -70,6 +70,7 @@ export default class AdhocMetricEditPopoverTitle extends React.Component {
         value={adhocMetric.hasCustomLabel ? adhocMetric.label : ''}
         autoFocus
         onChange={onChange}
+        data-test="AdhocMetricEditTitle#input"
       />
     ) : (
       <OverlayTrigger
@@ -81,7 +82,10 @@ export default class AdhocMetricEditPopoverTitle extends React.Component {
         onBlur={this.onBlur}
         className="AdhocMetricEditPopoverTitle"
       >
-        <span className="inline-editable">
+        <span
+          className="inline-editable"
+          data-test="AdhocMetricEditTitle#trigger"
+        >
           {adhocMetric.hasCustomLabel ? adhocMetric.label : 'My Metric'}
           &nbsp;
           <i

diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.jsx b/superset-frontend/src/explore/components/ControlPanelsContainer.jsx
@@ -23,6 +23,7 @@ import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { Alert, Tab, Tabs } from 'react-bootstrap';
 import { t } from '@superset-ui/translation';
+import styled from '@superset-ui/style';
 
 import ControlPanelSection from './ControlPanelSection';
 import ControlRow from './ControlRow';
@@ -40,6 +41,25 @@ const propTypes = {
   isDatasourceMetaLoading: PropTypes.bool.isRequired,
 };
 
+const Styles = styled.div`
+  max-height: 100%;
+  .remove-alert {
+    cursor: 'pointer';
+  }
+  #controlSections {
+    display: flex;
+    flex-direction: column;
+    max-height: 100%;
+  }
+  .nav-tabs {
+    flex: 0 0 1;
+  }
+  .tab-content {
+    overflow: auto;
+    flex: 1 1 100%;
+  }
+`;
+
 class ControlPanelsContainer extends React.Component {
   constructor(props) {
     super(props);
@@ -145,6 +165,7 @@ class ControlPanelsContainer extends React.Component {
       </ControlPanelSection>
     );
   }
+
   render() {
     const querySectionsToRender = [];
     const displaySectionsToRender = [];
@@ -170,32 +191,30 @@ class ControlPanelsContainer extends React.Component {
     });
 
     return (
-      <div className="scrollbar-container">
-        <div className="scrollbar-content">
-          {this.props.alert && (
-            <Alert bsStyle="warning">
-              {this.props.alert}
-              <i
-                role="button"
-                tabIndex={0}
-                className="fa fa-close pull-right"
-                onClick={this.removeAlert}
-                style={{ cursor: 'pointer' }}
-              />
-            </Alert>
-          )}
-          <Tabs id="controlSections">
-            <Tab eventKey="query" title={t('Data')}>
-              {querySectionsToRender.map(this.renderControlPanelSection)}
+      <Styles>
+        {this.props.alert && (
+          <Alert bsStyle="warning">
+            {this.props.alert}
+            <i
+              role="button"
+              tabIndex={0}
+              className="fa fa-close pull-right"
+              onClick={this.removeAlert}
+              style={{ cursor: 'pointer' }}
+            />
+          </Alert>
+        )}
+        <Tabs id="controlSections">
+          <Tab eventKey="query" title={t('Data')}>
+            {querySectionsToRender.map(this.renderControlPanelSection)}
+          </Tab>
+          {displaySectionsToRender.length > 0 && (
+            <Tab eventKey="display" title={t('Customize')}>
+              {displaySectionsToRender.map(this.renderControlPanelSection)}
             </Tab>
-            {displaySectionsToRender.length > 0 && (
-              <Tab eventKey="display" title={t('Customize')}>
-                {displaySectionsToRender.map(this.renderControlPanelSection)}
-              </Tab>
-            )}
-          </Tabs>
-        </div>
-      </div>
+          )}
+        </Tabs>
+      </Styles>
     );
   }
 }

diff --git 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 (
-      <div className="chart-container">
-        <Panel style={{ height: this.props.height }}>
-          <Panel.Heading>{header}</Panel.Heading>
-          <Panel.Body>{this.renderChart()}</Panel.Body>
-        </Panel>
-      </div>
+      <Styles className="chart-container">
+        <div>{header}</div>
+        <div>{this.renderChart()}</div>
+      </Styles>
     );
   }
 }