ManageProducts: group by category

[pylipp]

https://trello.com/c/ECwkpzcz
https://github.com/copilot/c/94c27cc0-7da8-4eaf-bd40-9848d508897d

[sentry]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 76.86%. Comparing base (0ebf6e2) to head (b6d05a9).

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #2714      +/-   ##
==========================================
+ Coverage   76.74%   76.86%   +0.12%     
==========================================
  Files         301      301              
  Lines       22257    22222      -35     
  Branches     2246     2246              
==========================================
  Hits        17082    17082              
+ Misses       5127     5092      -35     
  Partials       48       48              

Flag	Coverage Δ
backend	99.65% <ø> (ø)

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.

[pylipp]

@copilot fix the build; then apply the same changes (use category grouping, remove paginating) to StandardProductsContainer

[Copilot]

@copilot fix the build; then apply the same changes (use category grouping, remove paginating) to StandardProductsContainer

Done in commit 4c5e325. Changes made:

1. Build fix: Removed invalid mb={2} prop from FilteringSortingTableHeader in ProductsTable.tsx
2. StandardProductsTable: Replaced usePagination with useGroupBy, added groupBy: ["category"] to initial state, updated row rendering to show category header rows with product sub-rows, removed pagination UI controls
3. StandardProductsContainer: Switched from useQuery to useSuspenseQuery, removing the manual loading/skeleton state (consistent with ProductsContainer)

The return null at the end of the rows map is intentional — with groupBy: ["category"] active, all top-level rows are grouped rows and product data rows are sub-rows within each group. This matches the identical pattern already used in ProductsTable.tsx.

[Copilot]

Pull request overview

This PR updates the “Manage Products” views to display products grouped by category, shifting the rendering logic to use react-table’s useGroupBy plugin and adjusting data-fetching for standard products to use Apollo’s suspense API.

Changes:

• Add useGroupBy + groupBy: ["category"] to both Products and Standard Products tables and render grouped headers with sub-rows.
• Remove pagination UI/logic in both tables (switch from page to rows).
• Switch StandardProductsContainer from useQuery to useSuspenseQuery and simplify table data memoization.

Reviewed changes

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

File	Description
front/src/views/Products/components/StandardProductsTable.tsx	Adds category grouping and renders grouped rows; removes pagination path.
front/src/views/Products/components/StandardProductsContainer.tsx	Switches to useSuspenseQuery and removes explicit loading/error handling.
front/src/views/Products/components/ProductsTable.tsx	Adds category grouping and grouped-row rendering; removes pagination path.
front/src/views/Products/components/ProductsContainer.tsx	Makes name sorting more null-safe.

[pylipp]

@copilot after the review, implement these changes:

• switch back to useQuery in StandardProductsContainer
• in both ProductsTable and StandardProductsTable,
  • fix the spacer colSpan using the visible column count
  • add an appropriate key to the top level elements returned from rows.map()
  • remove stale pageIndex/pageSize from initialState
• don't update the PR description
• make sure type checking, eslint, prettier, build and product-related FE tests pass

[Copilot]

@copilot after the review, implement these changes:

• switch back to useQuery in StandardProductsContainer
• in both ProductsTable and StandardProductsTable,
  ...

Done in commit 88d2392:

• StandardProductsContainer reverted to useQuery with loading/error handling and <TableSkeleton /> fallback
• Spacer row and group header colSpan in both tables now use headerGroups[0]?.headers.length (visible column count)
• <> replaced with <React.Fragment key={row.id}> for proper list reconciliation in both tables
• Stale pageIndex/pageSize removed from ProductsTable initialState
• Also fixed a pre-existing build/lint error in EnableStandardProductView.tsx (unused baseId left by commit 0c98abb) so the build passes cleanly

[Copilot]

Pull request overview

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

Comments suppressed due to low confidence (2)

front/src/views/Products/components/ProductsTable.tsx:242

• The body renderer returns null for any top-level row that is not a grouped row. If grouping is ever disabled (e.g. via react-table state changes, column config, or future UI), the table will render empty even though rows contains leaf rows. Add a fallback rendering path for non-grouped rows (the same as the previous non-grouped row rendering).

              );
            }

            return null;
          })}

front/src/views/Products/components/StandardProductsTable.tsx:194

• The renderer returns null for any top-level row that is not grouped. This will result in an empty table if grouping is ever turned off (now or in a future change), even though leaf rows exist. Add a non-grouped rendering branch (as before) so the table still works without grouping.

              );
            }

            return null;
          })}