forked from mattermost/mattermost-webapp
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[MM-27918] Add in product notices (mattermost#6448)
* MM-27198 Add in product notices
* Use Generic modal for showing notices
* Call for notices data on load of webapp
* subsequent calls are made when socket reconnects for first
time in a day
* Clear data of notices locally when modal is dismmised
* Mark a notice when modal loads or when user hits next button
* Add console settings for notices
* Update redux hash
* Fix lint
* Fix lint
* Fix snapshots
* e2e tests
* Fix comment
* Fix for desktop app version
* Add check for API data
* Fix lint
* Update utils/user_agent.tsx
Co-authored-by: Guillermo Vayá <[email protected]>
* Fix markdown
* Update redux hash
* Add TM4J test ids
* Update func name updateNoticeAsViewed to updateNoticesAsViewed
* Update redux hash
Co-authored-by: Guillermo Vayá <[email protected]>- Loading branch information
1 parent
06441b5
commit f343b2c
Showing
14 changed files
with
988 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
195 changes: 195 additions & 0 deletions
195
components/product_notices_modal/__snapshots__/product_notices.test.tsx.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,195 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`ProductNoticesModal Match snapshot for single notice 1`] = ` | ||
| <GenericModal | ||
| autoCloseOnCancelButton={false} | ||
| autoCloseOnConfirmButton={true} | ||
| cancelButtonText={null} | ||
| className="productNotices" | ||
| confirmButtonText={ | ||
| <span> | ||
| Download | ||
| </span> | ||
| } | ||
| handleConfirm={[Function]} | ||
| modalHeaderText={ | ||
| <span> | ||
| title | ||
| </span> | ||
| } | ||
| onHide={[Function]} | ||
| show={true} | ||
| > | ||
| <span | ||
| className="productNotices__helpText" | ||
| > | ||
| <Connect(Markdown) | ||
| message="descr" | ||
| /> | ||
| </span> | ||
| <div | ||
| className="productNotices__imageDiv" | ||
| /> | ||
| <div | ||
| className="productNotices__info" | ||
| /> | ||
| </GenericModal> | ||
| `; | ||
|
|
||
| exports[`ProductNoticesModal Match snapshot for user notice 1`] = ` | ||
| <GenericModal | ||
| autoCloseOnCancelButton={false} | ||
| autoCloseOnConfirmButton={true} | ||
| cancelButtonText={ | ||
| <React.Fragment> | ||
| <PreviousIcon | ||
| additionalClassName={null} | ||
| /> | ||
| <FormattedMessage | ||
| defaultMessage="Previous" | ||
| id="generic.previous" | ||
| /> | ||
| </React.Fragment> | ||
| } | ||
| className="productNotices" | ||
| confirmButtonText={ | ||
| <FormattedMessage | ||
| defaultMessage="Done" | ||
| id="generic.done" | ||
| /> | ||
| } | ||
| handleCancel={[Function]} | ||
| handleConfirm={[Function]} | ||
| modalHeaderText={ | ||
| <span> | ||
| title | ||
| </span> | ||
| } | ||
| onHide={[Function]} | ||
| show={true} | ||
| > | ||
| <span | ||
| className="productNotices__helpText" | ||
| > | ||
| <Connect(Markdown) | ||
| message="descr" | ||
| /> | ||
| </span> | ||
| <a | ||
| className="GenericModal__button actionButton" | ||
| href="http:https://download.com/path" | ||
| id="actionButton" | ||
| rel="noopener noreferrer" | ||
| target="_blank" | ||
| > | ||
| Download | ||
| </a> | ||
| <div | ||
| className="productNotices__imageDiv" | ||
| /> | ||
| <div | ||
| className="productNotices__info" | ||
| > | ||
| <span | ||
| className="tutorial__circles" | ||
| > | ||
| <a | ||
| className="circle" | ||
| data-screen={0} | ||
| href="#" | ||
| id="tutorialIntroCircle0" | ||
| key="circle0" | ||
| /> | ||
| <a | ||
| className="circle active" | ||
| data-screen={1} | ||
| href="#" | ||
| id="tutorialIntroCircle1" | ||
| key="circle1" | ||
| /> | ||
| </span> | ||
| </div> | ||
| </GenericModal> | ||
| `; | ||
|
|
||
| exports[`ProductNoticesModal Should match snapshot for system admin notice 1`] = ` | ||
| <GenericModal | ||
| autoCloseOnCancelButton={false} | ||
| autoCloseOnConfirmButton={false} | ||
| cancelButtonText={null} | ||
| className="productNotices" | ||
| confirmButtonText={ | ||
| <React.Fragment> | ||
| <FormattedMessage | ||
| defaultMessage="Next" | ||
| id="generic.next" | ||
| /> | ||
| <NextIcon | ||
| additionalClassName={null} | ||
| /> | ||
| </React.Fragment> | ||
| } | ||
| handleConfirm={[Function]} | ||
| modalHeaderText={ | ||
| <span> | ||
| for sysadmin | ||
| </span> | ||
| } | ||
| onHide={[Function]} | ||
| show={true} | ||
| > | ||
| <span | ||
| className="productNotices__helpText" | ||
| > | ||
| <Connect(Markdown) | ||
| message="your eyes only! [test](https://test.com)" | ||
| /> | ||
| </span> | ||
| <a | ||
| className="GenericModal__button actionButton" | ||
| href="http:https://download.com/path" | ||
| id="actionButton" | ||
| rel="noopener noreferrer" | ||
| target="_blank" | ||
| > | ||
| Download | ||
| </a> | ||
| <div | ||
| className="productNotices__imageDiv" | ||
| > | ||
| <img | ||
| className="productNotices__img" | ||
| src="https://raw.githubusercontent.com/reflog/notices-experiment/master/images/2020-08-11_11-42.png" | ||
| /> | ||
| </div> | ||
| <div | ||
| className="productNotices__info" | ||
| > | ||
| <span | ||
| className="tutorial__circles" | ||
| > | ||
| <a | ||
| className="circle active" | ||
| data-screen={0} | ||
| href="#" | ||
| id="tutorialIntroCircle0" | ||
| key="circle0" | ||
| /> | ||
| <a | ||
| className="circle" | ||
| data-screen={1} | ||
| href="#" | ||
| id="tutorialIntroCircle1" | ||
| key="circle1" | ||
| /> | ||
| </span> | ||
| <AdminEyeIcon /> | ||
| <FormattedMessage | ||
| defaultMessage="Visible to Admins only" | ||
| id="inProduct_notices.adminOnlyMessage" | ||
| /> | ||
| </div> | ||
| </GenericModal> | ||
| `; | ||
|
|
||
| exports[`ProductNoticesModal Should match snapshot when there are no notices 1`] = `""`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. | ||
| // See LICENSE.txt for license information. | ||
|
|
||
| import {connect} from 'react-redux'; | ||
| import {bindActionCreators, Dispatch, ActionCreatorsMapObject} from 'redux'; | ||
| import {ActionFunc} from 'mattermost-redux/types/actions'; | ||
| import {ProductNotices} from 'mattermost-redux/types/product_notices'; | ||
| import {WebsocketStatus} from 'mattermost-redux/types/websocket'; | ||
| import {getInProductNotices, updateNoticesAsViewed} from 'mattermost-redux/actions/teams'; | ||
| import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams'; | ||
| import {getConfig} from 'mattermost-redux/selectors/entities/general'; | ||
| import {ClientConfig} from 'mattermost-redux/types/config'; | ||
|
|
||
| import {getSocketStatus} from 'selectors/views/websocket'; | ||
| import {GlobalState} from 'types/store'; | ||
|
|
||
| import ProductNoticesModal from './product_notices_modal'; | ||
|
|
||
| type Actions = { | ||
| getInProductNotices: (teamId: string, client: string, clientVersion: string) => Promise<{ | ||
| data: ProductNotices; | ||
| }>; | ||
| updateNoticesAsViewed: (noticeIds: string[]) => Promise<Record<string, unknown>>; | ||
| } | ||
|
|
||
| function mapStateToProps(state: GlobalState) { | ||
| const config: Partial<ClientConfig> = getConfig(state); | ||
| const version: string = config.Version || ''; //this should always exist but TS throws error | ||
| const socketStatus: WebsocketStatus = getSocketStatus(state); | ||
|
|
||
| return { | ||
| currentTeamId: getCurrentTeamId(state), | ||
| version, | ||
| socketStatus, | ||
| }; | ||
| } | ||
|
|
||
| function mapDispatchToProps(dispatch: Dispatch) { | ||
| return { | ||
| actions: bindActionCreators<ActionCreatorsMapObject<ActionFunc>, Actions>({ | ||
| getInProductNotices, | ||
| updateNoticesAsViewed, | ||
| }, dispatch), | ||
| }; | ||
| } | ||
|
|
||
| export default connect(mapStateToProps, mapDispatchToProps)(ProductNoticesModal); |
Oops, something went wrong.