f11ed97a5c
* Remove label from add_user_to_channel_modal.tsx The label isn't needed here because it was incorrectly used for error text. I had to add the display: block to the .modal__error class to ensure the top margin was the same as before, but I could remove the font-weight from that class since it was only needed to counteract the weight that Bootstrap adds for labels. : * Remove label from bleve_settings.tsx and replace with SettingSet It doesn't seem correct to use a label here because it isn't tied to a single form field. Since this component is a set of fields (a fieldset, if you will) that looks like a setting, it seemed like a good place to use SettingSet. * Remove label from brand_image_setting.tsx, replace with SettingSet, and improve a11y of upload button Like the last commit for BleveSettings, this setting is multiple inputs, so it makes more sense as a fieldset/SettingSet. While doing that, I also changed how the file upload button in BrandImageSetting works because the new HTML broke how it worked before. Previously, we overlayed an transparent file input over the button for it, but the sizing for that got messed up, and that causes some weird accessibility and breaks some things like hover effects. Instead, the file input is now fully hidden, and clicking on the button triggers the file input programatically. The behaviour is otherwise the same, but the button now shows the hover style and there's only one keyboard focus for the button. * Remove some more labels from PluginManagement and use SettingSet there * Add for attribute to labels in compliance_reports.tsx * Use SettingSet and add the for attribute to another label in DatabaseSettings * Use SettingSet in ElasticsearchSettings * Add for attribute to label in GroupProfile * Don't use label for help text in TeamEditionRightPanel For this, I had to add a new CSS class to make the element appear as if it was a label element as affected by Bootstrap. There's likely some cases that this won't work, but it applies the same margin and font-weight. * Don't use label for help text in TrialBanner * Don't use label for a heading in PasswordSettings * Don't use label element in table in ChannelModeration This text is more like a legend element in SettingSet, but I didn't use that because it's in a table. This could possibly be given its own CSS class. * Don't use label element for error text in AdvancedTextEditor and MessageSubmitError * Don't use label for help text and add for attribute in RenameChannelModal * Don't use label for error text in SelectTeam * Add for attribute to labels in various components * Turn jsx-a11y/label-has-associated-control to an error * Fix E2E test
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