Conversation
📝 WalkthroughWalkthroughThis PR introduces inline group creation functionality within the wave configuration workflow. It adds builder state management via Changes
Sequence DiagramsequenceDiagram
actor User
participant Panel as CreateWaveGroupInlinePanel
participant Builder as Builder State
participant API as onInlineGroupCreate
participant Server as GroupMutation Service
User->>Panel: Click "Create + use"
activate Panel
Panel->>Panel: Validate draft
alt Draft Invalid
Panel->>User: Show "Draft is incomplete…"
else Draft Valid
Panel->>Builder: Freeze UI (isCreating=true)
Panel->>API: Call with composed group name
activate API
API->>Server: submitInlineGroup(ApiCreateGroup)
activate Server
Server-->>API: ApiGroupFull (success) or error
deactivate Server
API-->>Panel: Result + toast feedback
deactivate API
alt Mutation Success
Panel->>Builder: Reset state, clear activeRule
Panel->>Builder: Switch panel to "actions"
Panel->>User: Show "Group created and attached." toast
Panel->>User: onGroupSelect(createdGroup)
else Mutation Failed
alt Not Auth Error
Panel->>User: Show error toast
end
Panel->>Builder: Restore UI (isCreating=false)
end
end
deactivate Panel
Estimated code review effort🎯 4 (Complex) | ⏱️ ~50 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 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 |
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@components/waves/create-wave/groups/CreateWaveGroupInlinePanel.tsx`:
- Around line 449-476: The footer allows mutating the hidden builder even when
creation is disabled; make the footer read-only by disabling the "Start over"
action when creation is not allowed: add disabled={!canCreateDraft} to the Start
over button (the same predicate used by the Create + use button) and guard its
onClick so resetGroupBuilder is not called when canCreateDraft is false (e.g.,
wrap the handler or return early), and update the Start over button's classes to
include the disabled styles so it visually indicates the read-only state; target
the Start over button element and the resetGroupBuilder function referenced in
this component.
In `@components/waves/create-wave/groups/createWaveInlineGroupBuilder.ts`:
- Around line 52-53: The mapping for CreateWaveInlineGroupRuleType.CIC is wrong:
update the value in the mapping object (in createWaveInlineGroupBuilder.ts where
CreateWaveInlineGroupRuleType.CIC is defined) from "NIC" to the correct label
"CIC" so the UI renders the proper text; ensure you change only the string
literal for CreateWaveInlineGroupRuleType.CIC and run any local UI/text checks
to confirm the label displays correctly.
In `@components/waves/create-wave/groups/CreateWaveInlineGroupXtdhGrant.tsx`:
- Around line 220-235: The buttons rendering STATUS_OPTIONS don't expose the
selected filter to assistive tech; update the button in the map (the element
created in the STATUS_OPTIONS.map) to include an accessible state such as
aria-pressed={isActive} (and optionally aria-current="true" when isActive) and
ensure the accessible label uses STATUS_LABELS[status] (or add an aria-label) so
screen readers announce which status is active; keep the onClick using
setSelectedStatus(status) and do not change visual classes—just add the aria
attributes to the button.
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: a89f56dd-6690-4d2b-b0fb-89fc4762186f
📒 Files selected for processing (15)
__tests__/components/waves/create-wave/CreateWave.test.tsx__tests__/components/waves/create-wave/groups/CreateWaveGroup.test.tsx__tests__/components/waves/create-wave/groups/CreateWaveGroupInlinePanel.test.tsx__tests__/components/waves/create-wave/groups/CreateWaveGroups.test.tsx__tests__/components/waves/create-wave/groups/CreateWaveInlineGroupIdentities.test.tsx__tests__/components/waves/create-wave/groups/createWaveInlineGroupBuilder.test.ts__tests__/hooks/useWaveConfig.test.tscomponents/waves/create-wave/CreateWave.tsxcomponents/waves/create-wave/groups/CreateWaveGroup.tsxcomponents/waves/create-wave/groups/CreateWaveGroupInlinePanel.tsxcomponents/waves/create-wave/groups/CreateWaveGroups.tsxcomponents/waves/create-wave/groups/CreateWaveInlineGroupIdentities.tsxcomponents/waves/create-wave/groups/CreateWaveInlineGroupXtdhGrant.tsxcomponents/waves/create-wave/groups/createWaveInlineGroupBuilder.tscomponents/waves/create-wave/hooks/useWaveConfig.ts
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@components/waves/create-wave/groups/CreateWaveInlineGroupButtons.tsx`:
- Around line 22-49: The component DraftChipButton currently always emits
aria-pressed which forces toggle semantics; change the props to include an
optional isToggle?: boolean (or alternatively treat active as
optional/undefined) and only render aria-pressed when isToggle is true (e.g.,
aria-pressed={active} conditionally), update the prop type signature for
DraftChipButton to include isToggle?: boolean and update callers to pass
isToggle when the button is a toggle so plain-action chips do not expose toggle
semantics to assistive tech.
In `@knip.jsonc`:
- Around line 91-92: Add an inline comment next to the "react-doctor" entry in
the ignoreDependencies array explaining that this package is actually consumed
via the npm script "react-doctor:diff" (invoked from
scripts/react-doctor-diff.cjs) and is ignored because Knip cannot detect
dynamic/script-based usages; update the comment under the ignoreDependencies key
referencing "react-doctor" to make this intentional suppression clear for future
maintainers.
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: e096dc8a-4254-499f-a1a9-05a93df6f391
📒 Files selected for processing (11)
__tests__/components/waves/create-wave/groups/CreateWaveGroupInlinePanel.test.tsxcomponents/waves/create-wave/groups/CreateWaveGroupInlinePanel.tsxcomponents/waves/create-wave/groups/CreateWaveInlineGroupActions.tsxcomponents/waves/create-wave/groups/CreateWaveInlineGroupButtons.tsxcomponents/waves/create-wave/groups/CreateWaveInlineGroupDraftSummary.tsxcomponents/waves/create-wave/groups/CreateWaveInlineGroupHeader.tsxcomponents/waves/create-wave/groups/CreateWaveInlineGroupRuleEditor.tsxcomponents/waves/create-wave/groups/CreateWaveInlineGroupRules.tsxcomponents/waves/create-wave/groups/CreateWaveInlineGroupSearch.tsxcomponents/waves/create-wave/groups/CreateWaveInlineGroupXtdhGrant.tsxknip.jsonc
✅ Files skipped from review due to trivial changes (2)
- components/waves/create-wave/groups/CreateWaveInlineGroupActions.tsx
- components/waves/create-wave/groups/CreateWaveInlineGroupSearch.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
- components/waves/create-wave/groups/CreateWaveInlineGroupXtdhGrant.tsx
- tests/components/waves/create-wave/groups/CreateWaveGroupInlinePanel.test.tsx
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
|
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
__tests__/components/waves/create-wave/groups/CreateWaveInlineGroupIdentities.test.tsx (2)
93-130: Consider usingrenderWithProfilefor consistency.This test renders the component directly without
AuthContext.Provider, while other tests userenderWithProfile. IfuseAuthrequires a provider context or its default behavior changes, this test could become brittle. UsingrenderWithProfile({ profile: null, identities: [...] })would be more consistent.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@__tests__/components/waves/create-wave/groups/CreateWaveInlineGroupIdentities.test.tsx` around lines 93 - 130, The test "passes selected identity wallets to the search field" renders CreateWaveInlineGroupIdentities directly; update it to use the shared test helper renderWithProfile so the AuthContext is provided consistently — call renderWithProfile with profile: null and identities: [ ... ] (the same identities currently passed) and keep the same props onIdentitySelect and onRemove, then assert the same screen.getByTestId("identities-search") result; locate the test block and replace the direct render(...) call with renderWithProfile({...}) for CreateWaveInlineGroupIdentities.
43-54: Minor inconsistency in test fixture wallet casing.
selectedCurrentUserIdentity.walletis"0xme"(lowercase) whileconnectedProfile.primary_walletandselectedCurrentUserIdentity.primary_walletare both"0xME"(uppercase). If the component uses case-sensitive comparison for thewalletfield, this could cause test fragility. Verify this is intentional for testing case-insensitive matching, or normalize the casing.💡 Suggested fix for consistency
const selectedCurrentUserIdentity: CommunityMemberMinimal = { profile_id: "profile-me", handle: "me", normalised_handle: "me", primary_wallet: "0xME", display: "Me", tdh: 42, level: 3, cic_rating: 5, - wallet: "0xme", + wallet: "0xME", pfp: "me.png", };🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@__tests__/components/waves/create-wave/groups/CreateWaveInlineGroupIdentities.test.tsx` around lines 43 - 54, Test fixture has inconsistent casing: selectedCurrentUserIdentity.wallet is "0xme" while connectedProfile.primary_wallet and selectedCurrentUserIdentity.primary_wallet are "0xME", which may break case-sensitive comparisons. Update the fixture so the wallet string casing is consistent (either normalize all to lowercase or uppercase) or explicitly normalize/compare case-insensitively in the component/test; locate the objects named selectedCurrentUserIdentity and connectedProfile and make their wallet/primary_wallet values match casing to remove fragility.components/waves/create-wave/groups/CreateWaveGroupInlinePanel.tsx (2)
78-80: Consider memoizing the validation result.
validateGroupPayloadis called on every render. If the validation logic becomes more complex or if the component re-renders frequently, consider wrapping it inuseMemolikedraftSummaryandconfiguredRules.💡 Suggested optimization
+ const validation = useMemo( + () => validateGroupPayload(groupBuilder.draft), + [groupBuilder.draft] + ); - const validation = validateGroupPayload(groupBuilder.draft);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@components/waves/create-wave/groups/CreateWaveGroupInlinePanel.tsx` around lines 78 - 80, validateGroupPayload is being called on every render (used to compute validation and canCreateDraft/canResetDraft); memoize its result with React.useMemo to avoid unnecessary recalculation. Wrap the call that sets validation (currently const validation = validateGroupPayload(groupBuilder.draft)) in useMemo with groupBuilder.draft as the dependency, ensure useMemo is imported, and keep canCreateDraft and canResetDraft using the memoized validation value.
136-144: Silent failure when group creation returns null.When
onInlineGroupCreatereturnsnull, the function silently returns without user feedback. Consider providing visual feedback (toast/error state) so users understand why the creation didn't complete.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@components/waves/create-wave/groups/CreateWaveGroupInlinePanel.tsx` around lines 136 - 144, The code in CreateWaveGroupInlinePanel silently returns when onInlineGroupCreate(nextPayload) yields null; add explicit user feedback for that failure: detect the null createdGroup and then surface an error (e.g., call the app's toast/notification helper such as showToast/enqueueSnackbar or invoke a provided onError callback, or set a local error state to render an inline message) before returning, and also optionally log the failure for debugging; keep the existing success flow that calls onGroupSelect, resetGroupBuilder, setGroupBuilderRule, and setGroupBuilderPanel unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@components/auth/Auth.tsx`:
- Line 901: The ToastContainer in Auth.tsx currently sets style={{ zIndex:
100000 }} which is lower than tooltip overlay z-index (999999); update the
ToastContainer's zIndex to a value greater than 999999 (e.g., 1000000) or pull
from a shared z-index constant so auth toasts render above CustomTooltip
overlays; modify the style prop on the ToastContainer instance to use the new
higher z-index or shared constant.
---
Nitpick comments:
In
`@__tests__/components/waves/create-wave/groups/CreateWaveInlineGroupIdentities.test.tsx`:
- Around line 93-130: The test "passes selected identity wallets to the search
field" renders CreateWaveInlineGroupIdentities directly; update it to use the
shared test helper renderWithProfile so the AuthContext is provided consistently
— call renderWithProfile with profile: null and identities: [ ... ] (the same
identities currently passed) and keep the same props onIdentitySelect and
onRemove, then assert the same screen.getByTestId("identities-search") result;
locate the test block and replace the direct render(...) call with
renderWithProfile({...}) for CreateWaveInlineGroupIdentities.
- Around line 43-54: Test fixture has inconsistent casing:
selectedCurrentUserIdentity.wallet is "0xme" while
connectedProfile.primary_wallet and selectedCurrentUserIdentity.primary_wallet
are "0xME", which may break case-sensitive comparisons. Update the fixture so
the wallet string casing is consistent (either normalize all to lowercase or
uppercase) or explicitly normalize/compare case-insensitively in the
component/test; locate the objects named selectedCurrentUserIdentity and
connectedProfile and make their wallet/primary_wallet values match casing to
remove fragility.
In `@components/waves/create-wave/groups/CreateWaveGroupInlinePanel.tsx`:
- Around line 78-80: validateGroupPayload is being called on every render (used
to compute validation and canCreateDraft/canResetDraft); memoize its result with
React.useMemo to avoid unnecessary recalculation. Wrap the call that sets
validation (currently const validation =
validateGroupPayload(groupBuilder.draft)) in useMemo with groupBuilder.draft as
the dependency, ensure useMemo is imported, and keep canCreateDraft and
canResetDraft using the memoized validation value.
- Around line 136-144: The code in CreateWaveGroupInlinePanel silently returns
when onInlineGroupCreate(nextPayload) yields null; add explicit user feedback
for that failure: detect the null createdGroup and then surface an error (e.g.,
call the app's toast/notification helper such as showToast/enqueueSnackbar or
invoke a provided onError callback, or set a local error state to render an
inline message) before returning, and also optionally log the failure for
debugging; keep the existing success flow that calls onGroupSelect,
resetGroupBuilder, setGroupBuilderRule, and setGroupBuilderPanel unchanged.
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: 509181e5-b0d6-42b3-be9f-1e75c03b4af7
📒 Files selected for processing (8)
__tests__/components/waves/create-wave/groups/CreateWaveGroupInlinePanel.test.tsx__tests__/components/waves/create-wave/groups/CreateWaveInlineGroupIdentities.test.tsxcomponents/auth/Auth.tsxcomponents/waves/create-wave/groups/CreateWaveGroupInlinePanel.tsxcomponents/waves/create-wave/groups/CreateWaveInlineGroupButtons.tsxcomponents/waves/create-wave/groups/CreateWaveInlineGroupHeader.tsxcomponents/waves/create-wave/groups/CreateWaveInlineGroupIdentities.tsxcomponents/waves/create-wave/groups/CreateWaveInlineGroupRules.tsx
🚧 Files skipped from review as they are similar to previous changes (3)
- components/waves/create-wave/groups/CreateWaveInlineGroupIdentities.tsx
- components/waves/create-wave/groups/CreateWaveInlineGroupRules.tsx
- components/waves/create-wave/groups/CreateWaveInlineGroupButtons.tsx



Summary by CodeRabbit
New Features
Tests