From 50cd13e3629274280535e962843a2d6d73999717 Mon Sep 17 00:00:00 2001 From: Druthi Polisetty Date: Wed, 9 Aug 2023 15:19:32 +0530 Subject: [PATCH] fix: Retain last selected tab on debugger and user selected filter condition (#25538) ## Description Retains last selected tab on debugger and user selected filter condition #### PR fixes following issue(s) Fixes #23108 #### Type of change - Bug fix (non-breaking change which fixes an issue) > > ## Testing > #### How Has This Been Tested? - [x] Manual - [x] Cypress > > #### Test Plan > Add Testsmith test cases links that relate to this PR > > #### Issues raised during DP testing > Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR) > > > ## Checklist: #### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag #### QA activity: - [ ] [Speedbreak features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-) have been covered - [x] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-) - [ ] Test plan has been peer reviewed by project stakeholders and other QA members - [x] Manually tested functionality on DP - [x] We had an implementation alignment call with stakeholders post QA Round 2 - [x] Cypress test cases have been added and approved by SDET/manual QA - [x] Added `Test Plan Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed --------- Co-authored-by: Rishabh Rathod Co-authored-by: arunvjn --- .../OtherUIFeatures/EntityBottomBar_spec.ts | 10 ++++------ app/client/cypress/support/Pages/AggregateHelper.ts | 4 ++++ app/client/cypress/support/Pages/DebuggerHelper.ts | 2 +- app/client/src/actions/debuggerActions.ts | 8 ++++++++ app/client/src/ce/constants/ReduxActionConstants.tsx | 1 + .../editorComponents/Debugger/DebuggerLogs.tsx | 9 ++++++--- app/client/src/reducers/uiReducers/debuggerReducer.ts | 8 ++++++++ .../src/sagas/ActionExecution/PluginActionSaga.ts | 1 + app/client/src/sagas/JSPaneSagas.ts | 11 ++++++++++- app/client/src/selectors/debuggerSelectors.tsx | 3 +++ 10 files changed, 46 insertions(+), 11 deletions(-) diff --git a/app/client/cypress/e2e/Regression/ClientSide/OtherUIFeatures/EntityBottomBar_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/OtherUIFeatures/EntityBottomBar_spec.ts index 59c9cb3206..96a7146984 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/OtherUIFeatures/EntityBottomBar_spec.ts +++ b/app/client/cypress/e2e/Regression/ClientSide/OtherUIFeatures/EntityBottomBar_spec.ts @@ -1,5 +1,4 @@ import * as _ from "../../../../support/Objects/ObjectsCore"; -const OnboardingLocator = require("../../../../locators/FirstTimeUserOnboarding.json"); import { PageType } from "../../../../support/Pages/DebuggerHelper"; const datasource = require("../../../../locators/DatasourcesEditor.json"); @@ -33,7 +32,7 @@ describe("Entity bottom bar", () => { _.debuggerHelper.AssertSelectedTab("Response"); //verify if bottom bar is closed on switching to canvas page. _.entityExplorer.NavigateToSwitcher("Widgets"); - _.debuggerHelper.AssertClosed(); + _.debuggerHelper.AssertSelectedTab("Errors"); }); it("3. Api bottom pane should be collapsable", () => { @@ -41,10 +40,7 @@ describe("Entity bottom bar", () => { _.apiPage.CreateAndFillApi( _.tedTestConfig.dsValues[_.tedTestConfig.defaultEnviorment].mockApiUrl, ); - //Verify if bottom bar opens on clicking debugger icon in api page. - _.debuggerHelper.ClickDebuggerIcon(); - _.debuggerHelper.AssertOpen(PageType.API); - //Verify if selected tab is errors in tab title. + //Verify that the errors tab is still open. _.debuggerHelper.AssertSelectedTab("Errors"); //Verify if bottom bar is closed on clicking close icon in API page. _.debuggerHelper.CloseBottomBar(); @@ -52,6 +48,8 @@ describe("Entity bottom bar", () => { //Verify if bottom bar opens on clicking debugger icon in api page. _.debuggerHelper.ClickDebuggerIcon(); _.debuggerHelper.AssertOpen(PageType.API); + //Verify if selected tab is errors in tab title. + _.debuggerHelper.AssertSelectedTab("Errors"); //Verify if bottom bar is open on executing api. _.apiPage.RunAPI(); _.agHelper.Sleep(1000); diff --git a/app/client/cypress/support/Pages/AggregateHelper.ts b/app/client/cypress/support/Pages/AggregateHelper.ts index 88af908382..fba2d99812 100644 --- a/app/client/cypress/support/Pages/AggregateHelper.ts +++ b/app/client/cypress/support/Pages/AggregateHelper.ts @@ -734,6 +734,10 @@ export class AggregateHelper extends ReusableHelper { this.GetNClick(this.locator._goBack); } + public SelectAllAndType(selector: string, text: string) { + this.GetElement(selector).type("{selectall}" + text); + } + public SelectNRemoveLineText(selector: string) { this.GetElement(selector).type(this.selectLine); return this.GetElement(selector).type(this.removeLine); diff --git a/app/client/cypress/support/Pages/DebuggerHelper.ts b/app/client/cypress/support/Pages/DebuggerHelper.ts index 2079595ff7..550df905b5 100644 --- a/app/client/cypress/support/Pages/DebuggerHelper.ts +++ b/app/client/cypress/support/Pages/DebuggerHelper.ts @@ -142,7 +142,7 @@ export class DebuggerHelper { } DebuggerLogsFilter(text: string) { - this.agHelper.RemoveCharsNType(this.locators._debuggerFilter, -1, text); + this.agHelper.SelectAllAndType(this.locators._debuggerFilter, text); } LogStateContains(text: string, index?: number) { diff --git a/app/client/src/actions/debuggerActions.ts b/app/client/src/actions/debuggerActions.ts index 1154cb92ee..a045602ae2 100644 --- a/app/client/src/actions/debuggerActions.ts +++ b/app/client/src/actions/debuggerActions.ts @@ -80,6 +80,14 @@ export const setDebuggerSelectedTab = (selectedTab: string) => { }; }; +// set the selected filter in the debugger. +export const setDebuggerSelectedFilter = (selectedFilter: string) => { + return { + type: ReduxActionTypes.SET_DEBUGGER_SELECTED_FILTER, + selectedFilter, + }; +}; + // set the height of the response pane in the debugger. export const setResponsePaneHeight = (height: number) => { return { diff --git a/app/client/src/ce/constants/ReduxActionConstants.tsx b/app/client/src/ce/constants/ReduxActionConstants.tsx index 87b4d3fb76..ea3d34b087 100644 --- a/app/client/src/ce/constants/ReduxActionConstants.tsx +++ b/app/client/src/ce/constants/ReduxActionConstants.tsx @@ -753,6 +753,7 @@ const ActionTypes = { SET_PROPERTY_SECTION_STATE: "SET_PROPERTY_SECTION_STATE", SET_SELECTED_PROPERTY_TAB_INDEX: "SET_SELECTED_PROPERTY_TAB_INDEX", SET_DEBUGGER_SELECTED_TAB: "SET_DEBUGGER_SELECTED_TAB", + SET_DEBUGGER_SELECTED_FILTER: "SET_DEBUGGER_SELECTED_FILTER", SET_RESPONSE_PANE_HEIGHT: "SET_RESPONSE_PANE_HEIGHT", SET_ERROR_COUNT: "SET_ERROR_COUNT", SET_RESPONSE_PANE_SCROLL_POSITION: "SET_RESPONSE_PANE_SCROLL_POSITION", diff --git a/app/client/src/components/editorComponents/Debugger/DebuggerLogs.tsx b/app/client/src/components/editorComponents/Debugger/DebuggerLogs.tsx index 2d6adca3e3..03579940c6 100644 --- a/app/client/src/components/editorComponents/Debugger/DebuggerLogs.tsx +++ b/app/client/src/components/editorComponents/Debugger/DebuggerLogs.tsx @@ -15,13 +15,15 @@ import { LOGS_FILTER_OPTION_SYSTEM, NO_LOGS, } from "@appsmith/constants/messages"; -import { useSelector } from "react-redux"; +import { useDispatch, useSelector } from "react-redux"; import { getCurrentUser } from "selectors/usersSelectors"; import bootIntercom from "utils/bootIntercom"; import type { Theme } from "constants/DefaultTheme"; import { thinScrollbar } from "constants/DefaultTheme"; import type { IconName } from "@blueprintjs/core"; import AnalyticsUtil from "utils/AnalyticsUtil"; +import { getDebuggerSelectedFilter } from "selectors/debuggerSelectors"; +import { setDebuggerSelectedFilter } from "actions/debuggerActions"; export const LIST_HEADER_HEIGHT = "38px"; @@ -67,8 +69,9 @@ const LOGS_FILTER_OPTIONS = (theme: DefaultTheme) => [ ]; function DebbuggerLogs(props: Props) { - const [filter, setFilter] = useState(""); const [searchQuery, setSearchQuery] = useState(props.searchQuery); + const filter = useSelector(getDebuggerSelectedFilter); + const dispatch = useDispatch(); const filteredLogs = useFilteredLogs(searchQuery, filter); const { next, paginatedData } = usePagination(filteredLogs); const listRef = useRef(null); @@ -111,7 +114,7 @@ function DebbuggerLogs(props: Props) { const handleFilterChange = (filter: string | undefined) => { if (!isUndefined(filter)) { - setFilter(filter); + dispatch(setDebuggerSelectedFilter(filter)); AnalyticsUtil.logEvent("DEBUGGER_FILTER_CHANGED", { filter: filter.length > 0 ? filter : "ALL", diff --git a/app/client/src/reducers/uiReducers/debuggerReducer.ts b/app/client/src/reducers/uiReducers/debuggerReducer.ts index 804b05106f..81d1025604 100644 --- a/app/client/src/reducers/uiReducers/debuggerReducer.ts +++ b/app/client/src/reducers/uiReducers/debuggerReducer.ts @@ -11,6 +11,7 @@ export const DefaultDebuggerContext = { selectedDebuggerTab: "", responseTabHeight: ActionExecutionResizerHeight, errorCount: 0, + selectedDebuggerFilter: "", }; const initialState: DebuggerReduxState = { @@ -116,6 +117,12 @@ const debuggerReducer = createImmerReducer(initialState, { ) => { state.context.selectedDebuggerTab = action.selectedTab; }, + [ReduxActionTypes.SET_DEBUGGER_SELECTED_FILTER]: ( + state: DebuggerReduxState, + action: { selectedFilter: string }, + ) => { + state.context.selectedDebuggerFilter = action.selectedFilter; + }, [ReduxActionTypes.SET_RESPONSE_PANE_HEIGHT]: ( state: DebuggerReduxState, action: { height: number }, @@ -168,6 +175,7 @@ export type DebuggerContext = { errorCount: number; selectedDebuggerTab: string; responseTabHeight: number; + selectedDebuggerFilter: string; }; export default debuggerReducer; diff --git a/app/client/src/sagas/ActionExecution/PluginActionSaga.ts b/app/client/src/sagas/ActionExecution/PluginActionSaga.ts index 5a2bb5dd04..3f73318b33 100644 --- a/app/client/src/sagas/ActionExecution/PluginActionSaga.ts +++ b/app/client/src/sagas/ActionExecution/PluginActionSaga.ts @@ -1054,6 +1054,7 @@ function* executeOnPageLoadJSAction(pageAction: PageAction) { collectionId: collectionId, isExecuteJSFunc: true, }; + yield call(handleExecuteJSFunctionSaga, data); } } diff --git a/app/client/src/sagas/JSPaneSagas.ts b/app/client/src/sagas/JSPaneSagas.ts index 67d9db6bf1..181b74eeec 100644 --- a/app/client/src/sagas/JSPaneSagas.ts +++ b/app/client/src/sagas/JSPaneSagas.ts @@ -86,6 +86,7 @@ import { checkAndLogErrorsIfCyclicDependency } from "./helper"; import { toast } from "design-system"; import { setDebuggerSelectedTab, showDebugger } from "actions/debuggerActions"; import { DEBUGGER_TAB_KEYS } from "components/editorComponents/Debugger/helpers"; +import { getDebuggerSelectedTab } from "selectors/debuggerSelectors"; const CONSOLE_DOT_LOG_INVOCATION_REGEX = /console.log[.call | .apply]*\s*\(.*?\)/gm; @@ -388,7 +389,14 @@ export function* handleExecuteJSFunctionSaga(data: { // open response tab in debugger on runnning or page load js action. if (window.location.pathname.includes(collectionId)) { yield put(showDebugger(true)); - yield put(setDebuggerSelectedTab(DEBUGGER_TAB_KEYS.RESPONSE_TAB)); + + const debuggerSelectedTab = yield select(getDebuggerSelectedTab); + + yield put( + setDebuggerSelectedTab( + debuggerSelectedTab || DEBUGGER_TAB_KEYS.RESPONSE_TAB, + ), + ); } yield put({ type: ReduxActionTypes.EXECUTE_JS_FUNCTION_SUCCESS, @@ -482,6 +490,7 @@ export function* handleStartExecuteJSFunctionSaga( action.actionConfiguration?.body?.match(CONSOLE_DOT_LOG_INVOCATION_REGEX) ?.length || 0, }); + yield call(handleExecuteJSFunctionSaga, { collectionName: collectionName, action: action, diff --git a/app/client/src/selectors/debuggerSelectors.tsx b/app/client/src/selectors/debuggerSelectors.tsx index 5d62de17e1..c4bcb4efe1 100644 --- a/app/client/src/selectors/debuggerSelectors.tsx +++ b/app/client/src/selectors/debuggerSelectors.tsx @@ -129,6 +129,9 @@ export const getMessageCount = createSelector(getFilteredErrors, (errors) => { export const getDebuggerSelectedTab = (state: AppState) => state.ui.debugger.context.selectedDebuggerTab; +export const getDebuggerSelectedFilter = (state: AppState) => + state.ui.debugger.context.selectedDebuggerFilter; + export const getResponsePaneHeight = (state: AppState) => state.ui.debugger.context.responseTabHeight;