chore: Rename and cleanup of editor components (#26944)
## Description This PR is aimed at Renaming and cleanup of editor components. The changes include, - Rename Editor components to reflect more of it's function as an editor component - Rename all references of the container to wrapper so as to avoid confusion with Actual containers and canvases - Pass down few instances of selected properties to children instead of reselecting the same in the children - Remove all instances of `isAutolayout`, instead use `useLayoutSystemFeatures` to check if the particular feature is enabled in the particular layout type. P.S. please feel free to suggest better names that define the function of the components. #### PR fixes following issue(s) Fixes #26571 #### Type of change - Chore (housekeeping or task changes that don't impact user perception) #### Test Plan > Add Testsmith test cases links that relate to this PR > > #### Issues raised during DP testing > Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR) > > > ## Checklist: #### Dev activity - [ ] My code follows the style guidelines of this project - [ ] I have performed a self-review of my own code - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [ ] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag #### QA activity: - [ ] [Speedbreak features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-) - [ ] Test plan has been peer reviewed by project stakeholders and other QA members - [ ] Manually tested functionality on DP - [ ] We had an implementation alignment call with stakeholders post QA Round 2 - [ ] Cypress test cases have been added and approved by SDET/manual QA - [ ] Added `Test Plan Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed --------- Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com>
This commit is contained in:
rahulramesha
GitHub
parent
85dfcfff17
commit
0fd3345163
12
CODEOWNERS
12
CODEOWNERS
|
|
@ -63,15 +63,8 @@ app/client/src/actions/autoLayoutActions.ts @appsmithorg/ui-builders
|
|||
app/client/src/actions/canvasSelectionActions.ts @appsmithorg/ui-builders
|
||||
app/client/src/actions/reflowActions.ts @appsmithorg/ui-builders
|
||||
app/client/src/actions/widgetSelectionActions.ts @appsmithorg/ui-builders
|
||||
app/client/src/components/autoHeight/* @appsmithorg/ui-builders
|
||||
app/client/src/components/autoHeightOverlay/* @appsmithorg/ui-builders
|
||||
app/client/src/components/designSystems/appsmith/PositionedContainer.tsx @appsmithorg/ui-builders
|
||||
app/client/src/components/editorComponents/DraggableComponent.tsx @appsmithorg/ui-builders
|
||||
app/client/src/components/editorComponents/ResizableComponent.tsx @appsmithorg/ui-builders
|
||||
app/client/src/components/editorComponents/ResizableUtils.ts @appsmithorg/ui-builders
|
||||
app/client/src/components/editorComponents/ResizeStyledComponents.tsx @appsmithorg/ui-builders
|
||||
app/client/src/components/editorComponents/WidgetNameComponent/* @appsmithorg/ui-builders
|
||||
app/client/src/components/propertyControls/* @appsmithorg/ui-builders
|
||||
app/client/src/layoutSystems/* @appsmithorg/ui-builders
|
||||
app/client/src/normalizers/CanvasWidgetsNormalizer.tsx @appsmithorg/ui-builders
|
||||
app/client/src/pages/Editor/Canvas.tsx @appsmithorg/ui-builders
|
||||
app/client/src/pages/Editor/CanvasLayoutConversion/* @appsmithorg/ui-builders
|
||||
|
|
@ -102,7 +95,6 @@ app/client/src/selectors/canvasSelectors.ts @appsmithorg/ui-builders
|
|||
app/client/src/selectors/widgetSelectors.ts @appsmithorg/ui-builders
|
||||
app/client/src/utils/DSLConversions/* @appsmithorg/ui-builders
|
||||
app/client/src/utils/autoHeight/* @appsmithorg/ui-builders
|
||||
app/client/src/utils/autoLayout/* @appsmithorg/ui-builders
|
||||
app/client/src/utils/hooks/autoHeightUIHooks.ts @appsmithorg/ui-builders
|
||||
app/client/src/utils/hooks/useAllowEditorDragToSelect.ts @appsmithorg/ui-builders
|
||||
app/client/src/utils/hooks/useClickToSelectWidget.tsx @appsmithorg/ui-builders
|
||||
|
|
@ -111,7 +103,7 @@ app/client/src/utils/hooks/usePositionedContainerZIndex.ts @appsmithorg/ui-build
|
|||
app/client/src/utils/hooks/useReflow.ts @appsmithorg/ui-builders
|
||||
app/client/src/utils/hooks/useWidgetSelection.ts @appsmithorg/ui-builders
|
||||
app/client/src/widgets/BaseWidget.tsx @appsmithorg/ui-builders
|
||||
app/client/src/widgets/CanvasResizer.tsx @appsmithorg/ui-builders
|
||||
app/client/src/widgets/BaseWidgetHOC/* @appsmithorg/ui-builders
|
||||
app/client/src/widgets/CanvasWidget.tsx @appsmithorg/ui-builders
|
||||
app/client/src/widgets/ContainerWidget/* @appsmithorg/ui-builders
|
||||
app/client/src/widgets/MetaHOC.tsx @appsmithorg/ui-builders
|
||||
|
|
|
|||
|
|
@ -1,13 +1,7 @@
|
|||
import { layoutConfigurations } from "constants/WidgetConstants";
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer";
|
||||
import {
|
||||
getCurrentApplicationLayout,
|
||||
getCurrentAppPositioningType,
|
||||
getCurrentPageId,
|
||||
previewModeSelector,
|
||||
} from "selectors/editorSelectors";
|
||||
import { getCurrentApplicationLayout } from "selectors/editorSelectors";
|
||||
import { setAutoCanvasResizing } from "actions/autoLayoutActions";
|
||||
import styled from "styled-components";
|
||||
import { AUTOLAYOUT_RESIZER_WIDTH_BUFFER } from "utils/hooks/useDynamicAppLayout";
|
||||
|
|
@ -56,25 +50,32 @@ const AutoLayoutCanvasResizer = styled.div`
|
|||
}
|
||||
}
|
||||
`;
|
||||
export function CanvasResizer({
|
||||
|
||||
/**
|
||||
* OldName: CanvasResizer
|
||||
*/
|
||||
export function MainContainerResizer({
|
||||
currentPageId,
|
||||
enableMainCanvasResizer,
|
||||
heightWithTopMargin,
|
||||
isPageInitiated,
|
||||
isPreviewMode,
|
||||
shouldHaveTopMargin,
|
||||
}: {
|
||||
heightWithTopMargin: string;
|
||||
isPageInitiated: boolean;
|
||||
shouldHaveTopMargin: boolean;
|
||||
isPreviewMode: boolean;
|
||||
currentPageId: string;
|
||||
enableMainCanvasResizer: boolean;
|
||||
}) {
|
||||
const isPreviewMode = useSelector(previewModeSelector);
|
||||
const currentPageId = useSelector(getCurrentPageId);
|
||||
const appLayout = useSelector(getCurrentApplicationLayout);
|
||||
const appPositioningType = useSelector(getCurrentAppPositioningType);
|
||||
const ref = useRef(null);
|
||||
const dispatch = useDispatch();
|
||||
useEffect(() => {
|
||||
const ele: any = document.getElementById(CANVAS_VIEWPORT);
|
||||
|
||||
if (isPageInitiated && appPositioningType === AppPositioningTypes.AUTO) {
|
||||
if (isPageInitiated && enableMainCanvasResizer) {
|
||||
const buffer = isPreviewMode ? AUTOLAYOUT_RESIZER_WIDTH_BUFFER : 0;
|
||||
const fullWidthCSS = `calc(100% - ${AUTOLAYOUT_RESIZER_WIDTH_BUFFER}px)`;
|
||||
const wrapperElement: any = document.getElementById("widgets-editor");
|
||||
|
|
@ -161,10 +162,10 @@ export function CanvasResizer({
|
|||
appLayout,
|
||||
isPreviewMode,
|
||||
currentPageId,
|
||||
appPositioningType,
|
||||
enableMainCanvasResizer,
|
||||
isPageInitiated,
|
||||
]);
|
||||
return appPositioningType === AppPositioningTypes.AUTO ? (
|
||||
return enableMainCanvasResizer ? (
|
||||
<AutoLayoutCanvasResizer
|
||||
className="resizer-right"
|
||||
draggable
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
import { useSelector } from "react-redux";
|
||||
import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer";
|
||||
import { getCurrentAppPositioningType } from "selectors/editorSelectors";
|
||||
|
||||
export enum LayoutSystemFeatures {
|
||||
ENABLE_MAIN_CONTAINER_RESIZER = "ENABLE_MAIN_CONTAINER_RESIZER", //enable main canvas resizer
|
||||
ENABLE_FORKING_FROM_TEMPLATES = "ENABLE_FORKING_FROM_TEMPLATES", //enable forking pages from template directly inside apps
|
||||
ENABLE_CANVAS_LAYOUT_CONTROL = "ENABLE_CANVAS_LAYOUT_CONTROL", //enables layout control option in property pane
|
||||
}
|
||||
|
||||
const FIXED_LAYOUT_FEATURES = {
|
||||
[LayoutSystemFeatures.ENABLE_FORKING_FROM_TEMPLATES]: true,
|
||||
[LayoutSystemFeatures.ENABLE_CANVAS_LAYOUT_CONTROL]: true,
|
||||
} as Record<LayoutSystemFeatures, boolean>;
|
||||
|
||||
const AUTO_LAYOUT_FEATURES = {
|
||||
[LayoutSystemFeatures.ENABLE_MAIN_CONTAINER_RESIZER]: true,
|
||||
} as Record<LayoutSystemFeatures, boolean>;
|
||||
|
||||
/**
|
||||
* This Hook is mainly written to be used as a central control to enable
|
||||
* layout specific features based on the type of current layout.
|
||||
* This way the components using it need not be aware of what layout it is on
|
||||
*
|
||||
* @returns This hook returns a method, which can be used to get a boolean corresponding to the feature supplied as argument.
|
||||
* The boolean will indicate if the feature is enabled for the current layout
|
||||
*/
|
||||
export const useLayoutSystemFeatures = () => {
|
||||
const appPositioningType = useSelector(getCurrentAppPositioningType);
|
||||
|
||||
let currentFeatureSet = {} as Record<LayoutSystemFeatures, boolean>;
|
||||
|
||||
switch (appPositioningType) {
|
||||
case AppPositioningTypes.FIXED:
|
||||
currentFeatureSet = FIXED_LAYOUT_FEATURES;
|
||||
break;
|
||||
case AppPositioningTypes.AUTO:
|
||||
currentFeatureSet = AUTO_LAYOUT_FEATURES;
|
||||
break;
|
||||
}
|
||||
|
||||
/**
|
||||
* This method checks if the features requested in the method,
|
||||
* can be enabled for the given particular layout type
|
||||
*/
|
||||
return (checkFeaturesArray: LayoutSystemFeatures[]) => {
|
||||
const featuresArray: boolean[] = [];
|
||||
|
||||
for (const checkFeature of checkFeaturesArray) {
|
||||
featuresArray.push(!!currentFeatureSet[checkFeature]);
|
||||
}
|
||||
|
||||
return featuresArray;
|
||||
};
|
||||
};
|
||||
|
|
@ -1,6 +1,9 @@
|
|||
import styled from "styled-components";
|
||||
|
||||
export const PageViewContainer = styled.div<{
|
||||
/**
|
||||
* OldName: PageViewContainer
|
||||
*/
|
||||
export const PageViewWrapper = styled.div<{
|
||||
hasPinnedSidebar: boolean;
|
||||
sidebarWidth: number;
|
||||
isPreviewMode?: boolean;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import {
|
|||
getAppMode,
|
||||
} from "@appsmith/selectors/applicationSelectors";
|
||||
import { NAVIGATION_SETTINGS } from "constants/AppConstants";
|
||||
import { PageView, PageViewContainer } from "./AppPage.styled";
|
||||
import { PageView, PageViewWrapper } from "./AppPage.styled";
|
||||
import { useIsMobileDevice } from "utils/hooks/useDeviceDetect";
|
||||
import { APP_MODE } from "entities/App";
|
||||
import { useLocation } from "react-router";
|
||||
|
|
@ -50,7 +50,7 @@ export function AppPage(props: AppPageProps) {
|
|||
}, [props.pageId, props.pageName]);
|
||||
|
||||
return (
|
||||
<PageViewContainer
|
||||
<PageViewWrapper
|
||||
hasPinnedSidebar={
|
||||
currentApplicationDetails?.applicationDetail?.navigationSetting
|
||||
?.orientation === NAVIGATION_SETTINGS.ORIENTATION.SIDE &&
|
||||
|
|
@ -65,7 +65,7 @@ export function AppPage(props: AppPageProps) {
|
|||
{props.widgetsStructure.widgetId &&
|
||||
WidgetFactory.createWidget(props.widgetsStructure, RenderModes.PAGE)}
|
||||
</PageView>
|
||||
</PageViewContainer>
|
||||
</PageViewWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -22,17 +22,17 @@ interface CanvasProps {
|
|||
widgetsStructure: CanvasWidgetStructure;
|
||||
pageId: string;
|
||||
canvasWidth: number;
|
||||
isAutoLayout?: boolean;
|
||||
enableMainCanvasResizer?: boolean;
|
||||
}
|
||||
|
||||
const Container = styled.section<{
|
||||
const Wrapper = styled.section<{
|
||||
background: string;
|
||||
width: number;
|
||||
$isAutoLayout: boolean;
|
||||
$enableMainCanvasResizer: boolean;
|
||||
}>`
|
||||
background: ${({ background }) => background};
|
||||
width: ${({ $isAutoLayout, width }) =>
|
||||
$isAutoLayout ? `100%` : `${width}px`};
|
||||
width: ${({ $enableMainCanvasResizer, width }) =>
|
||||
$enableMainCanvasResizer ? `100%` : `${width}px`};
|
||||
`;
|
||||
const Canvas = (props: CanvasProps) => {
|
||||
const { canvasWidth } = props;
|
||||
|
|
@ -68,13 +68,15 @@ const Canvas = (props: CanvasProps) => {
|
|||
|
||||
const focusRef = useWidgetFocus();
|
||||
|
||||
const marginHorizontalClass = props.isAutoLayout ? `mx-0` : `mx-auto`;
|
||||
const paddingBottomClass = props.isAutoLayout ? "" : "pb-52";
|
||||
const marginHorizontalClass = props.enableMainCanvasResizer
|
||||
? `mx-0`
|
||||
: `mx-auto`;
|
||||
const paddingBottomClass = props.enableMainCanvasResizer ? "" : "pb-52";
|
||||
try {
|
||||
return (
|
||||
<WDSThemeProvider theme={theme}>
|
||||
<Container
|
||||
$isAutoLayout={!!props.isAutoLayout}
|
||||
<Wrapper
|
||||
$enableMainCanvasResizer={!!props.enableMainCanvasResizer}
|
||||
background={backgroundForCanvas}
|
||||
className={`relative t--canvas-artboard ${paddingBottomClass} transition-all duration-400 ${marginHorizontalClass} ${getViewportClassName(
|
||||
canvasWidth,
|
||||
|
|
@ -89,7 +91,7 @@ const Canvas = (props: CanvasProps) => {
|
|||
props.widgetsStructure,
|
||||
RenderModes.CANVAS,
|
||||
)}
|
||||
</Container>
|
||||
</Wrapper>
|
||||
</WDSThemeProvider>
|
||||
);
|
||||
} catch (error) {
|
||||
|
|
|
|||
|
|
@ -1,16 +1,19 @@
|
|||
import * as Sentry from "@sentry/react";
|
||||
|
||||
import React from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { useDispatch } from "react-redux";
|
||||
|
||||
import { Button, Tooltip } from "design-system";
|
||||
|
||||
import { openAppSettingsPaneAction } from "actions/appSettingsPaneActions";
|
||||
import ConversionButton from "../CanvasLayoutConversion/ConversionButton";
|
||||
import { MainContainerLayoutControl } from "../MainContainerLayoutControl";
|
||||
import { getIsAutoLayout } from "selectors/editorSelectors";
|
||||
import styled from "styled-components";
|
||||
import AnalyticsUtil from "utils/AnalyticsUtil";
|
||||
import {
|
||||
LayoutSystemFeatures,
|
||||
useLayoutSystemFeatures,
|
||||
} from "../../../layoutSystems/common/useLayoutSystemFeatures";
|
||||
import { MainContainerWidthToggles } from "../MainContainerWidthToggles";
|
||||
|
||||
const Title = styled.p`
|
||||
color: var(--ads-v2-color-fg);
|
||||
|
|
@ -25,7 +28,12 @@ export function CanvasPropertyPane() {
|
|||
AnalyticsUtil.logEvent("APP_SETTINGS_BUTTON_CLICK");
|
||||
dispatch(openAppSettingsPaneAction());
|
||||
};
|
||||
const isAutoLayout = useSelector(getIsAutoLayout);
|
||||
|
||||
const checkLayoutSystemFeatures = useLayoutSystemFeatures();
|
||||
const [enableLayoutControl] = checkLayoutSystemFeatures([
|
||||
LayoutSystemFeatures.ENABLE_CANVAS_LAYOUT_CONTROL,
|
||||
]);
|
||||
|
||||
return (
|
||||
<div className="relative ">
|
||||
<MainHeading className="px-4 py-3 text-sm font-medium">
|
||||
|
|
@ -34,10 +42,10 @@ export function CanvasPropertyPane() {
|
|||
|
||||
<div className="mt-3 space-y-6">
|
||||
<div className="px-4 space-y-2">
|
||||
{!isAutoLayout && (
|
||||
{enableLayoutControl && (
|
||||
<>
|
||||
<Title className="text-sm">Canvas size</Title>
|
||||
<MainContainerLayoutControl />
|
||||
<MainContainerWidthToggles />
|
||||
</>
|
||||
)}
|
||||
<ConversionButton />
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import styled from "styled-components";
|
|||
import history from "utils/history";
|
||||
import { generateTemplateFormURL } from "RouteBuilder";
|
||||
import { useParams } from "react-router";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { useDispatch } from "react-redux";
|
||||
import type { ExplorerURLParams } from "@appsmith/pages/Editor/Explorer/helpers";
|
||||
import { showTemplatesModal } from "actions/templateActions";
|
||||
import {
|
||||
|
|
@ -25,9 +25,12 @@ import {
|
|||
Tooltip,
|
||||
Text,
|
||||
} from "design-system";
|
||||
import { getIsAutoLayout } from "selectors/editorSelectors";
|
||||
import { isAirgapped } from "@appsmith/utils/airgapHelpers";
|
||||
import { TOOLTIP_HOVER_ON_DELAY_IN_S } from "constants/AppConstants";
|
||||
import {
|
||||
LayoutSystemFeatures,
|
||||
useLayoutSystemFeatures,
|
||||
} from "layoutSystems/common/useLayoutSystemFeatures";
|
||||
|
||||
const Wrapper = styled.div`
|
||||
.title {
|
||||
|
|
@ -53,9 +56,13 @@ function AddPageContextMenu({
|
|||
const [show, setShow] = useState(openMenu);
|
||||
const dispatch = useDispatch();
|
||||
const { pageId } = useParams<ExplorerURLParams>();
|
||||
const isAutoLayout = useSelector(getIsAutoLayout);
|
||||
const isAirgappedInstance = isAirgapped();
|
||||
|
||||
const checkLayoutSystemFeatures = useLayoutSystemFeatures();
|
||||
const [enableForkingFromTemplates] = checkLayoutSystemFeatures([
|
||||
LayoutSystemFeatures.ENABLE_FORKING_FROM_TEMPLATES,
|
||||
]);
|
||||
|
||||
const ContextMenuItems = useMemo(() => {
|
||||
const items = [
|
||||
{
|
||||
|
|
@ -74,7 +81,7 @@ function AddPageContextMenu({
|
|||
},
|
||||
];
|
||||
|
||||
if (!isAutoLayout && !isAirgappedInstance) {
|
||||
if (enableForkingFromTemplates && !isAirgappedInstance) {
|
||||
items.push({
|
||||
title: createMessage(ADD_PAGE_FROM_TEMPLATE),
|
||||
icon: "layout-2-line",
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ import {
|
|||
import { MockCanvas } from "test/testMockedWidgets";
|
||||
import { act, fireEvent, render, waitFor } from "test/testUtils";
|
||||
import * as widgetRenderUtils from "utils/widgetRenderUtils";
|
||||
import MainContainer from "../MainContainer";
|
||||
import WidgetsEditorWrapper from "../WidgetsEditorWrapper";
|
||||
import GlobalHotKeys from "./GlobalHotKeys";
|
||||
import * as widgetSelectionsActions from "actions/widgetSelectionActions";
|
||||
import { SelectionRequestType } from "sagas/WidgetSelectUtils";
|
||||
|
|
@ -55,7 +55,7 @@ describe("Canvas Hot Keys", () => {
|
|||
|
||||
function UpdatedEditor({ dsl }: any) {
|
||||
useMockDsl(dsl);
|
||||
return <MainContainer />;
|
||||
return <WidgetsEditorWrapper />;
|
||||
}
|
||||
|
||||
// These need to be at the top to avoid imports not being mocked. ideally should be in setup.ts but will override for all other tests
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import { Provider } from "react-redux";
|
|||
|
||||
import { lightTheme } from "selectors/themeSelectors";
|
||||
import store from "store";
|
||||
import { MainContainerLayoutControl } from "./MainContainerLayoutControl";
|
||||
import { MainContainerWidthToggles } from "./MainContainerWidthToggles";
|
||||
|
||||
function navigateWithArrowKeys(key: string, noOfPresses: number) {
|
||||
for (let i = 0; i < noOfPresses; i++) {
|
||||
|
|
@ -15,11 +15,11 @@ function navigateWithArrowKeys(key: string, noOfPresses: number) {
|
|||
}
|
||||
}
|
||||
|
||||
describe("<MainContainerLayoutControl />", () => {
|
||||
describe("<MainContainerWidthToggles />", () => {
|
||||
const getTestComponent = () => (
|
||||
<ThemeProvider theme={lightTheme}>
|
||||
<Provider store={store}>
|
||||
<MainContainerLayoutControl />
|
||||
<MainContainerWidthToggles />
|
||||
</Provider>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
|
@ -73,7 +73,10 @@ const options = AppsmithLayouts.map((layout, index) => ({
|
|||
value: layout.type,
|
||||
}));
|
||||
|
||||
export function MainContainerLayoutControl() {
|
||||
/**
|
||||
* OldName: MainContainerLayoutControl
|
||||
*/
|
||||
export function MainContainerWidthToggles() {
|
||||
const dispatch = useDispatch();
|
||||
const appId = useSelector(getCurrentApplicationId);
|
||||
const appLayout = useSelector(getCurrentApplicationLayout);
|
||||
|
|
@ -3,8 +3,6 @@ import styled from "styled-components";
|
|||
import { Text, TextType } from "design-system-old";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import {
|
||||
getIsAutoLayout,
|
||||
previewModeSelector,
|
||||
selectURLSlugs,
|
||||
showCanvasTopSectionSelector,
|
||||
} from "selectors/editorSelectors";
|
||||
|
|
@ -24,6 +22,10 @@ import {
|
|||
import { deleteCanvasCardsState } from "actions/editorActions";
|
||||
import { isAirgapped } from "@appsmith/utils/airgapHelpers";
|
||||
import { Icon } from "design-system";
|
||||
import {
|
||||
LayoutSystemFeatures,
|
||||
useLayoutSystemFeatures,
|
||||
} from "../../../layoutSystems/common/useLayoutSystemFeatures";
|
||||
|
||||
const Wrapper = styled.div`
|
||||
margin: ${(props) =>
|
||||
|
|
@ -76,19 +78,37 @@ const goToGenPageForm = ({ pageId }: routeId): void => {
|
|||
history.push(generateTemplateFormURL({ pageId }));
|
||||
};
|
||||
|
||||
function CanvasTopSection() {
|
||||
type EmptyCanvasPromptsProps = {
|
||||
isPreviewMode: boolean;
|
||||
};
|
||||
|
||||
/**
|
||||
* OldName: CanvasTopSection
|
||||
*/
|
||||
/**
|
||||
* This Component encompasses the prompts for empty canvas
|
||||
* prompts like generate crud app or import from template
|
||||
* @param props Object that contains
|
||||
* @prop isPreviewMode, boolean to indicate preview mode
|
||||
* @returns
|
||||
*/
|
||||
function EmptyCanvasPrompts(props: EmptyCanvasPromptsProps) {
|
||||
const dispatch = useDispatch();
|
||||
const showCanvasTopSection = useSelector(showCanvasTopSectionSelector);
|
||||
const inPreviewMode = useSelector(previewModeSelector);
|
||||
const { isPreviewMode } = props;
|
||||
const { pageId } = useParams<ExplorerURLParams>();
|
||||
const { applicationSlug, pageSlug } = useSelector(selectURLSlugs);
|
||||
const isAutoLayout = useSelector(getIsAutoLayout);
|
||||
|
||||
const checkLayoutSystemFeatures = useLayoutSystemFeatures();
|
||||
const [enableForkingFromTemplates] = checkLayoutSystemFeatures([
|
||||
LayoutSystemFeatures.ENABLE_FORKING_FROM_TEMPLATES,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!showCanvasTopSection && !inPreviewMode) {
|
||||
if (!showCanvasTopSection && !isPreviewMode) {
|
||||
dispatch(deleteCanvasCardsState());
|
||||
}
|
||||
}, [showCanvasTopSection, inPreviewMode]);
|
||||
}, [showCanvasTopSection, isPreviewMode]);
|
||||
|
||||
if (!showCanvasTopSection) return null;
|
||||
|
||||
|
|
@ -110,7 +130,7 @@ function CanvasTopSection() {
|
|||
|
||||
return (
|
||||
<Wrapper data-testid="canvas-ctas">
|
||||
{!isAutoLayout && !isAirgappedInstance && (
|
||||
{enableForkingFromTemplates && !isAirgappedInstance && (
|
||||
<Card data-testid="start-from-template" onClick={showTemplatesModal}>
|
||||
<Icon name="layout-2-line" size="lg" />
|
||||
<Content>
|
||||
|
|
@ -142,4 +162,4 @@ function CanvasTopSection() {
|
|||
);
|
||||
}
|
||||
|
||||
export default CanvasTopSection;
|
||||
export default EmptyCanvasPrompts;
|
||||
|
|
@ -4,7 +4,6 @@ import { useSelector } from "react-redux";
|
|||
|
||||
import {
|
||||
getCanvasWidth,
|
||||
getCurrentPageId,
|
||||
getIsFetchingPage,
|
||||
getViewModePageList,
|
||||
showCanvasTopSectionSelector,
|
||||
|
|
@ -24,7 +23,6 @@ import {
|
|||
getAppThemeIsChanging,
|
||||
getSelectedAppTheme,
|
||||
} from "selectors/appThemingSelectors";
|
||||
import { getIsAutoLayout } from "selectors/canvasSelectors";
|
||||
import { getCurrentThemeDetails } from "selectors/themeSelectors";
|
||||
import { getCanvasWidgetsStructure } from "@appsmith/selectors/entitiesSelector";
|
||||
import {
|
||||
|
|
@ -33,27 +31,32 @@ import {
|
|||
} from "utils/hooks/useDynamicAppLayout";
|
||||
import Canvas from "../Canvas";
|
||||
import type { AppState } from "@appsmith/reducers";
|
||||
import { CanvasResizer } from "layoutSystems/autolayout/canvasResizer/CanvasResizer";
|
||||
import { MainContainerResizer } from "layoutSystems/autolayout/MainContainerResizer/MainContainerResizer";
|
||||
import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
|
||||
import { getIsAnonymousDataPopupVisible } from "selectors/onboardingSelectors";
|
||||
import {
|
||||
LayoutSystemFeatures,
|
||||
useLayoutSystemFeatures,
|
||||
} from "../../../layoutSystems/common/useLayoutSystemFeatures";
|
||||
import { CANVAS_VIEWPORT } from "constants/componentClassNameConstants";
|
||||
|
||||
type CanvasContainerProps = {
|
||||
type MainCanvasWrapperProps = {
|
||||
isPreviewMode: boolean;
|
||||
shouldShowSnapShotBanner: boolean;
|
||||
navigationHeight?: number;
|
||||
isAppSettingsPaneWithNavigationTabOpen?: boolean;
|
||||
currentPageId: string;
|
||||
};
|
||||
|
||||
const Container = styled.section<{
|
||||
$isAutoLayout: boolean;
|
||||
const Wrapper = styled.section<{
|
||||
$enableMainCanvasResizer: boolean;
|
||||
background: string;
|
||||
isPreviewingNavigation?: boolean;
|
||||
isAppSettingsPaneWithNavigationTabOpen?: boolean;
|
||||
navigationHeight?: number;
|
||||
}>`
|
||||
width: ${({ $isAutoLayout }) =>
|
||||
$isAutoLayout
|
||||
width: ${({ $enableMainCanvasResizer }) =>
|
||||
$enableMainCanvasResizer
|
||||
? `calc(100% - ${AUTOLAYOUT_RESIZER_WIDTH_BUFFER}px)`
|
||||
: `100%`};
|
||||
position: relative;
|
||||
|
|
@ -100,15 +103,27 @@ const Container = styled.section<{
|
|||
}
|
||||
`;
|
||||
|
||||
function CanvasContainer(props: CanvasContainerProps) {
|
||||
/**
|
||||
* OldName: CanvasContainer
|
||||
*/
|
||||
/**
|
||||
* This Component encompasses/wraps the center section of the editor
|
||||
* That involves mainly the main container and main container resizer
|
||||
* @param props object that contains
|
||||
* @prop isPreviewMode, boolean to indicate preview mode
|
||||
* @prop shouldShowSnapShotBanner, boolean to indicate if snapshot is shown
|
||||
* @prop navigationHeight, height of navigation header in pixels
|
||||
* @prop isAppSettingsPaneWithNavigationTabOpen, boolean to indicate if app setting navigation ta is open
|
||||
* @prop currentPageId, current page id in string
|
||||
* @returns
|
||||
*/
|
||||
function MainContainerWrapper(props: MainCanvasWrapperProps) {
|
||||
const { isAppSettingsPaneWithNavigationTabOpen, navigationHeight } = props;
|
||||
const dispatch = useDispatch();
|
||||
const { isPreviewMode, shouldShowSnapShotBanner } = props;
|
||||
const { currentPageId, isPreviewMode, shouldShowSnapShotBanner } = props;
|
||||
|
||||
const currentPageId = useSelector(getCurrentPageId);
|
||||
const isFetchingPage = useSelector(getIsFetchingPage);
|
||||
const canvasWidth = useSelector(getCanvasWidth);
|
||||
const isAutoLayout = useSelector(getIsAutoLayout);
|
||||
const widgetsStructure = useSelector(getCanvasWidgetsStructure, equal);
|
||||
const pages = useSelector(getViewModePageList);
|
||||
const theme = useSelector(getCurrentThemeDetails);
|
||||
|
|
@ -125,6 +140,11 @@ function CanvasContainer(props: CanvasContainerProps) {
|
|||
const isPageInitializing = isFetchingPage || !isLayoutingInitialized;
|
||||
const isWDSV2Enabled = useFeatureFlag("ab_wds_enabled");
|
||||
|
||||
const checkLayoutSystemFeatures = useLayoutSystemFeatures();
|
||||
const [enableMainContainerResizer] = checkLayoutSystemFeatures([
|
||||
LayoutSystemFeatures.ENABLE_MAIN_CONTAINER_RESIZER,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
dispatch(forceOpenWidgetPanel(false));
|
||||
|
|
@ -151,7 +171,7 @@ function CanvasContainer(props: CanvasContainerProps) {
|
|||
node = (
|
||||
<Canvas
|
||||
canvasWidth={canvasWidth}
|
||||
isAutoLayout={isAutoLayout}
|
||||
enableMainCanvasResizer={enableMainContainerResizer}
|
||||
pageId={params.pageId}
|
||||
widgetsStructure={widgetsStructure}
|
||||
/>
|
||||
|
|
@ -182,8 +202,8 @@ function CanvasContainer(props: CanvasContainerProps) {
|
|||
const heightWithTopMargin = `calc(100vh - 2rem - ${topMargin} - ${smallHeaderHeight} - ${bottomBarHeight} - ${scrollBarHeight} - ${navigationHeight}px)`;
|
||||
return (
|
||||
<>
|
||||
<Container
|
||||
$isAutoLayout={isAutoLayout}
|
||||
<Wrapper
|
||||
$enableMainCanvasResizer={enableMainContainerResizer}
|
||||
background={
|
||||
isPreviewMode || isAppSettingsPaneWithNavigationTabOpen
|
||||
? isWDSV2Enabled
|
||||
|
|
@ -230,14 +250,17 @@ function CanvasContainer(props: CanvasContainerProps) {
|
|||
</div>
|
||||
)}
|
||||
{node}
|
||||
</Container>
|
||||
<CanvasResizer
|
||||
</Wrapper>
|
||||
<MainContainerResizer
|
||||
currentPageId={currentPageId}
|
||||
enableMainCanvasResizer={enableMainContainerResizer}
|
||||
heightWithTopMargin={heightWithTopMargin}
|
||||
isPageInitiated={!isPageInitializing && !!widgetsStructure}
|
||||
isPreviewMode={isPreviewMode}
|
||||
shouldHaveTopMargin={shouldHaveTopMargin}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default CanvasContainer;
|
||||
export default MainContainerWrapper;
|
||||
|
|
@ -4,7 +4,10 @@ import React, { useCallback } from "react";
|
|||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { getPropertyPaneWidth } from "selectors/propertyPaneSelectors";
|
||||
|
||||
function PropertyPaneContainer() {
|
||||
/**
|
||||
* OldName: PropertyPaneContainer
|
||||
*/
|
||||
function PropertyPaneWrapper() {
|
||||
const dispatch = useDispatch();
|
||||
const propertyPaneWidth = useSelector(getPropertyPaneWidth);
|
||||
|
||||
|
|
@ -33,4 +36,4 @@ function PropertyPaneContainer() {
|
|||
);
|
||||
}
|
||||
|
||||
export default PropertyPaneContainer;
|
||||
export default PropertyPaneWrapper;
|
||||
|
|
@ -27,17 +27,17 @@ import { useAllowEditorDragToSelect } from "utils/hooks/useAllowEditorDragToSele
|
|||
import { inGuidedTour } from "selectors/onboardingSelectors";
|
||||
import EditorContextProvider from "components/editorComponents/EditorContextProvider";
|
||||
import Guide from "../GuidedTour/Guide";
|
||||
import CanvasContainer from "./CanvasContainer";
|
||||
import CanvasTopSection from "./EmptyCanvasSection";
|
||||
import MainContainerWrapper from "./MainContainerWrapper";
|
||||
import EmptyCanvasPrompts from "./EmptyCanvasPrompts";
|
||||
import { useAutoHeightUIState } from "utils/hooks/autoHeightUIHooks";
|
||||
import { PageViewContainer } from "pages/AppViewer/AppPage.styled";
|
||||
import { PageViewWrapper } from "pages/AppViewer/AppPage.styled";
|
||||
import { NAVIGATION_SETTINGS } from "constants/AppConstants";
|
||||
import {
|
||||
getAppSettingsPaneContext,
|
||||
getIsAppSettingsPaneWithNavigationTabOpen,
|
||||
} from "selectors/appSettingsPaneSelectors";
|
||||
import { AppSettingsTabs } from "../AppSettingsPane/AppSettings";
|
||||
import PropertyPaneContainer from "./PropertyPaneContainer";
|
||||
import PropertyPaneWrapper from "./PropertyPaneWrapper";
|
||||
import SnapShotBannerCTA from "../CanvasLayoutConversion/SnapShotBannerCTA";
|
||||
import { APP_MODE } from "entities/App";
|
||||
import { getSelectedAppTheme } from "selectors/appThemingSelectors";
|
||||
|
|
@ -172,7 +172,9 @@ function WidgetsEditor() {
|
|||
isAppSettingsPaneWithNavigationTabOpen,
|
||||
})}
|
||||
>
|
||||
{!isAppSettingsPaneWithNavigationTabOpen && <CanvasTopSection />}
|
||||
{!isAppSettingsPaneWithNavigationTabOpen && (
|
||||
<EmptyCanvasPrompts isPreviewMode={isPreviewMode} />
|
||||
)}
|
||||
<AnonymousDataPopup />
|
||||
<div
|
||||
className="relative flex flex-row w-full overflow-hidden"
|
||||
|
|
@ -187,7 +189,7 @@ function WidgetsEditor() {
|
|||
>
|
||||
{showNavigation()}
|
||||
|
||||
<PageViewContainer
|
||||
<PageViewWrapper
|
||||
className={classNames({
|
||||
"relative flex flex-row w-full justify-center overflow-hidden":
|
||||
true,
|
||||
|
|
@ -210,7 +212,8 @@ function WidgetsEditor() {
|
|||
<SnapShotBannerCTA />
|
||||
</div>
|
||||
)}
|
||||
<CanvasContainer
|
||||
<MainContainerWrapper
|
||||
currentPageId={currentPageId}
|
||||
isAppSettingsPaneWithNavigationTabOpen={
|
||||
AppSettingsTabs.Navigation === appSettingsPaneContext?.type
|
||||
}
|
||||
|
|
@ -218,13 +221,13 @@ function WidgetsEditor() {
|
|||
navigationHeight={navigationHeight}
|
||||
shouldShowSnapShotBanner={shouldShowSnapShotBanner}
|
||||
/>
|
||||
</PageViewContainer>
|
||||
</PageViewWrapper>
|
||||
|
||||
<CrudInfoModal />
|
||||
</div>
|
||||
<Debugger />
|
||||
</div>
|
||||
<PropertyPaneContainer />
|
||||
<PropertyPaneWrapper />
|
||||
</div>
|
||||
</EditorContextProvider>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ import BottomBar from "components/BottomBar";
|
|||
|
||||
const SentryRoute = Sentry.withSentryRouting(Route);
|
||||
|
||||
const Container = styled.div`
|
||||
const Wrapper = styled.div`
|
||||
display: flex;
|
||||
height: calc(
|
||||
100vh - ${(props) => props.theme.smallHeaderHeight} -
|
||||
|
|
@ -30,7 +30,10 @@ const Container = styled.div`
|
|||
background-color: ${(props) => props.theme.appBackground};
|
||||
`;
|
||||
|
||||
function MainContainer() {
|
||||
/**
|
||||
* OldName: MainContainer
|
||||
*/
|
||||
function WidgetsEditorWrapper() {
|
||||
const dispatch = useDispatch();
|
||||
const sidebarWidth = useSelector(getExplorerWidth);
|
||||
const { path } = useRouteMatch();
|
||||
|
|
@ -57,7 +60,7 @@ function MainContainer() {
|
|||
|
||||
return (
|
||||
<>
|
||||
<Container className="relative w-full overflow-x-hidden">
|
||||
<Wrapper className="relative w-full overflow-x-hidden">
|
||||
<EntityExplorerSidebar
|
||||
onDragEnd={onLeftSidebarDragEnd}
|
||||
onWidthChange={onLeftSidebarWidthChange}
|
||||
|
|
@ -92,12 +95,12 @@ function MainContainer() {
|
|||
<SentryRoute component={EditorsRouter} />
|
||||
</Switch>
|
||||
</div>
|
||||
</Container>
|
||||
</Wrapper>
|
||||
<BottomBar viewMode={isPreviewMode} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
MainContainer.displayName = "MainContainer";
|
||||
WidgetsEditorWrapper.displayName = "WidgetsEditorWrapper";
|
||||
|
||||
export default MainContainer;
|
||||
export default WidgetsEditorWrapper;
|
||||
|
|
@ -5,7 +5,7 @@ import type { RouteComponentProps } from "react-router-dom";
|
|||
import { withRouter } from "react-router-dom";
|
||||
import type { BuilderRouteParams } from "constants/routes";
|
||||
import type { AppState } from "@appsmith/reducers";
|
||||
import MainContainer from "./MainContainer";
|
||||
import WidgetsEditorWrapper from "./WidgetsEditorWrapper";
|
||||
import {
|
||||
getCurrentApplicationId,
|
||||
getIsEditorInitialized,
|
||||
|
|
@ -159,7 +159,7 @@ class Editor extends Component<Props> {
|
|||
</title>
|
||||
</Helmet>
|
||||
<GlobalHotKeys>
|
||||
<MainContainer />
|
||||
<WidgetsEditorWrapper />
|
||||
<GitSyncModal />
|
||||
<EnvDeployInfoModal />
|
||||
<DisconnectGitModal />
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { APP_MODE } from "entities/App";
|
||||
import AppViewerPageContainer from "pages/AppViewer/AppViewerPageContainer";
|
||||
import Canvas from "pages/Editor/Canvas";
|
||||
import MainContainer from "pages/Editor/MainContainer";
|
||||
import WidgetsEditorWrapper from "pages/Editor/WidgetsEditorWrapper";
|
||||
import React from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import { getCanvasWidgetsStructure } from "@appsmith/selectors/entitiesSelector";
|
||||
|
|
@ -24,5 +24,5 @@ export function UpdateAppViewer({ dsl }: any) {
|
|||
}
|
||||
export function UpdatedEditor({ dsl }: any) {
|
||||
useMockDsl(dsl, APP_MODE.EDIT);
|
||||
return <MainContainer />;
|
||||
return <WidgetsEditorWrapper />;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user