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

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,