fix: Updating widget tree item props to show the correct icon for child widgets (#39605)

## Description

Updating widget tree item props to show the correct icon for child
widgets.

Fixes [#39602](https://github.com/appsmithorg/appsmith/issues/39602)

## Automation

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

### 🔍 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/13700282344>
> Commit: d67f80f838cdd01bf738bed3eea832d86c038a0c
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=13700282344&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.IDE`
> Spec:
> <hr>Thu, 06 Mar 2025 14:24:55 UTC
<!-- end of auto-generated comment: Cypress test results  -->


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


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

- **New Features**
- Enhanced the entity explorer by introducing an optional `type`
classification for each tree item, enabling more detailed visualization.
- Improved icon rendering in widget items by basing visual updates on
each item's `type`, ensuring a consistent display across the interface.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Ankita Kinger 2025-03-06 21:12:33 +05:30 committed by GitHub
parent acac8c185d
commit 26d1b34ab9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 15 additions and 2 deletions

View File

@ -34,18 +34,21 @@ const Tree: EntityListTreeProps["items"] = [
isExpanded: true,
isSelected: false,
name: "Parent 1",
type: "LIST_WIDGET",
children: [
{
id: "1.1",
isExpanded: false,
isSelected: true,
name: "Child 1.1",
type: "CONTAINER_WIDGET",
children: [
{
id: "1.1.1",
isExpanded: false,
isSelected: false,
name: "Child 1.1.1",
type: "IMAGE_WIDGET",
},
{
id: "1.1.2",
@ -53,6 +56,7 @@ const Tree: EntityListTreeProps["items"] = [
isExpanded: false,
isSelected: false,
name: "Child 1.1.2",
type: "TEXT_WIDGET",
},
],
},
@ -61,6 +65,7 @@ const Tree: EntityListTreeProps["items"] = [
isExpanded: false,
isSelected: false,
name: "Child 1.2",
type: "TABLE_WIDGET",
},
],
},
@ -69,6 +74,7 @@ const Tree: EntityListTreeProps["items"] = [
isExpanded: false,
isSelected: false,
name: "Parent 2",
type: "BUTTON_WIDGET",
},
];

View File

@ -21,6 +21,7 @@ const defaultProps: EntityListTreeProps = {
isSelected: false,
isDisabled: false,
name: "Parent 1",
type: "CONTAINER_WIDGET",
children: [
{
id: "1-1",
@ -29,6 +30,7 @@ const defaultProps: EntityListTreeProps = {
isDisabled: false,
name: "Child 1.1",
children: [],
type: "TABLE_WIDGET",
},
],
},
@ -61,6 +63,7 @@ describe("EntityListTree", () => {
isDisabled: false,
name: "No Children Parent",
children: [],
type: "TABLE_WIDGET",
},
],
};
@ -84,6 +87,7 @@ describe("EntityListTree", () => {
isSelected: false,
isDisabled: false,
name: "Parent 1",
type: "CONTAINER_WIDGET",
children: [
{
id: "1-1",
@ -92,6 +96,7 @@ describe("EntityListTree", () => {
isDisabled: false,
name: "Child 1.1",
children: [],
type: "TABLE_WIDGET",
},
],
},

View File

@ -5,6 +5,7 @@ export interface EntityListTreeItem {
isDisabled?: boolean;
id: string;
name: string;
type: string;
}
export interface EntityListTreeProps {

View File

@ -18,6 +18,7 @@ export const UIEntityListTree = () => {
name: widget.widgetName,
isSelected: selectedWidgets.includes(widget.widgetId),
isExpanded: expandedWidgets.includes(widget.widgetId),
type: widget.type,
}));
return (

View File

@ -68,8 +68,8 @@ export const WidgetTreeItem = ({ item }: { item: EntityListTreeItem }) => {
);
const startIcon = useMemo(
() => <WidgetTypeIcon type={widget?.type} />,
[widget?.type],
() => <WidgetTypeIcon type={item.type} />,
[item.type],
);
const onClick = useCallback(