feat: enhanced widget card #32211
feat: enhanced widget card #32211
Conversation
…o feat/new-widget-card
jacquesikot
requested review from
KelvinOm,
hetunandu,
a team and
riodeuno
and removed request for
a team
WalkthroughThe changes in this update involve significant enhancements to various widget components across the application. Importantly, the Changes
Assessment against linked issues
Possibly 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 (
|
|
/build-deploy-preview |
|
Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/8464900525. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
| function UIEntityCard(props: CardProps) { | ||
| const { setDraggingNewWidget } = useWidgetDragResize(); | ||
| const { deselectAll } = useWidgetSelection(); | ||
| const isEditorPaneEnabled = useIsEditorPaneSegmentsEnabled(); | ||
|
|
||
| const onDragStart = (e: any) => { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| AnalyticsUtil.logEvent("WIDGET_CARD_DRAG", { | ||
| widgetType: props.details.type, | ||
| widgetName: props.details.displayName, | ||
| }); | ||
| setDraggingNewWidget && | ||
| setDraggingNewWidget(true, { | ||
| ...props.details, | ||
| widgetId: generateReactKey(), | ||
| }); | ||
| if (!isEditorPaneEnabled) { | ||
| deselectAll(); | ||
| } | ||
| }; | ||
|
|
||
| const type = `${props.details.type.split("_").join("").toLowerCase()}`; | ||
| const className = `t--widget-card-draggable t--widget-card-draggable-${type} pt-2 gap-2 mt-2`; | ||
|
|
||
| return ( | ||
| <Wrapper | ||
| className={className} | ||
| data-guided-tour-id={`widget-card-${type}`} | ||
| draggable | ||
| id={`widget-card-draggable-${type}`} | ||
| onDragStart={onDragStart} | ||
| > | ||
| <EntityIconWrapper height={THUMBNAIL_HEIGHT} width={THUMBNAIL_WIDTH}> | ||
| <img src={props.details.thumbnail ?? props.details.icon} /> | ||
| </EntityIconWrapper> | ||
| <Text kind="body-s">{props.details.displayName}</Text> | ||
| {props.details.isBeta && <BetaLabel>Beta</BetaLabel>} | ||
| </Wrapper> | ||
| ); |
There was a problem hiding this comment.
The overall structure of the UIEntityCard component is well-organized, effectively rendering the widget's thumbnail, display name, and beta label. To further improve code readability, consider destructuring props.details at the beginning of the UIEntityCard function.
function UIEntityCard(props: CardProps) {
+ const { details } = props;
+ const { type, displayName, thumbnail, icon, isBeta } = details;
- const { setDraggingNewWidget } = useWidgetDragResize();
+ const { setDraggingNewWidget } = useWidgetDragResize();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.
| function UIEntityCard(props: CardProps) { | |
| const { setDraggingNewWidget } = useWidgetDragResize(); | |
| const { deselectAll } = useWidgetSelection(); | |
| const isEditorPaneEnabled = useIsEditorPaneSegmentsEnabled(); | |
| const onDragStart = (e: any) => { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| AnalyticsUtil.logEvent("WIDGET_CARD_DRAG", { | |
| widgetType: props.details.type, | |
| widgetName: props.details.displayName, | |
| }); | |
| setDraggingNewWidget && | |
| setDraggingNewWidget(true, { | |
| ...props.details, | |
| widgetId: generateReactKey(), | |
| }); | |
| if (!isEditorPaneEnabled) { | |
| deselectAll(); | |
| } | |
| }; | |
| const type = `${props.details.type.split("_").join("").toLowerCase()}`; | |
| const className = `t--widget-card-draggable t--widget-card-draggable-${type} pt-2 gap-2 mt-2`; | |
| return ( | |
| <Wrapper | |
| className={className} | |
| data-guided-tour-id={`widget-card-${type}`} | |
| draggable | |
| id={`widget-card-draggable-${type}`} | |
| onDragStart={onDragStart} | |
| > | |
| <EntityIconWrapper height={THUMBNAIL_HEIGHT} width={THUMBNAIL_WIDTH}> | |
| <img src={props.details.thumbnail ?? props.details.icon} /> | |
| </EntityIconWrapper> | |
| <Text kind="body-s">{props.details.displayName}</Text> | |
| {props.details.isBeta && <BetaLabel>Beta</BetaLabel>} | |
| </Wrapper> | |
| ); | |
| function UIEntityCard(props: CardProps) { | |
| const { details } = props; | |
| const { type, displayName, thumbnail, icon, isBeta } = details; | |
| const { setDraggingNewWidget } = useWidgetDragResize(); | |
| const { deselectAll } = useWidgetSelection(); | |
| const isEditorPaneEnabled = useIsEditorPaneSegmentsEnabled(); | |
| const onDragStart = (e: any) => { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| AnalyticsUtil.logEvent("WIDGET_CARD_DRAG", { | |
| widgetType: props.details.type, | |
| widgetName: props.details.displayName, | |
| }); | |
| setDraggingNewWidget && | |
| setDraggingNewWidget(true, { | |
| ...props.details, | |
| widgetId: generateReactKey(), | |
| }); | |
| if (!isEditorPaneEnabled) { | |
| deselectAll(); | |
| } | |
| }; | |
| const type = `${props.details.type.split("_").join("").toLowerCase()}`; | |
| const className = `t--widget-card-draggable t--widget-card-draggable-${type} pt-2 gap-2 mt-2`; | |
| return ( | |
| <Wrapper | |
| className={className} | |
| data-guided-tour-id={`widget-card-${type}`} | |
| draggable | |
| id={`widget-card-draggable-${type}`} | |
| onDragStart={onDragStart} | |
| > | |
| <EntityIconWrapper height={THUMBNAIL_HEIGHT} width={THUMBNAIL_WIDTH}> | |
| <img src={props.details.thumbnail ?? props.details.icon} /> | |
| </EntityIconWrapper> | |
| <Text kind="body-s">{props.details.displayName}</Text> | |
| {props.details.isBeta && <BetaLabel>Beta</BetaLabel>} | |
| </Wrapper> | |
| ); |
|
Deploy-Preview-URL: https://ce-32211.dp.appsmith.com |
…o feat/new-widget-card
jacquesikot
changed the title
|
/build-deploy-preview |
|
Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/8553363660. |
| data-guided-tour-id={`widget-card-${type}`} | ||
| draggable | ||
| id={`widget-card-draggable-${type}`} | ||
| // isThumbnail is used to add conditional styles for widget that renders thumbnail on widget card | ||
| isThumbnail={Boolean(props.details.thumbnail)} | ||
| onDragStart={onDragStart} | ||
| > | ||
| <IconWrapper | ||
| // if widget has a thumbnail, use thumbnail dimensions, else use icon dimensions | ||
| height={props.details.thumbnail ? THUMBNAIL_HEIGHT : ICON_SIZE} | ||
| width={props.details.thumbnail ? THUMBNAIL_WIDTH : ICON_SIZE} | ||
| > | ||
| <img src={props.details.thumbnail ?? props.details.icon} /> | ||
| </IconWrapper> | ||
| <ThumbnailWrapper height={THUMBNAIL_HEIGHT} width={THUMBNAIL_WIDTH}> | ||
| <img src={props.details.thumbnail} /> | ||
| </ThumbnailWrapper> | ||
| <Text kind="body-s">{props.details.displayName}</Text> | ||
| {props.details.isBeta && <BetaLabel>Beta</BetaLabel>} | ||
| </Wrapper> |
There was a problem hiding this comment.
📝 NOTE
This review was outside the diff hunks and was mapped to the diff hunk with the greatest overlap. Original lines [99-112]
Simplifying the className logic enhances readability. However, ensure that the closing brace } in the className string is removed as it seems to be a typo.
- const className = `t--widget-card-draggable t--widget-card-draggable-${type}
- }`;
+ const className = `t--widget-card-draggable t--widget-card-draggable-${type}`;| thumbnail: | ||
| buildingBlock.screenshotUrls.length > 1 | ||
| ? buildingBlock.screenshotUrls[1] | ||
| : buildingBlock.screenshotUrls[0], |
There was a problem hiding this comment.
The addition of the thumbnail field in the getBuildingBlockExplorerCards selector duplicates the logic used for the icon field. Consider refactoring to avoid code duplication and ensure consistency in thumbnail selection across different parts of the application.
- thumbnail:
- buildingBlock.screenshotUrls.length > 1
- ? buildingBlock.screenshotUrls[1]
- : buildingBlock.screenshotUrls[0],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.
| thumbnail: | |
| buildingBlock.screenshotUrls.length > 1 | |
| ? buildingBlock.screenshotUrls[1] | |
| : buildingBlock.screenshotUrls[0], |
|
Deploy-Preview-URL: https://ce-32211.dp.appsmith.com |
There was a problem hiding this comment.
@jacquesikot You selected the wrong layout to export the thumbnail. The thumbnail should be square with 1px compensator at the bottom. Compare this with wds thumbnails.
|
/build-deploy-preview skip-tests=true |
|
Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/8599073836. |
|
Deploy-Preview-URL: https://ce-32211.dp.appsmith.com |
Description
Tip
To update the explorer widgets and icons to match the new Anvil design system
How
Fixes #32330
Automation
/ok-to-test tags="@tag.Visual, @tag.MainContainer, @tag.Widget"
🔍 Cypress test results
Important
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/8598999945
Commit:
47cf5a8e0e14e986da31e02ba8f630fd27ce310fCypress dashboard url: Click here!
All cypress tests have passed 🎉🎉🎉
Summary by CodeRabbit
UIEntityCardcomponent for representing widgets in the editor sidebar with enhanced drag-and-drop functionality and improved visual layout including widget details.