fix: add resizable dialog for configuration fields (#2807) by masicaaa · Pull Request #3408 · superplanehq/superplane

masicaaa · 2026-03-09T21:48:28Z

Fixes #2807
Adds a resizable dialog for configuration fields and updates related UI components.

Signed-off-by: masicaaa <marijaostovic31@gmail.com>

superplanehq-integration · 2026-03-09T21:48:32Z

👋 Commands for maintainers:

/sp start - Start an ephemeral machine (takes ~30s)
/sp stop - Stop a running machine (auto-executed on pr close)

cursor

Cursor Bugbot has reviewed your changes and found 2 potential issues.

Bugbot Free Tier Details

Your team is on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle for each member of your team.

To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

cursor · 2026-03-09T21:51:06Z

  const isExpressionBadges = (value: unknown): value is ExpressionBadges => {
    if (!value || typeof value !== "object") return false;
-    return "__type" in value && (value as ExpressionBadges).__type === "expressionBadges";
+    return "_type" in value && (value as ExpressionBadges)._type === "expressionBadges";


Type guard checks _type but data uses __type

High Severity

The type guard functions isExpressionBadges, isEvaluationBadges, isErrorValue, and isSemaphoreBlocks were changed to check for _type instead of __type, but the type definitions in the same file (lines 61, 66, 73, 106) still declare __type, and all data-producing mapper files (filter.ts, if.ts, firehydrant/base.ts, semaphore/run_workflow.ts) still emit objects with __type. These guards will now always return false, silently preventing expression badges, evaluation badges, error messages, and semaphore blocks from rendering.

Additional Locations (2)

web_src/src/ui/chainItem/ChainItem.tsx#L213-L218

web_src/src/ui/chainItem/ChainItem.tsx#L245-L246

cursor · 2026-03-09T21:51:06Z

            {componentSubtitle && <span className="text-sm text-gray-500 truncate">{componentSubtitle}</span>}
            <div
-              className={`uppercase text-[11px] py-[1.5px] px-[5px] font-semibold rounded flex items-center tracking-wide justify-center text-white ${EventBadgeColor}`}
+              className={uppercase text-[11px] py-[1.5px] px-[5px] font-semibold rounded flex items-center tracking-wide justify-center text-white ${EventBadgeColor}}


Template literal backticks stripped from JSX expressions

High Severity

Throughout ChainItem.tsx, backticks were removed from template literal expressions inside JSX attributes. For example, className={`uppercase ... ${EventBadgeColor}`} became className={uppercase ... ${EventBadgeColor}}, and key={`${item.id}-child-${childIndex}`} became key={${item.id}-child-${childIndex}}. This affects at least 20 occurrences across className, key, and title attributes (lines 313, 353, 435, 469, 497, 562, 565, 613, 635, 638, 651, 655, 659, 708, 716, 731, 822, 831, 851), breaking the entire component.

Additional Locations (2)

web_src/src/ui/chainItem/ChainItem.tsx#L352-L353

web_src/src/ui/chainItem/ChainItem.tsx#L468-L469

AleksandarCole · 2026-03-11T08:56:31Z

/sp start

superplanehq-integration · 2026-03-11T08:56:41Z

✅ Ready.

Web: https://pr-3408-ephemeral.superplane.com
SSH: ssh -o StrictHostKeyChecking=no app@178.104.23.42
Logs: ssh -o StrictHostKeyChecking=no app@178.104.23.42 'cd superplane && make dev.logs.app'

AleksandarCole · 2026-03-11T14:48:57Z

@masicaaa thanks for trying this one. Please check CI - there are a lot of things failing, including build.

cursor · 2026-03-13T17:41:27Z

You have used all of your free Bugbot PR reviews.

To receive reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.

Signed-off-by: masicaaa <marijaostovic31@gmail.com>

AleksandarCole · 2026-03-17T12:33:59Z

/sp start

superplanehq-integration · 2026-03-17T12:34:16Z

😢 Failed to migrate the database

See Logs:

ssh -o StrictHostKeyChecking=no app@46.225.50.235 tail -n 100 /tmp/dev-start.log

AleksandarCole · 2026-03-18T13:46:48Z

/sp start

superplanehq-integration · 2026-03-18T13:47:06Z

😢 Failed to start environment make dev.start

See Logs:

ssh -o StrictHostKeyChecking=no app@178.104.15.210 tail -n 100 /tmp/dev-start.log

AleksandarCole · 2026-03-18T14:15:56Z

@masicaaa thanks for trying this one 🙌
The CI is still failing, we cannot merge anything that has a broken build.

Few notes regarding UX:

Easing effect - not responsive

Resizing seems a bit sluggish, and not responsive. I drag the mouse and things happen with delay + they don't seem to be accurate. Any chance we can improve this? Please compare to the resizing of the annotation nodes - they feel snappier.

Kapture.2026-03-18.at.15.10.38.mp4

Resizing indicators

Can we think of some better visual indicators that this is resizable? It seems hard for user to discover this with current design (those faint edge changes on hover), and also doesn't seem to match the rest of the style. Our sidebar is also resizable - maybe check that for inspiration.

AleksandarCole · 2026-03-18T14:34:25Z

@masicaaa I did a quick review on implementation approach too and I'm not sure that creating this new ResizableDialogContent component is the best way to go.

Nice touch - should keep

localStorage size persistence via storageKey > good instinct on adding this

Problems

Full duplication of dialog.tsx. Every sub-component is copy-pasted with a different data-slot. Two components to maintain going forward.
No touch or keyboard support. Uses mousedown/mousemove/mouseup only.
Left/top resize causes jitter. The dialog stays centered via translate(-50%, -50%), so resizing from any edge moves both sides. (probably cause of that UX issue mentioned)

Suggestion

We already have react-resizable-panels installed and the shadcn resizable.tsx wrapper. The standard approach is to compose resizable panels inside a Dialog, not to fork the Dialog itself. That gives us touch, keyboard, and persistence support without a new component or dependency.

Rework this to extend the existing DialogContent with a resizable prop and use what we already have.

AleksandarCole · 2026-03-23T12:49:44Z

/sp stop

superplanehq-integration · 2026-03-23T12:50:11Z

✅ Ephemeral machine has been terminated.

AleksandarCole · 2026-03-31T08:24:28Z

Closing this one as outdated. Feel free to reopen

fix: add resizable dialog for configuration fields (superplanehq#2807)

8f3f6fe

Signed-off-by: masicaaa <marijaostovic31@gmail.com>

cursor Bot reviewed Mar 9, 2026

View reviewed changes

fix: bugbot issues

21ffb4b

Signed-off-by: masicaaa <marijaostovic31@gmail.com>

masicaaa force-pushed the fix-2807-resizable-dialog branch from a43c57c to 21ffb4b Compare March 13, 2026 17:46

AleksandarCole added 2 commits March 17, 2026 13:37

Merge branch 'main' into fix-2807-resizable-dialog

b9ac591

Merge branch 'main' into fix-2807-resizable-dialog

d18437a

AleksandarCole closed this Mar 31, 2026

Conversation

masicaaa commented Mar 9, 2026

Uh oh!

superplanehq-integration Bot commented Mar 9, 2026

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor Bot Mar 9, 2026

Choose a reason for hiding this comment

Type guard checks _type but data uses __type

Uh oh!

cursor Bot Mar 9, 2026

Choose a reason for hiding this comment

Template literal backticks stripped from JSX expressions

Uh oh!

AleksandarCole commented Mar 11, 2026

Uh oh!

superplanehq-integration Bot commented Mar 11, 2026

Uh oh!

AleksandarCole commented Mar 11, 2026

Uh oh!

cursor Bot commented Mar 13, 2026

Uh oh!

AleksandarCole commented Mar 17, 2026

Uh oh!

superplanehq-integration Bot commented Mar 17, 2026

Uh oh!

AleksandarCole commented Mar 18, 2026

Uh oh!

superplanehq-integration Bot commented Mar 18, 2026

Uh oh!

AleksandarCole commented Mar 18, 2026

Easing effect - not responsive

Resizing indicators

Uh oh!

AleksandarCole commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Nice touch - should keep

Problems

Suggestion

Uh oh!

AleksandarCole commented Mar 23, 2026

Uh oh!

superplanehq-integration Bot commented Mar 23, 2026

Uh oh!

AleksandarCole commented Mar 31, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Type guard checks `_type` but data uses `__type`

AleksandarCole commented Mar 18, 2026 •

edited

Loading