Fix: Debugger shows errors for evaluations done on page load (#4552)

app/client/cypress/fixtures/debuggerTableDsl.json

@@ -0,0 +1,42 @@
+{
+    "dsl": {
+      "widgetName": "MainContainer",
+      "backgroundColor": "none",
+      "rightColumn": 1224,
+      "snapColumns": 16,
+      "detachFromLayout": true,
+      "widgetId": "0",
+      "topRow": 0,
+      "bottomRow": 1280,
+      "containerStyle": "none",
+      "snapRows": 33,
+      "parentRowSpace": 1,
+      "type": "CANVAS_WIDGET",
+      "canExtend": true,
+      "version": 9,
+      "minHeight": 1292,
+      "parentColumnSpace": 1,
+      "dynamicBindingPathList": [],
+      "leftColumn": 0,
+      "children": [
+        {
+          "isVisible": true,
+          "label": "Data",
+          "widgetName": "Table1",
+          "searchKey": "",
+          "tableData": "{{TestApi.data.users}}",
+          "type": "TABLE_WIDGET",
+          "isLoading": false,
+          "parentColumnSpace": 74,
+          "parentRowSpace": 40,
+          "leftColumn": 1,
+          "rightColumn": 9,
+          "topRow": 7,
+          "bottomRow": 14,
+          "parentId": "0",
+          "widgetId": "7miqot30xy",
+          "dynamicBindingPathList": []
+        }
+      ]
+    }
+  }

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Debugger/PageOnLoad_spec.js

@@ -0,0 +1,23 @@
+const dsl = require("../../../../fixtures/debuggerTableDsl.json");
+const explorer = require("../../../../locators/explorerlocators.json");
+const debuggerLocators = require("../../../../locators/Debugger.json");
+const testdata = require("../../../../fixtures/testdata.json");
+
+describe("Check debugger logs state when there are onPageLoad actions", function() {
+  before(() => {
+    cy.addDsl(dsl);
+  });
+  it("Check debugger logs state when there are onPageLoad actions", function() {
+    cy.openPropertyPane("tablewidget");
+    cy.testJsontext("tabledata", "{{TestApi.data.users}}");
+    cy.NavigateToAPI_Panel();
+    cy.CreateAPI("TestApi");
+    cy.enterDatasourceAndPath(testdata.baseUrl, testdata.methods);
+    cy.SaveAndRunAPI();
+
+    cy.get(explorer.addWidget).click();
+
+    cy.reload();
+    cy.contains(debuggerLocators.debuggerIcon, 0);
+  });
+});

app/client/src/actions/actionActions.ts

@@ -233,6 +233,12 @@ export const updateActionProperty = (
   });
 };
 
