mirror of
https://github.com/apache/superset.git
synced 2024-09-18 19:49:37 -04:00
chore: Remove dependency warnings from SqlEditor/index.jsx (#22974)
This commit is contained in:
parent
76f7a3fb4e
commit
861ecf65d4
@ -18,7 +18,13 @@
|
|||||||
*/
|
*/
|
||||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||||
/* eslint-disable jsx-a11y/no-static-element-interactions */
|
/* eslint-disable jsx-a11y/no-static-element-interactions */
|
||||||
import React, { useState, useEffect, useMemo, useRef } from 'react';
|
import React, {
|
||||||
|
useState,
|
||||||
|
useEffect,
|
||||||
|
useMemo,
|
||||||
|
useRef,
|
||||||
|
useCallback,
|
||||||
|
} from 'react';
|
||||||
import { CSSTransition } from 'react-transition-group';
|
import { CSSTransition } from 'react-transition-group';
|
||||||
import { useDispatch, useSelector } from 'react-redux';
|
import { useDispatch, useSelector } from 'react-redux';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
@ -245,30 +251,33 @@ const SqlEditor = ({
|
|||||||
const sqlEditorRef = useRef(null);
|
const sqlEditorRef = useRef(null);
|
||||||
const northPaneRef = useRef(null);
|
const northPaneRef = useRef(null);
|
||||||
|
|
||||||
const startQuery = (ctasArg = false, ctas_method = CtasEnum.TABLE) => {
|
const startQuery = useCallback(
|
||||||
if (!database) {
|
(ctasArg = false, ctas_method = CtasEnum.TABLE) => {
|
||||||
return;
|
if (!database) {
|
||||||
}
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
dispatch(
|
dispatch(
|
||||||
runQueryFromSqlEditor(
|
runQueryFromSqlEditor(
|
||||||
database,
|
database,
|
||||||
queryEditor,
|
queryEditor,
|
||||||
defaultQueryLimit,
|
defaultQueryLimit,
|
||||||
ctasArg ? ctas : '',
|
ctasArg ? ctas : '',
|
||||||
ctasArg,
|
ctasArg,
|
||||||
ctas_method,
|
ctas_method,
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
dispatch(setActiveSouthPaneTab('Results'));
|
dispatch(setActiveSouthPaneTab('Results'));
|
||||||
};
|
},
|
||||||
|
[ctas, database, defaultQueryLimit, dispatch, queryEditor],
|
||||||
|
);
|
||||||
|
|
||||||
const stopQuery = () => {
|
const stopQuery = useCallback(() => {
|
||||||
if (latestQuery && ['running', 'pending'].indexOf(latestQuery.state) >= 0) {
|
if (latestQuery && ['running', 'pending'].indexOf(latestQuery.state) >= 0) {
|
||||||
dispatch(postStopQuery(latestQuery));
|
dispatch(postStopQuery(latestQuery));
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
};
|
}, [dispatch, latestQuery]);
|
||||||
|
|
||||||
const runQuery = () => {
|
const runQuery = () => {
|
||||||
if (database) {
|
if (database) {
|
||||||
@ -282,7 +291,7 @@ const SqlEditor = ({
|
|||||||
dispatch(queryEditorSetAutorun(queryEditor, false));
|
dispatch(queryEditorSetAutorun(queryEditor, false));
|
||||||
startQuery();
|
startQuery();
|
||||||
}
|
}
|
||||||
}, []);
|
}, [autorun, dispatch, queryEditor, startQuery]);
|
||||||
|
|
||||||
// One layer of abstraction for easy spying in unit tests
|
// One layer of abstraction for easy spying in unit tests
|
||||||
const getSqlEditorHeight = () =>
|
const getSqlEditorHeight = () =>
|
||||||
@ -290,7 +299,7 @@ const SqlEditor = ({
|
|||||||
? sqlEditorRef.current.clientHeight - SQL_EDITOR_PADDING * 2
|
? sqlEditorRef.current.clientHeight - SQL_EDITOR_PADDING * 2
|
||||||
: 0;
|
: 0;
|
||||||
|
|
||||||
const getHotkeyConfig = () => {
|
const getHotkeyConfig = useCallback(() => {
|
||||||
// Get the user's OS
|
// Get the user's OS
|
||||||
const userOS = detectOS();
|
const userOS = detectOS();
|
||||||
const base = [
|
const base = [
|
||||||
@ -342,26 +351,33 @@ const SqlEditor = ({
|
|||||||
}
|
}
|
||||||
|
|
||||||
return base;
|
return base;
|
||||||
};
|
}, [dispatch, queryEditor.sql, startQuery, stopQuery]);
|
||||||
|
|
||||||
const handleWindowResize = () => {
|
const handleWindowResize = useCallback(() => {
|
||||||
setHeight(getSqlEditorHeight());
|
setHeight(getSqlEditorHeight());
|
||||||
};
|
}, []);
|
||||||
|
|
||||||
const handleWindowResizeWithThrottle = useMemo(
|
const handleWindowResizeWithThrottle = useMemo(
|
||||||
() => throttle(handleWindowResize, WINDOW_RESIZE_THROTTLE_MS),
|
() => throttle(handleWindowResize, WINDOW_RESIZE_THROTTLE_MS),
|
||||||
[],
|
[handleWindowResize],
|
||||||
);
|
);
|
||||||
|
|
||||||
const onBeforeUnload = event => {
|
const onBeforeUnload = useCallback(
|
||||||
if (
|
event => {
|
||||||
database?.extra_json?.cancel_query_on_windows_unload &&
|
if (
|
||||||
latestQuery?.state === 'running'
|
database?.extra_json?.cancel_query_on_windows_unload &&
|
||||||
) {
|
latestQuery?.state === 'running'
|
||||||
event.preventDefault();
|
) {
|
||||||
stopQuery();
|
event.preventDefault();
|
||||||
}
|
stopQuery();
|
||||||
};
|
}
|
||||||
|
},
|
||||||
|
[
|
||||||
|
database?.extra_json?.cancel_query_on_windows_unload,
|
||||||
|
latestQuery?.state,
|
||||||
|
stopQuery,
|
||||||
|
],
|
||||||
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// We need to measure the height of the sql editor post render to figure the height of
|
// We need to measure the height of the sql editor post render to figure the height of
|
||||||
@ -378,7 +394,7 @@ const SqlEditor = ({
|
|||||||
window.removeEventListener('resize', handleWindowResizeWithThrottle);
|
window.removeEventListener('resize', handleWindowResizeWithThrottle);
|
||||||
window.removeEventListener('beforeunload', onBeforeUnload);
|
window.removeEventListener('beforeunload', onBeforeUnload);
|
||||||
};
|
};
|
||||||
}, []);
|
}, [database, handleWindowResizeWithThrottle, onBeforeUnload]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// setup hotkeys
|
// setup hotkeys
|
||||||
@ -387,7 +403,7 @@ const SqlEditor = ({
|
|||||||
hotkeys.forEach(keyConfig => {
|
hotkeys.forEach(keyConfig => {
|
||||||
Mousetrap.bind([keyConfig.key], keyConfig.func);
|
Mousetrap.bind([keyConfig.key], keyConfig.func);
|
||||||
});
|
});
|
||||||
}, [latestQuery]);
|
}, [getHotkeyConfig, latestQuery]);
|
||||||
|
|
||||||
const onResizeStart = () => {
|
const onResizeStart = () => {
|
||||||
// Set the heights on the ace editor and the ace content area after drag starts
|
// Set the heights on the ace editor and the ace content area after drag starts
|
||||||
@ -404,13 +420,16 @@ const SqlEditor = ({
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const setQueryEditorAndSaveSql = sql => {
|
const setQueryEditorAndSaveSql = useCallback(
|
||||||
dispatch(queryEditorSetAndSaveSql(queryEditor, sql));
|
sql => {
|
||||||
};
|
dispatch(queryEditorSetAndSaveSql(queryEditor, sql));
|
||||||
|
},
|
||||||
|
[dispatch, queryEditor],
|
||||||
|
);
|
||||||
|
|
||||||
const setQueryEditorAndSaveSqlWithDebounce = useMemo(
|
const setQueryEditorAndSaveSqlWithDebounce = useMemo(
|
||||||
() => debounce(setQueryEditorAndSaveSql, SET_QUERY_EDITOR_SQL_DEBOUNCE_MS),
|
() => debounce(setQueryEditorAndSaveSql, SET_QUERY_EDITOR_SQL_DEBOUNCE_MS),
|
||||||
[],
|
[setQueryEditorAndSaveSql],
|
||||||
);
|
);
|
||||||
|
|
||||||
const canValidateQuery = () => {
|
const canValidateQuery = () => {
|
||||||
@ -422,15 +441,18 @@ const SqlEditor = ({
|
|||||||
return false;
|
return false;
|
||||||
};
|
};
|
||||||
|
|
||||||
const requestValidation = sql => {
|
const requestValidation = useCallback(
|
||||||
if (database) {
|
sql => {
|
||||||
dispatch(validateQuery(queryEditor, sql));
|
if (database) {
|
||||||
}
|
dispatch(validateQuery(queryEditor, sql));
|
||||||
};
|
}
|
||||||
|
},
|
||||||
|
[database, dispatch, queryEditor],
|
||||||
|
);
|
||||||
|
|
||||||
const requestValidationWithDebounce = useMemo(
|
const requestValidationWithDebounce = useMemo(
|
||||||
() => debounce(requestValidation, VALIDATION_DEBOUNCE_MS),
|
() => debounce(requestValidation, VALIDATION_DEBOUNCE_MS),
|
||||||
[],
|
[requestValidation],
|
||||||
);
|
);
|
||||||
|
|
||||||
const onSqlChanged = sql => {
|
const onSqlChanged = sql => {
|
||||||
|
Loading…
Reference in New Issue
Block a user