mirror of
https://github.com/mattermost/mattermost.git
synced 2026-02-03 20:40:00 -05:00
0885f56010
Some checks are pending
API / build (push) Waiting to run
Server CI / Compute Go Version (push) Waiting to run
Server CI / Check mocks (push) Blocked by required conditions
Server CI / Check go mod tidy (push) Blocked by required conditions
Server CI / check-style (push) Blocked by required conditions
Server CI / Check serialization methods for hot structs (push) Blocked by required conditions
Server CI / Vet API (push) Blocked by required conditions
Server CI / Check migration files (push) Blocked by required conditions
Server CI / Generate email templates (push) Blocked by required conditions
Server CI / Check store layers (push) Blocked by required conditions
Server CI / Check mmctl docs (push) Blocked by required conditions
Server CI / Postgres with binary parameters (push) Blocked by required conditions
Server CI / Postgres (push) Blocked by required conditions
Server CI / Postgres (FIPS) (push) Blocked by required conditions
Server CI / Generate Test Coverage (push) Blocked by required conditions
Server CI / Run mmctl tests (push) Blocked by required conditions
Server CI / Run mmctl tests (FIPS) (push) Blocked by required conditions
Server CI / Build mattermost server app (push) Blocked by required conditions
Web App CI / check-lint (push) Waiting to run
Web App CI / check-i18n (push) Blocked by required conditions
Web App CI / check-types (push) Blocked by required conditions
Web App CI / test (platform) (push) Blocked by required conditions
Web App CI / test (mattermost-redux) (push) Blocked by required conditions
Web App CI / test (channels shard 1/4) (push) Blocked by required conditions
Web App CI / test (channels shard 2/4) (push) Blocked by required conditions
Web App CI / test (channels shard 3/4) (push) Blocked by required conditions
Web App CI / test (channels shard 4/4) (push) Blocked by required conditions
Web App CI / upload-coverage (push) Blocked by required conditions
Web App CI / build (push) Blocked by required conditions
* Add CLAUDE.md documentation files for webapp directories - Add root webapp CLAUDE.md with overview and build commands - Add channels CLAUDE.md with architecture and testing info - Add documentation for actions, components, selectors, utils - Add documentation for sass, tests, and mattermost-redux - Add platform documentation for client and types - Update .gitignore * Add CLAUDE docs and allow tracking * Clarify CLAUDE instructions for i18n workflow * Refactor webapp/CLAUDE.md into a nested hierarchy Decomposed the monolithic webapp/CLAUDE.md into focused, context-aware files distributed across the directory structure: - webapp/CLAUDE.md (Root overview) - webapp/channels/CLAUDE.md (Channels workspace) - webapp/channels/src/components/CLAUDE.md - webapp/channels/src/actions/CLAUDE.md - webapp/channels/src/selectors/CLAUDE.md - webapp/channels/src/packages/mattermost-redux/CLAUDE.md - webapp/platform/CLAUDE.md (Platform workspace) - webapp/platform/client/CLAUDE.md * Move files to optional, then add script to move them to proper claud.md
73 lines
4.1 KiB
Markdown
73 lines
4.1 KiB
Markdown
# CLAUDE: `webapp/channels/`
|
||
|
||
## Purpose
|
||
- Main Mattermost web client workspace; almost every UI or Redux change flows through this package.
|
||
- Runs as an npm workspace – use `--workspace=channels` when installing deps or running scripts.
|
||
- Builds a federated bundle consumed by the server and plugins.
|
||
|
||
## Local Commands
|
||
- `npm run dev-server --workspace=channels` – hot-reload development server.
|
||
- `npm run build --workspace=channels` – production bundle (invokes webpack config in this folder).
|
||
- `npm run test --workspace=channels` / `npm run test:watch --workspace=channels`.
|
||
- `npm run check --workspace=channels` and `npm run fix --workspace=channels` for lint/style fixes.
|
||
|
||
## Directory Structure (src/)
|
||
|
||
```
|
||
src/
|
||
├── components/ # React components organized by feature (300+ subdirectories)
|
||
├── actions/ # Redux action creators (sync and async thunks)
|
||
├── selectors/ # Redux selectors for deriving state
|
||
├── reducers/ # Redux reducers for state management
|
||
├── utils/ # Utility functions and helpers
|
||
├── tests/ # Test utilities and helpers
|
||
├── i18n/ # Internationalization files
|
||
├── sass/ # Global SCSS styles and theme variables
|
||
├── types/ # TypeScript type definitions specific to the web app
|
||
├── store/ # Redux store configuration with redux-persist
|
||
├── plugins/ # Plugin integration points
|
||
├── packages/
|
||
│ └── mattermost-redux/ # Core Redux layer (actions, reducers, selectors)
|
||
├── entry.tsx # Application entry point
|
||
└── root.tsx # Root React component
|
||
```
|
||
|
||
## State Management
|
||
- **Redux + Redux Thunk**: Central state management using Redux with thunk middleware for async actions.
|
||
- **Redux Persist**: State persistence using localForage with cross-tab synchronization.
|
||
- **Mattermost Redux**: Core Redux logic (`state.entities.*` for server data).
|
||
- **State Views**: `state.views.*` for UI state (modals, sidebars, preferences).
|
||
- **Client4**: Singleton HTTP client for API requests. Should only be used in Redux actions.
|
||
|
||
## Key Files
|
||
- `package.json` – workspace-specific scripts, env vars, and browserlist targets.
|
||
- `webpack.config.js` – module federation + alias map; update remotes or exposes here only when necessary.
|
||
- `jest.config.js` – test roots, transformers, moduleNameMapper for workspace aliases.
|
||
- `tsconfig.json` – project references for `src`, `tests`, and embedded packages.
|
||
|
||
## TypeScript Configuration
|
||
- **Strict Mode**: TypeScript strict mode enabled with `strictNullChecks`
|
||
- **Path Aliases**: Configured for `@mattermost/*` packages and `mattermost-redux/*`
|
||
- **Composite Projects**: Uses TypeScript project references for workspace packages
|
||
- **No Any**: Avoid `any` types; legacy code may have them but new code should be typed
|
||
|
||
## Module Federation Notes
|
||
- Use `channels/src/module_registry.ts` to register async chunks; never import plugin remotes synchronously.
|
||
- Exposed modules must stay backward compatible; document any break in `webapp/README.md`.
|
||
- When adding a new remote, coordinate with server config (see `webpack.config.js` → `remotes`).
|
||
- Prefer wrapping plugin surfaces in adapter components so that federated boundaries remain stable.
|
||
|
||
## Dependencies & UI Stack
|
||
- React 18, Redux 5, React Router 5, React Intl, Floating UI, Compass Icons, Monaco.
|
||
- Follow `webapp/STYLE_GUIDE.md → Dependencies & Packages` before introducing new libs.
|
||
- `@mattermost/types`, `@mattermost/client`, and `platform/components` are first-party packages; import via full package names, not deep relative paths.
|
||
|
||
## Common Gotchas
|
||
- Postinstall builds platform packages—if TypeScript types feel stale, re-run `npm install` at repo root.
|
||
- Use `npm add <pkg> --workspace=channels` to avoid polluting other workspaces.
|
||
- Environment-specific overrides live in `config/` on the server side; do not hard-code URLs or feature flags here.
|
||
- Webpack aliases mirror tsconfig paths; keep both in sync when adding a new alias.
|
||
|
||
## References
|
||
- `webapp/STYLE_GUIDE.md → Automated Style Checking`, `Dependencies & Packages`.
|
||
- `webapp/README.md` for high-level architecture and release info.
|