Fix/overall test #2944
Fix/overall test #2944
Conversation
WalkthroughThis PR makes small UI and behavior tweaks across several components: header top margins, button styling/variant prop, vertical alignment, paired-input border/rounding classes, menu item text color, DebouncedInput default delay increased to 500ms, and vendor social icons wrapped with anchor links. No exported APIs were changed. Changes
Sequence Diagram(s)(Skipped — changes are presentation and a debounce default; no control-flow or new feature requiring a sequence diagram.) Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (2 warnings, 1 inconclusive)
✨ 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 |
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
src/admin/dashboard/pages/vendor-create-edit/Create.tsx(1 hunks)src/admin/dashboard/pages/vendor-create-edit/Edit.tsx(1 hunks)src/components/AdminFilter.tsx(1 hunks)src/components/AdminTab.tsx(1 hunks)src/components/commission/CommissionInputs.tsx(2 hunks)src/components/dataviews/style.scss(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: e2e tests (3, 3)
- GitHub Check: api tests (1, 1)
- GitHub Check: e2e tests (1, 3)
- GitHub Check: e2e tests (2, 3)
🔇 Additional comments (5)
src/admin/dashboard/pages/vendor-create-edit/Edit.tsx (1)
197-197: LGTM - Consistent header spacing.The top margin addition aligns the "Update Vendor" header spacing with the same change in Create.tsx, maintaining visual consistency across the vendor creation and editing workflows.
src/admin/dashboard/pages/vendor-create-edit/Create.tsx (1)
127-127: LGTM - Consistent header spacing.The top margin addition matches the identical change in Edit.tsx, ensuring uniform spacing across both vendor creation and editing views.
src/components/dataviews/style.scss (1)
81-81: LGTM - Menu item color styling.The color addition provides consistent text styling for portal menu items.
src/components/commission/CommissionInputs.tsx (1)
59-59: LGTM - Connected input styling.The border and border-radius adjustments create a visually connected pair of inputs for the percentage and flat commission fields, following a common UI pattern for grouped inputs. The use of Tailwind's
!important modifier appropriately ensures these styles override any conflicting defaults.Also applies to: 97-97
src/components/AdminTab.tsx (1)
123-123: Verify existing AdminTab usages with additionalComponents render correctly after alignment change.The alignment change from
items-endtoitems-centeris confirmed to affect real usages: SearchInput in vendors.tsx and buttons in withdraw/index.tsx. Manual testing is needed to confirm that these components and any other additionalComponents render correctly with center alignment. While the change appears semantically sound for a flex layout, visual regression testing is required to ensure no unintended layout shifts occur.
| className="flex gap-2 items-center justify-center shadow-none" | ||
| variant="tertiary" |
There was a problem hiding this comment.
🧩 Analysis chain
Verify the button variant migration provides equivalent styling.
The change migrates from a class-based variant (dokan-btn-tertiary) to a prop-based variant (variant="tertiary"). Ensure that the DokanButton component properly supports the variant="tertiary" prop and that it provides equivalent or improved styling compared to the removed class.
🏁 Script executed:
#!/bin/bash
# Description: Verify DokanButton component supports variant prop and check for other usages of the old class
# Find DokanButton component definition to verify variant prop support
fd -e tsx -e ts -e jsx -e js 'DokanButton' --exec cat {} \; | rg -A10 -B5 'variant.*tertiary|DokanButton.*=.*\(|interface.*DokanButton'
# Search for any remaining usages of dokan-btn-tertiary class
rg -n 'dokan-btn-tertiary' -g '*.tsx' -g '*.ts' -g '*.jsx' -g '*.js' -g '*.css' -g '*.scss'Length of output: 562
The script output reveals a potential issue: there are still usages of the dokan-btn-tertiary class in the codebase, including at line 193 in the same file (AdminFilter.tsx). Let me verify the DokanButton component and the migration status:
I need to inspect the actual component implementations to verify the variant support:
Let me examine the component files directly from the codebase:
🏁 Script executed:
#!/bin/bash
# View DokanButton component definition
echo "=== DokanButton Component ==="
find . -name "DokanButton.tsx" -o -name "DokanButton.ts" -o -name "DokanButton.jsx" -o -name "DokanButton.js" | head -5 | xargs -I {} sh -c 'echo "File: {}"; cat "{}"'
echo -e "\n=== Button.tsx Component ==="
cat src/components/Button.tsx
echo -e "\n=== AdminFilter.tsx around lines 176-177 and 193 ==="
sed -n '160,210p' src/components/AdminFilter.tsxLength of output: 3928
Approve lines 176-177 but fix incomplete migration at line 193.
The variant="tertiary" prop migration at lines 176-177 is correctly implemented and properly supported by the DokanButton component wrapper. However, verification reveals an incomplete migration in the same file: line 193 still uses the class-based approach className="flex dokan-btn-tertiary" instead of the prop-based variant. Update line 193 to use variant="tertiary" for consistency:
<DokanButton
variant="tertiary"
onClick={ handleReset }
>
🤖 Prompt for AI Agents
In src/components/AdminFilter.tsx around lines 176-177 and 193, lines 176-177
are fine but line 193 still uses className="flex dokan-btn-tertiary"; replace
that class-based styling with the prop-based API by removing the
"dokan-btn-tertiary" class and adding variant="tertiary" to the DokanButton
component while preserving other utility classes (e.g., keep "flex" or any
layout classes) and ensure onClick={handleReset} remains; verify
import/signature of DokanButton supports variant and run typecheck.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/admin/dashboard/pages/vendors-single/SocialLinks.tsx (2)
125-129: Includenoopenerin rel attribute for explicit security.While modern browsers imply
noopenerfromnoreferrer, it's a security best practice to explicitly include both for broader compatibility and clarity when usingtarget="_blank".Apply this diff:
<a href={ platform.url ?? '#' } target="_blank" - rel="noreferrer" + rel="noopener noreferrer" >
126-126: Consider removing unnecessary fallback.The fallback to
'#'is unnecessary since the filter at lines 104-106 already excludes platforms without URLs. This fallback should never be reached in practice.If you prefer defensive programming, keep it as-is. Otherwise, simplify to:
- href={ platform.url ?? '#' } + href={ platform.url }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/admin/dashboard/pages/vendors-single/SocialLinks.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: e2e tests (3, 3)
- GitHub Check: e2e tests (2, 3)
- GitHub Check: api tests (1, 1)
- GitHub Check: e2e tests (1, 3)
| <a | ||
| href={ platform.url ?? '#' } | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| > |
There was a problem hiding this comment.
Add accessible name to anchor element.
The anchor lacks an accessible name. The aria-label on the child RawHTML component (line 133) does not make the link accessible to screen readers. Links must have accessible names per WCAG guidelines.
Move the aria-label from the RawHTML to the anchor element:
- <a
- href={ platform.url ?? '#' }
- target="_blank"
- rel="noreferrer"
- >
+ <a
+ href={ platform.url ?? '#' }
+ target="_blank"
+ rel="noreferrer"
+ aria-label={ platform.label }
+ >
<RawHTML
key={ platform.key + '_icon' }
className="w-7 h-7 flex hover:cursor-pointer"
- aria-label={ platform.label }
>📝 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.
| <a | |
| href={ platform.url ?? '#' } | |
| target="_blank" | |
| rel="noreferrer" | |
| > | |
| <a | |
| href={ platform.url ?? '#' } | |
| target="_blank" | |
| rel="noreferrer" | |
| aria-label={ platform.label } | |
| > | |
| <RawHTML | |
| key={ platform.key + '_icon' } | |
| className="w-7 h-7 flex hover:cursor-pointer" | |
| > |
🤖 Prompt for AI Agents
In src/admin/dashboard/pages/vendors-single/SocialLinks.tsx around lines 125-129
(and the child RawHTML at ~133), the anchor lacks an accessible name; move the
aria-label from the child RawHTML to the anchor element so screen readers see
the link name. Update the <a> to include an aria-label (e.g., using
platform.name or a descriptive string like `Visit ${platform.name}`) and remove
the aria-label from RawHTML; ensure the anchor still has href, target and rel
attributes and that the aria-label provides a meaningful, unique name for each
platform.
All Submissions:
Changes proposed in this Pull Request:
Related Pull Request(s)
Closes
How to test the changes in this Pull Request:
Changelog entry
Title
Detailed Description of the pull request. What was previous behaviour
and what will be changed in this PR.
Before Changes
Describe the issue before changes with screenshots(s).
After Changes
Describe the issue after changes with screenshot(s).
Feature Video (optional)
Link of detailed video if this PR is for a feature.
PR Self Review Checklist:
FOR PR REVIEWER ONLY:
Summary by CodeRabbit
Style
Chores