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

View File

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

View File

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

View File

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