fix: clear query builder staged query (#3479)

This commit is contained in:
Yevhen Shevchenko 2023-09-05 17:50:26 +03:00 committed by GitHub
parent 89e8fb715c
commit 8e6a7f13a1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 15 additions and 21 deletions

View File

@ -17,7 +17,7 @@ import { constructCompositeQuery } from '../constants';
function BackButton(): JSX.Element {
const history = useHistory();
const { updateAllQueriesOperators, resetQuery } = useQueryBuilder();
const { updateAllQueriesOperators } = useQueryBuilder();
const compositeQuery = useGetCompositeQueryParam();
@ -36,14 +36,12 @@ function BackButton(): JSX.Element {
DataSource.LOGS,
);
resetQuery(updatedQuery);
const JSONCompositeQuery = encodeURIComponent(JSON.stringify(updatedQuery));
const path = `${ROUTES.LOGS_EXPLORER}?${queryParamNamesMap.compositeQuery}=${JSONCompositeQuery}`;
history.push(path);
}, [history, compositeQuery, resetQuery, updateAllQueriesOperators]);
}, [history, compositeQuery, updateAllQueriesOperators]);
return (
<Button icon={<ArrowLeftOutlined />} onClick={handleBack}>

View File

@ -17,5 +17,5 @@ export const useShareBuilderUrl = (defaultQuery: Query): void => {
if (!compositeQuery) {
redirectWithQueryBuilderData(defaultQuery);
}
}, [defaultQuery, urlQuery, redirectWithQueryBuilderData, compositeQuery]);
}, [defaultQuery, urlQuery, compositeQuery, redirectWithQueryBuilderData]);
};

View File

@ -27,6 +27,7 @@ import {
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from 'react';
import { useSelector } from 'react-redux';
@ -67,7 +68,6 @@ export const QueryBuilderContext = createContext<QueryBuilderContextType>({
addNewQueryItem: () => {},
redirectWithQueryBuilderData: () => {},
handleRunQuery: () => {},
resetQuery: () => {},
updateAllQueriesOperators: () => initialQueriesMap.metrics,
updateQueriesData: () => initialQueriesMap.metrics,
initQueryBuilderData: () => {},
@ -80,6 +80,8 @@ export function QueryBuilderProvider({
const urlQuery = useUrlQuery();
const history = useHistory();
const location = useLocation();
const currentPathnameRef = useRef<string | null>(null);
const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
(state) => state.globalTime,
);
@ -94,9 +96,7 @@ export function QueryBuilderProvider({
const [panelType, setPanelType] = useState<PANEL_TYPES | null>(null);
const [currentQuery, setCurrentQuery] = useState<QueryState>(
queryState || initialQueryState,
);
const [currentQuery, setCurrentQuery] = useState<QueryState>(queryState);
const [stagedQuery, setStagedQuery] = useState<Query | null>(null);
const [queryType, setQueryType] = useState<EQueryType>(queryTypeParam);
@ -526,14 +526,6 @@ export function QueryBuilderProvider({
});
}, [currentQuery, queryType, maxTime, minTime, redirectWithQueryBuilderData]);
const resetQuery = useCallback((newCurrentQuery?: QueryState) => {
setStagedQuery(null);
if (newCurrentQuery) {
setCurrentQuery(newCurrentQuery);
}
}, []);
useEffect(() => {
if (!compositeQueryParam) return;
@ -558,6 +550,14 @@ export function QueryBuilderProvider({
stagedQuery,
]);
useEffect(() => {
if (stagedQuery && location.pathname !== currentPathnameRef.current) {
currentPathnameRef.current = location.pathname;
setStagedQuery(null);
}
}, [location, stagedQuery, currentQuery]);
const handleOnUnitsChange = useCallback(
(unit: string) => {
setCurrentQuery((prevState) => ({
@ -599,7 +599,6 @@ export function QueryBuilderProvider({
addNewQueryItem,
redirectWithQueryBuilderData,
handleRunQuery,
resetQuery,
updateAllQueriesOperators,
updateQueriesData,
initQueryBuilderData,
@ -622,7 +621,6 @@ export function QueryBuilderProvider({
addNewQueryItem,
redirectWithQueryBuilderData,
handleRunQuery,
resetQuery,
updateAllQueriesOperators,
updateQueriesData,
initQueryBuilderData,

View File

@ -6,7 +6,6 @@ import {
IClickHouseQuery,
IPromQLQuery,
Query,
QueryState,
} from 'types/api/queryBuilder/queryBuilderData';
import { EQueryType } from './dashboard';
@ -189,7 +188,6 @@ export type QueryBuilderContextType = {
) => void;
handleRunQuery: () => void;
handleOnUnitsChange: (units: Format['id']) => void;
resetQuery: (newCurrentQuery?: QueryState) => void;
updateAllQueriesOperators: (
queryData: Query,
panelType: PANEL_TYPES,