From 2e2a84db1ca103230bcf93ea47e766f162a2d8c5 Mon Sep 17 00:00:00 2001 From: Morgan Connolly Date: Thu, 19 Nov 2020 05:47:58 -0800 Subject: [PATCH] Migrate 'components/announcement_bar/default_announcement_bar' module and associated tests to TypeScript (#6963) * rename file * working except for test file * restore unincluded test file to jsx * pass npm make check * update snapshot * respond to review comments * checkout package-lock.json * revert package-lock.json changes * fix linting errors Co-authored-by: Mattermod --- .../announcement_bar.test.jsx.snap | 70 ++++++++++++++++--- .../announcement_bar.test.jsx | 2 +- ...ouncement_bar.jsx => announcement_bar.tsx} | 53 +++++++------- .../{index.js => index.ts} | 11 +-- 4 files changed, 95 insertions(+), 41 deletions(-) rename components/announcement_bar/default_announcement_bar/{announcement_bar.jsx => announcement_bar.tsx} (87%) rename components/announcement_bar/default_announcement_bar/{index.js => index.ts} (66%) diff --git a/components/announcement_bar/__snapshots__/announcement_bar.test.jsx.snap b/components/announcement_bar/__snapshots__/announcement_bar.test.jsx.snap index 0d339dc23048..4583456fb813 100644 --- a/components/announcement_bar/__snapshots__/announcement_bar.test.jsx.snap +++ b/components/announcement_bar/__snapshots__/announcement_bar.test.jsx.snap @@ -3,7 +3,12 @@ exports[`components/AnnouncementBar should match snapshot, bar not showing 1`] = `
{ const baseProps = { diff --git a/components/announcement_bar/default_announcement_bar/announcement_bar.jsx b/components/announcement_bar/default_announcement_bar/announcement_bar.tsx similarity index 87% rename from components/announcement_bar/default_announcement_bar/announcement_bar.jsx rename to components/announcement_bar/default_announcement_bar/announcement_bar.tsx index 5d6a9a03aa62..e94386045ced 100644 --- a/components/announcement_bar/default_announcement_bar/announcement_bar.jsx +++ b/components/announcement_bar/default_announcement_bar/announcement_bar.tsx @@ -5,9 +5,12 @@ import React from 'react'; import {FormattedMessage} from 'react-intl'; -import PropTypes from 'prop-types'; import {Tooltip} from 'react-bootstrap'; +import {WarnMetricStatus} from 'mattermost-redux/types/config'; + +import {Dictionary} from 'mattermost-redux/types/utilities'; + import {Constants, AnnouncementBarTypes, ModalIdentifiers} from 'utils/constants'; import FormattedMarkdownMessage from 'components/formatted_markdown_message'; @@ -17,34 +20,32 @@ import ToggleModalButtonRedux from 'components/toggle_modal_button_redux'; import {trackEvent} from 'actions/telemetry_actions.jsx'; -export default class AnnouncementBar extends React.PureComponent { - static propTypes = { - showCloseButton: PropTypes.bool, - color: PropTypes.string, - textColor: PropTypes.string, - type: PropTypes.string, - message: PropTypes.node.isRequired, - handleClose: PropTypes.func, - announcementBarCount: PropTypes.number.isRequired, - showModal: PropTypes.bool, - modalButtonText: PropTypes.string, - modalButtonDefaultText: PropTypes.string, - showLinkAsButton: PropTypes.bool, - warnMetricStatus: PropTypes.object, - isTallBanner: PropTypes.bool, - actions: PropTypes.shape({ - incrementAnnouncementBarCount: PropTypes.func.isRequired, - decrementAnnouncementBarCount: PropTypes.func.isRequired, - }).isRequired, - } +type Props = { + showCloseButton: boolean; + color: string; + textColor: string; + type: string; + message: React.ReactNode; + handleClose?: (e?:any)=>void; + announcementBarCount?: number; + showModal?: ()=> void; + modalButtonText?: string; + modalButtonDefaultText?: string; + showLinkAsButton: boolean; + warnMetricStatus?: Dictionary; + isTallBanner: boolean; + actions: { + incrementAnnouncementBarCount: ()=>void; + decrementAnnouncementBarCount: ()=>void; + }; +} +export default class AnnouncementBar extends React.PureComponent { static defaultProps = { showCloseButton: false, color: '', textColor: '', type: AnnouncementBarTypes.CRITICAL, - handleClose: null, - onButtonClick: null, showLinkAsButton: false, isTallBanner: false, } @@ -68,7 +69,7 @@ export default class AnnouncementBar extends React.PureComponent { this.props.actions.decrementAnnouncementBarCount(); } - handleClose = (e) => { + handleClose = (e: any) => { e.preventDefault(); if (this.props.handleClose) { this.props.handleClose(); @@ -81,8 +82,8 @@ export default class AnnouncementBar extends React.PureComponent { } let barClass = 'announcement-bar'; - const barStyle = {}; - const linkStyle = {}; + const barStyle = {backgroundColor: '', color: ''}; + const linkStyle = {color: ''}; if (this.props.color && this.props.textColor) { barStyle.backgroundColor = this.props.color; barStyle.color = this.props.textColor; diff --git a/components/announcement_bar/default_announcement_bar/index.js b/components/announcement_bar/default_announcement_bar/index.ts similarity index 66% rename from components/announcement_bar/default_announcement_bar/index.js rename to components/announcement_bar/default_announcement_bar/index.ts index a170d6ba7d58..f90ea8cc1fae 100644 --- a/components/announcement_bar/default_announcement_bar/index.js +++ b/components/announcement_bar/default_announcement_bar/index.ts @@ -2,20 +2,23 @@ // See LICENSE.txt for license information. import {connect} from 'react-redux'; -import {bindActionCreators} from 'redux'; +import {bindActionCreators, Dispatch} from 'redux'; + +import {GlobalState} from 'mattermost-redux/types/store'; +import {GenericAction} from 'mattermost-redux/types/actions'; import {incrementAnnouncementBarCount, decrementAnnouncementBarCount} from 'actions/views/announcement_bar'; import {getAnnouncementBarCount} from 'selectors/views/announcement_bar'; -import AnnouncementBar from './announcement_bar.jsx'; +import AnnouncementBar from './announcement_bar'; -function mapStateToProps(state) { +function mapStateToProps(state: GlobalState) { return { announcementBarCount: getAnnouncementBarCount(state), }; } -function mapDispatchToProps(dispatch) { +function mapDispatchToProps(dispatch:Dispatch) { return { actions: bindActionCreators({ incrementAnnouncementBarCount,