mirror of
https://github.com/apache/superset.git
synced 2024-09-07 06:17:45 -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/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 { useDispatch, useSelector } from 'react-redux';
|
||||
import PropTypes from 'prop-types';
|
||||
@ -245,30 +251,33 @@ const SqlEditor = ({
|
||||
const sqlEditorRef = useRef(null);
|
||||
const northPaneRef = useRef(null);
|
||||
|
||||
const startQuery = (ctasArg = false, ctas_method = CtasEnum.TABLE) => {
|
||||
if (!database) {
|
||||
return;
|
||||
}
|
||||
const startQuery = useCallback(
|
||||
(ctasArg = false, ctas_method = CtasEnum.TABLE) => {
|
||||
if (!database) {
|
||||
return;
|
||||
}
|
||||
|
||||
dispatch(
|
||||
runQueryFromSqlEditor(
|
||||
database,
|
||||
queryEditor,
|
||||
defaultQueryLimit,
|
||||
ctasArg ? ctas : '',
|
||||
ctasArg,
|
||||
ctas_method,
|
||||
),
|
||||
);
|
||||
dispatch(setActiveSouthPaneTab('Results'));
|
||||
};
|
||||
dispatch(
|
||||
runQueryFromSqlEditor(
|
||||
database,
|
||||
queryEditor,
|
||||
defaultQueryLimit,
|
||||
ctasArg ? ctas : '',
|
||||
ctasArg,
|
||||
ctas_method,
|
||||
),
|
||||
);
|
||||
dispatch(setActiveSouthPaneTab('Results'));
|
||||
},
|
||||
[ctas, database, defaultQueryLimit, dispatch, queryEditor],
|
||||
);
|
||||
|
||||
const stopQuery = () => {
|
||||
const stopQuery = useCallback(() => {
|
||||
if (latestQuery && ['running', 'pending'].indexOf(latestQuery.state) >= 0) {
|
||||
dispatch(postStopQuery(latestQuery));
|
||||
}
|
||||
return false;
|
||||
};
|
||||
}, [dispatch, latestQuery]);
|
||||
|
||||
const runQuery = () => {
|
||||
if (database) {
|
||||
@ -282,7 +291,7 @@ const SqlEditor = ({
|
||||
dispatch(queryEditorSetAutorun(queryEditor, false));
|
||||
startQuery();
|
||||
}
|
||||
}, []);
|
||||
}, [autorun, dispatch, queryEditor, startQuery]);
|
||||
|
||||
// One layer of abstraction for easy spying in unit tests
|
||||
const getSqlEditorHeight = () =>
|
||||
@ -290,7 +299,7 @@ const SqlEditor = ({
|
||||
? sqlEditorRef.current.clientHeight - SQL_EDITOR_PADDING * 2
|
||||
: 0;
|
||||
|
||||
const getHotkeyConfig = () => {
|
||||
const getHotkeyConfig = useCallback(() => {
|
||||
// Get the user's OS
|
||||
const userOS = detectOS();
|
||||
const base = [
|
||||
@ -342,26 +351,33 @@ const SqlEditor = ({
|
||||
}
|
||||
|
||||
return base;
|
||||
};
|
||||
}, [dispatch, queryEditor.sql, startQuery, stopQuery]);
|
||||
|
||||
const handleWindowResize = () => {
|
||||
const handleWindowResize = useCallback(() => {
|
||||
setHeight(getSqlEditorHeight());
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleWindowResizeWithThrottle = useMemo(
|
||||
() => throttle(handleWindowResize, WINDOW_RESIZE_THROTTLE_MS),
|
||||
[],
|
||||
[handleWindowResize],
|
||||
);
|
||||
|
||||
const onBeforeUnload = event => {
|
||||
if (
|
||||
database?.extra_json?.cancel_query_on_windows_unload &&
|
||||
latestQuery?.state === 'running'
|
||||
) {
|
||||
event.preventDefault();
|
||||
stopQuery();
|
||||
}
|
||||
};
|
||||
const onBeforeUnload = useCallback(
|
||||
event => {
|
||||
if (
|
||||
database?.extra_json?.cancel_query_on_windows_unload &&
|
||||
latestQuery?.state === 'running'
|
||||
) {
|
||||
event.preventDefault();
|
||||
stopQuery();
|
||||
}
|
||||
},
|
||||
[
|
||||
database?.extra_json?.cancel_query_on_windows_unload,
|
||||
latestQuery?.state,
|
||||
stopQuery,
|
||||
],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
// 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('beforeunload', onBeforeUnload);
|
||||
};
|
||||
}, []);
|
||||
}, [database, handleWindowResizeWithThrottle, onBeforeUnload]);
|
||||
|
||||
useEffect(() => {
|
||||
// setup hotkeys
|
||||
@ -387,7 +403,7 @@ const SqlEditor = ({
|
||||
hotkeys.forEach(keyConfig => {
|
||||
Mousetrap.bind([keyConfig.key], keyConfig.func);
|
||||
});
|
||||
}, [latestQuery]);
|
||||
}, [getHotkeyConfig, latestQuery]);
|
||||
|
||||
const onResizeStart = () => {
|
||||
// Set the heights on the ace editor and the ace content area after drag starts
|
||||
@ -404,13 +420,16 @@ const SqlEditor = ({
|
||||
}
|
||||
};
|
||||
|
||||
const setQueryEditorAndSaveSql = sql => {
|
||||
dispatch(queryEditorSetAndSaveSql(queryEditor, sql));
|
||||
};
|
||||
const setQueryEditorAndSaveSql = useCallback(
|
||||
sql => {
|
||||
dispatch(queryEditorSetAndSaveSql(queryEditor, sql));
|
||||
},
|
||||
[dispatch, queryEditor],
|
||||
);
|
||||
|
||||
const setQueryEditorAndSaveSqlWithDebounce = useMemo(
|
||||
() => debounce(setQueryEditorAndSaveSql, SET_QUERY_EDITOR_SQL_DEBOUNCE_MS),
|
||||
[],
|
||||
[setQueryEditorAndSaveSql],
|
||||
);
|
||||
|
||||
const canValidateQuery = () => {
|
||||
@ -422,15 +441,18 @@ const SqlEditor = ({
|
||||
return false;
|
||||
};
|
||||
|
||||
const requestValidation = sql => {
|
||||
if (database) {
|
||||
dispatch(validateQuery(queryEditor, sql));
|
||||
}
|
||||
};
|
||||
const requestValidation = useCallback(
|
||||
sql => {
|
||||
if (database) {
|
||||
dispatch(validateQuery(queryEditor, sql));
|
||||
}
|
||||
},
|
||||
[database, dispatch, queryEditor],
|
||||
);
|
||||
|
||||
const requestValidationWithDebounce = useMemo(
|
||||
() => debounce(requestValidation, VALIDATION_DEBOUNCE_MS),
|
||||
[],
|
||||
[requestValidation],
|
||||
);
|
||||
|
||||
const onSqlChanged = sql => {
|
||||
|
Loading…
Reference in New Issue
Block a user