* Enable eslint-plugin-jsx-a11y and add standard rules as warnings or errors * Fix jsx-a11y/anchor-has-content in BooleanSetting and add SettingSet The invisible anchor was presumably supposed to let people jump from one setting's help text to another setting. That didn't work for boolean settings because there's no element with the ID of the setting. Instead of an empty anchor, we needed to give something else that ID. To improve the semantics of those settings, I also put those settings into a fieldset with a legend containing the setting's label text instead of using an actual label element as per how it's done on the MDN. We'll probably end up using the SettingSet for other settings as well. Finally, I also fixed the link used by admin.service.useLetsEncryptDescription.disabled to point to the right place and made it so that the link would open in the current tab. Ideally, I'd also remove the Markdown from that help text, but there's a lot here already. * Fix jsx-a11y/anchor-has-content in CheckboxSetting * Use SettingSet in PasswordSettings to improve semantics and layout The main reason for doing this is to use a proper legend and fieldset for these settings, but it also has the benefit of removing the extra spacing from in between these settings. * Change CopyText to use a button and require an aria-label for it This fixes two ESLint warnings: - This was failing jsx-a11y/anchor-has-content because it was an empty anchor element. I fixed that by giving it an aria-label matching the tooltip of the CopyText, but that required that the label was a string, so I had to change how CopyText is used. I also made the label required so that people give an accessible explanation of what is being copied. - This was also failing jsx-a11y/anchor-is-valid because it should be a button instead of a link. I applied the btn-link class and made it so that that doesn't override the link's height which hopefully doesn't cause problems anywhere else. This is to fix jsx-a11y/anchor-has-content and jsx-a11y/anchor-is-valid in the component. The ESLint plugin is complaining that this component is using an anchor instead of a button element, so I changed that * Turn jsx-a11y/anchor-has-content to be an error * Update snapshots * Remove lingering reference to nested prop which has been removed * Changing system console password settings to a list and update padding for alerts in it * Fix typo in SettingSet * Update E2E tests to enable Elasticsearch by ID and remove duplicate enableElasticSearch helper * Update E2E test to look for a legend instead of a label * Fix typo in snapshot
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