diff --git a/app/client/src/actions/appSettingsPaneActions.ts b/app/client/src/actions/appSettingsPaneActions.ts index eb34138256..2622aed914 100644 --- a/app/client/src/actions/appSettingsPaneActions.ts +++ b/app/client/src/actions/appSettingsPaneActions.ts @@ -1,22 +1,5 @@ import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants"; -import type { - AppSettingsPaneContext, - AppSettingsPaneReduxState, -} from "reducers/uiReducers/appSettingsPaneReducer"; -import type { Action } from "redux"; - -export const openAppSettingsPaneAction = (context?: AppSettingsPaneContext) => { - return { - type: ReduxActionTypes.OPEN_APP_SETTINGS_PANE, - payload: context, - }; -}; - -export const closeAppSettingsPaneAction = (): Action => { - return { - type: ReduxActionTypes.CLOSE_APP_SETTINGS_PANE, - }; -}; +import type { AppSettingsPaneReduxState } from "reducers/uiReducers/appSettingsPaneReducer"; export const updateAppSettingsPaneSelectedTabAction = ( payload: AppSettingsPaneReduxState, diff --git a/app/client/src/ce/entities/FeatureFlag.ts b/app/client/src/ce/entities/FeatureFlag.ts index ecf36a4f0e..72c8c15e15 100644 --- a/app/client/src/ce/entities/FeatureFlag.ts +++ b/app/client/src/ce/entities/FeatureFlag.ts @@ -22,7 +22,6 @@ export const FEATURE_FLAG = { release_anvil_enabled: "release_anvil_enabled", ab_show_templates_instead_of_blank_canvas_enabled: "ab_show_templates_instead_of_blank_canvas_enabled", - release_app_sidebar_enabled: "release_app_sidebar_enabled", release_server_dsl_migrations_enabled: "release_server_dsl_migrations_enabled", license_git_branch_protection_enabled: @@ -36,9 +35,6 @@ export const FEATURE_FLAG = { license_widget_rtl_support_enabled: "license_widget_rtl_support_enabled", release_custom_widgets_enabled: "release_custom_widgets_enabled", ab_create_new_apps_enabled: "ab_create_new_apps_enabled", - release_show_new_sidebar_announcement_enabled: - "release_show_new_sidebar_announcement_enabled", - rollout_app_sidebar_enabled: "rollout_app_sidebar_enabled", release_show_partial_import_export_enabled: "release_show_partial_import_export_enabled", release_show_new_sidebar_pages_pane_enabled: @@ -77,7 +73,6 @@ export const DEFAULT_FEATURE_FLAG_VALUE: FeatureFlags = { license_gac_enabled: false, release_anvil_enabled: false, ab_show_templates_instead_of_blank_canvas_enabled: false, - release_app_sidebar_enabled: false, release_server_dsl_migrations_enabled: false, license_git_branch_protection_enabled: false, release_git_autocommit_feature_enabled: false, @@ -86,8 +81,6 @@ export const DEFAULT_FEATURE_FLAG_VALUE: FeatureFlags = { license_widget_rtl_support_enabled: false, release_custom_widgets_enabled: false, ab_create_new_apps_enabled: false, - release_show_new_sidebar_announcement_enabled: false, - rollout_app_sidebar_enabled: false, release_show_partial_import_export_enabled: false, release_show_new_sidebar_pages_pane_enabled: false, ab_one_click_learning_popover_enabled: false, diff --git a/app/client/src/ce/pages/Editor/IDE/MainPane/useRoutes.ts b/app/client/src/ce/pages/Editor/IDE/MainPane/useRoutes.ts index ed88e0f45b..4fd0bc7b0d 100644 --- a/app/client/src/ce/pages/Editor/IDE/MainPane/useRoutes.ts +++ b/app/client/src/ce/pages/Editor/IDE/MainPane/useRoutes.ts @@ -24,7 +24,6 @@ import { WIDGETS_EDITOR_ID_PATH, } from "constants/routes"; import CreateNewDatasourceTab from "pages/Editor/IntegrationEditor/CreateNewDatasourceTab"; -import IntegrationEditor from "pages/Editor/IntegrationEditor"; import OnboardingChecklist from "pages/Editor/FirstTimeUserOnboarding/Checklist"; import ApiEditor from "pages/Editor/APIEditor"; import QueryEditor from "pages/Editor/QueryEditor"; @@ -42,7 +41,6 @@ import DataSourceEditor from "pages/Editor/DataSourceEditor"; import DatasourceBlankState from "pages/Editor/DataSourceEditor/DatasourceBlankState"; import GeneratePage from "pages/Editor/GeneratePage"; import type { RouteProps } from "react-router"; -import { useIsAppSidebarEnabled } from "navigation/featureFlagHooks"; import { JSBlankState } from "pages/Editor/JSEditor/JSBlankState"; import { QueriesBlankState } from "pages/Editor/QueryEditor/QueriesBlankState"; import { useSelector } from "react-redux"; @@ -59,7 +57,6 @@ export interface RouteReturnType extends RouteProps { */ function useRoutes(path: string): RouteReturnType[] { - const isAppSidebarEnabled = useIsAppSidebarEnabled(); const isSideBySideEnabled = useSelector(getIsSideBySideEnabled); const editorMode = useSelector(getIDEViewMode); @@ -104,9 +101,7 @@ function useRoutes(path: string): RouteReturnType[] { }, { key: "Datasource Create and Active", - component: isAppSidebarEnabled - ? CreateNewDatasourceTab - : IntegrationEditor, + component: CreateNewDatasourceTab, exact: true, path: `${path}${INTEGRATION_EDITOR_PATH}`, }, @@ -159,9 +154,7 @@ function useRoutes(path: string): RouteReturnType[] { }, { key: "Datasource Create and Active", - component: isAppSidebarEnabled - ? CreateNewDatasourceTab - : IntegrationEditor, + component: CreateNewDatasourceTab, exact: true, path: `${path}${INTEGRATION_EDITOR_PATH}`, }, diff --git a/app/client/src/ce/pages/Editor/routes.tsx b/app/client/src/ce/pages/Editor/routes.tsx index f40b56e73b..e4b83864b8 100644 --- a/app/client/src/ce/pages/Editor/routes.tsx +++ b/app/client/src/ce/pages/Editor/routes.tsx @@ -2,7 +2,6 @@ import React, { useEffect } from "react"; import { Route, Switch } from "react-router-dom"; import { useLocation, useRouteMatch } from "react-router"; import ApiEditor from "pages/Editor/APIEditor"; -import IntegrationEditor from "pages/Editor/IntegrationEditor"; import QueryEditor from "pages/Editor/QueryEditor"; import JSEditor from "pages/Editor/JSEditor"; import GeneratePage from "pages/Editor/GeneratePage"; @@ -23,15 +22,13 @@ import { SaaSEditorRoutes } from "pages/Editor/SaaSEditor/routes"; import OnboardingChecklist from "pages/Editor/FirstTimeUserOnboarding/Checklist"; import { DatasourceEditorRoutes } from "pages/routes"; import CurlImportEditor from "pages/Editor/APIEditor/CurlImportEditor"; -import CreateNewDatasourceTab from "../../../pages/Editor/IntegrationEditor/CreateNewDatasourceTab"; -import { useIsAppSidebarEnabled } from "../../../navigation/featureFlagHooks"; +import CreateNewDatasourceTab from "pages/Editor/IntegrationEditor/CreateNewDatasourceTab"; const SentryRoute = Sentry.withSentryRouting(Route); function EditorRoutes() { const { path } = useRouteMatch(); const { pathname } = useLocation(); - const isAppSidebarEnabled = useIsAppSidebarEnabled(); useEffect(() => { return () => { @@ -45,9 +42,7 @@ function EditorRoutes() { return ( diff --git a/app/client/src/components/editorComponents/EntityExplorerSidebar.tsx b/app/client/src/components/editorComponents/EntityExplorerSidebar.tsx index d4e614ce43..c2bc512f7c 100644 --- a/app/client/src/components/editorComponents/EntityExplorerSidebar.tsx +++ b/app/client/src/components/editorComponents/EntityExplorerSidebar.tsx @@ -13,13 +13,9 @@ import { useDispatch, useSelector } from "react-redux"; import PerformanceTracker, { PerformanceTransactionName, } from "utils/PerformanceTracker"; -import { - setExplorerActiveAction, - updateExplorerWidthAction, -} from "actions/explorerActions"; +import { updateExplorerWidthAction } from "actions/explorerActions"; import { getExplorerActive, - getExplorerPinned, getExplorerWidth, } from "selectors/explorerSelector"; import { tailwindLayers } from "constants/Layers"; @@ -27,12 +23,9 @@ import { Tooltip } from "design-system"; import useHorizontalResize from "utils/hooks/useHorizontalResize"; import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants"; import { SIDEBAR_ID } from "constants/Explorer"; -import { EntityClassNames } from "pages/Editor/Explorer/Entity"; -import { getEditingEntityName } from "@appsmith/selectors/entitiesSelector"; import styled from "styled-components"; import moment from "moment"; import AnalyticsUtil from "../../utils/AnalyticsUtil"; -import { useIsAppSidebarEnabled } from "../../navigation/featureFlagHooks"; const StyledResizer = styled.div<{ resizing: boolean }>` ${(props) => @@ -59,8 +52,6 @@ export const EntityExplorerSidebar = memo(({ children }: Props) => { const width = useSelector(getExplorerWidth); const active = useSelector(getExplorerActive); const sidebarRef = useRef(null); - const pinned = useSelector(getExplorerPinned); - const isAppSidebarEnabled = useIsAppSidebarEnabled(); /** * on entity explorer sidebar width change @@ -82,82 +73,11 @@ export const EntityExplorerSidebar = memo(({ children }: Props) => { const resizer = useHorizontalResize(sidebarRef, onWidthChange, onDragEnd); const [tooltipIsOpen, setTooltipIsOpen] = useState(false); - const isEditingEntityName = useSelector(getEditingEntityName); PerformanceTracker.startTracking(PerformanceTransactionName.SIDE_BAR_MOUNT); useEffect(() => { PerformanceTracker.stopTracking(); }); - // registering event listeners - useEffect(() => { - document.addEventListener("mousemove", onMouseMove); - - return () => { - document.removeEventListener("mousemove", onMouseMove); - }; - }, [active, pinned, resizer.resizing, isEditingEntityName]); - - /** - * passing the event to touch move on mouse move - * - * @param event - */ - const onMouseMove = (event: MouseEvent) => { - const eventWithTouches = Object.assign({}, event, { - touches: [{ clientX: event.clientX, clientY: event.clientY }], - }); - onTouchMove(eventWithTouches); - }; - - /** - * Is a context menu of any of the explorer entities open - */ - const isContextMenuOpen = () => { - const menus = document.getElementsByClassName( - EntityClassNames.CONTEXT_MENU_CONTENT, - ); - const node = menus[0]; - if (!document.body.contains(node)) { - return false; - } - - return true; - }; - - /** - * calculate the new width based on the pixel moved - * - * @param event - */ - const onTouchMove = ( - event: - | TouchEvent - | (MouseEvent & { touches: { clientX: number; clientY: number }[] }), - ) => { - const currentX = event.touches[0].clientX; - - // only calculate the following in unpin mode - if (!pinned) { - if (active) { - // if user cursor is out of the entity explorer width ( with some extra window = 20px ), make the - // entity explorer inactive. Also, 20px here is to increase the window in which a user can drag the resizer - if ( - currentX >= width + 20 && - !resizer.resizing && - !isContextMenuOpen() && - !isEditingEntityName - ) { - dispatch(setExplorerActiveAction(false)); - } - } else { - // check if user cursor is at extreme left when the explorer is inactive, if yes, make the explorer active - if (currentX <= 20) { - dispatch(setExplorerActiveAction(true)); - } - } - } - }; - /** * on hover of resizer, show tooltip */ @@ -179,15 +99,15 @@ export const EntityExplorerSidebar = memo(({ children }: Props) => { * resizer left position */ const resizerLeft = useMemo(() => { - return !pinned && !active ? 0 : width; - }, [pinned, active, width]); + return !active ? 0 : width; + }, [active, width]); useEffect(() => { dispatch({ type: ReduxActionTypes.SET_ENTITY_INFO, payload: { show: false }, }); - }, [resizerLeft, pinned]); + }, [resizerLeft]); const [hoverStartTime, setHoverStartTime] = useState(0); @@ -206,13 +126,9 @@ export const EntityExplorerSidebar = memo(({ children }: Props) => { return (
{ const selectedWidgetIds = useSelector(getSelectedWidgets); const isDraggingOrResizing = useSelector(getIsDraggingOrResizing); - const isAppSettingsPaneOpen = useSelector(getIsAppSettingsPaneOpen); const { isOpened: isWalkthroughOpened, popFeature } = useContext(WalkthroughContext) || {}; //while dragging or resizing and @@ -86,7 +82,6 @@ export const PropertyPaneSidebar = memo((props: Props) => { /** * renders the property pane: - * 1. if isAppSettingsPaneOpen -> AppSettingsPane * 2. if no widget is selected -> CanvasPropertyPane * 3. if more than one widget is selected -> MultiWidgetPropertyPane * 4. if user is dragging for selection -> CanvasPropertyPane @@ -94,8 +89,6 @@ export const PropertyPaneSidebar = memo((props: Props) => { */ const propertyPane = useMemo(() => { switch (true) { - case isAppSettingsPaneOpen: - return ; case selectedWidgetsLength > 1: return ; case selectedWidgetsLength === 1: @@ -107,7 +100,6 @@ export const PropertyPaneSidebar = memo((props: Props) => { return ; } }, [ - isAppSettingsPaneOpen, selectedWidgetsLength, isDraggingForSelection, shouldNotRenderPane, @@ -138,33 +130,26 @@ export const PropertyPaneSidebar = memo((props: Props) => { ref={sidebarRef} > {/* RESIZER */} - {!isAppSettingsPaneOpen && ( - -
- - )} + +
+
{propertyPane}
diff --git a/app/client/src/navigation/featureFlagHooks.ts b/app/client/src/navigation/featureFlagHooks.ts deleted file mode 100644 index 80ec543981..0000000000 --- a/app/client/src/navigation/featureFlagHooks.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { useFeatureFlag } from "../utils/hooks/useFeatureFlag"; -import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag"; - -export const useIsAppSidebarEnabled = () => { - const isAppSidebarEnabled = useFeatureFlag( - FEATURE_FLAG.release_app_sidebar_enabled, - ); - - const isAppSidebarRolloutEnabled = useFeatureFlag( - FEATURE_FLAG.rollout_app_sidebar_enabled, - ); - - return isAppSidebarEnabled || isAppSidebarRolloutEnabled; -}; diff --git a/app/client/src/pages/Editor/AppSettingsPane/AppSettings/index.tsx b/app/client/src/pages/Editor/AppSettingsPane/AppSettings/index.tsx index a1492c6f21..63e7b1df8d 100644 --- a/app/client/src/pages/Editor/AppSettingsPane/AppSettings/index.tsx +++ b/app/client/src/pages/Editor/AppSettingsPane/AppSettings/index.tsx @@ -28,10 +28,7 @@ import { import { Colors } from "constants/Colors"; import EmbedSettings from "./EmbedSettings"; import NavigationSettings from "./NavigationSettings"; -import { - closeAppSettingsPaneAction, - updateAppSettingsPaneSelectedTabAction, -} from "actions/appSettingsPaneActions"; +import { updateAppSettingsPaneSelectedTabAction } from "actions/appSettingsPaneActions"; import AnalyticsUtil from "utils/AnalyticsUtil"; import { Divider } from "design-system"; import { ImportAppSettings } from "./ImportAppSettings"; @@ -79,7 +76,7 @@ const PageSectionTitle = styled.p` const ThemeContentWrapper = styled.div` height: calc(100% - 48px); - overflow-y: overlay; + overflow-y: scroll; `; function AppSettings() { @@ -116,9 +113,13 @@ function AppSettings() { }, }), ); - return () => { - dispatch(closeAppSettingsPaneAction()); + dispatch( + updateAppSettingsPaneSelectedTabAction({ + isOpen: false, + context: undefined, + }), + ); }; }, [selectedTab]); @@ -196,7 +197,7 @@ function AppSettings() { {SectionHeadersConfig.map((config) => ( ))} - + {PAGE_SETTINGS_SECTION_HEADER()} diff --git a/app/client/src/pages/Editor/AppSettingsPane/PaneHeader.tsx b/app/client/src/pages/Editor/AppSettingsPane/PaneHeader.tsx index a2ecf97a77..9018fe871b 100644 --- a/app/client/src/pages/Editor/AppSettingsPane/PaneHeader.tsx +++ b/app/client/src/pages/Editor/AppSettingsPane/PaneHeader.tsx @@ -1,15 +1,6 @@ import React from "react"; import styled from "styled-components"; -import { closeAppSettingsPaneAction } from "actions/appSettingsPaneActions"; -import { - APP_SETTINGS_CLOSE_TOOLTIP, - APP_SETTINGS_PANE_HEADER, -} from "@appsmith/constants/messages"; -import { Tooltip } from "design-system"; -import { useDispatch } from "react-redux"; -import { Button } from "design-system"; -import classNames from "classnames"; -import { useIsAppSidebarEnabled } from "../../../navigation/featureFlagHooks"; +import { APP_SETTINGS_PANE_HEADER } from "@appsmith/constants/messages"; const StyledHeader = styled.div` height: 48px; @@ -24,29 +15,8 @@ const StyledText = styled.div` `; function PaneHeader() { - const dispatch = useDispatch(); - const isAppSidebarEnabled = useIsAppSidebarEnabled(); - return ( - - {!isAppSidebarEnabled && ( - - - - )}
diff --git a/app/client/src/pages/Editor/DataSourceEditor/JSONtoForm.tsx b/app/client/src/pages/Editor/DataSourceEditor/JSONtoForm.tsx index 9b39378ebb..6c9b18061f 100644 --- a/app/client/src/pages/Editor/DataSourceEditor/JSONtoForm.tsx +++ b/app/client/src/pages/Editor/DataSourceEditor/JSONtoForm.tsx @@ -7,7 +7,6 @@ import type { ControlProps } from "components/formControls/BaseControl"; import type { Datasource } from "entities/Datasource"; import { isHidden, isKVArray } from "components/formControls/utils"; import log from "loglevel"; -import CloseEditor from "components/editorComponents/CloseEditor"; import type { FeatureFlags } from "@appsmith/entities/FeatureFlag"; export const FormContainer = styled.div` @@ -49,20 +48,9 @@ export class JSONtoForm< SS = any, > extends React.Component { renderForm = (formContent: any) => { - const { featureFlags } = this.props; - const isSidebarEnabled = - featureFlags?.release_app_sidebar_enabled === true || - featureFlags?.rollout_app_sidebar_enabled === true; - const isPagePaneSegmentsEnabled = - featureFlags?.release_show_new_sidebar_pages_pane_enabled; return ( // - {isSidebarEnabled || - isPagePaneSegmentsEnabled || - !!this.props.isOnboardingFlow ? null : ( - - )} {formContent} diff --git a/app/client/src/pages/Editor/DataSourceEditor/index.tsx b/app/client/src/pages/Editor/DataSourceEditor/index.tsx index 06d62697e6..6892f76c36 100644 --- a/app/client/src/pages/Editor/DataSourceEditor/index.tsx +++ b/app/client/src/pages/Editor/DataSourceEditor/index.tsx @@ -61,7 +61,6 @@ import SaveOrDiscardDatasourceModal from "./SaveOrDiscardDatasourceModal"; import { toast, Callout } from "design-system"; import styled from "styled-components"; -import CloseEditor from "components/editorComponents/CloseEditor"; import { isDatasourceAuthorizedForQueryCreation, isEnabledForPreviewData, @@ -91,12 +90,8 @@ import { DEFAULT_ENV_ID } from "@appsmith/api/ApiUtils"; import { isStorageEnvironmentCreated } from "@appsmith/utils/Environments"; import type { CalloutKind } from "design-system"; import type { FeatureFlags } from "@appsmith/entities/FeatureFlag"; -import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag"; -import { - selectFeatureFlagCheck, - selectFeatureFlags, -} from "@appsmith/selectors/featureFlagsSelectors"; +import { selectFeatureFlags } from "@appsmith/selectors/featureFlagsSelectors"; import AnalyticsUtil from "utils/AnalyticsUtil"; import { setCurrentEditingEnvironmentID } from "@appsmith/actions/environmentAction"; import { getCurrentEnvironmentDetails } from "@appsmith/selectors/environmentSelectors"; @@ -107,7 +102,6 @@ import { } from "@appsmith/utils/BusinessFeatures/permissionPageHelpers"; import DatasourceTabs from "../DatasourceInfo/DatasorceTabs"; import DatasourceInformation, { ViewModeWrapper } from "./DatasourceSection"; -import { getIsAppSidebarEnabled } from "../../../selectors/ideSelectors"; interface ReduxStateProps { canDeleteDatasource: boolean; @@ -144,8 +138,6 @@ interface ReduxStateProps { showDebugger: boolean; featureFlags?: FeatureFlags; isPluginAllowedToPreviewData: boolean; - isAppSidebarEnabled: boolean; - isPagePaneSegmentsEnabled: boolean; isOnboardingFlow?: boolean; } @@ -903,12 +895,10 @@ class DatasourceEditorRouter extends React.Component { datasourceId, formData, history, - isAppSidebarEnabled, isDeleting, isInsideReconnectModal, isNewDatasource, isOnboardingFlow, - isPagePaneSegmentsEnabled, isPluginAuthorized, isSaving, isTesting, @@ -962,11 +952,6 @@ class DatasourceEditorRouter extends React.Component { e.preventDefault(); }} > - {isAppSidebarEnabled || - isPagePaneSegmentsEnabled || - !!isOnboardingFlow ? null : ( - - )} {!isInsideReconnectModal && ( { const isPluginAllowedToPreviewData = !!plugin && isEnabledForPreviewData(datasource as Datasource, plugin); - const isAppSidebarEnabled = getIsAppSidebarEnabled(state); - const isPagePaneSegmentsEnabled = selectFeatureFlagCheck( - state, - FEATURE_FLAG.release_show_new_sidebar_pages_pane_enabled, - ); - return { canDeleteDatasource, canManageDatasource, @@ -1181,8 +1160,6 @@ const mapStateToProps = (state: AppState, props: any): ReduxStateProps => { defaultKeyValueArrayConfig, initialValue, showDebugger, - isAppSidebarEnabled, - isPagePaneSegmentsEnabled, }; }; diff --git a/app/client/src/pages/Editor/EditorHeader.tsx b/app/client/src/pages/Editor/EditorHeader.tsx index 5201421130..b22b83010d 100644 --- a/app/client/src/pages/Editor/EditorHeader.tsx +++ b/app/client/src/pages/Editor/EditorHeader.tsx @@ -3,7 +3,6 @@ import { ThemeProvider } from "styled-components"; import AppInviteUsersForm from "pages/workspace/AppInviteUsersForm"; import AnalyticsUtil from "utils/AnalyticsUtil"; import { - combinedPreviewModeSelector, getCurrentApplicationId, getCurrentPageId, getIsPageSaving, @@ -65,7 +64,6 @@ import { import { viewerURL } from "@appsmith/RouteBuilder"; import { useHref } from "./utils"; import { getAppsmithConfigs } from "@appsmith/configs"; -import { getIsAppSettingsPaneWithNavigationTabOpen } from "selectors/appSettingsPaneSelectors"; import type { NavigationSetting } from "constants/AppConstants"; import CommunityTemplatesPublishInfo from "./CommunityTemplates/Modals/CommunityTemplatesPublishInfo"; import PublishCommunityTemplateModal from "./CommunityTemplates/Modals/PublishCommunityTemplate"; @@ -73,14 +71,11 @@ import { useFeatureFlag } from "utils/hooks/useFeatureFlag"; import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag"; import { getEmbedSnippetForm } from "@appsmith/utils/BusinessFeatures/privateEmbedHelpers"; import { HeaderSection, HeaderWrapper } from "./commons/EditorHeaderComponents"; -import { LockEntityExplorer } from "./commons/LockEntityExplorer"; import { Omnibar } from "./commons/Omnibar"; import { EditorShareButton } from "./EditorShareButton"; import { HelperBarInHeader } from "./HelpBarInHeader"; import { AppsmithLink } from "./AppsmithLink"; -import { getIsFirstTimeUserOnboardingEnabled } from "selectors/onboardingSelectors"; import { GetNavigationMenuData } from "./EditorName/NavigationMenuData"; -import { useIsAppSidebarEnabled } from "../../navigation/featureFlagHooks"; const { cloudHosting } = getAppsmithConfigs(); @@ -93,8 +88,6 @@ export function EditorHeader() { const isGitConnected = useSelector(getIsGitConnected); const isErroredSavingName = useSelector(getIsErroredSavingAppName); const applicationList = useSelector(getApplicationList); - const isPreviewMode = useSelector(combinedPreviewModeSelector); - const signpostingEnabled = useSelector(getIsFirstTimeUserOnboardingEnabled); const workspaceId = useSelector(getCurrentWorkspaceId); const currentWorkspace = useSelector(getCurrentAppWorkspace); const applicationId = useSelector(getCurrentApplicationId); @@ -107,11 +100,6 @@ export function EditorHeader() { const isProtectedMode = useSelector(protectedModeSelector); const deployLink = useHref(viewerURL, { pageId }); - const isAppSettingsPaneWithNavigationTabOpen = useSelector( - getIsAppSettingsPaneWithNavigationTabOpen, - ); - const isPreviewingApp = - isPreviewMode || isAppSettingsPaneWithNavigationTabOpen; const [isPopoverOpen, setIsPopoverOpen] = useState(false); const [showModal, setShowModal] = useState(false); @@ -120,10 +108,6 @@ export function EditorHeader() { setShowPublishCommunityTemplateModal, ] = useState(false); - const isAppSidebarEnabled = useIsAppSidebarEnabled(); - - const showEntityExplorerLock = !isAppSidebarEnabled && !signpostingEnabled; - const handlePublish = () => { if (applicationId) { dispatch(publishApplication(applicationId)); @@ -204,11 +188,7 @@ export function EditorHeader() { data-testid="t--appsmith-editor-header" > - {showEntityExplorerLock ? ( - - ) : ( -
- )} +
diff --git a/app/client/src/pages/Editor/EditorName/NavigationMenuData.ts b/app/client/src/pages/Editor/EditorName/NavigationMenuData.ts index d0a87c61ff..af652c35ce 100644 --- a/app/client/src/pages/Editor/EditorName/NavigationMenuData.ts +++ b/app/client/src/pages/Editor/EditorName/NavigationMenuData.ts @@ -19,12 +19,9 @@ import { Colors } from "constants/Colors"; import { getCurrentApplicationId } from "selectors/editorSelectors"; import { redoAction, undoAction } from "actions/pageActions"; import { redoShortCut, undoShortCut } from "utils/helpers"; -import { openAppSettingsPaneAction } from "actions/appSettingsPaneActions"; import { toast } from "design-system"; import type { ThemeProp } from "WidgetProvider/constants"; import { DISCORD_URL, DOCS_BASE_URL } from "constants/ThirdPartyConstants"; -import { protectedModeSelector } from "selectors/gitSyncSelectors"; -import { useIsAppSidebarEnabled } from "../../../navigation/featureFlagHooks"; import { useFeatureFlag } from "utils/hooks/useFeatureFlag"; import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag"; @@ -39,8 +36,6 @@ export const GetNavigationMenuData = ({ }: NavigationMenuDataProps): MenuItemData[] => { const dispatch = useDispatch(); const history = useHistory(); - const isAppSidebarEnabled = useIsAppSidebarEnabled(); - const isProtectedMode = useSelector(protectedModeSelector); const applicationId = useSelector(getCurrentApplicationId); @@ -84,8 +79,6 @@ export const GetNavigationMenuData = ({ }); }; - const openAppSettingsPane = () => dispatch(openAppSettingsPaneAction()); - const deleteApplication = () => { if (applicationId && applicationId.length > 0) { dispatch({ @@ -166,12 +159,6 @@ export const GetNavigationMenuData = ({ }, ], }, - { - text: "Settings", - onClick: openAppSettingsPane, - type: MenuTypes.MENU, - isVisible: !isAppSidebarEnabled && !isProtectedMode, - }, { text: "Help", type: MenuTypes.PARENT, diff --git a/app/client/src/pages/Editor/Explorer/EntityExplorer.test.tsx b/app/client/src/pages/Editor/Explorer/EntityExplorer.test.tsx index 72fdb5a1a5..ea4362147e 100644 --- a/app/client/src/pages/Editor/Explorer/EntityExplorer.test.tsx +++ b/app/client/src/pages/Editor/Explorer/EntityExplorer.test.tsx @@ -146,13 +146,6 @@ describe("Entity Explorer tests", () => { , ); - const widgetsTree: any = component.queryByText("Widgets", { - selector: "div.t--entity-name", - }); - act(() => { - fireEvent.click(widgetsTree); - jest.runAllTimers(); - }); const tabsWidget = component.queryByText(children[0].widgetName); expect(tabsWidget).toBeTruthy(); }); @@ -178,6 +171,13 @@ describe("Entity Explorer tests", () => { , ); + const widgetsTree: any = component.queryByText("Widgets", { + selector: "div.t--entity-name", + }); + act(() => { + fireEvent.click(widgetsTree); + jest.runAllTimers(); + }); const tabsWidget: any = component.queryByText(children[0].widgetName); act(() => { fireEvent.click(tabsWidget); diff --git a/app/client/src/pages/Editor/Explorer/EntityExplorer.tsx b/app/client/src/pages/Editor/Explorer/EntityExplorer.tsx index 6c99756b35..c66d8caeed 100644 --- a/app/client/src/pages/Editor/Explorer/EntityExplorer.tsx +++ b/app/client/src/pages/Editor/Explorer/EntityExplorer.tsx @@ -1,7 +1,6 @@ -import React, { useRef, useCallback, useEffect, useContext } from "react"; +import React, { useRef, useCallback, useEffect } from "react"; import styled from "styled-components"; import { NonIdealState, Classes } from "@blueprintjs/core"; -import JSDependencies from "./Libraries"; import PerformanceTracker, { PerformanceTransactionName, } from "utils/PerformanceTracker"; @@ -13,7 +12,6 @@ import { getIsFirstTimeUserOnboardingEnabled } from "selectors/onboardingSelecto import { toggleInOnboardingWidgetSelection } from "actions/onboardingActions"; import { forceOpenWidgetPanel } from "actions/widgetSidebarActions"; -import Datasources from "./Datasources"; import Files from "./Files"; import ExplorerWidgetGroup from "./Widgets/WidgetGroup"; import { builderURL } from "@appsmith/RouteBuilder"; @@ -28,14 +26,6 @@ import { importSvg } from "design-system-old"; import AnalyticsUtil from "utils/AnalyticsUtil"; import { EntityExplorerWrapper } from "./Common/EntityExplorerWrapper"; import { getCurrentApplicationId } from "selectors/editorSelectors"; -import { INTEGRATION_TABS } from "constants/routes"; -import { - getExplorerStatus, - saveExplorerStatus, -} from "@appsmith/pages/Editor/Explorer/helpers"; -import { integrationEditorURL } from "@appsmith/RouteBuilder"; -import WalkthroughContext from "components/featureWalkthrough/walkthroughContext"; -import { useIsAppSidebarEnabled } from "../../../navigation/featureFlagHooks"; import { FilesContextProvider } from "./Files/FilesContextProvider"; import { getHasCreateActionPermission } from "@appsmith/utils/BusinessFeatures/permissionPageHelpers"; import { useFeatureFlag } from "utils/hooks/useFeatureFlag"; @@ -100,11 +90,7 @@ function EntityExplorer({ isActive }: { isActive: boolean }) { dispatch(fetchWorkspace(currentWorkspaceId)); }, [currentWorkspaceId]); - const { isOpened: isWalkthroughOpened, popFeature } = - useContext(WalkthroughContext) || {}; const applicationId = useSelector(getCurrentApplicationId); - const isDatasourcesOpen = getExplorerStatus(applicationId, "datasource"); - const isAppSidebarEnabled = useIsAppSidebarEnabled(); const pagePermissions = useSelector(getPagePermissions); @@ -117,45 +103,6 @@ function EntityExplorer({ isActive }: { isActive: boolean }) { const showWorkflows = useSelector(getShowWorkflowFeature); - const closeWalkthrough = useCallback(() => { - if (isWalkthroughOpened && popFeature) { - popFeature("EXPLORER_DATASOURCE_ADD"); - } - }, [isWalkthroughOpened, popFeature]); - - const addDatasource = useCallback( - (entryPoint: string) => { - history.push( - integrationEditorURL({ - pageId, - selectedTab: INTEGRATION_TABS.NEW, - }), - ); - // Event for datasource creation click - AnalyticsUtil.logEvent("NAVIGATE_TO_CREATE_NEW_DATASOURCE_PAGE", { - entryPoint, - }); - closeWalkthrough(); - }, - [pageId, closeWalkthrough], - ); - - const listDatasource = useCallback(() => { - history.push( - integrationEditorURL({ - pageId, - selectedTab: INTEGRATION_TABS.ACTIVE, - }), - ); - }, [pageId]); - - const onDatasourcesToggle = useCallback( - (isOpen: boolean) => { - saveExplorerStatus(applicationId, "datasource", isOpen); - }, - [applicationId], - ); - return ( )} - - {!isAppSidebarEnabled && ( - <> - - - - )} ); } diff --git a/app/client/src/pages/Editor/Explorer/Pages/PageContextMenu.tsx b/app/client/src/pages/Editor/Explorer/Pages/PageContextMenu.tsx index 369ad26c05..039be50fd0 100644 --- a/app/client/src/pages/Editor/Explorer/Pages/PageContextMenu.tsx +++ b/app/client/src/pages/Editor/Explorer/Pages/PageContextMenu.tsx @@ -18,12 +18,9 @@ import { CONTEXT_DELETE, CONFIRM_CONTEXT_DELETE, createMessage, - CONTEXT_SETTINGS, CONTEXT_PARTIAL_EXPORT, CONTEXT_PARTIAL_IMPORT, } from "@appsmith/constants/messages"; -import { openAppSettingsPaneAction } from "actions/appSettingsPaneActions"; -import { AppSettingsTabs } from "pages/Editor/AppSettingsPane/AppSettings"; import { getPageById } from "selectors/editorSelectors"; import { getCurrentApplication, @@ -65,9 +62,6 @@ export function PageContextMenu(props: { const [showPartialExportModal, setShowPartialExportModal] = useState(false); const [showPartialImportModal, setShowPartialImportModal] = useState(false); const [confirmDelete, setConfirmDelete] = useState(false); - const isAppSidebarEnabled = useFeatureFlag( - FEATURE_FLAG.release_app_sidebar_enabled, - ); const partialImportExportLoadingState = useSelector( getPartialImportExportLoadingState, @@ -151,14 +145,6 @@ export function PageContextMenu(props: { ], ); - const openAppSettingsPane = () => - dispatch( - openAppSettingsPaneAction({ - type: AppSettingsTabs.Page, - pageId: props.pageId, - }), - ); - const openPartialExportModal = () => setShowPartialExportModal(true); const openPartialImportModal = () => setShowPartialImportModal(true); @@ -232,11 +218,6 @@ export function PageContextMenu(props: { onSelect: openPartialImportModal, label: createMessage(CONTEXT_PARTIAL_IMPORT), }, - !isAppSidebarEnabled && { - value: "settings", - onSelect: openAppSettingsPane, - label: createMessage(CONTEXT_SETTINGS), - }, !props.isDefaultPage && canDeletePages && { className: "t--apiFormDeleteBtn single-select", diff --git a/app/client/src/pages/Editor/IDE/LeftPane/index.tsx b/app/client/src/pages/Editor/IDE/LeftPane/index.tsx index 1da4851bb4..57938bd7e2 100644 --- a/app/client/src/pages/Editor/IDE/LeftPane/index.tsx +++ b/app/client/src/pages/Editor/IDE/LeftPane/index.tsx @@ -14,7 +14,6 @@ import { import AppSettingsPane from "./AppSettings"; import DataSidePane from "./DataSidePane"; import LibrarySidePane from "./LibrarySidePane"; -import { useIsAppSidebarEnabled } from "../../../../navigation/featureFlagHooks"; import { useFeatureFlag } from "utils/hooks/useFeatureFlag"; import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag"; import EditorPane from "../EditorPane"; @@ -26,14 +25,10 @@ export const LeftPaneContainer = styled.div` `; const LeftPane = () => { - const isAppSidebarEnabled = useIsAppSidebarEnabled(); const isPagesPaneEnabled = useFeatureFlag( FEATURE_FLAG.release_show_new_sidebar_pages_pane_enabled, ); const { path } = useRouteMatch(); - if (!isAppSidebarEnabled) { - return ; - } return ( diff --git a/app/client/src/pages/Editor/IDE/Sidebar/SidebarComponent.tsx b/app/client/src/pages/Editor/IDE/Sidebar/SidebarComponent.tsx index 0d7065d3ca..9bb3618c28 100644 --- a/app/client/src/pages/Editor/IDE/Sidebar/SidebarComponent.tsx +++ b/app/client/src/pages/Editor/IDE/Sidebar/SidebarComponent.tsx @@ -1,14 +1,7 @@ -import React, { useState } from "react"; +import React from "react"; import styled from "styled-components"; import SidebarButton from "./SidebarButton"; import type { SidebarButton as SidebarButtonType } from "@appsmith/entities/IDE/constants"; -import { - AnnouncementPopover, - AnnouncementPopoverTrigger, - AnnouncementPopoverContent, - Button, -} from "design-system"; -import { useIsAppSidebarEnabled } from "navigation/featureFlagHooks"; const Container = styled.div` width: 50px; @@ -21,72 +14,18 @@ const Container = styled.div` position: relative; `; -const DummyTrigger = styled.div` - width: 0; - height: 0; - position: absolute; - right: 0; - top: 10%; -`; - interface SidebarComponentProps { topButtons: SidebarButtonType[]; bottomButtons: SidebarButtonType[]; appState: string; onClick: (suffix: string) => void; - isAppSidebarAnnouncementEnabled: boolean; } function SidebarComponent(props: SidebarComponentProps) { - const { - appState, - bottomButtons, - isAppSidebarAnnouncementEnabled, - onClick, - topButtons, - } = props; - const [isPopoverOpen, setIsPopoverOpen] = useState(true); - const isAppSidebarEnabled = useIsAppSidebarEnabled(); - const isAppSidebarAnnouncementDismissed = - localStorage.getItem("isAppSidebarAnnouncementDismissed") === "true"; - - const handlePopoverClose = () => { - setIsPopoverOpen(false); - localStorage.setItem( - "isAppSidebarAnnouncementDismissed", - JSON.stringify(true), - ); - }; - - if (!isAppSidebarEnabled) { - return null; - } + const { appState, bottomButtons, onClick, topButtons } = props; return ( - {isAppSidebarAnnouncementEnabled && - !isAppSidebarAnnouncementDismissed && ( - - - - - - Got it - - } - onCloseButtonClick={handlePopoverClose} - side="right" - title="App-level items have a new home!" - /> - - )}
{topButtons.map((b) => ( diff --git a/app/client/src/pages/Editor/IntegrationEditor/CreateNewDatasourceTab.tsx b/app/client/src/pages/Editor/IntegrationEditor/CreateNewDatasourceTab.tsx index 6b030714d1..66c3bd5ef3 100644 --- a/app/client/src/pages/Editor/IntegrationEditor/CreateNewDatasourceTab.tsx +++ b/app/client/src/pages/Editor/IntegrationEditor/CreateNewDatasourceTab.tsx @@ -25,8 +25,6 @@ import NewQueryScreen from "./NewQuery"; import { isAirgapped } from "@appsmith/utils/airgapHelpers"; import history from "utils/history"; import { showDebuggerFlag } from "../../../selectors/debuggerSelectors"; -import classNames from "classnames"; -import { getIsAppSidebarEnabled } from "../../../selectors/ideSelectors"; import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag"; import { createMessage, @@ -241,7 +239,6 @@ interface CreateNewDatasourceScreenProps { canCreateDatasource?: boolean; showDebugger: boolean; pageId: string; - isAppSidebarEnabled: boolean; isEnabledForCreateNew: boolean; isOnboardingScreen?: boolean; } @@ -273,7 +270,6 @@ class CreateNewDatasourceTab extends React.Component< const { canCreateDatasource = false, dataSources, - isAppSidebarEnabled, isCreating, isEnabledForCreateNew, isOnboardingScreen, @@ -288,12 +284,7 @@ class CreateNewDatasourceTab extends React.Component< /> ) : null; return ( - + {dataSources.length === 0 && } {dataSources.length === 0 && this.props.mockDatasources.length > 0 && ( <> @@ -384,7 +375,6 @@ const mapStateToProps = (state: AppState) => { const isEnabledForCreateNew = !!featureFlags[FEATURE_FLAG.ab_create_new_apps_enabled]; - const isAppSidebarEnabled = getIsAppSidebarEnabled(state); return { dataSources: getDatasources(state), mockDatasources: getMockDatasources(state), @@ -393,7 +383,6 @@ const mapStateToProps = (state: AppState) => { canCreateDatasource, showDebugger, pageId, - isAppSidebarEnabled, isEnabledForCreateNew, }; }; diff --git a/app/client/src/pages/Editor/WidgetsEditor/NavigationPreview.tsx b/app/client/src/pages/Editor/WidgetsEditor/NavigationPreview.tsx index 524200ef18..0dbc32d63a 100644 --- a/app/client/src/pages/Editor/WidgetsEditor/NavigationPreview.tsx +++ b/app/client/src/pages/Editor/WidgetsEditor/NavigationPreview.tsx @@ -4,13 +4,18 @@ import classNames from "classnames"; import { useSelector } from "react-redux"; import { combinedPreviewModeSelector } from "selectors/editorSelectors"; import { Navigation } from "pages/AppViewer/Navigation"; +import { useCurrentAppState } from "../IDE/hooks"; +import { EditorState } from "@appsmith/entities/IDE/constants"; +import { getIsAppSettingsPaneWithNavigationTabOpen } from "selectors/appSettingsPaneSelectors"; const NavigationPreview = forwardRef( - ( - props: { isAppSettingsPaneWithNavigationTabOpen?: boolean }, - ref: LegacyRef | undefined, - ) => { - const { isAppSettingsPaneWithNavigationTabOpen } = props; + (props: unknown, ref: LegacyRef | undefined) => { + const isNavigationSelectedInSettings = useSelector( + getIsAppSettingsPaneWithNavigationTabOpen, + ); + const appState = useCurrentAppState(); + const isAppSettingsPaneWithNavigationTabOpen = + appState === EditorState.SETTINGS && isNavigationSelectedInSettings; const isPreviewMode = useSelector(combinedPreviewModeSelector); return ( diff --git a/app/client/src/pages/Editor/WidgetsEditor/index.tsx b/app/client/src/pages/Editor/WidgetsEditor/index.tsx index 1558987e37..87c6fbe8e5 100644 --- a/app/client/src/pages/Editor/WidgetsEditor/index.tsx +++ b/app/client/src/pages/Editor/WidgetsEditor/index.tsx @@ -51,6 +51,8 @@ import { } from "layoutSystems/common/useLayoutSystemFeatures"; import OverlayCanvasContainer from "layoutSystems/common/WidgetNamesCanvas"; import { protectedModeSelector } from "selectors/gitSyncSelectors"; +import { useCurrentAppState } from "pages/Editor/IDE/hooks"; +import { EditorState } from "@appsmith/entities/IDE/constants"; const BannerWrapper = styled.div` z-index: calc(var(--on-canvas-ui-z-index) + 1); @@ -72,9 +74,12 @@ function WidgetsEditor() { const appSettingsPaneContext = useSelector(getAppSettingsPaneContext); const navigationPreviewRef = useRef(null); const [navigationHeight, setNavigationHeight] = useState(0); - const isAppSettingsPaneWithNavigationTabOpen = useSelector( + const isNavigationSelectedInSettings = useSelector( getIsAppSettingsPaneWithNavigationTabOpen, ); + const appState = useCurrentAppState(); + const isAppSettingsPaneWithNavigationTabOpen = + appState === EditorState.SETTINGS && isNavigationSelectedInSettings; const canvasWidth = useSelector(getCanvasWidth); const appMode = useSelector(getAppMode); @@ -172,14 +177,7 @@ function WidgetsEditor() { const showNavigation = () => { if (isPreviewingNavigation) { - return ( - - ); + return ; } }; diff --git a/app/client/src/selectors/appSettingsPaneSelectors.tsx b/app/client/src/selectors/appSettingsPaneSelectors.tsx index bf1008d730..19dac8840e 100644 --- a/app/client/src/selectors/appSettingsPaneSelectors.tsx +++ b/app/client/src/selectors/appSettingsPaneSelectors.tsx @@ -2,23 +2,9 @@ import { AppSettingsTabs } from "pages/Editor/AppSettingsPane/AppSettings"; import type { AppState } from "@appsmith/reducers"; import type { AppSettingsPaneReduxState } from "reducers/uiReducers/appSettingsPaneReducer"; import { createSelector } from "reselect"; -import { getIsAppSidebarEnabled } from "./ideSelectors"; export const getAppSettingsPane = (state: AppState) => state.ui.appSettingsPane; -export const getIsAppSettingsPaneOpen = createSelector( - getAppSettingsPane, - getIsAppSidebarEnabled, - ( - appSettingsPane: AppSettingsPaneReduxState, - isAppSidebarEnabled: boolean, - ) => { - // When sidebar is enabled we depend only on the url - if (isAppSidebarEnabled) return false; - return appSettingsPane.isOpen; - }, -); - export const getAppSettingsPaneContext = createSelector( getAppSettingsPane, (appSettingsPane: AppSettingsPaneReduxState) => appSettingsPane.context, diff --git a/app/client/src/selectors/ideSelectors.tsx b/app/client/src/selectors/ideSelectors.tsx index 11fc5e67b7..ed97b66ded 100644 --- a/app/client/src/selectors/ideSelectors.tsx +++ b/app/client/src/selectors/ideSelectors.tsx @@ -4,17 +4,6 @@ import type { AppState } from "@appsmith/reducers"; import { getPageActions } from "@appsmith/selectors/entitiesSelector"; import { EditorEntityTab } from "@appsmith/entities/IDE/constants"; -export const getIsAppSidebarEnabled = createSelector( - selectFeatureFlags, - (flags) => - !!flags?.release_app_sidebar_enabled || flags?.rollout_app_sidebar_enabled, -); - -export const getIsAppSidebarAnnouncementEnabled = createSelector( - selectFeatureFlags, - (flags) => !!flags?.release_show_new_sidebar_announcement_enabled, -); - export const getIsSideBySideEnabled = createSelector( selectFeatureFlags, (flags) => flags.release_side_by_side_ide_enabled, diff --git a/app/client/src/utils/hooks/useDynamicAppLayout.tsx b/app/client/src/utils/hooks/useDynamicAppLayout.tsx index a64a07d653..4b73ab520c 100644 --- a/app/client/src/utils/hooks/useDynamicAppLayout.tsx +++ b/app/client/src/utils/hooks/useDynamicAppLayout.tsx @@ -4,10 +4,7 @@ import { useDispatch, useSelector } from "react-redux"; import { updateLayoutForMobileBreakpointAction } from "actions/autoLayoutActions"; import { updateCanvasLayoutAction } from "actions/editorActions"; -import { - APP_SETTINGS_PANE_WIDTH, - APP_SIDEBAR_WIDTH, -} from "constants/AppConstants"; +import { APP_SIDEBAR_WIDTH } from "constants/AppConstants"; import { DefaultLayoutType, layoutConfigurations, @@ -22,15 +19,9 @@ import { getMainCanvasProps, } from "selectors/editorSelectors"; import { getAppMode } from "@appsmith/selectors/entitiesSelector"; -import { - getExplorerPinned, - getExplorerWidth, -} from "selectors/explorerSelector"; +import { getExplorerWidth } from "selectors/explorerSelector"; import { getIsCanvasInitialized } from "selectors/mainCanvasSelectors"; -import { - getIsAppSettingsPaneOpen, - getIsAppSettingsPaneWithNavigationTabOpen, -} from "selectors/appSettingsPaneSelectors"; +import { getIsAppSettingsPaneWithNavigationTabOpen } from "selectors/appSettingsPaneSelectors"; import { getAppSidebarPinned, getCurrentApplication, @@ -45,7 +36,6 @@ import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants"; import { useLocation } from "react-router"; import { CANVAS_VIEWPORT } from "constants/componentClassNameConstants"; import { getLayoutSystemType } from "selectors/layoutSystemSelectors"; -import { useIsAppSidebarEnabled } from "../../navigation/featureFlagHooks"; import { getIDEViewMode } from "selectors/ideSelectors"; import { EditorEntityTab, @@ -60,7 +50,6 @@ export const useDynamicAppLayout = () => { const dispatch = useDispatch(); const explorerWidth = useSelector(getExplorerWidth); const propertyPaneWidth = useSelector(getPropertyPaneWidth); - const isExplorerPinned = useSelector(getExplorerPinned); const appMode: APP_MODE | undefined = useSelector(getAppMode); const { width: screenWidth } = useWindowSizeHooks(); const mainCanvasProps = useSelector(getMainCanvasProps); @@ -68,7 +57,6 @@ export const useDynamicAppLayout = () => { const currentPageId = useSelector(getCurrentPageId); const isCanvasInitialized = useSelector(getIsCanvasInitialized); const appLayout = useSelector(getCurrentApplicationLayout); - const isAppSettingsPaneOpen = useSelector(getIsAppSettingsPaneOpen); const layoutSystemType = useSelector(getLayoutSystemType); const isAppSidebarPinned = useSelector(getAppSidebarPinned); const sidebarWidth = useSelector(getSidebarWidth); @@ -85,7 +73,6 @@ export const useDynamicAppLayout = () => { const queryParams = new URLSearchParams(search); const isEmbed = queryParams.get("embed"); const isNavbarVisibleInEmbeddedApp = queryParams.get("navbar"); - const isAppSidebarEnabled = useIsAppSidebarEnabled(); const editorMode = useSelector(getIDEViewMode); const { segment } = useCurrentEditorState(); @@ -142,33 +129,16 @@ export const useDynamicAppLayout = () => { layoutSystemType === LayoutSystemTypes.AUTO ? 0 : GUTTER_WIDTH; // if preview mode is not on and the app setting pane is not opened, we need to subtract the width of the property pane - if ( - isPreviewing === false && - !isAppSettingsPaneOpen && - appMode === APP_MODE.EDIT - ) { + if (!isPreviewing && appMode === APP_MODE.EDIT) { calculatedWidth -= propertyPaneWidth; } - // if app setting pane is open, we need to subtract the width of app setting page width - if ( - isAppSettingsPaneOpen === true && - appMode === APP_MODE.EDIT && - !isAppSidebarEnabled - ) { - calculatedWidth -= APP_SETTINGS_PANE_WIDTH; - } - // if explorer is closed or its preview mode, we don't need to subtract the EE width - if ( - isExplorerPinned === true && - !isPreviewing && - appMode === APP_MODE.EDIT - ) { + if (!isPreviewing && appMode === APP_MODE.EDIT) { calculatedWidth -= explorerWidth; } - if (appMode === APP_MODE.EDIT && isAppSidebarEnabled) { + if (appMode === APP_MODE.EDIT) { calculatedWidth -= APP_SIDEBAR_WIDTH; } @@ -323,9 +293,7 @@ export const useDynamicAppLayout = () => { explorerWidth, sidebarWidth, propertyPaneWidth, - isExplorerPinned, propertyPaneWidth, - isAppSettingsPaneOpen, isAppSidebarPinned, currentApplicationDetails?.applicationDetail?.navigationSetting ?.orientation,