From 1f25adccd7e24f74806883319bfa9bb2badebeac Mon Sep 17 00:00:00 2001
From: Valera Melnikov <valera@appsmith.com>
Date: Thu, 7 Nov 2024 15:19:23 +0300
Subject: [PATCH] chore: remove padding for anvil embed apps (#37173)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description
I removed the styles from the DSL and changed the layout type for main
container to `LAYOUT_COLUMN`.

## Automation

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

### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/11720581716>
> Commit: 4ccd8772d1e4f11e1638213787b646932301762c
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11720581716&attempt=2"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Thu, 07 Nov 2024 11:30:39 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


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

- **New Features**
- Introduced the `MainCanvasWrapper` component for dynamic styling based
on URL parameters.
	- Added a new rendering behavior for the `LayoutColumn` component.

- **Improvements**
- Updated highlight derivation and layout type in the `LayoutColumn`
component.
	- Simplified layout structure in the `anvilDSLTransformer` function.
- Adjusted layout properties for better alignment and spacing in the
`LayoutColumn` component.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../components/LayoutColumn.tsx               | 19 +++++++++++++++----
 .../components/MainCanvasWrapper.tsx          | 14 ++++++++++++++
 .../anvil/utils/AnvilDSLTransformer.ts        |  8 +-------
 3 files changed, 30 insertions(+), 11 deletions(-)
 create mode 100644 app/client/src/layoutSystems/anvil/layoutComponents/components/MainCanvasWrapper.tsx

diff --git a/app/client/src/layoutSystems/anvil/layoutComponents/components/LayoutColumn.tsx b/app/client/src/layoutSystems/anvil/layoutComponents/components/LayoutColumn.tsx
index 6721a8c022..efe8354788 100644
--- a/app/client/src/layoutSystems/anvil/layoutComponents/components/LayoutColumn.tsx
+++ b/app/client/src/layoutSystems/anvil/layoutComponents/components/LayoutColumn.tsx
@@ -1,3 +1,5 @@
+import React from "react";
+import { deriveAlignedColumnHighlights } from "../../utils/layouts/highlights/alignedColumnHighlights";
 import BaseLayoutComponent from "../BaseLayoutComponent";
 import {
   type DeriveHighlightsFn,
@@ -5,12 +7,12 @@ import {
   type LayoutProps,
 } from "layoutSystems/anvil/utils/anvilTypes";
 import type { FlexLayoutProps } from "./FlexLayout";
-import { deriveColumnHighlights } from "layoutSystems/anvil/utils/layouts/highlights/columnHighlights";
+import { MainCanvasWrapper } from "./MainCanvasWrapper";
 
 class LayoutColumn extends BaseLayoutComponent {
   static type: LayoutComponentTypes = LayoutComponentTypes.LAYOUT_COLUMN;
 
-  static deriveHighlights: DeriveHighlightsFn = deriveColumnHighlights;
+  static deriveHighlights: DeriveHighlightsFn = deriveAlignedColumnHighlights;
 
   static getChildTemplate(props: LayoutProps): LayoutProps | null {
     if (props.childTemplate || props.childTemplate === null)
@@ -19,7 +21,7 @@ class LayoutColumn extends BaseLayoutComponent {
     return {
       insertChild: true,
       layoutId: "",
-      layoutType: LayoutComponentTypes.WIDGET_ROW,
+      layoutType: LayoutComponentTypes.ALIGNED_WIDGET_ROW,
       layout: [],
     };
   }
@@ -27,10 +29,19 @@ class LayoutColumn extends BaseLayoutComponent {
   getFlexLayoutProps(): Omit<FlexLayoutProps, "children"> {
     return {
       ...super.getFlexLayoutProps(),
-      alignSelf: "stretch",
+      height: "100%",
+      gap: "spacing-4",
       direction: "column",
     };
   }
+
+  renderViewMode(): JSX.Element {
+    return (
+      <MainCanvasWrapper {...this.getFlexLayoutProps()}>
+        {super.renderChildren()}
+      </MainCanvasWrapper>
+    );
+  }
 }
 
 export default LayoutColumn;
diff --git a/app/client/src/layoutSystems/anvil/layoutComponents/components/MainCanvasWrapper.tsx b/app/client/src/layoutSystems/anvil/layoutComponents/components/MainCanvasWrapper.tsx
new file mode 100644
index 0000000000..c4a2c7b74d
--- /dev/null
+++ b/app/client/src/layoutSystems/anvil/layoutComponents/components/MainCanvasWrapper.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import { FlexLayout, type FlexLayoutProps } from "./FlexLayout";
+
+export const MainCanvasWrapper = (props: FlexLayoutProps) => {
+  const { search } = window.location;
+  const queryParams = new URLSearchParams(search);
+  const isEmbed = queryParams.get("embed") === "true";
+
+  return (
+    <FlexLayout {...props} padding={isEmbed ? "spacing-0" : "spacing-4"}>
+      {props.children}
+    </FlexLayout>
+  );
+};
diff --git a/app/client/src/layoutSystems/anvil/utils/AnvilDSLTransformer.ts b/app/client/src/layoutSystems/anvil/utils/AnvilDSLTransformer.ts
index c15c7393b8..b9131c7d83 100644
--- a/app/client/src/layoutSystems/anvil/utils/AnvilDSLTransformer.ts
+++ b/app/client/src/layoutSystems/anvil/utils/AnvilDSLTransformer.ts
@@ -18,14 +18,8 @@ export function anvilDSLTransformer(dsl: DSLWidget) {
     _dsl.layout = [
       {
         layoutId: generateReactKey(),
-        layoutType: LayoutComponentTypes.ALIGNED_LAYOUT_COLUMN,
+        layoutType: LayoutComponentTypes.LAYOUT_COLUMN,
         layout: [],
-        layoutStyle: {
-          border: "none",
-          height: "100%",
-          padding: "spacing-4",
-          gap: "spacing-4",
-        },
         isDropTarget: true,
         isPermanent: true,
         childTemplate: {