feat: preview grant application before submitting for review (fixes #…#1426
feat: preview grant application before submitting for review (fixes #…#1426espadondutravail wants to merge 1 commit into
Conversation
|
@espadondutravail is attempting to deploy a commit to the Superteam Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughA new "Preview" step is added to the ChangesGrant Application Preview Step
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/features/grants/components/Modals/ApplicationModal.tsx`:
- Line 68: The progress bar calculation in ApplicationModal is still hard-coded
for the old step count, so adding the new Preview step makes it overshoot and
advance unevenly. Update the progress math to derive the percentage from the
current step index and the total number of steps used by the modal flow, and
make sure the step list that includes Preview is the single source of truth for
the progress calculation.
- Around line 1125-1130: The Luma preview in ApplicationModal is showing the
stored slug instead of the full URL. Update the preview block that reads
form.getValues('lumaLink') so it renders the normalized full Luma link users
entered, using the same normalization logic applied in the lumaLink input
handling in ApplicationModal. Keep the existing conditional on isST, but ensure
the displayed value is the full link rather than the raw stored slug.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: bd82f062-07a4-4bc5-b6da-5d2b558117d6
📒 Files selected for processing (1)
src/features/grants/components/Modals/ApplicationModal.tsx
| { title: 'Basics' }, | ||
| { title: 'Details' }, | ||
| { title: isST ? 'Outcomes' : 'Milestones' }, | ||
| { title: 'Preview' }, |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Recompute the progress bar from the step count.
Adding a fourth step leaves the hard-coded progress math at Line 521 stale, so the bar now overshoots 100% on the Preview step and no longer advances evenly.
Suggested fix
- value={(activeStep / steps.length) * 100 + 33}
+ value={steps.length > 1 ? (activeStep / (steps.length - 1)) * 100 : 0}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/features/grants/components/Modals/ApplicationModal.tsx` at line 68, The
progress bar calculation in ApplicationModal is still hard-coded for the old
step count, so adding the new Preview step makes it overshoot and advance
unevenly. Update the progress math to derive the percentage from the current
step index and the total number of steps used by the modal flow, and make sure
the step list that includes Preview is the single source of truth for the
progress calculation.
| {isST && form.getValues('lumaLink') && ( | ||
| <div> | ||
| <span className="font-medium text-slate-500"> | ||
| Luma Event: | ||
| </span> | ||
| <p className="mt-1">{form.getValues('lumaLink')}</p> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Preview the full Luma link, not the stored slug.
The input normalizes this field to a slug at Lines 772-776, but the preview prints the raw stored value. Users will review my-event instead of the actual Luma URL they entered.
Suggested fix
- <p className="mt-1">{form.getValues('lumaLink')}</p>
+ <p className="mt-1">
+ {getLumaDisplayValue(form.getValues('lumaLink') || '')}
+ </p>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {isST && form.getValues('lumaLink') && ( | |
| <div> | |
| <span className="font-medium text-slate-500"> | |
| Luma Event: | |
| </span> | |
| <p className="mt-1">{form.getValues('lumaLink')}</p> | |
| {isST && form.getValues('lumaLink') && ( | |
| <div> | |
| <span className="font-medium text-slate-500"> | |
| Luma Event: | |
| </span> | |
| <p className="mt-1"> | |
| {getLumaDisplayValue(form.getValues('lumaLink') || '')} | |
| </p> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/features/grants/components/Modals/ApplicationModal.tsx` around lines 1125
- 1130, The Luma preview in ApplicationModal is showing the stored slug instead
of the full URL. Update the preview block that reads form.getValues('lumaLink')
so it renders the normalized full Luma link users entered, using the same
normalization logic applied in the lumaLink input handling in ApplicationModal.
Keep the existing conditional on isST, but ensure the displayed value is the
full link rather than the raw stored slug.
|
There are two issues with this implementation
|
RevTpark
left a comment
RevTpark
left a comment
There was a problem hiding this comment.
check the above comment
2 participants
feat: preview grant application before submitting for review (fixes #1424)
What does this PR do?
This PR introduces a new "Preview" step (Step 4) to the Grant Application wizard. Previously, applicants would hit "Apply" at the end of the Milestones step without being able to review their answers. Now, users can review all their inputs in a read-only, beautifully formatted summary screen before confirming their final submission.
Where should the reviewer start?
The main logic and layout changes are located in
src/features/grants/components/Modals/ApplicationModal.tsx.getStepsfunction where thePreviewstep was added.activeStep === 3block for the new UI layout rendering the summary.dangerouslySetInnerHTMLalongsideprose prose-smclasses are correctly used to render Rich Text content natively.How should this be manually tested?
Any background context you want to provide?
I moved the Acknowledgement checkboxes (terms and feedback) to the bottom of the new Preview step instead of the Milestones step. This makes more sense from a UX perspective, allowing users to agree to terms immediately before clicking "Apply".
What are the relevant issues?
Fixes #1424
Screenshots (if appropriate)
(Feel free to add a screenshot showing the new beautiful Preview step with all data filled in).
Summary by CodeRabbit