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;