feat: add quick-create product modal to product list#3296
Open
kzamanbd wants to merge 9 commits into
Open
Conversation
Add a lightweight "Add new product" modal on the React product list that reuses the product-editor FormSchema. It fetches the schema, renders an essential field subset (name, image, price, category, short description) via DataForm, creates a simple draft through the shared product-editor store, then refetches the list in place — no navigation. - src/dashboard/product-editor/QuickCreateModal.tsx: new modal component - src/dashboard/products/ProductList.tsx: open the modal when One Page Product Creation is enabled, else navigate to the full create page - includes/Assets.php: localize is_quick_create_enabled flag - docs: implementation plan
The @dokan import path already resolves via the typescript resolver (tsconfig paths), so the duplicate alias map in .eslintrc is unnecessary.
Contributor
ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (2)
📝 WalkthroughWalkthroughAdds a quick-create product modal, localizes its enablement from product options, and wires the product list to open it or fall back to the full editor. Playwright coverage checks both paths. ChangesQuick Create Modal Feature
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 2 | ❌ 3❌ Failed checks (3 warnings)
✅ Passed checks (2 passed)
✨ 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
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/dashboard/product-editor/QuickCreateModal.tsx`:
- Around line 122-153: QuickCreateModal is bypassing the product-editor hook
contract by calling updateProduct and saveProduct directly, so add-ons never see
dokan_product_editor_field_changed or dokan_product_editor_after_save. Update
the modal to go through the same hook-driven flow used by useProductEditor, or
explicitly fire the same field-changed and after-save hooks from
handleConfirm/onChange after the corresponding actions. Keep the existing
NEW_PRODUCT_ID flow, but make sure the quick-create path triggers the same
extension points as the standard editor.
In `@src/dashboard/products/ProductList.tsx`:
- Around line 969-978: The QuickCreateModal stays mounted across open/close
cycles, so its local init state can preserve a transient schema-load failure and
keep quick-create stuck. Update ProductList’s QuickCreateModal usage so the
modal is unmounted when closed (using the existing isQuickCreateOpen state) and
make sure the onCreated flow also closes the overlay before refreshing via
fetchProducts and fetchStatusCounts.
🪄 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: d16a204e-b2de-4ab4-8fa5-ea7f44c0c474
📒 Files selected for processing (4)
.eslintrcincludes/Assets.phpsrc/dashboard/product-editor/QuickCreateModal.tsxsrc/dashboard/products/ProductList.tsx
💤 Files with no reviewable changes (1)
- .eslintrc
Arrange the quick-create form as a row: a fixed 200px image/gallery column beside the name/price fields. RowLayout styles are keyed by the direct child id and only honor flex, so pin the image_gallery column rather than image_id. Scope a 200px image box to the modal via a .quick-create-product-editor compound selector so the full product editor keeps its 232px box.
The schedule date fields were keyed as sale_price_dates_from/to, which have no matching schema field, so DataForm rendered nothing when Create Schedule for Discount was checked. Use the real ids date_on_sale_from / date_on_sale_to so their dependency-driven visibility works.
kzamanbd
changed the title
kzamanbd
added
Needs: Testing
Address CodeRabbit review on the quick-create modal: - Fire `dokan_product_editor_field_changed` and `dokan_product_editor_after_save` from the modal so add-ons wired to the editor hook contract also see quick-create edits and post-save persistence. - Mount QuickCreateModal only while open and close it on success, so a transient schema-load failure resets on the next open instead of leaving quick-create stuck until a full page reload. Update the React products list E2E coverage for the quick-create default: - "Add new product" now opens the quick-create modal when one_step_product_create is on (the Lite default) — assert the modal instead of the create route. - Add an off-path test that disables one_step_product_create and verifies the button routes to the full React create editor, restoring the option after.
Contributor
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 `@tests/pw/tests/e2e/new-products/newProducts.spec.ts`:
- Around line 113-120: The route check in the quick-create modal test is too
loose because `page.url()` containing `#/products` also matches
`#/products/create`. Tighten the assertion in `newProducts.spec.ts` within
`vendor can open the quick-create product modal (React)` to verify the exact
list route (or a more specific list-route pattern) after
`products.clickAddNewProduct()`, while keeping the existing modal visibility
checks for `products.quickCreateModalTitle` and
`products.quickCreateConfirmButton`.
In `@tests/pw/tests/e2e/new-products/newProductsPage.ts`:
- Around line 177-180: `clickAddNewProduct()` is masking failures by swallowing
the quick-create modal wait error; update this method to let the
`quickCreateModalTitle.waitFor(...)` failure propagate instead of catching it,
so the method only succeeds when the modal actually appears. Keep the existing
synchronization flow in `clickAddNewProduct()` and `addNewProductButton`, but
remove the silent fallback so broken clicks are detected reliably.
🪄 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: fe61ee74-c0d2-43e6-9bd0-a9ae4334265f
📒 Files selected for processing (5)
src/dashboard/product-editor/QuickCreateModal.tsxsrc/dashboard/product-editor/index.scsssrc/dashboard/products/ProductList.tsxtests/pw/tests/e2e/new-products/newProducts.spec.tstests/pw/tests/e2e/new-products/newProductsPage.ts
🚧 Files skipped from review as they are similar to previous changes (2)
- src/dashboard/products/ProductList.tsx
- src/dashboard/product-editor/QuickCreateModal.tsx
Member
|
These tooltips have no content on hover: There must be showing something relatable related to the component.. |
dev-shahed
added
Merge Conflict
QA In Progress
and removed
Needs: Testing
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
tests/pw/tests/e2e/new-products/newProductsPage.ts (1)
178-181: 🩺 Stability & Availability | 🟡 MinorDon't swallow the modal wait failure here.
clickAddNewProduct()is documented as synchronizing on the quick-create modal, but the.catch(() => undefined)on line 181 makes it succeed even when the modal never opens, hiding broken clicks and weakening failure detection.🔧 Proposed fix
- await this.quickCreateModalTitle.waitFor({ state: 'visible', timeout: 15000 }).catch(() => undefined); + await this.quickCreateModalTitle.waitFor({ state: 'visible', timeout: 15000 });🤖 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 `@tests/pw/tests/e2e/new-products/newProductsPage.ts` around lines 178 - 181, Remove the `.catch(() => undefined)` from `clickAddNewProduct()` so `quickCreateModalTitle.waitFor()` propagates failures when the modal does not appear, preserving the method’s synchronization guarantee.
🤖 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 `@tests/pw/tests/e2e/new-products/newProductsPage.ts`:
- Around line 184-188: Remove the `.catch(() => undefined)` from
`openSeededProduct()` so `page.waitForURL()` propagates navigation timeout
failures; keep the existing URL pattern and timeout unchanged.
---
Duplicate comments:
In `@tests/pw/tests/e2e/new-products/newProductsPage.ts`:
- Around line 178-181: Remove the `.catch(() => undefined)` from
`clickAddNewProduct()` so `quickCreateModalTitle.waitFor()` propagates failures
when the modal does not appear, preserving the method’s synchronization
guarantee.
🪄 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: f06b3000-77f2-4d17-9cd3-a21019232f75
📒 Files selected for processing (3)
src/dashboard/product-editor/QuickCreateModal.tsxtests/pw/tests/e2e/new-products/newProducts.spec.tstests/pw/tests/e2e/new-products/newProductsPage.ts
🚧 Files skipped from review as they are similar to previous changes (2)
- tests/pw/tests/e2e/new-products/newProducts.spec.ts
- src/dashboard/product-editor/QuickCreateModal.tsx
Contributor
There was a problem hiding this comment.
Caution
Inline review comments failed to post. This is likely due to GitHub's internal server error or limits when posting large numbers of comments. If you are seeing this consistently it is likely a permissions issue. Please check "Moderation" -> "Code review limits" under your organization settings.
Actionable comments posted: 1
♻️ Duplicate comments (1)
tests/pw/tests/e2e/new-products/newProductsPage.ts (1)
178-181: 🩺 Stability & Availability | 🟡 MinorDon't swallow the modal wait failure here.
clickAddNewProduct()is documented as synchronizing on the quick-create modal, but the.catch(() => undefined)on line 181 makes it succeed even when the modal never opens, hiding broken clicks and weakening failure detection.🔧 Proposed fix
- await this.quickCreateModalTitle.waitFor({ state: 'visible', timeout: 15000 }).catch(() => undefined); + await this.quickCreateModalTitle.waitFor({ state: 'visible', timeout: 15000 });🤖 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 `@tests/pw/tests/e2e/new-products/newProductsPage.ts` around lines 178 - 181, Remove the `.catch(() => undefined)` from `clickAddNewProduct()` so `quickCreateModalTitle.waitFor()` propagates failures when the modal does not appear, preserving the method’s synchronization guarantee.
🤖 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 `@tests/pw/tests/e2e/new-products/newProductsPage.ts`:
- Around line 184-188: Remove the `.catch(() => undefined)` from
`openSeededProduct()` so `page.waitForURL()` propagates navigation timeout
failures; keep the existing URL pattern and timeout unchanged.
---
Duplicate comments:
In `@tests/pw/tests/e2e/new-products/newProductsPage.ts`:
- Around line 178-181: Remove the `.catch(() => undefined)` from
`clickAddNewProduct()` so `quickCreateModalTitle.waitFor()` propagates failures
when the modal does not appear, preserving the method’s synchronization
guarantee.
🪄 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: f06b3000-77f2-4d17-9cd3-a21019232f75
📒 Files selected for processing (3)
src/dashboard/product-editor/QuickCreateModal.tsxtests/pw/tests/e2e/new-products/newProducts.spec.tstests/pw/tests/e2e/new-products/newProductsPage.ts
🚧 Files skipped from review as they are similar to previous changes (2)
- tests/pw/tests/e2e/new-products/newProducts.spec.ts
- src/dashboard/product-editor/QuickCreateModal.tsx
🛑 Comments failed to post (1)
tests/pw/tests/e2e/new-products/newProductsPage.ts (1)
184-188: 🩺 Stability & Availability | 🟡 Minor | ⚡ Quick win
Don't swallow the navigation wait failure in
openSeededProduct().The
.catch(() => undefined)on thewaitForURLcall means the method succeeds even when navigation to the product editor never happens. Downstream locator failures from a broken navigation will be harder to debug than a clear timeout here.🔧 Proposed fix
- await this.page.waitForURL(/#\/?products\/\d+\/edit/, { timeout: 15000 }).catch(() => undefined); + await this.page.waitForURL(/#\/?products\/\d+\/edit/, { timeout: 15000 });📝 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.async openSeededProduct(): Promise<void> { await this.seededProductLink.waitFor({ state: 'visible', timeout: 10000 }); await this.seededProductLink.click(); await this.page.waitForURL(/#\/?products\/\d+\/edit/, { timeout: 15000 }); }🤖 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 `@tests/pw/tests/e2e/new-products/newProductsPage.ts` around lines 184 - 188, Remove the `.catch(() => undefined)` from `openSeededProduct()` so `page.waitForURL()` propagates navigation timeout failures; keep the existing URL pattern and timeout unchanged.
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.
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
Summary
New Features
Bug Fixes
Style
Tests