From a34e0e9867c73bacd36d109b83d8c5ace5c7e71f Mon Sep 17 00:00:00 2001 From: Rudraprasad Das Date: Wed, 3 Apr 2024 15:50:58 +0530 Subject: [PATCH] revert: multi env switcher view mode changes (#32360) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Reverts changes for multienv switcher on view mode ## Automation /ok-to-test tags="@tag.MultiEnv" ### :mag: Cypress test results > [!IMPORTANT] > Workflow run: > Commit: `973e392a00cc68e0dbf1e99e06ca2b8b1ebc0474` > Cypress dashboard url: Click here! > All cypress tests have passed 🎉🎉🎉 ## 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. --- .../src/ce/hooks/useShowEnvSwitcher.test.tsx | 316 ------------------ app/client/src/ce/hooks/useShowEnvSwitcher.ts | 50 --- app/client/src/components/BottomBar/index.tsx | 20 +- app/client/src/ee/hooks/useShowEnvSwitcher.ts | 3 - app/client/src/pages/AppViewer/index.tsx | 18 +- app/client/src/pages/Editor/IDE/index.tsx | 9 +- .../Editor/commons/EditorWrapperContainer.tsx | 17 +- 7 files changed, 15 insertions(+), 418 deletions(-) delete mode 100644 app/client/src/ce/hooks/useShowEnvSwitcher.test.tsx delete mode 100644 app/client/src/ce/hooks/useShowEnvSwitcher.ts delete mode 100644 app/client/src/ee/hooks/useShowEnvSwitcher.ts diff --git a/app/client/src/ce/hooks/useShowEnvSwitcher.test.tsx b/app/client/src/ce/hooks/useShowEnvSwitcher.test.tsx deleted file mode 100644 index 56283adcd20..00000000000 --- a/app/client/src/ce/hooks/useShowEnvSwitcher.test.tsx +++ /dev/null @@ -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
; -}; - -const renderMockElement = ({ - store, - viewMode, -}: { - store: any; - viewMode: boolean; -}) => { - return render( - - - , - ); -}; - -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); - }); -}); diff --git a/app/client/src/ce/hooks/useShowEnvSwitcher.ts b/app/client/src/ce/hooks/useShowEnvSwitcher.ts deleted file mode 100644 index cc3fa5669f2..00000000000 --- a/app/client/src/ce/hooks/useShowEnvSwitcher.ts +++ /dev/null @@ -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; diff --git a/app/client/src/components/BottomBar/index.tsx b/app/client/src/components/BottomBar/index.tsx index b80fe7dfa15..2e90f0abfa1 100644 --- a/app/client/src/components/BottomBar/index.tsx +++ b/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 { - getCurrentApplicationId, - previewModeSelector, -} from "selectors/editorSelectors"; +import { getCurrentApplicationId } 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 { - viewMode?: boolean; -} - -export default function BottomBar({ viewMode = false }: BottomBarProps) { - const isPreviewMode = useSelector(previewModeSelector); - const showEnvSwitcher = useShowEnvSwitcher({ viewMode }); +export default function BottomBar({ viewMode }: { viewMode: boolean }) { const appId = useSelector(getCurrentApplicationId) || ""; const dispatch = useDispatch(); @@ -33,7 +23,7 @@ export default function BottomBar({ viewMode = false }: BottomBarProps) { return ( - {showEnvSwitcher && ( + {!viewMode && ( )} - {!viewMode && !isPreviewMode && } + {!viewMode && } - {!viewMode && !isPreviewMode && ( + {!viewMode && (