Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

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

Browse Source 
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 -->
This commit is contained in:
Rudraprasad Das 2024-04-03 15:50:58 +05:30 committed by GitHub
parent 909d01a873
commit 8a9f486b8a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 15 additions and 418 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

316
app/client/src/ce/hooks/useShowEnvSwitcher.test.tsx
View File

@ -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);
});
});

50
app/client/src/ce/hooks/useShowEnvSwitcher.ts
View File

@ -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;

20
app/client/src/components/BottomBar/index.tsx
View File

@ -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 (
<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

3
app/client/src/ee/hooks/useShowEnvSwitcher.ts
View File

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

18
app/client/src/pages/AppViewer/index.tsx
View File

@ -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(
100vh -
${(props) => (props.showBottomBar ? props.theme.bottomBarHeight : "0px")} -
${({ headerHeight }) => headerHeight}px
);
height: calc(100vh - ${({ 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 ${
showBottomBar ? "bottom-12" : "bottom-4"
}`}
>
<div className={"fixed hidden right-8 z-3 md:flex bottom-4"}>
{!hideWatermark && (
<a
className="hover:no-underline"

9
app/client/src/pages/Editor/IDE/index.tsx
View File

@ -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} />
</>
);
}

17
app/client/src/pages/Editor/commons/EditorWrapperContainer.tsx
View File

@ -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({
children,
hasBottomBar = true,
}: EditorWrapperContainerProps) {
function EditorWrapperContainer({ children }: EditorWrapperContainerProps) {
return (
<Wrapper
className="relative w-full overflow-x-hidden"
hasBottomBar={hasBottomBar}
>
{children}
</Wrapper>
<Wrapper className="relative w-full overflow-x-hidden">{children}</Wrapper>
);
}