revert: multi env switcher view mode changes (#32360)

Reverts changes for multienv switcher on view mode

## 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/8535416309>
> Commit: `973e392a00cc68e0dbf1e99e06ca2b8b1ebc0474`
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8535416309&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

- **Refactor**
- Simplified the handling of view modes and conditional rendering in the
`BottomBar` component.
- Removed and streamlined the `showBottomBar` logic and UI adjustments
in `AppViewer`.
- Introduced `isCombinedPreviewMode` for enhanced preview functionality
in the Editor's `IDE` component.
- Simplified the structure of `EditorWrapperContainer` by removing
unnecessary props and logic.

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

app/client/src/ce/hooks/useShowEnvSwitcher.test.tsx

@@ -1,316 +0,0 @@
-import React from "react";
-import { render } from "@testing-library/react";
-import { Provider } from "react-redux";
-import configureMockStore from "redux-mock-store";
-import useShowEnvSwitcher from "./useShowEnvSwitcher";
-
-const spier = {
-  useShowEnvSwitcher: useShowEnvSwitcher,
-};
-
-const useShowEnvSwitcherSpy = jest.spyOn(spier, "useShowEnvSwitcher");
-
-const MockEl = ({ viewMode = false }: { viewMode?: boolean } = {}) => {
-  spier.useShowEnvSwitcher({ viewMode });
-  return <div />;
-};
-
-const renderMockElement = ({
-  store,
-  viewMode,
-}: {
-  store: any;
-  viewMode: boolean;
-}) => {
-  return render(
-    <Provider store={store}>
-      <MockEl viewMode={viewMode} />
-    </Provider>,
-  );
-};
-
-const environments = { data: [] };
-
-describe("BottomBar environment switcher", () => {
-  it("should render when admin in edit mode", () => {
-    const mockStore = configureMockStore();
-    const store = mockStore({
-      ui: {
-        selectedWorkspace: {
-          workspace: {},
-        },
-        applications: {
-          currentApplication: {
-            userPermissions: ["manage:applications"],
-          },
-        },
-        users: {
-          featureFlag: {
-            data: {
-              release_datasource_environments_enabled: false,
-            },
-          },
-          currentUser: {
-            isSuperUser: true,
-          },
-        },
-        editor: {
-          isPreviewMode: false,
-        },
-      },
-      environments,
-    });
-    renderMockElement({ store, viewMode: false });
-    expect(useShowEnvSwitcherSpy).lastReturnedWith(true);
-  });
-  it("should render when dev in edit mode", () => {
-    const mockStore = configureMockStore();
-    const store = mockStore({
-      ui: {
-        selectedWorkspace: {
-          workspace: {},
-        },
-        applications: {
-          currentApplication: {
-            userPermissions: ["manage:applications"],
-          },
-        },
-        users: {
-          featureFlag: {
-            data: {
-              release_datasource_environments_enabled: false,
-            },
-          },
-          currentUser: {
-            isSuperUser: false,
-          },
-        },
-        editor: {
-          isPreviewMode: false,
-        },
-      },
-      environments,
-    });
-    renderMockElement({ store, viewMode: false });
-    expect(useShowEnvSwitcherSpy).lastReturnedWith(true);
-  });
-  it("should render when viewer in edit mode", () => {
-    const mockStore = configureMockStore();
-    const store = mockStore({
-      ui: {
-        selectedWorkspace: {
-          workspace: {},
-        },
-        applications: {
-          currentApplication: {
-            userPermissions: [],
-          },
-        },
-        users: {
-          featureFlag: {
-            data: {
-              release_datasource_environments_enabled: false,
-            },
-          },
-          currentUser: {
-            isSuperUser: false,
-          },
-        },
-        editor: {
-          isPreviewMode: false,
-        },
-      },
-      environments,
-    });
-    renderMockElement({ store, viewMode: false });
-    expect(useShowEnvSwitcherSpy).lastReturnedWith(false);
-  });
-
-  it("should render when admin in preview mode", () => {
-    const mockStore = configureMockStore();
-    const store = mockStore({
-      ui: {
-        selectedWorkspace: {
-          workspace: {},
-        },
-        applications: {
-          currentApplication: {
-            userPermissions: ["manage:applications"],
-          },
-        },
-        users: {
-          featureFlag: {
-            data: {
-              release_datasource_environments_enabled: false,
-            },
-          },
-          currentUser: {
-            isSuperUser: true,
-          },
-        },
-        editor: {
-          isPreviewMode: true,
-        },
-      },
-      environments,
-    });
-    renderMockElement({ store, viewMode: false });
-    expect(useShowEnvSwitcherSpy).lastReturnedWith(false);
-  });
-  it("should render when dev in preview mode", () => {
-    const mockStore = configureMockStore();
-    const store = mockStore({
-      ui: {
-        selectedWorkspace: {
-          workspace: {},
-        },
-        applications: {
-          currentApplication: {
-            userPermissions: ["manage:applications"],
-          },
-        },
-        users: {
-          featureFlag: {
-            data: {
-              release_datasource_environments_enabled: false,
-            },
-          },
-          currentUser: {
-            isSuperUser: false,
-          },
-        },
-        editor: {
-          isPreviewMode: true,
-        },
-      },
-      environments,
-    });
-    renderMockElement({ store, viewMode: false });
-    expect(useShowEnvSwitcherSpy).lastReturnedWith(false);
-  });
-  it("should render when viewer in preview mode", () => {
-    const mockStore = configureMockStore();
-    const store = mockStore({
-      ui: {
-        selectedWorkspace: {
-          workspace: {},
-        },
-        applications: {
-          currentApplication: {
-            userPermissions: [],
-          },
-        },
-        users: {
-          featureFlag: {
-            data: {
-              release_datasource_environments_enabled: false,
-            },
-          },
-          currentUser: {
-            isSuperUser: false,
-          },
-        },
-        editor: {
-          isPreviewMode: true,
-        },
-      },
-      environments,
-    });
-    renderMockElement({ store, viewMode: false });
-    expect(useShowEnvSwitcherSpy).lastReturnedWith(false);
-  });
-
-  it("should render when admin in view mode", () => {
-    const mockStore = configureMockStore();
-    const store = mockStore({
-      ui: {
-        selectedWorkspace: {
-          workspace: {},
-        },
-        applications: {
-          currentApplication: {
-            userPermissions: ["manage:applications"],
-          },
-        },
-        users: {
-          featureFlag: {
-            data: {
-              release_datasource_environments_enabled: false,
-            },
-          },
-          currentUser: {
-            isSuperUser: true,
-          },
-        },
-        editor: {
-          isPreviewMode: false,
-        },
-      },
-      environments,
-    });
-    renderMockElement({ store, viewMode: true });
-    expect(useShowEnvSwitcherSpy).lastReturnedWith(false);
-  });
-  it("should render when dev in view mode", () => {
-    const mockStore = configureMockStore();
-    const store = mockStore({
-      ui: {
-        selectedWorkspace: {
-          workspace: {},
-        },
-        applications: {
-          currentApplication: {
-            userPermissions: ["manage:applications"],
-          },
-        },
-        users: {
-          featureFlag: {
-            data: {
-              release_datasource_environments_enabled: false,
-            },
-          },
-          currentUser: {
-            isSuperUser: false,
-          },
-        },
-        editor: {
-          isPreviewMode: false,
-        },
-      },
-      environments,
-    });
-    renderMockElement({ store, viewMode: true });
-    expect(useShowEnvSwitcherSpy).lastReturnedWith(false);
-  });
-  it("should render when viewer in view mode", () => {
-    const mockStore = configureMockStore();
-    const store = mockStore({
-      ui: {
-        selectedWorkspace: {
-          workspace: {},
-        },
-        applications: {
-          currentApplication: {
-            userPermissions: [],
-          },
-        },
-        users: {
-          featureFlag: {
-            data: {
-              release_datasource_environments_enabled: false,
-            },
-          },
-          currentUser: {
-            isSuperUser: false,
-          },
-        },
-        editor: {
-          isPreviewMode: false,
-        },
-      },
-      environments,
-    });
-    renderMockElement({ store, viewMode: true });
-    expect(useShowEnvSwitcherSpy).lastReturnedWith(false);
-  });
-});

app/client/src/ce/hooks/useShowEnvSwitcher.ts

@@ -1,50 +0,0 @@
-import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag";
-import {
-  areEnvironmentsFetched,
-  getEnvironmentsWithPermission,
-} from "@appsmith/selectors/environmentSelectors";
-import { showProductRamps } from "@appsmith/selectors/rampSelectors";
-import { useSelector } from "react-redux";
-import { RAMP_NAME } from "utils/ProductRamps/RampsControlList";
-import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
-import { previewModeSelector } from "selectors/editorSelectors";
-import { getCurrentAppWorkspace } from "@appsmith/selectors/selectedWorkspaceSelectors";
-
-const useShowEnvSwitcher = ({ viewMode }: { viewMode: boolean }) => {
-  const isFeatureEnabled = useFeatureFlag(
-    FEATURE_FLAG.release_datasource_environments_enabled,
-  );
-  const previewMode = useSelector(previewModeSelector);
-  const isMultiEnvNotPresent = useSelector((state) => {
-    const workspace = getCurrentAppWorkspace(state);
-    const isLoaded = areEnvironmentsFetched(state, workspace?.id);
-    const list = getEnvironmentsWithPermission(state);
-    const isDefault = list?.[0]?.isDefault;
-    if (!isFeatureEnabled) {
-      return true;
-    } else {
-      return (
-        isLoaded && (list.length === 0 || (list.length === 1 && isDefault))
-      );
-    }
-  });
-
-  const isRampAllowed = useSelector((state) =>
-    showProductRamps(RAMP_NAME.MULTIPLE_ENV, true)(state),
-  );
-  if (!isFeatureEnabled && !isRampAllowed) {
-    return false;
-  }
-
-  if (viewMode && isMultiEnvNotPresent) {
-    return false;
-  }
-
-  if (previewMode && isMultiEnvNotPresent) {
-    return false;
-  }
-
-  return true;
-};
-
-export default useShowEnvSwitcher;

app/client/src/components/BottomBar/index.tsx

@@ -7,22 +7,12 @@ import { Button } from "design-system";
 import SwitchEnvironment from "@appsmith/components/SwitchEnvironment";
 import { Container, Wrapper } from "./components";
 import { useSelector } from "react-redux";
-import {
+import { getCurrentApplicationId } from "selectors/editorSelectors";
-  getCurrentApplicationId,
-  previewModeSelector,
-} from "selectors/editorSelectors";
 import { useDispatch } from "react-redux";
 import { softRefreshActions } from "actions/pluginActionActions";
 import { START_SWITCH_ENVIRONMENT } from "@appsmith/constants/messages";
-import useShowEnvSwitcher from "@appsmith/hooks/useShowEnvSwitcher";
 
-interface BottomBarProps {
+export default function BottomBar({ viewMode }: { viewMode: boolean }) {
-  viewMode?: boolean;
-}
-
-export default function BottomBar({ viewMode = false }: BottomBarProps) {
-  const isPreviewMode = useSelector(previewModeSelector);
-  const showEnvSwitcher = useShowEnvSwitcher({ viewMode });
   const appId = useSelector(getCurrentApplicationId) || "";
   const dispatch = useDispatch();
 
@@ -33,7 +23,7 @@ export default function BottomBar({ viewMode = false }: BottomBarProps) {
   return (
     <Container>
       <Wrapper>
-        {showEnvSwitcher && (
+        {!viewMode && (
           <SwitchEnvironment
             editorId={appId}
             onChangeEnv={onChangeEnv}
@@ -41,9 +31,9 @@ export default function BottomBar({ viewMode = false }: BottomBarProps) {
             viewMode={viewMode}
           />
         )}
-        {!viewMode && !isPreviewMode && <QuickGitActions />}
+        {!viewMode && <QuickGitActions />}
       </Wrapper>
-      {!viewMode && !isPreviewMode && (
+      {!viewMode && (
         <Wrapper>
           <ManualUpgrades showTooltip>
             <Button

app/client/src/ee/hooks/useShowEnvSwitcher.ts

@@ -1,3 +0,0 @@
-import useShowEnvSwitcher from "ce/hooks/useShowEnvSwitcher";
-
-export default useShowEnvSwitcher;

app/client/src/pages/AppViewer/index.tsx

@@ -52,24 +52,17 @@ import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 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;
   headerHeight: number;
   $contain: string;
-  showBottomBar: boolean;
 }>`
   display: flex;
   flex-direction: row;
   align-items: stretch;
   justify-content: flex-start;
-  height: calc(
+  height: calc(100vh - ${({ headerHeight }) => headerHeight}px);
-    100vh -
-      ${(props) => (props.showBottomBar ? props.theme.bottomBarHeight : "0px")} -
-      ${({ headerHeight }) => headerHeight}px
-  );
   --view-mode-header-height: ${({ headerHeight }) => headerHeight}px;
   contain: ${({ $contain }) => $contain};
 `;
@@ -128,7 +121,6 @@ function AppViewer(props: Props) {
   const focusRef = useWidgetFocus();
   const isAutoLayout = useSelector(getIsAutoLayout);
 
-  const showBottomBar = useShowEnvSwitcher({ viewMode: true });
   /**
    * initializes the widgets factory and registers all widgets
    */
@@ -229,16 +221,10 @@ function AppViewer(props: Props) {
             hasPages={pages.length > 1}
             headerHeight={headerHeight}
             ref={focusRef}
-            showBottomBar={!!showBottomBar}
           >
             {isInitialized && <AppViewerPageContainer />}
           </AppViewerBody>
-          {showBottomBar && <BottomBar viewMode />}
+          <div className={"fixed hidden right-8 z-3 md:flex bottom-4"}>
-          <div
-            className={`fixed hidden right-8 z-3 md:flex ${
-              showBottomBar ? "bottom-12" : "bottom-4"
-            }`}
-          >
             {!hideWatermark && (
               <a
                 className="hover:no-underline"

app/client/src/pages/Editor/IDE/index.tsx

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

app/client/src/pages/Editor/commons/EditorWrapperContainer.tsx

@@ -3,29 +3,20 @@ import styled from "styled-components";
 
 interface EditorWrapperContainerProps {
   children: React.ReactNode;
-  hasBottomBar?: boolean;
 }
 
-const Wrapper = styled.div<{ hasBottomBar?: boolean }>`
+const Wrapper = styled.div`
   display: flex;
   height: calc(
     100vh - ${(props) => props.theme.smallHeaderHeight} -
-      ${(props) => (props.hasBottomBar ? props.theme.bottomBarHeight : "0px")}
+      ${(props) => props.theme.bottomBarHeight}
   );
   background-color: ${(props) => props.theme.appBackground};
 `;
 
-function EditorWrapperContainer({
+function EditorWrapperContainer({ children }: EditorWrapperContainerProps) {
-  children,
-  hasBottomBar = true,
-}: EditorWrapperContainerProps) {
   return (
-    <Wrapper
+    <Wrapper className="relative w-full overflow-x-hidden">{children}</Wrapper>
-      className="relative w-full overflow-x-hidden"
-      hasBottomBar={hasBottomBar}
-    >
-      {children}
-    </Wrapper>
   );
 }