Skip to content

feat(renderer): community block ux update#1576

Merged
johbaxter merged 13 commits intodevfrom
1402_communityblock_ux_update
Aug 14, 2025
Merged

feat(renderer): community block ux update#1576
johbaxter merged 13 commits intodevfrom
1402_communityblock_ux_update

Conversation

@KirthikaKumar-K
Copy link
Copy Markdown
Contributor

@KirthikaKumar-K KirthikaKumar-K commented Jul 23, 2025

Description

Community Block UX for Add/Edit Updated

Changes Made

Changes are made in UI flow.

How to Test

  1. Create a Drag and drop app
  2. In the left panel you will have the Community Blocks

@KirthikaKumar-K KirthikaKumar-K requested a review from a team as a code owner July 23, 2025 06:51
@KirthikaKumar-K KirthikaKumar-K linked an issue Jul 23, 2025 that may be closed by this pull request
3 tasks
@github-actions
Copy link
Copy Markdown

@CodiumAI-Agent /describe

@github-actions
Copy link
Copy Markdown

@CodiumAI-Agent /review

@QodoAI-Agent
Copy link
Copy Markdown

Title

feat(renderer): community block ux update


User description

Description

Changes Made

How to Test

  1. Steps to reproduce/test the behavior
  2. Expected outcomes

Notes


PR Type

Enhancement


Description

  • Add edit functionality to client blocks

  • Refactor block card to show edit/delete on hover

  • Enhance AddClientBlockModal: edit, preview, dynamic UI

  • Introduce CommunityLayers for block layer reordering


Diagram Walkthrough

flowchart LR
  BM["BlocksMenuPanel"] -- "passes edit handler" --> BC["AddBlocksMenuCard"]
  BC -- "edit click" --> CM["AddClientBlockModal"]
  CM -- "uses" --> CL["CommunityLayers"]
  CL -- "update JSON" --> CM
Loading

File Walkthrough

Relevant files
Enhancement
BlocksMenuPanel.tsx
Support edit modal in BlocksMenuPanel                                       

packages/client/src/components/blocks-workspace/panels/BlocksMenuPanel.tsx

  • Import AddClientBlockModal
  • Add handleOnEditClick to open edit modal
  • Update delete modal title, text and button variants
  • Pass edit handler into AddBlocksMenuCard
+21/-5   
AddBlocksMenuCard.tsx
Add edit/delete buttons on block card                                       

packages/client/src/components/designer/AddBlocksMenuCard.tsx

  • Introduce StyledDiv and StyledContainer wrappers
  • Show edit and delete icons on hover for admin
  • Handle edit click via handleOnEditClick prop
  • Remove previous inline delete-only button approach
+99/-50 
AddClientBlockModal.tsx
Extend AddClientBlockModal with edit and preview                 

packages/client/src/components/designer/AddClientBlockModal.tsx

  • Support isEdit mode with dynamic modal title
  • Integrate html2canvas preview modal and arrow-back nav
  • Sync form fields with block_json and use CommunityLayers
  • Add preview button, dual modals, and save vs add actions
+397/-75
CommunityLayers.tsx
New CommunityLayers drag-and-drop component                           

packages/client/src/components/designer/CommunityLayers.tsx

  • New drag-and-drop component for block layer reordering
  • Use DndContext, SortableContext, and recursive renderer
  • Styled nodes (SortableLeaf) and collapsible slots
  • Callback onJsonUpdate to propagate JSON changes
+334/-0 

@github-actions
Copy link
Copy Markdown

@CodiumAI-Agent /improve

@QodoAI-Agent
Copy link
Copy Markdown

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪
🧪 No relevant tests
🔒 No security concerns identified
⚡ Recommended focus areas for review

Undefined callback

handleOnEditClick is optional on the card component. Add a guard or default before invoking it to avoid runtime errors when the prop is not provided.

<StyledButtonGroupIconButton
    size="small"
    onClick={(e) => {
        e.stopPropagation();
        handleOnEditClick(item['id'], item);
    }}
>
Missing dependencies

The useEffect initializing localBlockItem uses an empty dependency array but references block_json. Include block_json in deps to ensure it runs when the prop changes.

useEffect(() => {
    if (block_json) {
        setLocalBlockItem(structuredClone(block_json));
    }
}, []);
Query string formatting

The GraphQL query embeds raw JSON.stringify output inside a template literal. Unescaped quotes or special characters could break the query—consider proper escaping or encoding.

    `AddBlock(name=["${data.name}"], section=["${
        data.section
    }"], helperText=["${
        data.helperText
    }"], json=["<encode>${JSON.stringify(
        newClientBlock,
    )}</encode>"]);`,
);

@QodoAI-Agent
Copy link
Copy Markdown

PR Code Suggestions ✨

CategorySuggestion                                                                                                                                    Impact
Possible issue
Properly initialize block state

Initializing localBlockItem as an empty array can cause issues when treating it as
an object. Use the incoming block_json or an empty object as the initial state
instead.

packages/client/src/components/designer/AddClientBlockModal.tsx [96]

-const [localBlockItem, setLocalBlockItem] = useState<any>([]);
+const [localBlockItem, setLocalBlockItem] = useState<any>(block_json ?? {});
Suggestion importance[1-10]: 7

__

Why: Initializing localBlockItem as [] conflicts with its later use as an object (e.g. accessing .json). Using block_json ?? {} aligns the initial state with the expected shape.

Medium
Guard optional edit handler

Since handleOnEditClick is optional, guard its invocation to avoid runtime errors
when the prop is not provided. Use optional chaining to call it only if it exists.

packages/client/src/components/designer/AddBlocksMenuCard.tsx [415]

-handleOnEditClick(item['id'], item);
+handleOnEditClick?.(item['id'], item);
Suggestion importance[1-10]: 4

__

Why: Since handleOnEditClick is defined as optional in AddBlocksMenuItemProps, using optional chaining prevents a potential runtime error if the prop is ever omitted. This is a minor but useful defensive improvement.

Low
General
Add missing effect dependency

The effect that clones block_json only runs once. Include block_json in its
dependency array so it resets whenever the prop changes.

packages/client/src/components/designer/AddClientBlockModal.tsx [99-103]

 useEffect(() => {
     if (block_json) {
         setLocalBlockItem(structuredClone(block_json));
     }
-}, []);
+}, [block_json]);
Suggestion importance[1-10]: 6

__

Why: The useEffect cloning block_json only runs once, so updates to block_json won’t reset localBlockItem. Adding [block_json] ensures it re-runs when the prop changes.

Low

Copy link
Copy Markdown
Contributor

@johbaxter johbaxter left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will approve this, but we do not have the edit functionality in place so no need to show on the UI

@johbaxter johbaxter marked this pull request as ready for review August 14, 2025 19:45
@johbaxter johbaxter merged commit e13c14b into dev Aug 14, 2025
3 checks passed
@johbaxter johbaxter deleted the 1402_communityblock_ux_update branch August 14, 2025 19:46
@github-actions
Copy link
Copy Markdown

@CodiumAI-Agent /update_changelog

@QodoAI-Agent
Copy link
Copy Markdown

Changelog updates: 🔄

2025-08-14 *

Added

  • Community block add/edit modal with preview and layer reordering

Changed

  • Updated community blocks UI flow and card actions for improved UX

to commit the new content to the CHANGELOG.md file, please type:
'/update_changelog --pr_update_changelog.push_changelog_changes=true'

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Update UX of Creating Community Block

3 participants