fix: bottom bar issue with multienv (#32249)

## Description
Multi env disappearing from bottom bar in editor mode

Fixes #31266 #32270

## Automation

/ok-to-test tags="@tag.MultiEnv"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!IMPORTANT]
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/8506755504>
> Commit: `2a72270e1d2eee93391bdb098f3bb708c0bb5a8e`
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8506755504&attempt=1"
target="_blank">Click here!</a>
> All cypress tests have passed 🎉🎉🎉

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





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

## 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.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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;
+    const isDefault = list?.[0]?.isDefault;
-    return isLoaded && list.length > 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) {
+  if (previewMode && isMultiEnvNotPresent) {
-    return false;
-  }
-
-  if (previewMode && isSingleEnvPresent) {
-    return false;
-  }
-
-  if (!previewMode && isSingleEnvPresent && !isRampAllowed) {
     return false;
   }
 

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 showBottomBar = useShowEnvSwitcher({ viewMode: 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
-    );
-  });
-
   /**
    * initializes the widgets factory and registers all widgets
    */

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 (
     <>
-      <EditorWrapperContainer>
+      <EditorWrapperContainer hasBottomBar={!isPreviewMode || showEnvSwitcher}>
         <div
           className={classNames({
             [`transition-transform transform duration-400 flex ${tailwindLayers.entityExplorer}`]:
@@ -43,7 +48,7 @@ function IDE() {
           <RightPane />
         </div>
       </EditorWrapperContainer>
-      <BottomBar />
+      {(!isPreviewMode || showEnvSwitcher) && <BottomBar />}
     </>
   );
 }

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 (
-    <Wrapper className="relative w-full overflow-x-hidden">{children}</Wrapper>
+    <Wrapper
+      className="relative w-full overflow-x-hidden"
+      hasBottomBar={hasBottomBar}
+    >
+      {children}
+    </Wrapper>
   );
 }