[appdef-2] fixes: multiple query confirmations trigger (#7704)

* fixes: multiple query confirmations trigger

* fixes: multiple outbound calls in the inital load, run queries on app load with confirmations:editor&viewer

* fixes: correct confirmations list to the stote

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';

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 || {});

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);
 

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,

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) => {