Skip to content

584 create system popover#682

Merged
johbaxter merged 26 commits intodevfrom
584-create-system-popover
Mar 20, 2025
Merged

584 create system popover#682
johbaxter merged 26 commits intodevfrom
584-create-system-popover

Conversation

@Shubham009-prog
Copy link
Copy Markdown
Contributor

Description

Added a new Block (Popover Block).

Changes Made

  1. Added popover images
  2. Added popover in default menu.
  3. Added a new folder for popover.

How to Test

  1. Just Drag and drop the Popover Block to designer page.
  2. Also can customize the popup appearence.

@Shubham009-prog Shubham009-prog self-assigned this Mar 8, 2025
@Shubham009-prog Shubham009-prog requested a review from a team as a code owner March 8, 2025 21:02
@github-actions
Copy link
Copy Markdown

github-actions bot commented Mar 8, 2025

@CodiumAI-Agent /describe

@QodoAI-Agent
Copy link
Copy Markdown

Title

584 create system popover


User description

Description

Added a new Block (Popover Block).

Changes Made

  1. Added popover images
  2. Added popover in default menu.
  3. Added a new folder for popover.

How to Test

  1. Just Drag and drop the Popover Block to designer page.
  2. Also can customize the popup appearence.

PR Type

  • Enhancement

Description

  • Added popover block component with design and interactive modes.

  • Registered popover block in defaults and export index.

  • Created configuration with UI settings and event triggers.

  • Updated assets and default menu with popover images and item.


Changes walkthrough 📝

Relevant files
Enhancement
index.ts
Register and expose Popover block                                               

libs/renderer/src/components/block-defaults/index.ts

  • Imported popover block config.
  • Added popover block type to union.
  • Registered popover block in registry.
  • Exported popover block configuration.
  • +5/-0     
    PopoverBlock.tsx
    New Popover Block Component                                                           

    libs/renderer/src/components/block-defaults/popover-block/PopoverBlock.tsx

  • Created popover block component.
  • Implemented design and interactive rendering.
  • Added anchor and event handling logic.
  • Managed open state based on click/hover.
  • +231/-0 
    config.tsx
    Popover Block Configuration                                                           

    libs/renderer/src/components/block-defaults/popover-block/config.tsx

  • Defined popover block default config.
  • Set up UI settings and color options.
  • Configured trigger, design mode, and target block.
  • Added custom settings and content menu.
  • +219/-0 
    index.ts
    Popover Block Index Export                                                             

    libs/renderer/src/components/block-defaults/popover-block/index.ts

  • Re-exported config and popover block component.
  • Created simplified entry file.
  • +2/-0     
    index.ts
    Add Popover Assets                                                                             

    packages/client/src/assets/blocks/index.ts

  • Added exports for popover active image.
  • Added exports for popover hover image.
  • +2/-0     
    default-menu.ts
    Add Popover Menu Item                                                                       

    packages/client/src/components/blocks-workspace/menus/default-menu.ts

  • Added popover block menu item.
  • Integrated popover images and helper text.
  • Configured default JSON for popover block.
  • +25/-0   

    Need help?
  • Type /help how to ... in the comments thread for any questions about PR-Agent usage.
  • Check out the documentation for more information.
  • @github-actions
    Copy link
    Copy Markdown

    github-actions bot commented Mar 8, 2025

    @CodiumAI-Agent /review

    @github-actions
    Copy link
    Copy Markdown

    github-actions bot commented Mar 8, 2025

    @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

    Naming Conflict

    There are multiple definitions of a handleClose function in overlapping scopes. This shadowing may lead to unexpected behavior. Refactor these functions to avoid confusion.

    const handleClose = () => {
        if (!isStatic) {
            setData("open", "false");
        }
    };
    
    // Determine the anchor element based on a targetId if provided
    const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
    useEffect(() => {
        if (targetId) {
            const element = document.querySelector(
                `[data-block="${targetId}"]`,
            ) as HTMLElement | null;
    
            setAnchorEl(element);
        } else {
            setAnchorEl(null);
        }
    }, [targetId]);
    
    useEffect(() => {
        if (!anchorEl) return;
    
        const handleOpen = () => {
            setData("open", "true");
        };
    
        const handleClose = () => {
            setData("open", "false");
        };
        if (data.openTrigger === "click") {
            anchorEl.addEventListener("click", handleOpen);
    
            return () => {
                anchorEl.removeEventListener("click", handleOpen);
            };
        }
    Config Inconsistency

    The default value for the open property is set to an empty string in the block configuration, while the default menu uses a boolean false. Ensure a consistent type is used for the open property to avoid potential runtime issues.

        open: "",
        openTrigger: "click",
    
        contentBgColor: "",
    },

    @QodoAI-Agent
    Copy link
    Copy Markdown

    PR Code Suggestions ✨

    No code suggestions found for the PR.

    @rameshpaulraj rameshpaulraj linked an issue Mar 10, 2025 that may be closed by this pull request
    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.

    Looks good enough for first cut.

    I commented out Hover trigger, does not work.

    I think it would be cool to have some load state on this where we just overlay loading indicator in popover window

    Maybe this can be a setting on a Container block

    @johbaxter johbaxter merged commit b08bca5 into dev Mar 20, 2025
    3 checks passed
    @johbaxter johbaxter deleted the 584-create-system-popover branch March 20, 2025 17:25
    @github-actions
    Copy link
    Copy Markdown

    @CodiumAI-Agent /update_changelog

    @QodoAI-Agent
    Copy link
    Copy Markdown

    Changelog updates: 🔄

    2025-03-20

    Added

    • Introduced a new popover block with integrated settings and menu support.

    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.

    Create System Popover Block

    4 participants