From 7260f5b24d6de6f3d0ba605891f43cfe5e25eae3 Mon Sep 17 00:00:00 2001 From: Rudraprasad Das Date: Mon, 1 Apr 2024 16:45:28 +0530 Subject: [PATCH] fix: bottom bar issue with multienv (#32249) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description Multi env disappearing from bottom bar in editor mode Fixes #31266 #32270 ## Automation /ok-to-test tags="@tag.MultiEnv" ### :mag: Cypress test results > [!IMPORTANT] > Workflow run: > Commit: `2a72270e1d2eee93391bdb098f3bb708c0bb5a8e` > Cypress dashboard url: Click here! > All cypress tests have passed 🎉🎉🎉 ## Summary by CodeRabbit - **New Features** - Enhanced environment switching functionality to support multiple environments based on various conditions including view and preview modes. - **Refactor** - Simplified the bottom bar display logic across the app using the updated `useShowEnvSwitcher` hook. - Revised environment and feature flag handling in the App Viewer and Editor IDE components for improved clarity and efficiency. - Updated `EditorWrapperContainer` to adjust its height dynamically based on the presence of the bottom bar. --- app/client/src/ce/hooks/useShowEnvSwitcher.ts | 21 +++++--------- app/client/src/pages/AppViewer/index.tsx | 29 ++----------------- app/client/src/pages/Editor/IDE/index.tsx | 13 ++++++--- .../Editor/commons/EditorWrapperContainer.tsx | 17 ++++++++--- 4 files changed, 32 insertions(+), 48 deletions(-) diff --git a/app/client/src/ce/hooks/useShowEnvSwitcher.ts b/app/client/src/ce/hooks/useShowEnvSwitcher.ts index 6dd735d123..449f4fc643 100644 --- a/app/client/src/ce/hooks/useShowEnvSwitcher.ts +++ b/app/client/src/ce/hooks/useShowEnvSwitcher.ts @@ -15,31 +15,26 @@ const useShowEnvSwitcher = ({ viewMode }: { viewMode: boolean }) => { FEATURE_FLAG.release_datasource_environments_enabled, ); const previewMode = useSelector(previewModeSelector); - const isSingleEnvPresent = useSelector((state) => { + const isMultiEnvNotPresent = useSelector((state) => { const workspace = getCurrentAppWorkspace(state); const isLoaded = areEnvironmentsFetched(state, workspace?.id); const list = getEnvironmentsWithPermission(state); - const isDefault = list.length === 1 && list?.[0]?.isDefault; - return isLoaded && list.length > 0 && isDefault; + const isDefault = list?.[0]?.isDefault; + return isLoaded && (list.length === 0 || (list.length === 1 && isDefault)); }); const isRampAllowed = useSelector((state) => showProductRamps(RAMP_NAME.MULTIPLE_ENV, true)(state), ); - if (!isFeatureEnabled) { + if (!isFeatureEnabled && !isRampAllowed) { + return false; + } + if (viewMode && isMultiEnvNotPresent) { return false; } - if (viewMode && isSingleEnvPresent) { - return false; - } - - if (previewMode && isSingleEnvPresent) { - return false; - } - - if (!previewMode && isSingleEnvPresent && !isRampAllowed) { + if (previewMode && isMultiEnvNotPresent) { return false; } diff --git a/app/client/src/pages/AppViewer/index.tsx b/app/client/src/pages/AppViewer/index.tsx index 6923789a4b..1fb6ee7ba5 100644 --- a/app/client/src/pages/AppViewer/index.tsx +++ b/app/client/src/pages/AppViewer/index.tsx @@ -43,23 +43,17 @@ import { } from "@appsmith/selectors/applicationSelectors"; import { editorInitializer } from "../../utils/editor/EditorUtils"; import { widgetInitialisationSuccess } from "../../actions/widgetActions"; -import { - areEnvironmentsFetched, - getEnvironmentsWithPermission, -} from "@appsmith/selectors/environmentSelectors"; import type { FontFamily } from "@design-system/theming"; import { ThemeProvider as WDSThemeProvider, useTheme, } from "@design-system/theming"; import { useFeatureFlag } from "utils/hooks/useFeatureFlag"; -import { RAMP_NAME } from "utils/ProductRamps/RampsControlList"; -import { showProductRamps } from "@appsmith/selectors/rampSelectors"; -import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag"; import { KBViewerFloatingButton } from "@appsmith/pages/AppViewer/KnowledgeBase/KBViewerFloatingButton"; import urlBuilder from "@appsmith/entities/URLRedirect/URLAssembly"; import { getHideWatermark } from "@appsmith/selectors/tenantSelectors"; import BottomBar from "components/BottomBar"; +import useShowEnvSwitcher from "@appsmith/hooks/useShowEnvSwitcher"; const AppViewerBody = styled.section<{ hasPages: boolean; @@ -134,26 +128,7 @@ function AppViewer(props: Props) { const focusRef = useWidgetFocus(); const isAutoLayout = useSelector(getIsAutoLayout); - const showRampSelector = showProductRamps(RAMP_NAME.MULTIPLE_ENV, true); - const canShowRamp = useSelector(showRampSelector); - - const workspaceId = currentApplicationDetails?.workspaceId || ""; - const isMultipleEnvEnabled = useFeatureFlag( - FEATURE_FLAG.release_datasource_environments_enabled, - ); - const environmentList = useSelector(getEnvironmentsWithPermission); - // If there is only one environment and it is default, don't show the bottom bar - const isOnlyDefaultShown = - environmentList.length === 1 && environmentList[0]?.isDefault; - const showBottomBar = useSelector((state: AppState) => { - return ( - areEnvironmentsFetched(state, workspaceId) && - (isMultipleEnvEnabled || canShowRamp) && - environmentList.length > 0 && - !isOnlyDefaultShown - ); - }); - + const showBottomBar = useShowEnvSwitcher({ viewMode: true }); /** * initializes the widgets factory and registers all widgets */ diff --git a/app/client/src/pages/Editor/IDE/index.tsx b/app/client/src/pages/Editor/IDE/index.tsx index 49d1f6efb2..8cd47d6b60 100644 --- a/app/client/src/pages/Editor/IDE/index.tsx +++ b/app/client/src/pages/Editor/IDE/index.tsx @@ -2,7 +2,10 @@ import React from "react"; import { useSelector } from "react-redux"; import BottomBar from "components/BottomBar"; -import { combinedPreviewModeSelector } from "selectors/editorSelectors"; +import { + combinedPreviewModeSelector, + previewModeSelector, +} from "selectors/editorSelectors"; import EditorWrapperContainer from "../commons/EditorWrapperContainer"; import Sidebar from "pages/Editor/IDE/Sidebar"; import LeftPane from "./LeftPane"; @@ -10,16 +13,18 @@ import MainPane from "./MainPane"; import RightPane from "./RightPane"; import classNames from "classnames"; import { tailwindLayers } from "constants/Layers"; +import useShowEnvSwitcher from "@appsmith/hooks/useShowEnvSwitcher"; /** * OldName: MainContainer */ function IDE() { const isCombinedPreviewMode = useSelector(combinedPreviewModeSelector); - + const isPreviewMode = useSelector(previewModeSelector); + const showEnvSwitcher = useShowEnvSwitcher({ viewMode: isPreviewMode }); return ( <> - +
- + {(!isPreviewMode || showEnvSwitcher) && } ); } diff --git a/app/client/src/pages/Editor/commons/EditorWrapperContainer.tsx b/app/client/src/pages/Editor/commons/EditorWrapperContainer.tsx index 5b87906d35..9788fcf84e 100644 --- a/app/client/src/pages/Editor/commons/EditorWrapperContainer.tsx +++ b/app/client/src/pages/Editor/commons/EditorWrapperContainer.tsx @@ -3,20 +3,29 @@ import styled from "styled-components"; interface EditorWrapperContainerProps { children: React.ReactNode; + hasBottomBar?: boolean; } -const Wrapper = styled.div` +const Wrapper = styled.div<{ hasBottomBar?: boolean }>` display: flex; height: calc( 100vh - ${(props) => props.theme.smallHeaderHeight} - - ${(props) => props.theme.bottomBarHeight} + ${(props) => (props.hasBottomBar ? props.theme.bottomBarHeight : "0px")} ); background-color: ${(props) => props.theme.appBackground}; `; -function EditorWrapperContainer({ children }: EditorWrapperContainerProps) { +function EditorWrapperContainer({ + children, + hasBottomBar = true, +}: EditorWrapperContainerProps) { return ( - {children} + + {children} + ); }