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 <rishabh.rathod@appsmith.com>
Co-authored-by: arunvjn <arun@appsmith.com>

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

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

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

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 {

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",

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<HTMLDivElement>(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",

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;

app/client/src/sagas/ActionExecution/PluginActionSaga.ts

@@ -1054,6 +1054,7 @@ function* executeOnPageLoadJSAction(pageAction: PageAction) {
         collectionId: collectionId,
         isExecuteJSFunc: true,
       };
+
       yield call(handleExecuteJSFunctionSaga, data);
     }
   }

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,

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;