mattermost/webapp
Andre Vasconcelos 23b4d8275b
MM-68197 Show classification banners in web and desktop apps (#36490)
* Add Classification Markings admin console page

Adds a new admin console page under Site Configuration for managing
classification markings. This allows system administrators to define
classification levels (e.g., UNCLASSIFIED, SECRET, TOP SECRET) with
associated colors and rank ordering, which will be used for system-wide
and per-channel classification banners.

The page includes:
- Enable/disable toggle backed by the property field system (field
  existence = enabled)
- Country preset dropdown (US DoD, NATO, UK GSCP, Canada, Australia
  PSPF) that auto-fills standard classification levels
- Editable classification levels table with drag-and-drop reorder,
  inline text editing, color picker, and delete
- Auto-switch to "Custom" preset when levels are manually modified
- Confirmation dialog when switching presets would overwrite custom data

Also adds:
- ClassificationMarkings feature flag (default off)
- Generic property field client methods (get/create/patch/delete) for
  the /api/v4/properties/ endpoints
- Enterprise license + feature flag gating on the admin page

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* Fix classification markings: add validation, error handling, and system object type

- Add "system" as a valid property field object type so the
  classification markings API calls succeed
- Surface load errors instead of silently swallowing them (only
  suppress 404 for unconfigured state)
- Validate before save: require at least one level, non-empty names,
  and no duplicates
- Default to custom preset with empty levels on first open
- Add section strings to searchableStrings for admin console search

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* Move classification field to CPA group targeting users

Store the classification markings property field in the
custom_profile_attributes group with object_type 'user' instead of the
attributes group with object_type 'system'. Clear target_id for PSAv2
system target compliance and mark the field as admin-managed.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* Stabilize preset option IDs and add danger warning on preset switch

Hardcode deterministic IDs for all preset classification levels so
switching away and back preserves option IDs, preventing orphaned
property values. Compare only level data (not preset label) for change
detection so cosmetic preset switches don't trigger false save states.

Show a danger modal with red confirm button when changing presets on an
existing field, warning about system-wide impact on classified resources.
The warning appears once per session then allows frictionless switching.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* Remove system object type from property fields

Not needed yet — will be added when system/channel banners are implemented.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* Fix ESLint errors in classification markings admin page

Fix import ordering and remove unused generateId import.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* Address CodeRabbit review feedback for classification markings

- Register property field API endpoints when ClassificationMarkings flag
  is enabled (not just IntegratedBoards) to prevent 404s
- Preserve preset option IDs when creating a new classification field
  instead of blanking them with empty strings
- Add sysconsole read/write permission constants for classification
  markings across server and webapp, and wire up resource-level
  permission checks in the admin definition

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* Add rank attribute to classification marking options

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* Add classification markings permissions migration and read-only support

Add a permissions migration to grant classification markings sysconsole
permissions to existing roles on upgrade. Wire up the disabled prop so
read-only users can view but not edit classification settings. Register
the permission in the Delegated Granular Administration UI.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* Paginate loadField to find classification field beyond first page

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* Fix lint errors and warnings in classification markings

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* Remove classification markings sysconsole permissions; gate on sysadmin instead

Classification markings admin page no longer uses feature-specific
read/write permissions. Visibility is gated on license + feature flag,
editing is gated on system admin role. This avoids coupling
feature-specific permissions to the generic property service.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* Set sysadmin-level permissions on classification markings field creation

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* Use stable IDs instead of array indices for classification level operations

Switch updateLevel/deleteLevel to identify levels by ID rather than
index, sort levels by rank on load, and extract i18n strings.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* Refactor classification markings into extracted helper functions

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* Add tests for classification markings admin console feature

Add unit and component tests covering:
- Pure function tests for detectPreset, optionsToLevels, levelsToOptions,
  processClassificationField, and fetchClassificationField pagination logic
- React component tests for rendering states, validation, and user interactions
- Client4 property field method tests for URL construction and HTTP verbs
- Server routing test verifying routes register with ClassificationMarkings flag
- Feature flag default and serialization test

Export pure functions from classification_markings.tsx to enable direct testing.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* Fix lint errors in classification markings tests

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* Fix test compilation error

* Fix color input auto-filling after 3 hex characters in classification markings

Buffer ColorInput onChange in a LevelColorCell wrapper so the table
doesn't re-render mid-typing, preventing the input from losing its
focus-guarded local state.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* Fixing style issues with color picker z-index

* Added fix to prevent immediate dismissal when clicking inside color picker

* Adding E2E test suite for configuration

* Removing duplicates

* Fixing unrelated linter error

* Fixing test linting issues

* Updating tests to skip appropriately

* Matching configuration to UX specs

* Fixing style lint

* Added informational banner for presentational nature of markings

* Enabling the markings flag on playwright server

* Added missing feature flag to e2e test environment in ci

* Reverting changes to color_input

- Not needed as we're using a custom component

* Added and polished global banner configuration

* Refactoring webapp for readability

- Separating components
- Adding unit tests
- Isolating helper methods into utilities

* Fixing linter errors

* linter fix

* Manually fixing linter issues

* Separating global classification component

* Added persistence of classification marking configuration

* Changing LevelID with LevelName

* Making changes for PR reviews

* Changing property object of classification field to template

* syncing i18n file

* Removing inaccurate note from comments

* PR fixes for UX review

* Cleaning up unused value

* Added GlobalClassificationBanner component

- Made sure it syncs on change by using normal configuration values on it
- Works with "top" and "top_and_bottom"
- Renders on both root and admin_console

* Adding E2E test cases for global classification

* Linter fixes, i18n extract

* PR Fixes

* Linter fix

* Matching default messages

* Fixing type errors

* Fixing pipeline and runtime errors

* Fixing announcementbar rendering on top of global classifications

* Increasing banner & font sizes

* Fixing font size to 12px instead of 16px

- I read it wrong

* Replacing config values with property

* Test linter fixes

* Fixing type errors and go format error

* Making changes needed to align with specs

- Ensuring system_classification is a separate linked property that differs from the template
- Saving the global classification banner values as a propertyvalue

* Added missing arguments in e2e tests

* Added missing conditions for useEffect

- Also fixing E2E error in pipeline

* Fixing issues with V1 and V2 group mismatch

* Fixes for linter errors and coderabbit review

* Addressing more issues found by coderabbit

* Fixing issues found by coderabbit

* Migrating to use system properties

* Ran all linters and prettier

- Resolving coding style drift that happened from not running prettier on the webapp (even though CI doesn't check for this)

* Undoing the prettier changes in webapp

* Cleaning up unwanted autoformatted changes

* Reverting prettier changes to clean diff

* Fixing E2E test

* Import fixes in test

* Applying changes for PR feedback

* Fixing issues with failing e2e tests

* Changing key of selection from name to id

* Replacing field setup in E2E tests to use levelId instead of levelName

* Added classification setup per channel on channel creation

* WIP: Adding classification banner integrated with channel banners

- Using a hook to resolve which values should be evaluated when displaying the banner

* Fixing style of dropdown input for classifications

* Fixing visual issues with dropdown inputs

* Adding E2E Tests and linter fixes

* General fixes and improvements

* Applying linter fixes

* Resolving lingering linter issues

* Updated snapshot and extracted i18n

* Adding test cleanup to prevent failures due to duplicates

* Addressing nitpick comment for test mapping of values

* Applying more fixes to E2E tests

* Improving test coverage and e2e test cleanup

* Resolving type issues

* Refactoring classification constant names an documentation

* Ensuring propertyvalue only stores single id, storing banner text in banner_info

* Fixing issues with linter alongside style issues on header

* Updating test assertion to account for fallback

* Fixing issues found during testing

- Removing custom selection from being an option and turned it into a state
- Ensuring only system administrators can set channel classification levels

* Fixing z-index issue with color input popover

* Setting classification level to lowest available value when switching it on

* Updating unit tests to match new spec for preselection

---------

Co-authored-by: David Krauser <david@krauser.org>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: David Krauser <david@kruser.org>
Co-authored-by: Mattermost Build <build@mattermost.com>
2026-05-19 00:05:26 +03:00
..
channels MM-68197 Show classification banners in web and desktop apps (#36490) 2026-05-19 00:05:26 +03:00
patches MM-45255 Update web app to React 18 (#33858) 2025-10-07 11:11:12 -04:00
platform MM-68197 Show classification banners in web and desktop apps (#36490) 2026-05-19 00:05:26 +03: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 Update jira prepackaged version (#36442) 2026-05-07 13:15:57 +00:00
package.json MM-68261 Add Button component to shared package (#36191) 2026-05-06 09:38:16 -04: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.