diff --git a/frontend/src/Editor/EditorFunc.jsx b/frontend/src/Editor/EditorFunc.jsx index 105bc73446..a933e34b8c 100644 --- a/frontend/src/Editor/EditorFunc.jsx +++ b/frontend/src/Editor/EditorFunc.jsx @@ -8,7 +8,7 @@ import { } from '@/_services'; import { DndProvider } from 'react-dnd'; import { HTML5Backend } from 'react-dnd-html5-backend'; -import _, { cloneDeep, isEqual, isEmpty, debounce, omit, isNull, isUndefined } from 'lodash'; +import _, { cloneDeep, isEqual, isEmpty, debounce, omit } from 'lodash'; import { Container } from './Container'; import { EditorKeyHooks } from './EditorKeyHooks'; import { CustomDragLayer } from './CustomDragLayer'; @@ -57,7 +57,6 @@ import { useQueryPanelStore } from '@/_stores/queryPanelStore'; import { useCurrentStateStore, useCurrentState } from '@/_stores/currentStateStore'; import { computeAppDiff, computeComponentPropertyDiff, isParamFromTableColumn, resetAllStores } from '@/_stores/utils'; import { setCookie } from '@/_helpers/cookie'; -import { shallow } from 'zustand/shallow'; import { useEditorActions, useEditorState, useEditorStore } from '@/_stores/editorStore'; import { useAppDataActions, useAppInfo } from '@/_stores/appDataStore'; import { useMounted } from '@/_hooks/use-mount'; diff --git a/frontend/src/Editor/QueryManager/QueryManager.jsx b/frontend/src/Editor/QueryManager/QueryManager.jsx index ae2f0d7e37..c0ae346fcf 100644 --- a/frontend/src/Editor/QueryManager/QueryManager.jsx +++ b/frontend/src/Editor/QueryManager/QueryManager.jsx @@ -1,35 +1,21 @@ -import React, { useEffect, useState, useRef } from 'react'; +import React, { useEffect, useState } from 'react'; import cx from 'classnames'; import { QueryManagerHeader } from './Components/QueryManagerHeader'; import { QueryManagerBody } from './Components/QueryManagerBody'; import { runQuery } from '@/_helpers/appUtils'; import { defaultSources } from './constants'; - -import { useQueryCreationLoading, useQueryUpdationLoading } from '@/_stores/dataQueriesStore'; import { useDataSources, useGlobalDataSources, useLoadingDataSources } from '@/_stores/dataSourcesStore'; import { useQueryToBeRun, useSelectedQuery, useQueryPanelActions } from '@/_stores/queryPanelStore'; -const QueryManager = ({ mode, dataQueriesChanged, appId, darkMode, apps, allComponents, appDefinition, editorRef }) => { +const QueryManager = ({ mode, appId, darkMode, apps, allComponents, appDefinition, editorRef }) => { const loadingDataSources = useLoadingDataSources(); const dataSources = useDataSources(); const globalDataSources = useGlobalDataSources(); const queryToBeRun = useQueryToBeRun(); - const isCreationInProcess = useQueryCreationLoading(); - const isUpdationInProcess = useQueryUpdationLoading(); const selectedQuery = useSelectedQuery(); const { setSelectedDataSource, setQueryToBeRun } = useQueryPanelActions(); const [options, setOptions] = useState({}); - const mounted = useRef(false); - - /** TODO: Below effect primarily used only for websocket invocation post update. Can be removed onece websocket logic is revamped */ - useEffect(() => { - if (mounted.current && !isCreationInProcess && !isUpdationInProcess) { - return dataQueriesChanged(); - } - mounted.current = true; - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [isCreationInProcess, isUpdationInProcess, mounted.current]); useEffect(() => { setOptions(selectedQuery?.options || {}); diff --git a/frontend/src/Editor/Viewer.jsx b/frontend/src/Editor/Viewer.jsx index 34e405ed97..c8b4625356 100644 --- a/frontend/src/Editor/Viewer.jsx +++ b/frontend/src/Editor/Viewer.jsx @@ -130,9 +130,14 @@ class ViewerComponent extends React.Component { } else { dataQueries = data.data_queries; } + const queryConfirmationList = []; if (dataQueries.length > 0) { dataQueries.forEach((query) => { + if (query?.options && query?.options?.runOnPageLoad) { + queryConfirmationList.push({ queryId: query.id, queryName: query.name }); + } + if (query.pluginId || query?.plugin?.id) { queryState[query.name] = { ...query.plugin.manifestFile.data.source.exposedVariables, @@ -148,6 +153,9 @@ class ViewerComponent extends React.Component { }); } + if (queryConfirmationList.length !== 0) { + useEditorStore.getState().actions.updateQueryConfirmationList(queryConfirmationList); + } const variables = await this.fetchOrgEnvironmentVariables(data.slug, data.is_public); const constants = await this.fetchOrgEnvironmentConstants(data.slug, data.is_public); diff --git a/frontend/src/_helpers/appUtils.js b/frontend/src/_helpers/appUtils.js index cd673abe65..ca72f086fb 100644 --- a/frontend/src/_helpers/appUtils.js +++ b/frontend/src/_helpers/appUtils.js @@ -928,8 +928,9 @@ export function runQuery(_ref, queryId, queryName, confirmed = undefined, mode = const options = getQueryVariables(dataQuery.options, getCurrentState()); if (dataQuery.options.requestConfirmation) { - // eslint-disable-next-line no-unsafe-optional-chaining - const queryConfirmationList = _ref?.queryConfirmationList ? [..._ref?.queryConfirmationList] : []; + const runOnPageLoad = dataQuery.options?.runOnPageLoad ?? false; + const queryConfirmationList = runOnPageLoad ? _ref.queryConfirmationList : []; + const queryConfirmation = { queryId, queryName, diff --git a/frontend/src/_stores/dataQueriesStore.js b/frontend/src/_stores/dataQueriesStore.js index e93c43d66b..0d752e504d 100644 --- a/frontend/src/_stores/dataQueriesStore.js +++ b/frontend/src/_stores/dataQueriesStore.js @@ -1,7 +1,7 @@ import { create, zustandDevTools } from './utils'; import { getDefaultOptions } from './storeHelper'; import { dataqueryService } from '@/_services'; -import debounce from 'lodash/debounce'; +// import debounce from 'lodash/debounce'; import { useAppDataStore } from '@/_stores/appDataStore'; import { useQueryPanelStore } from '@/_stores/queryPanelStore'; import { useAppVersionStore } from '@/_stores/appVersionStore'; @@ -9,6 +9,7 @@ import { runQueries } from '@/_helpers/appUtils'; import { v4 as uuidv4 } from 'uuid'; import { toast } from 'react-hot-toast'; import { isEmpty, throttle } from 'lodash'; +import { useEditorStore } from './editorStore'; const initialState = { dataQueries: [], @@ -37,8 +38,20 @@ export const useDataQueriesStore = create( dataQueries: sortByAttribute(data.data_queries, state.sortBy, state.sortOrder), loadingDataQueries: false, })); - // Runs query on loading application - if (runQueriesOnAppLoad) runQueries(data.data_queries, {}); + + if (data.data_queries.length !== 0) { + const queryConfirmationList = []; + data.data_queries.forEach(({ id, name, options }) => { + if (options && options?.runOnPageLoad) { + queryConfirmationList.push({ queryId: id, queryName: name }); + } + }); + + if (queryConfirmationList.length !== 0) { + useEditorStore.getState().actions.updateQueryConfirmationList(queryConfirmationList); + } + } + // Compute query state to be added in the current state const { actions, selectedQuery } = useQueryPanelStore.getState(); if (selectFirstQuery) { @@ -47,6 +60,9 @@ export const useDataQueriesStore = create( const query = data.data_queries.find((query) => query.id === selectedQuery?.id); actions.setSelectedQuery(query?.id); } + + // Runs query on loading application + if (runQueriesOnAppLoad) runQueries(data.data_queries, {}); }, setDataQueries: (dataQueries) => set({ dataQueries }), deleteDataQueries: (queryId) => {