From 26d1b34ab942c34a01d02a6124f9425d31b01cb2 Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Thu, 6 Mar 2025 21:12:33 +0530 Subject: [PATCH] fix: Updating widget tree item props to show the correct icon for child widgets (#39605) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 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" ### :mag: Cypress test results > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: > Commit: d67f80f838cdd01bf738bed3eea832d86c038a0c > Cypress dashboard. > Tags: `@tag.IDE` > Spec: >
Thu, 06 Mar 2025 14:24:55 UTC ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No ## 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. --- .../EntityListTree/EntityListTree.stories.tsx | 6 ++++++ .../EntityExplorer/EntityListTree/EntityListTree.test.tsx | 5 +++++ .../EntityExplorer/EntityListTree/EntityListTree.types.ts | 1 + .../AppIDE/components/UIEntityListTree/UIEntityListTree.tsx | 1 + .../AppIDE/components/UIEntityListTree/WidgetTreeItem.tsx | 4 ++-- 5 files changed, 15 insertions(+), 2 deletions(-) diff --git a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityListTree/EntityListTree.stories.tsx b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityListTree/EntityListTree.stories.tsx index 9357efca7c..546725b1d0 100644 --- a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityListTree/EntityListTree.stories.tsx +++ b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityListTree/EntityListTree.stories.tsx @@ -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", }, ]; diff --git a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityListTree/EntityListTree.test.tsx b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityListTree/EntityListTree.test.tsx index c92c46da96..271f80cc4b 100644 --- a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityListTree/EntityListTree.test.tsx +++ b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityListTree/EntityListTree.test.tsx @@ -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", }, ], }, diff --git a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityListTree/EntityListTree.types.ts b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityListTree/EntityListTree.types.ts index e89accd7aa..ba050877e2 100644 --- a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityListTree/EntityListTree.types.ts +++ b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityListTree/EntityListTree.types.ts @@ -5,6 +5,7 @@ export interface EntityListTreeItem { isDisabled?: boolean; id: string; name: string; + type: string; } export interface EntityListTreeProps { diff --git a/app/client/src/pages/AppIDE/components/UIEntityListTree/UIEntityListTree.tsx b/app/client/src/pages/AppIDE/components/UIEntityListTree/UIEntityListTree.tsx index 9b8ad7fa14..b8be69bab3 100644 --- a/app/client/src/pages/AppIDE/components/UIEntityListTree/UIEntityListTree.tsx +++ b/app/client/src/pages/AppIDE/components/UIEntityListTree/UIEntityListTree.tsx @@ -18,6 +18,7 @@ export const UIEntityListTree = () => { name: widget.widgetName, isSelected: selectedWidgets.includes(widget.widgetId), isExpanded: expandedWidgets.includes(widget.widgetId), + type: widget.type, })); return ( diff --git a/app/client/src/pages/AppIDE/components/UIEntityListTree/WidgetTreeItem.tsx b/app/client/src/pages/AppIDE/components/UIEntityListTree/WidgetTreeItem.tsx index 251e559a45..2e5b976c5d 100644 --- a/app/client/src/pages/AppIDE/components/UIEntityListTree/WidgetTreeItem.tsx +++ b/app/client/src/pages/AppIDE/components/UIEntityListTree/WidgetTreeItem.tsx @@ -68,8 +68,8 @@ export const WidgetTreeItem = ({ item }: { item: EntityListTreeItem }) => { ); const startIcon = useMemo( - () => , - [widget?.type], + () => , + [item.type], ); const onClick = useCallback(