fix: clicking on + in list view does not create a new query (#36467)

## Description
This change adds a new state in ideReducer 'isListViewActive' to verify
the active status of the list view on split screen mode. I am updating
isListViewActive state to false when we click on `+` icon and are
already in QUERY_ADD mode, to close the list view and switch back to the
new query tab.

Fixes https://github.com/appsmithorg/appsmith/issues/36066
_or_  
Fixes `Issue URL`
> [!WARNING]  
> _If no issue exists, please create an issue first, and check with the
maintainers if the issue is valid._

## Automation

/ok-to-test tags=""

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!CAUTION]  
> If you modify the content in this section, you are likely to disrupt
the CI result for your PR.

<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced a new action to manage the active state of the list view,
enhancing user interface control.
	- Added a selector to retrieve the current state of the list view.

- **Improvements**
- Updated the `useQueryAdd` and `useJSAdd` hooks to respond to the IDE's
view mode, improving functionality when adding queries.
- Shifted state management for the list view from local to global,
ensuring consistent visibility across the application.

- **Bug Fixes**
- Enhanced responsiveness of the list view based on the current
interface state.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/src/actions/ideActions.ts

@@ -54,3 +54,10 @@ export const recordAnalyticsForSideBySideNavigation = () => ({
 export const resetAnalyticsForSideBySideHover = () => ({
   type: ReduxActionTypes.RESET_ANALYTICS_FOR_SIDE_BY_SIDE_HOVER,
 });
+
+export const setListViewActiveState = (payload: boolean) => {
+  return {
+    type: ReduxActionTypes.SET_IS_LIST_VIEW_ACTIVE,
+    payload,
+  };
+};

app/client/src/ce/constants/ReduxActionConstants.tsx

@@ -496,6 +496,7 @@ const IDEActionTypes = {
   CLOSE_JS_ACTION_TAB_SUCCESS: "CLOSE_JS_ACTION_TAB_SUCCESS",
   CLOSE_QUERY_ACTION_TAB: "CLOSE_QUERY_ACTION_TAB",
   CLOSE_QUERY_ACTION_TAB_SUCCESS: "CLOSE_QUERY_ACTION_TAB_SUCCESS",
+  SET_IS_LIST_VIEW_ACTIVE: "SET_IS_LIST_VIEW_ACTIVE",
 };
 
 const IDEActionErrorTypes = {

app/client/src/ce/pages/Editor/IDE/EditorPane/JS/hooks.ts

@@ -15,6 +15,9 @@ import { FocusEntity, identifyEntityFromPath } from "navigation/FocusEntity";
 import { useModuleOptions } from "ee/utils/moduleInstanceHelpers";
 import { getJSUrl } from "ee/pages/Editor/IDE/EditorPane/JS/utils";
 import { JSBlankState } from "pages/Editor/JSEditor/JSBlankState";
+import { getIDEViewMode } from "selectors/ideSelectors";
+import { EditorViewMode } from "ee/entities/IDE/constants";
+import { setListViewActiveState } from "actions/ideActions";
 
 export const useJSAdd = () => {
   const pageId = useSelector(getCurrentPageId);
@@ -24,12 +27,17 @@ export const useJSAdd = () => {
   const jsModuleCreationOptions = moduleCreationOptions.filter(
     (opt) => opt.focusEntityType === FocusEntity.JS_MODULE_INSTANCE,
   );
+  const ideViewMode = useSelector(getIDEViewMode);
 
   const openAddJS = useCallback(() => {
     if (jsModuleCreationOptions.length === 0) {
       dispatch(createNewJSCollection(pageId, "ENTITY_EXPLORER"));
     } else {
       if (currentEntityInfo.entity === FocusEntity.JS_OBJECT_ADD) {
+        if (ideViewMode === EditorViewMode.SplitScreen) {
+          dispatch(setListViewActiveState(false));
+        }
+
         return;
       }
 
@@ -37,7 +45,13 @@ export const useJSAdd = () => {
 
       history.push(url);
     }
-  }, [jsModuleCreationOptions, pageId, dispatch, currentEntityInfo]);
+  }, [
+    jsModuleCreationOptions,
+    pageId,
+    dispatch,
+    currentEntityInfo,
+    ideViewMode,
+  ]);
 
   const closeAddJS = useCallback(() => {
     const url = getJSUrl(currentEntityInfo, false);

app/client/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.tsx

@@ -33,13 +33,22 @@ import { getPluginEntityIcon } from "pages/Editor/Explorer/ExplorerIcons";
 import type { ListItemProps } from "@appsmith/ads";
 import { createAddClassName } from "pages/Editor/IDE/EditorPane/utils";
 import { QueriesBlankState } from "pages/Editor/QueryEditor/QueriesBlankState";
+import { getIDEViewMode } from "selectors/ideSelectors";
+import { EditorViewMode } from "ee/entities/IDE/constants";
+import { setListViewActiveState } from "actions/ideActions";
 
 export const useQueryAdd = () => {
   const location = useLocation();
+  const dispatch = useDispatch();
   const currentEntityInfo = identifyEntityFromPath(location.pathname);
+  const ideViewMode = useSelector(getIDEViewMode);
 
   const openAddQuery = useCallback(() => {
     if (currentEntityInfo.entity === FocusEntity.QUERY_ADD) {
+      if (ideViewMode === EditorViewMode.SplitScreen) {
+        dispatch(setListViewActiveState(false));
+      }
+
       return;
     }
 
@@ -54,7 +63,7 @@ export const useQueryAdd = () => {
 
     url = getQueryUrl(currentEntityInfo, false);
     history.push(url);
-  }, [currentEntityInfo]);
+  }, [currentEntityInfo, ideViewMode]);
 
   return { openAddQuery, closeAddQuery };
 };

app/client/src/pages/Editor/IDE/EditorTabs/index.tsx

@@ -1,7 +1,11 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
-import { shallowEqual, useSelector } from "react-redux";
+import { shallowEqual, useDispatch, useSelector } from "react-redux";
 import { Flex, ScrollArea, ToggleButton } from "@appsmith/ads";
-import { getIDEViewMode, getIsSideBySideEnabled } from "selectors/ideSelectors";
+import {
+  getIDEViewMode,
+  getIsSideBySideEnabled,
+  getListViewActiveState,
+} from "selectors/ideSelectors";
 import type { EntityItem } from "ee/entities/IDE/constants";
 import {
   EditorEntityTab,
@@ -19,28 +23,30 @@ import { identifyEntityFromPath } from "navigation/FocusEntity";
 import { List } from "./List";
 import { ScreenModeToggle } from "./ScreenModeToggle";
 import { AddTab } from "./AddTab";
+import { setListViewActiveState } from "actions/ideActions";
 
 const EditorTabs = () => {
-  const [showListView, setShowListView] = useState(false);
   const isSideBySideEnabled = useSelector(getIsSideBySideEnabled);
   const ideViewMode = useSelector(getIDEViewMode);
   const { segment, segmentMode } = useCurrentEditorState();
   const { closeClickHandler, tabClickHandler } = useIDETabClickHandlers();
   const tabsConfig = TabSelectors[segment];
   const files = useSelector(tabsConfig.tabsSelector, shallowEqual);
+  const isListViewActive = useSelector(getListViewActiveState);
 
   const location = useLocation();
+  const dispatch = useDispatch();
   const currentEntity = identifyEntityFromPath(location.pathname);
 
   // Turn off list view while changing segment, files
   useEffect(() => {
-    setShowListView(false);
+    dispatch(setListViewActiveState(false));
   }, [currentEntity.id, currentEntity.entity, files, segmentMode]);
 
   // Show list view if all tabs is closed
   useEffect(() => {
     if (files.length === 0 && segmentMode !== EditorEntityTabState.Add) {
-      setShowListView(true);
+      dispatch(setListViewActiveState(true));
     }
   }, [files, segmentMode, currentEntity.entity]);
 
@@ -75,16 +81,16 @@ const EditorTabs = () => {
   const handleHamburgerClick = () => {
     if (files.length === 0 && segmentMode !== EditorEntityTabState.Add) return;
 
-    setShowListView(!showListView);
+    dispatch(setListViewActiveState(!isListViewActive));
   };
 
   const onTabClick = (tab: EntityItem) => {
-    setShowListView(false);
+    dispatch(setListViewActiveState(false));
     tabClickHandler(tab);
   };
 
   const newTabClickHandler = () => {
-    setShowListView(false);
+    dispatch(setListViewActiveState(false));
   };
 
   return (
@@ -94,7 +100,7 @@ const EditorTabs = () => {
           <ToggleButton
             data-testid="t--list-toggle"
             icon="hamburger"
-            isSelected={showListView}
+            isSelected={isListViewActive}
             onClick={handleHamburgerClick}
             size="md"
           />
@@ -118,13 +124,13 @@ const EditorTabs = () => {
           >
             <FileTabs
               currentEntity={currentEntity}
-              isListActive={showListView}
+              isListActive={isListViewActive}
               navigateToTab={onTabClick}
               onClose={closeClickHandler}
               tabs={files}
             />
             <AddTab
-              isListActive={showListView}
+              isListActive={isListViewActive}
               newTabClickCallback={newTabClickHandler}
               onClose={closeClickHandler}
             />
@@ -137,7 +143,9 @@ const EditorTabs = () => {
       </Container>
 
       {/* Overflow list */}
-      {showListView && ideViewMode === EditorViewMode.SplitScreen && <List />}
+      {isListViewActive && ideViewMode === EditorViewMode.SplitScreen && (
+        <List />
+      )}
 
       {/* Announcement modal */}
       {ideViewMode === EditorViewMode.SplitScreen && <Announcement />}

app/client/src/reducers/uiReducers/ideReducer.ts

@@ -13,6 +13,7 @@ export const IDETabsDefaultValue = {
 const initialState: IDEState = {
   view: EditorViewMode.FullScreen,
   tabs: {},
+  isListViewActive: false,
   showCreateModal: false,
   ideCanvasSideBySideHover: {
     navigated: false,
@@ -101,10 +102,19 @@ const ideReducer = createImmerReducer(initialState, {
   ) => {
     state.ideCanvasSideBySideHover.widgetTypes.push(action.payload);
   },
+  [ReduxActionTypes.SET_IS_LIST_VIEW_ACTIVE]: (
+    state: IDEState,
+    action: {
+      payload: boolean;
+    },
+  ) => {
+    state.isListViewActive = action.payload;
+  },
 });
 
 export interface IDEState {
   view: EditorViewMode;
+  isListViewActive: boolean;
   tabs: ParentEntityIDETabs;
   showCreateModal: boolean;
   ideCanvasSideBySideHover: IDECanvasSideBySideHover;

app/client/src/selectors/ideSelectors.tsx

@@ -61,3 +61,6 @@ export const getShowCreateNewModal = (state: AppState) =>
 
 export const getIdeCanvasSideBySideHoverState = (state: AppState) =>
   state.ui.ide.ideCanvasSideBySideHover;
+
+export const getListViewActiveState = (state: AppState) =>
+  state.ui.ide.isListViewActive;