feat: list building blocks in explorer #31199
Conversation
github-actions
bot
added
Enhancement
WalkthroughWalkthroughThe recent changes introduce the capability to list and manage building blocks within the platform's explorer, optimizing the widget search with Fuse.js, and enhancing user interaction through loading indicators and dynamic widget card rendering based on tags. It also lays the groundwork for drag-and-drop functionality of building blocks onto the canvas, streamlining the user experience for building applications. These updates collectively aim to accelerate user learning and improve the development process within the platform. Changes
Assessment against linked issues
Related issues
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
| const BuildingBlockExplorerCard = (props: CardProps) => { | ||
| const type = `${props.details.type.split("_").join("").toLowerCase()}`; | ||
| const className = `t--widget-card-draggable t--widget-card-draggable-${type}`; | ||
|
|
||
| const onDragStart = (e: any) => { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| }; | ||
| return ( | ||
| <Wrapper | ||
| className={className} | ||
| data-guided-tour-id={`widget-card-${type}`} | ||
| draggable | ||
| id={`widget-card-draggable-${type}`} | ||
| onDragStart={onDragStart} | ||
| > | ||
| <div className="gap-2"> | ||
| <StyledIconImg className="w-6 h-6" src={props.details.icon} /> | ||
|
|
||
| <Text kind="body-s" style={{ fontWeight: 500 }}> | ||
| {props.details.displayName} | ||
| </Text> | ||
| {props.details.isBeta && <BetaLabel>Beta</BetaLabel>} | ||
| </div> | ||
| </Wrapper> | ||
| ); | ||
| }; | ||
|
|
||
| export default BuildingBlockExplorerCard; |
There was a problem hiding this comment.
The BuildingBlockExplorerCard component's rendering logic is clear and concise. The use of destructuring for props.details and conditional rendering for the BetaLabel are best practices that enhance code readability and maintainability. However, the onDragStart handler prevents the default behavior and stops propagation, which might not be necessary unless specific drag-and-drop functionality is intended. If drag-and-drop is not a feature for these cards, consider removing the onDragStart handler to simplify the component.
- const onDragStart = (e: any) => {
- e.preventDefault();
- e.stopPropagation();
- };
- onDragStart={onDragStart}Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| const BuildingBlockExplorerCard = (props: CardProps) => { | |
| const type = `${props.details.type.split("_").join("").toLowerCase()}`; | |
| const className = `t--widget-card-draggable t--widget-card-draggable-${type}`; | |
| const onDragStart = (e: any) => { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| }; | |
| return ( | |
| <Wrapper | |
| className={className} | |
| data-guided-tour-id={`widget-card-${type}`} | |
| draggable | |
| id={`widget-card-draggable-${type}`} | |
| onDragStart={onDragStart} | |
| > | |
| <div className="gap-2"> | |
| <StyledIconImg className="w-6 h-6" src={props.details.icon} /> | |
| <Text kind="body-s" style={{ fontWeight: 500 }}> | |
| {props.details.displayName} | |
| </Text> | |
| {props.details.isBeta && <BetaLabel>Beta</BetaLabel>} | |
| </div> | |
| </Wrapper> | |
| ); | |
| }; | |
| export default BuildingBlockExplorerCard; | |
| const BuildingBlockExplorerCard = (props: CardProps) => { | |
| const type = `${props.details.type.split("_").join("").toLowerCase()}`; | |
| const className = `t--widget-card-draggable t--widget-card-draggable-${type}`; | |
| return ( | |
| <Wrapper | |
| className={className} | |
| data-guided-tour-id={`widget-card-${type}`} | |
| draggable | |
| id={`widget-card-draggable-${type}`} | |
| > | |
| <div className="gap-2"> | |
| <StyledIconImg className="w-6 h-6" src={props.details.icon} /> | |
| <Text kind="body-s" style={{ fontWeight: 500 }}> | |
| {props.details.displayName} | |
| </Text> | |
| {props.details.isBeta && <BetaLabel>Beta</BetaLabel>} | |
| </div> | |
| </Wrapper> | |
| ); | |
| }; | |
| export default BuildingBlockExplorerCard; |
|
/build-deploy-preview |
|
Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/7964808147. |
app/client/src/pages/Editor/utils.ts
Outdated
| rows: 20, | ||
| columns: 5, | ||
| type: "BUILDING_BLOCK", |
There was a problem hiding this comment.
No numbers or strings in code, use constants file and then import it.
Can you briefly explain what rows and columns are doing here?
There was a problem hiding this comment.
The preview box rows and columns when you drag a widget into the canvas, before it is dropped. I have added this to a constants file.
| const SEE_MORE_LESS_TEXT = | ||
| buildingBlockInitList === INITIAL_BUILDING_BLOCKS_IN_EXPLORER | ||
| ? "See more" | ||
| : "See less"; | ||
| const SEE_MORE_ARROW = | ||
| buildingBlockInitList === INITIAL_BUILDING_BLOCKS_IN_EXPLORER | ||
| ? "arrow-down-s-line" | ||
| : "arrow-up-s-line"; |
There was a problem hiding this comment.
Nit: you can use useMemo here.
| const buildingBlockCards = releaseDragDropBuildingBlocks | ||
| ? transformTemplatesToWidgetCard(buildingBlocks) | ||
| : []; | ||
| const cards = [ |
| const templatesCount = useSelector(templatesCountSelector); | ||
| const buildingBlocks = useSelector(getTemplatesSelector).filter( | ||
| (template) => | ||
| template.functions[0] === TEMPLATE_BUILDING_BLOCKS_FILTER_FUNCTION_VALUE, | ||
| ); |
There was a problem hiding this comment.
Extracting bb, is a reusable logic... consider creating a custom hook for this(if possible).
If it does not make sense, lets extract it as a util atleast.
There was a problem hiding this comment.
I have moved this logic to the selector
|
|
||
| {tag === WIDGET_TAGS.BUILDING_BLOCKS && ( | ||
| <Button | ||
| className="mt-4" | ||
| data-testid="t--canvas-building-block-see-more" | ||
| kind="tertiary" | ||
| onClick={() => { | ||
| if ( | ||
| buildingBlockInitList === | ||
| INITIAL_BUILDING_BLOCKS_IN_EXPLORER | ||
| ) { | ||
| setBuildingBlockInitList(buildingBlocks.length); | ||
| } else { | ||
| setBuildingBlockInitList( | ||
| INITIAL_BUILDING_BLOCKS_IN_EXPLORER, | ||
| ); | ||
| } | ||
| }} | ||
| size="md" | ||
| startIcon={SEE_MORE_ARROW} | ||
| > | ||
| {SEE_MORE_LESS_TEXT} | ||
| </Button> | ||
| )} |
There was a problem hiding this comment.
Can all this wrapper div with see more /less be extracted as a different component?
|
@jacquesikot also see why |
|
Deploy-Preview-URL: https://ce-31199.dp.appsmith.com |
|
/ok-to-test tags="@tag.Visual" |
|
Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/8183521708. |
|
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/8183521708. |
|
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/8183515294. |
|
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/8183509598.
To know the list of identified flaky tests - Refer here |
|
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/8183509598.
To know the list of identified flaky tests - Refer here |
|
/ok-to-test tags="@tag.Templates" |
|
Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/8185957561. |
|
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/8185957561. |
|
/ok-to-test tags="@tag.Templates" |
|
Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/8186836795. |
|
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/8186836795.
|
|
/ok-to-test tags="@tag.Templates" |
|
Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/8188399354. |
|
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/8188399354.
|
…o feat/list-building-blocks-in-explorer
|
/ok-to-test tags="@tag.Templates" |
|
Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/8190589402. |
|
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/8190589402.
|
|
/ok-to-test tags="@tag.Templates" |
|
Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/8198757793. |
|
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/8198757793. |
…1406) ## Description **Goal** To allow users drag and drop building blocks on the canvas just like widgets today. We are also implementing a loading state with the platform skeleton component immediately the user drops the block on the canvas. **Why** The dropping of building blocks needs to make an API call to the backend to process adding the building block functionality to the users app. This loading skeleton acts as a placeholder for the block while the API call is processing. **How** 1. We had listed the building blocks in a previous [PR](#31199) 2. Created a new saga to handle widget and building block addition called `addUIEntitySaga` 3. The saga handles widget addition like it did previously, but also handles building block addition to canvas. #### PR fixes following issue(s) Fixes #31314 #### Media #### Type of change > Please delete options that are not relevant. - New feature (non-breaking change which adds functionality) ## Testing > #### How Has This Been Tested? > Please describe the tests that you ran to verify your changes. Also list any relevant details for your test configuration. > Delete anything that is not relevant - [ ] Manual - [ ] JUnit - [ ] Jest - [ ] Cypress > > #### 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 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced drag-and-drop functionality for building blocks within the canvas editor. - Added a new feature flag to enable/disable drag-and-drop building blocks. - Implemented new UI components such as `SeeMoreButton`, `UIEntityList`, and `UIEntitySidebar` for enhanced widget management and exploration. - Enhanced widget sidebar with improved search and filter capabilities. - **Enhancements** - Updated various components and sagas to support the new drag-and-drop functionality and building blocks management. - Improved loading and organization of UI explorer items, including widgets and building blocks. - **Refactor** - Adjusted import paths and reorganized imports across multiple files for better code maintenance. - Consolidated widget addition logic under a unified saga for handling different UI entity types. - **Bug Fixes** - Fixed the directory structure for the `useIsEditorPaneSegmentsEnabled` hook to reflect recent changes. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
Description
This is step 1 of completing the addition of building blocks within the canvas explorer. It adds building blocks to the explorer and hides the functionality behind a feature flag - release_drag_drop_building_blocks_enabled.
PR fixes following issue(s)
Fixes #31146
Media
Type of change
Testing
How Has This Been Tested?
Test Plan
Issues raised during DP testing
Checklist:
Dev activity
QA activity:
Test Plan Approvedlabel after Cypress tests were reviewedTest Plan Approvedlabel after JUnit tests were reviewedSummary by CodeRabbit
New Features
Refactor
Style