chore: migrating some LESS (#13296)
diff --git a/superset-frontend/src/SqlLab/components/ResultSet.tsx b/superset-frontend/src/SqlLab/components/ResultSet.tsx
index b662c03..9dc08a4 100644
--- a/superset-frontend/src/SqlLab/components/ResultSet.tsx
+++ b/superset-frontend/src/SqlLab/components/ResultSet.tsx
@@ -100,6 +100,23 @@
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 @@
saveModalAutocompleteValue.length === 0);
return (
- <div className="ResultSetControls">
+ <ResultSetControls>
<SaveDatasetModal
visible={showSaveDatasetModal}
onOk={this.handleSaveInDataset}
@@ -435,7 +452,7 @@
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 @@
</Button>
}
/>
- </div>
+ </ResultSetButtons>
{this.props.search && (
<input
type="text"
@@ -475,10 +492,10 @@
placeholder={t('Filter results')}
/>
)}
- </div>
+ </ResultSetControls>
);
}
- return <div className="noControls" />;
+ return <div />;
}
render() {
@@ -502,7 +519,7 @@
}
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 @@
link={query.link}
source="sqllab"
/>
- </div>
+ </ResultSetErrorMessage>
);
}
if (query.state === 'success' && query.ctas) {
@@ -592,7 +609,6 @@
return (
<Button
buttonSize="small"
- className="fetch"
buttonStyle="primary"
onClick={() =>
this.reFetchQueryResults({
@@ -609,7 +625,6 @@
return (
<Button
buttonSize="small"
- className="fetch"
buttonStyle="primary"
onClick={() => this.fetchResults(query)}
>
diff --git a/superset-frontend/src/SqlLab/main.less b/superset-frontend/src/SqlLab/main.less
index 5dce200..af08c64 100644
--- a/superset-frontend/src/SqlLab/main.less
+++ b/superset-frontend/src/SqlLab/main.less
@@ -362,23 +362,6 @@
}
}
-.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;
