Skip to content

feat: rework ManageProducts page#2713

Merged
pylipp merged 7 commits into
masterfrom
copilot/rework-manage-products-page
May 12, 2026
Merged

feat: rework ManageProducts page#2713
pylipp merged 7 commits into
masterfrom
copilot/rework-manage-products-page

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented May 12, 2026

Summary

Reworks the ManageProducts page as described in the problem statement.

Changes

ProductsView.tsx

  • Removed the tabbed layout (no more "BASE PRODUCTS" / "ASSORT STANDARD PRODUCTS" tabs)
  • Now renders ProductsContainer directly with ErrorBoundary + Suspense
  • Added a right-aligned blue link "Check ASSORT Standard Products >" in the same row as the "Manage Products" heading, linking to /bases/:baseId/products/assort

StandardProductsView.tsx (new file)

  • New view routed to /bases/:baseId/products/assort
  • Renders StandardProductsContainer wrapped in ErrorBoundary
  • Has a "Back to Manage Products" button at the top left

App.tsx

  • Added assort route under products pointing to StandardProductsView (same manage_products permission, minBeta: 4)
  • No navigation menu entry added (route-only)

ProductsTable.tsx

  • Added a "Show only ASSORT products" toggle (Switch) to the left of the ColumnSelector, with a regular-weight label
  • Default: off
  • When enabled, filters the table to rows where row.original.isStandard === true
  • Rows are grouped by category with collapsible category header rows (click to expand/collapse); category is hidden from individual product rows and from the ColumnSelector

StandardProductsTable.tsx

  • Rows are grouped by category with collapsible category header rows (click to expand/collapse); category is hidden from individual product rows and from the ColumnSelector

ProductsContainer.tsx / StandardProductsContainer.tsx

  • category column moved to the left-most position in both column definitions
  • category added to hiddenColumns so it is only shown as a group header, not in the table header or child rows

Validation

  • ✅ TypeScript type checking (pnpm check-types)
  • ✅ ESLint (pnpm lint:all)
  • ✅ Prettier (pnpm format:check:all)
  • ✅ Frontend tests (pnpm test:coverage)
  • ✅ Build (pnpm build)

@sentry
Copy link
Copy Markdown

sentry Bot commented May 12, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 76.74%. Comparing base (f30b85d) to head (44a563a).

Additional details and impacted files
@@            Coverage Diff             @@
##           master    #2713      +/-   ##
==========================================
- Coverage   76.83%   76.74%   -0.09%     
==========================================
  Files         300      301       +1     
  Lines       22233    22257      +24     
  Branches     2245     2246       +1     
==========================================
  Hits        17082    17082              
- Misses       5104     5127      +23     
- Partials       47       48       +1     
Flag Coverage Δ
backend 99.65% <ø> (ø)
frontend 69.00% <ø> (-0.11%) ⬇️
sharedComponents 68.72% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copy link
Copy Markdown
Contributor

@pylipp pylipp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot I need one change and one addition

  • make the label "Show only ASSORT products" in regular instead of bold font
  • in both ProductsTable and StandardProductsTable, group the rows by category. The table display should become "nested", with a "category" row above its child product rows. Move the "category" column to the left-most position in the table, and hide it for the child rows. Table sorting should be applied per category. As a bonus, the child rows should be collabsable by clicking the parent category row
  • make sure the type checking, eslint, prettier, build and tests pass
  • don't update the PR description

Copy link
Copy Markdown
Contributor Author

Copilot AI commented May 12, 2026

@copilot I need one change and one addition

  • make the label "Show only ASSORT products" in regular instead of bold font
  • in both ProductsTable and StandardProductsTable, group the rows by category. ...

Done in commit 6654e74. Here's what was changed:

  • FormLabel: fontWeight="normal" added to the "Show only ASSORT products" label
  • Category grouping (both ProductsTable and StandardProductsTable):
    • category column moved to left-most position in both container column definitions
    • category is hidden from useTable (added to hiddenColumns) so it doesn't render in the header or child rows — the category is only shown in the group header rows
    • Rows are grouped by category, sorted alphabetically; each group has a clickable header row showing the category name + item count and a chevron icon (▼/▶)
    • Clicking the category header collapses/expands the child rows
    • Sorting from the column headers applies within each category group
    • Category is excluded from the ColumnSelector (since it's always shown as a group header)

Copilot finished work on behalf of pylipp May 12, 2026 10:38
Copilot AI requested a review from pylipp May 12, 2026 10:38
@pylipp pylipp force-pushed the copilot/rework-manage-products-page branch from 6654e74 to 90b49fc Compare May 12, 2026 10:50
@pylipp pylipp requested a review from Copilot May 12, 2026 10:51
@pylipp
Copy link
Copy Markdown
Contributor

pylipp commented May 12, 2026

@pylipp pylipp marked this pull request as ready for review May 12, 2026 10:54
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR reworks the frontend “Manage Products” experience by removing the tabbed split between base products and ASSORT standard products, introducing a dedicated ASSORT route/view, and adding a client-side toggle to filter the products table to standard (ASSORT) products.

Changes:

  • Replace the tabbed Manage Products layout with a single products view plus a link to a new ASSORT standard products route.
  • Add StandardProductsView and route it at /bases/:baseId/products/assort behind the existing manage_products permission gate.
  • Add a “Show only ASSORT products” toggle to ProductsTable that filters displayed rows to isStandard products.

Reviewed changes

Copilot reviewed 4 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
pnpm-lock.yaml Updates lockfile for the Jotai dependency bump used by the frontend.
front/src/views/Products/StandardProductsView.tsx Adds a new dedicated ASSORT standard products view with back navigation and an error boundary.
front/src/views/Products/ProductsView.tsx Removes the old tabbed layout and adds a link to the new ASSORT view; wraps products in ErrorBoundary + Suspense.
front/src/views/Products/components/ProductsTable.tsx Adds a Switch-based toggle to filter the table to standard (ASSORT) products.
front/src/App.tsx Introduces the new /products/assort route under the existing products route group.
Files not reviewed (1)
  • pnpm-lock.yaml: Language not supported

Comment thread front/src/views/Products/ProductsView.tsx Outdated
Comment thread front/src/views/Products/components/ProductsTable.tsx
@pylipp pylipp merged commit 0ebf6e2 into master May 12, 2026
14 checks passed
@pylipp pylipp deleted the copilot/rework-manage-products-page branch May 12, 2026 12:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants