PromucFlow_constructor/app/client/src/sagas/BuildingBlockSagas/tests/PasteBuildingBlockWidgetSaga.test.ts

156 lines
4.5 KiB
TypeScript
Raw Normal View History

fix: allow building blocks to be dropped inside containers (#33660) ## Description **Problem** Previously, the implementation of building blocks was limited in functionality: building blocks could not be placed into containers. This restriction constrained building blocks to be solely draggable items on the canvas, reducing their versatility and utility. **Solution** To address this limitation, we have improved the paste logic for building blocks. The updated logic now allows building blocks to be dropped into other containers. **Key changes include:** 1. Simplification of the `pastingIntoWidgetId` determination process. The paste logic previously had multiple conditions to determine this ID. 2. Direct passing of the parent widget ID into the `pasteBuildingBlockWidgetsSaga` function, streamlining the process and reducing complexity. These enhancements significantly increase the flexibility of building blocks, enabling more complex and nested designs. Fixes #33606 ## Automation /ok-to-test tags="@tag.Templates, @tag.Widget" ### :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/9249397667> > Commit: e1f72697bd1bc0fe827895a0f09228440f8be0a8 > Cypress dashboard url: <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9249397667&attempt=1" target="_blank">Click here!</a> <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No
2024-05-27 06:41:59 +00:00
import type {
AllEffect,
CallEffect,
PutEffect,
SelectEffect,
} from "redux-saga/effects";
import { call, select } from "redux-saga/effects";
import { pasteBuildingBlockWidgetsSaga } from "../BuildingBlockAdditionSagas";
fix: allow building blocks to be dropped inside containers (#33660) ## Description **Problem** Previously, the implementation of building blocks was limited in functionality: building blocks could not be placed into containers. This restriction constrained building blocks to be solely draggable items on the canvas, reducing their versatility and utility. **Solution** To address this limitation, we have improved the paste logic for building blocks. The updated logic now allows building blocks to be dropped into other containers. **Key changes include:** 1. Simplification of the `pastingIntoWidgetId` determination process. The paste logic previously had multiple conditions to determine this ID. 2. Direct passing of the parent widget ID into the `pasteBuildingBlockWidgetsSaga` function, streamlining the process and reducing complexity. These enhancements significantly increase the flexibility of building blocks, enabling more complex and nested designs. Fixes #33606 ## Automation /ok-to-test tags="@tag.Templates, @tag.Widget" ### :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/9249397667> > Commit: e1f72697bd1bc0fe827895a0f09228440f8be0a8 > Cypress dashboard url: <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9249397667&attempt=1" target="_blank">Click here!</a> <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No
2024-05-27 06:41:59 +00:00
import { getCopiedWidgets } from "utils/storage";
import type { FlexLayer } from "layoutSystems/autolayout/utils/types";
import { getWidgets } from "sagas/selectors";
import {
getCanvasWidth,
getIsAutoLayoutMobileBreakPoint,
} from "selectors/editorSelectors";
import { getNewPositions } from "sagas/PasteWidgetUtils";
import { executeWidgetBlueprintBeforeOperations } from "sagas/WidgetBlueprintSagas";
import { BlueprintOperationTypes } from "WidgetProvider/constants";
import { cloneDeep } from "lodash";
import {
copiedWidgets,
leftMostWidget,
topMostWidget,
} from "../pasteWidgetAddition.fixture";
fix: allow building blocks to be dropped inside containers (#33660) ## Description **Problem** Previously, the implementation of building blocks was limited in functionality: building blocks could not be placed into containers. This restriction constrained building blocks to be solely draggable items on the canvas, reducing their versatility and utility. **Solution** To address this limitation, we have improved the paste logic for building blocks. The updated logic now allows building blocks to be dropped into other containers. **Key changes include:** 1. Simplification of the `pastingIntoWidgetId` determination process. The paste logic previously had multiple conditions to determine this ID. 2. Direct passing of the parent widget ID into the `pasteBuildingBlockWidgetsSaga` function, streamlining the process and reducing complexity. These enhancements significantly increase the flexibility of building blocks, enabling more complex and nested designs. Fixes #33606 ## Automation /ok-to-test tags="@tag.Templates, @tag.Widget" ### :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/9249397667> > Commit: e1f72697bd1bc0fe827895a0f09228440f8be0a8 > Cypress dashboard url: <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9249397667&attempt=1" target="_blank">Click here!</a> <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No
2024-05-27 06:41:59 +00:00
import type { NewPastePositionVariables } from "sagas/WidgetOperationUtils";
// Mock data for testing
const gridPosition = { top: 50, left: 500 };
const parentWidgetId = "parentWidgetId";
const totalWidth = 31;
const flexLayers: FlexLayer[] = [];
type GeneratorType = Generator<
| CallEffect<NewPastePositionVariables>
| SelectEffect
| Promise<any>
| CallEffect<void>
| AllEffect<any>
| PutEffect<any>,
void,
unknown
>;
describe("pasteBuildingBlockWidgetsSaga", () => {
const copiedWidgetsResponse = { widgets: copiedWidgets, flexLayers };
fix: drop of bbs inside container causing reflow (#33947) ## Description Current way of dropping building blocks already knows the widget id where it is going to be pasted. `getNewPositionsBasedOnMousePositions` did not take that into account and used to recalculate the canvas and container widgets. - This led to reflow and BBs getting reflowed further down(along with its container) This PR adds a fix to that ensuring no extra calculation and subsequently no further reflow. Fixes #`Issue Number` _or_ Fixes `Issue URL` > [!WARNING] > _If no issue exists, please create an issue first, and check with the maintainers if the issue is valid._ ## Automation /ok-to-test tags="@tag.Widget, @tag.Templates, @tag.IDE" ### :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/9379360946> > Commit: ba9c447fc662d2c1386b4caadd6dc04355c60082 > Cypress dashboard url: <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9379360946&attempt=1" target="_blank">Click here!</a> <!-- 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 - **Bug Fixes** - Improved error handling when pasting building block widgets. - Enhanced logic for determining container widget when pasting into a specific widget. - **Tests** - Updated test descriptions for better readability. - Added parameter handling in test cases for widget pasting scenarios. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-06-05 07:46:49 +00:00
it("1. should handle pasting into a valid parent widget", () => {
fix: allow building blocks to be dropped inside containers (#33660) ## Description **Problem** Previously, the implementation of building blocks was limited in functionality: building blocks could not be placed into containers. This restriction constrained building blocks to be solely draggable items on the canvas, reducing their versatility and utility. **Solution** To address this limitation, we have improved the paste logic for building blocks. The updated logic now allows building blocks to be dropped into other containers. **Key changes include:** 1. Simplification of the `pastingIntoWidgetId` determination process. The paste logic previously had multiple conditions to determine this ID. 2. Direct passing of the parent widget ID into the `pasteBuildingBlockWidgetsSaga` function, streamlining the process and reducing complexity. These enhancements significantly increase the flexibility of building blocks, enabling more complex and nested designs. Fixes #33606 ## Automation /ok-to-test tags="@tag.Templates, @tag.Widget" ### :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/9249397667> > Commit: e1f72697bd1bc0fe827895a0f09228440f8be0a8 > Cypress dashboard url: <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9249397667&attempt=1" target="_blank">Click here!</a> <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No
2024-05-27 06:41:59 +00:00
const generator: GeneratorType = pasteBuildingBlockWidgetsSaga(
gridPosition,
parentWidgetId,
);
// Step 1: call getCopiedWidgets()
let result = generator.next();
expect(result.value).toEqual(getCopiedWidgets());
// Step 2: select getWidgets
result = generator.next(copiedWidgetsResponse);
expect(result.value).toEqual(select(getWidgets));
// Step 3: select getIsAutoLayoutMobileBreakPoint
const initialCanvasWidgets = {}; // Mock initial canvas widgets
result = generator.next(initialCanvasWidgets);
expect(result.value).toEqual(select(getIsAutoLayoutMobileBreakPoint));
// Step 4: select getCanvasWidth
result = generator.next(false); // Assume it's not the mobile breakpoint
expect(result.value).toEqual(select(getCanvasWidth));
// Mock data for the rest of the saga generator
const mainCanvasWidth = 1200;
const boundaryWidgets = {
leftMostWidget,
topMostWidget,
totalWidth,
};
const newPastingPositionMap = {
ppci5prygm: {
id: "ppci5prygm",
top: 1,
left: 10,
bottom: 65,
right: 41,
type: "CONTAINER_WIDGET",
},
};
const reflowedMovementMap = undefined;
const gridProps = {
parentColumnSpace: 12.828080177307129,
parentRowSpace: 10,
maxGridColumns: 64,
};
// Step 5: compute getNewPositions
result = generator.next(mainCanvasWidth);
expect(result.value).toEqual(
call(
getNewPositions,
copiedWidgets,
boundaryWidgets.totalWidth,
boundaryWidgets.topMostWidget.topRow,
boundaryWidgets.leftMostWidget.leftColumn,
{ gridPosition },
fix: drop of bbs inside container causing reflow (#33947) ## Description Current way of dropping building blocks already knows the widget id where it is going to be pasted. `getNewPositionsBasedOnMousePositions` did not take that into account and used to recalculate the canvas and container widgets. - This led to reflow and BBs getting reflowed further down(along with its container) This PR adds a fix to that ensuring no extra calculation and subsequently no further reflow. Fixes #`Issue Number` _or_ Fixes `Issue URL` > [!WARNING] > _If no issue exists, please create an issue first, and check with the maintainers if the issue is valid._ ## Automation /ok-to-test tags="@tag.Widget, @tag.Templates, @tag.IDE" ### :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/9379360946> > Commit: ba9c447fc662d2c1386b4caadd6dc04355c60082 > Cypress dashboard url: <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9379360946&attempt=1" target="_blank">Click here!</a> <!-- 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 - **Bug Fixes** - Improved error handling when pasting building block widgets. - Enhanced logic for determining container widget when pasting into a specific widget. - **Tests** - Updated test descriptions for better readability. - Added parameter handling in test cases for widget pasting scenarios. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-06-05 07:46:49 +00:00
parentWidgetId,
fix: allow building blocks to be dropped inside containers (#33660) ## Description **Problem** Previously, the implementation of building blocks was limited in functionality: building blocks could not be placed into containers. This restriction constrained building blocks to be solely draggable items on the canvas, reducing their versatility and utility. **Solution** To address this limitation, we have improved the paste logic for building blocks. The updated logic now allows building blocks to be dropped into other containers. **Key changes include:** 1. Simplification of the `pastingIntoWidgetId` determination process. The paste logic previously had multiple conditions to determine this ID. 2. Direct passing of the parent widget ID into the `pasteBuildingBlockWidgetsSaga` function, streamlining the process and reducing complexity. These enhancements significantly increase the flexibility of building blocks, enabling more complex and nested designs. Fixes #33606 ## Automation /ok-to-test tags="@tag.Templates, @tag.Widget" ### :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/9249397667> > Commit: e1f72697bd1bc0fe827895a0f09228440f8be0a8 > Cypress dashboard url: <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9249397667&attempt=1" target="_blank">Click here!</a> <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No
2024-05-27 06:41:59 +00:00
),
);
// Step 6: execute blueprint operations before paste
for (const widgetGroup of copiedWidgetsResponse.widgets) {
result = generator.next({
gridProps,
newPastingPositionMap,
reflowedMovementMap,
});
expect(result.value).toEqual(
call(
executeWidgetBlueprintBeforeOperations,
BlueprintOperationTypes.BEFORE_PASTE,
{
parentId: parentWidgetId,
widgetId: widgetGroup.widgetId,
widgets: initialCanvasWidgets,
widgetType: widgetGroup.list[0].type,
},
),
);
}
const newWidgetList = cloneDeep(copiedWidgets[0].list);
// Step 7: mock the entire copied widget handling logic
for (let i = 0; i < newWidgetList.length; i++) {
chore: Unify ID extraction regex from browser url (#33925) ## Description Regex update to make it compatible to extract identifiers for both Mongo ObjectIds and UUIDs. This will help us to keep the unified logic required in `pg` branch. ## Automation /ok-to-test tags="@tag.Datasource, @tag.GenerateCRUD, @tag.ImportExport, @tag.Fork, @tag.Workspace, @tag.Sanity" ### :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/9405554200> > Commit: 3959703aab1d10e28d3b80057793476467126929 > Cypress dashboard url: <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9405554200&attempt=2" target="_blank">Click here!</a> <!-- 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** - Enhanced URL path handling to support both UUID and Mongo ObjectIds. - **Refactor** - Replaced hardcoded page IDs with dynamic variables across multiple test files for improved maintainability and flexibility. - **Tests** - Updated test cases to use dynamic page IDs, ensuring consistency and easier updates in the future. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-06-11 09:44:54 +00:00
result = generator.next("0123456789abcdef00000000");
fix: allow building blocks to be dropped inside containers (#33660) ## Description **Problem** Previously, the implementation of building blocks was limited in functionality: building blocks could not be placed into containers. This restriction constrained building blocks to be solely draggable items on the canvas, reducing their versatility and utility. **Solution** To address this limitation, we have improved the paste logic for building blocks. The updated logic now allows building blocks to be dropped into other containers. **Key changes include:** 1. Simplification of the `pastingIntoWidgetId` determination process. The paste logic previously had multiple conditions to determine this ID. 2. Direct passing of the parent widget ID into the `pasteBuildingBlockWidgetsSaga` function, streamlining the process and reducing complexity. These enhancements significantly increase the flexibility of building blocks, enabling more complex and nested designs. Fixes #33606 ## Automation /ok-to-test tags="@tag.Templates, @tag.Widget" ### :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/9249397667> > Commit: e1f72697bd1bc0fe827895a0f09228440f8be0a8 > Cypress dashboard url: <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9249397667&attempt=1" target="_blank">Click here!</a> <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No
2024-05-27 06:41:59 +00:00
}
result = generator.next();
expect(result.done).toBe(true);
});
fix: drop of bbs inside container causing reflow (#33947) ## Description Current way of dropping building blocks already knows the widget id where it is going to be pasted. `getNewPositionsBasedOnMousePositions` did not take that into account and used to recalculate the canvas and container widgets. - This led to reflow and BBs getting reflowed further down(along with its container) This PR adds a fix to that ensuring no extra calculation and subsequently no further reflow. Fixes #`Issue Number` _or_ Fixes `Issue URL` > [!WARNING] > _If no issue exists, please create an issue first, and check with the maintainers if the issue is valid._ ## Automation /ok-to-test tags="@tag.Widget, @tag.Templates, @tag.IDE" ### :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/9379360946> > Commit: ba9c447fc662d2c1386b4caadd6dc04355c60082 > Cypress dashboard url: <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9379360946&attempt=1" target="_blank">Click here!</a> <!-- 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 - **Bug Fixes** - Improved error handling when pasting building block widgets. - Enhanced logic for determining container widget when pasting into a specific widget. - **Tests** - Updated test descriptions for better readability. - Added parameter handling in test cases for widget pasting scenarios. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-06-05 07:46:49 +00:00
it("2. should handle errors gracefully", () => {
fix: allow building blocks to be dropped inside containers (#33660) ## Description **Problem** Previously, the implementation of building blocks was limited in functionality: building blocks could not be placed into containers. This restriction constrained building blocks to be solely draggable items on the canvas, reducing their versatility and utility. **Solution** To address this limitation, we have improved the paste logic for building blocks. The updated logic now allows building blocks to be dropped into other containers. **Key changes include:** 1. Simplification of the `pastingIntoWidgetId` determination process. The paste logic previously had multiple conditions to determine this ID. 2. Direct passing of the parent widget ID into the `pasteBuildingBlockWidgetsSaga` function, streamlining the process and reducing complexity. These enhancements significantly increase the flexibility of building blocks, enabling more complex and nested designs. Fixes #33606 ## Automation /ok-to-test tags="@tag.Templates, @tag.Widget" ### :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/9249397667> > Commit: e1f72697bd1bc0fe827895a0f09228440f8be0a8 > Cypress dashboard url: <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9249397667&attempt=1" target="_blank">Click here!</a> <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No
2024-05-27 06:41:59 +00:00
const generator: GeneratorType = pasteBuildingBlockWidgetsSaga(
{ left: 0, top: 0 },
"testParentId",
);
generator.next();
// Introduce an error by throwing one manually
const error = new Error("Something went wrong");
try {
generator.throw(error);
} catch (err) {
expect(err).toBe(error);
}
});
});