Skip to content

Commit 0ccd971

Browse files
author
Lily Kuang
committed
Merge remote-tracking branch 'origin/master' into lily/upgrade-react-table
2 parents a3ed801 + 1fe4a71 commit 0ccd971

File tree

110 files changed

+18679
-12159
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

110 files changed

+18679
-12159
lines changed

‎setup.cfg‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@
1717
[metadata]
1818
name = Superset
1919
summary = a data exploration platform
20-
description-file = README.md
20+
description_file = README.md
2121
author = Apache Superset Dev
22-
author-email = [email protected]
22+
author_email = [email protected]
2323
license = Apache License, Version 2.0
2424

2525
[files]

‎superset-frontend/.storybook/preview.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,5 +87,5 @@ addParameters({
8787
],
8888
},
8989
},
90-
controls: { expanded: true },
90+
controls: { expanded: true, sort: 'alpha' },
9191
});

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -127,10 +127,11 @@ export const databasesPage = {
127127

128128
export const sqlLabView = {
129129
sqlEditorLeftBar: {
130-
sqlEditorLeftBar: '[class="SqlEditorLeftBar"]',
131-
databaseSchemaTableSection: '[class="SqlEditorLeftBar"] > :nth-child(1)',
130+
sqlEditorLeftBar: '[data-test="sql-editor-left-bar"]',
131+
databaseSchemaTableSection:
132+
'[data-test="sql-editor-left-bar"] > :nth-child(1)',
132133
tableSchemaSection:
133-
'[class="SqlEditorLeftBar"] > :nth-child(1) > :nth-child(3) > :nth-child(1)',
134+
'[data-test="sql-editor-left-bar"] > :nth-child(1) > :nth-child(3) > :nth-child(1)',
134135
tableSchemaInputEmpty: '[aria-label="Select table or type table name"]',
135136
},
136137
databaseInput: '[data-test=DatabaseSelector] > :nth-child(1)',

‎superset-frontend/src/SqlLab/App.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,9 @@ import {
4242
import { BYTES_PER_CHAR, KB_STORAGE } from './constants';
4343
import setupApp from '../setup/setupApp';
4444

45-
import './main.less';
4645
import '../assets/stylesheets/reactable-pagination.less';
4746
import { theme } from '../preamble';
47+
import { SqlLabGlobalStyles } from './SqlLabGlobalStyles';
4848

4949
setupApp();
5050
setupExtensions();
@@ -141,6 +141,7 @@ const Application = () => (
141141
<Provider store={store}>
142142
<ThemeProvider theme={theme}>
143143
<GlobalStyles />
144+
<SqlLabGlobalStyles />
144145
<App />
145146
</ThemeProvider>
146147
</Provider>

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

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,21 @@
1616
* specific language governing permissions and limitations
1717
* under the License.
1818
*/
19-
@import '../../assets/stylesheets/less/variables.less';
2019

21-
@import './builder.less';
22-
@import './dashboard.less';
23-
@import './dnd.less';
24-
@import './filter-scope-selector.less';
25-
@import './grid.less';
26-
@import './popover-menu.less';
27-
@import './resizable.less';
28-
@import './components/index.less';
20+
import React from 'react';
21+
import { Global } from '@emotion/react';
22+
import { css } from '@superset-ui/core';
23+
24+
export const SqlLabGlobalStyles = () => (
25+
<Global
26+
styles={theme => css`
27+
body {
28+
min-height: max(
29+
100vh,
30+
${theme.gridUnit * 125}px
31+
); // Set a min height so the gutter is always visible when resizing
32+
overflow: hidden;
33+
}
34+
`}
35+
/>
36+
);

‎superset-frontend/src/SqlLab/actions/sqlLab.js‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,10 +128,22 @@ export function getUpToDateQuery(rootState, queryEditor, key) {
128128
sqlLab: { unsavedQueryEditor },
129129
} = rootState;
130130
const id = key ?? queryEditor.id;
131-
return {
131+
const updatedQueryEditor = {
132132
...queryEditor,
133133
...(id === unsavedQueryEditor.id && unsavedQueryEditor),
134134
};
135+
136+
if (
137+
'schema' in updatedQueryEditor &&
138+
!updatedQueryEditor.schemaOptions?.find(
139+
({ value }) => value === updatedQueryEditor.schema,
140+
)
141+
) {
142+
// remove the deprecated schema option
143+
delete updatedQueryEditor.schema;
144+
}
145+
146+
return updatedQueryEditor;
135147
}
136148

137149
export function resetState() {

‎superset-frontend/src/SqlLab/actions/sqlLab.test.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -316,6 +316,54 @@ describe('async actions', () => {
316316
});
317317
});
318318

319+
describe('getUpToDateQuery', () => {
320+
const id = 'randomidvalue2';
321+
const unsavedQueryEditor = {
322+
id,
323+
sql: 'some query here',
324+
schemaOptions: [{ value: 'testSchema' }, { value: 'schema2' }],
325+
};
326+
327+
it('returns payload with the updated queryEditor', () => {
328+
const queryEditor = {
329+
id,
330+
name: 'Dummy query editor',
331+
schema: 'testSchema',
332+
};
333+
const state = {
334+
sqlLab: {
335+
tabHistory: [id],
336+
queryEditors: [queryEditor],
337+
unsavedQueryEditor,
338+
},
339+
};
340+
expect(actions.getUpToDateQuery(state, queryEditor)).toEqual({
341+
...queryEditor,
342+
...unsavedQueryEditor,
343+
});
344+
});
345+
346+
it('ignores the deprecated schema option', () => {
347+
const queryEditor = {
348+
id,
349+
name: 'Dummy query editor',
350+
schema: 'oldSchema',
351+
};
352+
const state = {
353+
sqlLab: {
354+
tabHistory: [id],
355+
queryEditors: [queryEditor],
356+
unsavedQueryEditor,
357+
},
358+
};
359+
expect(actions.getUpToDateQuery(state, queryEditor)).toEqual({
360+
...queryEditor,
361+
...unsavedQueryEditor,
362+
schema: undefined,
363+
});
364+
});
365+
});
366+
319367
describe('postStopQuery', () => {
320368
const stopQueryEndpoint = 'glob:*/api/v1/query/stop';
321369
fetchMock.post(stopQueryEndpoint, {});

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

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@
1818
*/
1919
import React, { useState, useEffect, useRef } from 'react';
2020
import { useDispatch } from 'react-redux';
21+
import { css, styled } from '@superset-ui/core';
22+
2123
import { usePrevious } from 'src/hooks/usePrevious';
2224
import { areArraysShallowEqual } from 'src/reduxUtils';
2325
import sqlKeywords from 'src/SqlLab/utils/sqlKeywords';
@@ -57,6 +59,28 @@ type AceEditorWrapperProps = {
5759
hotkeys: HotKey[];
5860
};
5961

62+
const StyledAceEditor = styled(AceEditor)`
63+
${({ theme }) => css`
64+
&& {
65+
// double class is better than !important
66+
border: 1px solid ${theme.colors.grayscale.light2};
67+
font-feature-settings: 'liga' off, 'calt' off;
68+
// Fira Code causes problem with Ace under Firefox
69+
font-family: 'Menlo', 'Consolas', 'Courier New', 'Ubuntu Mono',
70+
'source-code-pro', 'Lucida Console', monospace;
71+
72+
&.ace_autocomplete {
73+
// Use !important because Ace Editor applies extra CSS at the last second
74+
// when opening the autocomplete.
75+
width: ${theme.gridUnit * 130}px !important;
76+
}
77+
78+
.ace_scroller {
79+
background-color: ${theme.colors.grayscale.light4};
80+
}
81+
}
82+
`}
83+
`;
6084
const AceEditorWrapper = ({
6185
autocomplete,
6286
onBlur = () => {},
@@ -258,7 +282,7 @@ const AceEditorWrapper = ({
258282
};
259283

260284
return (
261-
<AceEditor
285+
<StyledAceEditor
262286
keywords={words}
263287
onLoad={onEditorLoad}
264288
onBlur={onBlurSql}

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

Lines changed: 66 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import React from 'react';
2020
import PropTypes from 'prop-types';
2121
import { bindActionCreators } from 'redux';
2222
import { connect } from 'react-redux';
23-
import { t } from '@superset-ui/core';
23+
import { css, styled, t } from '@superset-ui/core';
2424
import throttle from 'lodash/throttle';
2525
import ToastContainer from 'src/components/MessageToasts/ToastContainer';
2626
import {
@@ -32,6 +32,69 @@ import * as Actions from 'src/SqlLab/actions/sqlLab';
3232
import TabbedSqlEditors from '../TabbedSqlEditors';
3333
import QueryAutoRefresh from '../QueryAutoRefresh';
3434

35+
const SqlLabStyles = styled.div`
36+
${({ theme }) => css`
37+
&.SqlLab {
38+
position: absolute;
39+
top: 0;
40+
right: 0;
41+
bottom: 0;
42+
left: 0;
43+
padding: 0 ${theme.gridUnit * 2}px;
44+
45+
pre {
46+
padding: 0 !important;
47+
margin: 0;
48+
border: none;
49+
font-size: ${theme.typography.sizes.s}px;
50+
background: transparent !important;
51+
}
52+
53+
.north-pane {
54+
display: flex;
55+
flex-direction: column;
56+
}
57+
58+
.ace_editor {
59+
flex-grow: 1;
60+
}
61+
62+
.ace_content {
63+
height: 100%;
64+
}
65+
66+
.ant-tabs-content-holder {
67+
/* This is needed for Safari */
68+
height: 100%;
69+
}
70+
71+
.ant-tabs-content {
72+
height: 100%;
73+
position: relative;
74+
background-color: ${theme.colors.grayscale.light5};
75+
overflow-x: auto;
76+
overflow-y: auto;
77+
78+
> .ant-tabs-tabpane {
79+
position: absolute;
80+
top: 0;
81+
right: 0;
82+
bottom: 0;
83+
left: 0;
84+
}
85+
}
86+
87+
.ResultsModal .ant-modal-body {
88+
min-height: ${theme.gridUnit * 140}px;
89+
}
90+
91+
.ant-modal-body {
92+
overflow: auto;
93+
}
94+
}
95+
`};
96+
`;
97+
3598
class App extends React.PureComponent {
3699
constructor(props) {
37100
super(props);
@@ -99,15 +162,15 @@ class App extends React.PureComponent {
99162
return window.location.replace('/superset/sqllab/history/');
100163
}
101164
return (
102-
<div className="App SqlLab">
165+
<SqlLabStyles className="App SqlLab">
103166
<QueryAutoRefresh
104167
queries={queries}
105168
refreshQueries={actions?.refreshQueries}
106169
queriesLastUpdate={queriesLastUpdate}
107170
/>
108171
<TabbedSqlEditors />
109172
<ToastContainer />
110-
</div>
173+
</SqlLabStyles>
111174
);
112175
}
113176
}

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

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
*/
1919
import React, { useMemo } from 'react';
2020
import { useSelector } from 'react-redux';
21-
import { t } from '@superset-ui/core';
21+
import { css, styled, t } from '@superset-ui/core';
2222

2323
import Alert from 'src/components/Alert';
2424
import TableView from 'src/components/TableView';
@@ -36,6 +36,12 @@ export interface EstimateQueryCostButtonProps {
3636
disabled?: boolean;
3737
}
3838

39+
const CostEstimateModalStyles = styled.div`
40+
${({ theme }) => css`
41+
font-size: ${theme.typography.sizes.s};
42+
`}
43+
`;
44+
3945
const EstimateQueryCostButton = ({
4046
getEstimate,
4147
queryEditorId,
@@ -76,13 +82,14 @@ const EstimateQueryCostButton = ({
7682
}
7783
if (queryCostEstimate?.completed) {
7884
return (
79-
<TableView
80-
columns={columns}
81-
data={tableData}
82-
withPagination={false}
83-
emptyWrapperType={EmptyWrapperType.Small}
84-
className="cost-estimate"
85-
/>
85+
<CostEstimateModalStyles>
86+
<TableView
87+
columns={columns}
88+
data={tableData}
89+
withPagination={false}
90+
emptyWrapperType={EmptyWrapperType.Small}
91+
/>
92+
</CostEstimateModalStyles>
8693
);
8794
}
8895
return <Loading position="normal" />;

0 commit comments

Comments
 (0)