diff --git a/app/client/cypress/fixtures/debuggerTableDsl.json b/app/client/cypress/fixtures/debuggerTableDsl.json index afaed3b2cf9c..f2d81d08bbe4 100644 --- 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 index 8ac71402ade0..872fd5bf90c4 100644 --- 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 index 4c6adbf0db52..0ca69c4ac099 100644 --- 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 index fac7a489b3eb..e962522ee1fa 100644 --- 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 index 7d29b5d86e86..d3b5b8939df8 100644 --- 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 index 31625b2fb4e6..a432d566e04c 100644 --- 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 index e5bdd6a574aa..2dea41123a64 100644 --- 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) { diff --git a/app/client/src/constants/ReduxActionConstants.tsx b/app/client/src/constants/ReduxActionConstants.tsx index 3e0b41d03eb5..248467c22d4f 100644 --- a/app/client/src/constants/ReduxActionConstants.tsx +++ b/app/client/src/constants/ReduxActionConstants.tsx @@ -143,6 +143,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 index 86123937806e..a976be81cee9 100644 --- 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 index 451f7c30a5f5..605d1537c9b5 100644 --- a/app/client/src/reducers/uiReducers/debuggerReducer.ts +++ b/app/client/src/reducers/uiReducers/debuggerReducer.ts @@ -1,14 +1,14 @@ 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, { @@ -16,19 +16,15 @@ const debuggerReducer = createReducer(initialState, { state: DebuggerReduxState, action: ReduxAction, ) => { - 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, + ) => { + 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; expandId: string; + hideErrors: boolean; } export default debuggerReducer; diff --git a/app/client/src/sagas/ActionExecutionSagas.ts b/app/client/src/sagas/ActionExecutionSagas.ts index 330c2193cfe5..e937532e79ad 100644 --- 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 index fa30a3c38f9b..fbd85d26414d 100644 --- a/app/client/src/sagas/DebuggerSagas.ts +++ b/app/client/src/sagas/DebuggerSagas.ts @@ -278,10 +278,10 @@ function* addDebuggerErrorLogSaga(action: ReduxAction) { const payload = action.payload; const errors: Record = 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 index a0e005e8afe4..4e115f703602 100644 --- 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 index c139b2b7f793..ef6b8cdd5786 100644 --- a/app/client/src/widgets/DividerWidget.test.tsx +++ b/app/client/src/widgets/DividerWidget.test.tsx @@ -20,6 +20,9 @@ describe("", () => { 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 index 462e45647add..39f33ae0ddd2 100644 --- a/app/client/src/widgets/ListWidget/ListWidget.test.tsx +++ b/app/client/src/widgets/ListWidget/ListWidget.test.tsx @@ -21,6 +21,9 @@ describe("", () => { isVisible: true, widgetId: "Widget1", }, + debugger: { + errors: {}, + }, }, entities: { canvasWidgets: {}, app: { mode: "canvas" } }, };