mirror of
https://github.com/apache/superset.git
synced 2024-09-06 13:57:40 -04:00
chore: refactor AceEditorWrapper to functional component (#21532)
This commit is contained in:
parent
546cc18475
commit
15c3c34268
@ -23,11 +23,6 @@ import { render, waitFor } from 'spec/helpers/testing-library';
|
|||||||
import { QueryEditor } from 'src/SqlLab/types';
|
import { QueryEditor } from 'src/SqlLab/types';
|
||||||
import { Store } from 'redux';
|
import { Store } from 'redux';
|
||||||
import { initialState, defaultQueryEditor } from 'src/SqlLab/fixtures';
|
import { initialState, defaultQueryEditor } from 'src/SqlLab/fixtures';
|
||||||
import {
|
|
||||||
queryEditorSetSelectedText,
|
|
||||||
queryEditorSetFunctionNames,
|
|
||||||
addTable,
|
|
||||||
} from 'src/SqlLab/actions/sqlLab';
|
|
||||||
import AceEditorWrapper from 'src/SqlLab/components/AceEditorWrapper';
|
import AceEditorWrapper from 'src/SqlLab/components/AceEditorWrapper';
|
||||||
import { AsyncAceEditorProps } from 'src/components/AsyncAceEditor';
|
import { AsyncAceEditorProps } from 'src/components/AsyncAceEditor';
|
||||||
|
|
||||||
@ -54,11 +49,6 @@ const setup = (queryEditor: QueryEditor, store?: Store) =>
|
|||||||
render(
|
render(
|
||||||
<AceEditorWrapper
|
<AceEditorWrapper
|
||||||
queryEditor={queryEditor}
|
queryEditor={queryEditor}
|
||||||
actions={{
|
|
||||||
queryEditorSetSelectedText,
|
|
||||||
queryEditorSetFunctionNames,
|
|
||||||
addTable,
|
|
||||||
}}
|
|
||||||
height="100px"
|
height="100px"
|
||||||
hotkeys={[]}
|
hotkeys={[]}
|
||||||
database={{}}
|
database={{}}
|
||||||
@ -82,27 +72,6 @@ describe('AceEditorWrapper', () => {
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('renders sql from unsaved change', () => {
|
|
||||||
const expectedSql = 'SELECT updated_column\nFROM updated_table\nWHERE';
|
|
||||||
const { getByTestId } = setup(
|
|
||||||
defaultQueryEditor,
|
|
||||||
mockStore({
|
|
||||||
...initialState,
|
|
||||||
sqlLab: {
|
|
||||||
...initialState.sqlLab,
|
|
||||||
unsavedQueryEditor: {
|
|
||||||
id: defaultQueryEditor.id,
|
|
||||||
sql: expectedSql,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(getByTestId('react-ace')).toHaveTextContent(
|
|
||||||
JSON.stringify({ value: expectedSql }).slice(1, -1),
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('renders current sql for unrelated unsaved changes', () => {
|
it('renders current sql for unrelated unsaved changes', () => {
|
||||||
const expectedSql = 'SELECT updated_column\nFROM updated_table\nWHERE';
|
const expectedSql = 'SELECT updated_column\nFROM updated_table\nWHERE';
|
||||||
const { getByTestId } = setup(
|
const { getByTestId } = setup(
|
||||||
|
@ -16,10 +16,16 @@
|
|||||||
* specific language governing permissions and limitations
|
* specific language governing permissions and limitations
|
||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React, { useState, useEffect, useRef } from 'react';
|
||||||
import { connect } from 'react-redux';
|
import { useDispatch } from 'react-redux';
|
||||||
|
import { usePrevious } from 'src/hooks/usePrevious';
|
||||||
import { areArraysShallowEqual } from 'src/reduxUtils';
|
import { areArraysShallowEqual } from 'src/reduxUtils';
|
||||||
import sqlKeywords from 'src/SqlLab/utils/sqlKeywords';
|
import sqlKeywords from 'src/SqlLab/utils/sqlKeywords';
|
||||||
|
import {
|
||||||
|
queryEditorSetSelectedText,
|
||||||
|
queryEditorSetFunctionNames,
|
||||||
|
addTable,
|
||||||
|
} from 'src/SqlLab/actions/sqlLab';
|
||||||
import {
|
import {
|
||||||
SCHEMA_AUTOCOMPLETE_SCORE,
|
SCHEMA_AUTOCOMPLETE_SCORE,
|
||||||
TABLE_AUTOCOMPLETE_SCORE,
|
TABLE_AUTOCOMPLETE_SCORE,
|
||||||
@ -31,7 +37,7 @@ import {
|
|||||||
AceCompleterKeyword,
|
AceCompleterKeyword,
|
||||||
FullSQLEditor as AceEditor,
|
FullSQLEditor as AceEditor,
|
||||||
} from 'src/components/AsyncAceEditor';
|
} from 'src/components/AsyncAceEditor';
|
||||||
import { QueryEditor, SchemaOption, SqlLabRootState } from 'src/SqlLab/types';
|
import { QueryEditor } from 'src/SqlLab/types';
|
||||||
|
|
||||||
type HotKey = {
|
type HotKey = {
|
||||||
key: string;
|
key: string;
|
||||||
@ -40,115 +46,91 @@ type HotKey = {
|
|||||||
func: () => void;
|
func: () => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
type OwnProps = {
|
type AceEditorWrapperProps = {
|
||||||
queryEditor: QueryEditor;
|
|
||||||
extendedTables: Array<{ name: string; columns: any[] }>;
|
|
||||||
autocomplete: boolean;
|
autocomplete: boolean;
|
||||||
onChange: (sql: string) => void;
|
|
||||||
onBlur: (sql: string) => void;
|
onBlur: (sql: string) => void;
|
||||||
database: any;
|
onChange: (sql: string) => void;
|
||||||
actions: {
|
|
||||||
queryEditorSetSelectedText: (edit: any, text: null | string) => void;
|
|
||||||
queryEditorSetFunctionNames: (queryEditor: object, dbId: number) => void;
|
|
||||||
addTable: (
|
|
||||||
queryEditor: any,
|
|
||||||
database: any,
|
|
||||||
value: any,
|
|
||||||
schema: any,
|
|
||||||
) => void;
|
|
||||||
};
|
|
||||||
hotkeys: HotKey[];
|
|
||||||
height: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
type ReduxProps = {
|
|
||||||
queryEditor: QueryEditor;
|
queryEditor: QueryEditor;
|
||||||
sql: string;
|
database: any;
|
||||||
schemas: SchemaOption[];
|
extendedTables?: Array<{ name: string; columns: any[] }>;
|
||||||
tables: any[];
|
height: string;
|
||||||
functionNames: string[];
|
hotkeys: HotKey[];
|
||||||
};
|
};
|
||||||
|
|
||||||
type Props = ReduxProps & OwnProps;
|
const AceEditorWrapper = ({
|
||||||
|
autocomplete,
|
||||||
|
onBlur = () => {},
|
||||||
|
onChange = () => {},
|
||||||
|
queryEditor,
|
||||||
|
database,
|
||||||
|
extendedTables = [],
|
||||||
|
height,
|
||||||
|
hotkeys,
|
||||||
|
}: AceEditorWrapperProps) => {
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
interface State {
|
const { sql: currentSql } = queryEditor;
|
||||||
sql: string;
|
const functionNames = queryEditor.functionNames ?? [];
|
||||||
words: AceCompleterKeyword[];
|
const schemas = queryEditor.schemaOptions ?? [];
|
||||||
}
|
const tables = queryEditor.tableOptions ?? [];
|
||||||
|
|
||||||
class AceEditorWrapper extends React.PureComponent<Props, State> {
|
const [sql, setSql] = useState(currentSql);
|
||||||
static defaultProps = {
|
const [words, setWords] = useState<AceCompleterKeyword[]>([]);
|
||||||
onBlur: () => {},
|
|
||||||
onChange: () => {},
|
// The editor changeSelection is called multiple times in a row,
|
||||||
schemas: [],
|
// faster than React reconciliation process, so the selected text
|
||||||
tables: [],
|
// needs to be stored out of the state to ensure changes to it
|
||||||
functionNames: [],
|
// get saved immediately
|
||||||
extendedTables: [],
|
const currentSelectionCache = useRef('');
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Making sure no text is selected from previous mount
|
||||||
|
dispatch(queryEditorSetSelectedText(queryEditor, null));
|
||||||
|
if (queryEditor.dbId) {
|
||||||
|
dispatch(queryEditorSetFunctionNames(queryEditor, queryEditor.dbId));
|
||||||
|
}
|
||||||
|
setAutoCompleter();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const prevTables = usePrevious(tables) ?? [];
|
||||||
|
const prevSchemas = usePrevious(schemas) ?? [];
|
||||||
|
const prevExtendedTables = usePrevious(extendedTables) ?? [];
|
||||||
|
const prevSql = usePrevious(currentSql);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (
|
||||||
|
!areArraysShallowEqual(tables, prevTables) ||
|
||||||
|
!areArraysShallowEqual(schemas, prevSchemas) ||
|
||||||
|
!areArraysShallowEqual(extendedTables, prevExtendedTables)
|
||||||
|
) {
|
||||||
|
setAutoCompleter();
|
||||||
|
}
|
||||||
|
}, [tables, schemas, extendedTables]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (currentSql !== prevSql) {
|
||||||
|
setSql(currentSql);
|
||||||
|
}
|
||||||
|
}, [currentSql]);
|
||||||
|
|
||||||
|
const onBlurSql = () => {
|
||||||
|
onBlur(sql);
|
||||||
};
|
};
|
||||||
|
|
||||||
private currentSelectionCache;
|
const onAltEnter = () => {
|
||||||
|
onBlur(sql);
|
||||||
|
};
|
||||||
|
|
||||||
constructor(props: Props) {
|
const onEditorLoad = (editor: any) => {
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
sql: props.sql,
|
|
||||||
words: [],
|
|
||||||
};
|
|
||||||
|
|
||||||
// The editor changeSelection is called multiple times in a row,
|
|
||||||
// faster than React reconciliation process, so the selected text
|
|
||||||
// needs to be stored out of the state to ensure changes to it
|
|
||||||
// get saved immediately
|
|
||||||
this.currentSelectionCache = '';
|
|
||||||
this.onChange = this.onChange.bind(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
// Making sure no text is selected from previous mount
|
|
||||||
this.props.actions.queryEditorSetSelectedText(this.props.queryEditor, null);
|
|
||||||
if (this.props.queryEditor.dbId) {
|
|
||||||
this.props.actions.queryEditorSetFunctionNames(
|
|
||||||
this.props.queryEditor,
|
|
||||||
this.props.queryEditor.dbId,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
this.setAutoCompleter(this.props);
|
|
||||||
}
|
|
||||||
|
|
||||||
UNSAFE_componentWillReceiveProps(nextProps: Props) {
|
|
||||||
if (
|
|
||||||
!areArraysShallowEqual(this.props.tables, nextProps.tables) ||
|
|
||||||
!areArraysShallowEqual(this.props.schemas, nextProps.schemas) ||
|
|
||||||
!areArraysShallowEqual(
|
|
||||||
this.props.extendedTables,
|
|
||||||
nextProps.extendedTables,
|
|
||||||
)
|
|
||||||
) {
|
|
||||||
this.setAutoCompleter(nextProps);
|
|
||||||
}
|
|
||||||
if (nextProps.sql !== this.props.sql) {
|
|
||||||
this.setState({ sql: nextProps.sql });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onBlur() {
|
|
||||||
this.props.onBlur(this.state.sql);
|
|
||||||
}
|
|
||||||
|
|
||||||
onAltEnter() {
|
|
||||||
this.props.onBlur(this.state.sql);
|
|
||||||
}
|
|
||||||
|
|
||||||
onEditorLoad(editor: any) {
|
|
||||||
editor.commands.addCommand({
|
editor.commands.addCommand({
|
||||||
name: 'runQuery',
|
name: 'runQuery',
|
||||||
bindKey: { win: 'Alt-enter', mac: 'Alt-enter' },
|
bindKey: { win: 'Alt-enter', mac: 'Alt-enter' },
|
||||||
exec: () => {
|
exec: () => {
|
||||||
this.onAltEnter();
|
onAltEnter();
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
this.props.hotkeys.forEach(keyConfig => {
|
hotkeys.forEach(keyConfig => {
|
||||||
editor.commands.addCommand({
|
editor.commands.addCommand({
|
||||||
name: keyConfig.name,
|
name: keyConfig.name,
|
||||||
bindKey: { win: keyConfig.key, mac: keyConfig.key },
|
bindKey: { win: keyConfig.key, mac: keyConfig.key },
|
||||||
@ -162,27 +144,23 @@ class AceEditorWrapper extends React.PureComponent<Props, State> {
|
|||||||
|
|
||||||
// Backspace trigger 1 character selection, ignoring
|
// Backspace trigger 1 character selection, ignoring
|
||||||
if (
|
if (
|
||||||
selectedText !== this.currentSelectionCache &&
|
selectedText !== currentSelectionCache.current &&
|
||||||
selectedText.length !== 1
|
selectedText.length !== 1
|
||||||
) {
|
) {
|
||||||
this.props.actions.queryEditorSetSelectedText(
|
dispatch(queryEditorSetSelectedText(queryEditor, selectedText));
|
||||||
this.props.queryEditor,
|
|
||||||
selectedText,
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.currentSelectionCache = selectedText;
|
currentSelectionCache.current = selectedText;
|
||||||
});
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
onChange(text: string) {
|
const onChangeText = (text: string) => {
|
||||||
this.setState({ sql: text });
|
setSql(text);
|
||||||
this.props.onChange(text);
|
onChange(text);
|
||||||
}
|
};
|
||||||
|
|
||||||
setAutoCompleter(props: Props) {
|
const setAutoCompleter = () => {
|
||||||
// Loading schema, table and column names as auto-completable words
|
// Loading schema, table and column names as auto-completable words
|
||||||
const schemas = props.schemas || [];
|
|
||||||
const schemaWords = schemas.map(s => ({
|
const schemaWords = schemas.map(s => ({
|
||||||
name: s.label,
|
name: s.label,
|
||||||
value: s.value,
|
value: s.value,
|
||||||
@ -191,9 +169,6 @@ class AceEditorWrapper extends React.PureComponent<Props, State> {
|
|||||||
}));
|
}));
|
||||||
const columns = {};
|
const columns = {};
|
||||||
|
|
||||||
const tables = props.tables || [];
|
|
||||||
const extendedTables = props.extendedTables || [];
|
|
||||||
|
|
||||||
const tableWords = tables.map(t => {
|
const tableWords = tables.map(t => {
|
||||||
const tableName = t.value;
|
const tableName = t.value;
|
||||||
const extendedTable = extendedTables.find(et => et.name === tableName);
|
const extendedTable = extendedTables.find(et => et.name === tableName);
|
||||||
@ -217,7 +192,7 @@ class AceEditorWrapper extends React.PureComponent<Props, State> {
|
|||||||
meta: 'column',
|
meta: 'column',
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const functionWords = props.functionNames.map(func => ({
|
const functionWords = functionNames.map(func => ({
|
||||||
name: func,
|
name: func,
|
||||||
value: func,
|
value: func,
|
||||||
score: SQL_FUNCTIONS_AUTOCOMPLETE_SCORE,
|
score: SQL_FUNCTIONS_AUTOCOMPLETE_SCORE,
|
||||||
@ -227,11 +202,8 @@ class AceEditorWrapper extends React.PureComponent<Props, State> {
|
|||||||
const completer = {
|
const completer = {
|
||||||
insertMatch: (editor: Editor, data: any) => {
|
insertMatch: (editor: Editor, data: any) => {
|
||||||
if (data.meta === 'table') {
|
if (data.meta === 'table') {
|
||||||
this.props.actions.addTable(
|
dispatch(
|
||||||
this.props.queryEditor,
|
addTable(queryEditor, database, data.value, queryEditor.schema),
|
||||||
this.props.database,
|
|
||||||
data.value,
|
|
||||||
this.props.queryEditor.schema,
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -257,11 +229,11 @@ class AceEditorWrapper extends React.PureComponent<Props, State> {
|
|||||||
completer,
|
completer,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
this.setState({ words });
|
setWords(words);
|
||||||
}
|
};
|
||||||
|
|
||||||
getAceAnnotations() {
|
const getAceAnnotations = () => {
|
||||||
const { validationResult } = this.props.queryEditor;
|
const { validationResult } = queryEditor;
|
||||||
const resultIsReady = validationResult?.completed;
|
const resultIsReady = validationResult?.completed;
|
||||||
if (resultIsReady && validationResult?.errors?.length) {
|
if (resultIsReady && validationResult?.errors?.length) {
|
||||||
const errors = validationResult.errors.map((err: any) => ({
|
const errors = validationResult.errors.map((err: any) => ({
|
||||||
@ -273,42 +245,22 @@ class AceEditorWrapper extends React.PureComponent<Props, State> {
|
|||||||
return errors;
|
return errors;
|
||||||
}
|
}
|
||||||
return [];
|
return [];
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<AceEditor
|
|
||||||
keywords={this.state.words}
|
|
||||||
onLoad={this.onEditorLoad.bind(this)}
|
|
||||||
onBlur={this.onBlur.bind(this)}
|
|
||||||
height={this.props.height}
|
|
||||||
onChange={this.onChange}
|
|
||||||
width="100%"
|
|
||||||
editorProps={{ $blockScrolling: true }}
|
|
||||||
enableLiveAutocompletion={this.props.autocomplete}
|
|
||||||
value={this.state.sql}
|
|
||||||
annotations={this.getAceAnnotations()}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function mapStateToProps(
|
|
||||||
{ sqlLab: { unsavedQueryEditor } }: SqlLabRootState,
|
|
||||||
{ queryEditor }: OwnProps,
|
|
||||||
) {
|
|
||||||
const currentQueryEditor = {
|
|
||||||
...queryEditor,
|
|
||||||
...(queryEditor.id === unsavedQueryEditor.id && unsavedQueryEditor),
|
|
||||||
};
|
};
|
||||||
return {
|
|
||||||
queryEditor: currentQueryEditor,
|
return (
|
||||||
sql: currentQueryEditor.sql,
|
<AceEditor
|
||||||
schemas: currentQueryEditor.schemaOptions || [],
|
keywords={words}
|
||||||
tables: currentQueryEditor.tableOptions,
|
onLoad={onEditorLoad}
|
||||||
functionNames: currentQueryEditor.functionNames,
|
onBlur={onBlurSql}
|
||||||
};
|
height={height}
|
||||||
}
|
onChange={onChangeText}
|
||||||
export default connect<ReduxProps, {}, OwnProps>(mapStateToProps)(
|
width="100%"
|
||||||
AceEditorWrapper,
|
editorProps={{ $blockScrolling: true }}
|
||||||
);
|
enableLiveAutocompletion={autocomplete}
|
||||||
|
value={sql}
|
||||||
|
annotations={getAceAnnotations()}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AceEditorWrapper;
|
||||||
|
@ -18,6 +18,7 @@
|
|||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { mount } from 'enzyme';
|
import { mount } from 'enzyme';
|
||||||
|
import { render } from 'spec/helpers/testing-library';
|
||||||
import { supersetTheme, ThemeProvider } from '@superset-ui/core';
|
import { supersetTheme, ThemeProvider } from '@superset-ui/core';
|
||||||
import { Provider } from 'react-redux';
|
import { Provider } from 'react-redux';
|
||||||
import thunk from 'redux-thunk';
|
import thunk from 'redux-thunk';
|
||||||
@ -48,6 +49,13 @@ import {
|
|||||||
defaultQueryEditor,
|
defaultQueryEditor,
|
||||||
} from 'src/SqlLab/fixtures';
|
} from 'src/SqlLab/fixtures';
|
||||||
|
|
||||||
|
jest.mock('src/components/AsyncAceEditor', () => ({
|
||||||
|
...jest.requireActual('src/components/AsyncAceEditor'),
|
||||||
|
FullSQLEditor: props => (
|
||||||
|
<div data-test="react-ace">{JSON.stringify(props)}</div>
|
||||||
|
),
|
||||||
|
}));
|
||||||
|
|
||||||
const MOCKED_SQL_EDITOR_HEIGHT = 500;
|
const MOCKED_SQL_EDITOR_HEIGHT = 500;
|
||||||
|
|
||||||
fetchMock.get('glob:*/api/v1/database/*', { result: [] });
|
fetchMock.get('glob:*/api/v1/database/*', { result: [] });
|
||||||
@ -79,6 +87,12 @@ const store = mockStore({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const setup = (props = {}, store) =>
|
||||||
|
render(<SqlEditor {...props} />, {
|
||||||
|
useRedux: true,
|
||||||
|
...(store && { store }),
|
||||||
|
});
|
||||||
|
|
||||||
describe('SqlEditor', () => {
|
describe('SqlEditor', () => {
|
||||||
const mockedProps = {
|
const mockedProps = {
|
||||||
actions: {
|
actions: {
|
||||||
@ -118,21 +132,61 @@ describe('SqlEditor', () => {
|
|||||||
const wrapper = buildWrapper(updatedProps);
|
const wrapper = buildWrapper(updatedProps);
|
||||||
expect(wrapper.find(EmptyStateBig)).toExist();
|
expect(wrapper.find(EmptyStateBig)).toExist();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('render a SqlEditorLeftBar', async () => {
|
it('render a SqlEditorLeftBar', async () => {
|
||||||
const wrapper = buildWrapper();
|
const wrapper = buildWrapper();
|
||||||
await waitForComponentToPaint(wrapper);
|
await waitForComponentToPaint(wrapper);
|
||||||
expect(wrapper.find(SqlEditorLeftBar)).toExist();
|
expect(wrapper.find(SqlEditorLeftBar)).toExist();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('render an AceEditorWrapper', async () => {
|
it('render an AceEditorWrapper', async () => {
|
||||||
const wrapper = buildWrapper();
|
const wrapper = buildWrapper();
|
||||||
await waitForComponentToPaint(wrapper);
|
await waitForComponentToPaint(wrapper);
|
||||||
expect(wrapper.find(AceEditorWrapper)).toExist();
|
expect(wrapper.find(AceEditorWrapper)).toExist();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('renders sql from unsaved change', () => {
|
||||||
|
const expectedSql = 'SELECT updated_column\nFROM updated_table\nWHERE';
|
||||||
|
const { getByTestId } = setup(
|
||||||
|
mockedProps,
|
||||||
|
mockStore({
|
||||||
|
...initialState,
|
||||||
|
sqlLab: {
|
||||||
|
...initialState.sqlLab,
|
||||||
|
databases: {
|
||||||
|
dbid1: {
|
||||||
|
allow_ctas: false,
|
||||||
|
allow_cvas: false,
|
||||||
|
allow_dml: false,
|
||||||
|
allow_file_upload: false,
|
||||||
|
allow_run_async: false,
|
||||||
|
backend: 'postgresql',
|
||||||
|
database_name: 'examples',
|
||||||
|
expose_in_sqllab: true,
|
||||||
|
force_ctas_schema: null,
|
||||||
|
id: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
unsavedQueryEditor: {
|
||||||
|
id: defaultQueryEditor.id,
|
||||||
|
dbId: 'dbid1',
|
||||||
|
sql: expectedSql,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(getByTestId('react-ace')).toHaveTextContent(
|
||||||
|
JSON.stringify({ value: expectedSql }).slice(1, -1),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
it('render a SouthPane', async () => {
|
it('render a SouthPane', async () => {
|
||||||
const wrapper = buildWrapper();
|
const wrapper = buildWrapper();
|
||||||
await waitForComponentToPaint(wrapper);
|
await waitForComponentToPaint(wrapper);
|
||||||
expect(wrapper.find(ConnectedSouthPane)).toExist();
|
expect(wrapper.find(ConnectedSouthPane)).toExist();
|
||||||
});
|
});
|
||||||
|
|
||||||
// TODO eschutho convert tests to RTL
|
// TODO eschutho convert tests to RTL
|
||||||
// eslint-disable-next-line jest/no-disabled-tests
|
// eslint-disable-next-line jest/no-disabled-tests
|
||||||
it.skip('does not overflow the editor window', async () => {
|
it.skip('does not overflow the editor window', async () => {
|
||||||
@ -146,6 +200,7 @@ describe('SqlEditor', () => {
|
|||||||
SQL_EDITOR_GUTTER_HEIGHT;
|
SQL_EDITOR_GUTTER_HEIGHT;
|
||||||
expect(totalSize).toEqual(MOCKED_SQL_EDITOR_HEIGHT);
|
expect(totalSize).toEqual(MOCKED_SQL_EDITOR_HEIGHT);
|
||||||
});
|
});
|
||||||
|
|
||||||
// eslint-disable-next-line jest/no-disabled-tests
|
// eslint-disable-next-line jest/no-disabled-tests
|
||||||
it.skip('does not overflow the editor window after resizing', async () => {
|
it.skip('does not overflow the editor window after resizing', async () => {
|
||||||
const wrapper = buildWrapper();
|
const wrapper = buildWrapper();
|
||||||
@ -159,6 +214,7 @@ describe('SqlEditor', () => {
|
|||||||
SQL_EDITOR_GUTTER_HEIGHT;
|
SQL_EDITOR_GUTTER_HEIGHT;
|
||||||
expect(totalSize).toEqual(450);
|
expect(totalSize).toEqual(450);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('render a Limit Dropdown', async () => {
|
it('render a Limit Dropdown', async () => {
|
||||||
const defaultQueryLimit = 101;
|
const defaultQueryLimit = 101;
|
||||||
const updatedProps = { ...mockedProps, defaultQueryLimit };
|
const updatedProps = { ...mockedProps, defaultQueryLimit };
|
||||||
|
@ -163,8 +163,13 @@ const SqlEditor = ({
|
|||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
const { database, latestQuery, hideLeftBar } = useSelector(
|
const { currentQueryEditor, database, latestQuery, hideLeftBar } =
|
||||||
({ sqlLab: { unsavedQueryEditor, databases, queries } }) => {
|
useSelector(({ sqlLab: { unsavedQueryEditor, databases, queries } }) => {
|
||||||
|
const currentQueryEditor = {
|
||||||
|
...queryEditor,
|
||||||
|
...(queryEditor.id === unsavedQueryEditor.id && unsavedQueryEditor),
|
||||||
|
};
|
||||||
|
|
||||||
let { dbId, latestQueryId, hideLeftBar } = queryEditor;
|
let { dbId, latestQueryId, hideLeftBar } = queryEditor;
|
||||||
if (unsavedQueryEditor.id === queryEditor.id) {
|
if (unsavedQueryEditor.id === queryEditor.id) {
|
||||||
dbId = unsavedQueryEditor.dbId || dbId;
|
dbId = unsavedQueryEditor.dbId || dbId;
|
||||||
@ -172,12 +177,12 @@ const SqlEditor = ({
|
|||||||
hideLeftBar = unsavedQueryEditor.hideLeftBar || hideLeftBar;
|
hideLeftBar = unsavedQueryEditor.hideLeftBar || hideLeftBar;
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
|
currentQueryEditor,
|
||||||
database: databases[dbId],
|
database: databases[dbId],
|
||||||
latestQuery: queries[latestQueryId],
|
latestQuery: queries[latestQueryId],
|
||||||
hideLeftBar,
|
hideLeftBar,
|
||||||
};
|
};
|
||||||
},
|
});
|
||||||
);
|
|
||||||
|
|
||||||
const queryEditors = useSelector(({ sqlLab }) => sqlLab.queryEditors);
|
const queryEditors = useSelector(({ sqlLab }) => sqlLab.queryEditors);
|
||||||
|
|
||||||
@ -608,11 +613,10 @@ const SqlEditor = ({
|
|||||||
>
|
>
|
||||||
<div ref={northPaneRef} className="north-pane">
|
<div ref={northPaneRef} className="north-pane">
|
||||||
<AceEditorWrapper
|
<AceEditorWrapper
|
||||||
actions={actions}
|
|
||||||
autocomplete={autocompleteEnabled}
|
autocomplete={autocompleteEnabled}
|
||||||
onBlur={setQueryEditorAndSaveSql}
|
onBlur={setQueryEditorAndSaveSql}
|
||||||
onChange={onSqlChanged}
|
onChange={onSqlChanged}
|
||||||
queryEditor={queryEditor}
|
queryEditor={currentQueryEditor}
|
||||||
database={database}
|
database={database}
|
||||||
extendedTables={tables}
|
extendedTables={tables}
|
||||||
height={`${aceEditorHeight}px`}
|
height={`${aceEditorHeight}px`}
|
||||||
|
Loading…
Reference in New Issue
Block a user