* Add PluginMetadataPanel to plugin management and settings pages Surface plugin ID, version, website, and release notes links on the Plugin Management list and individual plugin settings pages so admins do not need to switch between pages to find plugin identity information. Co-authored-by: Ben Schumacher <hanzei@users.noreply.github.com> * Simplify plugin metadata to a single inline line Show plugin identity as 'Name (id - version - website)' on Plugin Management and in the plugin settings page header instead of a multi-row metadata block. Co-authored-by: Ben Schumacher <hanzei@users.noreply.github.com> * Refine plugin metadata line with code ID, name link, and v prefix Style the plugin ID as inline code with a copy button, link the display name to the website URL, and prefix versions with v when missing. Co-authored-by: Ben Schumacher <hanzei@users.noreply.github.com> * Move plugin metadata into settings page content area Render the metadata line in the plugin settings content body instead of the oversized admin header so it matches Plugin Management styling. Use the installed plugin status version when available. Co-authored-by: Ben Schumacher <hanzei@users.noreply.github.com> * Fix lint issues in plugin metadata panel files Co-authored-by: Ben Schumacher <hanzei@users.noreply.github.com> * Fix stylelint property order in plugin metadata scss Co-authored-by: Ben Schumacher <hanzei@users.noreply.github.com> * Add i18n string for plugin metadata release notes link Co-authored-by: Ben Schumacher <hanzei@users.noreply.github.com> * Harden plugin metadata edge cases and link version to release notes Fall back to the plugin ID when the display name is empty, omit the version segment when no version is installed, and link the version text to release notes instead of showing a separate release notes label. Co-authored-by: Ben Schumacher <hanzei@users.noreply.github.com> * Simplify plugin ID styling and shrink copy icon Co-authored-by: Ben Schumacher <hanzei@users.noreply.github.com> * Style plugin metadata parenthetical as muted technical text Wrap the ID and version in a smaller, muted segment and use monospace for the plugin ID without code-block highlighting. Co-authored-by: Ben Schumacher <hanzei@users.noreply.github.com> * Update plugin management snapshots for muted metadata styling Co-authored-by: Ben Schumacher <hanzei@users.noreply.github.com> * Add visually hidden page heading for plugin settings pages Plugin settings pages hide the AdminHeader title in favor of the inline metadata panel, which left no accessible page heading. Render an sr-only h1 with the schema title so assistive tech retains page semantics without changing the visual layout. Co-authored-by: Ben Schumacher <hanzei@users.noreply.github.com> * Make plugin ID text clickable to copy Replace the separate copy icon with click-to-copy on the monospace plugin ID. The ID shows a pointer cursor and link color on hover, with the same Copy text / Copied tooltip feedback as before. Co-authored-by: Ben Schumacher <hanzei@users.noreply.github.com> * Use shared useCopyText hook for plugin ID copy Co-authored-by: Ben Schumacher <hanzei@users.noreply.github.com> * Fix stylelint property order in plugin metadata panel styles Co-authored-by: Ben Schumacher <hanzei@users.noreply.github.com> * Address review: add name/id test and memoize copy handlers Add an integration test where plugin display name differs from plugin ID. Use useCallback and useMemo in PluginMetadataId to avoid recreating handlers and tooltip content on every render. Co-authored-by: Ben Schumacher <hanzei@users.noreply.github.com> --------- Co-authored-by: Cursor Agent <cursoragent@cursor.com> Co-authored-by: Ben Schumacher <hanzei@users.noreply.github.com>
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.
Useful Links
- Developer setup, now included with the Mattermost server developer setup
- Web app developer documentation
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.