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

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

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

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>
     );
   }
 }

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>
     );
   }
 }

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 (
-      <div
-        id="explore-container"
-        className="container-fluid"
-        style={{ height: this.state.height, overflow: 'hidden' }}
-      >
+      <Styles id="explore-container" height={this.state.height}>
         {this.state.showModal && (
           <SaveModal
             onHide={this.toggleModal}
@@ -339,45 +342,27 @@ class ExploreViewContainer extends React.Component {
             sliceName={this.props.sliceName}
           />
         )}
-        <div className="row">
-          <div className="col-sm-4">
-            <div
-              style={{
-                display: 'flex',
-                flexDirection: 'row',
-                alignItems: 'center',
-              }}
-            >
-              <QueryAndSaveBtns
-                canAdd={!!(this.props.can_add || this.props.can_overwrite)}
-                onQuery={this.onQuery}
-                onSave={this.toggleModal}
-                onStop={this.onStop}
-                loading={this.props.chart.chartStatus === 'loading'}
-                chartIsStale={this.state.chartIsStale}
-                errorMessage={this.renderErrorMessage()}
-                datasourceType={this.props.datasource_type}
-              />
-              <div className="m-l-5 text-muted">
-                <Hotkeys
-                  header="Keyboard shortcuts"
-                  hotkeys={getHotKeys()}
-                  placement="right"
-                />
-              </div>
-            </div>
-            <br />
-            <ControlPanelsContainer
-              actions={this.props.actions}
-              form_data={this.props.form_data}
-              controls={this.props.controls}
-              datasource_type={this.props.datasource_type}
-              isDatasourceMetaLoading={this.props.isDatasourceMetaLoading}
-            />
-          </div>
-          <div className="col-sm-8">{this.renderChartContainer()}</div>
+        <div className="col-sm-4 control-pane">
+          <QueryAndSaveBtns
+            canAdd={!!(this.props.can_add || this.props.can_overwrite)}
+            onQuery={this.onQuery}
+            onSave={this.toggleModal}
+            onStop={this.onStop}
+            loading={this.props.chart.chartStatus === 'loading'}
+            chartIsStale={this.state.chartIsStale}
+            errorMessage={this.renderErrorMessage()}
+            datasourceType={this.props.datasource_type}
+          />
+          <ControlPanelsContainer
+            actions={this.props.actions}
+            form_data={this.props.form_data}
+            controls={this.props.controls}
+            datasource_type={this.props.datasource_type}
+            isDatasourceMetaLoading={this.props.isDatasourceMetaLoading}
+          />
         </div>
-      </div>
+        <div className="col-sm-8">{this.renderChartContainer()}</div>
+      </Styles>
     );
   }
 }
@@ -433,6 +418,7 @@ function mapDispatchToProps(dispatch) {
 }
 
 export { ExploreViewContainer };
+
 export default connect(
   mapStateToProps,
   mapDispatchToProps,

superset-frontend/src/explore/components/QueryAndSaveBtns.css

@@ -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;
-}

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 (
-    <div>
-      <ButtonGroup className="query-and-save">
-        {qryOrStopButton}
-        <Button
-          className={saveClasses}
-          data-target="#save_modal"
-          data-toggle="modal"
-          disabled={saveButtonDisabled}
-          onClick={onSave}
-        >
-          <i className="fa fa-plus-circle" /> Save
-        </Button>
-      </ButtonGroup>
-      {errorMessage && (
-        <span>
-          {' '}
-          <OverlayTrigger
-            placement="right"
-            overlay={
-              <Tooltip id={'query-error-tooltip'}>{errorMessage}</Tooltip>
-            }
+    <Styles>
+      <div>
+        <ButtonGroup className="query-and-save">
+          {qryOrStopButton}
+          <Button
+            className={saveClasses}
+            data-target="#save_modal"
+            data-toggle="modal"
+            disabled={saveButtonDisabled}
+            onClick={onSave}
           >
-            <i className="fa fa-exclamation-circle text-danger fa-lg" />
-          </OverlayTrigger>
-        </span>
-      )}
-    </div>
+            <i className="fa fa-plus-circle" /> Save
+          </Button>
+        </ButtonGroup>
+        {errorMessage && (
+          <span>
+            {' '}
+            <OverlayTrigger
+              placement="right"
+              overlay={
+                <Tooltip id={'query-error-tooltip'}>{errorMessage}</Tooltip>
+              }
+            >
+              <i className="fa fa-exclamation-circle text-danger fa-lg" />
+            </OverlayTrigger>
+          </span>
+        )}
+      </div>
+      <div className="m-l-5 text-muted">
+        <Hotkeys
+          header="Keyboard shortcuts"
+          hotkeys={getHotKeys()}
+          placement="right"
+        />
+      </div>
+    </Styles>
   );
 }