mirror of
https://github.com/mattermost/mattermost.git
synced 2026-02-03 20:40:00 -05:00
* feat(webapp): migrate i18n extraction from mmjstool to @formatjs/cli
Replace custom mmjstool with industry-standard @formatjs/cli for i18n
message extraction. Adds support for localizeMessage as a recognized
extraction function and enables comprehensive ESLint rules for i18n.
Changes by area:
Dependencies (package.json):
- Add @formatjs/cli v6.7.4
- Remove @mattermost/mmjstool dependency
- Replace i18n-extract script with formatjs command
- Remove mmjstool-specific scripts (clean-empty, check-empty-src)
- Add i18n-extract:check for diff validation
Code (utils.tsx):
- Refactor localizeMessage to accept MessageDescriptor format
- Support {id, defaultMessage, description} parameters
- Maintain Redux store access (non-React context compatible)
- Add comprehensive JSDoc documentation
Linting (.eslintrc.json):
- Configure formatjs settings with additionalFunctionNames
- Enable 9 formatjs ESLint rules including enforce-id (error)
- Ensure all messages require explicit manual IDs
CI/CD (webapp-ci.yml):
- Simplify i18n check to formatjs extraction + diff
- Remove mmjstool and mobile-dir references
Context: Second attempt at PR #25830. Uses manual IDs only with
[id] placeholder pattern to enforce explicit ID requirements.
ESLint will catch missing IDs during development.
* chore(webapp): add temporary i18n reconciliation tooling
Add helper script to analyze conflicts between en.json and
defaultMessage values in code. This tooling will be reverted
after initial migration cleanup is complete.
Tooling added:
- scripts/i18n-reconcile-conflicts.js: Analyzes conflicts
- Detects spelling corrections
- Identifies placeholder mismatches
- Flags significant content changes
- Provides recommendations on which version to keep
- npm script: i18n-reconcile
Usage:
npm run i18n-reconcile
This will be reverted after reconciling the ~50 duplicate message
warnings and determining correct versions for conflicting messages.
* chore(webapp): upgrade eslint-plugin-formatjs and centralize formatjs deps
Move @formatjs/cli to root webapp package.json alongside other formatjs
dependencies for better monorepo organization. Upgrade eslint-plugin-formatjs
from 4.12.2 to 5.4.2 for latest features and bug fixes.
Changes:
- Upgrade eslint-plugin-formatjs: 4.12.2 → 5.4.2
- Move @formatjs/cli to webapp/package.json (from channels)
- Centralize formatjs tooling at monorepo root level
This provides:
- Better dependency management in monorepo
- Latest formatjs ESLint rules and features
- Consistent tooling across workspaces
* feat(webapp): make localizeMessage fully compatible with formatMessage API
Extend localizeMessage to accept a values parameter for placeholder
interpolation, making it fully compatible with react-intl's formatMessage API.
Remove the now-redundant localizeAndFormatMessage function.
Changes to localizeMessage:
- Add values parameter for {placeholder} interpolation
- Use getIntl() for proper ICU message formatting
- Support full formatMessage feature parity outside React contexts
- Update JSDoc with interpolation examples
- Mark as deprecated (prefer useIntl in React components)
Code cleanup:
- Remove localizeAndFormatMessage function (redundant)
- Migrate all localizeAndFormatMessage usages to localizeMessage
- Remove unused imports: getCurrentLocale, getTranslations
- Add getIntl import
Files migrated:
- notification_actions.tsx: notification.crt message
- app_command_parser_dependencies.ts: intlShim formatMessage
This consolidates i18n logic and provides a single, feature-complete
localization function for non-React contexts.
Example usage:
// Before (old function)
localizeAndFormatMessage(
{id: 'welcome', defaultMessage: 'Hello {name}'},
{name: 'John'}
)
// After (consolidated)
localizeMessage(
{id: 'welcome', defaultMessage: 'Hello {name}'},
{name: 'John'}
)
* refactor(i18n): remove intlShim abstraction, use IntlShape directly
Remove intlShim wrapper and use react-intl's IntlShape type throughout.
Key Changes:
- Remove intlShim constant from app_command_parser_dependencies.ts
- Update errorMessage() signature to accept IntlShape parameter
- Use IntlShape for intl properties in AppCommandParser and ParsedCommand
- Call getIntl() at function start in actions (command.ts, marketplace.ts)
- Pass IntlShape to AppCommandParser and doAppSubmit consistently
Files Modified:
- app_command_parser_dependencies.ts: Remove intlShim, update errorMessage
- app_command_parser.ts: Use IntlShape type
- command.ts, marketplace.ts: Call getIntl() early, pass to parser
- app_provider.tsx, command_provider.tsx: Use getIntl() in constructor
- apps.ts: Update doAppSubmit signature
Benefits: Better type safety, standard react-intl patterns, eliminates
unnecessary abstraction.
Context: Part of migration to @formatjs/cli tooling.
* refactor(webapp): remove deprecated t() function and refactor login validation
Remove the deprecated t() function that was used as a marker for the old
mmjstool extraction. With @formatjs/cli, this is no longer needed as
extraction happens directly from formatMessage calls.
Changes:
- Remove t() function definition from utils/i18n.tsx
- Remove t() import and marker calls from login.tsx
- Refactor login validation logic from multiple if statements to a clean
switch(true) pattern that evaluates boolean combinations directly
- Add helpful comments documenting the structure of login method combinations
- Add default case as safety fallback
The switch(true) pattern eliminates the need to build a key string and makes
the login method combination logic clearer and more maintainable.
Prompt: Remove deprecated t() translation marker function used by old mmjstool.
Refactor login validation from if blocks to switch(true) with boolean cases.
* refactor(i18n): share IntlProvider's intl instance with getIntl()
Make getIntl() return the same IntlShape instance that IntlProvider creates,
ensuring consistency between React components (using useIntl()) and non-React
contexts (using getIntl()).
Changes:
- Add intlInstance storage in utils/i18n.tsx
- Export setIntl() function to store the intl instance
- Modify getIntl() to return stored instance if available, with fallback to
createIntl() for tests and early initialization
- Add IntlCapture component in IntlProvider that uses useIntl() hook to
capture and store the intl instance via setIntl()
Benefits:
- Single source of truth: Both React and non-React code use the same IntlShape
- Consistent translations: No duplicate translation loading or potential desync
- Leverages IntlProvider's translation loading lifecycle automatically
- Maintains fallback for edge cases where IntlProvider hasn't mounted yet
Prompt: Refactor getIntl() to reuse IntlProvider's intl instance instead of
creating a separate instance, ensuring both React and non-React contexts use
the same translations and intl configuration.
* 1
* exclude test files
* reset en.json
* refactor(i18n): inline message ID constants for formatjs extraction
Replace dynamic ID references with literal strings to enable proper formatjs
extraction. Formatjs can only extract from static message IDs, not from
variables or computed IDs.
Changes:
- configuration_bar.tsx: Inline AnnouncementBarMessages constants to literal
string IDs ('announcement_bar.error.past_grace', 'announcement_bar.error.preview_mode')
- system_analytics.test.tsx: Replace variable IDs (totalPlaybooksID,
totalPlaybookRunsID) with literal strings ('total_playbooks', 'total_playbook_runs')
- password.tsx: Use full message descriptor from passwordErrors object instead
of dynamic ID with hardcoded defaultMessage. The errorId is still built
dynamically using template strings, but the actual message is looked up from
the passwordErrors defineMessages block where formatjs can extract it.
This eliminates all "[id]" placeholder entries from extraction output and
ensures all messages have proper extractable definitions.
Prompt: Fix dynamic message ID references that formatjs extraction can't parse.
Inline constants and use message descriptor lookups to enable clean extraction
without [id] placeholders.
* fix(i18n): add missing defaultMessage to drafts.tooltipText
The drafts.tooltipText FormattedMessage had an empty defaultMessage, causing
formatjs extraction to output an empty string for this message.
Added the proper defaultMessage with plural formatting for draft and scheduled
post counts.
Prompt: Fix empty defaultMessage in drafts tooltip causing extraction issues.
* feat(i18n): add --preserve-whitespace flag to formatjs extraction
Add the --preserve-whitespace flag to ensure formatjs extraction maintains
exact whitespace from defaultMessage values. This is important for messages
with intentional formatting like tabs, multiple spaces, or line breaks.
Prompt: Add --preserve-whitespace to i18n extraction to maintain exact formatting.
* feat(i18n): add custom formatjs formatter matching mmjstool ordering
Create custom formatter that replicates mmjstool's sorting behavior:
- Case-insensitive alphabetical sorting
- Underscore (_) sorts before dot (.) to match existing en.json ordering
- Simple key-value format (extracts defaultMessage)
The underscore-before-dot collation matches mmjstool's actual behavior and
reduces diff size by 50% compared to standard alphabetical sorting.
Changes:
- scripts/formatter.js: Custom compareMessages, format, and compile functions
- package.json: Use --format scripts/formatter.js instead of --format simple
Prompt: Create custom formatjs formatter matching mmjstool's exact sorting
behavior including underscore-before-dot collation to minimize migration diff.
* feat(i18n): enhance reconciliation script with git history metadata
Add git log lookups to show when each message was last modified in both
en.json and code files. This enables data-driven decisions about which
version to keep when resolving conflicts.
Enhancements:
- getEnJsonLastModified(): Find when an en.json entry last changed
- findCodeFile(): Locate source file for a message ID (handles id= and id:)
- getCodeLastModified(): Get last modification date for source files
- Caching for performance (minimizes git operations)
Output includes:
📅 en.json: [date] | [hash] | [commit message]
📅 code: [date] | [hash] | [commit message]
📂 file: [source file path]
Analysis shows en.json entries from 2023 while code actively updated
2024-2025, indicating code is more authoritative.
Prompt: Add git history to reconciliation report showing modification dates
for data-driven conflict resolution decisions.
* feat(i18n): add optional duplicate message ID check script
Add i18n-extract:check-duplicates script that fails if the same message ID
has different defaultMessages in multiple locations. This is kept as an
optional standalone script rather than auto-chained with i18n-extract to
allow the migration to proceed while duplicates are addressed separately.
Usage:
npm run i18n-extract:check-duplicates
The script runs formatjs extract to /dev/null and checks stderr for
"Duplicate message id" warnings, failing if any are found.
Prompt: Add optional duplicate ID check as standalone npm script for gradual
migration without blocking on existing duplicate message IDs.
* about.enterpriseEditionLearn
* admin.accesscontrol.title
* eslint-plugin-formatjs version to eslint 8 compat
* admin.channel_settings.channel_detail.access_control_policy_title
* admin.connectionSecurityTls
- now: admin.connectionSecurityTls.title
* admin.customProfileAttribDesc
now:
- admin.customProfileAttribDesc.ldap
- admin.customProfileAttribDesc.saml
* admin.gitlab.clientSecretExample
* package-lock
* admin.google.EnableMarkdownDesc
- fix err `]` in admin.google.EnableMarkdownDesc.openid
- now:
- admin.google.EnableMarkdownDesc.oauth
- admin.google.EnableMarkdownDesc.openid
* admin.image.amazonS3BucketExample
- now:
- admin.image.amazonS3BucketExample
- admin.image.amazonS3BucketExampleExport
* admin.license.trialCard.contactSales
* admin.log.AdvancedLoggingJSONDescription
- now:
- admin.log.AdvancedLoggingJSONDescription
- admin.log.AdvancedAuditLoggingJSONDescription
* admin.rate.noteDescription
- now
- admin.rate.noteDescription
- admin.info_banner.restart_required.desc (3)
* admin.system_properties.user_properties.title
- now:
- admin.system_properties.user_properties.title
- admin.accesscontrol.user_properties.link.label
* admin.system_users.filters.team.allTeams, admin.system_users.filters.team.noTeams
* admin.user_item.email_title
* announcement_bar.error.preview_mode
* channel_settings.error_purpose_length
* deactivate_member_modal.desc
- now:
- deactivate_member_modal.desc
- deactivate_member_modal.desc_with_confirmation
* deleteChannelModal.canViewArchivedChannelsWarning
* edit_channel_header_modal.error
* filtered_channels_list.search
- now:
- filtered_channels_list.search
- filtered_channels_list.search.label
* flag_post.flag
* generic_icons.collapse
* installed_outgoing_oauth_connections.header
* intro_messages.group_message
* intro_messages.notificationPreferences
- now:
- intro_messages.notificationPreferences
- intro_messages.notificationPreferences.label
* katex.error
* multiselect.placeholder
- now:
- multiselect.placeholder
- multiselect.placeholder.addMembers
* post_info.pin, post_info.unpin, rhs_root.mobile.flag
take en.json
* texteditor.rewrite.rewriting
* user_groups_modal.addPeople
split to user_groups_modal.addPeople.field_title
* user.settings.general.validImage
take en.json
* userSettings.adminMode.modal_header
take en.json
* webapp.mattermost.feature.start_call
split to user_profile.call.start
* admin.general.localization.enableExperimentalLocalesDescription
take en.json
* login.contact_admin.title, login.contact_admin.detail
take en.json
* fix: correct spelling of "complementary" in accessibility sections
* Revert "about.enterpriseEditionLearn"
This reverts commit
|
||
|---|---|---|
| .. | ||
| .ci | ||
| cypress | ||
| playwright | ||
| .gitignore | ||
| Makefile | ||
| README.md | ||
E2E testing for the Mattermost web client
This directory contains the E2E testing code for the Mattermost web client.
How to run locally
For test case development
Please refer to the dedicated developer documentation for instructions.
For pipeline debugging
The E2E testing pipeline's scripts depend on the following tools being installed on your system: docker, docker-compose, make, git, jq, node, and some common utilities (coreutils, findutils, bash, awk, sed, grep)
Instructions, tl;dr: create a local branch with your E2E test changes, then open a PR to the mattermost-server repo targeting the master branch (so that CI will produce the image that docker-compose needs), then run make in this directory.
Instructions, detailed:
- (optional, undefined variables are set to sane defaults) Create the
.ci/envfile, and populate it with the variables you need out of the following list:
SERVER: eitheronprem(default) orcloud.CWS_URL(mandatory whenSERVER=cloud, only used in such case): when spinning up a cloud-like test server that communicates with a test instance of a customer web server.TEST: eithercypress(default),playwright, ornone(to avoid creating the cypress/playwright sidecar containers, e.g. if you only want to launch a server instance)ENABLED_DOCKER_SERVICES: a space-separated list of services to start alongside the server. Default topostgres inbucket, for smoke test purposes and for lightweight and faster start-up time. Depending on the test requirement being worked on, you may want to override as needed, as such:- Cypress full tests require all services to be running:
postgres inbucket minio openldap elasticsearch keycloak. - Cypress smoke tests require only the following:
postgres inbucket. - Playwright full tests require only the following:
postgres inbucket.
- Cypress full tests require all services to be running:
- The following variables, will be passed over to the server container:
MM_LICENSE(no enterprise features will be available if this is unset; required whenSERVER=cloud), and the explodedMM_ENV(a comma-separated list of env var specifications) - The following variables, which will be passed over to the cypress container:
BRANCH,BUILD_ID,CI_BASE_URL,BROWSER,AUTOMATION_DASHBOARD_URLandAUTOMATION_DASHBOARD_TOKEN - The
SERVER_IMAGEvariable can also be set if you want to select a custom mattermost-server image. If not specified, the value of theSERVER_IMAGE_DEFAULTvariable defined in file.ci/.e2ercis used. - The
TEST_FILTERvariable can also be set, to customize which tests you want Cypress/Playwright to run. If not specified, only the smoke tests will run- Its format depends on which tool is used: for Cypress, please check the
e2e-tests/cypress/run_tests.jsfile for details. For Playwright, it can simply be populated with arguments you want to give to theplaywright testcommand.
- Its format depends on which tool is used: for Cypress, please check the
- More variables may be required to configure reporting and cloud interactions. Check the content of the
.ci/report.*.shand.ci/server.cloud_*.shscripts for reference.
- (optional)
make start-dashboard && make generate-test-cycle: start the automation dashboard in the background, and initiate a test cycle on it, for the givenBUILD_ID
- NB: the
BUILD_IDvalue should stay the same across themake generate-test-cyclecommand, and the subsequentmake(see next step). If you need to initiate a new test cycle on the same dashboard, you'll need to change theBUILD_IDvalue and rerun bothmake generate-test-cycleandmake. - Note that part of the dashboard functionality assumes the
BUILD_IDto have a certain format (see here for details). This is not relevant for local running, but it's important to note in the testing pipelines. - This also automatically sets the
AUTOMATION_DASHBOARD_URLandAUTOMATION_DASHBOARD_TOKENvariables for the cypress container - Note that if you run the dashboard locally, but also specify other
AUTOMATION_DASHBOARD_*variables in your.ci/envfile, the latter variables will take precedence. - The dashboard is used for orchestrating specs with parallel test runs and is typically used in CI.
- Only Cypress is currently using the dashboard; Playwright is not.
make: start and prepare the server, then run the Cypress smoke tests
- You can track the progress of the run in the
http://localhost:4000/cyclesdashboard if you launched it locally - For
SERVER=cloudruns, you'll need to first create a cloud customer against the specifiedCWS_URLservice by runningmake cloud-init. The user isn't automatically removed, and may be reused across multiple runs until you runmake cloud-teardownto delete it. - If you want to run the Playwright tests instead of the Cypress ones, you can run
TEST=playwright make - If you just want to run a local server instance, without any further testing, you can run
TEST=none make - If you're using the automation dashboard, you have the option of sharding the E2E test run: you can launch the
makecommand in parallel on different machines (NB: you must use the sameBUILD_IDandBRANCHvalues that you used formake generate-test-cycle) to distribute running the test cases across them. When doing this, you should also set on each machine theCI_BASE_URLvariable to a value that uniquely identifies the instance wheremakeis running. - This script will also parse the local test results, and write a
e2e-tests/${TEST}/results/summary.jsonfile containing the following keys:passed,failedandfailed_expected(the total number of testcases that were run is the sum of these three numbers)
make stop: tears down the server (and the dashboard, if running)
- This will stop and cleanup all of the E2E testing containers, including the database and its persistent volume.
- This also implicitly runs
make clean, which also removes any generated environment or docker-compose files.
Notes:
- Setting a variable in
.ci/envis functionally equivalent to exporting variables in your current shell's environment, before invoking the makefile. - The
.ci/.env.*files are auto-generated by the pipeline scripts and aren't meant to be modified manually. The only file you should edit to control the containers' environment is.ci/env, as specified in the instructions above. - All of the variables in
.ci/envmust be set before themake generate-servercommand is run (or, if using the dashboard, before themake generate-test-cyclecommand). Modifying that file afterward has no effect because the containers' env files are generated in that step. - If you restart the dashboard at any point, you must also restart the server containers, so that it picks up the new IP of the dashboard from the newly generated
.env.dashboardfile - If new variables need to be passed to any of the containers, here are the general principles to follow when deciding where to populate it:
- If their value is fixed (e.g. a static server configuration), these may be simply added to the
docker_compose_generator.shfile, to the appropriate container. - If you need to introduce variables that you want to control from
.ci/env: you need to update the scripts under the.ci/dir and configure them to write the new variables' values over to the appropriate.env.*file. In particular, avoid defining variables that depend on other variables within the docker-compose override files: this is to ensure uniformity in their availability and simplifies the question of what container has access to which variable considerably. - Exceptions are of course accepted wherever it makes sense (e.g. if you need to group variables based on some common functionality)
- If their value is fixed (e.g. a static server configuration), these may be simply added to the
- The
reportMake target is meant for internal usage. Usage and variables are documented in the respective scripts. make start-serverwon't cleanup containers that don't change across runs. This means that you can use it to emulate a Mattermost server upgrade while retaining your database data by simply changing theSERVER_IMAGEvariable on your machine, and then re-runningmake start-server. But this also means that if you want to run a clean local environment, you may have to manually runmake stopto cleanup any running containers and their volumes, which include e.g. the database.
For code changes:
make fmt-cito format and check yaml files and shell scripts.
For test stressing an E2E testcase
For Cypress:
- Enter the
cypress/subdirectory - Identify which test files you want to run, and how many times each. For instance: suppose you want to run
create_a_team_spec.jsanddemoted_user_spec.js(which you can locate with thefindcommand, undercypress/tests/), each run 3 times - Run the chosen testcases the desired amount of times:
node run_tests.js --include-file=create_a_team_spec.js,demoted_user_spec.js --invert --stress-test-count=3
- Your system needs to be setup for Cypress usage, to be able to run this command. Refer to the E2E testing developer documentation for this.
- The
cypress/results/testPasses.jsonfile will count, for each of the testfiles, how many times it was run, and how many times each of the testcases contained in it passed. If the attempts and passes numbers do not match, that specific testcase may be flaky.
For Playwright: WIP