diff --git a/app/client/src/actions/ideActions.ts b/app/client/src/actions/ideActions.ts
index 04f91ea23f0f..a2d1809b5abc 100644
--- a/app/client/src/actions/ideActions.ts
+++ b/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,
+ };
+};
diff --git a/app/client/src/ce/constants/ReduxActionConstants.tsx b/app/client/src/ce/constants/ReduxActionConstants.tsx
index 133cf9a420e7..1e94ce4336cf 100644
--- a/app/client/src/ce/constants/ReduxActionConstants.tsx
+++ b/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 = {
diff --git a/app/client/src/ce/pages/Editor/IDE/EditorPane/JS/hooks.ts b/app/client/src/ce/pages/Editor/IDE/EditorPane/JS/hooks.ts
index 11d1c00d67c9..58614a67abe9 100644
--- a/app/client/src/ce/pages/Editor/IDE/EditorPane/JS/hooks.ts
+++ b/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);
diff --git a/app/client/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.tsx b/app/client/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.tsx
index 34f8322f8ed3..73ffb6ab8a74 100644
--- a/app/client/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.tsx
+++ b/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 };
};
diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/index.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/index.tsx
index 333b1be56c70..6956979c0a12 100644
--- a/app/client/src/pages/Editor/IDE/EditorTabs/index.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorTabs/index.tsx
@@ -1,7 +1,11 @@
-import React, { useEffect, useState } from "react";
-import { shallowEqual, useSelector } from "react-redux";
+import React, { useEffect } from "react";
+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 = () => {
@@ -118,13 +124,13 @@ const EditorTabs = () => {
>
@@ -137,7 +143,9 @@ const EditorTabs = () => {
{/* Overflow list */}
- {showListView && ideViewMode === EditorViewMode.SplitScreen &&
}
+ {isListViewActive && ideViewMode === EditorViewMode.SplitScreen && (
+
+ )}
{/* Announcement modal */}
{ideViewMode === EditorViewMode.SplitScreen && }
diff --git a/app/client/src/reducers/uiReducers/ideReducer.ts b/app/client/src/reducers/uiReducers/ideReducer.ts
index 8af4379c664e..86384fe393d5 100644
--- a/app/client/src/reducers/uiReducers/ideReducer.ts
+++ b/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;
diff --git a/app/client/src/selectors/ideSelectors.tsx b/app/client/src/selectors/ideSelectors.tsx
index f7637668fdb0..65fb4e68a90d 100644
--- a/app/client/src/selectors/ideSelectors.tsx
+++ b/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;