Add support to render a Custom component during the flow execution#2385
Merged
brionmario merged 1 commit intoasgardeo:mainfrom Apr 22, 2026
Merged
Conversation
|
Warning Rate limit exceeded
Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 45 minutes and 17 seconds. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (14)
📝 WalkthroughWalkthroughThis PR introduces a new "Custom" element type to the Flow graph. Changes include a new Changes
Estimated Code Review Effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly Related PRs
Suggested Labels
Suggested Reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
brionmario
force-pushed
the
feat-custom-flow-components
branch
2 times, most recently
from
30495d0 to
45061b3
Compare
auto-merge was automatically disabled
April 21, 2026 19:40
Pull request was closed
brionmario
force-pushed
the
feat-custom-flow-components
branch
from
45061b3 to
15b784c
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
frontend/apps/thunder-console/src/features/roles/components/RolesList.tsx (1)
138-138: LGTM.
themeis not referenced inside the memoized columns, so dropping it from the dependency array correctly prevents needless recomputation on theme changes. Note thattheme/useTheme()at line 34 is now entirely unused in this file — consider removing the import and local if lint doesn't already catch it.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/apps/thunder-console/src/features/roles/components/RolesList.tsx` at line 138, The memoized columns dependency array correctly omits theme, but the useTheme() call and the local theme variable in RolesList.tsx (from useTheme() at line 34) are now unused; remove the useTheme import and the theme local variable to avoid dead code and linter warnings (search for useTheme and theme in this file and delete the import and the const/let that assigns theme).frontend/apps/thunder-console/src/features/flows/components/resources/elements/adapters/__tests__/FormAdapter.test.tsx (1)
154-160: Consider removing the duplicate empty-form test.Lines 126-132 already cover
components: []showing the placeholder, so this new case doesn’t add distinct coverage.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/apps/thunder-console/src/features/flows/components/resources/elements/adapters/__tests__/FormAdapter.test.tsx` around lines 154 - 160, Remove the duplicate test case that asserts the empty-form placeholder; specifically delete the `it('should show placeholder when form is empty', ... )` block that renders `<FormAdapter resource={resource} stepId="step-1" />` with `createMockElement({components: []})`, since an equivalent test already exists (lines 126-132) and `FormAdapter`/createMockElement coverage is redundant.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@frontend/apps/thunder-console/src/features/flows/components/resource-property-panel/ResourceProperties.tsx`:
- Around line 320-321: The property change handler in ResourceProperties.tsx
currently calls set(updatedResource, propertyKey, newValue) for top-level
editable IDs without validation; modify the handler that contains
set(updatedResource as unknown as Record<string, unknown>, propertyKey,
newValue) to first reject empty string IDs and detect duplicates among siblings
in the same parent container (e.g., by inspecting the parent resource's children
array or the flow graph held in props/state) and abort the set when newValue is
'' or already exists; when rejecting, do not call set() and surface a validation
error to the user (or prevent the save) so validateFlowGraph is not the only
protection.
---
Nitpick comments:
In
`@frontend/apps/thunder-console/src/features/flows/components/resources/elements/adapters/__tests__/FormAdapter.test.tsx`:
- Around line 154-160: Remove the duplicate test case that asserts the
empty-form placeholder; specifically delete the `it('should show placeholder
when form is empty', ... )` block that renders `<FormAdapter resource={resource}
stepId="step-1" />` with `createMockElement({components: []})`, since an
equivalent test already exists (lines 126-132) and
`FormAdapter`/createMockElement coverage is redundant.
In `@frontend/apps/thunder-console/src/features/roles/components/RolesList.tsx`:
- Line 138: The memoized columns dependency array correctly omits theme, but the
useTheme() call and the local theme variable in RolesList.tsx (from useTheme()
at line 34) are now unused; remove the useTheme import and the theme local
variable to avoid dead code and linter warnings (search for useTheme and theme
in this file and delete the import and the const/let that assigns theme).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 60d52929-f07c-497d-87f6-a6107e3f0f4a
📒 Files selected for processing (14)
frontend/apps/thunder-console/src/features/flows/components/resource-property-panel/ResourceProperties.tsxfrontend/apps/thunder-console/src/features/flows/components/resources/elements/CommonElementFactory.tsxfrontend/apps/thunder-console/src/features/flows/components/resources/elements/__tests__/CommonElementFactory.test.tsxfrontend/apps/thunder-console/src/features/flows/components/resources/elements/adapters/CustomAdapter.tsxfrontend/apps/thunder-console/src/features/flows/components/resources/elements/adapters/FormAdapter.tsxfrontend/apps/thunder-console/src/features/flows/components/resources/elements/adapters/__tests__/CustomAdapter.test.tsxfrontend/apps/thunder-console/src/features/flows/components/resources/elements/adapters/__tests__/FormAdapter.test.tsxfrontend/apps/thunder-console/src/features/flows/constants/VisualFlowConstants.tsfrontend/apps/thunder-console/src/features/flows/data/elements.jsonfrontend/apps/thunder-console/src/features/flows/models/__tests__/elements.test.tsfrontend/apps/thunder-console/src/features/flows/models/elements.tsfrontend/apps/thunder-console/src/features/login-flow/components/resource-property-panel/ResourceProperties.tsxfrontend/apps/thunder-console/src/features/roles/components/RolesList.tsxfrontend/packages/thunder-i18n/src/locales/en-US.ts
💤 Files with no reviewable changes (1)
- frontend/apps/thunder-console/src/features/login-flow/components/resource-property-panel/ResourceProperties.tsx
Comment on lines
+320
to
321
| } else if (propertyKey === 'id' || topLevelEditableProps.includes(propertyKey)) { | ||
| set(updatedResource as unknown as Record<string, unknown>, propertyKey, newValue); |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Description: Look for validation around editable resource/component IDs.
rg -n -C4 --type=tsx --type=ts \
"propertyKey === 'id'|name=['\"]id['\"]|id.*validation|validate.*id|readOnly.*id|duplicate.*id|unique.*id" \
frontend/apps/thunder-console/src/features/flows \
frontend/apps/thunder-console/src/features/login-flowRepository: asgardeo/thunder
Length of output: 87
🏁 Script executed:
#!/bin/bash
# Description: Search for ID validation and property editor logic in flows feature
# First, let's try to find the ResourceProperties file and understand its context
echo "=== Looking for ID-related validation patterns ==="
rg -n -i "validate.*id|unique.*id|duplicate.*id|readOnly.*id" \
frontend/apps/thunder-console/src/features/flows/ \
--type ts --type js -A 2 -B 2
echo ""
echo "=== Checking ResourceProperties.tsx for the changed lines context ==="
# Get more context around the changed lines
sed -n '310,330p' frontend/apps/thunder-console/src/features/flows/components/resource-property-panel/ResourceProperties.tsxRepository: asgardeo/thunder
Length of output: 28462
🏁 Script executed:
#!/bin/bash
# Description: Look for ID property handling and updateComponent usage
echo "=== Search for updateComponent function and how it handles IDs ==="
rg -n "updateComponent|component\.id" \
frontend/apps/thunder-console/src/features/flows/ \
--type ts --type js -B 3 -A 3 | head -100
echo ""
echo "=== Check for property editor components handling ID field ==="
rg -n "propertyKey.*id|name.*id|editableProps" \
frontend/apps/thunder-console/src/features/flows/components/resource-property-panel/ \
--type ts --type js -B 2 -A 2Repository: asgardeo/thunder
Length of output: 50372
🏁 Script executed:
#!/bin/bash
# Description: Examine the full ResourceProperties.tsx file structure around the changed code
echo "=== Full context of the changed lines (300-340) ==="
sed -n '300,340p' frontend/apps/thunder-console/src/features/flows/components/resource-property-panel/ResourceProperties.tsx
echo ""
echo "=== Search for topLevelEditableProps definition ==="
rg -n "topLevelEditableProps" \
frontend/apps/thunder-console/src/features/flows/components/resource-property-panel/ResourceProperties.tsx \
--type ts --type js -B 5 -A 5Repository: asgardeo/thunder
Length of output: 3590
🏁 Script executed:
#!/bin/bash
# Check where the 'id' field is rendered and if there's validation there
echo "=== Search for ID field rendering in property editors ==="
rg -n "propertyKey.*id|name.*id|type.*id" \
frontend/apps/thunder-console/src/features/flows/components/resource-property-panel/ \
--type ts --type js -B 3 -A 3 | grep -E "TextPropertyField|SelectPropertyField|PropertyField|readOnly|disabled|validate" -A 2 -B 2 | head -60
echo ""
echo "=== Look for where id field is actually displayed/edited ==="
rg -n "id.*PropertyField|PropertyField.*id|name.*id.*PropertyField" \
frontend/apps/thunder-console/src/features/flows/components/resource-property-panel/ \
--type ts --type js -B 2 -A 2Repository: asgardeo/thunder
Length of output: 10103
🏁 Script executed:
#!/bin/bash
# Check the hook that generates step elements - they generate unique IDs
echo "=== Check useGenerateStepElement to understand ID generation ==="
sed -n '1,100p' frontend/apps/thunder-console/src/features/flows/hooks/useGenerateStepElement.ts
echo ""
echo "=== Look for validation in CommonElementPropertyFactory ==="
rg -n "readOnly|disabled|validate" \
frontend/apps/thunder-console/src/features/flows/components/resource-property-panel/CommonElementPropertyFactory.tsx \
--type ts --type js -B 2 -A 2 | head -50Repository: asgardeo/thunder
Length of output: 2680
🏁 Script executed:
#!/bin/bash
# Check if there's any validation on set() call used on line 321
echo "=== Check lodash set function and how it's used ==="
rg -n "import.*set|from.*lodash" \
frontend/apps/thunder-console/src/features/flows/components/resource-property-panel/ResourceProperties.tsx \
--type ts --type js
echo ""
echo "=== Look for element ID schema or validation in models ==="
rg -n "Element.*id|interface Element|id.*string|id.*required" \
frontend/apps/thunder-console/src/features/flows/models/ \
--type ts --type js -B 1 -A 1 | head -80Repository: asgardeo/thunder
Length of output: 5970
Validate non-empty and unique IDs before persisting edits to component IDs.
Line 320-321 allows editable IDs to be set at the top level without validation. Since custom component renderers are keyed by component id and component updates match on component.id === element.id, mutable IDs without uniqueness and emptiness guards risk creating duplicate IDs, which will cause downstream component lookups and updates to target multiple components or fail silently. This is especially risky because post-transformation validation (in validateFlowGraph) only detects but cannot prevent the corruption that already occurred when the user saved.
Add a guard in the property change handler to reject empty strings and duplicate IDs within the same parent container before calling set() on line 321.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In
`@frontend/apps/thunder-console/src/features/flows/components/resource-property-panel/ResourceProperties.tsx`
around lines 320 - 321, The property change handler in ResourceProperties.tsx
currently calls set(updatedResource, propertyKey, newValue) for top-level
editable IDs without validation; modify the handler that contains
set(updatedResource as unknown as Record<string, unknown>, propertyKey,
newValue) to first reject empty string IDs and detect duplicates among siblings
in the same parent container (e.g., by inspecting the parent resource's children
array or the flow graph held in props/state) and abort the set when newValue is
'' or already exists; when rejecting, do not call set() and surface a validation
error to the user (or prevent the save) so validateFlowGraph is not the only
protection.
brionmario
force-pushed
the
feat-custom-flow-components
branch
from
3a0b8e7 to
e9278b7
Compare
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #2385 +/- ##
==========================================
- Coverage 89.23% 88.51% -0.72%
==========================================
Files 891 892 +1
Lines 60100 71340 +11240
==========================================
+ Hits 53630 63148 +9518
- Misses 4782 6503 +1721
- Partials 1688 1689 +1
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
DonOmalVindula
approved these changes
Apr 22, 2026
12 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Purpose
This pull request introduces support for a new "Custom" element type in the flow builder, allowing users to add and visualize custom components in the UI.
Flow Graph
A new
Customcomponent can be added to the flow.Click to see the flow graph
{ "executionId": "019db150-0eb5-799e-9d9f-5bbe6fce26fa", "flowStatus": "INCOMPLETE", "type": "VIEW", "challengeToken": "2cbad16bd9264ac96f719b27c7bd2ba5daa0333bcf285181ccd1f5e4f6ca159d", "data": { "actions": [ { "ref": "action_v9hh", "nextNode": "ID_g5do" } ], "meta": { "components": [ { "category": "DISPLAY", "id": "text_69uy", "label": "Sign In", "resourceType": "ELEMENT", "type": "TEXT", "variant": "HEADING_3" }, { "category": "BLOCK", "components": [ { "category": "MISCELLANEOUS", "id": "LOGIN_ID", "resourceType": "ELEMENT", "type": "CUSTOM" }, { "category": "ACTION", "eventType": "SUBMIT", "id": "action_v9hh", "label": "Continue", "resourceType": "ELEMENT", "type": "ACTION", "variant": "PRIMARY" }, { "category": "DISPLAY", "id": "rich_text_la4l", "label": "\u003cp class=\"rich-text-paragraph\"\u003e\u003cspan class=\"rich-text-pre-wrap\"\u003eDon't have an account? \u003c/span\u003e\u003ca href=\"{{meta(application.sign_up_url)}}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"rich-text-link\"\u003e\u003cspan class=\"rich-text-pre-wrap\"\u003eSign up\u003c/span\u003e\u003c/a\u003e\u003c/p\u003e", "resourceType": "ELEMENT", "type": "RICH_TEXT" } ], "id": "block_l7ea", "resourceType": "ELEMENT", "type": "BLOCK" } ] } } }React SDK Implementation
Add a custom renderer for the corresponding Custom component ID (In this case
LOGIN_ID)import { AsgardeoProvider } from '@asgardeo/react'; import { customRenderer } from './components/CustomComponent'; <AsgardeoProvider baseUrl={import.meta.env.VITE_ASGARDEO_BASE_URL} platform="AsgardeoV2" applicationId={applicationId} preferences={{ resolveFromMeta: false, theme: { mode: 'light', }, }} + extensions={{ + components: { + renderers: { + LOGIN_ID: customRenderer, + }, + }, }} > <App /> </AsgardeoProvider>Approach
Related Issues
Related PRs
Checklist
breaking changelabel added.Security checks
Summary by CodeRabbit
New Features
Improvements