chore: Migrate .less styles to Emotion

superset-frontend/cypress-base/cypress/support/directories.ts

@@ -127,10 +127,11 @@ export const databasesPage = {
 
 export const sqlLabView = {
   sqlEditorLeftBar: {
-    sqlEditorLeftBar: '[class="SqlEditorLeftBar"]',
-    databaseSchemaTableSection: '[class="SqlEditorLeftBar"] > :nth-child(1)',
+    sqlEditorLeftBar: '[data-test="sql-editor-left-bar"]',
+    databaseSchemaTableSection:
+      '[data-test="sql-editor-left-bar"] > :nth-child(1)',
     tableSchemaSection:
-      '[class="SqlEditorLeftBar"] > :nth-child(1) > :nth-child(3) > :nth-child(1)',
+      '[data-test="sql-editor-left-bar"] > :nth-child(1) > :nth-child(3) > :nth-child(1)',
     tableSchemaInputEmpty: '[aria-label="Select table or type table name"]',
   },
   databaseInput: '[data-test=DatabaseSelector] > :nth-child(1)',

superset-frontend/src/SqlLab/App.jsx

@@ -41,9 +41,9 @@ import {
 import { BYTES_PER_CHAR, KB_STORAGE } from './constants';
 import setupApp from '../setup/setupApp';
 
-import './main.less';
 import '../assets/stylesheets/reactable-pagination.less';
 import { theme } from '../preamble';
+import { SqlLabGlobalStyles } from './SqlLabGlobalStyles';
 
 setupApp();
 setupExtensions();
@@ -141,6 +141,7 @@ const Application = () => (
     <Provider store={store}>
       <ThemeProvider theme={theme}>
         <GlobalStyles />
+        <SqlLabGlobalStyles />
         <App />
       </ThemeProvider>
     </Provider>

superset-frontend/src/dashboard/stylesheets/index.less → superset-frontend/src/SqlLab/SqlLabGlobalStyles.tsx

@@ -16,13 +16,21 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-@import '../../assets/stylesheets/less/variables.less';
 
-@import './builder.less';
-@import './dashboard.less';
-@import './dnd.less';
-@import './filter-scope-selector.less';
-@import './grid.less';
-@import './popover-menu.less';
-@import './resizable.less';
-@import './components/index.less';
+import React from 'react';
+import { Global } from '@emotion/react';
+import { css } from '@superset-ui/core';
+
+export const SqlLabGlobalStyles = () => (
+  <Global
+    styles={theme => css`
+      body {
+        min-height: max(
+          100vh,
+          ${theme.gridUnit * 125}px
+        ); // Set a min height so the gutter is always visible when resizing
+        overflow: hidden;
+      }
+    `}
+  />
+);

superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx

@@ -18,6 +18,8 @@
  */
 import React, { useState, useEffect, useRef } from 'react';
 import { useDispatch } from 'react-redux';
+import { css, styled } from '@superset-ui/core';
+
 import { usePrevious } from 'src/hooks/usePrevious';
 import { areArraysShallowEqual } from 'src/reduxUtils';
 import sqlKeywords from 'src/SqlLab/utils/sqlKeywords';
@@ -57,6 +59,28 @@ type AceEditorWrapperProps = {
   hotkeys: HotKey[];
 };
 
+const StyledAceEditor = styled(AceEditor)`
+  ${({ theme }) => css`
+    && {
+      // double class is better than !important
+      border: 1px solid ${theme.colors.grayscale.light2};
+      font-feature-settings: 'liga' off, 'calt' off;
+      // Fira Code causes problem with Ace under Firefox
+      font-family: 'Menlo', 'Consolas', 'Courier New', 'Ubuntu Mono',
+        'source-code-pro', 'Lucida Console', monospace;
+
+      &.ace_autocomplete {
+        // Use !important because Ace Editor applies extra CSS at the last second
+        // when opening the autocomplete.
+        width: ${theme.gridUnit * 130}px !important;
+      }
+
+      .ace_scroller {
+        background-color: ${theme.colors.grayscale.light4};
+      }
+    }
+  `}
+`;
 const AceEditorWrapper = ({
   autocomplete,
   onBlur = () => {},
@@ -258,7 +282,7 @@ const AceEditorWrapper = ({
   };
 
   return (
-    <AceEditor
+    <StyledAceEditor
       keywords={words}
       onLoad={onEditorLoad}
       onBlur={onBlurSql}

superset-frontend/src/SqlLab/components/App/index.jsx

@@ -20,7 +20,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import { t } from '@superset-ui/core';
+import { css, styled, t } from '@superset-ui/core';
 import throttle from 'lodash/throttle';
 import ToastContainer from 'src/components/MessageToasts/ToastContainer';
 import {
@@ -32,6 +32,69 @@ import * as Actions from 'src/SqlLab/actions/sqlLab';
 import TabbedSqlEditors from '../TabbedSqlEditors';
 import QueryAutoRefresh from '../QueryAutoRefresh';
 
+const SqlLabStyles = styled.div`
+  ${({ theme }) => css`
+    &.SqlLab {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      padding: 0 ${theme.gridUnit * 2}px;
+
+      pre {
+        padding: 0 !important;
+        margin: 0;
+        border: none;
+        font-size: ${theme.typography.sizes.s}px;
+        background: transparent !important;
+      }
+
+      .north-pane {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .ace_editor {
+        flex-grow: 1;
+      }
+
+      .ace_content {
+        height: 100%;
+      }
+
+      .ant-tabs-content-holder {
+        /* This is needed for Safari */
+        height: 100%;
+      }
+
+      .ant-tabs-content {
+        height: 100%;
+        position: relative;
+        background-color: ${theme.colors.grayscale.light5};
+        overflow-x: auto;
+        overflow-y: auto;
+
+        > .ant-tabs-tabpane {
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+        }
+      }
+
+      .ResultsModal .ant-modal-body {
+        min-height: ${theme.gridUnit * 140}px;
+      }
+
+      .ant-modal-body {
+        overflow: auto;
+      }
+    }
+  `};
+`;
+
 class App extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -99,15 +162,15 @@ class App extends React.PureComponent {
       return window.location.replace('/superset/sqllab/history/');
     }
     return (
-      <div className="App SqlLab">
+      <SqlLabStyles className="App SqlLab">
         <QueryAutoRefresh
           queries={queries}
           refreshQueries={actions?.refreshQueries}
           queriesLastUpdate={queriesLastUpdate}
         />
         <TabbedSqlEditors />
         <ToastContainer />
-      </div>
+      </SqlLabStyles>
     );
   }
 }

superset-frontend/src/SqlLab/components/EstimateQueryCostButton/index.tsx

@@ -18,7 +18,7 @@
  */
 import React, { useMemo } from 'react';
 import { useSelector } from 'react-redux';
-import { t } from '@superset-ui/core';
+import { css, styled, t } from '@superset-ui/core';
 
 import Alert from 'src/components/Alert';
 import TableView from 'src/components/TableView';
@@ -36,6 +36,12 @@ export interface EstimateQueryCostButtonProps {
   disabled?: boolean;
 }
 
+const CostEstimateModalStyles = styled.div`
+  ${({ theme }) => css`
+    font-size: ${theme.typography.sizes.s};
+  `}
+`;
+
 const EstimateQueryCostButton = ({
   getEstimate,
   queryEditorId,
@@ -76,13 +82,14 @@ const EstimateQueryCostButton = ({
     }
     if (queryCostEstimate?.completed) {
       return (
-        <TableView
-          columns={columns}
-          data={tableData}
-          withPagination={false}
-          emptyWrapperType={EmptyWrapperType.Small}
-          className="cost-estimate"
-        />
+        <CostEstimateModalStyles>
+          <TableView
+            columns={columns}
+            data={tableData}
+            withPagination={false}
+            emptyWrapperType={EmptyWrapperType.Small}
+          />
+        </CostEstimateModalStyles>
       );
     }
     return <Loading position="normal" />;