Files
mostlymatter/webapp
Nick Misasi a17f4ae5e1 [CLD-9186] Add framework for new Cloud Preview Modal (#31235)
* Remove pricing modal. Adjust everywhere to instead open mattermost.com/pricing. When air gapped, don't show buttons to view plans.

* Fix lint

* Further clean up of unused code. Fixes for linter

* Remove onboarding tasklist for previews, add Cloud previer banner

* Fixes for linter, i18n

* Revert dev lines

* Fix lint

* When below one minute, switch to seconds

* fix linter

* Add scaffolding for new Cloud Preview Modal

* Style updates

* Fix tests

* fixes for PR feedback

* useExternalLink for opening pricing modal with enriched params

* Fix i17n

* fix style

* Fix style, tests

* Fix linter, types

* Add file

* Make types even more fixed

* fix: correct test case for SKU label not provided scenario

The test "should not render SKU label when not provided" was incorrectly using baseContent which includes a SKU label. Fixed by creating contentWithoutSku that explicitly sets skuLabel to undefined to properly test the scenario where no SKU label is provided.

Co-authored-by: Nick Misasi <nickmisasi@users.noreply.github.com>

* Fine I'll do it myself

* fix linter

* Refactors

* Adjustments from PR review. Adjustments to video experience (poster/play button) and starting to translate

* Fix i18n

* Wrap translation strings with defineMessage for i18n extraction

- Add import for defineMessage and MessageDescriptor from react-intl
- Update type definition to use MessageDescriptor for better type safety  
- Wrap all skuLabel, title, and subtitle objects with defineMessage() calls
- This ensures the i18n-extract tool can properly detect translation strings

Co-authored-by: Nick Misasi <nickmisasi@users.noreply.github.com>

* Fix i18n

* Use regular modal close button

* Fix pipelines

* Fix i18n

* Update webapp/channels/src/components/cloud_preview_modal/preview_modal_content.scss

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Update webapp/channels/src/components/cloud_preview_modal/preview_modal_content.scss

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Update webapp/channels/src/components/cloud_preview_modal/preview_modal_content.scss

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Update webapp/channels/src/components/cloud_preview_modal/preview_modal_content.tsx

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Update webapp/channels/src/components/cloud_preview_modal/preview_modal_content.scss

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Update webapp/channels/src/components/cloud_preview_modal/preview_modal_content.scss

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Update webapp/channels/src/components/cloud_preview_modal/preview_modal_controller.tsx

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Update webapp/channels/src/components/cloud_preview_modal/preview_modal_controller.tsx

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Update webapp/channels/src/components/cloud_preview_modal/preview_modal_controller.scss

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Update webapp/channels/src/components/cloud_preview_modal/preview_modal_controller.tsx

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Update webapp/channels/src/components/cloud_preview_modal/preview_modal_controller.tsx

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Update webapp/channels/src/components/cloud_preview_modal/preview_modal_controller.tsx

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Update webapp/channels/src/components/cloud_preview_modal/preview_modal_controller.tsx

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Update webapp/channels/src/components/cloud_preview_modal/preview_modal_controller.scss

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Update webapp/channels/src/components/cloud_preview_modal/preview_modal_controller.scss

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Update webapp/channels/src/components/cloud_preview_modal/preview_modal_content.scss

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Update webapp/channels/src/components/cloud_preview_modal/preview_modal_content.scss

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Update webapp/channels/src/components/cloud_preview_modal/preview_modal_content.scss

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Update webapp/channels/src/components/cloud_preview_modal/preview_modal_content.scss

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Update webapp/channels/src/components/cloud_preview_modal/preview_modal_content.scss

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Update webapp/channels/src/components/cloud_preview_modal/preview_modal_content.scss

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Remove unnecessary CSS properties from preview modal content

Remove display: flex, height: 100%, and flex-direction: column from .preview-modal-content selector as they have no effect per code review feedback.

Co-authored-by: Nick Misasi <nickmisasi@users.noreply.github.com>

* Fixes for PR review

* Fix linter

* Fix i18n

* fix linter

* Changes to address Harrison's feedback

* change file name, remove index.tsx

* Add the new files

---------

Co-authored-by: claude[bot] <209825114+claude[bot]@users.noreply.github.com>
Co-authored-by: Nick Misasi <nickmisasi@users.noreply.github.com>
Co-authored-by: Mattermost Build <build@mattermost.com>
Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>
2025-06-26 16:39:40 -04:00
..
2023-03-22 17:22:27 -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.