mattermost/webapp
Caleb Roseland dc93745841
test(admin): cover PDND migration in list_table hooks and consumers
The react-beautiful-dnd → Pragmatic Drag and Drop migration in
list_table landed without unit coverage for the new hooks
(`use_list_table_dnd`, `use_list_table_row_dnd`), the new
`row_drop_indicator` component, or the keyboard-reorder path in
`list_table` itself. Add Jest coverage for all four, plus a regression
block in `user_properties_table.test.tsx` that confirms the
arrow-key reorder path on an existing list_table consumer still
calls back into `reorderField` after the migration.

- use_list_table_dnd: monitor registration lifecycle, canMonitor
  kind filtering, full getDropIndex truth table (top/bottom × source
  position), no-op when dropIndex == sourceIndex, useLatest pickup
  of onReorder without re-registration, dragKind change tears down
  and re-registers
- use_list_table_row_dnd: initial null edge, no registration when
  rowElement is null or enabled is false, draggable + dropTarget
  registration, canDrop kind + rowId filter, getData edge payload,
  onDrag/onDragLeave/onDrop edge state transitions, cleanup on
  unmount, custom preview wiring
- row_drop_indicator: render structure, edge prop forwarding,
  edge-change rerender (wrapped in act to settle floating-ui's
  flushSync autoUpdate)
- list_table: drag-handle render variants (no onReorder, enabled,
  isRowDragDisabled), keyboard ArrowUp/ArrowDown dispatch with
  bounds, non-arrow no-op, drag-handle click does not bubble into
  row onRowClick
- user_properties_table: regression coverage that the keyboard
  reorder path still resolves the correct UserPropertyField and
  next index for `reorderField`

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-27 21:35:59 -05:00
..
channels test(admin): cover PDND migration in list_table hooks and consumers 2026-05-27 21:35:59 -05:00
patches MM-45255 Update web app to React 18 (#33858) 2025-10-07 11:11:12 -04:00
platform Merge branch 'master' into MM-67412-system-console-attribute-management 2026-05-27 01:25:57 +02:00
scripts E2E/Playwright: balance shard timing by enabling fullyParallel in CI (#36054) 2026-05-08 21:04:32 +00:00
.gitignore MM-67323 Add system for plugins to use shared package and allow plugins to load asynchronously (#35183) 2026-02-17 12:57:49 -05:00
.npmrc MM-66972 Upgrade to node 24 and main dependencies with babel, webpack and jest (#34760) 2026-01-14 13:14:01 +08:00
AGENTS.md MM-68397 Add shared package to STYLE_GUIDE.md (#36425) 2026-05-06 13:15:40 -04:00
CLAUDE.OPTIONAL.md MM-68397 Add shared package to STYLE_GUIDE.md (#36425) 2026-05-06 13:15:40 -04:00
config.mk
Makefile MM-66867/MM-67318 Add initial version of shared package (#35065) 2026-02-13 14:53:10 -05:00
package-lock.json Fix missing peer fields in package-lock.json (#36744) 2026-05-26 12:52:34 -04:00
package.json update packages to Fix npm audit vulnerabilities (#35810) 2026-05-22 17:57:53 +02:00
README.md simplify CODEOWNERS (#35770) 2026-04-01 13:03:36 +00:00
STYLE_GUIDE.md MM-68397 Add shared package to STYLE_GUIDE.md (#36425) 2026-05-06 13:15:40 -04:00

Mattermost Web App

This folder contains the client code for the Mattermost web app. It's broken up into multiple packages each of which either contains an area of the app (such as playbooks) or shared logic used across other packages (such as the packages located in the platform directory). For anyone who's used to working in the mattermost/mattermost-webapp repo, most of that is now located in channels.

npm Workspaces

To interact with a workspace using npm, such as to add a dependency or run a script, use the --workspace (or --workspaces) flag. This can be done when using built-in npm commands such as npm add or when running scripts. Those commands should be run from this directory.

# Add a dependency to a single package
npm add react --workspace=playbooks

# Build multiple packages
npm run build --workspace=platform/client --workspace=platform/components

# Test all workspaces
npm test --workspaces

# Clean all workspaces that have a clean script defined
npm run clean --workspaces --if-present

To install dependencies for a workspace, simply run npm install from this folder as you would do normally. Most packages' dependencies will be included in the root node_modules, and all packages' dependencies will appear in the package-lock.json. A node_modules will only be created inside a package if one of its dependencies conflicts with that of another package.

Dependency Changes

Any PR that modifies package.json or package-lock.json needs extra scrutiny:

  • No duplicate libraries. Before adding a new dependency, check whether an existing one already covers the same use case. Multiple libraries for the same purpose (e.g., two different date pickers, or Bootstrap 3 and Bootstrap 4 simultaneously) create long-term upgrade pain.
  • License check. New dependencies must not use GPL or similarly restrictive licenses. Dependencies with no license at all should also be flagged.
  • Justify the addition. A new dependency should solve a real problem that existing code or dependencies don't already address. Push back on adding packages for trivial functionality.
  • Version conflicts. Check whether the new dependency introduces conflicting peer dependency versions. Cascading version conflicts are expensive to untangle later and have historically blocked upgrades for months.