+export const executePageLoadActionsComplete = () => {
+  return {
+    type: ReduxActionTypes.EXECUTE_PAGE_LOAD_ACTIONS_COMPLETE,
+  };
+};
+
 export const setActionsToExecuteOnPageLoad = (
   actions: Array<{
     executeOnLoad: boolean;

app/client/src/constants/ReduxActionConstants.tsx

@@ -226,6 +226,7 @@ export const ReduxActionTypes: { [key: string]: string } = {
   RESET_PASSWORD_VERIFY_TOKEN_SUCCESS: "RESET_PASSWORD_VERIFY_TOKEN_SUCCESS",
   RESET_PASSWORD_VERIFY_TOKEN_INIT: "RESET_PASSWORD_VERIFY_TOKEN_INIT",
   EXECUTE_PAGE_LOAD_ACTIONS: "EXECUTE_PAGE_LOAD_ACTIONS",
+  EXECUTE_PAGE_LOAD_ACTIONS_COMPLETE: "EXECUTE_PAGE_LOAD_ACTIONS_COMPLETE",
   SWITCH_ORGANIZATION_INIT: "SWITCH_ORGANIZATION_INIT",
   SWITCH_ORGANIZATION_SUCCESS: "SWITCH_ORGANIZATION_SUCCESS",
   FETCH_ORG_ROLES_INIT: "FETCH_ORG_ROLES_INIT",

app/client/src/sagas/ActionExecutionSagas.ts

@@ -44,6 +44,7 @@ import {
 import {
   executeApiActionRequest,
   executeApiActionSuccess,
+  executePageLoadActionsComplete,
   showRunActionConfirmModal,
   updateAction,
 } from "actions/actionActions";
@@ -999,6 +1000,8 @@ function* executePageLoadActionsSaga() {
     PerformanceTracker.stopAsyncTracking(
       PerformanceTransactionName.EXECUTE_PAGE_LOAD_ACTIONS,
     );
+
+    yield put(executePageLoadActionsComplete());
   } catch (e) {
     log.error(e);
 

app/client/src/sagas/DebuggerSagas.ts

@@ -12,13 +12,15 @@ import {
   call,
 } from "redux-saga/effects";
 import { getDataTree } from "selectors/dataTreeSelectors";
-import { isEmpty, set } from "lodash";
+import { isEmpty, set, get } from "lodash";
 import { getDebuggerErrors } from "selectors/debuggerSelectors";
 import { getAction } from "selectors/entitiesSelector";
 import { Action, PluginType } from "entities/Action";
 import LOG_TYPE from "entities/AppsmithConsole/logtype";
-import { DataTree } from "entities/DataTree/dataTreeFactory";
+import { DataTree, DataTreeWidget } from "entities/DataTree/dataTreeFactory";
 import { isWidget } from "workers/evaluationUtils";
+import { getWidget } from "./selectors";
+import { WidgetProps } from "widgets/BaseWidget";
 
 function* onWidgetUpdateSaga(payload: LogActionPayload) {
   if (!payload.source) return;
@@ -125,6 +127,7 @@ function* debuggerLogSaga(action: ReduxAction<Message>) {
       if (payload.source && payload.source.propertyPath) {
         if (payload.text) {
           yield put(errorLog(payload));
+
           yield put(debuggerLog(payload));
         }
       }
@@ -166,6 +169,42 @@ function* debuggerLogSaga(action: ReduxAction<Message>) {
   }
 }
 
-export default function* debuggerSagasListeners() {
+// Pass through error list once after on page load actions executions are complete
-  yield all([takeEvery(ReduxActionTypes.DEBUGGER_LOG_INIT, debuggerLogSaga)]);
+function* onExecutePageActionsCompleteSaga() {
+  yield take(ReduxActionTypes.SET_EVALUATED_TREE);
+
+  const dataTree: DataTree = yield select(getDataTree);
+  const errors = yield select(getDebuggerErrors);
+  const updatedErrors = { ...errors };
+  const errorIds = Object.keys(errors);
+
+  for (const id of errorIds) {
+    const splits = id.split("-");
+    const entityId = splits[0];
+    const propertyName = splits[1];
+    const widget: WidgetProps | null = yield select(getWidget, entityId);
+
+    if (widget) {
+      const dataTreeWidget = dataTree[widget.widgetName] as DataTreeWidget;
+
+      if (!get(dataTreeWidget.invalidProps, propertyName, null)) {
+        delete updatedErrors[id];
+      }
+    }
+  }
+
+  yield put({
+    type: ReduxActionTypes.DEBUGGER_UPDATE_ERROR_LOGS,
+    payload: updatedErrors,
+  });
+}
+
+export default function* debuggerSagasListeners() {
+  yield all([
+    takeEvery(ReduxActionTypes.DEBUGGER_LOG_INIT, debuggerLogSaga),
+    takeEvery(
+      ReduxActionTypes.EXECUTE_PAGE_LOAD_ACTIONS_COMPLETE,
+      onExecutePageActionsCompleteSaga,
+    ),
+  ]);
 }