refactor: Replace SqlLab components' styles using Emotion & theme variables (#11780)

* Replace inline styles for SqlLab components using Emotion and Theme variables

* Replace styles classnames for SqlLab components using Emotion

* Remove unnecessary styles & round padding value

superset-frontend/src/SqlLab/components/QuerySearch.jsx

@@ -58,6 +58,10 @@ const TableStyles = styled.div`
   }
 `;
 
+const StyledTableStylesContainer = styled.div`
+  overflow: auto;
+`;
+
 class QuerySearch extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -293,11 +297,11 @@ class QuerySearch extends React.PureComponent {
             </Button>
           </div>
         </div>
-        <div className="scrollbar-container">
+        <StyledTableStylesContainer>
           {this.state.queriesLoading ? (
             <Loading />
           ) : (
-            <TableStyles className="scrollbar-content">
+            <TableStyles>
               <QueryTable
                 columns={[
                   'state',
@@ -317,7 +321,7 @@ class QuerySearch extends React.PureComponent {
               />
             </TableStyles>
           )}
-        </div>
+        </StyledTableStylesContainer>
       </TableWrapper>
     );
   }

superset-frontend/src/SqlLab/components/QueryTable.jsx

@@ -118,16 +118,14 @@ const QueryTable = props => {
         );
         q.started = moment(q.startDttm).format('HH:mm:ss');
         q.querylink = (
-          <div style={{ width: '100px' }}>
-            <Button
-              buttonSize="small"
-              buttonStyle="link"
-              onClick={() => openQuery(q.queryId)}
-            >
-              <i className="fa fa-external-link m-r-3" />
-              {t('Edit')}
-            </Button>
-          </div>
+          <Button
+            buttonSize="small"
+            buttonStyle="link"
+            onClick={() => openQuery(q.queryId)}
+          >
+            <i className="fa fa-external-link m-r-3" />
+            {t('Edit')}
+          </Button>
         );
         q.sql = (
           <Well>
@@ -172,7 +170,6 @@ const QueryTable = props => {
         }
         q.progress = (
           <ProgressBar
-            style={{ width: '75px' }}
             striped
             now={q.progress}
             label={`${q.progress.toFixed(0)}%`}
@@ -193,7 +190,7 @@ const QueryTable = props => {
           </div>
         );
         q.actions = (
-          <div style={{ width: '75px' }}>
+          <div>
             <Link
               className="fa fa-pencil m-r-3"
               onClick={() => restoreSql(query)}

superset-frontend/src/SqlLab/components/ScheduleQueryButton.jsx

@@ -21,7 +21,7 @@ import PropTypes from 'prop-types';
 import Form from 'react-jsonschema-form';
 import chrono from 'chrono-node';
 import { Col, FormControl, FormGroup, Row } from 'react-bootstrap';
-import { t } from '@superset-ui/core';
+import { t, styled } from '@superset-ui/core';
 
 import Button from 'src/components/Button';
 import ModalTrigger from 'src/components/ModalTrigger';
@@ -92,6 +92,10 @@ const defaultProps = {
   tooltip: null,
 };
 
+const StyledRow = styled(Row)`
+  padding-bottom: ${({ theme }) => theme.gridUnit * 2}px;
+`;
+
 class ScheduleQueryButton extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -139,7 +143,7 @@ class ScheduleQueryButton extends React.PureComponent {
   renderModalBody() {
     return (
       <FormGroup>
-        <Row style={{ paddingBottom: '10px' }}>
+        <StyledRow>
           <Col md={12}>
             <FormLabel className="control-label" htmlFor="embed-height">
               {t('Label')}
@@ -151,8 +155,8 @@ class ScheduleQueryButton extends React.PureComponent {
               onChange={this.onLabelChange}
             />
           </Col>
-        </Row>
-        <Row style={{ paddingBottom: '10px' }}>
+        </StyledRow>
+        <StyledRow>
           <Col md={12}>
             <FormLabel className="control-label" htmlFor="embed-height">
               {t('Description')}
@@ -164,7 +168,7 @@ class ScheduleQueryButton extends React.PureComponent {
               onChange={this.onDescriptionChange}
             />
           </Col>
-        </Row>
+        </StyledRow>
         <Row>
           <Col md={12}>
             <div className="json-schema">

superset-frontend/src/SqlLab/components/SqlEditorLeftBar.jsx

@@ -19,7 +19,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Button from 'src/components/Button';
-import { t } from '@superset-ui/core';
+import { t, styled } from '@superset-ui/core';
 import TableElement from './TableElement';
 import TableSelector from '../../components/TableSelector';
 
@@ -39,6 +39,15 @@ const defaultProps = {
   tables: [],
 };
 
+const StyledScrollbarContainer = styled.div`
+  flex: 1 1 auto;
+  overflow: auto;
+`;
+
+const StyledScrollbarContent = styled.div`
+  height: ${props => props.contentHeight}px;
+`;
+
 export default class SqlEditorLeftBar extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -130,11 +139,8 @@ export default class SqlEditorLeftBar extends React.PureComponent {
           tableNameSticky={false}
         />
         <div className="divider" />
-        <div className="scrollbar-container">
-          <div
-            className="scrollbar-content"
-            style={{ height: tableMetaDataHeight }}
-          >
+        <StyledScrollbarContainer>
+          <StyledScrollbarContent contentHeight={tableMetaDataHeight}>
             {this.props.tables.map(table => (
               <TableElement
                 table={table}
@@ -142,8 +148,8 @@ export default class SqlEditorLeftBar extends React.PureComponent {
                 actions={this.props.actions}
               />
             ))}
-          </div>
-        </div>
+          </StyledScrollbarContent>
+        </StyledScrollbarContainer>
         {shouldShowReset && (
           <Button
             buttonSize="small"

superset-frontend/src/SqlLab/components/TemplateParamsEditor.jsx

@@ -19,7 +19,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Badge } from 'react-bootstrap';
-import { t } from '@superset-ui/core';
+import { t, styled } from '@superset-ui/core';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 
 import Button from 'src/components/Button';
@@ -37,6 +37,12 @@ const defaultProps = {
   code: '{}',
 };
 
+const StyledConfigEditor = styled(ConfigEditor)`
+  &.ace_editor {
+    border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
+  }
+`;
+
 export default class TemplateParamsEditor extends React.Component {
   constructor(props) {
     super(props);
@@ -96,10 +102,9 @@ export default class TemplateParamsEditor extends React.Component {
     return (
       <div>
         {this.renderDoc()}
-        <ConfigEditor
+        <StyledConfigEditor
           keywords={[]}
           mode={this.props.language}
-          style={{ border: '1px solid #CCC' }}
           minLines={25}
           maxLines={50}
           onChange={this.onChange}

superset-frontend/src/SqlLab/main.less

@@ -239,10 +239,6 @@ div.Workspace {
   .SouthPane {
     height: 100%;
   }
-
-  .scrollbar-container {
-    overflow: auto;
-  }
 }
 
 .SqlEditorTabs li {
@@ -371,11 +367,6 @@ div.Workspace {
     border-bottom: 1px solid @gray-bg;
     margin: 15px 0;
   }
-
-  .scrollbar-container {
-    flex: 1 1 auto;
-    overflow: auto;
-  }
 }
 
 .popover {