chore: migrating some LESS (#13296)

superset-frontend/src/SqlLab/components/ResultSet.tsx

@@ -100,6 +100,23 @@ const MonospaceDiv = styled.div`
   white-space: pre-wrap;
 `;
 
+const ResultSetControls = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding: ${({ theme }) => 2 * theme.gridUnit}px 0;
+  position: fixed;
+`;
+
+const ResultSetButtons = styled.div`
+  display: grid;
+  grid-auto-flow: column;
+  padding-right: ${({ theme }) => 2 * theme.gridUnit}px;
+`;
+
+const ResultSetErrorMessage = styled.div`
+  padding-top: ${({ theme }) => 4 * theme.gridUnit}px;
+`;
+
 export default class ResultSet extends React.PureComponent<
   ResultSetProps,
   ResultSetState
@@ -416,7 +433,7 @@ export default class ResultSet extends React.PureComponent<
           saveModalAutocompleteValue.length === 0);
 
       return (
-        <div className="ResultSetControls">
+        <ResultSetControls>
           <SaveDatasetModal
             visible={showSaveDatasetModal}
             onOk={this.handleSaveInDataset}
@@ -435,7 +452,7 @@ export default class ResultSet extends React.PureComponent<
             filterAutocompleteOption={this.handleFilterAutocompleteOption}
             onChangeAutoComplete={this.handleOnChangeAutoComplete}
           />
-          <div className="ResultSetButtons">
+          <ResultSetButtons>
             {this.props.visualize &&
               this.props.database &&
               this.props.database.allows_virtual_table_explore && (
@@ -465,7 +482,7 @@ export default class ResultSet extends React.PureComponent<
                 </Button>
               }
             />
-          </div>
+          </ResultSetButtons>
           {this.props.search && (
             <input
               type="text"
@@ -475,10 +492,10 @@ export default class ResultSet extends React.PureComponent<
               placeholder={t('Filter results')}
             />
           )}
-        </div>
+        </ResultSetControls>
       );
     }
-    return <div className="noControls" />;
+    return <div />;
   }
 
   render() {
@@ -502,7 +519,7 @@ export default class ResultSet extends React.PureComponent<
     }
     if (query.state === 'failed') {
       return (
-        <div className="result-set-error-message">
+        <ResultSetErrorMessage>
           <ErrorMessageWithStackTrace
             title={t('Database error')}
             error={query?.errors?.[0]}
@@ -511,7 +528,7 @@ export default class ResultSet extends React.PureComponent<
             link={query.link}
             source="sqllab"
           />
-        </div>
+        </ResultSetErrorMessage>
       );
     }
     if (query.state === 'success' && query.ctas) {
@@ -592,7 +609,6 @@ export default class ResultSet extends React.PureComponent<
         return (
           <Button
             buttonSize="small"
-            className="fetch"
             buttonStyle="primary"
             onClick={() =>
               this.reFetchQueryResults({
@@ -609,7 +625,6 @@ export default class ResultSet extends React.PureComponent<
         return (
           <Button
             buttonSize="small"
-            className="fetch"
             buttonStyle="primary"
             onClick={() => this.fetchResults(query)}
           >

superset-frontend/src/SqlLab/main.less

@@ -362,23 +362,6 @@ div.tablePopover {
   }
 }
 
-.ResultSetControls {
-  display: flex;
-  justify-content: space-between;
-  padding: 8px 0;
-  position: fixed;
-}
-
-.ResultSetButtons {
-  display: grid;
-  grid-auto-flow: column;
-  padding-right: 8px;
-}
-
-.result-set-error-message {
-  padding-top: 16px;
-}
-
 .ace_editor.ace_editor {
   //double class is better than !important
   border: 1px solid @gray-light;