fix: Hide debugger errors until onPageLoadActions are run (#6786)

akash-codemonk · web-flow · commit 95c60bafebd2 · 2021-08-25T10:04:42.000+05:30
diff --git a/app/client/cypress/fixtures/debuggerTableDsl.json b/app/client/cypress/fixtures/debuggerTableDsl.json
@@ -36,6 +36,24 @@
           "parentId": "0",
           "widgetId": "7miqot30xy",
           "dynamicBindingPathList": []
+        },
+        {
+          "isVisible": true,
+          "text": "{{test}}",
+          "buttonStyle": "PRIMARY_BUTTON",
+          "widgetName": "Button1",
+          "isDisabled": false,
+          "isDefaultClickDisabled": true,
+          "type": "BUTTON_WIDGET",
+          "isLoading": false,
+          "parentColumnSpace": 74,
+          "parentRowSpace": 40,
+          "leftColumn": 5,
+          "rightColumn": 7,
+          "topRow": 2,
+          "bottomRow": 3,
+          "parentId": "0",
+          "widgetId": "3qg87le9t4"
         }
       ]
     }
diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Debugger/PageOnLoad_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Debugger/PageOnLoad_spec.js
@@ -18,6 +18,10 @@ describe("Check debugger logs state when there are onPageLoad actions", function
     cy.get(explorer.addWidget).click();
 
     cy.reload();
+    // Wait for the debugger icon to be visible
+    cy.get(".t--debugger").should("be.visible");
     cy.get(debuggerLocators.errorCount).should("not.exist");
+    cy.wait("@postExecute");
+    cy.contains(debuggerLocators.errorCount, 1);
   });
 });
diff --git a/app/client/src/actions/debuggerActions.ts b/app/client/src/actions/debuggerActions.ts
@@ -68,3 +68,8 @@ export const logDebuggerErrorAnalytics = (
   type: ReduxActionTypes.DEBUGGER_ERROR_ANALYTICS,
   payload,
 });
+
+export const hideDebuggerErrors = (payload: boolean) => ({
+  type: ReduxActionTypes.HIDE_DEBUGGER_ERRORS,
+  payload,
+});
diff --git a/app/client/src/components/editorComponents/Debugger/Errors.tsx b/app/client/src/components/editorComponents/Debugger/Errors.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import { useSelector } from "react-redux";
 import styled from "styled-components";
-import { getDebuggerErrors } from "selectors/debuggerSelectors";
+import { getFilteredErrors } from "selectors/debuggerSelectors";
 import LogItem, { getLogItemProps } from "./LogItem";
 import { BlankState } from "./helpers";
 import { createMessage, NO_ERRORS } from "constants/messages";
