chore: migrating some LESS (#13296)

This commit is contained in:
Evan Rusackas 2021-02-25 15:44:58 -08:00 committed by GitHub
parent e11d0cbf44
commit 33bec57619
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 26 deletions

View File

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

View File

@ -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 { .ace_editor.ace_editor {
//double class is better than !important //double class is better than !important
border: 1px solid @gray-light; border: 1px solid @gray-light;