PromucFlow_constructor/app/client/src/selectors/buildingBlocksSelectors.ts

8 lines
305 B
TypeScript
Raw Normal View History

import type { AppState } from "ee/reducers";
feat: implement dropping building blocks on canvas (#31857) ## Description > [!TIP] **Goal** To drag any building blocks from the explorer and drop at any position on the users canvas with full implementation. **Implementation** - Show skeleton widget when building block is initially dragged unto the canvas. - Make API call to add datasources, queries, and JS to existing page of users app - Get returned widget DSL and use existing copy paste logic to display widgets on the canvas - Remove loading state, handle clean up for copy paste - Run all queries newly created by the dropped building block **Limitations** - There is a loading state and the process is not instant like dropping a widget This PR is followed by this one [here](https://github.com/appsmithorg/appsmith/pull/31406), which displays the loading state when a building block is dragged unto the canvas. Fixes #31856 ## Automation /ok-to-test tags="@tag.Templates, @tag.MainContainer, @tag.Visual, @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/8701664455> > Commit: 456a7a0a322e76974a7f5c41a6c1e274ef82e4ea > Cypress dashboard url: <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8701664455&attempt=1" target="_blank">Click here!</a> <!-- end of auto-generated comment: Cypress test results --> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced a new "Building Blocks" category in the widget sidebar for enhanced organization and accessibility. - Added functionality to resize building blocks with new horizontal and vertical limits. - Implemented a "see more" button for "Building Blocks" to display all associated widgets. - Enhanced drag and drop functionality for building blocks on the canvas. - **Enhancements** - Improved sorting logic for widgets, prioritizing "Building Blocks". - Enhanced widget search functionality within the sidebar. - **Bug Fixes** - Adjusted default rows and columns settings for explorer building blocks to improve layout and usability. - **Documentation** - Updated messages and constants related to new features for clarity and consistency. - **Refactor** - Refactored drag and drop handling logic to support new building block constraints and features. - Updated application state management to include building blocks related data. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Anagh Hegde <anagh@appsmith.com> Co-authored-by: Rahul Barwal <rahul.barwal@appsmith.com>
2024-04-16 08:41:09 +00:00
export const isDraggingBuildingBlockToCanvas = (state: AppState) =>
state.ui.buildingBlocks.isDraggingBuildingBlocksToCanvas;
feat: add analytics for drag and drop building blocks (#32699) ## Description > [!TIP] Add events to track the dragging of building blocks, dropping of blocks, and the time taken from drag till drop is complete. **Drag Event** ``` AnalyticsUtil.logEvent("DRAG_BUILDING_BLOCK_INITIATED", { applicationId, workspaceId, source: "explorer", eventData: { buildingBlockName: props.details.displayName, }, }); ``` **Drop Event** ``` AnalyticsUtil.logEvent("DROP_BUILDING_BLOCK_INITIATED", { applicationId, workspaceId, source: "explorer", eventData: { buildingBlockName: props.details.displayName, }, }); AnalyticsUtil.logEvent("DROP_BUILDING_BLOCK_COMPLETED", { applicationId, workspaceId, source: "explorer", eventData: { buildingBlockName: dragDetails.newWidget.displayName, timeTakenToCompletion: timeTakenTo CompleteValueInSeconds, timeTakenToDropWidgets: timeTakenValueInSeconds }, }); ``` Fixes #32492 ## Automation /ok-to-test tags="@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/8785306375> > Commit: 8316506b039256ad6d171a3a81ddaec56cecdfc2 > Cypress dashboard url: <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8785306375&attempt=1" target="_blank">Click here!</a> <!-- end of auto-generated comment: Cypress test results --> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced analytics tracking for building block drag-and-drop operations. - Enhanced functionality for adding and managing building blocks within the application. - **Refactor** - Updated action type constants for better consistency in handling building block operations. - **Bug Fixes** - Improved logic for setting the start time of building block drag operations to ensure accurate tracking. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Anagh Hegde <anagh@appsmith.com> Co-authored-by: Rahul Barwal <rahul.barwal@appsmith.com>
2024-04-22 14:58:37 +00:00
export const getBuildingBlockDragStartTimestamp = (state: AppState) =>
state.ui.buildingBlocks.buildingBlockDragStartTimestamp;