@@ -19,7 +19,7 @@ const ListWrapper = styled.div`
 `;
 
 function Errors(props: { hasShortCut?: boolean }) {
-  const errors = useSelector(getDebuggerErrors);
+  const errors = useSelector(getFilteredErrors);
   const currentUser = useSelector(getCurrentUser);
 
   useEffect(() => {
diff --git a/app/client/src/components/editorComponents/Debugger/hooks.ts b/app/client/src/components/editorComponents/Debugger/hooks.ts
@@ -21,7 +21,7 @@ import {
 } from "./helpers";
 import history from "utils/history";
 import { getSelectedWidget } from "selectors/ui";
-import { getDebuggerErrors } from "selectors/debuggerSelectors";
+import { getFilteredErrors } from "selectors/debuggerSelectors";
 import { isEqual, keyBy } from "lodash";
 import {
   getPluginIcon,
@@ -158,7 +158,7 @@ export const useEntityLink = () => {
 
 export const useGetEntityInfo = (name: string) => {
   const entity = useSelector((state: AppState) => state.evaluations.tree[name]);
-  const debuggerErrors = useSelector(getDebuggerErrors);
+  const debuggerErrors = useSelector(getFilteredErrors);
   const action = useSelector((state: AppState) =>
     isAction(entity) ? getAction(state, entity.actionId) : undefined,
   );
diff --git a/app/client/src/components/editorComponents/Debugger/index.tsx b/app/client/src/components/editorComponents/Debugger/index.tsx
@@ -12,6 +12,7 @@ import { Colors } from "constants/Colors";
 import { getTypographyByKey } from "constants/DefaultTheme";
 import { Layers } from "constants/Layers";
 import { stopEventPropagation } from "utils/AppsmithUtils";
+import { getFilteredErrors } from "selectors/debuggerSelectors";
 
 const Container = styled.div<{ errorCount: number }>`
   z-index: ${Layers.debugger};
@@ -56,7 +57,7 @@ const Container = styled.div<{ errorCount: number }>`
 function Debugger() {
   const dispatch = useDispatch();
   const errorCount = useSelector(
-    (state: AppState) => Object.keys(state.ui.debugger.errors).length,
+    (state: AppState) => Object.keys(getFilteredErrors(state)).length,
   );
   const showDebugger = useSelector(
     (state: AppState) => state.ui.debugger.isOpen,
diff --git a/app/client/src/components/editorComponents/WidgetNameComponent/index.tsx b/app/client/src/components/editorComponents/WidgetNameComponent/index.tsx
@@ -17,6 +17,7 @@ import { getIsTableFilterPaneVisible } from "selectors/tableFilterSelectors";
 import { useWidgetSelection } from "utils/hooks/useWidgetSelection";
 import { snipingModeSelector } from "selectors/editorSelectors";
 import { bindDataToWidget } from "../../../actions/propertyPaneActions";
+import { hideErrors } from "selectors/debuggerSelectors";
 
 const PositionStyle = styled.div<{ topRow: number; isSnipingMode: boolean }>`
   position: absolute;
@@ -77,6 +78,8 @@ export function WidgetNameComponent(props: WidgetNameComponentProps) {
     (state: AppState) => state.ui.widgetDragResize.isDragging,
   );
 
+  const shouldHideErrors = useSelector(hideErrors);
+
   const isTableFilterPaneVisible = useSelector(getIsTableFilterPaneVisible);
 
   const togglePropertyEditor = (e: any) => {
@@ -133,7 +136,7 @@ export function WidgetNameComponent(props: WidgetNameComponentProps) {
           ((focusedWidget === props.widgetId || showAsSelected) &&
             !isDragging &&
             !isResizing) ||
-          !!props.errorCount)
+          (!!props.errorCount && !shouldHideErrors))
     );
   };
 
@@ -165,7 +168,7 @@ export function WidgetNameComponent(props: WidgetNameComponentProps) {
       <ControlGroup>
         <SettingsControl
           activity={currentActivity}
-          errorCount={props.errorCount}
+          errorCount={shouldHideErrors ? 0 : props.errorCount}
           name={props.widgetName}
           toggleSettings={togglePropertyEditor}
         />
diff --git a/app/client/src/constants/ReduxActionConstants.tsx b/app/client/src/constants/ReduxActionConstants.tsx
@@ -145,6 +145,7 @@ export const ReduxActionTypes = {
   DEBUGGER_DELETE_ERROR_LOG_INIT: "DEBUGGER_DELETE_ERROR_LOG_INIT",
   CLEAR_DEBUGGER_LOGS: "CLEAR_DEBUGGER_LOGS",
   SHOW_DEBUGGER: "SHOW_DEBUGGER",
+  HIDE_DEBUGGER_ERRORS: "HIDE_DEBUGGER_ERRORS",
   SET_ACTION_TABS_INITIAL_INDEX: "SET_ACTION_TABS_INITIAL_INDEX",
   SET_THEME: "SET_THEME",
   FETCH_WIDGET_CARDS: "FETCH_WIDGET_CARDS",
diff --git a/app/client/src/pages/Editor/PropertyPane/PropertyPaneConnections.tsx b/app/client/src/pages/Editor/PropertyPane/PropertyPaneConnections.tsx
@@ -20,7 +20,7 @@ import {
   doesEntityHaveErrors,
   getDependenciesFromInverseDependencies,
 } from "components/editorComponents/Debugger/helpers";
-import { getDebuggerErrors } from "selectors/debuggerSelectors";
+import { getFilteredErrors } from "selectors/debuggerSelectors";
 import { ENTITY_TYPE, Log } from "entities/AppsmithConsole";
 import { DebugButton } from "components/editorComponents/Debugger/DebugCTA";
 import { showDebugger } from "actions/debuggerActions";
@@ -315,7 +315,7 @@ TriggerNode.displayName = "TriggerNode";
 function PropertyPaneConnections(props: PropertyPaneConnectionsProps) {
   const dependencies = useDependencyList(props.widgetName);
   const { navigateToEntity } = useEntityLink();
-  const debuggerErrors = useSelector(getDebuggerErrors);
+  const debuggerErrors = useSelector(getFilteredErrors);
 
   const errorIncomingConnections = useMemo(() => {
     return doConnectionsHaveErrors(
diff --git a/app/client/src/reducers/uiReducers/debuggerReducer.ts b/app/client/src/reducers/uiReducers/debuggerReducer.ts
@@ -1,34 +1,30 @@
 import { createReducer } from "utils/AppsmithUtils";
-import { Log, Severity } from "entities/AppsmithConsole";
+import { Log } from "entities/AppsmithConsole";
 import { ReduxAction, ReduxActionTypes } from "constants/ReduxActionConstants";
 import { omit, isUndefined } from "lodash";
 
 const initialState: DebuggerReduxState = {
   logs: [],
-  errorCount: 0,
   isOpen: false,
   errors: {},
   expandId: "",
+  hideErrors: true,
 };
 
 const debuggerReducer = createReducer(initialState, {
   [ReduxActionTypes.DEBUGGER_LOG]: (
     state: DebuggerReduxState,
     action: ReduxAction<Log>,
   ) => {
-    const isError = action.payload.severity === Severity.ERROR;
-
     return {
       ...state,
       logs: [...state.logs, action.payload],
-      errorCount: isError ? state.errorCount + 1 : state.errorCount,
     };
   },
   [ReduxActionTypes.CLEAR_DEBUGGER_LOGS]: (state: DebuggerReduxState) => {
     return {
       ...state,
       logs: [],
-      errorCount: 0,
     };
   },
   [ReduxActionTypes.SHOW_DEBUGGER]: (
@@ -64,6 +60,15 @@ const debuggerReducer = createReducer(initialState, {
       errors: omit(state.errors, action.payload),
     };
   },
+  [ReduxActionTypes.HIDE_DEBUGGER_ERRORS]: (
+    state: DebuggerReduxState,
+    action: ReduxAction<boolean>,
+  ) => {
+    return {
+      ...state,
+      hideErrors: action.payload,
+    };
+  },
   [ReduxActionTypes.INIT_CANVAS_LAYOUT]: () => {
     return {
       ...initialState,
@@ -73,10 +78,10 @@ const debuggerReducer = createReducer(initialState, {
 
 export interface DebuggerReduxState {
   logs: Log[];
-  errorCount: number;
   isOpen: boolean;
   errors: Record<string, Log>;
   expandId: string;
+  hideErrors: boolean;
 }
 
 export default debuggerReducer;
diff --git a/app/client/src/sagas/ActionExecutionSagas.ts b/app/client/src/sagas/ActionExecutionSagas.ts
@@ -52,7 +52,6 @@ import { SAAS_EDITOR_API_ID_URL } from "pages/Editor/SaaSEditor/constants";
 import {
   executeApiActionRequest,
   executeApiActionSuccess,
-  executePageLoadActionsComplete,
   showRunActionConfirmModal,
   updateAction,
 } from "actions/actionActions";
@@ -119,6 +118,7 @@ import { ENTITY_TYPE, PLATFORM_ERROR } from "entities/AppsmithConsole";
 import LOG_TYPE from "entities/AppsmithConsole/logtype";
 import { matchPath } from "react-router";
 import { setDataUrl } from "./PageSagas";
+import { hideDebuggerErrors } from "actions/debuggerActions";
 import FileDataTypes from "widgets/FileDataTypes";
 
 enum ActionResponseDataTypes {
@@ -1122,7 +1122,9 @@ function* executePageLoadActionsSaga() {
       PerformanceTransactionName.EXECUTE_PAGE_LOAD_ACTIONS,
     );
 
-    yield put(executePageLoadActionsComplete());
+    // We show errors in the debugger once onPageLoad actions
+    // are executed
+    yield put(hideDebuggerErrors(false));
   } catch (e) {
     log.error(e);
 
diff --git a/app/client/src/sagas/DebuggerSagas.ts b/app/client/src/sagas/DebuggerSagas.ts
@@ -278,10 +278,10 @@ function* addDebuggerErrorLogSaga(action: ReduxAction<Log>) {
   const payload = action.payload;
   const errors: Record<string, Log> = yield select(getDebuggerErrors);
 
-  yield put(debuggerLogInit(payload));
-
   if (!payload.source || !payload.id) return;
 
+  yield put(debuggerLogInit(payload));
+
   const analyticsPayload = {
     entityName: payload.source.name,
     entityType: payload.source.type,
diff --git a/app/client/src/selectors/debuggerSelectors.tsx b/app/client/src/selectors/debuggerSelectors.tsx
@@ -1,3 +1,13 @@
 import { AppState } from "reducers";
-
+import { createSelector } from "reselect";
 export const getDebuggerErrors = (state: AppState) => state.ui.debugger.errors;
+export const hideErrors = (state: AppState) => state.ui.debugger.hideErrors;
+export const getFilteredErrors = createSelector(
+  getDebuggerErrors,
+  hideErrors,
+  (errors, hideErrors) => {
+    if (hideErrors) return {};
+
+    return errors;
+  },
+);
diff --git a/app/client/src/widgets/DividerWidget.test.tsx b/app/client/src/widgets/DividerWidget.test.tsx
@@ -20,6 +20,9 @@ describe("<DividerWidget />", () => {
         isVisible: true,
         widgetId: "Widget1",
       },
+      debugger: {
+        errors: {},
+      },
     },
     entities: { canvasWidgets: {}, app: { mode: "canvas" } },
   };
diff --git a/app/client/src/widgets/ListWidget/ListWidget.test.tsx b/app/client/src/widgets/ListWidget/ListWidget.test.tsx
@@ -21,6 +21,9 @@ describe("<ListWidget />", () => {
         isVisible: true,
         widgetId: "Widget1",
       },
+      debugger: {
+        errors: {},
+      },
     },
     entities: { canvasWidgets: {}, app: { mode: "canvas" } },
   };
